/* =========================================================================
   FINAL CODE — للمقاولات والتجارة
   style.css
   ---------------------------------------------------------------
   PALETTE  — extracted pixel-exact from logo.png
     monogram body      #5C4B39 / #605040 / #584838 / #504030
     bevel highlight    #6C5C4A
     wordmark ink       #241A13 → #17110C
   TYPE — THREE ZONES
     Zone 1  display   : El Messiri (AR)  /  Cormorant Garamond (EN)
     Zone 2  UI / nav  : Reem Kufi   (AR)  /  Syne             (EN)
     Zone 3  body      : IBM Plex Sans Arabic (both)
   ========================================================================= */

/* ------------------------------- TOKENS ------------------------------- */
:root{
  /* logo-derived */
  --ink:        #17110C;
  --ink-2:      #241A13;
  --ink-3:      #33261C;
  --bronze:     #5C4B39;
  --bronze-lt:  #6E5B45;
  --brass:      #A88355;
  --brass-lt:   #C9A87A;
  --sand:       #E7DECE;
  --sand-2:     #EDE6DA;
  --paper:      #F7F3EC;
  --cream:      #EFE7DA;

  --line:       rgba(92,75,57,.20);
  --line-soft:  rgba(92,75,57,.11);
  --line-dark:  rgba(239,231,218,.16);

  /* type zones */
  --z1: "El Messiri","Cormorant Garamond",Georgia,serif;
  --z2: "Reem Kufi","Syne",sans-serif;
  --z3: "IBM Plex Sans Arabic",-apple-system,sans-serif;

  --nav-h: 84px;
  --pad:  clamp(20px, 5vw, 84px);
  --sect: clamp(80px, 9vw, 152px);
  --maxw: 1360px;

  --ease: cubic-bezier(.22,.61,.36,1);
}
html[dir="ltr"]{
  --z1: "Cormorant Garamond","El Messiri",Georgia,serif;
  --z2: "Syne","Reem Kufi",sans-serif;
}

/* ------------------------------- RESET ------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--z3); font-size:17px; line-height:1.75; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--z1); font-weight:700; line-height:1.14; letter-spacing:-.005em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
::selection{ background:var(--bronze); color:var(--cream); }

/* grain */
body::after{
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.30;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ------------------------------ HELPERS ------------------------------ */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.sect{ padding-block:var(--sect); position:relative; }
.bg-paper{ background:var(--paper); }
.bg-sand { background:var(--sand-2); }
.bg-sand-d{ background:var(--sand); }
.bg-ink  { background:var(--ink); color:var(--cream); }
.bg-ink h1,.bg-ink h2,.bg-ink h3{ color:var(--cream); }

/* Zone 2 — eyebrow */
.eyebrow{
  font-family:var(--z2); font-weight:700; font-size:clamp(1.3rem,1.9vw,1.9rem);
  line-height:1.25; letter-spacing:.02em; color:var(--brass);
  display:flex; align-items:center; gap:16px; margin-bottom:16px;
}
.eyebrow::after{ content:""; height:1px; width:72px; background:currentColor; opacity:.45; flex:none; }
.bg-ink .eyebrow{ color:var(--brass-lt); }

.sect-title{ font-size:clamp(2.3rem,4.6vw,4rem); max-width:19ch; }
.sect-lead{
  font-family:var(--z3); font-size:1.075rem; line-height:1.85;
  color:rgba(23,17,12,.68); max-width:60ch; margin-top:22px;
}
.bg-ink .sect-lead{ color:rgba(239,231,218,.66); }

.sect-head{ margin-bottom:clamp(44px,5vw,80px); }
.sect-head--split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,80px); align-items:end; }
@media(max-width:880px){ .sect-head--split{ grid-template-columns:1fr; align-items:start; } }

/* Zone 2 — buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--z2); font-weight:700; font-size:1rem; letter-spacing:.02em;
  padding:16px 30px; border:1px solid transparent; border-radius:2px;
  cursor:pointer; transition:.32s var(--ease); position:relative; overflow:hidden;
}
.btn svg{ width:17px; height:17px; flex:none; }
.btn--solid{ background:var(--ink); color:var(--cream); }
.btn--solid:hover{ background:var(--bronze); }
.btn--brass{ background:var(--brass); color:var(--ink); }
.btn--brass:hover{ background:var(--brass-lt); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.btn--light{ background:transparent; color:var(--cream); border-color:rgba(239,231,218,.4); }
.btn--light:hover{ background:var(--cream); color:var(--ink); }
.btn--cream{ background:var(--cream); color:var(--ink); }
.btn--cream:hover{ background:#fff; }

/* Zone 2 — small caps label */
.label{ font-family:var(--z2); font-weight:700; font-size:.86rem; letter-spacing:.04em; }

/* reveal on scroll */
.rv{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.rv.in{ opacity:1; transform:none; }

/* arch clip (defined in index.html svg) */
.arch{ clip-path:url(#archClip); }

/* ------------------------------- NAV --------------------------------- */
.nav{
  position:fixed; inset-inline:0; top:0; z-index:1000; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .4s var(--ease), height .4s var(--ease), box-shadow .4s var(--ease);
}
.nav__in{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:26px; }
/* default state = fully transparent, sitting over the hero */
.nav{ background:transparent; box-shadow:none; }
/* scrolled (and every interior page) = light beige bar */
.nav--scrolled{ background:#E7DECE; backdrop-filter:blur(12px); height:72px;
  box-shadow:0 1px 0 rgba(92,75,57,.22), 0 14px 34px -26px rgba(23,17,12,.55); }

/* --- transparent state: cream items so they read over the dark hero --- */
.nav:not(.nav--scrolled) .nav__bname b{ color:var(--cream); }
.nav:not(.nav--scrolled) .nav__bname span{ color:var(--brass-lt); }
.nav:not(.nav--scrolled) .nav__link{ color:var(--cream); }
.nav:not(.nav--scrolled) .nav__link::after{ background:var(--brass-lt); }
.nav:not(.nav--scrolled) .nav__link:hover,
.nav:not(.nav--scrolled) .nav__link.is-on{ color:var(--brass-lt); }
.nav:not(.nav--scrolled) .lang{ color:var(--cream); border-color:rgba(239,231,218,.38); }
.nav:not(.nav--scrolled) .lang:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
.nav:not(.nav--scrolled) .nav__right .btn{ background:var(--brass); color:var(--ink); }
.nav:not(.nav--scrolled) .nav__right .btn:hover{ background:var(--brass-lt); }
.nav:not(.nav--scrolled) .burger{ border-color:rgba(239,231,218,.38); }
.nav:not(.nav--scrolled) .burger span{ background:var(--cream); }

.nav__brand{ display:flex; align-items:center; gap:13px; flex:none; }
/* both lockups stacked; opacity cross-fades with the bar so there is no flicker */
.nav__logo{ position:relative; height:70px; width:70px; flex:none; transition:.4s var(--ease); }
.nav--scrolled .nav__logo{ height:70px; width:70px; }
.nav__logo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transition:opacity .34s var(--ease); }
.nav__logo--dark{ opacity:0; }
.nav--scrolled .nav__logo--light{ opacity:0; }
.nav--scrolled .nav__logo--dark{ opacity:1; }
.nav__bname{ display:flex; flex-direction:column; line-height:1.05; }
.nav__bname b{ font-family:var(--z1); font-size:1.22rem; font-weight:700; color:var(--ink); letter-spacing:0; }
.nav__bname span{ font-family:var(--z2); font-size:.72rem; font-weight:600; letter-spacing:.05em; color:var(--bronze); margin-top:3px; }

.nav__links{ display:flex; align-items:center; gap:4px; }
.nav__link{
  font-family:var(--z2); font-weight:700; font-size:18px; letter-spacing:.02em;
  color:var(--ink-2); padding:10px 15px; position:relative; transition:color .25s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; inset-inline-start:15px; bottom:4px; height:2px; width:0;
  background:var(--bronze); transition:width .32s var(--ease);
}
.nav__link:hover::after,.nav__link.is-on::after{ width:calc(100% - 30px); }
.nav__link.is-on{ color:var(--bronze); }

.nav__right{ display:flex; align-items:center; gap:12px; flex:none; }
.lang{
  font-family:"Reem Kufi",var(--z2); font-weight:700; font-size:16px; letter-spacing:.03em;
  width:44px; height:44px; display:grid; place-items:center; border-radius:2px;
  border:1px solid rgba(92,75,57,.34); color:var(--ink); background:transparent;
  cursor:pointer; transition:.28s var(--ease);
}
.lang:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.nav .btn{ padding:13px 24px; font-size:.96rem; }

.burger{ display:none; width:46px; height:46px; border:1px solid rgba(92,75,57,.34);
  background:transparent; border-radius:2px; cursor:pointer; padding:0;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.burger span{ display:block; width:20px; height:2px; background:var(--ink); transition:.3s var(--ease); }
.burger.on span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.on span:nth-child(2){ opacity:0; }
.burger.on span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:999; background:var(--sand);
  padding:calc(var(--nav-h) + 34px) var(--pad) 40px;
  display:flex; flex-direction:column; gap:6px;
  transform:translateY(-100%); transition:transform .48s var(--ease); overflow-y:auto;
}
.drawer.open{ transform:none; }
.drawer a{ font-family:var(--z1); font-weight:700; font-size:clamp(1.9rem,7vw,2.6rem);
  color:var(--ink); padding:12px 0; border-bottom:1px solid rgba(92,75,57,.16); }
.drawer a.is-on{ color:var(--bronze); }
.drawer .btn{ margin-top:26px; background:var(--ink); color:var(--cream);
  border-color:var(--ink); font-family:var(--z2); font-weight:700; font-size:1.05rem;
  letter-spacing:.02em; border-bottom:1px solid var(--ink); }
.drawer .btn:hover{ background:var(--bronze); border-color:var(--bronze); color:var(--cream); }
.drawer__meta{ margin-top:auto; padding-top:34px; display:flex; flex-direction:column; gap:4px; }
.drawer__meta a{ font-family:var(--z2); font-weight:600; font-size:16px; letter-spacing:.02em;
  color:rgba(23,17,12,.62); padding:6px 0; border-bottom:0; }
.drawer__meta a:hover{ color:var(--bronze); }

@media(max-width:1080px){
  .nav__links{ display:none; }
  .nav .btn{ display:none; }
  .burger{ display:flex; }
}
@media(max-width:420px){ .nav__bname{ display:none; } }

/* ------------------------------- HERO -------------------------------- */
.hero{ position:relative; display:flex; align-items:center; overflow:hidden;
  min-height:100vh;            /* fallback for older browsers */
  min-height:100svh;           /* fills the screen without fighting mobile toolbars */
  padding-block:calc(var(--nav-h) + clamp(34px,5vh,62px)) clamp(46px,6vh,78px); }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 50%; }
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(15,10,7,.94) 0%, rgba(15,10,7,.72) 34%, rgba(15,10,7,.34) 66%, rgba(15,10,7,.62) 100%);
}
.hero__in{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--pad); display:grid; grid-template-columns:1.34fr .66fr; gap:clamp(30px,4vw,60px); align-items:center; }

.hero h1{
  font-size:clamp(2.35rem,4.9vw,4.3rem); line-height:1.09; color:var(--cream);
  max-width:19ch; letter-spacing:-.012em;
}
.hero__sub{ font-family:var(--z3); font-size:clamp(.99rem,1.15vw,1.07rem); line-height:1.75;
  color:rgba(239,231,218,.80); max-width:62ch; margin-top:22px; }
.hero__btns{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }

/* — the one animated word: brass fill-wipe — */
.wipe{ position:relative; display:inline-block; color:rgba(239,231,218,.30); }
.wipe::after{
  content:attr(data-w); position:absolute; inset:0; color:var(--brass-lt);
  clip-path:inset(0 100% 0 0); animation:wipeIn 1.15s .55s var(--ease) forwards, wipePulse 7s 3s infinite;
}
html[dir="rtl"] .wipe::after{ clip-path:inset(0 0 0 100%); animation-name:wipeInR, wipePulse; }
@keyframes wipeIn{ to{ clip-path:inset(0 0 0 0); } }
@keyframes wipeInR{ to{ clip-path:inset(0 0 0 0); } }
@keyframes wipePulse{
  0%,88%,100%{ filter:none; }
  93%{ filter:brightness(1.32) drop-shadow(0 0 14px rgba(201,168,122,.5)); }
}
@media(prefers-reduced-motion:reduce){
  .wipe::after{ animation:none; clip-path:inset(0 0 0 0); }
  .rv{ opacity:1; transform:none; }
}

/* hero quote form (transparent, keeps image visible) */
.hform{
  border:1px solid rgba(239,231,218,.24); background:rgba(20,14,10,.34);
  backdrop-filter:blur(9px); padding:24px 22px 22px; border-radius:2px;
}
.hform h3{ font-size:1.4rem; color:var(--cream); }
.hform__note{ font-family:var(--z2); font-weight:600; font-size:.84rem; color:var(--brass-lt);
  letter-spacing:.02em; margin-top:7px; margin-bottom:16px; }
.hform .fld{ margin-bottom:10px; }
.hform input,.hform select,.hform textarea{
  width:100%; background:rgba(247,243,236,.07); border:1px solid rgba(239,231,218,.22);
  color:var(--cream); padding:11px 14px; border-radius:2px; font-family:var(--z3); font-size:.96rem;
  transition:.25s var(--ease);
}
.hform input::placeholder,.hform textarea::placeholder{ color:rgba(239,231,218,.42); }
.hform input:focus,.hform select:focus,.hform textarea:focus{ outline:none; border-color:var(--brass-lt); background:rgba(247,243,236,.12); }
.hform select option{ background:var(--ink); color:var(--cream); }
.hform .btn{ width:100%; margin-top:4px; padding:14px 24px; }

@media(max-width:1100px){
  .hero__in{ grid-template-columns:1fr; }
  .hform{ max-width:520px; }
}
@media(max-width:900px){
  .hero__bg::after{
    background:linear-gradient(to top, rgba(15,10,7,.96) 0%, rgba(15,10,7,.86) 40%, rgba(15,10,7,.70) 72%, rgba(15,10,7,.78) 100%);
  }
}
@media(max-width:640px){
  .hero{ padding-block:calc(var(--nav-h) + 44px) 52px; }
  .hero h1{ font-size:clamp(2.05rem,8.2vw,2.8rem); max-width:16ch; }
  .hero__sub{ font-size:.98rem; }
  .hero__btns .btn{ flex:1 1 auto; }
}

/* --------------------------- PARTNERS -------------------------------- */
.partners{ padding-block:clamp(56px,6vw,88px); background:var(--paper); border-bottom:1px solid var(--line-soft); }
.partners__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:40px; }
.partners__head h2{ font-size:clamp(1.9rem,3.4vw,2.9rem); }
.partners__head p{ font-family:var(--z3); color:rgba(23,17,12,.62); max-width:46ch; font-size:1rem; }

.marquee{ position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent); }
.marquee__track{ display:flex; width:max-content; animation:slide 42s linear infinite; will-change:transform; }
/* in RTL the track is anchored to the right edge, so it has to travel the other way
   or it drags a blank gap in behind it */
html[dir="rtl"] .marquee__track{ animation-name:slideR; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes slideR{ from{ transform:translateX(0); } to{ transform:translateX(50%);  } }
.plogo{
  flex:none; width:clamp(190px,21vw,252px); height:128px; margin-inline:10px;
  display:flex; align-items:center; justify-content:center; padding:18px 22px;
  border:1px solid var(--line-soft); background:#fff; border-radius:2px;
  overflow:hidden;
  transition:.42s var(--ease);
}
/* both axes capped, so any logo aspect ratio scales down to fit instead of spilling */
.plogo img{ max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block; }
.plogo:hover{ border-color:var(--line); transform:translateY(-3px); }
@media(prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* ---------------------------- TRUST STRIP ---------------------------- */
.trust{ background:var(--sand); padding-block:clamp(60px,6.5vw,96px); }
.trust__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-block:1px solid var(--line); }
.trust__item{ padding:clamp(30px,3vw,44px) clamp(20px,2.4vw,36px); border-inline-end:1px solid var(--line); }
.trust__item:last-child{ border-inline-end:0; }
.trust__item h3{ font-size:1.34rem; margin-bottom:12px; }
.trust__item p{ font-size:.98rem; line-height:1.78; color:rgba(23,17,12,.66); }
.trust__ico{ width:26px; height:26px; color:var(--brass); margin-bottom:22px; }
.trust__ico svg{ width:100%; height:100%; }
@media(max-width:960px){ .trust__grid{ grid-template-columns:repeat(2,1fr); }
  .trust__item:nth-child(2n){ border-inline-end:0; }
  .trust__item:nth-child(-n+2){ border-bottom:1px solid var(--line); } }
@media(max-width:560px){ .trust__grid{ grid-template-columns:1fr; }
  .trust__item{ border-inline-end:0; border-bottom:1px solid var(--line); }
  .trust__item:last-child{ border-bottom:0; } }

/* ------------------------------ PROCESS ------------------------------ */
.proc{ background:var(--paper); }
.proc__list{ border-top:1px solid var(--line); }
.proc__row{
  display:grid; grid-template-columns:auto 1fr 1.25fr; gap:clamp(20px,4vw,56px);
  align-items:baseline; padding-block:clamp(30px,3.4vw,50px); border-bottom:1px solid var(--line);
  transition:background .4s var(--ease);
}
.proc__row:hover{ background:rgba(232,222,206,.55); }
.proc__n{
  font-family:var(--z1); font-weight:700; font-size:clamp(3.4rem,7.4vw,6.6rem); line-height:.8;
  color:transparent; -webkit-text-stroke:1.2px rgba(92,75,57,.36); flex:none; min-width:1.4ch;
  transition:.45s var(--ease);
}
.proc__row:hover .proc__n{ color:var(--brass); -webkit-text-stroke-color:transparent; }
.proc__row h3{ font-size:clamp(1.4rem,2.3vw,1.95rem); }
.proc__row p{ font-size:1.02rem; line-height:1.82; color:rgba(23,17,12,.68); }
@media(max-width:860px){
  .proc__row{ grid-template-columns:auto 1fr; }
  .proc__row p{ grid-column:2; margin-top:10px; }
}

/* ------------------------------ SERVICES ----------------------------- */
.srv{ background:var(--sand-2); }
.srv__row{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,84px);
  align-items:center; padding-block:clamp(46px,5vw,80px); border-bottom:1px solid var(--line);
}
.srv__row:first-of-type{ border-top:1px solid var(--line); }
.srv__row:nth-child(even) .srv__media{ order:2; }
.srv__media{ position:relative; }
.srv__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:2px;
  transition:transform .9s var(--ease); }
.srv__media__mask{ overflow:hidden; border-radius:2px; }
.srv__row:hover .srv__media img{ transform:scale(1.045); }
.srv__tag{
  position:absolute; top:16px; inset-inline-start:16px; z-index:2;
  font-family:var(--z2); font-weight:700; font-size:.86rem; letter-spacing:.06em;
  background:var(--ink); color:var(--brass-lt); padding:7px 14px; border-radius:2px;
}
.srv__body h3{ font-size:clamp(1.85rem,3.2vw,2.75rem); margin-bottom:18px; }
.srv__body > p{ font-size:1.04rem; line-height:1.85; color:rgba(23,17,12,.70); max-width:52ch; }
.srv__b{ display:grid; grid-template-columns:1fr 1fr; gap:11px 22px; margin-top:28px; }
.srv__b li{ font-family:var(--z2); font-weight:600; font-size:.95rem; letter-spacing:.01em;
  display:flex; align-items:flex-start; gap:10px; color:var(--ink-2); }
.srv__b li::before{ content:""; width:7px; height:7px; margin-top:9px; flex:none;
  background:var(--brass); transform:rotate(45deg); }
@media(max-width:880px){
  .srv__row{ grid-template-columns:1fr; }
  .srv__row:nth-child(even) .srv__media{ order:0; }
  .srv__b{ grid-template-columns:1fr; }
}

/* ------------------------------ CTA BAND ----------------------------- */
.ctab{ background:var(--bronze); color:var(--cream); position:relative; overflow:hidden;
  padding-block:clamp(72px,8vw,132px); }
.ctab::before{
  content:""; position:absolute; inset:0; opacity:.14; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='150' viewBox='0 0 120 150'%3E%3Cpath d='M10 150 V64 C10 64 22 22 60 6 C98 22 110 64 110 64 V150' fill='none' stroke='%23EFE7DA' stroke-width='2'/%3E%3C/svg%3E");
  background-size:120px 150px;
}
.ctab__in{ position:relative; z-index:2; display:grid; grid-template-columns:1.25fr .75fr;
  gap:clamp(30px,5vw,72px); align-items:center; }
.ctab .eyebrow{ color:rgba(239,231,218,.82); }
.ctab h2{ font-size:clamp(2.2rem,4.6vw,3.9rem); color:var(--cream); max-width:16ch; }
.ctab p{ font-family:var(--z3); font-size:1.06rem; line-height:1.8; color:rgba(239,231,218,.80);
  margin-top:22px; max-width:48ch; }
.ctab__btns{ display:flex; flex-direction:column; gap:13px; align-items:flex-start; }
@media(max-width:900px){ .ctab__in{ grid-template-columns:1fr; } .ctab__btns{ flex-direction:row; flex-wrap:wrap; } }

/* ------------------------------ GALLERY ------------------------------ */
.gal{ background:var(--paper); }
.gal__filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:36px; }
.gal__filters button{
  font-family:var(--z2); font-weight:700; font-size:.94rem; letter-spacing:.02em;
  padding:11px 20px; border:1px solid var(--line); background:transparent; border-radius:2px;
  cursor:pointer; transition:.28s var(--ease); color:var(--ink);
}
.gal__filters button:hover{ border-color:var(--bronze); }
.gal__filters button.on{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

.gal__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px; }
.gitem{ position:relative; overflow:hidden; border-radius:2px; background:var(--sand); grid-column:span 4; }
.gitem--w{ grid-column:span 6; }
.gitem--t{ grid-column:span 3; }
.gitem img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;
  transition:transform .8s var(--ease), filter .5s var(--ease); }
.gitem--tall img{ aspect-ratio:3/4; }
.gitem__cap{
  position:absolute; inset-inline:0; bottom:0; padding:22px 20px 18px;
  background:linear-gradient(to top,rgba(15,10,7,.9),transparent);
  font-family:var(--z2); font-weight:600; font-size:.95rem; color:var(--cream);
  opacity:0; transform:translateY(10px); transition:.42s var(--ease);
}
.gitem:hover img{ transform:scale(1.06); }
.gitem:hover .gitem__cap{ opacity:1; transform:none; }
@media(max-width:900px){ .gal__grid{ grid-template-columns:repeat(6,1fr); }
  .gitem,.gitem--w,.gitem--t{ grid-column:span 3; } }
@media(max-width:560px){ .gal__grid{ grid-template-columns:1fr; }
  .gitem,.gitem--w,.gitem--t{ grid-column:span 1; } }

/* --------------------- BEFORE / AFTER  (wow moment) ------------------ */
.ba{ background:var(--ink); color:var(--cream); }
.ba__tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; }
.ba__tabs button{
  font-family:var(--z2); font-weight:700; font-size:.94rem; letter-spacing:.02em;
  padding:11px 20px; border:1px solid var(--line-dark); background:transparent;
  color:var(--cream); border-radius:2px; cursor:pointer; transition:.28s var(--ease);
}
.ba__tabs button:hover{ border-color:var(--brass-lt); }
.ba__tabs button.on{ background:var(--brass); color:var(--ink); border-color:var(--brass); }

.ba__stage{ position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; border-radius:2px;
  user-select:none; touch-action:none; cursor:ew-resize; background:#0d0906; }
.ba__stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba__after{ clip-path:inset(0 0 0 var(--x,50%)); }
html[dir="rtl"] .ba__after{ clip-path:inset(0 var(--x,50%) 0 0); }
.ba__line{ position:absolute; top:0; bottom:0; width:2px; background:var(--cream);
  inset-inline-start:var(--x,50%); transform:translateX(-1px); pointer-events:none;
  box-shadow:0 0 22px rgba(0,0,0,.5); }
html[dir="rtl"] .ba__line{ transform:translateX(1px); }
.ba__handle{
  position:absolute; top:50%; inset-inline-start:var(--x,50%); transform:translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%; background:var(--cream); color:var(--ink);
  display:grid; place-items:center; pointer-events:none; box-shadow:0 8px 30px rgba(0,0,0,.42);
}
html[dir="rtl"] .ba__handle{ transform:translate(50%,-50%); }
.ba__handle svg{ width:26px; height:26px; }
.ba__pill{
  position:absolute; top:18px; font-family:var(--z2); font-weight:700; font-size:.85rem;
  letter-spacing:.05em; padding:7px 15px; border-radius:2px; pointer-events:none;
  background:rgba(15,10,7,.7); color:var(--cream); backdrop-filter:blur(6px);
}
.ba__pill--b{ inset-inline-start:18px; }
.ba__pill--a{ inset-inline-end:18px; background:rgba(168,131,85,.9); color:var(--ink); }
.ba__meta{ margin-top:26px; display:grid; grid-template-columns:auto 1fr; gap:8px 26px; align-items:baseline; }
.ba__meta h3{ font-size:1.55rem; color:var(--cream); }
.ba__meta p{ color:rgba(239,231,218,.66); font-size:1.02rem; line-height:1.8; }
@media(max-width:760px){ .ba__stage{ aspect-ratio:4/3; } .ba__meta{ grid-template-columns:1fr; } }

/* ---------------------------- MILESTONES ----------------------------- */
.mile{ background:var(--paper); }
.mile__list{ position:relative; }
.mile__item{ display:grid; grid-template-columns:auto 1fr; gap:clamp(22px,3.4vw,50px);
  padding-block:clamp(28px,3vw,42px); border-bottom:1px solid var(--line); position:relative; }
.mile__item:first-child{ border-top:1px solid var(--line); }
.mile__dot{ width:12px; height:12px; background:var(--brass); transform:rotate(45deg); margin-top:14px; flex:none; }
.mile__item h3{ font-size:clamp(1.4rem,2.5vw,2.05rem); margin-bottom:12px; }
.mile__item p{ font-size:1.02rem; line-height:1.84; color:rgba(23,17,12,.68); max-width:74ch; }

/* ----------------------------- REVIEWS ------------------------------- */
.rev{ background:var(--sand-2); }
.rev__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
.rcard{ background:var(--paper); border:1px solid var(--line-soft); padding:clamp(28px,3vw,40px);
  border-radius:2px; display:flex; flex-direction:column; transition:.4s var(--ease); }
.rcard:hover{ transform:translateY(-5px); border-color:var(--line); box-shadow:0 20px 44px -30px rgba(23,17,12,.45); }
.rcard__q{ font-family:var(--z1); font-size:1.5rem; line-height:1.06; color:var(--brass); margin-bottom:14px; }
.rcard p{ font-size:1.02rem; line-height:1.86; color:rgba(23,17,12,.76); flex:1; }
.rcard__who{ margin-top:26px; padding-top:20px; border-top:1px solid var(--line-soft); }
.rcard__who b{ display:block; font-family:var(--z2); font-weight:700; font-size:1rem; letter-spacing:.01em; }
.rcard__who span{ display:block; font-family:var(--z2); font-weight:600; font-size:.87rem;
  color:rgba(23,17,12,.55); margin-top:4px; }
.rev__note{ font-family:var(--z2); font-weight:600; font-size:.84rem; color:rgba(23,17,12,.42); margin-top:24px; }
@media(max-width:900px){ .rev__grid{ grid-template-columns:1fr; } }

/* ----------------------------- FOUNDER ------------------------------- */
.fnd{ background:var(--ink); color:var(--cream); overflow:hidden; }
.fnd__in{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,84px); align-items:center; }
.fnd__media{ position:relative; }
.fnd__media img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 30%; position:relative; z-index:1; }
.fnd__media::after{
  content:""; position:absolute; inset-inline-end:-16px; bottom:-16px; width:52%; height:38%;
  border:1px solid var(--brass); z-index:0;
}
.fnd h2{ font-size:clamp(2.2rem,4.4vw,3.5rem); color:var(--cream); }
.fnd p{ font-size:1.06rem; line-height:1.9; color:rgba(239,231,218,.72); margin-top:22px; max-width:60ch; }
.fnd .btn{ margin-top:34px; }
@media(max-width:880px){ .fnd__in{ grid-template-columns:1fr; } .fnd__media img{ aspect-ratio:4/3; } }

/* ------------------------------- LEGAL ------------------------------- */
.legal{ background:var(--paper); }
.legal__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,32px); }
.lcard{ border:1px solid var(--line); padding:clamp(26px,3vw,40px); border-radius:2px; background:var(--sand-2); }
.lcard h3{ font-size:1.5rem; margin-bottom:22px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.lrow{ display:grid; grid-template-columns:auto 1fr; gap:8px 20px; padding-block:11px; border-bottom:1px solid var(--line-soft); }
.lrow:last-child{ border-bottom:0; }
.lrow dt{ font-family:var(--z2); font-weight:600; font-size:.92rem; color:rgba(23,17,12,.56); white-space:nowrap; }
.lrow dd{ margin:0; font-family:var(--z2); font-weight:700; font-size:1rem; letter-spacing:.01em; }
@media(max-width:820px){ .legal__grid{ grid-template-columns:1fr; } .lrow{ grid-template-columns:1fr; } }

/* ------------------------------ CONTACT ------------------------------ */
.ctc{ background:var(--sand-2); }
.ctc__in{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,76px); align-items:start; }
.cform .fld{ margin-bottom:16px; }
.cform label{ display:block; font-family:var(--z2); font-weight:700; font-size:.9rem;
  letter-spacing:.02em; margin-bottom:8px; color:var(--ink-2); }
.cform input,.cform select,.cform textarea{
  width:100%; background:var(--paper); border:1px solid var(--line);
  padding:14px 15px; border-radius:2px; font-family:var(--z3); font-size:1rem; transition:.25s var(--ease);
}
.cform textarea{ min-height:132px; resize:vertical; }
.cform input:focus,.cform select:focus,.cform textarea:focus{ outline:none; border-color:var(--bronze);
  box-shadow:0 0 0 3px rgba(92,75,57,.10); }
.cform .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cform .btn{ width:100%; margin-top:8px; }
.cform__ok{ font-family:var(--z2); font-weight:600; font-size:.92rem; color:var(--bronze);
  margin-top:14px; padding:12px 14px; border:1px solid var(--line); background:var(--paper); }

.cinfo{ display:flex; flex-direction:column; }
.cinfo__row{ display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start;
  padding-block:20px; border-bottom:1px solid var(--line); }
.cinfo__row:first-child{ border-top:1px solid var(--line); }
.cinfo__ico{ width:22px; height:22px; color:var(--brass); margin-top:4px; }
.cinfo__ico svg{ width:100%; height:100%; }
.cinfo__row dt{ font-family:var(--z2); font-weight:600; font-size:.86rem;
  letter-spacing:.03em; color:rgba(23,17,12,.55); margin-bottom:5px; }
.cinfo__row dd{ margin:0; font-family:var(--z2); font-weight:700; font-size:1.06rem;
  letter-spacing:.01em; line-height:1.6; }
.cinfo__row dd a:hover{ color:var(--brass); }
.cmap{ margin-top:32px; border:1px solid var(--line); border-radius:2px; overflow:hidden; }
.cmap iframe{ width:100%; height:290px; border:0; display:block; filter:grayscale(.35) sepia(.14); }
@media(max-width:920px){ .ctc__in{ grid-template-columns:1fr; } }
@media(max-width:520px){ .cform .grid2{ grid-template-columns:1fr; } }

/* ------------------------------- SOCIAL ------------------------------ */
.soc{ background:var(--ink); color:var(--cream); padding-block:clamp(56px,6vw,88px); }
.soc__in{ display:grid; grid-template-columns:1fr auto; gap:36px; align-items:center; }
.soc h2{ font-size:clamp(1.9rem,3.4vw,2.8rem); color:var(--cream); }
.soc p{ color:rgba(239,231,218,.6); margin-top:12px; font-size:1rem; }
.soc__links{ display:flex; gap:12px; flex-wrap:wrap; }
.soc__link{
  display:flex; align-items:center; gap:11px; padding:15px 24px;
  border:1px solid var(--line-dark); border-radius:2px; transition:.32s var(--ease);
  font-family:var(--z2); font-weight:700; font-size:1rem; letter-spacing:.02em;
}
.soc__link svg{ width:19px; height:19px; }
.soc__link:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }
@media(max-width:820px){ .soc__in{ grid-template-columns:1fr; } }

/* ------------------------------- FOOTER ------------------------------ */
.ft{ background:#100B07; color:var(--cream); padding-block:clamp(56px,6vw,84px) 0; }
.ft__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.25fr; gap:clamp(28px,4vw,56px);
  padding-bottom:clamp(40px,5vw,64px); border-bottom:1px solid var(--line-dark); }
.ft__brand img{ height:150px; width:auto; margin-bottom:20px; }
.ft__brand p{ font-family:var(--z3); font-size:.99rem; line-height:1.8;
  color:rgba(239,231,218,.6); max-width:38ch; }
.ft h4{ font-family:var(--z2); font-weight:700; font-size:1.02rem; letter-spacing:.03em;
  color:var(--brass-lt); margin-bottom:20px; }
.ft__col a,.ft__col li{
  display:block; font-family:var(--z2); font-weight:600; font-size:16px; letter-spacing:.02em;
  color:rgba(239,231,218,.78); padding-block:7px; transition:.25s var(--ease); line-height:1.55;
}
.ft__col a:hover{ color:var(--brass-lt); }
.ft__qr{ display:flex; gap:16px; align-items:center; margin-top:22px; }
.ft__qr img{ width:88px; height:88px; background:var(--cream); padding:6px; border-radius:2px; }
.ft__qr span{ font-family:var(--z2); font-weight:600; font-size:.88rem;
  color:rgba(239,231,218,.55); max-width:18ch; line-height:1.6; }
.ft__bot{ display:flex; flex-wrap:wrap; gap:12px 30px; justify-content:space-between;
  align-items:center; padding-block:26px; }
.ft__bot span{ font-family:var(--z2); font-weight:600; font-size:14.5px; color:rgba(239,231,218,.48); }
@media(max-width:980px){ .ft__top{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .ft__top{ grid-template-columns:1fr; } }

/* ---------------------------- PAGE HEADERS --------------------------- */
.phead{ position:relative; padding-block:calc(var(--nav-h) + 76px) clamp(56px,6vw,90px);
  background:var(--ink); color:var(--cream); overflow:hidden; }
.phead::before{
  content:""; position:absolute; inset:0; opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='150' viewBox='0 0 120 150'%3E%3Cpath d='M10 150 V64 C10 64 22 22 60 6 C98 22 110 64 110 64 V150' fill='none' stroke='%23A88355' stroke-width='2'/%3E%3C/svg%3E");
  background-size:120px 150px;
}
.phead__in{ position:relative; z-index:2; }
.phead h1{ font-size:clamp(2.6rem,6vw,5rem); color:var(--cream); }
.phead p{ font-family:var(--z3); font-size:1.08rem; line-height:1.8;
  color:rgba(239,231,218,.7); margin-top:20px; max-width:56ch; }

/* --------------------------- ABOUT / VMV ----------------------------- */
.vmv{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-block:1px solid var(--line); }
.vmv__i{ padding:clamp(30px,3.2vw,46px) clamp(22px,2.6vw,38px); border-inline-end:1px solid var(--line); }
.vmv__i:last-child{ border-inline-end:0; }
.vmv__i h3{ font-family:var(--z2); font-weight:700; font-size:1.06rem; letter-spacing:.04em;
  color:var(--brass); margin-bottom:16px; }
.vmv__i p{ font-size:1.04rem; line-height:1.85; color:rgba(23,17,12,.74); }
@media(max-width:820px){ .vmv{ grid-template-columns:1fr; }
  .vmv__i{ border-inline-end:0; border-bottom:1px solid var(--line); }
  .vmv__i:last-child{ border-bottom:0; } }

.about__split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,76px); align-items:center; }
.about__split img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.about__split p{ font-size:1.06rem; line-height:1.9; color:rgba(23,17,12,.72); margin-top:20px; }
@media(max-width:880px){ .about__split{ grid-template-columns:1fr; } }

/* ---------------------------- COMPARE TABLE -------------------------- */
.cmp{ width:100%; border-collapse:collapse; }
.cmp th{
  font-family:var(--z2); font-weight:700; font-size:.94rem; letter-spacing:.04em;
  text-align:start; padding:16px 18px; background:var(--ink); color:var(--brass-lt);
}
.cmp td{ padding:18px; border-bottom:1px solid var(--line); font-size:1.02rem; }
.cmp td:first-child{ font-family:var(--z2); font-weight:700; color:var(--bronze); letter-spacing:.03em; }
.cmp tr:hover td{ background:var(--sand-2); }
.cmp__scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:2px; }

/* --------------------------- FLOATING WHATSAPP ----------------------- */
.wa{
  position:fixed; inset-inline-end:20px; bottom:20px; z-index:900;
  width:56px; height:56px; border-radius:50%; background:#20B858; color:#fff;
  display:grid; place-items:center; box-shadow:0 10px 30px -8px rgba(32,184,88,.6);
  transition:.32s var(--ease);
}
.wa:hover{ transform:scale(1.08); }
.wa svg{ width:28px; height:28px; }

/* ------------------------------ UTIL --------------------------------- */
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.no-scroll{ overflow:hidden; }