/* ==========================================================================
   Ghsoon Najd — landing page
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face{font-family:Metropolis;src:url("assets/fonts/En Font/Metropolis-Thin.otf") format("opentype");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:Metropolis;src:url("assets/fonts/En Font/Metropolis-ExtraLight.otf") format("opentype");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:Metropolis;src:url("assets/fonts/En Font/Metropolis-Light.otf") format("opentype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Metropolis;src:url("assets/fonts/En Font/Metropolis-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Metropolis;src:url("assets/fonts/En Font/Metropolis-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Metropolis;src:url("assets/fonts/En Font/Metropolis-SemiBold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Metropolis;src:url("assets/fonts/En Font/Metropolis-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Metropolis;src:url("assets/fonts/En Font/Metropolis-ExtraBold.otf") format("opentype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Metropolis;src:url("assets/fonts/En Font/Metropolis-Black.otf") format("opentype");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:Metropolis;src:url("assets/fonts/En Font/Metropolis-LightItalic.otf") format("opentype");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:Metropolis;src:url("assets/fonts/En Font/Metropolis-RegularItalic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Metropolis;src:url("assets/fonts/En Font/Metropolis-MediumItalic.otf") format("opentype");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:Metropolis;src:url("assets/fonts/En Font/Metropolis-SemiBoldItalic.otf") format("opentype");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:Metropolis;src:url("assets/fonts/En Font/Metropolis-BoldItalic.otf") format("opentype");font-weight:700;font-style:italic;font-display:swap}

@font-face{font-family:Ablaj;src:url("assets/fonts/Ar Font/Ablaj-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Ablaj;src:url("assets/fonts/Ar Font/Ablaj-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Ablaj;src:url("assets/fonts/Ar Font/Ablaj-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap}
/* Ablaj ships Regular/Medium/Bold only. The design also asks for 300, 600,
   800 and 900, so those are mapped onto the nearest real cut — otherwise the
   browser synthesises a faux bold, which smears the Arabic joins. */
@font-face{font-family:Ablaj;src:url("assets/fonts/Ar Font/Ablaj-Regular.otf") format("opentype");font-weight:100 300;font-style:normal;font-display:swap}
@font-face{font-family:Ablaj;src:url("assets/fonts/Ar Font/Ablaj-Bold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Ablaj;src:url("assets/fonts/Ar Font/Ablaj-Bold.otf") format("opentype");font-weight:800 900;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* palette */
  --green-900:#001C13;
  --green-800:#00291C;
  --green-700:#004D34;
  --green-ink:#003022;
  --sage:#B5BF90;
  --olive:#6B7355;
  --ink:#1F1F1F;
  --white:#FFFFFF;
  --paper:#F8F8F8;
  --night:#000B08;
  --tint:rgba(181,191,144,.14);
  --placeholder:rgba(176,176,176,.9);

  /* ---- Type scale ---------------------------------------------------
     One ladder, nine steps, nothing in between. Every rule below pulls a
     size from this list, and each breakpoint re-declares the same names,
     so a size never has to be chased through the component rules again.
     Replaces a 15-value set that ran 21 / 20 / 19 / 18 one pixel apart. */
  --fs-display:48px;   /* h1, big section heads, story + contact titles  */
  --fs-stat:40px;      /* stat counters                                  */
  --fs-h2:30px;        /* section headings                               */
  --fs-h3:24px;        /* card titles — vision/mission, values, pillars  */
  --fs-lg:22px;        /* large UI text — service, FAQ question, stat label */
  --fs-lede:20px;      /* section intro paragraphs                       */
  --fs-body:18px;      /* body + card copy, form fields, footer          */
  --fs-sm:16px;        /* labels, pills, fine print                      */
  --fs-xs:14px;        /* nav, buttons, language switch                  */

  /* ---- Leading ------------------------------------------------------
     Unitless, so it tracks the font size through every breakpoint. The
     px values it replaces did not: at 1024px --fs-display dropped 48→40
     while its line-height stayed pinned at 56px.                       */
  --lh-tight:1.2;      /* display + headings  */
  --lh-snug:1.35;      /* card titles, UI     */
  --lh-body:1.6;       /* paragraphs          */
  --lh-loose:1.9;      /* footer link lists   */

  /* metrics */
  --frame:1440px;
  --wrap:1200px;
  --radius-card:16px;
  --radius-stat:20px;
  --radius-btn:8px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{letter-spacing:-.04em}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Metropolis,Ablaj,system-ui,sans-serif;
  font-size:var(--fs-body);
  color:var(--white);
  background:var(--green-800);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ---------- Arabic typography (RTL pages) ---------- */
[dir="rtl"] body{font-family:Ablaj,Metropolis,system-ui,sans-serif}

/* The -.04em tracking above is tuned for Latin; on Arabic it pinches the
   letter joins, so it is reset wherever the page reads right-to-left. */
[dir="rtl"] *{letter-spacing:normal}

/* Latin runs inside Arabic copy keep the Latin face. */
[dir="rtl"] [lang="en"],
[dir="rtl"] [dir="ltr"],
[dir="rtl"] .stat__num,
[dir="rtl"] .pill__num,
[dir="rtl"] bdi{font-family:Metropolis,Ablaj,system-ui,sans-serif}

/* "+250" — the leading + is bidi-neutral, so in RTL it jumps to the far end
   and reads "250+". Pinning the run to ltr keeps the sign in front. The
   alignment is left to inherit: .stat centres its content, so forcing the
   number to the right here set it out of line with its own label. */
[dir="rtl"] .stat__num{direction:ltr}

img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;letter-spacing:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px}

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

/* ---------- Decorative curves ---------- */
.deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.deco__i,.deco__m{position:absolute;left:50%;max-width:none}
.deco__m{display:none}
.deco--hero        {margin-left:calc(-720px + 990px); top:-695px; width:996px}
.deco--foundation  {margin-left:calc(-720px - 579px); top:-236px; width:2266px}
.deco--foundation-a{margin-left:calc(-720px - 579px); top:696px;  width:2266px}
.deco--foundation-b{margin-left:calc(-720px - 579px); top:-1168px;width:2266px}
.deco--values-l    {margin-left:calc(-720px - 319px); top:-12px;  width:672px}
.deco--values-r    {margin-left:calc(-720px + 987px); top:471px;  width:760px}
.deco--cards       {margin-left:calc(-720px + 976px); top:-105px; width:559px}
.deco--contact-a   {margin-left:calc(-720px - 287px); top:21px;   width:686px}
.deco--contact-b   {margin-left:calc(-720px - 142px); top:543px;  width:1065px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-btn);
  transition:background-color .25s ease,color .25s ease,transform .25s ease;
}
.btn--olive{
  width:180px;height:44px;
  background:var(--olive);color:var(--white);
  font-size:var(--fs-xs);font-weight:400;
}
.btn--olive:hover{background:#7d8664}
.btn--sage{
  width:100%;height:50px;border-radius:9px;
  background:var(--sage);color:var(--green-ink);
  font-size:var(--fs-xs);font-weight:400;
}
.btn--sage:hover{background:#c4cda4}

/* ==========================================================================
   Header
   ========================================================================== */
.nav{background:var(--white);height:129px}
.nav__inner{
  width:min(100% - 48px,var(--frame) - 240px);
  max-width:1200px;margin-inline:auto;height:100%;
  display:flex;align-items:center;
}
.nav__logo{display:block}
.nav__logo--full{width:204px;height:auto}
.nav__logo--mark{display:none;width:49px;height:auto}

.nav__links{display:flex;align-items:flex-start;gap:33px;margin-left:120px;align-self:flex-start;margin-top:53px}
.nav__links a{
  position:relative;
  font-size:var(--fs-xs);font-weight:400;color:var(--ink);
  line-height:var(--lh-snug);padding-bottom:16px;
}
.nav__links a.is-active{font-weight:700}
.nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  border-radius:2px;background:var(--olive);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.nav__links a.is-active::after,
.nav__links a:hover::after{transform:scaleX(1)}
.nav__actions{margin-inline-start:auto;align-self:flex-start;margin-top:40px;display:flex;align-items:center;gap:18px}
.nav__cta-mobile{display:none}
.nav__lang{
  font-size:var(--fs-xs);font-weight:600;color:var(--ink);
  padding:6px 10px;border:1px solid rgba(31,31,31,.25);border-radius:6px;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.nav__lang:hover{background:var(--olive);border-color:var(--olive);color:var(--white)}
.nav__lang--mobile{display:none}

.nav__burger{display:none;width:34px;height:24px;flex-direction:column;justify-content:space-between}
.nav__burger span{display:block;height:3px;background:var(--ink);border-radius:2px;transition:transform .3s ease,opacity .2s ease}

/* ==========================================================================
   Hero media
   ========================================================================== */
.hero-media{position:relative;height:700px;overflow:hidden}
.hero-media__bg{width:100%;height:100%;object-fit:cover}
.hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.50) 0%,rgba(0,0,0,.79) 100%);
}
.hero-media__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:80px;height:100px;display:grid;place-items:center;
  transition:transform .3s ease,opacity .3s ease;
}
.hero-media__play img{width:80px;height:100px}
.hero-media__play:hover{transform:translate(-50%,-50%) scale(1.08);opacity:.85}

/* ==========================================================================
   Hero / stats
   ========================================================================== */
.hero{
  position:relative;height:932px;
  background:linear-gradient(180deg,#004D34 0%,var(--green-900) 100%);
}
.hero .wrap{position:relative;padding-top:169px}

.hero__title{
  font-size:var(--fs-display);line-height:var(--lh-tight);font-weight:700;
}
.hero__title span{color:var(--sage)}

.stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  column-gap:16.5px;row-gap:23px;margin-top:72px;
}
.stat{
  min-height:192px;border-radius:var(--radius-stat);
  background:var(--tint);
  box-shadow:0 4px 34px rgba(0,0,0,.22);
  padding:27px 33px 20px;
  display:flex;flex-direction:column;
}
.stat--c2{grid-column:2}
.stat--c3{grid-column:3}
.stat__num{font-size:var(--fs-stat);line-height:var(--lh-tight);font-weight:700}
.stat__label{font-size:var(--fs-lg);line-height:var(--lh-snug);font-weight:400;margin-top:32px}

/* ==========================================================================
   Foundation — vision / mission
   ========================================================================== */
.foundation{position:relative;height:932px;background:var(--green-900)}
.foundation .wrap{position:relative;padding-top:229px}

.h2-big{font-size:var(--fs-display);line-height:var(--lh-tight);font-weight:700}
.h2-big span{color:var(--sage);font-weight:400}

.vm{display:grid;grid-template-columns:repeat(2,1fr);gap:57px;margin-top:70px}
.vm__card{
  min-height:288px;border-radius:var(--radius-card);
  background:var(--green-700);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  padding:40px 24px 39px;
  transition:transform .3s ease;
}
.vm__card:hover{transform:translateY(-4px)}
.vm__icon{height:64px;width:auto;object-fit:contain;object-position:left center}
.vm__card > .vm__icon{margin-bottom:0}
.vm__title{font-size:var(--fs-h3);line-height:var(--lh-tight);font-weight:700;margin-top:22px}
.vm__title span{color:var(--sage)}
.vm__text{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;margin-top:17px;max-width:520px}

/* ==========================================================================
   Section headings
   ========================================================================== */
.h2{font-size:var(--fs-h2);line-height:var(--lh-tight);font-weight:400;text-align:center}
.h2--bold{font-weight:700}
.lede{
  font-size:var(--fs-lede);line-height:var(--lh-body);font-weight:400;text-align:center;
  max-width:920px;margin:25px auto 0;
}
.lede--sm{font-size:var(--fs-body);line-height:var(--lh-body);max-width:760px;margin-top:23px}
.approach .lede{max-width:790px}
.faq .lede{max-width:780px}

/* ==========================================================================
   Services
   ========================================================================== */
.services{
  position:relative;height:700px;
  background:linear-gradient(180deg,var(--green-900) 0%,#004D34 100%);
}
.services .wrap{position:relative;padding-top:145px}

/* pan-y: the horizontal drag belongs to the swipe handler in script.js, the
   vertical one stays with the page so the strip never traps the scroll. */
.carousel{margin-top:60px;overflow:hidden;touch-action:pan-y}
.carousel__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 33px)/3);
  gap:16.5px;transition:transform .5s cubic-bezier(.4,0,.2,1);
  user-select:none;-webkit-user-select:none;
}
.svc{
  min-height:147px;border-radius:var(--radius-card);background:var(--tint);
  display:flex;align-items:center;justify-content:center;gap:40px;
  transition:background-color .3s ease;
}
.svc:hover{background:rgba(181,191,144,.22)}
.svc img{flex:none;width:auto}
.svc h3{font-size:var(--fs-lg);line-height:var(--lh-snug);font-weight:400;text-align:start}

.dots{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:64px}
.dot{
  position:relative;
  width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--sage);background:transparent;
  transition:background-color .25s ease,transform .25s ease;
}
/* An 18px control is well under a finger's width. This grows the tap target
   to the full pitch between dots and to 44px tall, leaving the drawn dot
   exactly where it is. Width is capped at the pitch so targets never overlap
   and steal each other's taps. */
.dot::after{
  content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:23px;height:44px;
}
.dot.is-active{width:14px;height:14px;border:0;background:var(--sage)}

/* ==========================================================================
   Story
   ========================================================================== */
.story{position:relative;height:592px;overflow:hidden}
.story__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.50) 100%);
}
.story__mark,.story__title{z-index:1}
.story__mark{position:absolute;top:58px;left:50%;margin-left:calc(-720px + 1252px);width:70px}
.story__title{
  position:absolute;left:50%;margin-left:-634px;bottom:84px;
  font-size:var(--fs-display);line-height:var(--lh-tight);font-weight:700;
}
.story__title span{font-weight:400}

/* ==========================================================================
   Values
   ========================================================================== */
.values{
  position:relative;padding:182px 0 173px;
  background:linear-gradient(180deg,var(--green-900) 0%,#004D34 100%);
}
.values .wrap{position:relative}
.values__grid{display:grid;grid-template-columns:repeat(2,1fr);column-gap:28px;row-gap:27px;margin-top:54px}
.value{
  border-radius:var(--radius-card);background:var(--tint);padding:39px 36px 39px 40px;
  transition:background-color .3s ease}
.value:hover{background:rgba(181,191,144,.2)}
.value h3{font-size:var(--fs-h3);line-height:var(--lh-tight);font-weight:700}
.value p{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;margin-top:20px}

/* ==========================================================================
   Clients
   ========================================================================== */
.clients{height:330px;background:var(--paper);display:grid;align-items:center;overflow:hidden}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee__row{display:flex;width:max-content;animation:marquee-l 60s linear infinite}
.marquee:hover .marquee__row{animation-play-state:paused}

.marquee--clients li{
  flex:none;
  width:240px;
  height:150px;             /* tall box so square/portrait logos read at a usable size */
  display:flex;             /* not grid: percentage heights don't resolve against a grid area */
  align-items:center;
  justify-content:center;
  margin-right:92px;
  background:#fff;          /* logos are drawn for a white ground */
  border-radius:8px;
  padding:16px 20px;        /* breathing room so contain doesn't hug the edges */
  box-sizing:border-box;
}
/* Fill the tile's content box and letterbox inside it: `contain` guarantees the
   whole logo stays visible whatever its aspect ratio, so nothing is cropped. */
.marquee--clients img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}


@keyframes marquee-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ==========================================================================
   Approach pillars
   ========================================================================== */
.approach{position:relative;padding:182px 0 185px;background:var(--green-800)}
.approach .wrap{position:relative}
.approach__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:60px}
.pillar{
  min-height:462px;
  border-radius:var(--radius-card);background:var(--tint);
  padding:37px 48px 38px;text-align:center;
  transition:background-color .3s ease}
.pillar:hover{background:rgba(181,191,144,.2)}
.pillar__icon{height:118px;display:grid;place-items:center}
.pillar img{margin:0 auto;width:auto;max-height:118px}
.pillar h3{font-size:var(--fs-h3);line-height:var(--lh-tight);font-weight:700;color:var(--sage);margin-top:24px}
.pillar p{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;margin-top:11px;margin-inline:auto}
.pillar:nth-child(1) p,.pillar:nth-child(2) p{max-width:272px}

/* ==========================================================================
   Projects gallery
   ========================================================================== */
.projects{
  padding:14px 0 0;overflow:hidden;
  background:linear-gradient(180deg,var(--green-800) 0%,#004D34 100%);
}
.gallery{margin-top:60px;display:grid;gap:28px}
.gallery .marquee{-webkit-mask-image:none;mask-image:none}
.gallery .shot{margin-right:24px}  /* trailing margin, not gap — see .marquee--clients */
.gallery .marquee:nth-child(1) .marquee__row,
.gallery .marquee:nth-child(3) .marquee__row{margin-left:-594px}
.gallery .marquee:nth-child(2) .marquee__row{margin-left:-135px}
.marquee__row--l{animation:marquee-l 55s linear infinite}
.marquee__row--r{animation:marquee-r 48s linear infinite}
.shot{flex:none;height:293px;overflow:hidden}
.shot--lg{width:690px}
.shot--sm{width:486px}
.shot img{width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{position:relative;padding:170px 0 172px;background:var(--green-800)}
.accordion{margin-top:60px;display:grid;gap:26px}
.acc{border-radius:var(--radius-stat);background:var(--tint);overflow:hidden;transition:background-color .35s ease}
.acc.is-open{background:var(--sage)}
.acc.is-open .acc__q,.acc.is-open p {color : var(--green-800)}

.acc__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:106px;padding-inline:31px 46px;
  font-size:var(--fs-lg);line-height:var(--lh-snug);font-weight:600;text-align:start;
}
.acc__icon{
  flex:none;position:relative;width:29px;height:31px;
}
.acc__icon::before,.acc__icon::after{
  content:"";position:absolute;background:var(--olive);border-radius:2px;
  transition:transform .3s ease,opacity .3s ease;
}
.acc__icon::before{left:0;right:0;top:14px;height:4px}
.acc__icon::after{top:0;bottom:0;left:12px;width:4px}
.acc.is-open .acc__icon::after{transform:scaleY(0);opacity:0}
.acc__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.acc.is-open .acc__a{grid-template-rows:1fr}
.acc__a > p{
  overflow:hidden;margin:0;padding-inline:31px 46px;
  font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;max-width:830px;
}
.acc.is-open .acc__a > p{padding-top:29px;padding-bottom:41px}

/* ==========================================================================
   8. Contact  |  #contact
   ========================================================================== */
.contact{
  position:relative;padding:150px 0 140px;
  background:linear-gradient(180deg,var(--green-800) 0%,#004F40 100%);
}
.contact__inner{
  position:relative;display:grid;
  grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:72px;align-items:start;
}
.contact__title{font-size:var(--fs-display);line-height:var(--lh-tight);font-weight:700}
.contact__title span{color:var(--sage)}
.contact__text{font-size:var(--fs-body);line-height:var(--lh-body);margin-top:24px;color:rgba(255,255,255,.9)}

.contact__actions{display:flex;flex-direction:column;gap:14px;margin-top:40px;align-items:flex-start}
.pill{
  display:inline-flex;align-items:center;gap:12px;
  min-height:52px;padding:0 24px;border-radius:var(--radius-btn);
  background:var(--tint);border:1px solid rgba(181,191,144,.35);
  font-size:var(--fs-sm);font-weight:500;
  transition:background-color .25s ease,border-color .25s ease;
}
.pill:hover{background:rgba(181,191,144,.24);border-color:var(--sage)}
.pill__i{flex:none;color:var(--sage)}
.pill--num{gap:16px;color:var(--sage)}
.pill__num{font-size:var(--fs-lg);font-weight:700;color:var(--white);letter-spacing:.02em}

/* ---- Request form ---- */
.form{display:grid;gap:0;margin-top:17px}
.form__field{
  width:100%;border:0;border-bottom:1px solid var(--white);
  background:transparent;color:var(--white);
  font-family:inherit;font-size:var(--fs-body);line-height:var(--lh-snug);
  padding:0 0 18px;margin-bottom:43px;
  transition:border-color .25s ease;
}
.form__field::placeholder{color:var(--placeholder)}
.form__field:focus{outline:none;border-bottom-color:var(--sage)}
.form__field--area{resize:vertical;height:117px;margin-bottom:41px}

.form--ar{display:grid;gap:26px;margin-top:0}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.field{display:grid;gap:10px;min-width:0}
.field__label{font-size:var(--fs-sm);font-weight:500;color:rgba(255,255,255,.85)}
.field__opt{color:var(--placeholder);font-weight:400}
.form--ar .form__field{
  margin-bottom:0;padding:0 0 14px;
  font-size:var(--fs-body);line-height:var(--lh-body);
}
.form--ar .form__field--area{height:120px;padding-top:6px}
.form__field--select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23B5BF90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position:left 2px top 8px;
  background-size:12px 8px;
  background-repeat:no-repeat;
  padding-left:26px;cursor:pointer;
}
.form__field--select option{color:var(--ink);background:var(--white)}
.form__field:user-invalid{border-bottom-color:#E5A0A0}

.file{
  display:flex;align-items:center;gap:16px;cursor:pointer;
  border-bottom:1px solid var(--white);padding-bottom:14px;
}
.file__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.file__btn{
  flex:none;display:inline-grid;place-items:center;height:38px;padding:0 18px;
  border-radius:6px;background:var(--tint);border:1px solid rgba(181,191,144,.4);
  font-size:var(--fs-sm);font-weight:500;
  transition:background-color .25s ease;
}
.file:hover .file__btn{background:rgba(181,191,144,.24)}
.file__name{font-size:var(--fs-sm);color:var(--placeholder);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.form--ar .btn--sage{margin-top:6px}
.form__msg{font-size:var(--fs-sm);line-height:var(--lh-body);margin-top:-8px}
.form__msg--ok{color:var(--sage)}
.form__msg--err{color:#E5A0A0}
.form__msg[hidden]{display:none}

/* ==========================================================================
   9. Footer
   ========================================================================== */
.footer{background:var(--green-800);padding-top:90px}
.footer__inner{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer__logo{width:271px;height:auto}
.footer__slogan{
  font-size:var(--fs-body);font-weight:500;color:var(--sage);
  margin-top:22px;
}
.footer__brand p{
  font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400;
  margin-top:12px;max-width:420px;
}
.footer__col h4{font-size:var(--fs-body);line-height:var(--lh-snug);font-weight:700}
.footer__col ul{margin-top:21px;display:grid;gap:8px}
.footer__col li{font-size:var(--fs-body);line-height:var(--lh-loose);font-weight:400}
.footer__col a{transition:color .2s ease}
.footer__col a:hover{color:var(--sage)}

.footer__col ul.social{display:flex;gap:28px;align-items:center;margin-top:30px}
.social img{width:auto;height:29px;transition:transform .25s ease}
.social a:hover img{transform:translateY(-3px)}

/* A grid with place-items:center shrink-wraps the line and breaks it badly
   once the Arabic wraps, so this stays a plain centred block. */
.footer__copy{
  margin-top:90px;height:56px;display:block;line-height:56px;
  background:var(--night);text-align:center;padding-inline:20px;
  font-size:var(--fs-sm);font-weight:400;
}

/* ==========================================================================
   RTL — text only
   The page reads right-to-left, but the decorative curves and the sliders
   keep the exact geometry and travel direction of the English layout.
   The curves need nothing: they are positioned with physical left/margin-left
   and are unaffected by `dir`. The sliders do flip, so they are pinned back
   to ltr and the Arabic text inside them is flipped again.
   ========================================================================== */
.carousel__track,
.dots,
.marquee,
.marquee__row{direction:ltr}

/* Scoped to RTL. Unscoped, this handed the English page an RTL paragraph
   direction for its service headings as well. */
[dir="rtl"] .svc h3{direction:rtl}

/* Underline grows from the start of the link, which is the right in RTL. */
[dir="rtl"] .nav__links a::after{transform-origin:right}

/* The menu's 120px is a physical margin-left, so the mirrored row drops it on
   the far side and pins the links to the logo. Auto margins centre the menu in
   the space between the logo and the actions instead — it stays in flow, so it
   can never collide with either as the header narrows. The actions' own auto
   margin has to go, or it takes a third share of the free space and pulls the
   menu off centre; the links' margins push the actions to the edge anyway. */
[dir="rtl"] .nav__links{margin-inline:auto}
[dir="rtl"] .nav__actions{margin-inline-start:0}

/* ==========================================================================
   Responsive — tablet
   ========================================================================== */
@media (max-width:1200px){
  .nav__inner{width:calc(100% - 48px)}
  .nav__links{margin-left:48px;gap:22px}
  .contact__inner{grid-template-columns:1fr 1fr;gap:48px}
  .footer__inner{grid-template-columns:1fr 1fr;row-gap:56px}
  .story__title{left:24px;margin-left:0}
  .story__mark{left:auto;right:24px;margin-left:0}
  .deco__i{display:none}
}

@media (max-width:1024px){
  :root{
    /* tablet  40 34 28 22 20 19 17 15 14 */
    --fs-display:40px; --fs-stat:34px; --fs-h2:28px; --fs-h3:22px; --fs-lg:20px;
    --fs-lede:19px;    --fs-body:17px; --fs-sm:15px; --fs-xs:14px;
  }
  .nav__links{display:none}
  .nav__actions{display:none}
  .nav__lang--mobile{display:inline-flex;align-items:center;align-self:flex-start;margin-top:4px}
  .nav__burger{display:flex;margin-inline-start:auto}
  .nav__links.is-open{
    display:flex;flex-direction:column;align-items:flex-start;gap:20px;
    position:absolute;left:0;right:0;top:129px;z-index:20;
    background:var(--white);padding:28px 24px 36px;margin:0;
    box-shadow:0 20px 40px rgba(0,0,0,.16);
  }
  .nav__links.is-open a{padding-bottom:6px}
  .nav__cta-mobile{display:inline-flex;margin-top:8px}
  .nav{position:relative}

  .hero,.foundation,.services{height:auto}
  .hero .wrap{padding:110px 0 120px}
  .foundation .wrap{padding:120px 0 130px}
  .services .wrap{padding:110px 0 96px}
  .values{padding:110px 0 120px}
  .approach{padding:110px 0 120px}
  .faq{padding:110px 0 120px}
  .contact{padding:100px 0 90px}

  .stats{grid-template-columns:repeat(2,1fr);gap:24px;margin-top:56px}
  .stat--c2,.stat--c3{grid-column:auto}
  .vm{gap:32px;margin-top:80px}
  .values__grid{gap:24px}
  .approach__grid{grid-template-columns:1fr;gap:24px}
  .carousel__track{grid-auto-columns:calc((100% - 24px)/2);gap:24px}
  .footer__copy{margin-top:80px}
}

/* ==========================================================================
   Responsive — mobile (design width 375)
   ========================================================================== */
@media (max-width:720px){
  :root{
    /* mobile  30 28 24 20 18 17 15 13 12. --fs-display now clears --fs-h2
       (both sat at 26px), card titles are no longer set smaller than body
       copy (--fs-h3 was 16px), and nothing drops below 12px — the FAQ was
       shipping an 11px question over a 10px answer. */
    --fs-display:30px;
    --fs-stat:28px;
    --fs-h2:24px;
    --fs-h3:20px;
    --fs-lg:18px;
    --fs-lede:17px;
    --fs-body:15px;
    --fs-sm:13px;
    --fs-xs:12px;
    --radius-card:12px;
    --radius-stat:14px;
  }
  .wrap{width:calc(100% - 60px)}

  /* decorative curves (mobile artwork) */
  .deco{display:block}
  .deco__m{display:block}
  .deco--m-hero         {margin-left:calc(-187.5px + 241px);  top:-137px; width:276px}
  /* One drawing split across two clip boxes: the hero holds its top, .foundation
     the rest. Anchor the hero half to the hero's *bottom* edge — mobile sections
     are height:auto, so a top offset drifts with the text reflow and tears the
     curve into two mismatched copies. Rendered height is 423.73, of which 132
     sits above the seam. */
  .deco--m-foundation-a {margin-left:calc(-187.5px - 435px);  top:auto; bottom:-291.73px; width:837px}
  .deco--m-foundation   {margin-left:calc(-187.5px - 435px);  top:-132px; width:837px}
  /* Same split as the foundation curve: .faq holds the top of each contact
     drawing, .contact the rest. Anchor the .faq halves to the faq's bottom edge
     so the join survives the text reflow. Rendered heights are 357.28 (a) and
     553.35 (b), of which 160 / 74 sit above the seam. */
  .deco--m-faq-a        {margin-left:calc(-187.5px + 41px);   top:auto; bottom:-197.28px; width:439px}
  .deco--m-faq-b        {margin-left:calc(-187.5px + 282px);  top:auto; bottom:-479.35px; width:348px}
  .deco--m-contact-a    {margin-left:calc(-187.5px + 41px);   top:-160px; width:439px}
  .deco--m-contact-b    {margin-left:calc(-187.5px + 282px);  top:-74px;  width:348px}

  /* header */
  .nav{height:110px}
  .nav__inner{width:calc(100% - 40px)}
  .nav__logo--full{display:none}
  .nav__logo--mark{display:block}
  .nav__links.is-open{top:110px}
  .nav__burger{width:30px;height:23px}
  .nav__burger span{height:3px}

  /* hero */
  .hero-media{height:403px}
  .hero-media__play,.hero-media__play img{width:56px;height:70px}
  .hero .wrap{padding:141px 0 144px}
  .hero__title br{display:none}
  .stats{grid-template-columns:1fr;row-gap:25px;margin-top:59px}
  /* min-height, not height: the label runs to three lines at this width
     and a fixed 155px box spilled its text over the card edge. */
  .stat{min-height:155px;padding:23px 27px 20px}
  .stat__label{margin-top:32px}
  .stat__label br{display:none}

  /* foundation */
  .foundation .wrap{padding:120px 0 121px}
  .h2-big br{display:block}
  .vm{grid-template-columns:1fr;gap:33px;margin-top:59px}
  .vm__card{min-height:185px;padding:20px 13px 18px}
  .vm__icon{height:29px}
  .vm__title{margin-top:16px}
  .vm__text{margin-top:8px}

  /* shared headings */
  .lede{margin-top:28px;max-width:none}
  .lede--sm{margin-top:28px;max-width:none}
  .approach .lede,.faq .lede{max-width:none}

  /* services */
  .services .wrap{padding:107px 0 105px}
  .services .lede{margin-top:32px}
  .carousel{margin-top:52px}
  .carousel__track{grid-auto-columns:100%;gap:16px}
  .svc{min-height:120px;gap:26px;padding:0 20px}
  .svc img{height:52px}
  .dots{margin-top:52px}

  /* story */
  .story{height:417px}
  .story__title{bottom:41px;left:31px}
  .story__mark{top:34px;right:31px;width:44px;height:auto}

  /* values */
  .values{padding:122px 0 124px}
  .values__grid{grid-template-columns:1fr;row-gap:12px;margin-top:57px}
  .value{min-height:160px;padding:15px 22px 19px}
  .value p{margin-top:14px;max-width:none}

  /* clients */
  .clients{height:330px}
  .marquee--clients li{width:180px;height:112px;margin-right:56px;padding:12px 16px}

  /* approach */
  .approach{padding:114px 0 116px}
  .approach__grid{grid-template-columns:1fr;gap:24px;margin-top:67px}
  .pillar{min-height:378px;padding:36px 24px 38px}
  .pillar__icon{height:92px}
  .pillar img{max-height:92px}
  .pillar h3{margin-top:28px}
  .pillar p{margin-top:12px;max-width:none !important}

  /* projects */
  .projects{padding:107px 0 130px}
  .gallery{margin-top:52px;gap:24px}
  @media (max-width: 720px) {
    .projects{padding:30px 0 130px}
    .approach{padding:114px 0 30px}
  }
  /* faq */
  .faq{padding:110px 0 116px}
  .accordion{margin-top:47px;gap:22px}
  /* Readable questions wrap at this width, so the row grows instead of
     clipping against the accordion's overflow:hidden. */
  .acc__q{height:auto;min-height:39px;padding:12px 17px}
  .acc__icon{width:16px;height:16px}
  .acc__icon::before{top:6.5px;height:3px}
  .acc__icon::after{left:6.5px;width:3px}
  .acc__a > p{padding-inline:17px;max-width:none}
  .acc.is-open .acc__a > p{padding-top:19px;padding-bottom:22px}

  /* contact */
  .contact{padding:125px 0 127px}
  .contact__inner{grid-template-columns:1fr;gap:57px}
  .form{margin-top:0}
  .form__field{padding-bottom:16px;margin-bottom:54px}
  .form__field--area{height:96px;margin-bottom:42px}
  .btn--sage{height:49px}

  /* footer */
  .footer{padding-top:71px}
  .footer__inner{grid-template-columns:1fr 1fr;column-gap:24px;row-gap:38px}
  /* Link columns pair up two per row. Brand and social span the full width:
     the blurb needs the measure, and the icon row is wider than one column,
     so a half-width track makes flex shrink the icons down to ~13px. */
  .footer__brand,
  .footer__col--social{grid-column:1 / -1}
  .footer__logo{width:210px}
  .footer__slogan{margin-top:18px}
  .footer__brand p{margin-top:12px;max-width:none}
  .footer__col ul{margin-top:16px}
  .footer__col ul.social{gap:22px;margin-top:20px}
  .social img{height:24px}
  .footer__copy{margin-top:66px;height:auto;line-height:var(--lh-loose);padding:18px 20px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}

.values__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem; /* matches gap-6 */
}

.value {
  flex: 0 1 calc(50% - 0.75rem); /* 2 per row, accounting for gap */
  box-sizing: border-box;
}

/* optional: stack to 1 column on small screens */
@media (max-width: 640px) {
  .value {
    flex-basis: 100%;
  }
}
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem; /* adjust to match your existing spacing */
  list-style: none;
  padding: 0;
  margin: 0;
}

.stat {
  flex: 0 1 calc(33.333% - 1rem); /* 3 per row, accounting for gap */
  box-sizing: border-box;
  text-align: center; /* if not already centered internally */
}

@media (max-width: 768px) {
  .stat {
    flex-basis: calc(50% - 0.75rem); /* 2 per row on tablet */
  }
}

@media (max-width: 480px) {
  .stat {
    flex-basis: 100%; /* stack on mobile */
  }
}