/* =========================================================================
   New Home Development — Design System (preview build)
   Black · White · Brand Gold #B9A25E   |   RTL first   |   Cairo + Montserrat
   ========================================================================= */

/* ---------- 1. Tokens -------------------------------------------------- */
:root{
  /* brand */
  --gold:        #B9A25E;
  --gold-soft:   #D8C48A;
  --gold-deep:   #8C7638;
  --ink:         #0A0A0A;
  --ink-2:       #121212;
  --ink-3:       #1C1C1C;
  --paper:       #FFFFFF;
  --smoke:       #F5F4F1;
  --smoke-2:     #EDEBE5;
  --muted:       #6E6E6E;
  --muted-dark:  rgba(255,255,255,.62);
  --line:        rgba(10,10,10,.10);
  --line-gold:   rgba(185,162,94,.32);
  --line-dark:   rgba(255,255,255,.12);

  /* type */
  --ff:      "Cairo", "Segoe UI", system-ui, sans-serif;
  --ff-en:   "Montserrat", "Cairo", sans-serif;

  --fs-hero:  clamp(2.35rem, 6.2vw, 5.6rem);
  /* --nh-hs / --nh-bs: heading and text scale from «تصميم الموقع» (inc/customizer.php) */
  --fs-h1:    calc(clamp(2.2rem, 4.6vw, 3.9rem) * var(--nh-hs, 1));
  --fs-h2:    calc(clamp(1.85rem, 3.6vw, 3.05rem) * var(--nh-hs, 1));
  --fs-h3:    calc(clamp(1.25rem, 2vw, 1.6rem) * var(--nh-hs, 1));
  --fs-lead:  calc(clamp(1.02rem, 1.35vw, 1.22rem) * var(--nh-bs, 1));
  --fs-body:  calc(1rem * var(--nh-bs, 1));
  --fs-sm:    calc(.875rem * var(--nh-bs, 1));
  --fs-xs:    calc(.78rem * var(--nh-bs, 1));

  /* rhythm */
  --wrap:     1280px;
  --wrap-nar: 940px;
  --gutter:   clamp(20px, 4vw, 56px);
  --sec-y:    clamp(72px, 9vw, 148px);

  /* surface */
  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;
  --shadow:    0 18px 50px -28px rgba(10,10,10,.42);
  --shadow-lg: 0 40px 90px -40px rgba(10,10,10,.55);

  /* motion */
  --e-out:  cubic-bezier(.22,.61,.36,1);
  --e-soft: cubic-bezier(.4,0,.2,1);
  --e-luxe: cubic-bezier(.16,1,.3,1);
  --t:      .45s var(--e-out);

  --header-h: 92px;
}

/* ---------- 2. Reset --------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ff); font-size:var(--fs-body); font-weight:400;
  line-height:1.85; letter-spacing:0;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }
img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea,select{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure,ul{ margin:0; }
ul{ list-style:none; padding:0; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--gold); color:#fff; }

/* ---------- 3. Utilities ----------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:var(--wrap-nar); }
.sec{ padding-block:var(--sec-y); position:relative; }
.sec--smoke{ background:var(--smoke); }
.sec--dark{ background:var(--ink); color:#fff; }
.sec--tight{ padding-block:clamp(52px,6vw,92px); }
.center{ text-align:center; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.num{ font-family:var(--ff-en); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:.02em; }

/* eyebrow — small gold label with a rule */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-size:var(--fs-xs); font-weight:600; letter-spacing:.16em;
  color:var(--gold); text-transform:uppercase; margin-bottom:20px;
}
.eyebrow::before{
  content:""; width:38px; height:1px; background:var(--gold); opacity:.7; flex:none;
}
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{ content:""; width:38px; height:1px; background:var(--gold); opacity:.7; }

/* headings */
.h1{ font-size:var(--fs-h1); }
.h2{ font-size:var(--fs-h2); }
.h3{ font-size:var(--fs-h3); }
.h1,.h2,.h3{ font-weight:700; line-height:1.24; letter-spacing:-.01em; }
.lead{ font-size:var(--fs-lead); color:var(--muted); line-height:1.95; max-width:62ch; }
.sec--dark .lead{ color:var(--muted-dark); }
.center .lead{ margin-inline:auto; }

/* the gold hairline that separates thoughts */
.rule{ width:56px; height:2px; background:var(--gold); margin-block:24px; border-radius:2px; }
.center .rule{ margin-inline:auto; }

/* ---------- 4. Buttons ------------------------------------------------- */
.btn{
  --bg:var(--gold); --fg:#0A0A0A; --bd:var(--gold);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 34px; border-radius:100px;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  font-weight:600; font-size:.95rem; letter-spacing:.01em;
  overflow:hidden; isolation:isolate; white-space:nowrap;
  transition:color .4s var(--e-out), border-color .4s var(--e-out), transform .4s var(--e-out);
}
.btn::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--ink); transform:translateY(101%);
  transition:transform .5s var(--e-luxe);
}
.btn:hover{ color:#fff; border-color:var(--ink); }
.btn:hover::before{ transform:translateY(0); }
.btn:active{ transform:scale(.98); }
.btn svg{ width:18px; height:18px; flex:none; }

.btn--dark{ --bg:var(--ink); --fg:#fff; --bd:var(--ink); }
.btn--dark::before{ background:var(--gold); }
.btn--dark:hover{ color:var(--ink); border-color:var(--gold); }

.btn--ghost{ --bg:transparent; --fg:currentColor; --bd:var(--line-gold); }
.btn--ghost::before{ background:var(--gold); }
.btn--ghost:hover{ color:var(--ink); border-color:var(--gold); }

.btn--light{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.5); }
.btn--light::before{ background:#fff; }
.btn--light:hover{ color:var(--ink); border-color:#fff; }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.center .btn-row{ justify-content:center; }

/* text link with animated gold underline */
.tlink{
  display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:.95rem;
  color:var(--gold); position:relative; padding-block:4px;
}
.tlink::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:inline-end;
  transition:transform .5s var(--e-luxe);
}
.tlink:hover::after{ transform:scaleX(1); transform-origin:inline-start; }
.tlink svg{ width:16px; height:16px; transition:transform .4s var(--e-out); }
.tlink:hover svg{ transform:translateX(-5px); }

/* ---------- 5. Preloader ----------------------------------------------- */
.loader{
  display:none;
  position:fixed; inset:0; z-index:9999; background:var(--ink);
  place-items:center; gap:26px;
  transition:opacity .7s var(--e-out), visibility .7s;
}
.loader__logo{ width:190px; opacity:0; animation:loaderIn .9s var(--e-out) .1s forwards; }
.loader__bar{ width:180px; height:2px; background:rgba(255,255,255,.14); overflow:hidden; border-radius:2px; }
.loader__bar i{
  display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft));
  animation:loaderBar 1.1s var(--e-out) .15s forwards;
}
@keyframes loaderIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes loaderBar{ to{ width:100%; } }
.js .loader{ display:grid; }
body.ready .loader{ opacity:0; visibility:hidden; }

/* ---------- 6. Header -------------------------------------------------- */
.hdr{
  position:fixed; inset-inline:0; top:0; z-index:900;
  transition:background .5s var(--e-out), box-shadow .5s var(--e-out),
             border-color .5s var(--e-out), transform .6s var(--e-out);
  border-bottom:1px solid transparent;
}
.hdr__in{
  height:var(--header-h); display:flex; align-items:center; gap:clamp(16px,3vw,42px);
  transition:height .45s var(--e-out);
}
.hdr__logo{ flex:none; display:block; }
.hdr__logo img{ height:44px; width:auto; transition:height .45s var(--e-out), opacity .35s; }
.hdr__logo .logo-dark{ display:none; }

.nav{ display:flex; align-items:center; gap:clamp(6px,1.6vw,22px); margin-inline-end:auto; }
.nav a{
  position:relative; padding:10px 4px; font-size:.94rem; font-weight:500;
  color:rgba(255,255,255,.9); transition:color .35s var(--e-out); white-space:nowrap;
}
.nav a::after{
  content:""; position:absolute; inset-inline-start:4px; bottom:2px; height:1.5px;
  width:calc(100% - 8px); background:var(--gold);
  transform:scaleX(0); transform-origin:inline-end; transition:transform .45s var(--e-luxe);
}
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:inline-start; }
.nav a[aria-current="page"]{ color:var(--gold); }

.hdr__act{ display:flex; align-items:center; gap:12px; flex:none; }
.hdr__phone{
  display:inline-flex; align-items:center; gap:9px; font-size:.9rem; font-weight:600;
  color:#fff; padding:10px 6px; transition:color .35s;
}
.hdr__phone svg{ width:17px; height:17px; color:var(--gold); }
.hdr__phone:hover{ color:var(--gold); }
.hdr__wa{
  display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 22px;
  border-radius:100px; background:var(--gold); color:var(--ink); font-weight:600; font-size:.9rem;
  transition:background .4s var(--e-out), color .4s var(--e-out), transform .3s;
}
.hdr__wa svg{ width:18px; height:18px; }
.hdr__wa:hover{ background:#fff; transform:translateY(-2px); }

/* scrolled state */
.hdr.is-solid{
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--line); box-shadow:0 10px 40px -30px rgba(0,0,0,.4);
}
.hdr.is-solid .hdr__in{ height:74px; }
.hdr.is-solid .hdr__logo img{ height:38px; }
.hdr.is-solid .hdr__logo .logo-light{ display:none; }
.hdr.is-solid .hdr__logo .logo-dark{ display:block; }
.hdr.is-solid .nav a{ color:var(--ink); }
.hdr.is-solid .nav a[aria-current="page"]{ color:var(--gold-deep); }
.hdr.is-solid .hdr__phone{ color:var(--ink); }
.hdr.is-hidden{ transform:translateY(-100%); }

/* burger */
.burger{ display:none; width:46px; height:46px; place-items:center; border-radius:50%; border:1px solid var(--line-dark); }
.burger span{ display:block; width:20px; height:1.5px; background:#fff; margin:4px 0; transition:transform .4s var(--e-out), opacity .3s; }
.hdr.is-solid .burger{ border-color:var(--line); }
.hdr.is-solid .burger span{ background:var(--ink); }

/* mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:890; background:var(--ink); color:#fff;
  display:flex; flex-direction:column; justify-content:center; padding:110px var(--gutter) 48px;
  clip-path:circle(0% at 92% 6%); transition:clip-path .75s var(--e-luxe); visibility:hidden;
}
.drawer.is-open{ clip-path:circle(150% at 92% 6%); visibility:visible; }
.drawer a.drawer__link{
  display:block; font-size:clamp(1.5rem,7vw,2.3rem); font-weight:600; padding:14px 0;
  border-bottom:1px solid var(--line-dark); opacity:0; transform:translateY(18px);
}
.drawer.is-open a.drawer__link{ animation:drawerIn .6s var(--e-out) forwards; }
.drawer.is-open a.drawer__link:nth-child(1){ animation-delay:.18s }
.drawer.is-open a.drawer__link:nth-child(2){ animation-delay:.24s }
.drawer.is-open a.drawer__link:nth-child(3){ animation-delay:.30s }
.drawer.is-open a.drawer__link:nth-child(4){ animation-delay:.36s }
.drawer.is-open a.drawer__link:nth-child(5){ animation-delay:.42s }
@keyframes drawerIn{ to{ opacity:1; transform:none; } }
.drawer__foot{ margin-top:38px; display:flex; flex-direction:column; gap:14px; }

/* ---------- 7. Hero ---------------------------------------------------- */
.hero{
  position:relative; min-height:100svh; display:grid; align-items:center;
  color:#fff; overflow:hidden; isolation:isolate;
}
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__media video,.hero__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.12); animation:kenburns 22s var(--e-soft) infinite alternate;
}
@keyframes kenburns{ from{ transform:scale(1.12); } to{ transform:scale(1.24) translate3d(1.5%,-1.5%,0); } }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(10,10,10,.94) 0%, rgba(10,10,10,.55) 42%, rgba(10,10,10,.42) 70%, rgba(10,10,10,.72) 100%),
    radial-gradient(120% 90% at 78% 30%, rgba(185,162,94,.16), transparent 62%);
}
.hero__in{ padding-block:calc(var(--header-h) + 40px) 150px; text-align:var(--nh-hal, start); }
.hero__title{
  font-size:calc(var(--fs-hero) * var(--nh-ht, 1)); font-weight:800; line-height:1.14; letter-spacing:-.022em;
  max-width:18ch; margin-bottom:22px; margin-inline:var(--nh-hmi, 0);
}
.hero__title .gold{
  font-size:calc(var(--nh-hg, 1) * 1em);
  background:linear-gradient(100deg,var(--gold-soft),var(--gold) 45%,var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__text{ font-size:var(--fs-lead); color:rgba(255,255,255,.8); max-width:56ch; line-height:1.95; display:var(--nh-hlead, block); margin-inline:var(--nh-hmi, 0); }
.hero .btn-row{ justify-content:var(--nh-hjc, flex-start); }

/* hero bottom bar: quick stats + scroll cue */
.hero__bar{
  position:absolute; inset-inline:0; bottom:0; z-index:2;
  border-top:1px solid rgba(255,255,255,.14);
  background:linear-gradient(to top, rgba(10,10,10,.55), transparent);
  backdrop-filter:blur(3px);
}
.hero__bar .wrap{ display:flex; align-items:center; gap:clamp(18px,4vw,60px); padding-block:24px; flex-wrap:wrap; }
.hero__fact{ display:flex; flex-direction:column; gap:2px; }
.hero__fact b{ font-family:var(--ff-en); font-size:1.5rem; font-weight:600; color:var(--gold); line-height:1.2; }
.hero__fact span{ font-size:var(--fs-xs); color:rgba(255,255,255,.6); letter-spacing:.04em; }
.hero__scroll{ margin-inline-start:auto; display:inline-flex; align-items:center; gap:12px; font-size:var(--fs-xs); color:rgba(255,255,255,.62); letter-spacing:.12em; }
.hero__scroll i{ display:block; width:1px; height:38px; background:linear-gradient(to bottom,transparent,var(--gold)); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; inset-inline:0; top:-100%; height:100%; background:var(--gold); animation:scrollCue 1.9s var(--e-soft) infinite; }
@keyframes scrollCue{ to{ top:100%; } }

/* word-by-word headline reveal */
.split .word{ display:inline-block; overflow:hidden; vertical-align:top; }
.js .split .word > span{ display:inline-block; transform:translateY(105%); transition:transform .95s var(--e-luxe); }
.split.is-in .word > span{ transform:translateY(0); }

/* ---------- 8. Page hero (inner pages) --------------------------------- */
.phero{
  position:relative; color:#fff; overflow:hidden; isolation:isolate;
  padding-block:calc(var(--header-h) + clamp(70px,9vw,120px)) clamp(70px,9vw,120px);
  background:var(--ink);
}
.phero__media{ position:absolute; inset:0; z-index:-2; }
.phero__media img,.phero__media video{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); }
.phero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,10,.92), rgba(10,10,10,.62) 55%, rgba(10,10,10,.78));
}
.phero__title{ font-size:calc(var(--fs-h1) * var(--nh-pt, 1)); font-weight:800; line-height:1.2; letter-spacing:-.02em; }
/* inner-page title alignment from «تصميم الموقع» (project heroes keep their own layout) */
.phero:not(.phero--shot){ text-align:var(--nh-pal, start); }
.phero:not(.phero--shot) .crumbs{ justify-content:var(--nh-pjc, flex-start); }
.phero:not(.phero--shot) .phero__text{ margin-inline:var(--nh-pmi, 0); }
.phero__text{ margin-top:16px; color:rgba(255,255,255,.76); font-size:var(--fs-lead); max-width:58ch; }

/* breadcrumbs */
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; font-size:var(--fs-xs); color:rgba(255,255,255,.6); margin-bottom:20px; }
.crumbs a:hover{ color:var(--gold); }
.crumbs span{ opacity:.45; }
.crumbs b{ color:var(--gold); font-weight:600; }

/* ---------- 9. Marquee ------------------------------------------------- */
.marquee{
  background:var(--ink); color:#fff; padding-block:26px; overflow:hidden;
  border-block:1px solid rgba(255,255,255,.08);
}
.marquee__track{ display:flex; gap:0; width:max-content; animation:marquee 38s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{
  display:inline-flex; align-items:center; gap:36px; padding-inline:36px;
  font-family:var(--ff-en); font-size:clamp(1.1rem,2vw,1.6rem); font-weight:600;
  letter-spacing:.06em; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.34);
  white-space:nowrap;
}
.marquee__track span::after{ content:""; width:7px; height:7px; background:var(--gold); border-radius:50%; -webkit-text-stroke:0; flex:none; }
@keyframes marquee{ to{ transform:translateX(50%); } }

/* ---------- 10. Reveal system ------------------------------------------ */
.js .rv{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--e-out), transform .9s var(--e-luxe); }
.rv.is-in{ opacity:1; transform:none; }
.rv[data-d="1"]{ transition-delay:.09s } .rv[data-d="2"]{ transition-delay:.18s }
.rv[data-d="3"]{ transition-delay:.27s } .rv[data-d="4"]{ transition-delay:.36s }
.rv[data-d="5"]{ transition-delay:.45s } .rv[data-d="6"]{ transition-delay:.54s }

/* image wipe reveal */
.mask{ position:relative; overflow:hidden; }
.js .mask{ clip-path:inset(0 0 100% 0); transition:clip-path 1.25s var(--e-luxe); }
.mask.is-in{ clip-path:inset(0 0 0 0); }
.mask img{ width:100%; height:100%; object-fit:cover; }
.js .mask img{ transform:scale(1.18); transition:transform 1.5s var(--e-luxe); }
.mask.is-in img{ transform:scale(1); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .rv,.mask{ opacity:1; transform:none; clip-path:none; }
  .split .word > span{ transform:none; }
}

/* ---------- 11. Section head ------------------------------------------- */
.shead{ margin-bottom:clamp(38px,5vw,64px); }
.shead--split{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.shead--split .shead__t{ max-width:60ch; }

/* ---------- 12. Split (image + text) ----------------------------------- */
.split-2{
  display:grid; grid-template-columns:1.02fr 1fr; gap:clamp(32px,5vw,84px); align-items:center;
}
.split-2--rev{ grid-template-columns:1fr 1.02fr; }
.figure-frame{ position:relative; }
.figure-frame .mask{ border-radius:var(--r-lg); aspect-ratio:4/5; }
/* The offset gold outline that used to sit behind these figures is gone: it
   read as a stray artifact rather than a flourish, and any image with
   transparency showed the whole box through itself. */
.figure-badge{
  position:absolute; inset-inline-start:-18px; bottom:34px;
  background:var(--gold); color:var(--ink); border-radius:var(--r);
  padding:18px 26px; box-shadow:var(--shadow); text-align:center;
}
.figure-badge b{ display:block; font-family:var(--ff-en); font-size:2rem; font-weight:700; line-height:1; }
.figure-badge span{ font-size:var(--fs-xs); font-weight:600; }

/* checklist */
.ticks{ display:grid; gap:14px; margin-top:26px; }
.ticks li{ display:flex; gap:12px; align-items:flex-start; font-size:.98rem; }
.ticks svg{ width:20px; height:20px; color:var(--gold); flex:none; margin-top:5px; }

/* ---------- 13. Stats -------------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); border-block:1px solid var(--line-dark); }
.stat{ background:var(--ink); padding:clamp(30px,4vw,52px) clamp(18px,2.4vw,34px); text-align:center; transition:background .5s var(--e-out); }
.stat:hover{ background:var(--ink-3); }
.stat b{
  display:block; font-family:var(--ff-en); font-weight:600; line-height:1;
  font-size:clamp(2.3rem,4.6vw,3.5rem);
  background:linear-gradient(160deg,var(--gold-soft),var(--gold) 55%,var(--gold-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat span{ display:block; margin-top:12px; font-size:.92rem; color:rgba(255,255,255,.68); }

/* Home counters: three figures, one row, equal widths on every screen (client) */
[data-sec="home.numbers"] .stats{ grid-template-columns:repeat(3,1fr); }
@media (max-width:760px){
  [data-sec="home.numbers"] .stat{ padding:26px 6px; }
  [data-sec="home.numbers"] .stat b{ font-size:1.6rem; }
  [data-sec="home.numbers"] .stat span{ margin-top:8px; font-size:.76rem; line-height:1.5; }
}

/* ---------- 14. Cards -------------------------------------------------- */
.grid{ display:grid; gap:clamp(20px,2.4vw,32px); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

/* project card */
.pcard{
  position:relative; display:block; background:var(--paper); border-radius:var(--r-lg);
  overflow:hidden; border:1px solid var(--line); box-shadow:0 2px 14px -10px rgba(0,0,0,.3);
  transition:transform .6s var(--e-luxe), box-shadow .6s var(--e-out), border-color .6s;
  height:100%;
}
.pcard:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:var(--line-gold); }
.pcard__img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--smoke-2); }
.pcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--e-luxe); }
.pcard:hover .pcard__img img{ transform:scale(1.08); }
.pcard__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,10,.55), transparent 52%);
  opacity:.85; transition:opacity .5s;
}
.pcard__tag{
  position:absolute; inset-inline-start:16px; top:16px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 15px; border-radius:100px; font-size:var(--fs-xs); font-weight:600;
  background:rgba(255,255,255,.94); color:var(--ink); backdrop-filter:blur(6px);
}
.pcard__tag i{ width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none; }
.pcard__tag--sold{ background:rgba(10,10,10,.82); color:#fff; }
.pcard__tag--sold i{ background:#9a9a9a; }
.pcard__loc{
  position:absolute; inset-inline-start:18px; bottom:16px; z-index:2;
  display:inline-flex; align-items:center; gap:7px; color:#fff; font-size:var(--fs-sm); font-weight:500;
}
.pcard__loc svg{ width:15px; height:15px; color:var(--gold); }
.pcard__body{ padding:26px clamp(20px,2vw,28px) 28px; display:flex; flex-direction:column; gap:12px; }
.pcard__body h3{ font-size:1.28rem; font-weight:700; transition:color .35s; }
.pcard:hover .pcard__body h3{ color:var(--gold-deep); }
.pcard__body p{ color:var(--muted); font-size:.94rem; line-height:1.8; }
.pcard__meta{
  display:flex; flex-wrap:wrap; gap:8px 20px; padding-top:16px; margin-top:auto;
  border-top:1px solid var(--line); font-size:var(--fs-sm); color:var(--muted);
}
.pcard__meta b{ color:var(--ink); font-family:var(--ff-en); font-weight:600; }
.pcard__cta{ display:inline-flex; align-items:center; gap:8px; color:var(--gold-deep); font-weight:600; font-size:.92rem; }
.pcard__cta svg{ width:15px; height:15px; transition:transform .4s var(--e-out); }
.pcard:hover .pcard__cta svg{ transform:translateX(-5px); }

/* feature card (why us) */
.fcard{
  padding:clamp(28px,3vw,40px); border-radius:var(--r-lg); background:var(--paper);
  border:1px solid var(--line); height:100%; position:relative; overflow:hidden;
  transition:transform .55s var(--e-luxe), border-color .5s, box-shadow .5s;
}
.fcard::before{
  content:""; position:absolute; inset-inline-start:0; top:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--gold),transparent);
  transform:scaleX(0); transform-origin:inline-start; transition:transform .7s var(--e-luxe);
}
.fcard:hover{ transform:translateY(-6px); border-color:var(--line-gold); box-shadow:var(--shadow); }
.fcard:hover::before{ transform:scaleX(1); }
.fcard__ic{
  width:58px; height:58px; border-radius:16px; display:grid; place-items:center;
  background:rgba(185,162,94,.1); color:var(--gold-deep); margin-bottom:22px;
  transition:background .5s, color .5s, transform .5s var(--e-out);
}
.fcard__ic svg{ width:26px; height:26px; }
.fcard:hover .fcard__ic{ background:var(--gold); color:#fff; transform:rotate(-6deg) scale(1.05); }
.fcard h3{ font-size:1.16rem; font-weight:700; margin-bottom:10px; }
.fcard p{ color:var(--muted); font-size:.94rem; line-height:1.85; }
.sec--dark .fcard{ background:var(--ink-2); border-color:var(--line-dark); }
.sec--dark .fcard p{ color:var(--muted-dark); }
.sec--dark .fcard__ic{ background:rgba(185,162,94,.14); color:var(--gold); }

/* ---------- 15. Video band --------------------------------------------- */
.vband{
  position:relative; min-height:clamp(440px,62vh,660px); display:grid; place-items:center;
  color:#fff; text-align:center; overflow:hidden; isolation:isolate;
}
.vband__media{ position:absolute; inset:0; z-index:-2; }
.vband__media video{ width:100%; height:100%; object-fit:cover; }
.vband__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,10,10,.72), rgba(10,10,10,.6));
}
.vband__in{ padding-block:clamp(60px,8vw,100px); }
.vband h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.28; max-width:20ch; margin-inline:auto; }
.vband p{ margin-top:18px; color:rgba(255,255,255,.78); font-size:var(--fs-lead); max-width:56ch; margin-inline:auto; }
.vplay{
  width:88px; height:88px; border-radius:50%; display:grid; place-items:center; margin:0 auto 30px;
  border:1px solid rgba(255,255,255,.4); color:#fff; position:relative;
  transition:background .45s var(--e-out), color .45s, border-color .45s;
}
.vplay::after{
  content:""; position:absolute; inset:-1px; border-radius:50%; border:1px solid var(--gold);
  animation:pulse 2.6s var(--e-soft) infinite;
}
@keyframes pulse{ 0%{ transform:scale(1); opacity:.9 } 100%{ transform:scale(1.55); opacity:0 } }
.vplay:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.vplay svg{ width:26px; height:26px; margin-inline-start:3px; }

/* ---------- 16. Steps -------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,30px); position:relative; }
.steps::before{
  content:""; position:absolute; inset-inline:6%; top:33px; height:1px;
  background:repeating-linear-gradient(90deg,var(--line-gold) 0 8px,transparent 8px 16px);
}
.step{ position:relative; text-align:center; }
.step b{
  width:66px; height:66px; border-radius:50%; display:grid; place-items:center; margin:0 auto 22px;
  background:var(--paper); border:1px solid var(--line-gold); color:var(--gold-deep);
  font-family:var(--ff-en); font-size:1.15rem; font-weight:600; position:relative; z-index:1;
  transition:background .5s var(--e-out), color .5s, transform .5s var(--e-out);
}
.step:hover b{ background:var(--gold); color:#fff; transform:translateY(-4px); }
.step h3{ font-size:1.1rem; font-weight:700; margin-bottom:8px; }
.step p{ color:var(--muted); font-size:.93rem; line-height:1.8; }
.sec--smoke .step b{ background:var(--smoke); }

/* ---------- 17. Accordion / FAQ ---------------------------------------- */
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__q{
  width:100%; display:flex; align-items:center; gap:18px; text-align:start;
  padding:26px 4px; font-size:1.06rem; font-weight:600; line-height:1.6;
  transition:color .35s var(--e-out);
}
.acc__q:hover{ color:var(--gold-deep); }
.acc__q i{
  margin-inline-start:auto; flex:none; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line-gold); display:grid; place-items:center; position:relative;
  transition:background .4s var(--e-out), border-color .4s, transform .5s var(--e-out);
}
.acc__q i::before,.acc__q i::after{
  content:""; position:absolute; background:var(--gold-deep); border-radius:2px;
  transition:transform .45s var(--e-luxe), background .4s;
}
.acc__q i::before{ width:13px; height:1.5px; }
.acc__q i::after{ width:1.5px; height:13px; }
.acc__item.is-open .acc__q i{ background:var(--gold); border-color:var(--gold); transform:rotate(180deg); }
.acc__item.is-open .acc__q i::before,.acc__item.is-open .acc__q i::after{ background:#fff; }
.acc__item.is-open .acc__q i::after{ transform:scaleY(0); }
.acc__a{ overflow:hidden; height:0; transition:height .55s var(--e-luxe); }
.acc__a p{ padding:0 4px 28px; color:var(--muted); line-height:1.95; max-width:78ch; }

/* ---------- 18. Filter bar --------------------------------------------- */
.filters{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  padding:clamp(16px,2vw,22px); border-radius:var(--r-lg);
  background:var(--paper); border:1px solid var(--line); box-shadow:var(--shadow);
}
.chip{
  padding:11px 22px; border-radius:100px; border:1px solid var(--line);
  font-size:.9rem; font-weight:600; color:var(--muted);
  transition:background .4s var(--e-out), color .4s, border-color .4s, transform .3s;
}
.chip:hover{ border-color:var(--gold); color:var(--ink); }
.chip.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.chip.is-on:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.filters__count{ margin-inline-start:auto; font-size:var(--fs-sm); color:var(--muted); }
.filters__count b{ color:var(--gold-deep); font-family:var(--ff-en); }

.empty{
  padding:clamp(48px,7vw,90px) 24px; text-align:center; border:1px dashed var(--line-gold);
  border-radius:var(--r-lg); background:var(--paper);
}
.empty svg{ width:52px; height:52px; color:var(--gold); opacity:.6; margin-bottom:18px; }

/* ---------- 19. Timeline ----------------------------------------------- */
.tl{ position:relative; padding-inline-start:0; }
.tl::before{
  content:""; position:absolute; inset-inline-start:19px; top:10px; bottom:10px; width:1px;
  background:linear-gradient(to bottom,var(--gold),var(--line-gold),transparent);
}
.tl__item{ position:relative; padding-inline-start:62px; padding-bottom:46px; }
.tl__item:last-child{ padding-bottom:0; }
.tl__item::before{
  content:""; position:absolute; inset-inline-start:12px; top:9px; width:15px; height:15px;
  border-radius:50%; background:var(--paper); border:2px solid var(--gold);
  box-shadow:0 0 0 5px rgba(185,162,94,.14);
}
.tl__y{ font-family:var(--ff-en); font-size:1.35rem; font-weight:700; color:var(--gold-deep); line-height:1.3; }
.tl__item h3{ font-size:1.1rem; font-weight:700; margin:6px 0 8px; }
.tl__item p{ color:var(--muted); font-size:.95rem; line-height:1.9; max-width:62ch; }
.sec--dark .tl__item::before{ background:var(--ink); }
.sec--dark .tl__item p{ color:var(--muted-dark); }

/* ---------- 20. Forms -------------------------------------------------- */
.form{ display:grid; gap:20px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ display:grid; gap:9px; }
.field label{ font-size:.9rem; font-weight:600; }
.field label span{ color:var(--gold-deep); }
.field input,.field textarea,.field select{
  width:100%; min-height:56px; padding:15px 20px; border-radius:var(--r);
  background:var(--paper); border:1px solid var(--line); color:var(--ink);
  transition:border-color .35s var(--e-out), box-shadow .35s, background .35s;
}
.field textarea{ min-height:140px; resize:vertical; line-height:1.8; }
.field select{ appearance:none; background-image:linear-gradient(45deg,transparent 49%,var(--gold) 50%),linear-gradient(-45deg,transparent 49%,var(--gold) 50%); background-size:6px 6px,6px 6px; background-position:left 22px top 26px,left 16px top 26px; background-repeat:no-repeat; }
.field input::placeholder,.field textarea::placeholder{ color:#A9A9A9; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(185,162,94,.14);
}
.field small{ font-size:var(--fs-xs); color:var(--muted); }
.form__note{ font-size:var(--fs-xs); color:var(--muted); line-height:1.8; }

/* contact info cards */
.icard{
  display:flex; gap:18px; padding:26px; border-radius:var(--r-lg);
  background:var(--paper); border:1px solid var(--line); height:100%;
  transition:border-color .45s, transform .5s var(--e-luxe), box-shadow .5s;
}
.icard:hover{ border-color:var(--line-gold); transform:translateY(-4px); box-shadow:var(--shadow); }
.icard__ic{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:rgba(185,162,94,.1); color:var(--gold-deep); flex:none; }
.icard__ic svg{ width:22px; height:22px; }
.icard h3{ font-size:1.02rem; font-weight:700; margin-bottom:6px; }
.icard p,.icard a{ color:var(--muted); font-size:.94rem; line-height:1.8; }
.icard a:hover{ color:var(--gold-deep); }

.map{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line);
  aspect-ratio:16/7; background:var(--smoke-2); display:grid; place-items:center; color:var(--muted);
}
.map iframe{ width:100%; height:100%; border:0; filter:grayscale(1) contrast(1.05); transition:filter .6s; }
.map:hover iframe{ filter:grayscale(0); }

/* ---------- 21. CTA band ----------------------------------------------- */
.ctaband{ position:relative; background:var(--ink); color:#fff; overflow:hidden; isolation:isolate; }
.ctaband::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(70% 120% at 85% 0%, rgba(185,162,94,.20), transparent 60%),
    radial-gradient(60% 100% at 10% 100%, rgba(185,162,94,.12), transparent 60%);
}
.ctaband__in{ padding-block:clamp(64px,8vw,120px); text-align:center; }
.ctaband h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.28; max-width:22ch; margin-inline:auto; }
.ctaband p{ margin-top:18px; color:rgba(255,255,255,.75); font-size:var(--fs-lead); max-width:58ch; margin-inline:auto; }

/* ---------- 22. Footer ------------------------------------------------- */
.ftr{ background:var(--ink-2); color:rgba(255,255,255,.72); padding-top:clamp(60px,7vw,90px); }
.ftr__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:clamp(28px,4vw,60px); padding-bottom:56px; }
.ftr__logo img{ height:52px; width:auto; margin-bottom:22px; }
.ftr p{ font-size:.94rem; line-height:1.9; max-width:38ch; }
.ftr h4{ font-size:.95rem; font-weight:700; color:#fff; margin-bottom:20px; letter-spacing:.02em; }
.ftr h4::after{ content:""; display:block; width:26px; height:2px; background:var(--gold); margin-top:10px; border-radius:2px; }
.ftr__links{ display:grid; gap:12px; }
.ftr__links a{ font-size:.93rem; display:inline-flex; align-items:center; gap:9px; transition:color .35s, transform .35s var(--e-out); }
.ftr__links a::before{ content:""; width:0; height:1px; background:var(--gold); transition:width .35s var(--e-out); }
.ftr__links a:hover{ color:#fff; }
.ftr__links a:hover::before{ width:14px; }
.ftr__c{ display:flex; gap:12px; align-items:flex-start; font-size:.93rem; margin-bottom:16px; line-height:1.75; }
.ftr__c svg{ width:18px; height:18px; color:var(--gold); flex:none; margin-top:5px; }
.ftr__c a:hover{ color:#fff; }
.socials{ display:flex; gap:10px; margin-top:22px; }
.socials a{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-dark); transition:background .4s var(--e-out), color .4s, border-color .4s, transform .4s;
}
.socials a svg{ width:17px; height:17px; }
.socials a:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink); transform:translateY(-3px); }
.ftr__bar{
  border-top:1px solid var(--line-dark); padding-block:24px;
  display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  font-size:var(--fs-xs);
}
/* legal links: present, but the quietest thing on the page (client) */
.ftr__bar nav{ display:flex; gap:14px; flex-wrap:wrap; font-size:.7rem; opacity:.55; transition:opacity .3s; }
.ftr__bar nav:hover,.ftr__bar nav:focus-within{ opacity:1; }
.ftr__bar a:hover{ color:var(--gold); }

/* ---------- 23. Floating actions --------------------------------------- */
.fab{
  position:fixed; inset-inline-end:22px; bottom:22px; z-index:850;
  display:flex; flex-direction:column; gap:12px; align-items:center;
}
.fab a,.fab button{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:var(--ink); color:#fff; box-shadow:var(--shadow);
  transition:transform .4s var(--e-out), background .4s, opacity .4s, visibility .4s;
}
.fab svg{ width:24px; height:24px; }
.fab a:hover,.fab button:hover{ transform:translateY(-4px) scale(1.05); }
.fab .fab-wa{ background:#25D366; color:#fff; position:relative; }
.fab .fab-wa::after{
  content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366;
  animation:pulse 2.4s var(--e-soft) infinite;
}
.fab .fab-top{ opacity:0; visibility:hidden; background:var(--gold); color:var(--ink); }
.fab.is-up .fab-top{ opacity:1; visibility:visible; }

/* mobile sticky action bar */
.mobar{ display:none; }

/* preview notice */
.pnote{
  position:fixed; inset-inline-start:16px; bottom:18px; z-index:840;
  display:flex; align-items:center; gap:10px; max-width:min(92vw,360px);
  padding:11px 16px; border-radius:100px; font-size:var(--fs-xs); line-height:1.5;
  background:rgba(10,10,10,.9); color:rgba(255,255,255,.85);
  border:1px solid var(--line-gold); backdrop-filter:blur(8px);
  transition:opacity .4s, transform .4s;
}
.pnote i{ width:8px; height:8px; border-radius:50%; background:var(--gold); flex:none; }
.pnote button{ margin-inline-start:6px; color:var(--gold); font-size:1.1rem; line-height:1; }
.pnote.is-off{ opacity:0; transform:translateY(12px); pointer-events:none; }

/* scroll progress */
.prog{ position:fixed; inset-inline:0; top:0; height:2px; z-index:950; background:transparent; }
.prog i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gold-deep),var(--gold-soft)); }

/* ---------- 24. Responsive --------------------------------------------- */
@media (max-width:1100px){
  .grid--4{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); row-gap:40px; }
  .steps::before{ display:none; }
  .ftr__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:980px){
  :root{ --header-h:76px; }
  .nav,.hdr__phone{ display:none; }
  .burger{ display:grid; }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .split-2,.split-2--rev{ grid-template-columns:1fr; }
  .figure-frame{ order:-1; max-width:560px; }
  .figure-frame .mask{ aspect-ratio:5/4; }
  .figure-frame .mask--video{ aspect-ratio:auto; }
  .stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .hdr__wa span{ display:none; }
  .hdr__wa{ width:46px; padding:0; justify-content:center; }
  .grid--3,.grid--2,.grid--4{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; }
  .ftr__grid{ grid-template-columns:1fr; gap:38px; }
  .hero__bar .wrap{ gap:22px; padding-block:18px; }
  .hero__scroll{ display:none; }
  .hero__fact b{ font-size:1.25rem; }
  .shead--split{ align-items:flex-start; }
  .figure-badge{ inset-inline-start:auto; inset-inline-end:14px; bottom:-16px; padding:14px 20px; }

  /* mobile action bar replaces the FAB stack */
  /* the sticky bar already carries WhatsApp on mobile — don't duplicate it,
     and keep both floaters clear of the hero's fact strip */
  .fab{ inset-inline-end:16px; bottom:76px; }
  .fab .fab-wa{ display:none; }
  /* dock the preview badge under the header on mobile so it never sits on
     top of the hero's fact strip */
  .pnote{ top:calc(var(--header-h) + 10px); bottom:auto; inset-inline-start:12px; inset-inline-end:12px; max-width:none; }
  /* keep the hero's fact bar clear of the fixed action bar */
  .hero{ min-height:calc(100svh - 60px); }
  .hdr__logo img{ height:36px; }
  .hdr.is-solid .hdr__logo img{ height:32px; }
  .mobar{
    display:grid; grid-template-columns:1fr 1fr; gap:1px; position:fixed; inset-inline:0; bottom:0;
    z-index:860; background:var(--line-dark); box-shadow:0 -10px 30px -20px rgba(0,0,0,.5);
  }
  .mobar a{
    display:flex; align-items:center; justify-content:center; gap:9px; min-height:60px;
    background:var(--ink); color:#fff; font-weight:600; font-size:.95rem;
  }
  .mobar a svg{ width:19px; height:19px; }
  .mobar a.is-wa{ background:#25D366; color:#fff; }
  body{ padding-bottom:60px; }
}

/* ---------- 25. Portfolio gallery -------------------------------------- */
.gal{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,24px); grid-auto-flow:dense;
}
.gal__i{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:4/3; background:var(--smoke-2); cursor:pointer;
}
.gal__i--tall{ grid-row:span 2; aspect-ratio:3/4; }
.gal__i--wide{ grid-column:span 2; aspect-ratio:16/9; }
.gal__i img{ width:100%; height:100%; object-fit:cover; }
.gal__i::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,10,.78), rgba(10,10,10,.05) 55%);
  opacity:0; transition:opacity .5s var(--e-out);
}
.gal__i:hover::after{ opacity:1; }
.gal__i figcaption{
  position:absolute; inset-inline:0; bottom:0; z-index:2; padding:22px 24px;
  color:#fff; opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--e-out), transform .55s var(--e-luxe);
}
.gal__i:hover figcaption{ opacity:1; transform:none; }
.gal__i figcaption b{ display:block; font-size:1.05rem; font-weight:700; }
.gal__i figcaption span{ font-size:var(--fs-sm); color:rgba(255,255,255,.72); }
.gal__i.is-in img{ transform:scale(1); }
.gal__i:hover img{ transform:scale(1.06); }

/* Even variant: every tile the same shape. Used wherever the images are the
   client's own photography, which arrives in mixed sizes — the editorial
   mosaic only reads well with images chosen for their slot. */
.gal--even{ grid-auto-flow:row; }
.gal--even .gal__i,
.gal--even .gal__i--tall,
.gal--even .gal__i--wide{ grid-column:auto; grid-row:auto; aspect-ratio:4/3; }

@media (max-width:980px){
  .gal{ grid-template-columns:repeat(2,1fr); }
  .gal__i--wide{ grid-column:span 2; }
}
@media (max-width:640px){
  .gal{ grid-template-columns:1fr; }
  .gal__i,.gal__i--tall,.gal__i--wide{ grid-column:auto; grid-row:auto; aspect-ratio:4/3; }
  .gal__i figcaption{ opacity:1; transform:none; }
  .gal__i::after{ opacity:1; }
}

/* =========================================================================
   WordPress integration — menus, forms rendered by the plugin, admin bar
   ========================================================================= */

/* nav menus come wrapped in <li> */
.nav > li,
.drawer > li{ list-style:none; }
.nav{ margin:0; padding:0; }
.nav .current-menu-item > a,
.nav .current_page_item > a{ color:var(--gold); }
.nav .current-menu-item > a::after,
.nav .current_page_item > a::after{ transform:scaleX(1); transform-origin:inline-start; }
.hdr.is-solid .nav .current-menu-item > a,
.hdr.is-solid .nav .current_page_item > a{ color:var(--gold-deep); }

body.admin-bar .hdr{ top:32px; }
@media (max-width:782px){ body.admin-bar .hdr{ top:46px; } }

/* the shared inquiry form comes from newhome-core; give it this design system */
.nh-form{ display:grid; gap:20px; }
.nh-form__title{ font-size:var(--fs-h3); font-weight:700; }
.nh-form__intro{ color:var(--muted); font-size:.96rem; line-height:1.85; }
.nh-form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.nh-field{ display:grid; gap:9px; }
.nh-field--full{ grid-column:1 / -1; }
.nh-field label{ font-size:.9rem; font-weight:600; }
.nh-field label span{ color:var(--gold-deep); }
.nh-field input,
.nh-field textarea,
.nh-field select{
  width:100%; min-height:56px; padding:15px 20px; border-radius:var(--r);
  background:var(--paper); border:1px solid var(--line); color:var(--ink);
  transition:border-color .35s var(--e-out), box-shadow .35s;
}
.nh-field textarea{ min-height:140px; resize:vertical; line-height:1.8; }
.nh-field input::placeholder,
.nh-field textarea::placeholder{ color:#A9A9A9; }
.nh-field input:focus,
.nh-field textarea:focus,
.nh-field select:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 4px rgba(185,162,94,.14);
}
.nh-form__note{ font-size:var(--fs-xs); color:var(--muted); line-height:1.8; }
.nh-hp{ position:absolute; top:0; left:0; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* clipped in place: a big negative offset widens RTL pages on phones */

/* the plugin's button classes, mapped onto this design's button */
.nh-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 34px; border-radius:100px;
  background:var(--gold); color:var(--ink); border:1px solid var(--gold);
  font-weight:600; font-size:.95rem; overflow:hidden; isolation:isolate;
  transition:color .4s var(--e-out), border-color .4s var(--e-out);
}
.nh-btn::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--ink); transform:translateY(101%); transition:transform .5s var(--e-luxe);
}
.nh-btn:hover{ color:#fff; border-color:var(--ink); }
.nh-btn:hover::before{ transform:translateY(0); }
.nh-btn--block{ width:100%; }

/* success / error notice after a submission */
.nh-note{
  padding:18px 22px; border-radius:var(--r); margin-bottom:22px;
  border:1px solid var(--line-gold); background:rgba(185,162,94,.08); font-size:.96rem;
}
.nh-note--err{ border-color:rgba(190,60,60,.35); background:rgba(190,60,60,.06); }

@media (max-width:760px){
  .nh-form__grid{ grid-template-columns:1fr; }
}

/* editor-written body copy on a generic page */
.nhx-prose h2{ font-size:var(--fs-h2); font-weight:700; margin:36px 0 14px; }
.nhx-prose h3{ font-size:var(--fs-h3); font-weight:700; margin:28px 0 12px; }
.nhx-prose p{ margin-bottom:18px; color:var(--muted); line-height:1.95; }
.nhx-prose ul{ list-style:disc; padding-inline-start:22px; margin-bottom:18px; color:var(--muted); }
.nhx-prose li{ margin-bottom:8px; }
.nhx-prose a{ color:var(--gold-deep); text-decoration:underline; text-underline-offset:3px; }
.nhx-prose img{ border-radius:var(--r-lg); margin:24px 0; }

/* A page hero with no media still needs a ground of its own */
.phero--plain{ background:var(--ink); }
.phero--plain .phero__media{ display:none; }

/* A slot holding a video rather than a photo: keep the whole frame visible —
   these are usually infographics, and cropping would cut the text off. */
/* beats `.figure-frame .mask{aspect-ratio:4/5}`, which would crop it again */
.mask--video,
.figure-frame .mask--video{ aspect-ratio:auto; background:var(--ink); }
.mask--video video{ width:100%; height:100%; object-fit:contain; display:block; }
.js .mask--video video{ transform:none; }

/* The year badge is designed to overlap a tall photo. A video frame is short
   and wide, so there the badge sits under it instead of covering it. */
.figure-frame:has(.mask--video) .figure-badge{
  position:static;
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  margin-top:18px;
}
.figure-frame:has(.mask--video) .figure-badge b{ display:inline; }

/* A logo or graphic in a figure frame is shown whole on white, never cropped;
   the extra room at the bottom keeps the year badge off the wordmark. */
.figure-frame .mask--fit{ aspect-ratio:1/1; background:#fff; border:1px solid var(--line); }
.mask--fit img{ object-fit:contain; padding:10% 12% 22%; }

/* =========================================================================
   Completed work — the self-scrolling strip on the home page
   ========================================================================= */
.pstrip{
  position:relative; overflow:hidden;
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
  -webkit-mask-image:linear-gradient(to left, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(to left, transparent, #000 6%, #000 94%, transparent);
}
.pstrip__track{
  display:flex; gap:clamp(14px,1.6vw,22px); width:max-content;
  animation:pstrip 60s linear infinite;
}
.pstrip:hover .pstrip__track,
.pstrip:focus-within .pstrip__track{ animation-play-state:paused; }
@keyframes pstrip{ to{ transform:translateX(50%); } }

.pcardx{
  flex:none; width:clamp(210px,22vw,280px);
  border-radius:var(--r-lg); overflow:hidden;
  background:var(--ink-2); border:1px solid var(--line-dark);
  display:flex; flex-direction:column;
}
/* One tile, one shape. The source photographs run from 9:16 to 3:2, so they
   fill the tile and the overflow is trimmed on screen — every card then reads
   as exactly the same size. The uploaded files are never altered. */
/* flex:none — the cards are stretched to a common height by the flex track,
   and without this the picture box absorbs the difference and each one ends
   up a slightly different size. */
.pcardx__img{ flex:none; position:relative; aspect-ratio:3/4; background:#0F0F0F; overflow:hidden; }
/* absolutely placed: a 9:16 photo with height:100% against an auto-height box
   resolves to its own intrinsic height and stretches the tile, which is what
   made some cards taller than others. Taking it out of flow pins every tile. */
.pcardx__img img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}
.pcardx__cap{
  flex:1 1 auto;
  padding:14px 16px 16px; display:flex; flex-direction:column; gap:4px;
  border-top:1px solid var(--line-dark);
}
.pcardx__cap b{ font-size:.92rem; font-weight:600; color:#fff; line-height:1.5; }
.pcardx__cap .num{ font-size:var(--fs-xs); color:var(--gold); }

@media (prefers-reduced-motion:reduce){
  .pstrip{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .pstrip__track{ animation:none; }
}
@media (max-width:760px){
  .pcardx{ width:clamp(180px,58vw,230px); }
  .pstrip__track{ animation-duration:45s; }
}

/* =========================================================================
   Portfolio gallery — one tile shape, nothing cropped
   ========================================================================= */
.gal--fit{ grid-auto-flow:row; }
.gal--fit .gal__i,
.gal--fit .gal__i--tall,
.gal--fit .gal__i--wide{
  grid-column:auto; grid-row:auto; aspect-ratio:3/4; background:#0F0F0F;
}
.gal--fit .gal__i img{ object-fit:cover; object-position:center; }
.gal--fit .gal__i::after{ opacity:1; }
.gal--fit .gal__i figcaption{ opacity:1; transform:none; }

/* The current district leads the page and is marked as such */
.gal__i--newest{ outline:2px solid var(--gold); outline-offset:-2px; }
.gal__badge{
  position:absolute; inset-inline-start:14px; top:14px; z-index:3;
  padding:6px 14px; border-radius:100px;
  background:var(--gold); color:var(--ink);
  font-size:var(--fs-xs); font-weight:700;
}

/* A video in a split figure earns more room than a photograph would */
.split-2:has(.mask--video){ grid-template-columns:1.6fr 1fr; }
.split-2--rev:has(.mask--video){ grid-template-columns:1fr 1.6fr; }
@media (max-width:980px){
  .split-2:has(.mask--video),
  .split-2--rev:has(.mask--video){ grid-template-columns:1fr; }
  .figure-frame:has(.mask--video){ max-width:none; }
}


/* A band that takes its own video's proportions: the clip runs the full width
   of the page and nothing is cut off. Narrow screens fall back to a readable
   minimum height, because the overlaid heading needs room to sit. */
.vband--fit{ min-height:0; aspect-ratio:var(--vband-ratio, 16/9); }
.vband--fit .vband__media{ background:var(--ink); }
.vband--fit .vband__media video,
.vband--fit .vband__media img{ object-fit:contain; }
.vband--fit .vband__in{ padding-block:clamp(28px,4vw,64px); }

@media (max-width:900px){
  .vband--fit{ aspect-ratio:auto; min-height:clamp(420px,68vh,560px); }
  .vband--fit .vband__media video,
  .vband--fit .vband__media img{ object-fit:cover; }
}

/* =========================================================================
   Project cards in a scrolling strip
   ========================================================================= */
.pstrip--cards .pcard{
  flex:none; width:clamp(250px,25vw,310px); height:auto;
}
.pstrip--cards .pstrip__track{ align-items:stretch; animation-duration:75s; }
.pstrip--cards .pcard:hover{ transform:none; }

/* =========================================================================
   Floor plans — the rendering above stays, this switches underneath it
   ========================================================================= */
.plans{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow);
}
.plans__tabs{
  display:flex; gap:4px; padding:10px; overflow-x:auto;
  background:var(--smoke-2); border-bottom:1px solid var(--line);
}
.plans__tab{
  flex:none; padding:12px 22px; border-radius:100px; white-space:nowrap;
  font-size:.92rem; font-weight:600; color:var(--muted);
  transition:background .35s var(--e-out), color .35s var(--e-out);
}
.plans__tab:hover{ color:var(--ink); background:rgba(255,255,255,.7); }
.plans__tab.is-on{ background:var(--ink); color:#fff; }

.plans__panel{
  display:grid; grid-template-columns:1.7fr 1fr;
  gap:clamp(20px,2.6vw,36px); padding:clamp(18px,2.4vw,32px);
}
.plans__panel[hidden]{ display:none; }

/* A drawing is line work on white — it is fitted whole, never cropped, and
   never tinted by the surrounding surface. */
.plans__sheet{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; display:grid; place-items:center;
  min-height:280px;
}
.plans__sheet img{ width:100%; height:auto; display:block; }
.plans__zoom,
.plans__pdf{
  position:absolute; inset-inline-end:12px; bottom:12px;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:100px; font-size:var(--fs-xs); font-weight:600;
  background:rgba(10,10,10,.86); color:#fff; backdrop-filter:blur(4px);
  transition:background .35s var(--e-out);
}
.plans__zoom:hover,
.plans__pdf:hover{ background:var(--gold); color:var(--ink); }
.plans__pdf{ position:static; padding:16px 26px; font-size:.95rem; }
.plans__pdf svg{ width:20px; height:20px; }

.plans__facts h3{ font-size:1.2rem; font-weight:700; margin-bottom:18px; }
.plans__facts dl{ margin:0; }
.plans__facts dl > div{
  display:flex; justify-content:space-between; gap:18px;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.plans__facts dt{ color:var(--muted); font-size:.94rem; }
.plans__facts dd{ margin:0; font-weight:600; }
.plans__facts .btn-row{ margin-top:26px; }

@media (max-width:980px){
  .plans__panel{ grid-template-columns:1fr; }
}

/* =========================================================================
   Project page — the rendering leads, the form rides alongside
   ========================================================================= */

/* A hero built around the drawing rather than a cropped banner: narrower than
   the page, as tall as the render's own proportions, nothing cut off. */
.phero--shot{
  padding-block:calc(var(--header-h) + clamp(28px,4vw,48px)) clamp(40px,5vw,68px);
  background:var(--ink);
}
.phero--shot .phero__media{ display:none; }
.phero__shot{
  max-width:min(100%, 860px); margin:0 auto clamp(26px,3.4vw,44px);
  border-radius:var(--r-lg); overflow:hidden;
  background:var(--ink-2); border:1px solid var(--line-dark);
}
.phero__shot img{ width:100%; height:auto; display:block; }
.phero--shot .phero__meta{ max-width:min(100%, 860px); margin-inline:auto; text-align:center; }
.phero--shot .eyebrow{ justify-content:center; }
.phero--shot .eyebrow::after{ content:""; width:38px; height:1px; background:var(--gold); opacity:.7; }
.phero--shot .phero__text{ margin-inline:auto; }
.phero--shot .crumbs{ justify-content:center; }

/* Body: everything about the building on one side, the ask on the other. */
.pgrid{ display:grid; grid-template-columns:1fr 360px; gap:clamp(28px,3.4vw,56px); align-items:start; }
.pgrid__main{ min-width:0; }
.pblock{ margin-top:clamp(44px,5vw,72px); }

.pgrid__side{
  position:sticky; top:calc(var(--header-h) + 18px);
  /* safety net: if the client's copy ever makes this taller than the screen it
     scrolls inside itself rather than hiding its own submit button. */
  max-height:calc(100vh - var(--header-h) - 36px);
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin;
}
body.admin-bar .pgrid__side{ top:calc(var(--header-h) + 50px); max-height:calc(100vh - var(--header-h) - 68px); }

.pask{
  background:var(--paper); border:1px solid var(--line-gold);
  border-radius:var(--r-lg); padding:clamp(20px,2.2vw,28px);
  box-shadow:var(--shadow);
}
.pask h3{ font-size:1.2rem; font-weight:700; margin-bottom:18px; }
.pask .nh-form{ gap:14px; }
.pask .nh-form__grid{ grid-template-columns:1fr; gap:14px; }
.pask .nh-field input,
.pask .nh-field textarea,
.pask .nh-field select{ min-height:50px; padding:12px 16px; }
.pask .nh-field textarea{ min-height:96px; }
.btn--wide{ width:100%; margin-top:12px; }

/* Project facts, as a plain list rather than a floating card — it now sits in
   the reading column, not beside it. */
.pfacts{
  margin-top:clamp(26px,3vw,40px); padding:clamp(20px,2.2vw,28px);
  background:var(--smoke); border-radius:var(--r-lg); border:1px solid var(--line);
}
.pfacts h3{ font-size:1.1rem; font-weight:700; margin-bottom:14px; }
.pfacts dl{ margin:0; }
.pfacts dl > div{
  display:flex; justify-content:space-between; gap:18px;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.pfacts dl > div:last-child{ border-bottom:0; }
.pfacts dt{ color:var(--muted); font-size:.94rem; }
.pfacts dd{ margin:0; font-weight:600; }

/* The plan switcher lives inside the reading column here, so it drops its own
   section chrome and stacks rather than sitting two-up in a narrow space. */
.pgrid__main .plans__panel{ grid-template-columns:1fr; }

@media (max-width:1080px){
  .pgrid{ grid-template-columns:1fr; }
  .pgrid__side{ position:static; }
  .pask{ max-width:620px; margin-inline:auto; }
}

/* =========================================================================
   Project layout B — the comparison alternative
   Render inside the reading column, title beneath it, sticky section links.
   ========================================================================= */
.lb{ padding-top:calc(var(--header-h) + clamp(20px,3vw,36px)); }
.lb__shot{
  border-radius:var(--r-lg); overflow:hidden; background:var(--smoke);
  border:1px solid var(--line); margin-bottom:clamp(20px,2.4vw,30px);
}
.lb__shot img{ width:100%; height:auto; display:block; }

.lb__title{ font-size:var(--fs-h2); font-weight:800; line-height:1.25; letter-spacing:-.015em; }
.crumbs--dark{ color:var(--muted); margin:14px 0 0; }
.crumbs--dark a{ color:var(--gold-deep); }
.crumbs--dark b{ color:var(--ink); }
.lb__badge{
  margin-inline-start:auto; padding:6px 14px; border-radius:100px;
  background:rgba(185,162,94,.14); color:var(--gold-deep);
  font-size:var(--fs-xs); font-weight:700;
}

/* The section bar sticks under the header as the page scrolls. */
.lb__nav{
  position:sticky; top:calc(var(--header-h) - 6px); z-index:5;
  display:flex; gap:4px; overflow-x:auto; margin:clamp(22px,2.6vw,32px) 0 0;
  padding:8px; border-radius:100px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px);
  border:1px solid var(--line); box-shadow:0 8px 30px -24px rgba(0,0,0,.5);
  scrollbar-width:none;
}
.lb__nav::-webkit-scrollbar{ display:none; }
body.admin-bar .lb__nav{ top:calc(var(--header-h) + 26px); }
.lb__navlink{
  flex:none; padding:11px 20px; border-radius:100px; white-space:nowrap;
  font-size:.92rem; font-weight:600; color:var(--muted);
  transition:background .35s var(--e-out), color .35s var(--e-out);
}
.lb__navlink:hover{ color:var(--ink); background:var(--smoke); }
.lb__navlink.is-on{ background:var(--ink); color:#fff; }

.lb__section{ padding-top:clamp(34px,4vw,54px); scroll-margin-top:calc(var(--header-h) + 70px); }
.lb__section > .h3{ font-size:var(--fs-h3); font-weight:700; margin-bottom:16px; }
.lb__section > .h3::after{
  content:""; display:block; width:44px; height:2px; margin-top:12px;
  background:var(--gold); border-radius:2px;
}

.lb__facts{ margin:24px 0 0; display:grid; gap:0; }
.lb__facts > div{
  display:flex; justify-content:space-between; gap:18px;
  padding:13px 0; border-bottom:1px solid var(--line);
}
.lb__facts dt{ color:var(--muted); font-size:.94rem; }
.lb__facts dd{ margin:0; font-weight:600; }

/* Features as a grid of marks, the way the reference presents them. */
.lb__feats{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.lb__feats li{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-radius:var(--r);
  background:var(--smoke); border:1px solid var(--line);
  font-size:.94rem; line-height:1.5;
}
.lb__feat-ic{
  flex:none; width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:rgba(185,162,94,.12); color:var(--gold-deep);
}
.lb__feat-ic svg{ width:19px; height:19px; }

.plans-bare .plans{ margin-top:18px; }
.plans-bare > div > .lead{ margin-bottom:18px; }

@media (max-width:1080px){
  .lb__nav{ top:calc(var(--header-h) - 10px); }
}


/* Before the script runs, a page that does not open on a dark hero still needs
   a readable header — otherwise white nav links sit on a light section. */
body:not(.nhx-has-hero) .hdr{
  background:rgba(255,255,255,.94); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--line);
}
body:not(.nhx-has-hero) .hdr .nav a,
body:not(.nhx-has-hero) .hdr .hdr__phone{ color:var(--ink); }
body:not(.nhx-has-hero) .hdr .logo-light{ display:none; }
body:not(.nhx-has-hero) .hdr .logo-dark{ display:block; }
body:not(.nhx-has-hero) .burger{ border-color:var(--line); }
body:not(.nhx-has-hero) .burger span{ background:var(--ink); }

/* A comparison mock-up in the listing says what it is, unmistakably. */
.pcard__demo{
  position:absolute; inset-inline-end:16px; top:16px; z-index:3;
  padding:7px 15px; border-radius:100px;
  background:var(--ink); color:var(--gold);
  font-size:var(--fs-xs); font-weight:700;
  border:1px solid var(--gold);
}

.lb__sub{ margin-top:8px; color:var(--muted); font-size:var(--fs-lead); line-height:1.8; }

/* The summary block: one clear paragraph that search engines and AI answers
   read first — so it is styled to be read first by people too. */
.lb__summary{
  margin:0 0 clamp(26px,3vw,38px); padding:clamp(18px,2.2vw,26px);
  border-radius:var(--r-lg); background:var(--smoke);
  border:1px solid var(--line-gold); border-inline-start:3px solid var(--gold);
}
.lb__summary-t{ font-size:1.05rem; font-weight:700; margin-bottom:8px; color:var(--gold-deep); }
.lb__summary p{ line-height:1.95; }

/* Long-form project copy */
.nhx-prose h2{ font-size:var(--fs-h3); margin:clamp(30px,3.4vw,44px) 0 12px; }
.nhx-prose h2:first-child{ margin-top:0; }
.nhx-prose h3{ font-size:1.08rem; margin:22px 0 8px; color:var(--ink); }
.nhx-prose ul li b,
.nhx-prose ul li strong{ color:var(--ink); }
.nhx-prose table{
  width:100%; border-collapse:collapse; margin:18px 0 22px;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.nhx-prose th,
.nhx-prose td{ padding:13px 16px; text-align:start; border-bottom:1px solid var(--line); }
.nhx-prose th{ background:var(--smoke); font-weight:700; color:var(--ink); }
.nhx-prose tr:last-child td{ border-bottom:0; }
.nhx-prose td:last-child{ font-family:var(--ff-en); font-weight:600; color:var(--ink); }

/* =========================================================================
   Unit page — the drawing leads
   ========================================================================= */
.lb__plan{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; margin:0 0 clamp(20px,2.4vw,30px);
}
.lb__plan img{ width:100%; height:auto; display:block; }
.lb__plan .plans__pdf{ margin:48px auto; display:flex; width:max-content; }
.lb__desc{ margin-top:24px; }

.lb__rooms-wrap{ overflow-x:auto; }
.lb__rooms{ width:100%; border-collapse:collapse; border:1px solid var(--line); }
.lb__rooms th,
.lb__rooms td{ padding:12px 16px; text-align:start; border-bottom:1px solid var(--line); white-space:nowrap; }
.lb__rooms th{ background:var(--smoke); font-weight:700; font-size:.94rem; }
.lb__rooms tr:last-child td{ border-bottom:0; }
.lb__rooms .num{ font-weight:600; }

/* Where the plot sits */
.lb__map{ margin:0; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:#fff; }
.lb__map img{ width:100%; height:auto; display:block; }
.lb__map figcaption{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:14px 18px; border-top:1px solid var(--line); color:var(--muted); font-size:.94rem;
}
.lb__map .btn{ min-height:44px; padding:0 22px; }

/* The building's other unit types */
.lb__others{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.lb__other{
  display:block; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff;
  transition:border-color .35s var(--e-out), transform .45s var(--e-luxe);
}
.lb__other:hover{ border-color:var(--gold); transform:translateY(-3px); }
.lb__other-img{ display:block; aspect-ratio:16/10; background:#fff; border-bottom:1px solid var(--line); }
.lb__other-img img{ width:100%; height:100%; object-fit:contain; display:block; }
.lb__other b{ display:block; padding:12px 14px; font-size:.94rem; }
@media (max-width:600px){ .lb__rooms th, .lb__rooms td{ padding:10px 8px; font-size:.88rem; } }
.lb__plan img{ width:auto; max-width:100%; max-height:max(520px,85vh); margin:0 auto; } /* upright drawings stay within one screen (never below 520px); landscape ones are already shorter */

/* Section bar: every link visible. Tighter links, and a second centred row only
   when the column is too narrow for one — never a hidden «الأسئلة الشائعة». */
.lb__nav{ flex-wrap:wrap; justify-content:center; gap:2px; border-radius:28px; overflow-x:visible; }
.lb__navlink{ padding:10px 12px; font-size:.9rem; } /* seven links fit one row from 1280px up */
@media (max-width:700px){
  /* phones: one row that scrolls, with a fade on the far edge so it reads as "more" */
  .lb__nav{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; border-radius:100px;
    -webkit-mask-image:linear-gradient(to left, transparent 0, #000 36px);
            mask-image:linear-gradient(to left, transparent 0, #000 36px); }
}

/* A description's opening heading, written by the client as the page title and
   turned into a subheading so each page keeps one H1 — same size as before. */
.nhx-prose h2.nhx-lead{ font-size:2rem; font-weight:700; line-height:1.85; margin:0 0 14px; color:var(--ink); }

/* =========================================================================
   Project cards — the whole photo, and the SOLD OUT ribbon
   ========================================================================= */
/* Square frame, photo fills it; each project sets its crop point (object-position,
   from «نقطة التركيز في صورة الكارت») so the building shows whole. */
.pcard__img{ aspect-ratio:1 / 1; }
.pcard__img img{ object-fit:cover; object-position:50% 50%; }

/* Gold corner ribbon on sold-out projects — top-left corner, opposite the status pill. */
.nh-ribbon{
  position:absolute; z-index:3; top:26px; left:-52px; width:196px;
  transform:rotate(-45deg); transform-origin:center;
  padding:9px 0; text-align:center; direction:ltr;
  background:linear-gradient(90deg, #9a8443 0%, #d9c483 50%, #9a8443 100%);
  color:#0a0a0a; font-family:var(--ff-en); font-size:.74rem; font-weight:800; letter-spacing:.24em;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.65);
  pointer-events:none;
}
.nh-ribbon::before,
.nh-ribbon::after{ content:""; position:absolute; inset-inline:0; height:1px; background:rgba(255,255,255,.45); }
.nh-ribbon::before{ top:3px; }
.nh-ribbon::after{ bottom:3px; }
.lb__shot{ position:relative; }
.nh-ribbon--lg{ top:42px; left:-70px; width:290px; padding:13px 0; font-size:1rem; letter-spacing:.3em; }
@media (max-width:700px){ .nh-ribbon--lg{ top:30px; left:-58px; width:230px; padding:10px 0; font-size:.82rem; } }

/* Floating stack: Instagram, Facebook, call, WhatsApp — one column, WhatsApp biggest. */
.fab .fab-soc{ width:48px; height:48px; }
.fab .fab-soc svg{ width:22px; height:22px; }
/* social icons share the call button's gold (client) */
.fab .fab-instagram,
.fab .fab-facebook{ background:var(--gold); color:var(--ink); }
.fab .fab-call{ background:var(--gold); color:var(--ink); }
@media (max-width:760px){
  /* On phones the stack sat on top of text, FAQ toggles and form fields.
     Call and WhatsApp live in the bottom bar, Instagram and Facebook in the
     footer — only a smaller back-to-top arrow stays (client). */
  .fab .fab-call,
  .fab .fab-soc{ display:none; }
  .fab{ inset-inline-end:12px; bottom:72px; }
  .fab .fab-top{ width:40px; height:40px; }
  .fab .fab-top svg{ width:18px; height:18px; }
  /* bottom bar WhatsApp in gold, like the rest of the floating icons (client) */
  .mobar a.is-wa{ background:var(--gold); color:var(--ink); }
}

/* Project photo gallery — moves right on its own (the completed-work strip),
   inside the reading column; every photo whole, one height, its own width. */
.pstrip--gallery{ margin-inline:0; padding-inline:0; border-radius:var(--r-lg); }
.pstrip--gallery .pstrip__track{ animation-duration:calc(var(--gstrip-speed, 1) * 45s); }
.pstrip--gallery.is-static .pstrip__track{ animation:none; }
.gstrip__i{
  flex:none; margin:0; height:clamp(220px,24vw,320px);
  border-radius:var(--r); overflow:hidden; background:var(--smoke);
  border:1px solid var(--line);
}
.gstrip__i img{ height:100%; width:auto; max-width:none; display:block; }
@media (max-width:760px){ .gstrip__i{ height:clamp(190px,56vw,240px); } }

/* WhatsApp joins the rest of the stack in gold (client); it stays the largest. */
.fab .fab-wa{ background:var(--gold); color:var(--ink); }
.fab .fab-wa::after{ border-color:var(--gold); }

/* Phone header + home hero (client, 2026-09-14) */
@media (max-width:760px){
  /* WhatsApp already sits in the bottom bar; the menu goes to the far edge */
  .hdr__wa{ display:none; }
  .hdr__act{ margin-inline-start:auto; }

  /* hero as one full-height column: label + headline in the middle,
     buttons pushed down to sit just above the figures bar (client) */
  .hero{ align-items:stretch; }
  .hero__in{ display:flex; flex-direction:column; text-align:var(--nh-hal, center); padding-block:calc(var(--header-h) + 20px) 118px; }
  .hero__in .eyebrow{ align-self:stretch; justify-content:var(--nh-ebal, flex-start);
                      margin-top:max(0px, calc(clamp(16px,calc(14vh - 48px),92px) + var(--nh-eb-shift, 0px))); margin-bottom:var(--nh-eb-gap, 82px);
                      white-space:nowrap; max-width:100%; font-size:.72rem; letter-spacing:.04em; gap:8px; }
  .hero__in .eyebrow::before{ width:22px; }
  .hero__title{ margin-inline:var(--nh-hmi, auto); margin-bottom:var(--nh-title-mb, auto); font-size:calc(var(--fs-hero) * var(--nh-ht, .88)); }
  .hero__title .gold{ display:block; font-size:calc(var(--nh-hg, 1.22) * 1em); margin-top:.16em; }
  .hero__text{ display:var(--nh-hlead, none); margin-inline:var(--nh-hmi, auto); margin-top:4px; }
  .hero .btn-row{ display:grid; grid-template-columns:var(--nh-btn-cols, 1fr 1fr); gap:10px; margin-top:28px; }
  .hero .btn-row .btn{ width:100%; min-width:0; padding-inline:8px; font-size:.8rem; justify-content:center; white-space:nowrap; }

  /* figures: three equal columns across the whole bar */
  .hero__bar .wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; }
  .hero__fact{ align-items:center; }

  /* customer journey: two per row as a snake — 1 ← 2, ↓, 3 → 4 — with gold
     arrows between the circles, to shorten the page (client) */
  .steps{ grid-template-columns:1fr 1fr; column-gap:28px; row-gap:38px; }
  .step:nth-child(1){ grid-column:1; grid-row:1; }
  .step:nth-child(2){ grid-column:2; grid-row:1; }
  .step:nth-child(3){ grid-column:2; grid-row:2; }
  .step:nth-child(4){ grid-column:1; grid-row:2; }
  .step b{ width:56px; height:56px; margin-bottom:14px; }
  .step h3{ font-size:1rem; }
  .step p{ font-size:.86rem; line-height:1.7; }
  .step:not(:last-child)::after{
    position:absolute; color:var(--gold); font-size:1.35rem; line-height:1; font-weight:700;
    font-family:system-ui, sans-serif; pointer-events:none;
  }
  .step:nth-child(1)::after{ content:"\2190"; top:17px; inset-inline-end:-23px; }  /* ← to step 2 */
  .step:nth-child(2)::after{ content:"\2193"; bottom:-31px; left:50%; transform:translateX(-50%); } /* ↓ to step 3 */
  .step:nth-child(3)::after{ content:"\2192"; top:17px; inset-inline-start:-23px; } /* → to step 4 */

  /* «ليه نيو هوم» (home) and «قيمنا» (about): two compact cards per row (client) */
  :is([data-sec="home.why"], [data-sec="about.values"]) .grid--3{ grid-template-columns:1fr 1fr; gap:10px; }
  :is([data-sec="home.why"], [data-sec="about.values"]) .fcard{ padding:16px 12px; border-radius:var(--r); text-align:center; }
  :is([data-sec="home.why"], [data-sec="about.values"]) .fcard__ic{ width:44px; height:44px; border-radius:12px; margin:0 auto 12px; }
  :is([data-sec="home.why"], [data-sec="about.values"]) .fcard__ic svg{ width:21px; height:21px; }
  :is([data-sec="home.why"], [data-sec="about.values"]) .fcard h3{ font-size:.95rem; line-height:1.45; margin-bottom:6px; }
  :is([data-sec="home.why"], [data-sec="about.values"]) .fcard p{ font-size:.8rem; line-height:1.65; }
  /* an odd card out (the 9th value) spans the row instead of sitting alone */
  :is([data-sec="home.why"], [data-sec="about.values"]) .fcard:last-child:nth-child(odd){ grid-column:1 / -1; }

  /* construction-quality photos: all three in one row, smaller (client).
     !important only beats the template's inline sizes. */
  .grid.qpics{ grid-template-columns:repeat(3,1fr); gap:10px !important; }
  .qpics__col{ display:contents !important; }
  .qpics .mask{ aspect-ratio:4/5 !important; border-radius:var(--r) !important; }

  /* home video band: as tall as its text, not 62% of the screen (client) */
  [data-sec="home.vband"]{ min-height:0; }
  [data-sec="home.vband"] .vband__in{ padding-block:64px; }

  /* footer: logo centred, link lists two per row to shorten the page (client) */
  .ftr__logo{ display:flex; justify-content:center; }
  .ftr__logo img{ margin-inline:auto; }
  /* the brand column (logo, description, social icons) centred as one block */
  .ftr__grid > div:first-child{ text-align:center; }
  .ftr__grid > div:first-child p{ margin-inline:auto; }
  .ftr__grid > div:first-child .socials{ justify-content:center; }
  .ftr__links{ grid-template-columns:1fr 1fr; column-gap:16px; row-gap:14px; }
}

/* =========================================================================
   Media page — photos open large, videos play in place
   ========================================================================= */
.mgrid{ columns:3 280px; column-gap:16px; }
.mgrid__i{
  display:block; break-inside:avoid; margin:0 0 16px; position:relative;
  border-radius:var(--r-lg); overflow:hidden; background:var(--smoke); border:1px solid var(--line);
}
.mgrid__i img,
.mgrid__i video{ width:100%; height:auto; display:block; }
a.mgrid__i img{ transition:transform 1s var(--e-luxe); }
a.mgrid__i:hover img{ transform:scale(1.04); }
a.mgrid__i::after{ content:""; position:absolute; inset:0; background:rgba(10,10,10,0); transition:background .4s; }
a.mgrid__i:hover::after{ background:rgba(10,10,10,.12); }

.lbx{
  position:fixed; inset:0; z-index:2000; display:grid; place-items:center;
  background:rgba(10,10,10,.93); opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s;
}
.lbx.is-open{ opacity:1; visibility:visible; }
.lbx img{ max-width:92vw; max-height:86vh; border-radius:var(--r); box-shadow:0 30px 80px -30px rgba(0,0,0,.8); }
.lbx button{
  position:absolute; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.2); font-size:28px; line-height:1; cursor:pointer;
  transition:background .3s, color .3s;
}
.lbx button:hover{ background:var(--gold); color:var(--ink); }
.lbx__x{ top:22px; inset-inline-end:22px; }
.lbx__prev{ inset-inline-start:22px; top:50%; transform:translateY(-50%); }
.lbx__next{ inset-inline-end:22px; top:50%; transform:translateY(-50%); }

/* =========================================================================
   Articles — cards and the reading page
   ========================================================================= */
.acard{
  display:flex; flex-direction:column; height:100%; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  transition:transform .6s var(--e-luxe), box-shadow .6s var(--e-out), border-color .6s;
}
.acard:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--line-gold); }
.acard__img{ aspect-ratio:16/10; overflow:hidden; background:var(--smoke); }
.acard__img > img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--e-luxe); }
.acard:hover .acard__img > img{ transform:scale(1.06); }
.acard__ph{ display:grid; place-items:center; height:100%; background:var(--ink); }
.acard__ph img{ width:42%; height:auto; }
.acard__body{ display:flex; flex-direction:column; gap:10px; flex:1; padding:24px clamp(20px,2vw,28px) 26px; }
.acard__date{ font-size:var(--fs-xs); font-weight:600; color:var(--gold-deep); }
.acard__body h3{ font-size:1.22rem; font-weight:700; line-height:1.6; transition:color .35s; }
.acard:hover .acard__body h3{ color:var(--gold-deep); }
.acard__body p{ color:var(--muted); font-size:.94rem; line-height:1.85; }
.acard__cta{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; color:var(--gold-deep); font-weight:600; font-size:.94rem; }
.acard__cta svg{ width:16px; height:16px; }
.apager{ margin-top:clamp(36px,4vw,52px); display:flex; justify-content:center; }
.apager .nav-links{ display:flex; gap:8px; flex-wrap:wrap; }
.apager .page-numbers{
  min-width:44px; height:44px; padding:0 14px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:100px; font-weight:600;
}
.apager .page-numbers.current,
.apager a.page-numbers:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

.article{ max-width:780px; margin-inline:auto; }
.article .nhx-prose img{ border-radius:var(--r); height:auto; }
.article__foot{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  margin-top:clamp(32px,4vw,48px); padding-top:24px; border-top:1px solid var(--line);
}
.article__more{ margin-top:clamp(56px,6vw,88px); }

/* =========================================================================
   Reviews — cards, gold stars, the form
   ========================================================================= */
.stars{ display:inline-flex; gap:3px; }
.stars svg{ width:18px; height:18px; display:block; }
.stars .is-on{ color:var(--gold); }
.stars .is-off{ color:#ddd6c2; }

.rsum{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-bottom:clamp(28px,3.4vw,44px); }
.rsum b{ font-size:2.4rem; font-weight:800; line-height:1; }
.rsum .stars svg{ width:24px; height:24px; }
.rsum > span{ color:var(--muted); }

.rgrid{ columns:3 300px; column-gap:20px; }
.rcard{
  position:relative; break-inside:avoid; margin:0 0 20px; padding:26px 26px 20px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
}
.rcard__q{ position:absolute; top:6px; inset-inline-end:20px; font:700 4rem/1 Georgia, serif; color:rgba(185,162,94,.25); }
.rcard p{ margin:14px 0 18px; line-height:1.95; white-space:pre-line; }
.rcard footer{ display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line); }
.rcard__av{ flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--gold); font-weight:700; }
.rcard__who b{ display:block; font-weight:700; }
.rcard__who span{ color:var(--muted); font-size:var(--fs-xs); }

.rform{
  max-width:720px; margin-inline:auto; padding:clamp(22px,3vw,36px);
  background:var(--paper); border:1px solid var(--line-gold); border-radius:var(--r-lg); box-shadow:var(--shadow);
}
.rform__label{ display:block; font-weight:600; margin-bottom:8px; }
.rate{ display:inline-flex; flex-direction:row-reverse; gap:6px; }
.rate input{ position:absolute; width:1px; height:1px; opacity:0; }
.rate label{ cursor:pointer; color:#ddd6c2; transition:color .2s, transform .2s; margin:0; }
.rate label svg{ width:32px; height:32px; display:block; }
.rate label:hover,
.rate label:hover ~ label,
.rate input:checked ~ label{ color:var(--gold); }
.rate label:hover{ transform:scale(1.12); }
.rate input:focus-visible + label{ outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }
.rnote{ margin:0 0 18px; padding:14px 18px; border-radius:var(--r); font-weight:600; }
.rnote--ok{ background:rgba(185,162,94,.15); color:var(--gold-deep); }
.rnote--err{ background:#fbeaea; color:#8a1f1f; }
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

.article__cover{ margin:0 0 clamp(28px,3.4vw,44px); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); }
.article__cover img{ width:100%; height:auto; display:block; }

/* Articles banner (client, 2026-09-15): the photo's subject sits in its top
   half, so the wide laptop banner keeps the top instead of the middle. */
body.blog .phero__media img{ object-position:50% 15%; }
/* Contact banner (client, 2026-09-15): the header covers the banner's top ~90px,
   which hid the consultant's head; anchor the photo near its top instead. */
body.page-template-contact .phero__media img{ object-position:50% 12%; }

/* Phone menu (client, 2026-09-15): with eight links the centred list was taller
   than the screen, so its first link slid up under the logo. The list now starts
   below the header, is sized to fit a phone, and scrolls if a screen is shorter. */
@media (max-width:760px){
  .drawer{
    justify-content:flex-start; overflow-y:auto; overscroll-behavior:contain;
    padding-block:calc(var(--header-h) + 16px) 20px;
  }
  .drawer a.drawer__link{ font-size:clamp(1.15rem,5.2vw,1.45rem); padding:10px 0; }
  .drawer__foot{ margin-top:20px; gap:10px; }
  .drawer__foot .btn{ min-height:50px; }

  /* «مشروعات تم تنفيذها و تسليمها» on one line (client, 2026-09-15): the size
     follows the screen width, so it fits from small phones up. */
  /* The line measures ~14 × its font size in Cairo 700; 14.6 leaves a little room. */
  [data-sec="home.previous"] .shead h2{ font-size:min(var(--fs-h2), calc((100vw - 2 * var(--gutter)) / 14.6)); }

  /* Projects «أعرف كل التفاصيل عن الوحدة» (client, 2026-09-15): the phone frame
     (5/4) cut the top and bottom off this portrait picture; show it whole. */
  [data-sec="projects.why"] .figure-frame .mask{ aspect-ratio:4/5; }
}

/* «سابقة الأعمال» — one delivered project (client, 2026-09-16). The photograph
   is shown whole rather than cropped, because these arrive in every ratio. */
.pshot{ display:block; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--smoke-2); }
.pshot img{ width:100%; height:auto; display:block; }
.pshot:hover{ border-color:var(--gold); }

/* «من نحن» / «قصتنا» with no picture beside them (client, 2026-09-17): one column
   at a comfortable reading width, and the years badge inline with the text.
   Headings balance their lines so a short tail like «1998» does not sit alone. */
.about-solo{ max-width:68ch; margin-inline:auto; }
.about-solo .h2{ text-wrap:balance; }
.years-pill{ display:inline-flex; align-items:baseline; gap:9px; margin:20px 0 0; padding:9px 18px;
  border-radius:100px; background:var(--gold); color:var(--ink); }
.years-pill b{ font-family:var(--ff-en); font-size:1.3rem; font-weight:700; line-height:1; }
.years-pill span{ font-size:var(--fs-xs); font-weight:700; }
@media (max-width:760px){
  .about-solo{ max-width:none; }
  .years-pill{ margin-top:16px; }
}

/* Short inquiry box — name and phone only — on «المقالات» and inside every article
   (client, 2026-09-17). Same reading width as the article text so it reads as part
   of the page, not as an ad. The two fields sit side by side and stack on a phone
   with the shared .nh-form rules. */
.askbar{
  max-width:780px; margin:clamp(40px,5vw,64px) auto 0;
  padding:clamp(24px,3vw,40px);
  background:var(--paper); border:1px solid var(--line-gold);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
}
.askbar h3{ font-size:var(--fs-h3); font-weight:700; margin:10px 0 0; line-height:1.35; }
.askbar__lead{ margin:12px 0 0; color:var(--muted); line-height:1.9; }
.askbar__form{ margin-top:22px; }
.askbar .nh-form{ gap:16px; }
.askbar .nh-field input{ min-height:52px; }
@media (max-width:760px){
  .askbar{ margin-top:32px; }
}