/* ========================================================
   Nakhla Agency — Desert design system
   Used by every page except pricing.html
   The CRITICAL block below is also inlined in each page's
   <head> (with font paths relative to the page). Keep the
   two copies in sync when editing it.
   ======================================================== */

/* ---------- CRITICAL: fonts ---------- */
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:300 600; font-display:swap;
  src:url('../fonts/fraunces-latin-sub.woff2') format('woff2');
  unicode-range:U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-201D,U+2022,U+2026,U+2032-2033,U+20AC,U+2122;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Noto Naskh Arabic'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('../fonts/notonaskh-arabic-sub.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+200C-200F,U+2010-2011,U+FEFF;
}
@font-face{
  font-family:'IBM Plex Sans Arabic'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/plexarabic-400.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+200C-200F,U+2010-2011,U+FEFF;
}
@font-face{
  font-family:'IBM Plex Sans Arabic'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/plexarabic-600.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+200C-200F,U+2010-2011,U+FEFF;
}

/* ---------- CRITICAL: tokens ---------- */
:root{
  /* brand (from the earlier brand files) */
  --camel:#C19A6B;
  --emerald:#1B4D3E;
  --cream:#FDF8F0;
  /* derived */
  --sand:#F3E6D2;          /* light sand */
  --sand-deep:#E8D3B3;
  --camel-light:#D9BB93;
  --clay:#7A4E2D;          /* darker clay: icons, rules, large text */
  --clay-deep:#5E3B20;     /* clay for small text: >= 5.4:1 on every light tone */
  --clay-ink:#3F2617;      /* clay for small text over the camel-warmed hero sky */
  --ink:#1E1A15;           /* near-black ink: body text, overlays */
  --ink-soft:#4A3D30;
  --emerald-deep:#12352B;
  --emerald-ink:#0D241D;

  --glass:rgba(253,248,240,.68);
  --glass-strong:rgba(253,248,240,.84);
  --glass-edge:rgba(255,255,255,.62);
  --glass-dark:rgba(13,36,29,.62);
  --shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 2px 6px -2px rgba(74,52,30,.12), 0 24px 48px -26px rgba(74,52,30,.42);
  --shadow-lift:0 1px 0 rgba(255,255,255,.6) inset, 0 4px 10px -4px rgba(74,52,30,.14), 0 34px 60px -28px rgba(74,52,30,.5);

  --radius:22px;
  --radius-sm:12px;
  --container:1200px;
  --gutter:clamp(20px,5vw,48px);
  --header-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:.5s;

  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --text:var(--ink);
  --text-soft:var(--ink-soft);
  --heading:var(--emerald);
  --accent:var(--clay-deep);
  --focus:var(--emerald);
}
html[lang="ar"]{
  --font-display:'Noto Naskh Arabic','Fraunces',serif;
  --font-body:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif;
  font-size:108%;
}
.on-dark{
  --text:var(--cream);
  --text-soft:rgba(253,248,240,.86);
  --heading:var(--cream);
  --accent:var(--camel-light);
  --focus:var(--camel-light);
  color:var(--text);
}

/* ---------- CRITICAL: base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html[lang="ar"] body{ line-height:1.85; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-optical-sizing:auto;
  color:var(--heading);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  text-wrap:balance;
}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{
  font-weight:700; line-height:1.45; letter-spacing:0;
}
p{ margin:0 0 1em; text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:4px; }
.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }

/* language visibility (unchanged behaviour) */
[data-ar]{ display:none !important; }
html[lang="ar"] [data-ar]{ display:block !important; }
html[lang="ar"] [data-ar].inline{ display:inline !important; }
html[lang="ar"] [data-ar].flex{ display:flex !important; }
html[lang="ar"] [data-en]{ display:none !important; }
html[lang="en"] [data-en]{ display:block !important; }
html[lang="en"] [data-en].inline{ display:inline !important; }
html[lang="en"] [data-en].flex{ display:flex !important; }

.skip-link{
  position:fixed; inset-inline-start:16px; top:12px; z-index:1000;
  background:var(--cream); color:var(--ink); padding:10px 18px; border-radius:999px;
  transform:translateY(-200%); transition:transform .2s;
}
.skip-link:focus{ transform:none; }

/* ---------- CRITICAL: header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  transition:background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease);
}
.site-header{ --nav-fg:var(--ink); --nav-accent:var(--clay-ink); --nav-line:rgba(94,59,32,.45); --focus:var(--emerald); }
.site-header.is-scrolled{
  background:rgba(250,242,229,.78);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 1px 0 rgba(122,78,45,.12), 0 12px 30px -20px rgba(74,52,30,.35);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  height:var(--header-h);
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
}
.wordmark{ display:flex; align-items:center; flex-shrink:0; }
.logo-img{ height:34px; width:auto; }
.nav-links{ display:flex; align-items:center; gap:clamp(14px,1.8vw,26px); list-style:none; margin:0; padding:0; }
.nav-links a{
  position:relative; padding:6px 0; white-space:nowrap;
  font-size:.9rem; letter-spacing:.01em; color:var(--nav-fg);
  transition:color .3s var(--ease);
}
.nav-links a::after{
  content:''; position:absolute; inset-inline:0; bottom:0; height:1px;
  background:var(--nav-accent); transform:scaleX(0); transform-origin:var(--origin,left);
  transition:transform .35s var(--ease);
}
html[dir="rtl"] .nav-links a::after{ --origin:right; }
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-links a[aria-current="page"],.nav-links a:hover{ color:var(--nav-accent); }
.nav-right{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.lang-toggle{
  display:inline-flex; align-items:center; justify-content:center; min-width:52px; min-height:40px;
  background:transparent; color:var(--nav-fg); cursor:pointer;
  border:1px solid var(--nav-line); border-radius:999px;
  padding:6px 14px; font:inherit; font-size:.82rem; line-height:1.4;
  transition:border-color .3s, background-color .3s;
}
.lang-toggle:hover{ border-color:var(--nav-accent); }
.lang-toggle [lang="ar"]{ font-family:'IBM Plex Sans Arabic',sans-serif; font-size:.92rem; }
.lang-toggle [lang="en"]{ font-family:'Inter',sans-serif; }
.nav-cta{
  display:inline-flex; align-items:center; min-height:44px;
  background:var(--camel); color:var(--ink); font-weight:600; font-size:.88rem;
  padding:10px 22px; border-radius:999px; white-space:nowrap;
  transition:background-color .3s, transform .3s var(--ease);
}
.nav-cta:hover{ background:var(--camel-light); transform:translateY(-1px); }
.nav-links-cta{ display:none; }
.nav-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:10px; background:none; border:0; cursor:pointer;
}
.nav-burger span{ display:block; height:2px; background:var(--nav-fg); border-radius:2px; transition:transform .3s, opacity .3s; }
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.scroll-progress{ position:absolute; left:0; right:0; bottom:0; height:2px; pointer-events:none; }
.scroll-progress span{
  display:block; height:100%; background:linear-gradient(90deg,var(--camel),var(--camel-light));
  transform:scaleX(var(--progress,0)); transform-origin:left;
}
html[dir="rtl"] .scroll-progress span{ transform-origin:right; background:linear-gradient(270deg,var(--camel),var(--camel-light)); }

@media (max-width:960px){
  .nav-links{
    --nav-fg:var(--cream); --nav-accent:var(--camel-light); --focus:var(--camel-light);
    position:fixed; top:var(--header-h); left:12px; right:12px;
    flex-direction:column; align-items:stretch; gap:4px;
    padding:14px; border-radius:var(--radius);
    background:rgba(13,36,29,.94);
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
  }
  .nav-links.open{ opacity:1; visibility:visible; transform:none; transition:opacity .3s var(--ease), transform .3s var(--ease); }
  .nav-links a{ display:block; padding:12px 10px; font-size:1rem; }
  .nav-links a::after{ display:none; }
  .nav-burger{ display:flex; }
  .nav-cta{ display:none; }
  .nav-links-cta{ display:block; padding-top:8px; }
  .nav-links .nav-links-cta a.btn{ width:100%; }
}

/* ---------- CRITICAL: buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:14px 30px; border-radius:999px;
  font:inherit; font-weight:600; font-size:.95rem; letter-spacing:.01em; line-height:1.3;
  cursor:pointer; border:1.5px solid transparent; text-align:center;
  transition:transform .35s var(--ease), background-color .35s, border-color .35s, box-shadow .35s, color .35s;
}
.btn svg{ width:18px; height:18px; fill:currentColor; flex-shrink:0; }
.btn-primary{ background:var(--emerald); color:var(--cream); box-shadow:0 14px 28px -16px rgba(27,77,62,.7); }
.btn-primary:hover{ background:var(--emerald-deep); transform:translateY(-2px); }
.on-dark .btn-primary,.nav-links .btn-primary{ background:var(--camel); color:var(--ink); box-shadow:0 16px 32px -18px rgba(193,154,107,.9); }
.on-dark .btn-primary:hover,.nav-links .btn-primary:hover{ background:var(--camel-light); }
.btn-outline{ background:transparent; color:var(--text); border-color:currentColor; }
.btn-outline:hover{ background:rgba(27,77,62,.07); transform:translateY(-2px); }
.on-dark .btn-outline{ border-color:var(--camel-light); }
.on-dark .btn-outline:hover{ background:rgba(253,248,240,.1); }
.btn-lg{ min-height:54px; padding:16px 38px; font-size:1rem; }

/* ---------- CRITICAL: hero (home + interior pages) ----------
   Editorial layout: headline on the cream page, the photo below it at
   native scale or smaller (never upscaled), its sky and edges dissolving
   into the page through a mask. */
.hero,.page-hero{
  position:relative; text-align:center;
  padding:calc(var(--header-h) + clamp(36px,7vh,88px)) 0 0;
}
.hero-content{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.hero-content > *{ max-width:min(860px,100%); }
.hero-eyebrow{
  display:flex; align-items:center; gap:14px; margin-bottom:20px;
  color:var(--clay-ink); font-size:.78rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
}
.hero-eyebrow::before,.hero-eyebrow::after{ content:''; width:32px; height:1px; background:currentColor; opacity:.6; }
html[lang="ar"] .hero-eyebrow{ letter-spacing:0; font-size:.95rem; }
.hero h1,.hero-tagline-ar{
  color:var(--ink); font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.4rem,5vw,4.6rem); line-height:1.04; letter-spacing:-.025em;
  margin:0 0 .4em; text-wrap:balance;
}
.hero-tagline-ar{ font-weight:700; line-height:1.4; letter-spacing:0; font-size:clamp(2.2rem,4.6vw,3.9rem); }
.hero p.sub{ color:var(--ink-soft); font-size:clamp(1.05rem,1.4vw,1.2rem); max-width:600px; margin:0 0 2em; text-wrap:balance; }
html[lang="ar"] .hero p.sub{ max-width:680px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

.hero-media{
  position:relative; display:none; overflow:hidden;
  width:min(100%,var(--w)); aspect-ratio:var(--ar); margin:clamp(-56px,-4vw,-16px) auto 0;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 86%,transparent 100%),linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 86%,transparent 100%),linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-composite:intersect;
}
/* show the configured variant (falls back to the first one without JS) */
html:not([data-hero]) .hero-media:first-of-type,
html[data-hero="a"] .hero-media[data-variant="a"],
html[data-hero="b"] .hero-media[data-variant="b"],
html[data-hero="c"] .hero-media[data-variant="c"],
.page-hero .hero-media{ display:block; }
.hero-media picture{ display:block; width:100%; height:100%; will-change:transform; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:var(--pos); }
/* per-image frames: box width never exceeds the file's own pixel width */
.hero-media[data-variant="a"]{ --w:720px; --ar:720/700; --pos:50% 52%; }
.hero-media[data-variant="b"]{ --w:980px; --ar:980/1000; --pos:50% 70%; }
.page-hero .hero-media{ --w:720px; --ar:720/560; --pos:50% 36%; }
@media (max-width:640px){
  .hero-media{ width:calc(100% + 2 * var(--gutter)); margin-inline:calc(-1 * var(--gutter)); }
  .hero-media[data-variant="a"]{ --ar:3/4; --pos:42% 50%; }
  .hero-media[data-variant="b"]{ --ar:1027/1280; --pos:50% 50%; }
}

/* Home hero: one full-bleed photo layer from the very top of the page
   (behind the header) to --hero-ext below the hero.
   - The photo sits at the bottom of that layer at its natural shape; above
     it the layer is the photo's own sky colour, so it reads as one sky.
   - Its lower 40% fades to transparent over --hero-ground, the average colour
     of the photo's bottom edge (sampled from the file), so no edge remains.
   - .hero::after then eases --hero-ground into the cream page over 60vh.
   --img-ar   photo height / width as displayed
   --crest    where the dunes start, as a fraction of the photo height; the
              hero's bottom padding keeps the text above it */
.hero{
  --hero-ext:clamp(64px,9vw,170px);
  --hero-sky:linear-gradient(to right,#AEC6E2,#A3BDDC 50%,#97B4D6);
  --hero-ground:#BA865A;
  --img-ar:.5922; --crest:.41;
  --img-h:calc(100vw * var(--img-ar));
  --focus:var(--ink);
  padding-bottom:max(48px,calc(var(--img-h) * (1 - var(--crest)) - var(--hero-ext) + 24px));
}
html[data-hero="a"] .hero,html[data-hero="b"] .hero{ --hero-sky:var(--cream); --hero-ground:#D9B08A; --img-ar:1; --crest:.45; }
@media (max-width:640px){
  /* phones: a square crop around the dune crest instead of a thin strip */
  .hero{ --img-ar:1; --hero-ground:#CD9767; }
}
.hero .hero-media{
  position:absolute; z-index:-1; top:0; left:0; right:0; bottom:calc(-1 * var(--hero-ext));
  width:auto; aspect-ratio:auto; margin:0; overflow:hidden; pointer-events:none;
  -webkit-mask-image:none; mask-image:none;
  background:
    linear-gradient(to top,var(--hero-ground) 0,var(--hero-ground) calc(var(--img-h) * .4),transparent calc(var(--img-h) * .55)),
    var(--hero-sky);
}
.hero .hero-media picture{ position:absolute; left:0; right:0; bottom:0; height:auto; }
.hero .hero-media img{
  width:100%; height:auto; aspect-ratio:1 / var(--img-ar); object-fit:cover; object-position:58% 100%;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 58%,rgba(0,0,0,.86) 66%,rgba(0,0,0,.62) 74%,rgba(0,0,0,.36) 82%,rgba(0,0,0,.14) 91%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 58%,rgba(0,0,0,.86) 66%,rgba(0,0,0,.62) 74%,rgba(0,0,0,.36) 82%,rgba(0,0,0,.14) 91%,transparent 100%);
}
/* warm the pale sky toward the palette: camel, multiplied, fading out downwards */
.hero .hero-media::after{
  content:''; position:absolute; inset:0; mix-blend-mode:multiply;
  background:linear-gradient(to bottom,rgba(193,154,107,.25) 0,rgba(193,154,107,.12) 30%,rgba(193,154,107,0) 60%);
}
/* faint grain against banding in the smooth sky and sand */
.hero .hero-media::before{ content:''; position:absolute; inset:0; z-index:1; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.03'/></svg>"); }
/* below the photo: --hero-ground eases into the cream page over 60vh */
.hero::after{
  content:''; position:absolute; left:0; right:0; z-index:-2; pointer-events:none;
  top:calc(100% + var(--hero-ext)); height:60vh;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.03'/></svg>"),linear-gradient(to bottom,color-mix(in oklab,var(--hero-ground) 100%,transparent) 0.0%, color-mix(in oklab,var(--hero-ground) 98%,transparent) 8.3%, color-mix(in oklab,var(--hero-ground) 93%,transparent) 16.7%, color-mix(in oklab,var(--hero-ground) 84%,transparent) 25.0%, color-mix(in oklab,var(--hero-ground) 74%,transparent) 33.3%, color-mix(in oklab,var(--hero-ground) 62%,transparent) 41.7%, color-mix(in oklab,var(--hero-ground) 50%,transparent) 50.0%, color-mix(in oklab,var(--hero-ground) 38%,transparent) 58.3%, color-mix(in oklab,var(--hero-ground) 26%,transparent) 66.7%, color-mix(in oklab,var(--hero-ground) 16%,transparent) 75.0%, color-mix(in oklab,var(--hero-ground) 7%,transparent) 83.3%, color-mix(in oklab,var(--hero-ground) 2%,transparent) 91.7%, color-mix(in oklab,var(--hero-ground) 0%,transparent) 100.0%);
}
/* the next section is pulled up so it overlaps the photo's extension */
.hero + .band{ margin-top:calc(var(--hero-ext) * -.5); padding-top:calc(var(--hero-ext) * 1.5 + clamp(28px,4vw,56px)); }
/* the clients strip sits below the photo instead of over its fade */
.hero + .clients-band{ margin-top:0; padding-top:calc(clamp(64px,9vw,170px) + clamp(32px,4vw,56px)); }
.hero + .clients-band .clients-heading{ color:var(--emerald-ink); }

.page-hero h1{ color:var(--ink); font-size:clamp(2.2rem,4.6vw,4rem); font-weight:400; line-height:1.06; }
html[lang="ar"] .page-hero h1{ font-size:clamp(1.9rem,3.8vw,3.2rem); line-height:1.45; font-weight:700; }
.page-hero p{ color:var(--ink-soft); max-width:600px; font-size:1.08rem; margin:0 auto 1em; }
.page-hero .eyebrow{ justify-content:center; }
.page-hero{ padding-bottom:clamp(56px,7vw,96px); }

/* ---------- reveal (only hidden when JS is running) ---------- */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0s); }
.js .reveal.is-visible{ opacity:1; transform:none; }
/* gentle stagger inside grids */
.reveal:nth-child(2){ --d:.08s; } .reveal:nth-child(3){ --d:.16s; } .reveal:nth-child(4){ --d:.24s; }

/* ---------- reduced motion: no parallax, no reveals ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .hero-media picture,.dune{ transform:none !important; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}
/* ---------- end CRITICAL ---------- */


/* ========================================================
   Continuous surface
   Each band paints a gradient from the tone of the band
   above to its own tone, so colour flows without edges.
   Backgrounds and glows sit on negative layers inside
   <main>'s stacking context, under all content.
   ======================================================== */
main{ position:relative; isolation:isolate; overflow-x:clip; }
.band{ position:relative; padding:clamp(72px,9vw,120px) 0; }
.band::before{
  content:''; position:absolute; inset:0; z-index:-3;
  background:linear-gradient(to bottom,var(--from,var(--cream)),var(--to,var(--cream)));
}
.band.tight{ padding:clamp(64px,8vw,100px) 0; }
/* the first section continues straight on from the page header */
.page-hero:has(+ .band){ padding-bottom:clamp(20px,2.5vw,36px); }
.page-hero + .band{ padding-top:clamp(8px,1.5vw,24px); }
[data-from="cream"]{ --from:var(--cream); }   [data-to="cream"]{ --to:var(--cream); }
[data-from="sand"]{ --from:var(--sand); }     [data-to="sand"]{ --to:var(--sand); }
[data-from="sand-deep"]{ --from:var(--sand-deep); } [data-to="sand-deep"]{ --to:var(--sand-deep); }
[data-from="camel-light"]{ --from:var(--camel-light); } [data-to="camel-light"]{ --to:var(--camel-light); }
[data-from="emerald"]{ --from:var(--emerald); } [data-to="emerald"]{ --to:var(--emerald); }
[data-to="emerald-deep"]{ --to:var(--emerald-deep); }

/* soft light pools that straddle band edges — the "overlap" between sections */
.glow{
  position:absolute; z-index:-2; pointer-events:none;
  width:min(70vw,780px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(closest-side,var(--glow-c,rgba(193,154,107,.18)),transparent);
  filter:blur(8px);
}
.glow--top-start{ top:-22%; inset-inline-start:-18%; }
.glow--top-end{ top:-26%; inset-inline-end:-20%; }
.glow--warm{ --glow-c:rgba(193,154,107,.32); }

/* ---------- watermark (inline SVG palm frond / star) ---------- */
.watermark{
  position:absolute; z-index:-1; pointer-events:none;
  width:clamp(260px,38vw,520px); height:auto;
  color:var(--clay); opacity:.09;
}
.on-dark .watermark{ color:var(--camel-light); opacity:.1; }
.watermark--end{ inset-inline-end:-4%; top:8%; }
.watermark--start{ inset-inline-start:-6%; bottom:4%; }
html[dir="rtl"] .watermark{ transform:scaleX(-1); }

/* ---------- horizon: content-free dune band (light → emerald) ---------- */
.horizon{
  position:relative; overflow:hidden; z-index:-1;
  height:clamp(200px,26vw,380px);
  background:linear-gradient(to bottom,var(--camel-light),var(--camel));
}
/* every dune is anchored to the bottom; parallax travel stays smaller than the overlap */
.dune{ position:absolute; left:-5%; bottom:-1px; width:110%; will-change:transform; }
.dune--far{ height:78%; color:#B08858; }
.dune--mid{ height:56%; color:#62694A; }
.dune--near{ height:36%; color:var(--emerald); }

/* ========================================================
   Type helpers
   ======================================================== */
.eyebrow{
  display:inline-flex; align-items:center; gap:12px; margin-bottom:18px;
  color:var(--accent); font-size:.78rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
}
.eyebrow::before{ content:''; width:28px; height:1px; background:currentColor; opacity:.7; }
html[lang="ar"] .eyebrow{ letter-spacing:0; font-size:.92rem; }
.section-head{ max-width:760px; margin:0 auto clamp(44px,6vw,72px); text-align:center; }
.section-head .eyebrow{ justify-content:center; }
.section-head h2,.h2{ font-size:clamp(2rem,4.2vw,3.4rem); }
html[lang="ar"] .section-head h2{ font-size:clamp(1.8rem,3.6vw,2.8rem); }
.section-head p{ font-size:1.1rem; color:var(--text-soft); }

/* ========================================================
   Cards — one shared frosted style across the site
   ======================================================== */
.card{
  position:relative;
  background:var(--glass);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid var(--glass-edge);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(26px,3vw,40px);
  color:var(--ink);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background-color .45s;
}
.card:hover,.card:focus-within{ transform:translateY(-4px); box-shadow:var(--shadow-lift); background:var(--glass-strong); }
.card h3{ color:var(--emerald); }
.card p{ color:var(--ink-soft); }
.icon-badge{
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--emerald); color:var(--camel-light);
  box-shadow:0 0 0 6px rgba(27,77,62,.08);
}
.icon-badge svg{ width:24px; height:24px; stroke:currentColor; }
.card-link{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  color:var(--clay-deep); font-weight:600; font-size:.93rem;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .35s var(--ease), color .3s;
}
html[dir="rtl"] .card-link{ background-position:100% 100%; }
.card-link:hover{ background-size:100% 1px; color:var(--emerald); }
.card-link svg{ width:14px; height:14px; stroke:currentColor; flex-shrink:0; }
html[dir="rtl"] .card-link svg{ transform:scaleX(-1); }
.marker-list{ list-style:none; padding:0; margin:0; }
.marker-list li{ position:relative; padding:10px 0; padding-inline-start:24px; border-top:1px solid rgba(122,78,45,.16); color:var(--ink-soft); line-height:1.55; }
html[lang="ar"] .marker-list li{ line-height:1.8; }
.marker-list li::before{
  content:''; position:absolute; inset-inline-start:2px; top:1.15em;
  width:7px; height:7px; border:1.5px solid var(--clay); transform:rotate(45deg);
}

/* ========================================================
   Home sections
   ======================================================== */
/* clients */
.clients-band{ padding:clamp(56px,7vw,90px) 0 clamp(40px,5vw,60px); text-align:center; }
.clients-heading{ font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:36px; }
.clients-carousel{
  direction:ltr; overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
}
.clients-track{ display:flex; width:max-content; animation:clientsScroll 32s linear infinite; }
@media (hover:hover){ .clients-carousel:hover .clients-track{ animation-play-state:paused; } }
.clients-carousel.is-scripted .clients-track{ animation:none; }
.clients-row{ display:flex; flex:0 0 auto; align-items:center; gap:clamp(36px,6vw,80px); padding-right:clamp(36px,6vw,80px); }
.clients-row img{
  height:42px; width:auto; max-width:none; flex-shrink:0; object-fit:contain;
  filter:brightness(0); opacity:.62; transition:opacity .3s;
}
.clients-row img:hover{ opacity:.9; }
.clients-row img.client-logo--mark{ height:58px; }
@keyframes clientsScroll{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
@media (prefers-reduced-motion:reduce){ .clients-track{ animation:none; } }

/* services overview */
.service-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.4vw,28px); }
.service-card{ display:flex; flex-direction:column; }
.service-card-head{ display:flex; align-items:center; gap:18px; margin-bottom:16px; }
.service-card h3{ margin:0; font-size:clamp(1.4rem,2vw,1.7rem); }
.service-card .summary{ font-size:1.04rem; margin-bottom:20px; }
.service-card .what-label{ color:var(--clay-deep); font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin-bottom:6px; }
html[lang="ar"] .service-card .what-label{ letter-spacing:0; font-size:.88rem; }
.service-card .service-points{ flex-grow:1; }
.service-card .card-link{ align-self:flex-start; }

/* about / who we are */
.intro-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(40px,6vw,88px); align-items:center; }
.intro-visual{
  position:relative; aspect-ratio:4/5; border-radius:calc(var(--radius) * 1.6); overflow:hidden;
  box-shadow:var(--shadow-lift);
}
.intro-visual img{ width:100%; height:100%; object-fit:cover; }
.intro-visual::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,rgba(30,26,21,.28),transparent 45%);
}
.intro-copy h2{ font-size:clamp(2rem,3.8vw,3.1rem); }
.intro-copy p{ color:var(--ink-soft); font-size:1.05rem; }

/* why choose us */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px); }
.why-item .num{
  font-family:'Fraunces',serif; font-size:2.6rem; line-height:1; font-weight:300;
  color:var(--clay); margin-bottom:18px;
}
.why-item h3{ font-size:1.2rem; }
.why-item p{ font-size:.97rem; margin:0; }
.lang-chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:18px 0 0; }
.lang-chip{
  display:inline-flex; align-items:center; padding:3px 13px; border-radius:999px;
  border:1px solid rgba(122,78,45,.35); background:rgba(253,248,240,.6);
  color:var(--ink); font-size:.92rem; line-height:1.7;
}
.lang-chip[lang="ar"]{ font-family:'IBM Plex Sans Arabic',sans-serif; }
.lang-chip[lang="en"]{ font-family:'Inter',sans-serif; }
.lang-chip[lang="ur"]{ font-family:'Noto Nastaliq Urdu','IBM Plex Sans Arabic',sans-serif; font-weight:600; }
.lang-chip[lang="zh-Hans"]{ font-family:'Noto Sans SC',sans-serif; font-weight:500; }
.lang-chip[lang="hi"]{ font-family:'Noto Sans Devanagari',sans-serif; font-weight:500; }
@font-face{ font-family:'Noto Nastaliq Urdu'; font-weight:600; font-display:swap; src:url('../fonts/notonastaliq-urdu-subset.woff2') format('woff2'); unicode-range:U+0600-06FF; }
@font-face{ font-family:'Noto Sans SC'; font-weight:500; font-display:swap; src:url('../fonts/notosans-sc-subset.woff2') format('woff2'); unicode-range:U+4E00-9FFF; }
@font-face{ font-family:'Noto Sans Devanagari'; font-weight:500; font-display:swap; src:url('../fonts/notosans-devanagari-subset.woff2') format('woff2'); unicode-range:U+0900-097F,U+200C-200D; }

/* process */
.process-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,24px); counter-reset:step; }
.process-step .step-num{
  width:44px; height:44px; border-radius:50%; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  background:var(--emerald); color:var(--cream); font-family:'Fraunces',serif; font-size:1.1rem;
}
.process-step h3{ font-size:1.2rem; }
.process-step p{ font-size:.97rem; margin:0; }

/* testimonials */
.friends-heading{
  text-align:center; font-family:var(--font-display); color:var(--emerald);
  font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.12; margin:0 auto clamp(40px,5vw,60px); max-width:20ch;
  text-wrap:balance;
}
html[lang="en"] .friends-heading{ font-style:italic; font-weight:400; letter-spacing:-.015em; }
html[lang="ar"] .friends-heading{ font-weight:700; line-height:1.45; }
.testimonial-cards-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px); align-items:stretch; }
.testimonial-card{ display:flex; flex-direction:column; }
.testimonial-stars{ color:var(--clay); letter-spacing:3px; margin-bottom:14px; }
.testimonial-quote{ color:var(--ink); font-size:1rem; line-height:1.7; margin-bottom:10px; }
html[lang="en"] .testimonial-card .testimonial-quote--clamp[data-en],
html[lang="ar"] .testimonial-card .testimonial-quote--clamp[data-ar]{
  display:-webkit-box !important; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
html[lang="en"] .testimonial-card .testimonial-quote--clamp.is-expanded[data-en],
html[lang="ar"] .testimonial-card .testimonial-quote--clamp.is-expanded[data-ar]{
  display:block !important; -webkit-line-clamp:unset; overflow:visible;
}
.read-more-btn{
  align-self:flex-start; margin:0 0 auto; padding:6px 0; min-height:36px;
  background:none; border:0; cursor:pointer;
  color:var(--clay-deep); font:inherit; font-weight:600; font-size:.9rem;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
}
.read-more-btn:hover{ color:var(--emerald); }
.testimonial-name{ margin-top:22px; padding-top:16px; border-top:1px solid rgba(122,78,45,.16); font-family:var(--font-display); color:var(--emerald); font-size:1.1rem; font-weight:600; }
.testimonial-company{ font-size:.88rem; color:var(--ink-soft); }
.testimonials-more{ text-align:center; margin-top:clamp(36px,4vw,48px); }

/* faq */
.faq-panel{ max-width:860px; margin:0 auto; padding:clamp(8px,1.4vw,16px) clamp(20px,3vw,40px); }
.faq-panel:hover{ transform:none; }
.faq-list{ interpolate-size:allow-keywords; }
.faq-item + .faq-item{ border-top:1px solid rgba(122,78,45,.16); }
.faq-item summary{
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 0; cursor:pointer; border-radius:6px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary h3{ margin:0; font-size:clamp(1.08rem,1.5vw,1.25rem); line-height:1.4; transition:color .3s; }
html[lang="ar"] .faq-item summary h3{ line-height:1.7; }
.faq-item summary:hover h3{ color:var(--clay-deep); }
.faq-icon{
  flex-shrink:0; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--clay); color:var(--clay-deep); font-size:1.15rem; line-height:1;
  transition:transform .4s var(--ease), background-color .3s;
}
.faq-item[open] .faq-icon{ transform:rotate(45deg); background:rgba(193,154,107,.18); }
.faq-item::details-content{ block-size:0; overflow:hidden; transition:block-size .45s var(--ease), content-visibility .45s allow-discrete; }
.faq-item[open]::details-content{ block-size:auto; }
.faq-answer{ padding:0 0 22px; color:var(--ink-soft); }
.faq-answer p{ margin:0; }

/* final CTA */
.cta-band{ text-align:center; overflow:hidden; }
.cta-band h2{ font-size:clamp(2.2rem,5vw,4rem); font-weight:400; }
html[lang="ar"] .cta-band h2{ font-weight:700; }
.cta-band > .container > p{ font-size:1.12rem; color:var(--text-soft); }
.cta-actions{ display:flex; gap:16px; justify-content:center; align-items:flex-start; flex-wrap:wrap; margin-top:34px; }
.cta-primary{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.cta-note{ margin:0; font-size:.92rem; color:var(--text-soft); max-width:320px; }

/* ========================================================
   Services page
   ======================================================== */
.service-detail{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(40px,6vw,96px); align-items:center; }
.service-detail h2{ font-size:clamp(2.2rem,4.6vw,3.6rem); }
.service-detail h3{ font-size:1.25rem; margin-top:1.6em; }
.service-detail > div > p{ color:var(--ink-soft); font-size:1.05rem; }
.service-list{ margin:14px 0 8px; }
.intro-visual picture{ display:block; width:100%; height:100%; }
.service-visual{
  position:relative; overflow:hidden; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  border-radius:calc(var(--radius) * 1.6);
  background:radial-gradient(120% 90% at 30% 20%,var(--emerald) 0%,var(--emerald-deep) 70%,var(--emerald-ink) 100%);
  box-shadow:var(--shadow-lift);
}
.service-visual::before{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><g fill='none' stroke='%23C19A6B' stroke-width='1' opacity='.5'><path d='M50 4 L96 50 L50 96 L4 50 Z'/><path d='M50 22 L78 50 L50 78 L22 50 Z'/></g></svg>");
  background-size:100px 100px;
}
.service-visual .service-icon{ position:relative; width:96px; height:96px; stroke:var(--camel-light); }
/* the whole mockup always fits inside the panel, whatever the panel's shape */
.service-visual .service-mockup{ position:relative; width:auto; height:auto; max-width:80%; max-height:86%; object-fit:contain; filter:drop-shadow(0 24px 40px rgba(0,0,0,.45)); }
.price-block{ display:flex; align-items:baseline; flex-wrap:wrap; gap:12px; margin:26px 0 6px; padding:22px 26px; }
.price-block:hover{ transform:none; }
.price-block .amount,.price-block .amount-ar{ font-family:var(--font-display); font-size:2rem; color:var(--emerald); font-weight:500; line-height:1.2; }
.price-block .amount-ar{ font-weight:700; }
.price-block .label{ font-size:.95rem; color:var(--ink-soft); }
.service-detail .btn{ margin-top:22px; }
section[id]{ scroll-margin-top:calc(var(--header-h) + 12px); }

/* ========================================================
   About page
   ======================================================== */
.mission{ max-width:860px; margin:0 auto; text-align:center; }
.mission .eyebrow{ justify-content:center; }
.mission h2{ font-size:clamp(2rem,4.4vw,3.5rem); font-weight:400; }
html[lang="en"] .mission h2{ font-style:italic; }
html[lang="ar"] .mission h2{ font-weight:700; font-size:clamp(1.8rem,3.6vw,2.8rem); }
.mission p{ color:var(--ink-soft); font-size:1.12rem; max-width:680px; margin-inline:auto; }

/* ========================================================
   Portfolio page
   ======================================================== */
.portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px); }
.card.case-study-card{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.case-study-browser{
  direction:ltr; display:flex; align-items:center; gap:12px; padding:11px 16px;
  background:rgba(243,230,210,.75); border-bottom:1px solid rgba(122,78,45,.12);
}
.case-study-browser .dots{ display:flex; gap:6px; flex-shrink:0; }
.case-study-browser .dots span{ width:9px; height:9px; border-radius:50%; background:var(--clay); opacity:.55; }
.case-study-browser .dots span:nth-child(2){ opacity:.35; }
.case-study-browser .dots span:nth-child(3){ opacity:.2; }
.case-study-browser .url-pill{
  flex:1; min-width:0; padding:3px 12px; border-radius:999px; background:rgba(253,248,240,.9);
  font-family:'Inter',sans-serif; font-size:.76rem; color:var(--ink-soft); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.case-study-shot{ aspect-ratio:16/10; overflow:hidden; background:var(--sand); }
.case-study-shot img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .8s var(--ease); }
.case-study-card:hover .case-study-shot img{ transform:scale(1.03); }
.case-study-body{ display:flex; flex-direction:column; flex:1; padding:clamp(22px,2.4vw,30px); }
.case-study-tag{ color:var(--clay-deep); font-size:.72rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin-bottom:10px; }
html[lang="ar"] .case-study-tag{ letter-spacing:0; font-size:.88rem; }
.case-study-body h3{ font-size:1.35rem; margin-bottom:.4em; }
.case-study-body p{ font-size:.97rem; flex-grow:1; margin-bottom:0; }
.case-study-body .card-link{ align-self:flex-start; }

/* ========================================================
   Testimonials page
   ======================================================== */
.friends-grid{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(16px,2vw,24px); align-items:start;
}
.testimonial-video{
  grid-row:span 2; position:sticky; top:calc(var(--header-h) + 24px);
  aspect-ratio:9/16; overflow:hidden; border-radius:calc(var(--radius) * 1.2);
  background:var(--emerald-ink); box-shadow:var(--shadow-lift);
}
.testimonial-video video{ display:block; width:100%; height:100%; object-fit:cover; }
.testimonial-video::after{
  content:''; position:absolute; inset:0; pointer-events:none; transition:opacity .4s;
  background:linear-gradient(to top,rgba(13,36,29,.45),transparent 45%);
}
.testimonial-play{
  position:absolute; inset:0; z-index:1; margin:auto; width:76px; height:76px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(253,248,240,.92); color:var(--emerald); border:1.5px solid var(--camel-light);
  box-shadow:0 18px 40px -16px rgba(13,36,29,.8);
  transition:transform .35s var(--ease), opacity .3s, background-color .3s;
}
.testimonial-play svg{ width:26px; height:26px; margin-left:4px; }
.testimonial-play:hover{ transform:scale(1.07); background:var(--cream); }
.testimonial-video.is-playing .testimonial-play,
.testimonial-video.is-playing::after{ opacity:0; pointer-events:none; }

/* ========================================================
   Contact page
   ======================================================== */
.contact-grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(24px,4vw,56px); align-items:start; }
.contact-side{ display:flex; flex-direction:column; gap:clamp(14px,1.6vw,20px); }
.card.whatsapp-card{
  background:radial-gradient(120% 90% at 20% 0%,var(--emerald) 0%,var(--emerald-deep) 70%,var(--emerald-ink) 100%);
  border-color:rgba(217,187,147,.28); color:var(--cream); overflow:hidden;
}
.card.whatsapp-card:hover{ background:radial-gradient(120% 90% at 20% 0%,var(--emerald) 0%,var(--emerald-deep) 70%,var(--emerald-ink) 100%); }
.whatsapp-card > svg{ width:42px; height:42px; fill:var(--camel-light); margin-bottom:18px; }
.card.whatsapp-card h3{ color:var(--cream); font-size:1.5rem; }
.card.whatsapp-card p{ color:var(--text-soft); }
.whatsapp-card .btn{ margin-top:6px; }
.card.contact-info-item{ display:flex; align-items:center; gap:18px; padding:20px 24px; }
.contact-info-item h3{ font-size:1rem; margin:0 0 2px; }
.contact-info-item p{ margin:0; }
.contact-info-item a{ color:var(--clay-deep); font-weight:600; overflow-wrap:anywhere; }
.contact-info-item a:hover{ color:var(--emerald); }
.form-panel h2{ font-size:clamp(1.8rem,3.2vw,2.6rem); }
.form-panel:hover{ transform:none; }
.form-group{ margin-bottom:18px; }
.form-group label{ margin-bottom:8px; font-size:.9rem; font-weight:600; color:var(--ink); }
.form-group input,.form-group select,.form-group textarea{
  display:block; width:100%; min-height:50px; padding:12px 16px;
  font:inherit; color:var(--ink); background:rgba(253,248,240,.8);
  border:1px solid rgba(122,78,45,.3); border-radius:var(--radius-sm);
  transition:border-color .3s, box-shadow .3s, background-color .3s;
}
.form-group textarea{ min-height:150px; resize:vertical; }
.form-group select{
  -webkit-appearance:none; appearance:none; cursor:pointer; padding-inline-end:44px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235E3B20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 16px center;
}
html[dir="rtl"] .form-group select{ background-position:left 16px center; }
.form-group input:hover,.form-group select:hover,.form-group textarea:hover{ border-color:rgba(122,78,45,.5); }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none; border-color:var(--emerald); background:var(--cream); box-shadow:0 0 0 3px rgba(27,77,62,.16);
}
.form-privacy{ font-size:.88rem; color:var(--ink-soft); }
.form-privacy a,.legal-content a{ color:var(--clay-deep); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.form-privacy a:hover,.legal-content a:hover{ color:var(--emerald); }
.form-confirmation{ margin-top:18px; padding:16px 18px; border-radius:var(--radius-sm); background:rgba(27,77,62,.09); border-inline-start:3px solid var(--emerald); color:var(--ink); }
.form-confirmation p{ margin:0; }

/* ========================================================
   Legal pages
   ======================================================== */
.card.legal-panel{ max-width:820px; margin:0 auto; padding:clamp(28px,5vw,64px); }
.legal-panel:hover{ transform:none; box-shadow:var(--shadow); background:var(--glass); }
.legal-updated{ color:var(--clay-deep); font-size:.9rem; font-weight:600; }
.legal-content h2{ font-size:clamp(1.25rem,2vw,1.5rem); margin-top:1.8em; }
.legal-content p,.legal-content li{ color:var(--ink-soft); }
.legal-content ul{ padding-inline-start:1.3em; margin:0 0 1em; }
.legal-content li{ margin-bottom:.45em; }
.legal-content li::marker{ color:var(--clay); }

/* ========================================================
   404
   ======================================================== */
.error-hero{ min-height:calc(100svh - clamp(200px,26vw,380px)); display:flex; align-items:center; justify-content:center; background:linear-gradient(to bottom,var(--cream) 35%,var(--camel-light)); }
.error-number{
  font-family:'Fraunces',Georgia,serif; font-weight:300; line-height:.9; letter-spacing:-.04em;
  font-size:clamp(6rem,20vw,12rem); color:var(--clay); opacity:.85; margin-bottom:.15em;
}

/* pages that end on the dune horizon run the footer on from its emerald */
.site-footer--rise{ background:linear-gradient(to bottom,var(--emerald),var(--emerald-deep) 40%,var(--emerald-ink)); }

/* ========================================================
   Footer + floating WhatsApp
   ======================================================== */
.site-footer{
  position:relative; padding:clamp(64px,8vw,96px) 0 32px;
  background:linear-gradient(to bottom,var(--emerald-deep),var(--emerald-ink));
  color:rgba(243,230,210,.82);
}
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-grid h4{ color:var(--camel-light); font-family:var(--font-body); font-size:.8rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; margin-bottom:18px; }
html[lang="ar"] .footer-grid h4{ letter-spacing:0; font-size:.95rem; }
.footer-links{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-links a,.footer-legal a{ transition:color .3s; }
.footer-links a:hover,.footer-legal a:hover{ color:var(--camel-light); }
.footer-wordmark{ margin-bottom:16px; }
.footer-logo-img{ height:40px; }
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px;
  padding-top:26px; font-size:.86rem;
  background:linear-gradient(to right,transparent,rgba(217,187,147,.25),transparent) top/100% 1px no-repeat;
}
.footer-legal{ gap:20px; flex-wrap:wrap; }
.footer-cr{ opacity:.75; }
.site-footer :focus-visible{ outline-color:var(--camel-light); }

.whatsapp-float{
  position:fixed; bottom:24px; inset-inline-end:24px; z-index:600;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--emerald); border:1.5px solid var(--camel-light);
  box-shadow:0 18px 34px -14px rgba(13,36,29,.7);
  transition:transform .35s var(--ease);
}
html[dir="rtl"] .whatsapp-float{ right:auto; }
.whatsapp-float:hover{ transform:translateY(-3px); }
.whatsapp-float svg{ width:28px; height:28px; fill:var(--cream); }
.whatsapp-float:focus-visible{ outline-color:var(--emerald); }

/* ========================================================
   Responsive
   ======================================================== */
@media (max-width:1024px){
  .why-grid,.process-steps,.portfolio-grid{ grid-template-columns:repeat(2,1fr); }
  .friends-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  .intro-grid,.service-detail,.contact-grid{ grid-template-columns:1fr; }
  .service-detail .service-visual{ order:-1; aspect-ratio:4/3; }
  .intro-visual{ aspect-ratio:5/4; }
  .service-cards,.testimonial-cards-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:700px){
  .friends-grid{ grid-template-columns:1fr; }
  .testimonial-video{ grid-row:auto; position:relative; top:auto; width:100%; max-width:380px; margin:0 auto; }
}
@media (max-width:600px){
  .why-grid,.process-steps,.portfolio-grid{ grid-template-columns:1fr; }
  .card.contact-info-item{ padding:18px 20px; }
  .clients-row img{ height:36px; }
  .clients-row img.client-logo--mark{ height:50px; }
  .clients-track{ animation-duration:22s; }
  .hero-actions .btn,.cta-actions .btn,.cta-primary{ width:100%; }
  .hero h1{ font-size:clamp(2.4rem,11vw,3.2rem); }
}