/* ============================================================
   Waha Outdoor — demonstration site by Murshid
   Sand, stone, deep green, brass. Editorial and calm — closer to
   an architecture studio than a contractor.
   Logical properties throughout so it mirrors for Arabic.
   ============================================================ */

:root{
  --sand:   #F7F3EC;
  --stone:  #EDE7DC;
  --line:   #DED6C7;
  --line-2: #EBE5D9;
  --ink:    #1B211C;
  --ink-2:  #4A5449;
  --ink-3:  #7B8479;

  --green:   #2F5D45;
  --green-2: #244836;
  --green-3: #E4EDE6;
  --brass:   #B08D57;

  --dark:      #17211B;
  --dark-2:    #1F2C24;
  --on-dark:   #FFFFFF;
  --on-dark-2: rgba(255,255,255,.70);
  --on-dark-3: rgba(255,255,255,.46);
  --dark-line: rgba(255,255,255,.13);

  --r:   6px;
  --r-2: 12px;
  --r-3: 20px;

  --ease: cubic-bezier(.22,1,.36,1);
  --wrap: 1220px;

  --f:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-d:  "Instrument Serif", Georgia, serif;
  --f-ar: "IBM Plex Sans Arabic", "Inter", -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ color-scheme:light; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
section[id], #top{ scroll-margin-block-start:74px; }

body{
  margin:0;
  font-family:var(--f);
  background:var(--sand);
  color:var(--ink);
  font-size:16px; line-height:1.65;
  letter-spacing:-.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
html[dir="rtl"] body{ font-family:var(--f-ar); letter-spacing:0; }
body.is-switching{ opacity:.3; }
body{ transition:opacity .16s var(--ease); }

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

.skip{
  position:fixed; inset-block-start:-80px; inset-inline-start:12px; z-index:300;
  background:#fff; padding:10px 16px; border:2px solid var(--green); font-weight:600;
  transition:inset-block-start .2s var(--ease);
}
.skip:focus{ inset-block-start:12px; }

.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 40px, 780px); }

/* ---------- type ---------- */
.h2{
  font-family:var(--f-d); font-weight:400;
  font-size:clamp(2rem,4vw,3.1rem); line-height:1.08;
  letter-spacing:-.015em; margin:0 0 12px;
}
html[dir="rtl"] .h2{ font-family:var(--f-ar); font-weight:600; font-size:clamp(1.7rem,3.3vw,2.5rem); line-height:1.35; letter-spacing:0; }

.eyebrow{
  display:inline-block; font-size:.7rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--brass); margin-block-end:12px;
}
html[dir="rtl"] .eyebrow{ letter-spacing:0; }

.lede{ font-size:1.03rem; color:var(--ink-2); margin:0; max-width:58ch; }
.head{ max-width:640px; margin-block-end:clamp(26px,3.4vw,44px); }
.head--light .h2{ color:var(--on-dark); }
.sec--dark .eyebrow, .on-dark .eyebrow{ color:#DCC79A; }
.head--light .lede{ color:var(--on-dark-2); }
.fineprint{ margin:10px 0 0; font-size:.76rem; color:var(--ink-3); text-align:center; }
.on-dark .fineprint{ color:rgba(255,255,255,.52); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border:1.5px solid transparent; border-radius:999px;
  font-weight:600; font-size:.93rem; cursor:pointer; white-space:nowrap;
  transition:background .2s var(--ease), border-color .2s var(--ease),
             color .2s var(--ease), transform .12s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn .ico{ width:18px; height:18px; fill:currentColor; }
.btn--sm{ padding:9px 16px; font-size:.85rem; }
.btn--block{ display:flex; width:100%; }
.btn--green{ background:var(--green); color:#fff; }
.on-dark .btn--green{ background:var(--brass); color:#1B211C; }
.on-dark .btn--green:hover{ background:#C9A46A; }
.btn--green:hover{ background:var(--green-2); }
.btn--out{ border-color:var(--line); color:var(--ink); background:#fff; }
.btn--out:hover{ border-color:var(--green); color:var(--green); }

/* ---------- attribution + utility ---------- */
.demobar{
  background:var(--dark); color:var(--on-dark-2);
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:8px 20px; font-size:.78rem; flex-wrap:wrap;
}
.demobar b{ color:#fff; font-weight:600; }
.demobar em{ font-style:normal; }
.demobar a{ color:#fff; font-weight:600; border-block-end:1px solid var(--brass); }
.demobar a:hover{ color:var(--brass); }

.util{ background:var(--stone); color:var(--ink-2); font-size:.79rem; border-block-end:1px solid var(--line); }
.util__in{ display:flex; align-items:center; gap:12px; height:38px; }
.util__sep{ width:1px; height:12px; background:var(--line); }
.util__lang{
  margin-inline-start:auto; background:none; border:1px solid var(--line);
  color:var(--ink); padding:4px 13px; border-radius:999px; cursor:pointer;
  font-size:.77rem; font-weight:600;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.util__lang:hover{ background:#fff; border-color:var(--green); }

/* ---------- nav ---------- */
.nav{
  position:sticky; inset-block-start:0; z-index:100;
  background:rgba(247,243,236,.88);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-block-end:1px solid var(--line);
  transition:box-shadow .25s var(--ease);
}
.nav.is-stuck{ box-shadow:0 6px 26px rgba(27,33,28,.07); }
.nav__in{ display:flex; align-items:center; gap:24px; height:64px; }

.brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.05; }
.brand__txt b{ font-size:1.05rem; font-weight:600; letter-spacing:.14em; }
.brand__txt i{ font-style:normal; font-size:.62rem; color:var(--ink-3); letter-spacing:.2em; text-transform:uppercase; }
html[dir="rtl"] .brand__txt b, html[dir="rtl"] .brand__txt i{ letter-spacing:0; text-transform:none; }

.nav__links{ display:flex; gap:2px; margin-inline-start:auto; }
.nav__links a{
  padding:9px 14px; border-radius:999px; font-size:.9rem; color:var(--ink-2);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.nav__links a:hover{ color:var(--ink); background:rgba(27,33,28,.05); }
.nav__links a.is-active{ color:var(--green); }
.nav__act{ display:flex; align-items:center; gap:10px; }

.burger{
  display:none; width:40px; height:40px; border-radius:999px; cursor:pointer;
  background:#fff; border:1px solid var(--line);
  flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.burger span{ display:block; width:15px; height:1.8px; background:var(--ink); transition:transform .25s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5.8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5.8px) rotate(-45deg); }

.msheet{ background:#fff; border-block-start:1px solid var(--line); padding:8px 20px 16px; }
.msheet a{ display:block; padding:13px 4px; border-block-end:1px solid var(--line-2); }
.msheet a:last-child{ border:0; }
.msheet__cta{ margin-block-start:10px; text-align:center; background:var(--green); color:#fff !important; border-radius:999px; font-weight:600; }

/* ============================================================
   Hero + backyard builder
   ============================================================ */
/* Photography-led band, then a hard cut to the light page below.
   No controls live here — the hero only has to make you want one. */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:#0C1410; color:#fff;
  min-height:clamp(500px, 74vh, 740px);
  display:flex; align-items:flex-end;
  padding-block:clamp(72px,9vw,116px) clamp(46px,5.5vw,74px);
}
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__ph{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  animation:kenburns 40s ease-in-out infinite alternate;
  will-change:transform;
}
/* the same frame after dark, crossfading in on its own */
.hero__ph--dusk{
  opacity:0;
  animation:kenburns 40s ease-in-out infinite alternate,
            dusk 30s ease-in-out infinite;
}
@keyframes kenburns{
  from{ transform:scale(1.05) translate3d(-1%, .7%, 0); }
  to  { transform:scale(1.13) translate3d(1%, -.7%, 0); }
}
@keyframes dusk{
  0%,34%  { opacity:0; }
  46%,84% { opacity:1; }
  96%,100%{ opacity:0; }
}

.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(10,18,14,.55), rgba(10,18,14,.26) 34%, rgba(10,18,14,.86)),
    linear-gradient(90deg, rgba(10,18,14,.74), rgba(10,18,14,.30) 44%, transparent 68%),
    radial-gradient(95% 105% at 6% 70%, rgba(10,18,14,.55), transparent 64%);
}
/* the copy sits on the other side in Arabic, so the darkened area
   has to follow it or the headline lands on the bright half */
html[dir="rtl"] .hero__scrim{
  background:
    linear-gradient(180deg, rgba(10,18,14,.55), rgba(10,18,14,.26) 34%, rgba(10,18,14,.86)),
    linear-gradient(270deg, rgba(10,18,14,.74), rgba(10,18,14,.30) 44%, transparent 68%),
    radial-gradient(95% 105% at 94% 70%, rgba(10,18,14,.55), transparent 64%);
}

.hero__in{ position:relative; z-index:2; }

.kicker{
  display:inline-block; font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-block-end:14px;
}
html[dir="rtl"] .kicker{ letter-spacing:0; }

.hero__h1{
  font-family:var(--f-d); font-weight:400;
  font-size:clamp(2.5rem,5.6vw,4.5rem); line-height:1.0;
  letter-spacing:-.022em; margin:0 0 18px; max-width:16ch;
}
html[dir="rtl"] .hero__h1{ font-family:var(--f-ar); font-weight:600; font-size:clamp(1.95rem,4.2vw,3.2rem); line-height:1.28; letter-spacing:0; }
.hero__h1 span{ display:block; color:rgba(255,255,255,.72); }
.hero__h1 em{ display:block; font-style:italic; color:#fff; }
html[dir="rtl"] .hero__h1 em{ font-style:normal; }
.hero__sub{
  font-size:1.05rem; color:rgba(255,255,255,.82); margin:0; max-width:46ch;
  text-shadow:0 1px 22px rgba(0,0,0,.4);
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-block-start:clamp(24px,3vw,32px); }
.btn--brass{ background:var(--brass); color:#12190F; }
.btn--brass:hover{ background:#C9A46A; }
.btn--ghost{
  border-color:rgba(255,255,255,.36); color:#fff; background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.btn--ghost:hover{ background:rgba(255,255,255,.16); border-color:#fff; }

/* three things that are true today, not invented numbers */
.hero__facts{
  list-style:none; margin:clamp(28px,4vw,44px) 0 0; padding:clamp(18px,2.4vw,24px) 0 0;
  border-block-start:1px solid rgba(255,255,255,.18);
  display:flex; flex-wrap:wrap; gap:10px 30px;
  font-size:.85rem; color:rgba(255,255,255,.78);
}
.hero__facts li{ display:flex; align-items:center; gap:9px; }
.hero__facts li::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--brass); flex-shrink:0;
}

.hero__scroll{
  position:absolute; z-index:2;
  inset-block-end:0; inset-inline-end:clamp(20px,4vw,52px);
}
.hero__scroll i{
  display:block; width:1px; height:clamp(48px,7vw,78px);
  background:linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.55));
  animation:drip 3.4s var(--ease) infinite;
  transform-origin:top;
}
@keyframes drip{
  0%,100%{ transform:scaleY(.4); opacity:.35; }
  50%    { transform:scaleY(1);  opacity:1; }
}

/* --- the scene --- */
.scene{
  position:relative; border-radius:var(--r-3); overflow:hidden;
  border:1px solid rgba(255,255,255,.18); background:var(--stone);
  box-shadow:0 26px 60px rgba(0,0,0,.34);

  --sky1:#EDE3D2; --sky2:#DED0B8;
  --wall:#E0D6C4; --wallcap:#EEE6D9; --villa:#E9E1D3; --door:#C7BBA4; --win:#CFC5B0;
  --dirt:#CFC2A8; --lawn:#4E8B5A; --lawnedge:#5C9A67;
  --deck:#D6CDBA; --wat1:#5BB0C4; --wat2:#2E7B93;
  --wood:#95724C; --wood2:#7A5C3B; --seat:#C9C2B2;
  --cab:#BFB5A1; --cabtop:#D8D0C0; --burner:#8E8676;
  --frond:#3E7A5A; --trunk:#6B5334; --shrub:#4A8158;
  --starA:0; --glowA:.10; --poolA:0;
}
.scene.is-night{
  --sky1:#0E1626; --sky2:#1D2A42;
  --wall:#28303F; --wallcap:#333C4D; --villa:#232B39; --door:#3A4452; --win:#F2C879;
  --dirt:#2A2A27; --lawn:#20452F; --lawnedge:#28513A;
  --deck:#3A3A34; --wat1:#1B6E88; --wat2:#0E4459;
  --wood:#5A452E; --wood2:#43331F; --seat:#3B4A40;
  --cab:#39392F; --cabtop:#4A4A3E; --burner:#25251F;
  --frond:#26503A; --trunk:#3E3020; --shrub:#255239;
  --starA:.55; --glowA:.42; --poolA:.22;
}
.scene__svg{ width:100%; height:auto; display:block; }

/* every painted element eases between day and night */
.s-wall,.s-wallcap,.s-villa,.s-door,.s-win,.s-dirt,.s-lawn,.s-lawnedge,
.s-deck,.s-beam,.s-slat rect,.s-post,.s-seat,.s-cab,.s-cabtop,.s-burner,
.s-frond ellipse,.s-shrub ellipse,.s-trunk,.g-sky1,.g-sky2,.g-wat1,.g-wat2,
.s-stars,.s-pool2,.s-poolglow{
  transition:fill .9s var(--ease), stop-color .9s var(--ease), opacity .9s var(--ease);
}

.g-sky1{ stop-color:var(--sky1); }
.g-sky2{ stop-color:var(--sky2); }
.g-wat1{ stop-color:var(--wat1); }
.g-wat2{ stop-color:var(--wat2); }

.s-wall{ fill:var(--wall); }      .s-wallcap{ fill:var(--wallcap); }
.s-villa{ fill:var(--villa); }    .s-door{ fill:var(--door); }
.s-win{ fill:var(--win); }        .s-dirt{ fill:var(--dirt); }
.s-lawn{ fill:var(--lawn); }      .s-lawnedge{ fill:var(--lawnedge); }
.s-deck{ fill:var(--deck); }      .s-ripple{ stroke:#fff; opacity:.3; }
.s-beam{ fill:var(--wood); }      .s-slat rect{ fill:var(--wood2); }
.s-post{ fill:var(--wood2); }     .s-seat{ fill:var(--seat); }
.s-cab{ fill:var(--cab); }        .s-cabtop{ fill:var(--cabtop); }
.s-burner{ fill:var(--burner); }
.s-frond ellipse{ fill:var(--frond); }
.s-shrub ellipse{ fill:var(--shrub); }
.s-trunk{ stroke:var(--trunk); }
.s-stars{ fill:#fff; opacity:var(--starA); }
.s-pool2{ opacity:var(--glowA); }
.s-lamp{ fill:#FFE9C4; }
.s-poolglow{ fill:#4FD3F0; opacity:var(--poolA); }

/* layers fade in as they are switched on */
.ly{ opacity:0; transition:opacity .5s var(--ease); }
.scene.has-grass    .ly-grass{ opacity:1; }
.scene.has-pool     .ly-pool{ opacity:1; }
.scene.has-majlis   .ly-majlis{ opacity:1; }
.scene.has-kitchen  .ly-kitchen{ opacity:1; }
.scene.has-planting .ly-planting{ opacity:1; }
.scene.has-lights   .ly-lights{ opacity:1; }

.daynight{
  position:absolute; inset-block-end:14px; inset-inline-end:14px;
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 15px 8px 10px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.9); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-size:.8rem; font-weight:600; color:var(--ink);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.daynight em{ font-style:normal; }
.daynight__k{
  width:30px; height:17px; border-radius:999px; background:var(--line);
  position:relative; flex-shrink:0; transition:background .3s var(--ease);
}
.daynight__k::after{
  content:""; position:absolute; inset-block-start:2.5px; inset-inline-start:2.5px;
  width:12px; height:12px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .3s var(--ease);
}
.daynight[aria-pressed="true"]{ background:rgba(23,33,27,.86); color:#fff; border-color:rgba(255,255,255,.2); }
.daynight[aria-pressed="true"] .daynight__k{ background:var(--brass); }
.daynight[aria-pressed="true"] .daynight__k::after{ transform:translateX(13px); }
html[dir="rtl"] .daynight[aria-pressed="true"] .daynight__k::after{ transform:translateX(-13px); }

/* --- builder controls --- */
.blabel{
  display:block; font-size:.7rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,255,255,.58); margin-block-end:9px;
}
html[dir="rtl"] .blabel{ letter-spacing:0; text-transform:none; }

.opts{ display:flex; flex-wrap:wrap; gap:7px; }
.opt{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; border-radius:999px; cursor:pointer;
  font-size:.87rem; font-weight:600;
  background:#fff; border:1px solid var(--line); color:var(--ink-2);
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.opt:hover{ border-color:var(--green); }

/* the builder sits on a dark section, so invert it there */
.on-dark .opt{
  background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.22);
  color:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.on-dark .opt:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.42); }
.on-dark .opt::before{ border-color:rgba(255,255,255,.42); }
.on-dark .opt.is-on{ background:var(--brass); border-color:var(--brass); color:#1B211C; }
.on-dark .opt.is-on::before{
  border-color:#1B211C; background:#1B211C
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCC79A' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;
}
.opt::before{
  content:""; width:14px; height:14px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--line); transition:background .18s var(--ease), border-color .18s var(--ease);
}
.opt.is-on{ background:var(--green); border-color:var(--green); color:#fff; }
.opt.is-on::before{
  border-color:#fff;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F5D45' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;
}
.opts--plot .opt::before, .opts--want .opt::before{ display:none; }
.opts--plot .opt{ padding:9px 18px; }

.brow{ margin-block-start:18px; }

.readout{
  margin-block:18px 14px; padding:16px 18px;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-2);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.readout__row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.readout__row + .readout__row{ margin-block-start:7px; padding-block-start:7px; border-block-start:1px solid rgba(255,255,255,.14); }
.readout__k{ font-size:.82rem; color:rgba(255,255,255,.68); font-weight:600; }
.readout__v{
  font-family:var(--f-d); font-weight:400; font-size:1.38rem; line-height:1;
  color:#DCC79A; direction:ltr; font-variant-numeric:tabular-nums;
  transition:opacity .16s var(--ease), transform .16s var(--ease);
}
html[dir="rtl"] .readout__v{ font-family:var(--f-ar); font-weight:600; font-size:1.35rem; }
.readout__v--sm{ font-size:1.1rem; }
html[dir="rtl"] .readout__v--sm{ font-size:1rem; }
.readout__v.is-tick{ opacity:0; transform:translateY(-5px); }

/* ============================================================
   Sections
   ============================================================ */
.sec{ padding-block:clamp(48px,5.6vw,84px); }
.sec--stone{ background:var(--stone); }
.sec--dark{ background:var(--dark); color:#fff; }

/* ---------- transformation story ---------- */
.trans{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(26px,4vw,60px); align-items:start;
}
.trans__copy .h2{ max-width:15ch; }
.trans__pts{ list-style:none; margin:26px 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.trans__pts li{ padding-inline-start:18px; border-inline-start:2px solid var(--line); }
.trans__pts b{ display:block; font-size:.95rem; font-weight:600; }
.trans__pts span{ display:block; font-size:.88rem; color:var(--ink-2); margin-block-start:3px; }
.trans__cap{ margin:12px 2px 0; font-size:.8rem; color:var(--ink-3); }

/* ---------- planning / estimator ---------- */
.sec--est{
  background:var(--green-2); color:#fff;
  transition:background 1s var(--ease);
}
.sec--est.is-night{ background:#132A1F; }
.est{ display:grid; grid-template-columns:1.32fr 1fr; gap:clamp(18px,2.6vw,32px); align-items:start; }
.est__panel{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-3); padding:clamp(20px,2.4vw,28px);
}

/* ---------- before / after ---------- */
.ba__stage{
  position:relative; overflow:hidden; border-radius:var(--r-3);
  aspect-ratio:3/2;
  direction:ltr;                 /* spatial widget — never mirrors */
  user-select:none; -webkit-user-select:none;
  touch-action:pan-y; cursor:ew-resize; background:var(--stone);
}
.ba__after,.ba__before{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba__clip{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--p,50%)) 0 0); }
.ba__handle{
  position:absolute; inset-block:0; inset-inline-start:var(--p,50%);
  width:2px; background:#fff; margin-inline-start:-1px; cursor:ew-resize; touch-action:none;
}
.ba__grip{
  position:absolute; inset-block-start:50%; inset-inline-start:50%;
  transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:#fff; box-shadow:0 4px 16px rgba(0,0,0,.32); display:grid; place-items:center;
}
.ba__grip::before,.ba__grip::after{
  content:""; position:absolute; border-block:5px solid transparent; border-inline-end:7px solid var(--ink);
}
.ba__grip::before{ inset-inline-start:12px; }
.ba__grip::after{ inset-inline-end:12px; transform:rotate(180deg); }
.ba__handle:focus-visible .ba__grip{ outline:3px solid var(--green); outline-offset:3px; }

.ba__tag{
  position:absolute; inset-block-start:14px; padding:5px 12px; border-radius:999px;
  font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(23,33,27,.72); color:#fff; pointer-events:none;
}
html[dir="rtl"] .ba__tag{ letter-spacing:0; text-transform:none; }
.ba__tag--b{ left:14px; }
.ba__tag--a{ right:14px; background:var(--green); }

.ba__tabs{ display:flex; gap:8px; margin-block-start:14px; flex-wrap:wrap; }
.ba__tab{
  padding:9px 17px; border-radius:999px; cursor:pointer; font-size:.86rem; font-weight:600;
  background:#fff; border:1px solid var(--line); color:var(--ink-2);
  transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.ba__tab:hover{ border-color:var(--green); }
.ba__tab.is-on{ background:var(--green); border-color:var(--green); color:#fff; }

/* ---------- what we build ---------- */
.builds{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.bcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-3);
  padding:24px 22px; display:flex; flex-direction:column;
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.bcard:hover{ border-color:var(--green); transform:translateY(-3px); }
.bcard__ico{ width:26px; height:26px; stroke:var(--green); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-block-end:14px; }
.bcard h3{ font-size:1.08rem; font-weight:600; margin:0 0 6px; }
.bcard p{ margin:0 0 16px; font-size:.9rem; color:var(--ink-2); }
.bcard__foot{ margin-block-start:auto; padding-block-start:14px; border-block-start:1px solid var(--line-2); display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.bcard__band{ font-family:var(--f-d); font-size:1.15rem; color:var(--green); direction:ltr; }
html[dir="rtl"] .bcard__band{ font-family:var(--f-ar); font-weight:600; font-size:1rem; }
.bcard__time{ font-size:.76rem; color:var(--ink-3); font-weight:600; }

/* ---------- projects ---------- */
.projects{ display:grid; gap:18px; }
.proj{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-3); overflow:hidden;
}
.proj:nth-child(even) .proj__img{ order:2; }
.proj__img{ margin:0; position:relative; background:var(--stone); }
.proj__img img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; }
.proj__body{ padding:clamp(22px,2.6vw,34px); display:flex; flex-direction:column; justify-content:center; }
.proj__loc{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); }
html[dir="rtl"] .proj__loc{ letter-spacing:0; text-transform:none; }
.proj__body h3{ font-family:var(--f-d); font-weight:400; font-size:1.6rem; margin:8px 0 8px; line-height:1.15; }
html[dir="rtl"] .proj__body h3{ font-family:var(--f-ar); font-weight:600; font-size:1.3rem; line-height:1.4; }
.proj__body p{ margin:0 0 18px; font-size:.92rem; color:var(--ink-2); }
.proj__meta{ list-style:none; margin:0; padding:0; display:flex; gap:24px; flex-wrap:wrap; }
.proj__meta span{ display:block; font-size:.7rem; color:var(--ink-3); font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
html[dir="rtl"] .proj__meta span{ letter-spacing:0; text-transform:none; }
.proj__meta b{ display:block; font-size:.9rem; font-weight:600; margin-block-start:2px; }

/* ---------- care plans ---------- */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; }
.plan{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-3);
  padding:26px 22px; position:relative;
}
.plan--best{ border-color:var(--green); box-shadow:0 14px 40px rgba(47,93,69,.10); }
.plan__tag{
  position:absolute; inset-block-start:-11px; inset-inline-start:22px;
  background:var(--green); color:#fff; font-size:.68rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; padding:4px 12px; border-radius:999px;
}
html[dir="rtl"] .plan__tag{ letter-spacing:0; text-transform:none; }
.plan h3{ font-size:1.1rem; font-weight:600; margin:0 0 10px; }
.plan__p{ display:flex; align-items:baseline; gap:7px; margin-block-end:18px; direction:ltr; }
html[dir="rtl"] .plan__p{ direction:rtl; }
.plan__p b{ font-family:var(--f-d); font-weight:400; font-size:2.4rem; line-height:1; color:var(--green); }
html[dir="rtl"] .plan__p b{ font-family:var(--f-ar); font-weight:600; font-size:2rem; }
.plan__p span{ font-size:.82rem; color:var(--ink-3); font-weight:600; }
.plan ul{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:9px; }
.plan li{ position:relative; padding-inline-start:24px; font-size:.9rem; color:var(--ink-2); }
.plan li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.42em;
  width:14px; height:14px; border-radius:50%; background:var(--green-3)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F5D45' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/9px no-repeat;
}

/* ---------- process ---------- */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:s; }
.step{ padding-block-start:20px; border-block-start:2px solid var(--dark-line); }
.step__n{ display:block; font-family:var(--f-d); font-size:1.5rem; color:var(--brass); margin-block-end:10px; }
html[dir="rtl"] .step__n{ font-family:var(--f-ar); }
.step h3{ font-size:1.02rem; font-weight:600; margin:0 0 7px; color:#fff; }
.step p{ margin:0; font-size:.89rem; color:var(--on-dark-2); }

/* ---------- gallery ---------- */
.gal__filter{ display:flex; gap:7px; flex-wrap:wrap; margin-block-end:18px; }
.pill{
  padding:8px 16px; border-radius:999px; cursor:pointer; font-size:.84rem; font-weight:600;
  background:#fff; border:1px solid var(--line); color:var(--ink-2);
  transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.pill:hover{ border-color:var(--green); }
.pill.is-on{ background:var(--green); border-color:var(--green); color:#fff; }

.gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gal__i{ margin:0; position:relative; overflow:hidden; border-radius:var(--r-2); background:var(--stone); }
.gal__i[hidden]{ display:none; }
.gal__i img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; transition:transform .5s var(--ease); }
.gal__i:hover img{ transform:scale(1.04); }

/* ---------- contact ---------- */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,56px); align-items:start; }
.areas{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:9px; }
.areas li{ position:relative; padding-inline-start:24px; font-size:.92rem; color:var(--ink-2); }
.areas li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.55em;
  width:7px; height:7px; border-radius:50%; background:var(--brass);
}
.cform{ background:#fff; border:1px solid var(--line); border-radius:var(--r-3); padding:clamp(20px,2.6vw,30px); }
.fld{ margin-block-end:15px; }
.fld label,.fld__label{
  display:block; font-size:.72rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-block-end:7px;
}
html[dir="rtl"] .fld label, html[dir="rtl"] .fld__label{ letter-spacing:0; text-transform:none; }
.fld input{
  width:100%; padding:12px 14px; border-radius:var(--r-2);
  border:1px solid var(--line); background:#fff; font-size:.94rem;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.fld input:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(47,93,69,.12); }
.fld input.is-bad{ border-color:#C0392B; background:#FDF3F2; }

/* ---------- faq ---------- */
.acc{ display:flex; flex-direction:column; }
.acc__i{ border-block-end:1px solid var(--line); }
.acc__i:first-child{ border-block-start:1px solid var(--line); }
.acc__i summary{
  list-style:none; cursor:pointer; padding:19px 0;
  display:flex; align-items:center; gap:16px; font-weight:600; font-size:1rem;
}
.acc__i summary::-webkit-details-marker{ display:none; }
.acc__i summary i{ margin-inline-start:auto; flex-shrink:0; width:16px; height:16px; position:relative; }
.acc__i summary i::before,.acc__i summary i::after{
  content:""; position:absolute; inset-inline-start:50%; inset-block-start:50%;
  background:var(--green); border-radius:1px; transform:translate(-50%,-50%);
  transition:transform .3s var(--ease), opacity .25s var(--ease);
}
.acc__i summary i::before{ width:13px; height:2px; }
.acc__i summary i::after{ width:2px; height:13px; }
.acc__i[open] summary i::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.acc__b{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s var(--ease); }
.acc__b p{
  overflow:hidden; min-height:0; margin:0; padding-block-end:0;
  color:var(--ink-2); font-size:.94rem; max-width:68ch;
  transition:padding-block-end .3s var(--ease);
}
.acc__i[open] .acc__b p{ padding-block-end:19px; }

/* ---------- footer ---------- */
.foot{ background:var(--dark); color:var(--on-dark-2); padding-block-start:48px; }
.foot__in{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:32px; padding-block-end:36px; }
.foot__col h4{ font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin:0 0 14px; }
html[dir="rtl"] .foot__col h4{ letter-spacing:0; text-transform:none; }
.foot__col a,.foot__col span{ display:block; font-size:.88rem; padding-block:5px; color:var(--on-dark-2); }
.foot__col a:hover{ color:#fff; }
.brand--foot{ margin-block-end:12px; }
.brand--foot .brand__txt b{ color:#fff; }
.brand--foot .brand__txt i{ color:var(--on-dark-3); }
.foot__col--brand p{ margin:0; font-size:.88rem; max-width:34ch; }
.foot__bar{ border-block-start:1px solid var(--dark-line); padding-block:16px; }
.foot__barin{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.79rem; }
.foot__murshid b{ color:#fff; border-block-end:1px solid var(--brass); }
.foot__murshid:hover b{ color:var(--brass); }

/* ---------- mobile dock ---------- */
.dock{
  display:none; position:fixed; inset-inline:0; inset-block-end:0; z-index:120;
  background:#fff; border-block-start:1px solid var(--line);
  padding-block-end:env(safe-area-inset-bottom);
}
.dock__i{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:10px 4px; color:var(--ink-2); font-size:.68rem; font-weight:600;
}
.dock__i svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.dock__i--wa{ color:#fff; background:#25D366; }
.dock__i--book{ color:#fff; background:var(--green); }

/* ============================================================
   Photo brief chips
   Remove the `briefs` class on <body> to hide these before sending
   the link to a prospect.
   ============================================================ */
.brief{ display:none; }
body.briefs [data-brief]{ position:relative; }
body.briefs [data-brief]::after{
  content:"📷 " attr(data-brief);
  position:absolute; inset-inline:10px; inset-block-end:10px;
  padding:8px 11px; border-radius:8px;
  background:rgba(23,33,27,.86); color:#fff;
  font-family:var(--f); font-size:.7rem; line-height:1.4; font-weight:500;
  letter-spacing:0; text-transform:none; pointer-events:none; z-index:3;
}
body.briefs .brief{
  display:block; position:absolute; inset-block-end:64px; inset-inline-start:14px;
  z-index:4; max-width:min(420px, calc(100% - 28px));
  padding:8px 11px; border-radius:8px;
  background:rgba(23,33,27,.86); color:#fff; font-size:.7rem; line-height:1.4;
  pointer-events:none;
}

/* ---------- scroll reveal ---------- */
[data-r]{
  opacity:0; transform:translateY(14px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  transition-delay:calc(var(--d,0) * 55ms);
}
[data-r].in{ opacity:1; transform:none; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1040px){
  .trans{ grid-template-columns:1fr; }
  .est{ grid-template-columns:1fr; }
  .builds{ grid-template-columns:repeat(2,1fr); }
  .plans{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .contact{ grid-template-columns:1fr; }
  .foot__in{ grid-template-columns:1fr 1fr; }
}

@media (max-width: 860px){
  .hero__scroll{ display:none; }
  .nav__links{ display:none; }
  .burger{ display:flex; }
  .dock{ display:flex; }
  body{ padding-block-end:66px; }
  .proj{ grid-template-columns:1fr; }
  .proj:nth-child(even) .proj__img{ order:0; }
  .gal{ grid-template-columns:repeat(2,1fr); }
  .util__in span:not(.util__sep){ display:none; }
  .util__in a{ display:block; }
  .util__sep{ display:none; }
  .nav__act .btn--green span{ display:none; }
  .nav__act .btn--green{ padding:10px 13px; }
}

@media (max-width: 600px){
  .wrap{ width:calc(100% - 32px); }
  .builds{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:16px; }
  .gal{ grid-template-columns:1fr; }
  .foot__in{ grid-template-columns:1fr; gap:26px; }
  .ba__stage{ aspect-ratio:4/3; }
  .ba__grip{ width:40px; height:40px; }
  .proj__meta{ gap:16px; }
  .demobar{ font-size:.71rem; gap:8px; padding:7px 14px; }
}

/* ============================================================
   Motion fallbacks
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-r]{ opacity:1; transform:none; }
  .hero__ph{ animation:none; }
  .hero__scroll{ display:none; }
}

@media print{
  .nav,.dock,.demobar,.util,.daynight{ display:none !important; }
  body{ background:#fff; }
}