/* ============================================================
   NAJD REAL ESTATE — Landing pages  ·  LIGHT THEME
   Warm white + charcoal + gold, geometric-architectural luxury
   ============================================================ */

:root{
  /* Brand palette (Najd guidelines) */
  --ink:        #282827;   /* primary text (charcoal) */
  --ink-2:      #3d3b37;
  --ink-mute:   #6b6459;   /* muted body */
  --ink-soft:   #8a8272;   /* soft labels */
  --gold:       #ffc818;   /* accent (buttons/marks) */
  --gold-soft:  #ffd75a;
  --gold-deep:  #b8860b;   /* legible gold text on light */
  --gold-ink:   #9a7100;

  --paper:      #ffffff;   /* white sections */
  --cream:      #faf8f3;   /* page base (warm white) */
  --paper-soft: #f5f2ea;   /* alt sections */
  --paper-2:    #ece5d8;   /* deeper cream (footer/bands) */
  --line:       rgba(40,40,39,.12);
  --line-soft:  rgba(40,40,39,.07);
  --line-strong:rgba(40,40,39,.20);

  --f-brand:  "Archivo", system-ui, sans-serif;
  --f-head:   "Archivo", system-ui, sans-serif;
  --f-body:   "Manrope", system-ui, -apple-system, sans-serif;
  --f-serif:  "Cormorant Garamond", Georgia, serif;

  --max: 1280px;
  --gutter: clamp(20px, 5vw, 64px);
  --r: 3px;
  --r-lg: 8px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 24px 60px -28px rgba(40,40,39,.28);
  --shadow-soft: 0 18px 44px -26px rgba(40,40,39,.20);
  --shadow-card: 0 2px 4px rgba(40,40,39,.03), 0 22px 48px -30px rgba(40,40,39,.28);

  --header-h: 76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  font-family:var(--f-body);
  background:var(--cream);
  color:var(--ink);
  font-size:clamp(16px,1.05vw,17px);
  line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--f-head);font-weight:800;line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
::selection{background:var(--gold);color:var(--ink)}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,9vw,132px);position:relative}
.section--tight{padding-block:clamp(48px,6vw,84px)}
/* section tones (class names kept from build; all light now) */
.bg-charcoal{background:var(--paper)}      /* → white */
.bg-ink{background:var(--paper-soft)}       /* → soft cream */
.bg-paper{background:var(--paper-soft)}
.bg-white{background:var(--paper)}

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-family:var(--f-brand);font-weight:600;font-size:.78rem;
  letter-spacing:.32em;text-transform:uppercase;color:var(--gold-deep);
  display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.65}
.eyebrow.center::after{content:"";width:26px;height:1px;background:currentColor;opacity:.65}
.hero .eyebrow{color:var(--gold);text-shadow:0 1px 14px rgba(0,0,0,.6),0 0 2px rgba(0,0,0,.4)}
.hero .eyebrow::before,.hero .eyebrow::after{opacity:.85}

.h-display{font-size:clamp(2.6rem,6.4vw,5rem);line-height:.98;letter-spacing:-.025em}
.h1{font-size:clamp(2.1rem,4.6vw,3.5rem)}
.h2{font-size:clamp(1.8rem,3.6vw,2.9rem);line-height:1.02}
.h3{font-size:clamp(1.25rem,2vw,1.6rem)}
.lead{font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.6;color:var(--ink-mute);font-weight:400}
.muted{color:var(--ink-mute)}
.serif{font-family:var(--f-serif);font-weight:500;font-style:italic}
.gold{color:var(--gold-deep)}

.section-head{max-width:720px;margin-bottom:clamp(36px,5vw,60px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head .h2{margin-top:.4em}
.section-head p{margin-top:1.1em}

/* ---------- Buttons ---------- */
.btn{
  --pad-y:16px;--pad-x:30px;
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  padding:var(--pad-y) var(--pad-x);
  font-family:var(--f-head);font-weight:700;font-size:.92rem;letter-spacing:.02em;
  border-radius:var(--r);line-height:1;position:relative;
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 10px 26px -12px rgba(255,200,24,.85)}
.btn-gold:hover{background:var(--gold-soft);box-shadow:0 16px 36px -14px rgba(255,200,24,.95)}
.btn-ghost{border:1px solid var(--line-strong);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink);background:rgba(40,40,39,.04)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#1c1b1a}
.btn-wa{background:#25D366;color:#0a2a17}
.btn-wa:hover{background:#2ee878;box-shadow:0 16px 40px -16px rgba(37,211,102,.55)}
.btn-lg{--pad-y:19px;--pad-x:38px;font-size:1rem}
.btn-block{width:100%}
/* ghost button over hero photos: frosted-dark backing so white text stays
   readable over bright parts of the image (sky, pale water, sand) */
.hero .btn-ghost{border-color:rgba(255,255,255,.72);color:#fff;background:rgba(18,20,22,.34);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-shadow:0 1px 8px rgba(0,0,0,.45)}
.hero .btn-ghost:hover{border-color:#fff;background:rgba(18,20,22,.5)}

/* ---------- Header / Nav ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;border-bottom:1px solid transparent;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),height .4s var(--ease),border-color .4s var(--ease);
}
.header.solid{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--line);height:66px;box-shadow:0 8px 30px -22px rgba(40,40,39,.4);
}
.header__inner{width:100%;max-width:1360px;margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:58px;width:auto;transition:height .4s var(--ease)}
.header.solid .brand img{height:48px}
@media(max-width:600px){.brand img{height:50px}.header.solid .brand img{height:44px}}
.brand .brand-dark{display:none}
.header.solid .brand-light{display:none}
.header.solid .brand-dark{display:block}
.nav{display:flex;align-items:center;gap:34px}
.nav a{font-size:.92rem;font-weight:600;color:rgba(255,255,255,.92);letter-spacing:.01em;position:relative;padding:6px 0;transition:color .25s;text-shadow:0 1px 8px rgba(0,0,0,.25)}
.header.solid .nav a{color:var(--ink-2);text-shadow:none}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--gold-deep);transition:width .3s var(--ease)}
.nav a:hover{color:#fff}
.header.solid .nav a:hover{color:var(--ink)}
.nav a:hover::after{width:100%}
.header__cta{display:flex;align-items:center;gap:14px}
.nav-tel{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.header.solid .nav-tel{color:var(--ink)}
.nav-tel svg{width:16px;height:16px;color:var(--gold)}
.header.solid .nav-tel svg{color:var(--gold-deep)}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.nav-toggle span{width:22px;height:2px;background:#fff;transition:.3s var(--ease);box-shadow:0 0 6px rgba(0,0,0,.25)}
.header.solid .nav-toggle span{background:var(--ink)}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:940px){
  .nav-toggle{display:flex}
  /* The drawer is position:fixed inside .header; a backdrop-filter on the header
     would make it the containing block and trap the drawer in the 66px header,
     cutting off items. Use an opaque header on mobile so the drawer fills the viewport. */
  .header.solid{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.98)}
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(86vw,360px);height:100%;
    background:var(--paper);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:calc(var(--header-h) + 10px) 0 32px;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    transform:translateX(105%);transition:transform .45s var(--ease);
    box-shadow:-30px 0 60px -20px rgba(40,40,39,.28);z-index:99;
  }
  .nav.open{transform:translateX(0)}
  .nav a{font-family:var(--f-head);font-size:1.3rem;font-weight:800;color:var(--ink);text-shadow:none;
    padding:15px var(--gutter);border-bottom:1px solid var(--line-soft)}
  .nav a::after{display:none}
  .nav a:hover,.nav a:active{color:var(--gold-deep)}
  .nav-scrim{position:fixed;inset:0;background:rgba(40,40,39,.45);opacity:0;visibility:hidden;transition:.4s;z-index:98}
  .nav-scrim.show{opacity:1;visibility:visible}
}

/* ---------- Hero (photo + scrim + white text) ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-top:calc(var(--header-h) + 20px);padding-bottom:clamp(48px,7vw,90px);
  color:#fff;overflow:hidden;isolation:isolate;
}
.hero--mid{min-height:88svh}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__media img{animation:kenburns 22s var(--ease) infinite alternate}
@media (prefers-reduced-motion: reduce){.hero__media img{animation:none}}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.14) translate(-1.5%,-1%)}}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(15,12,8,.5) 0%,rgba(15,12,8,.16) 30%,rgba(15,12,8,.22) 50%,rgba(15,12,8,.62) 86%,rgba(15,12,8,.85) 100%),
    linear-gradient(90deg,rgba(15,12,8,.5) 0%,rgba(15,12,8,0) 62%);
}
.hero__inner{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);position:relative}
.hero__content{max-width:780px}
.hero h1{margin-top:.3em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero .lead{color:#f0eee9;margin-top:1.1em;max-width:600px;text-shadow:0 1px 16px rgba(0,0,0,.35)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.2em}
.hero__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:2.4em}
.chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:100px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(6px);
  font-size:.82rem;font-weight:600;color:#fff}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--gold)}
.scroll-cue{position:absolute;left:var(--gutter);bottom:clamp(20px,4vw,40px);
  display:flex;align-items:center;gap:12px;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.scroll-cue .bar{width:1px;height:44px;background:linear-gradient(var(--gold),transparent);position:relative;overflow:hidden}
.scroll-cue .bar::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--gold);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{top:-50%}60%,100%{top:100%}}

.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:100px;
  font-family:var(--f-brand);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.badge--new{background:var(--gold);color:var(--ink)}
.badge--rtm{background:#e8f6ee;color:#15683c;border:1px solid #bfe6cf}
.badge--live{background:rgba(184,134,11,.12);color:var(--gold-deep);border:1px solid rgba(184,134,11,.35)}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.badge--live .dot{background:var(--gold-deep);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(184,134,11,.5)}70%{box-shadow:0 0 0 8px rgba(184,134,11,0)}100%{box-shadow:0 0 0 0 rgba(184,134,11,0)}}

/* ---------- Facts bar (gap-gridline: clean borders at any column count) ---------- */
.facts{border-block:1px solid var(--line);background:var(--line)}
.facts__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px}
.fact{padding:clamp(24px,3.4vw,40px) clamp(16px,2.4vw,32px);text-align:center;background:var(--paper)}
.fact__num{font-family:var(--f-head);font-weight:800;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1;color:var(--ink);letter-spacing:-.02em}
.fact__num .gold{color:var(--gold-deep)}
.fact__label{margin-top:.7em;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
@media(max-width:560px){.facts__grid{grid-template-columns:1fr 1fr}}
@media(max-width:360px){.fact{padding:22px 10px}.fact__label{font-size:.68rem}}

/* ---------- Split / About ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,80px);align-items:center}
.split--rev .split__media{order:2}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:36px}.split--rev .split__media{order:0}}
.split__media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.split__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.2}
.split__media .tagpin{position:absolute;left:22px;bottom:22px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);
  border:1px solid var(--line);padding:12px 18px;border-radius:var(--r);font-size:.8rem;font-weight:700;color:var(--ink)}

/* ---------- USP cards ---------- */
.usp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.usp{background:var(--paper);padding:clamp(28px,3.2vw,40px);transition:background .35s var(--ease),transform .35s var(--ease)}
.bg-paper .usp{background:var(--cream)}
.usp:hover{background:#fff}
.usp__ico{width:52px;height:52px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:var(--r);margin-bottom:22px;color:var(--gold-deep)}
.usp__ico svg{width:24px;height:24px}
.usp h3{font-size:1.15rem;font-weight:700}
.usp p{margin-top:.6em;font-size:.95rem;color:var(--ink-mute)}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;grid-auto-flow:dense}
.gallery figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r);cursor:pointer;background:var(--paper-2)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);aspect-ratio:1}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(20,15,10,.5));opacity:0;transition:opacity .4s}
.gallery figure:hover::after{opacity:1}
.gallery .g-cap{position:absolute;left:16px;bottom:14px;font-size:.8rem;font-weight:600;letter-spacing:.02em;color:#fff;z-index:2;opacity:0;transform:translateY(8px);transition:.4s var(--ease)}
.gallery figure:hover .g-cap{opacity:1;transform:none}
.g-wide{grid-column:span 8}.g-tall{grid-column:span 4;grid-row:span 2}
.g-half{grid-column:span 6}.g-third{grid-column:span 4}.g-quarter{grid-column:span 3}
.g-wide img,.g-half img{aspect-ratio:16/10}
.g-tall img{aspect-ratio:auto;height:100%}
@media(max-width:820px){
  .gallery{grid-template-columns:repeat(6,1fr)}
  .g-wide,.g-half{grid-column:span 6}.g-third{grid-column:span 3}.g-quarter{grid-column:span 3}
  .g-tall{grid-column:span 6;grid-row:span 1}.g-tall img{aspect-ratio:16/10}
}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(20,18,15,.94);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.35s var(--ease);padding:24px}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:94vw;max-height:88vh;border-radius:var(--r);box-shadow:0 30px 80px rgba(0,0,0,.6);transform:scale(.96);transition:transform .35s var(--ease)}
.lightbox.open img{transform:scale(1)}
.lb-btn{position:absolute;top:24px;right:28px;width:48px;height:48px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;background:rgba(255,255,255,.05);transition:.3s}
.lb-btn:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.6rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.25);transition:.3s}
.lb-nav:hover{background:var(--gold);color:var(--ink)}
.lb-prev{left:24px}.lb-next{right:24px}
@media(max-width:600px){.lb-nav{width:44px;height:44px}}

/* ---------- Units / residences ---------- */
.units{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:20px}
.unit{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow-card);transition:transform .35s var(--ease),border-color .35s}
.unit:hover{transform:translateY(-4px);border-color:rgba(184,134,11,.55)}
.unit__type{font-family:var(--f-head);font-weight:800;font-size:1.35rem}
.unit__sub{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-top:.3em}
.unit__spec{display:flex;gap:20px;margin:20px 0;padding:16px 0;border-block:1px solid var(--line)}
.unit__spec div{font-size:.8rem;color:var(--ink-soft)}
.unit__spec b{display:block;font-family:var(--f-head);font-size:1.05rem;color:var(--ink);font-weight:700;margin-top:2px}
.unit__price small{font-size:.78rem;color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase}
.unit__price .p{font-family:var(--f-head);font-weight:800;font-size:1.5rem;color:var(--gold-deep);margin-top:.15em}
.unit__price .p span{font-size:.85rem;color:var(--ink-soft);font-weight:600}

.utable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper)}
.utable{width:100%;border-collapse:collapse;min-width:560px}
.utable th,.utable td{text-align:left;padding:16px 22px;border-bottom:1px solid var(--line);white-space:nowrap}
.utable thead th{font-family:var(--f-brand);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;background:var(--paper-soft)}
.utable tbody tr{transition:background .25s}
.utable tbody tr:hover{background:var(--cream)}
.utable td:first-child{font-weight:700;color:var(--ink)}
.utable .price{color:var(--gold-deep);font-family:var(--f-head);font-weight:800}
.utable tbody tr:last-child td{border-bottom:none}

/* ---------- Payment plan ---------- */
.pay-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-bottom:36px}
.pay-hero .cell{background:var(--paper);padding:clamp(28px,4vw,44px) 24px;text-align:center}
.pay-hero .big{font-family:var(--f-head);font-weight:800;font-size:clamp(2.4rem,5vw,3.6rem);color:var(--gold-deep);line-height:1}
.pay-hero .lab{margin-top:.6em;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.pay-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.pay-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);box-shadow:var(--shadow-card);transition:border-color .3s,transform .3s}
.pay-row:hover{border-color:rgba(184,134,11,.5);transform:translateY(-2px)}
.pay-row .dp{font-family:var(--f-head);font-weight:800;font-size:1.2rem;color:var(--ink)}
.pay-row .dp.gold{color:var(--gold-deep)}
.pay-row .yr{font-size:.85rem;color:var(--ink-soft);text-align:right}
.pay-row .yr b{display:block;color:var(--gold-deep);font-family:var(--f-head);font-size:1.05rem}

/* ---------- Location (map removed) ---------- */
.loc{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,4vw,56px);align-items:center}
@media(max-width:860px){.loc{grid-template-columns:1fr}}
.loc-points{display:flex;flex-direction:column;gap:2px;margin-top:26px}
.loc-point{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.loc-point:last-child{border-bottom:none}
.loc-point .t{font-family:var(--f-head);font-weight:800;font-size:1.15rem;color:var(--gold-deep);min-width:92px}
.loc-point .d{font-size:.98rem;color:var(--ink-2)}
.loc-media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.loc-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/4.4}

/* ---------- Lead form / CTA (light) ---------- */
.cta{position:relative;overflow:hidden;isolation:isolate;background:var(--paper-soft)}
.cta__bg{position:absolute;inset:0;z-index:-2}
.cta__bg img{width:100%;height:100%;object-fit:cover;opacity:.9}
.cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(250,248,243,.97) 0%,rgba(250,248,243,.9) 46%,rgba(250,248,243,.72) 100%)}
.lead-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
@media(max-width:900px){.lead-wrap{grid-template-columns:1fr;gap:40px}}
.lead-copy .h2{margin-top:.3em}
.lead-copy p{margin-top:1.1em;color:var(--ink-mute)}
.lead-trust{display:flex;flex-direction:column;gap:14px;margin-top:30px}
.lead-trust li{display:flex;align-items:center;gap:14px;font-size:.98rem;color:var(--ink-2)}
.lead-trust .tk{width:30px;height:30px;border-radius:50%;background:rgba(184,134,11,.14);color:var(--gold-deep);display:flex;align-items:center;justify-content:center;flex:none}
.lead-trust .tk svg{width:15px;height:15px}

.form-card{background:var(--paper);color:var(--ink);border-radius:var(--r-lg);padding:clamp(28px,3.4vw,44px);box-shadow:var(--shadow),0 2px 6px rgba(40,40,39,.04);border:1px solid var(--line)}
.form-card h3{font-size:1.5rem}
.form-card .sub{color:var(--ink-soft);margin-top:.4em;margin-bottom:26px;font-size:.95rem}
.field{margin-bottom:16px}
.field label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:7px}
.field .req{color:var(--gold-deep)}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;font-family:var(--f-body);font-size:1rem;color:var(--ink);background:var(--cream);border:1.5px solid var(--line);border-radius:var(--r);transition:.25s var(--ease)}
.field input::placeholder,.field textarea::placeholder{color:#a49d8f}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;background:#fff;border-color:var(--gold)}
.field textarea{resize:vertical;min-height:84px}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235c574d' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:460px){.field-row{grid-template-columns:1fr}}
.form-consent{font-size:.78rem;color:var(--ink-soft);margin-top:4px;line-height:1.5}
.form-actions{margin-top:22px;display:flex;flex-direction:column;gap:12px}
.form-msg{padding:14px 16px;border-radius:var(--r);font-size:.9rem;font-weight:600;display:none}
.form-msg.show{display:block}
.form-msg.ok{background:#e8f6ee;color:#15683c}
.form-msg.err{background:#fdecec;color:#b3261e}
.field.invalid input,.field.invalid select{border-color:#e5484d;background:#fff}
.field .err-txt{display:none;font-size:.76rem;color:#c62a2f;margin-top:5px;font-weight:600;text-transform:none;letter-spacing:0}
.field.invalid .err-txt{display:block}
.form-success{text-align:center;padding:20px 0;display:none}
.form-success.show{display:block}
.form-success .tick{width:70px;height:70px;border-radius:50%;background:#e8f6ee;color:#1f9d57;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.form-success .tick svg{width:34px;height:34px}
.form-success p{color:var(--ink-soft);margin-top:.5em}

/* ---------- Project cards (hub) ---------- */
.proj-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2vw,26px)}
@media(max-width:860px){.proj-grid{grid-template-columns:1fr}}
.proj{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:clamp(440px,54vw,600px);display:flex;align-items:flex-end;color:#fff;isolation:isolate;box-shadow:var(--shadow)}
.proj__media{position:absolute;inset:0;z-index:-2}
.proj__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.proj:hover .proj__media img{transform:scale(1.07)}
.proj::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,15,10,.42) 0%,rgba(20,15,10,.06) 32%,rgba(20,15,10,.55) 68%,rgba(20,15,10,.92) 100%)}
.proj__body{padding:clamp(26px,3.2vw,40px);width:100%}
.proj__top{position:absolute;top:24px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:flex-start;z-index:2}
.proj__dev{font-family:var(--f-brand);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(0,0,0,.4)}
.proj__name{font-family:var(--f-head);font-weight:800;font-size:clamp(2rem,4vw,2.9rem);line-height:1;letter-spacing:-.02em;color:#fff}
.proj__loc{display:flex;align-items:center;gap:8px;margin-top:.6em;color:#f0ede7;font-size:.95rem}
.proj__loc svg{width:15px;height:15px;color:var(--gold)}
.proj__meta{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.2)}
.proj__meta .m small{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.proj__meta .m b{font-family:var(--f-head);font-weight:700;font-size:1.05rem;color:#fff}
.proj__cta{display:flex;align-items:center;gap:10px;margin-top:24px;font-family:var(--f-head);font-weight:700;font-size:1rem;color:#fff}
.proj__cta .arw{width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--ink);display:flex;align-items:center;justify-content:center;transition:.35s var(--ease)}
.proj__cta .arw svg{width:18px;height:18px;flex:none}
.proj:hover .proj__cta .arw{transform:translateX(6px)}

/* ---------- Unit search (hub) ---------- */
.usearch{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:clamp(20px,2.4vw,30px);position:relative;z-index:3}
.usearch__grid{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:16px;align-items:end}
@media(max-width:900px){.usearch__grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.usearch__grid{grid-template-columns:1fr}}
.usearch .field{margin-bottom:0}
.usearch__btn{align-self:end}
@media(max-width:900px){.usearch__btn{grid-column:1/-1}}
.usearch__count{margin:26px 0 22px;font-size:.9rem;color:var(--ink-soft);display:flex;align-items:center;gap:10px}
.usearch__count b{color:var(--ink);font-family:var(--f-head)}
.uresults{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:18px}
.ucard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .35s var(--ease),border-color .35s;display:flex;flex-direction:column}
.ucard:hover{transform:translateY(-4px);border-color:rgba(184,134,11,.5)}
.ucard__img{position:relative;aspect-ratio:16/10;overflow:hidden}
.ucard__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.ucard:hover .ucard__img img{transform:scale(1.06)}
.ucard__badge{position:absolute;top:12px;left:12px}
.ucard__proj{position:absolute;bottom:10px;left:12px;font-family:var(--f-brand);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.ucard__body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.ucard__type{font-family:var(--f-head);font-weight:800;font-size:1.2rem}
.ucard__sub{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-top:.25em}
.ucard__spec{display:flex;gap:16px;margin:16px 0;flex-wrap:wrap}
.ucard__spec span{font-size:.85rem;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.ucard__spec svg{width:15px;height:15px;color:var(--gold-deep)}
.ucard__foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.ucard__price small{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.ucard__price b{font-family:var(--f-head);font-weight:800;font-size:1.25rem;color:var(--gold-deep)}
.ucard__price b.poa{font-size:1rem;letter-spacing:.01em}
.unit-hero__price b.poa{font-size:clamp(1.4rem,2.6vw,1.9rem)}
.ucard__go{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;transition:.3s var(--ease)}
.ucard__go svg{width:18px;height:18px;flex:none}
.ucard__go:hover{background:var(--gold);color:var(--ink)}
.uresults__empty{grid-column:1/-1;text-align:center;padding:40px 20px;color:var(--ink-soft);border:1px dashed var(--line);border-radius:var(--r-lg)}
.ucard__img{display:block}
a.ucard__type{transition:color .25s}
a.ucard__type:hover{color:var(--gold-deep)}

/* ---------- Unit detail page ---------- */
.unit-back{display:inline-flex;align-items:center;gap:9px;color:#fff;font-family:var(--f-head);font-weight:700;font-size:.9rem;
  padding:9px 16px 9px 12px;border:1px solid rgba(255,255,255,.28);border-radius:100px;background:rgba(255,255,255,.08);
  backdrop-filter:blur(6px);margin-bottom:20px;transition:.3s var(--ease)}
.unit-back svg{width:16px;height:16px;transform:rotate(180deg)}
.unit-back:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.unit-hero__price{margin-top:22px;display:flex;align-items:baseline;gap:12px}
.unit-hero__price small{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.unit-hero__price b{font-family:var(--f-head);font-weight:800;font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--gold-soft);text-shadow:0 2px 20px rgba(0,0,0,.4)}
.feat-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
@media(max-width:520px){.feat-list{grid-template-columns:1fr}}
.feat-list li{display:flex;align-items:flex-start;gap:12px;font-size:.98rem;color:var(--ink-2)}
.feat-list .tk{width:26px;height:26px;border-radius:50%;background:rgba(184,134,11,.14);color:var(--gold-deep);display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.feat-list .tk svg{width:14px;height:14px}

/* ---------- Footer (light) ---------- */
.footer{background:var(--paper-2);padding-block:clamp(56px,7vw,88px) 32px;border-top:1px solid var(--line)}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line-strong)}
@media(max-width:800px){.footer__top{grid-template-columns:1fr 1fr;gap:36px 24px}}
@media(max-width:480px){.footer__top{grid-template-columns:1fr}}
.footer img.flogo{height:74px;margin-bottom:22px}
.footer p{color:var(--ink-mute);font-size:.92rem;max-width:280px}
.footer h4{font-family:var(--f-brand);font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);margin-bottom:18px;font-weight:600}
.footer li{margin-bottom:11px}
.footer a{color:var(--ink-mute);font-size:.94rem;transition:color .25s}
.footer a:hover{color:var(--gold-deep)}
.footer .fcontact li{display:flex;gap:12px;align-items:flex-start;color:var(--ink-mute);font-size:.94rem}
.footer .fcontact svg{width:17px;height:17px;color:var(--gold-deep);flex:none;margin-top:3px}
.footer__bottom{padding-top:26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink-soft);font-size:.82rem}
.footer__bottom a{color:var(--ink-soft)}
.footer__disc{max-width:820px;color:#948c7d;font-size:.76rem;line-height:1.6;margin-top:22px}

/* ---------- Floating WhatsApp (clean circular FAB + tooltip) ---------- */
.wa-float{position:fixed;right:24px;bottom:24px;z-index:90;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.5),0 4px 12px rgba(0,0,0,.12);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.wa-float svg{width:28px;height:28px;color:#fff;flex:none}
.wa-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 18px 42px -8px rgba(37,211,102,.6),0 6px 16px rgba(0,0,0,.16)}
.wa-float span{position:absolute;right:70px;top:50%;transform:translateY(-50%) translateX(8px);
  background:var(--ink);color:#fff;font-size:.85rem;font-weight:600;padding:9px 14px;border-radius:8px;white-space:nowrap;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .26s var(--ease),transform .26s var(--ease);
  box-shadow:0 10px 28px -10px rgba(0,0,0,.35)}
.wa-float span::after{content:"";position:absolute;right:-4px;top:50%;transform:translateY(-50%) rotate(45deg);width:9px;height:9px;background:var(--ink)}
.wa-float:hover span{opacity:1;visibility:visible;transform:translateY(-50%) translateX(0)}
@media(max-width:600px){.wa-float{width:56px;height:56px;right:16px;bottom:16px}.wa-float span{display:none}}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Decorative ---------- */
.geo-rule{display:flex;align-items:center;gap:14px;color:var(--gold-deep)}
.geo-rule::before,.geo-rule::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--line-strong))}
.geo-rule .dia{width:9px;height:9px;border:1px solid var(--gold-deep);transform:rotate(45deg)}
.geo-rule .dia.fill{background:var(--gold-deep)}

/* ---------- Confirmation pages (thank-you / whatsapp) ---------- */
.confirm{min-height:100svh;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px var(--gutter);background:var(--cream)}
.confirm__logo{height:60px;width:auto;margin-bottom:38px}
.confirm .cico{width:96px;height:96px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:28px}
.confirm .cico.ok{background:#e8f6ee;color:#1f9d57}
.confirm .cico.wa{background:#25D366;color:#fff}
.confirm .cico svg{width:46px;height:46px}
.confirm h1{font-size:clamp(1.9rem,5vw,2.9rem)}
.confirm p{color:var(--ink-mute);margin-top:14px;max-width:460px;font-size:1.05rem}
.confirm__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:34px}
.spinner{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--gold-deep);border-radius:50%;animation:spin 1s linear infinite;margin:24px auto 0}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spinner{animation:none}}

/* ============================================================
   Language toggle button (header)
   ============================================================ */
.lang-toggle{font-family:"Cairo",system-ui,-apple-system,sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.02em;
  color:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.45);border-radius:100px;
  padding:8px 14px;line-height:1;transition:.25s var(--ease);text-shadow:0 1px 8px rgba(0,0,0,.3);white-space:nowrap}
.header.solid .lang-toggle{color:var(--ink-2);border-color:var(--line-strong);text-shadow:none}
.lang-toggle:hover{border-color:var(--gold);color:#fff}
.header.solid .lang-toggle:hover{color:var(--gold-deep);border-color:var(--gold-deep)}
.confirm .lang-toggle{color:var(--ink-2);border-color:var(--line-strong);text-shadow:none}

/* ============================================================
   Arabic / RTL
   ============================================================ */
:root[dir="rtl"]{
  --f-body:"Cairo", system-ui, sans-serif;
  --f-head:"Cairo", system-ui, sans-serif;
  --f-brand:"Cairo", sans-serif;
  --f-serif:"Amiri", Georgia, serif;
}
[dir="rtl"] body{font-family:var(--f-body)}
/* Arabic doesn't use Latin letter-spacing or the tight negative tracking */
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,[dir="rtl"] h4,
[dir="rtl"] .h-display,[dir="rtl"] .h1,[dir="rtl"] .h2,[dir="rtl"] .h3{letter-spacing:0;line-height:1.28}
[dir="rtl"] .h-display,[dir="rtl"] .hero h1{line-height:1.18}
[dir="rtl"] .eyebrow{letter-spacing:.06em}
[dir="rtl"] .fact__label,[dir="rtl"] .unit__sub,[dir="rtl"] .ucard__sub,[dir="rtl"] .utable thead th,
[dir="rtl"] .footer h4,[dir="rtl"] .badge,[dir="rtl"] .proj__dev,[dir="rtl"] .field label,
[dir="rtl"] .loc-point .t,[dir="rtl"] .btn,[dir="rtl"] .nav a,[dir="rtl"] .form-consent{letter-spacing:0}
[dir="rtl"] .hero .lead,[dir="rtl"] .lead{line-height:1.7}
/* mobile drawer slides in from the left in RTL */
@media(max-width:940px){
  [dir="rtl"] .nav{inset:0 auto 0 0;transform:translateX(-105%);box-shadow:30px 0 60px -20px rgba(40,40,39,.28)}
  [dir="rtl"] .nav.open{transform:translateX(0)}
}
/* directional arrows flip */
[dir="rtl"] .proj__cta .arw svg,[dir="rtl"] .ucard__go svg{transform:scaleX(-1)}
[dir="rtl"] .proj:hover .proj__cta .arw{transform:translateX(-6px)}
[dir="rtl"] .ucard:hover .ucard__go,[dir="rtl"] .unit-back svg{transform:none}
[dir="rtl"] .unit-back svg{transform:scaleX(-1)}
/* select chevron to the left */
[dir="rtl"] .field select{background-position:left 16px center;padding-right:16px;padding-left:40px}
/* table + nav underline */
[dir="rtl"] .utable th,[dir="rtl"] .utable td{text-align:right}
[dir="rtl"] .nav a::after{left:auto;right:0}
/* hero side-scrim darkens the right, where RTL text sits */
[dir="rtl"] .hero__scrim{background:
  linear-gradient(180deg,rgba(15,12,8,.5) 0%,rgba(15,12,8,.16) 30%,rgba(15,12,8,.22) 50%,rgba(15,12,8,.62) 86%,rgba(15,12,8,.85) 100%),
  linear-gradient(270deg,rgba(15,12,8,.5) 0%,rgba(15,12,8,0) 62%)}
[dir="rtl"] .scroll-cue{left:auto;right:var(--gutter)}
[dir="rtl"] .split__media .tagpin{left:auto;right:22px}
[dir="rtl"] .ucard__badge{left:auto;right:12px}
[dir="rtl"] .ucard__proj{left:auto;right:12px}
[dir="rtl"] .g-cap{left:auto;right:16px}
[dir="rtl"] .form-success .tick svg,[dir="rtl"] .lead-trust .tk svg,[dir="rtl"] .feat-list .tk svg,[dir="rtl"] .usp__ico svg{transform:none}

/* small utilities */
.text-center{text-align:center}
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:44px}
.maxw-680{max-width:680px}.mx-auto{margin-inline:auto}
.nowrap{white-space:nowrap}.hide{display:none !important}
.gold-line{width:54px;height:3px;background:var(--gold);border-radius:2px}

/* ============================================================
   MOBILE POLISH (≤640px) — even spacing, big tap targets,
   fix the unit-hero cramming, cleaner gallery/forms
   ============================================================ */
@media (max-width:640px){
  /* Heroes: full-width stacked CTAs, tidy chips, drop scroll cue */
  .hero__actions{flex-direction:column;align-items:stretch;gap:12px;margin-top:1.8em}
  .hero__actions .btn{width:100%}
  .hero .lead{margin-top:1em}
  .hero__chips{margin-top:1.7em;gap:8px}
  .scroll-cue{display:none}

  /* Unit detail hero: size to content so price/chips never overlap */
  .unit-hero{min-height:auto;padding-top:calc(var(--header-h) + 20px);padding-bottom:36px}
  .unit-hero .hero__content{max-width:none}
  .unit-back{margin-bottom:16px}
  .unit-hero .h1{font-size:2.3rem}
  .unit-hero__price{margin-top:14px}
  .unit-hero__price b{font-size:2rem}

  /* Section rhythm a touch tighter on phones */
  .section{padding-block:clamp(52px,13vw,74px)}
  .section-head{margin-bottom:30px}

  /* Forms: comfortable inputs; 16px stops iOS zoom-on-focus */
  .form-card{padding:26px 20px}
  .field input,.field select,.field textarea{padding:14px 15px;font-size:16px}

  /* Payment hero: single column reads cleaner than 2+1 */
  .pay-hero{grid-template-columns:1fr}

  /* Gallery: clean single-column stack on phones */
  .gallery{grid-template-columns:1fr;gap:12px}
  .gallery figure,.g-wide,.g-half,.g-third,.g-tall,.g-quarter{grid-column:auto !important;grid-row:auto !important}
  .gallery img,.g-wide img,.g-half img,.g-tall img{aspect-ratio:16/10}
  .gallery .g-cap{opacity:1;transform:none}

  /* WhatsApp FAB: a hair smaller, clear of the edges */
  .wa-float{width:52px;height:52px;right:14px;bottom:14px}
  .wa-float svg{width:26px;height:26px}

  /* Header: keep the CTA compact so logo + button + menu always fit */
  .header__cta .btn{--pad-x:20px;font-size:.85rem}
}
@media (max-width:400px){
  .h-display{font-size:2.3rem;line-height:1.02}
  .hero--perla h1{font-size:2.7rem}
  .unit-hero .h1{font-size:2rem}
  :root{--gutter:18px}
}