/* Ghusn Landscaping. Single stylesheet for the home page. */
:root{
  --forest:#10271f;
  --forest-2:#163428;
  --pine:#24493b;
  --night:#0a1310;
  --bronze:#b48b5e;
  --bronze-lt:#d2b085;
  --bronze-ink:#7a5a38; /* bronze dark enough for small text on the light backgrounds (5:1) */
  --stone:#e8e6de;
  --stone-2:#dcd9cf;
  --paper:#f4f3ee;
  --ink:#15211c;
  --muted:#56635c;
  --on-dark:#e9e6dc;
  --on-dark-muted:#a8b3aa;
  --glow:#f2b96a;
  --line:rgba(21,33,28,.14);
  --line-dark:rgba(233,230,220,.14);

  --display:"Marcellus","Iowan Old Style","Times New Roman",serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --gut:clamp(16px,4vw,56px);
  --leaf:28px 4px 4px 4px;
  --leaf-sm:14px 3px 3px 3px;
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:light;
}
html[lang="ar"]{
  --display:"El Messiri","Geeza Pro","Tahoma",serif;
  --body:"IBM Plex Sans Arabic","Geeza Pro","Tahoma",sans-serif;
  --mono:"IBM Plex Sans Arabic","Tahoma",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
.split-line{padding-bottom:.08em}
body{margin:0;background:var(--stone);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;line-height:1.02}
p{margin:0}
ul,ol{list-style:none;margin:0;padding:0}
figure{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
::selection{background:var(--bronze);color:var(--night)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.wrap{max-width:1360px;margin-inline:auto;padding-inline:var(--gut)}
.skip{position:fixed;inset-inline-start:16px;top:-60px;z-index:100;background:var(--bronze);color:var(--night);padding:10px 16px;border-radius:var(--leaf-sm);text-decoration:none;font-weight:600}
.skip:focus{top:16px}

.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
html[lang="ar"] .mono{letter-spacing:0;text-transform:none;font-size:14px}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--bronze-ink);display:flex;align-items:center;gap:12px;margin-bottom:28px}
.label::before{content:"";width:10px;height:10px;flex:none;background:currentColor;border-radius:7px 1px 1px 1px}
html[lang="ar"] .label{letter-spacing:0;text-transform:none;font-size:15px}
html[lang="ar"] .label::before{border-radius:1px 7px 1px 1px}
h2{font-size:clamp(2.4rem,5.6vw,5rem);letter-spacing:-.01em}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{line-height:1.25;letter-spacing:0}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 24px;border-radius:var(--leaf-sm);border:1px solid transparent;font:600 15px/1 var(--body);text-decoration:none;cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn-bronze{background:var(--bronze);color:var(--night)}
.btn-bronze:hover{background:var(--bronze-lt)}
.btn-ghost{border-color:var(--line-dark);color:var(--on-dark)}
.btn-ghost:hover{border-color:var(--on-dark)}
.btn-line{border-color:var(--line);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--ink)}
html[dir="rtl"] .services-stage,html[dir="rtl"] .btn,html[dir="rtl"] .card a,html[dir="rtl"] .about-photo,html[dir="rtl"] .dusk-night,html[dir="rtl"] .night-row figure,html[dir="rtl"] .form{border-radius:4px 28px 4px 4px}
html[dir="rtl"] .btn{border-radius:3px 14px 3px 3px}
.link{display:inline-flex;gap:10px;align-items:center;font-weight:600;text-decoration:none;padding-bottom:6px;border-bottom:1px solid currentColor;transition:gap .3s var(--ease),color .3s}
.link:hover{gap:16px;color:var(--bronze-ink)}
.link-light{color:var(--on-dark)}

/* Header */
.header{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:calc(14px + env(safe-area-inset-top,0px)) var(--gut) 14px;color:var(--on-dark);transition:background .4s,color .4s,box-shadow .4s,transform .45s var(--ease)}
.header.is-solid{background:rgba(232,230,222,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.header.is-solid.on-dark{background:rgba(16,39,31,.84);color:var(--on-dark);box-shadow:0 1px 0 var(--line-dark)}
.header.is-solid.on-dark .brand-on-dark{opacity:1}
.header.is-solid.on-dark .brand-on-light{opacity:0}
.header.is-hidden{transform:translateY(-100%)}
.brand{display:block;width:132px;flex:none;position:relative}
.brand img{width:100%;transition:opacity .4s}
.brand-on-light{position:absolute;inset:0;opacity:0}
.header.is-solid .brand-on-dark{opacity:0}
.header.is-solid .brand-on-light{opacity:1}
.nav{display:flex;gap:clamp(18px,2.4vw,36px)}
.nav a{font-size:15px;font-weight:500;text-decoration:none;position:relative;padding-block:6px}
.nav a::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav a:hover::after,.nav a.is-current::after{transform:scaleX(1);transform-origin:left}
.header-actions{display:flex;align-items:center;gap:14px}
.lang{background:none;border:1px solid currentColor;border-radius:var(--leaf-sm);height:40px;padding:0 14px;cursor:pointer;display:inline-flex;align-items:center;text-decoration:none;font-family:"IBM Plex Sans Arabic",var(--body);font-size:14px;opacity:.85}
.lang:hover{opacity:1}
.header-cta{min-height:42px;padding:0 18px;font-size:14px}
.menu-toggle{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative}
.menu-toggle span{position:absolute;inset-inline:10px;height:1.5px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
.menu-toggle span:first-child{top:17px}.menu-toggle span:last-child{top:26px}
.menu-open .menu-toggle span:first-child{top:21px;transform:rotate(45deg)}
.menu-open .menu-toggle span:last-child{top:21px;transform:rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:40;background:var(--forest);color:var(--on-dark);display:flex;flex-direction:column;justify-content:space-between;padding:calc(110px + env(safe-area-inset-top,0px)) var(--gut) calc(32px + env(safe-area-inset-bottom,0px));clip-path:inset(0 0 100% 0);transition:clip-path .6s var(--ease);visibility:hidden}
.mobile-menu.open{clip-path:inset(0);visibility:visible}
.mobile-menu nav{display:flex;flex-direction:column;gap:6px}
.mobile-menu nav a{font:400 clamp(2.2rem,9vw,3.2rem)/1.2 var(--display);text-decoration:none}
.mobile-menu-foot{display:flex;flex-direction:column;gap:8px;color:var(--on-dark-muted)}
.mobile-menu-foot a{text-decoration:none}
.menu-open .header{color:var(--on-dark);background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.menu-open .header .brand-on-dark{opacity:1}.menu-open .header .brand-on-light{opacity:0}
@media (max-width:1020px){.nav,.header-cta{display:none}.menu-toggle{display:block}}

/* Hero */
.hero{position:relative;isolation:isolate;min-height:100svh;display:flex;flex-direction:column;background:var(--night);color:var(--on-dark);overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--forest)}
.hero-slide{position:absolute;inset:0;margin:0;clip-path:inset(0 0 0 100%)}
.hero-slide.is-on{clip-path:inset(0)}
.hero-slide img{width:100%;height:100%;object-fit:cover;transform-origin:50% 60%}
.hero-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to top,rgba(8,18,14,.93) 0%,rgba(8,18,14,.58) 36%,rgba(8,18,14,.1) 62%,rgba(8,18,14,.52) 100%)}
.hero-inner{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:32px;width:100%;padding-top:calc(clamp(84px,12vh,104px) + env(safe-area-inset-top,0px));padding-bottom:clamp(28px,5vh,56px);position:relative}
.hero-eyebrow{display:flex;justify-content:space-between;gap:16px;color:rgba(233,230,220,.72)}
.hero-bottom{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.hero-title{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;font-size:clamp(3rem,min(8.6vw,15vh),10rem);line-height:.92;letter-spacing:-.025em;text-shadow:0 2px 40px rgba(0,0,0,.22)}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.06em}
.hero-title .line>span{display:block;white-space:nowrap}
.hero-title em{font-style:normal;color:var(--bronze-lt)}
html[lang="ar"] .hero-title{font-size:clamp(2.8rem,min(7.4vw,13vh),8.6rem);line-height:1.15}
.hero-side{display:grid;gap:24px;max-width:440px}
.hero-lede{color:rgba(233,230,220,.86);font-size:18px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-nav{position:absolute;inset-inline-end:var(--gut);top:calc(clamp(84px,12vh,104px) + env(safe-area-inset-top,0px) + 40px);display:grid;gap:8px}
.hero-dot{background:none;border:0;color:rgba(233,230,220,.55);display:grid;grid-template-columns:auto 64px;align-items:center;gap:12px;cursor:pointer;padding:5px 0;justify-items:end;transition:color .3s}
.hero-dot:hover,.hero-dot.is-on{color:var(--on-dark)}
.hero-dot i{width:100%;height:1px;background:rgba(233,230,220,.28);position:relative;overflow:hidden}
.hero-dot i::after{content:"";position:absolute;inset:0;background:var(--bronze-lt);transform:scaleX(var(--p,0));transform-origin:left}
html[dir="rtl"] .hero-dot i::after{transform-origin:right}
.motion-toggle{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:5px 0;cursor:pointer;color:rgba(233,230,220,.7);justify-self:end}
.motion-toggle:hover{color:var(--on-dark)}
.mt-icon{width:10px;height:11px;border-inline:3px solid currentColor;box-sizing:border-box}
.motion-toggle[aria-pressed="true"] .mt-icon{border:0;width:0;height:0;border-block:6px solid transparent;border-inline-start:10px solid currentColor}
.hero.is-paused .ticker-track,.reel.is-paused .reel-row{animation-play-state:paused}
.reel-pause{justify-self:start;margin-top:4px}
.hero .ticker{margin-top:0;border-top:1px solid var(--line-dark);border-bottom:0;background:rgba(8,18,14,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.intro{display:none}
/* Logo curtain on every load. The head script adds .has-intro before the first paint; site.js lifts it.
   If the script never runs, the curtain fades out on its own after five seconds. */
.has-intro .intro{position:fixed;inset:0;z-index:200;background:var(--forest);display:grid;place-items:center;animation:intro-failsafe .5s 5s forwards}
.intro img{width:min(160px,36vw);height:auto;animation:intro-logo .5s cubic-bezier(.22,1,.36,1) backwards}
@keyframes intro-logo{from{opacity:0;transform:translateY(16px)}}
@keyframes intro-failsafe{to{opacity:0;visibility:hidden}}
.ticker{overflow:hidden;padding-block:15px;border-bottom:1px solid var(--line-dark)}
.ticker-track{display:flex;align-items:center;gap:22px;width:max-content;animation:tick 48s linear infinite;font:400 clamp(.95rem,1.3vw,1.2rem)/1 var(--display);color:var(--on-dark)}
.ticker-track i{width:7px;height:7px;background:var(--bronze);border-radius:6px 1px 1px 1px;flex:none}
html[dir="rtl"] .ticker-track{animation-name:tick-rtl}
@keyframes tick{to{transform:translateX(-50%)}}
@keyframes tick-rtl{to{transform:translateX(50%)}}
@media (max-width:860px){
  .hero-bottom{grid-template-columns:1fr}.hero-coords{display:none}
  .hero-title{font-size:clamp(2.8rem,13vw,5.6rem)}html[lang="ar"] .hero-title{font-size:clamp(2.6rem,12vw,5rem)}
  .hero-nav{position:static;grid-template-columns:repeat(4,1fr) auto;gap:8px;margin-top:auto;margin-bottom:-12px;align-items:end}
  .hero-pause .mono{display:none}
  .hero-dot{grid-template-columns:1fr;gap:6px;justify-items:start}
  .hero-dot .mono{font-size:10px;letter-spacing:.06em}
}

/* About */
.about{padding-block:clamp(96px,12vw,170px)}
.about-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:32px;margin-bottom:clamp(56px,7vw,100px)}
.statement{font:400 clamp(1.9rem,3.9vw,3.6rem)/1.14 var(--display);letter-spacing:-.01em;text-wrap:pretty}
html[lang="ar"] .statement{line-height:1.5}
.statement .w{transition:color .2s}
.about-body{display:grid;grid-template-columns:1.25fr 1fr .75fr;gap:clamp(20px,3vw,44px);align-items:end}
.about-photo{overflow:hidden;border-radius:var(--leaf)}
.about-photo img{width:100%;height:100%;object-fit:cover}
.about-photo-a{aspect-ratio:4/3.4}
.about-photo-b{aspect-ratio:3/4.4}
.about-copy{display:grid;gap:22px;align-content:end;color:var(--muted);padding-bottom:8px}
.about-copy .link{color:var(--ink);justify-self:start}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(64px,8vw,110px) 0 0;padding:clamp(28px,4vw,56px) clamp(20px,3vw,48px);border-radius:var(--leaf);container-type:inline-size;color:var(--on-dark);background:linear-gradient(115deg,rgba(16,39,31,.97) 30%,rgba(16,39,31,.84)),url(assets/topiary-walk.webp) center 60%/cover,var(--forest);position:relative;overflow:hidden}
html[dir="rtl"] .stats{border-radius:4px 28px 4px 4px}
.stats>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:14px;padding-inline:0 clamp(16px,2vw,28px)}
.stats>div+div{padding-inline-start:clamp(16px,2vw,28px);border-inline-start:1px solid var(--line-dark)}
.stats dt{display:grid;gap:10px;padding-top:16px;border-top:1px solid rgba(210,176,133,.35)}
.stat-tag{color:var(--bronze-lt)}
.stat-desc{color:var(--on-dark-muted);font-size:15px;line-height:1.45;max-width:22ch}
.stats dd{margin:0;font:400 min(clamp(2.8rem,4.8vw,4.6rem),5cqi)/1 var(--display);color:#f6f2e8;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;white-space:nowrap}
.stat-plus{color:var(--bronze-lt);font-size:.55em;margin-inline-start:2px;align-self:flex-start}
.stat-unit{font:500 .3em/1 var(--body);color:var(--bronze-lt);margin-inline-start:8px;letter-spacing:.02em}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);margin-top:clamp(56px,7vw,96px);padding-top:32px;border-top:1px solid var(--line)}
.vm h3{color:var(--bronze-ink);margin-bottom:14px}
.vm p{font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.5;max-width:52ch}
@media (max-width:900px){
  .about-head{grid-template-columns:1fr}
  .about-body{grid-template-columns:1fr 1fr}
  .about-copy{grid-column:1/-1;order:-1}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .stats dd{font-size:min(clamp(2.2rem,10vw,3.2rem),10cqi)}
  .stats>div:nth-child(3){padding-inline-start:0;border-inline-start:0}
  .vm{grid-template-columns:1fr}
}

/* Work: horizontal card track */
.work{background:var(--forest);color:var(--on-dark);overflow:clip;position:relative}
.work-pin{padding-block:clamp(88px,10vw,120px);display:flex;flex-direction:column;gap:clamp(32px,4vw,56px)}
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;width:100%}
.work-head .label{color:var(--bronze-lt)}
.work-meta{display:grid;gap:20px;max-width:360px;color:var(--on-dark-muted)}
.work-progress{display:flex;align-items:center;gap:16px;color:var(--on-dark)}
.work-count b{font-weight:500;color:var(--bronze-lt)}
.work-bar{flex:1;height:1px;background:var(--line-dark);position:relative}
.work-bar i{position:absolute;inset:0;background:var(--bronze-lt);transform:scaleX(var(--p,.14));transform-origin:left}
html[dir="rtl"] .work-bar i{transform-origin:right}
.work-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.work-viewport::-webkit-scrollbar{display:none}
.work-track{display:flex;gap:clamp(16px,2vw,28px);padding-inline:var(--gut);width:max-content}
.card{width:min(82vw,var(--card-w,480px));flex:none;scroll-snap-align:center}
.card a{display:flex;flex-direction:column;height:100%;text-decoration:none;background:var(--forest-2);border-radius:var(--leaf);overflow:hidden;border:1px solid var(--line-dark);transition:border-color .4s,transform .5s var(--ease)}
.card a:hover{border-color:rgba(210,176,133,.5)}
.card figure{aspect-ratio:4/3.2;overflow:hidden;position:relative}
.card figure img{width:118%;max-width:none;height:100%;object-fit:cover;margin-inline-start:-9%;transition:scale 1s var(--ease)}
.card a:hover figure img{scale:1.06}
.card-body{display:grid;grid-template-columns:1fr auto;gap:10px 16px;padding:24px 26px 26px;flex:1}
.card-num{grid-row:1;grid-column:2;color:var(--bronze-lt)}
.card-type{grid-row:1;grid-column:1;color:var(--on-dark-muted)}
.card h3{grid-column:1/-1;font-size:clamp(1.7rem,2.4vw,2.3rem)}
.card-text{grid-column:1/-1;color:var(--on-dark-muted);font-size:15px;max-width:40ch}
.card-go{grid-column:1/-1;align-self:end;display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:16px;border-top:1px solid var(--line-dark);font-weight:600;font-size:15px}
.card-go span:last-child{display:grid;place-items:center;width:38px;height:38px;border-radius:12px 3px 3px 3px;background:var(--bronze);color:var(--night);transition:transform .4s var(--ease)}
.card a:hover .card-go span:last-child{transform:rotate(45deg)}
.card:nth-child(even) figure{aspect-ratio:4/2.6}
.card-end a{background:var(--bronze);color:var(--night);border-color:transparent;justify-content:flex-end}
.card-end .card-body{align-content:end}
.card-end .card-type,.card-end .card-text{color:var(--night)}
.card-end h3{font-size:clamp(2.2rem,3.4vw,3.2rem)}
.card-end .card-go{border-color:rgba(10,19,16,.2)}
.card-end .card-go span:last-child{background:var(--night);color:var(--bronze-lt)}
.card-end .card-body{min-height:300px}
/* Desktop pinned track: cards fill the height left under the heading, so nothing is cut off on short laptop screens.
   The photo covers the whole card and the text sits on a gradient at its foot. Every third card is wide for rhythm. */
@media (min-width:900px){
  .work.is-pinned .work-pin{height:100vh;padding-block:calc(84px + env(safe-area-inset-top,0px)) clamp(20px,4vh,40px);justify-content:flex-start;gap:clamp(18px,3.4vh,40px)}
  .work.is-pinned .work-head h2{font-size:clamp(2rem,min(4.6vw,7vh),4.4rem)}
  .work.is-pinned .work-head .label{margin-bottom:clamp(10px,2vh,24px)}
  .work.is-pinned .work-viewport{flex:1;min-height:0;overflow:visible;scroll-snap-type:none}
  .work.is-pinned .work-track{height:100%;align-items:stretch}
  .work.is-pinned .card{height:100%;--h:calc(100vh - 84px - clamp(20px,4vh,40px) - clamp(18px,3.4vh,40px) - clamp(2rem,min(4.6vw,7vh),4.4rem) * 2 - 60px);width:clamp(260px,calc(var(--h) * .8),500px)}
  .work.is-pinned .card:nth-child(3n+2){width:clamp(360px,calc(var(--h) * 1.3),760px)}
  .work.is-pinned .card-end .card-body{min-height:0}
  .work.is-pinned .card:not(.card-end) a{position:relative}
  .work.is-pinned .card:not(.card-end) figure{position:absolute;inset:0;aspect-ratio:auto}
  .work.is-pinned .card:not(.card-end) .card-body{position:relative;margin-top:auto;flex:none;padding-top:72px;background:linear-gradient(transparent,rgba(10,19,16,.55) 30%,rgba(10,19,16,.92))}
  .work.is-pinned .card:not(.card-end) .card-text{color:rgba(233,230,220,.8)}
}
@media (min-width:900px) and (max-height:760px){
  .work.is-pinned .card-text{display:none}
  .work.is-pinned .card-body{padding:18px 22px 20px;gap:6px 16px}
  .work.is-pinned .card:not(.card-end) .card-body{padding-top:64px}
  .work.is-pinned .card-go{margin-top:6px;padding-top:12px}
}
@media (max-width:899px){.work-head{flex-direction:column;align-items:flex-start}.work-meta{max-width:none;width:100%}}

/* Services: hover a service on desktop to see its photo and description; tap to open on phones */
.services{background:var(--paper)}
.services-pin{padding-block:clamp(88px,11vw,150px)}
.services-side{display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3.4vh,36px);min-height:0}
.services-head{display:grid;gap:clamp(10px,1.8vh,18px)}
.services-head .label{margin-bottom:0}
.services-head h2{font-size:clamp(2rem,min(3.6vw,6.2vh),3.8rem)}
.services-intro-text{color:var(--muted);max-width:36ch}
.services-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,88px);align-items:stretch;width:100%}
.services-stage{position:relative;border-radius:var(--leaf);overflow:hidden;background:var(--forest);min-height:520px;isolation:isolate}
.services-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 0s .4s;z-index:0}
.services-stage>img.is-on{opacity:1;transition:opacity .4s ease;z-index:2}
.services-stage::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(to top,rgba(10,19,16,.78),rgba(10,19,16,0) 42%);pointer-events:none}
.stage-cap{position:absolute;inset:auto 24px 30px;z-index:4;display:grid;gap:8px;color:var(--on-dark)}
.stage-count{color:var(--bronze-lt)}.stage-count b{font-weight:500;color:var(--on-dark)}
.stage-name{font:400 clamp(1.6rem,2.6vw,2.4rem)/1.05 var(--display)}
.stage-bar{position:absolute;inset:auto 24px 18px;z-index:4;height:2px;background:rgba(233,230,220,.2)}
.stage-bar i{position:absolute;inset:0;background:var(--bronze-lt);transform:scaleX(var(--sp,.14));transform-origin:left;transition:transform .5s var(--ease)}
html[dir="rtl"] .stage-bar i{transform-origin:right}
.service-list{border-top:1px solid var(--line);width:100%}
.service{border-bottom:1px solid var(--line)}
.service h3{font-size:inherit}
.service-btn{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:clamp(9px,1.6vh,16px) 0;background:none;border:0;cursor:pointer;text-align:start;color:var(--ink)}
.service-num{color:var(--bronze-ink);min-width:2ch}
.service-name{font:400 clamp(1.2rem,min(1.8vw,3.1vh),1.75rem)/1.15 var(--display);color:rgba(21,33,28,.55);transition:color .35s,transform .5s var(--ease)}
.service-btn:hover .service-name,.service.is-on .service-name{color:var(--ink)}
.service.is-on .service-name{transform:translateX(8px)}
html[dir="rtl"] .service.is-on .service-name{transform:translateX(-8px)}
.service-plus{width:14px;height:14px;position:relative}
.service-plus::before,.service-plus::after{content:"";position:absolute;inset:6px 0 auto;height:1.5px;background:var(--bronze);transition:transform .4s var(--ease)}
.service-plus::after{transform:rotate(90deg)}
.service.is-on .service-plus::after{transform:rotate(0)}
.service-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.service.is-on .service-body{grid-template-rows:1fr}
.service-body>div{overflow:hidden;display:grid;gap:10px;padding-inline-start:calc(2ch + 18px + 8px)}
.service-body p{color:var(--muted);max-width:52ch;font-size:16px}
.service-body p:first-of-type{margin-top:2px}
.service-body .tags{color:var(--bronze-ink);margin-bottom:clamp(12px,2vh,20px)}
.service-body p:first-of-type{font-size:clamp(14px,1.9vh,16px)}
.service-img{display:none}
@media (max-width:899px){
  .services-grid{grid-template-columns:1fr}
  .services-stage{display:none}
  .services-side{gap:28px}
  .service-img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--leaf-sm);margin-bottom:6px}
  .service-body>div{padding-inline-start:0}
}

/* Lighting */
.lighting{background:var(--night);color:var(--on-dark);position:relative;overflow:clip;padding-block:clamp(96px,12vw,160px)}
.lighting{--dn:0}
.glow{position:absolute;inset:0;pointer-events:none;opacity:calc(.35 + var(--dn) * .65);background:radial-gradient(640px circle at var(--mx,72%) var(--my,34%),rgba(242,185,106,.13),transparent 62%);transition:background .2s}
.lighting-pin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;position:relative}
.lighting-copy{display:grid;gap:26px;justify-items:start}
.lighting-copy .label{color:var(--glow);margin-bottom:0}
.lighting-copy h2{color:#fbf3e4}
.lighting-copy>p{color:var(--on-dark-muted);max-width:46ch}
.light-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;width:100%;max-width:480px}
.light-list li{display:flex;align-items:center;gap:10px;padding-block:10px;border-bottom:1px solid var(--line-dark);font-size:15px}
.light-list li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--glow);box-shadow:0 0 12px 3px rgba(242,185,106,.55);flex:none;opacity:clamp(.2,calc((var(--dn) - var(--t,0)) * 6 + .2),1);transition:opacity .3s}
.light-list li:nth-child(1){--t:.15}.light-list li:nth-child(2){--t:.3}.light-list li:nth-child(3){--t:.45}.light-list li:nth-child(4){--t:.6}
.dusk-night{position:relative;aspect-ratio:3/3.7;max-height:78vh;width:100%;border-radius:var(--leaf);overflow:hidden;box-shadow:0 40px 120px -40px rgba(242,185,106,calc(.1 + var(--dn) * .45))}
.dusk-night img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dn-night{opacity:var(--dn)}
.dn-labels{position:absolute;inset:auto 18px 18px;display:flex;align-items:center;gap:14px;padding:12px 16px;background:rgba(10,19,16,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--leaf-sm);color:var(--on-dark)}
.dn-track{flex:1;height:2px;background:var(--line-dark);position:relative;border-radius:2px}
.dn-track i{position:absolute;inset:0;background:var(--glow);transform:scaleX(var(--dn));transform-origin:left;box-shadow:0 0 10px rgba(242,185,106,.8)}
html[dir="rtl"] .dn-track i{transform-origin:right}
.dn-l1{opacity:calc(1 - var(--dn) * .6)}
.dn-l2{opacity:calc(.4 + var(--dn) * .6);color:var(--glow)}
.night-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px);margin-top:clamp(56px,8vw,110px);position:relative}
.night-row figure{aspect-ratio:4/4.6;border-radius:var(--leaf);overflow:hidden}
.night-row figure:nth-child(2){margin-top:clamp(24px,5vw,72px)}
.night-row img{width:100%;height:100%;object-fit:cover;transition:scale 1.2s var(--ease)}
.night-row figure:hover img{scale:1.05}
@media (max-width:900px){
  .lighting-pin{grid-template-columns:1fr}
  .dusk-night{max-height:none;aspect-ratio:3/3.6}
  .night-row{grid-template-columns:1fr 1fr}
  .night-row figure:nth-child(2){margin-top:0}
  .night-row figure:nth-child(3){grid-column:1/-1;aspect-ratio:16/10}
}
@media (max-width:520px){.light-list{grid-template-columns:1fr}}

/* Process */
.process{padding-block:clamp(96px,12vw,170px)}
.process-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:32px}
.process-head h2{font-size:clamp(2.2rem,4.6vw,4.2rem)}
.branch{margin-top:clamp(56px,7vw,96px);height:80px}
.branch svg{width:100%;height:100%;overflow:visible}
.branch-path{fill:none;stroke:var(--bronze);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:var(--draw,0)}
html[dir="rtl"] .branch svg{transform:scaleX(-1)}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin-top:8px}
.steps li{display:grid;gap:12px;align-content:start}
.steps .mono{color:var(--bronze-ink)}
.steps h3{font-size:clamp(1.4rem,1.9vw,1.8rem)}
.steps p{color:var(--muted);font-size:15px}
.leaf{width:22px;height:22px;background:var(--forest);border-radius:14px 2px 14px 2px;transform:rotate(-12deg) scale(var(--leaf-s,1));transition:transform .6s var(--ease)}
.steps li:nth-child(even) .leaf{background:var(--pine);border-radius:2px 14px 2px 14px}
@media (max-width:900px){
  .process-head{grid-template-columns:1fr}
  .branch{display:none}
  .steps{grid-template-columns:1fr;gap:0;margin-top:48px;border-inline-start:2px solid var(--bronze);padding-inline-start:28px}
  .steps li{padding-bottom:36px;position:relative}
  .steps .leaf{position:absolute;inset-inline-start:-40px;top:0}
}

/* Sectors */
.sectors{--muted:#4d5a53;background:var(--stone-2);padding-block:clamp(96px,12vw,160px)}
.sectors-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(32px,6vw,100px);align-items:start}
.sectors-grid>div{display:grid;gap:24px;position:sticky;top:110px}
.sectors-grid>div .label{margin-bottom:0}
.sectors-grid>div>p:not(.label){color:var(--muted);max-width:40ch}
.sector-list{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.sector-list li{padding:28px 24px 32px 0;border-bottom:1px solid var(--line);display:grid;gap:10px;align-content:start;transition:background .35s}
.sector-list li:nth-child(even){padding-inline-start:24px;border-inline-start:1px solid var(--line)}
.sector-list h3{font-size:clamp(1.25rem,1.65vw,1.6rem)}
.sector-list p{color:var(--muted);font-size:15px}
@media (max-width:900px){.sectors-grid{grid-template-columns:1fr}.sectors-grid>div{position:static}}
@media (max-width:600px){.sector-list{grid-template-columns:1fr}.sector-list li:nth-child(even){padding-inline-start:0;border-inline-start:0}}

/* Field reel */
.field{background:var(--forest);color:var(--on-dark);padding-block:clamp(96px,12vw,160px);overflow:clip}
.field-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.field-head .label{color:var(--bronze-lt);margin-bottom:0;align-self:start}
.field-head h2{font-size:clamp(2.2rem,4.6vw,4.2rem)}
.field-head p:last-child{color:var(--on-dark-muted)}
.reel{display:grid;gap:clamp(12px,1.6vw,20px)}
.reel-row{display:flex;gap:clamp(12px,1.6vw,20px);width:max-content;animation:reel 70s linear infinite}
.reel-reverse{animation-direction:reverse;animation-duration:80s}
.reel:hover .reel-row{animation-play-state:paused}
.reel img{height:clamp(220px,26vw,360px);aspect-ratio:4/5;width:auto;object-fit:cover;border-radius:var(--leaf-sm);background:var(--forest-2);flex:none}
.reel-reverse img:nth-child(odd){aspect-ratio:5/4}
@keyframes reel{to{transform:translateX(-50%)}}
html[dir="rtl"] .reel-row{animation-name:reel-rtl}
@keyframes reel-rtl{to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.reel-row,.ticker-track{animation:none}.reel{overflow-x:auto}}
@media (max-width:900px){.field-head{grid-template-columns:1fr}}

/* Standards and promise */
.standards{background:var(--paper);padding-block:clamp(96px,12vw,160px)}
.standards-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(40px,7vw,120px);align-items:end}
.standards-head .label{margin-bottom:22px}
.standards-head h2{font-size:clamp(2.2rem,4.4vw,4rem);line-height:1.08;color:var(--forest)}
html[lang="ar"] .standards-head h2{line-height:1.45}
.standards-list{display:grid;gap:36px}
.standards-list article{display:grid;gap:10px;padding-top:22px;border-top:2px solid var(--forest)}
.standards-list h3{font-size:1.5rem}
.standards-list p{color:var(--muted);font-size:15px;max-width:48ch}
@media (max-width:900px){.standards-grid{grid-template-columns:1fr}}

/* Clients: sits right after the projects */
.clients{background:var(--forest-2);padding-block:44px 52px;display:grid;justify-items:center;gap:8px;overflow:hidden;border-top:1px solid var(--line-dark)}
.clients .label{color:var(--bronze-lt);justify-content:center;width:100%}
.clients img{width:min(1040px,calc(100% - 2 * var(--gut)));mix-blend-mode:lighten}

/* Contact */
.contact{background:var(--forest-2);color:var(--on-dark);padding-block:clamp(96px,12vw,160px);position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;width:60vw;height:60vw;inset-inline-end:-20vw;top:-20vw;background:radial-gradient(closest-side,rgba(180,139,94,.18),transparent);pointer-events:none}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:start;position:relative}
.contact-copy{display:grid;gap:26px}
.contact-copy .label{color:var(--bronze-lt);margin-bottom:0}
.contact-copy h2{font-size:clamp(2.8rem,6.4vw,6rem);color:#f6f2e8}
.contact-copy>p{color:var(--on-dark-muted);max-width:44ch}
.contact-lines{display:grid;margin-top:16px;border-top:1px solid var(--line-dark)}
.contact-lines li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:18px;border-bottom:1px solid var(--line-dark);flex-wrap:wrap}
.contact-lines .mono{color:var(--on-dark-muted)}
.contact-lines a{text-decoration:none;font-size:18px}
.contact-lines a:hover{color:var(--bronze-lt)}
.form{background:var(--paper);color:var(--ink);border-radius:var(--leaf);padding:clamp(24px,3.4vw,44px);display:grid;gap:20px}
.field-row{display:grid;gap:8px}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label,.form legend{font-size:14px;font-weight:600;color:var(--ink)}
.form input:not([type=radio]),.form textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--line);padding:10px 0;border-radius:0;transition:border-color .3s}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--bronze-ink);box-shadow:0 1px 0 var(--bronze-ink)}
.form textarea{resize:vertical;min-height:110px}
.form ::placeholder{color:#8a948e}
.chips{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.chips legend{margin-bottom:10px;padding:0}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chips span{display:inline-flex;align-items:center;height:40px;padding:0 16px;border:1px solid var(--line);border-radius:12px 3px 3px 3px;font-weight:500;font-size:14px;transition:background .25s,color .25s,border-color .25s}
.chips label:hover span{border-color:var(--ink)}
.chips input:checked+span{background:var(--forest);color:var(--on-dark);border-color:var(--forest)}
.chips input:focus-visible+span{outline:2px solid var(--bronze);outline-offset:2px}
.form-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-sent{display:grid;gap:14px;align-content:center;min-height:360px;text-align:start}
.form-sent h3{font-size:clamp(1.8rem,3vw,2.6rem);color:var(--forest)}
.form-sent p{color:var(--muted)}
.form [disabled]{opacity:.6;cursor:progress}
.form-note{font-size:13px;color:var(--muted)}
.form-status{font-size:14px;font-weight:600;color:var(--pine);min-height:1em}
.form-status:empty{display:none}
.form [aria-invalid="true"],.chips[data-invalid] span{border-color:#a4452c!important}
.chips[data-invalid] legend{color:#a4452c}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:520px){.field-2{grid-template-columns:1fr}.form-actions .btn{flex:1;justify-content:center}}

/* Floating WhatsApp button: phones only, after the hero, hidden over the contact section */
.wa-float{position:fixed;z-index:35;inset-inline-end:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:none;place-items:center;box-shadow:0 10px 30px -8px rgba(0,0,0,.45);transform:translateY(24px) scale(.8);opacity:0;pointer-events:none;transition:transform .45s var(--ease),opacity .3s}
.wa-float svg{width:30px;height:30px}
.wa-float.is-shown{transform:none;opacity:1;pointer-events:auto}
@media (max-width:899px){.wa-float{display:grid}}
@media (prefers-reduced-motion:reduce){.motion-toggle{display:none}}

/* Footer */
.footer{background:var(--night);color:var(--on-dark-muted);padding-block:clamp(64px,8vw,100px) calc(28px + env(safe-area-inset-bottom,0px))}
.footer-top{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:start;padding-bottom:48px;border-bottom:1px solid var(--line-dark)}
.footer-logo{width:170px}
.footer-line{font:400 clamp(1.5rem,2.6vw,2.2rem)/1.2 var(--display);color:var(--on-dark)}
.footer-nav{display:grid;gap:10px;justify-items:end}
.footer-nav a{text-decoration:none}
.footer-nav a:hover,.footer-bottom a:hover{color:var(--bronze-lt)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;font-size:11px}
.footer-bottom a{text-decoration:none}
.footer-links{display:flex;flex-wrap:wrap;gap:4px 20px}
@media (max-width:760px){.footer-top{grid-template-columns:1fr}.footer-nav{justify-items:start;grid-template-columns:1fr 1fr}}

/* Touch screens: every control gets a finger-sized target (44px), text links included */
@media (pointer:coarse){
  .hero-dot{min-height:44px}
  .motion-toggle{min-height:44px;min-width:44px;justify-content:center}
  .link{min-height:44px;padding-block:8px 6px}
  .footer-nav a,.footer-bottom a{display:inline-flex;align-items:center;min-height:44px}
  .mobile-menu-foot a{display:inline-flex;align-items:center;min-height:44px}
  .p-back{min-height:44px;align-items:center}
  .project-page .footer-bottom a{min-height:44px}
}
@media (max-width:860px){.hero-dot .mono{font-size:11px}}
@media (max-width:480px){.form-actions{flex-direction:column}.form-actions .btn{width:100%;justify-content:center}}

/* Right to left: point arrows the way Arabic reads, keep typed-in email and phone left to right but aligned with the form */
html[dir="rtl"] :is(.btn,.link,.card-go,.p-cta,.p-story) [aria-hidden="true"]{display:inline-block;transform:scaleX(-1)}
html[dir="rtl"] .card a:hover .card-go span:last-child{transform:scaleX(-1) rotate(45deg)}
html[dir="rtl"] .form input[dir="ltr"],html[dir="rtl"] .form input[type="email"]{text-align:right}
html[dir="rtl"] .stats dd{direction:ltr;justify-content:flex-end}

/* WhatsApp button in the form: recognisable green, one tap to a ready message */
.btn-wa{background:#25d366;color:#06301a;border-color:#25d366}
.btn-wa:hover{background:#3fe07a;border-color:#3fe07a}
.btn-wa svg{width:20px;height:20px;flex:none}
.heard-other[hidden]{display:none}
html[dir="rtl"] .btn-wa svg{transform:scaleX(-1)}

/* Hero, refined: one full-screen photo moving from day to night, calm type, a trust bar */
.hero-shade{background:linear-gradient(180deg,rgba(8,14,11,.6) 0%,rgba(8,14,11,0) 22%,rgba(8,14,11,0) 45%,rgba(8,14,11,.82) 88%),linear-gradient(90deg,rgba(8,14,11,.55) 0%,rgba(8,14,11,0) 60%)}
html[dir="rtl"] .hero-shade{background:linear-gradient(180deg,rgba(8,14,11,.6) 0%,rgba(8,14,11,0) 22%,rgba(8,14,11,0) 45%,rgba(8,14,11,.82) 88%),linear-gradient(270deg,rgba(8,14,11,.55) 0%,rgba(8,14,11,0) 60%)}
.hero-slide,.hero-slide.is-on{clip-path:none}
.hero-slide{opacity:0;transition:opacity 2.2s ease}
.hero-slide.is-on{opacity:1}
.hero-inner{display:grid;grid-template-columns:1fr auto;align-items:end;justify-content:initial;padding-bottom:clamp(28px,5vh,52px)}
.hero-copy{display:grid;gap:clamp(16px,2.6vh,24px);max-width:680px}
.hero-eyebrow{display:flex;align-items:center;gap:10px;justify-content:flex-start;color:#e2c08f}
.hero-eyebrow img{width:18px;height:18px}
.hero-dotsep{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.7}
html[lang="en"] .hero-title{font-family:"Cormorant Garamond","Iowan Old Style",serif;font-weight:400;font-size:clamp(3.2rem,min(8vw,14vh),8.6rem);line-height:.92;letter-spacing:-.01em}
.hero-title em{font-style:italic;color:#e2c08f}
html[lang="ar"] .hero-title em{font-style:normal}
.hero-lede{max-width:44ch;color:rgba(239,233,220,.86);font-size:17px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pill{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;border-radius:999px;font-weight:600;font-size:15px;text-decoration:none;transition:background .3s,color .3s,border-color .3s}
.pill-light{background:#efe9dc;color:#0f261e}.pill-light:hover{background:#fff}
.pill-ghost{border:1px solid rgba(239,233,220,.45);color:#efe9dc}.pill-ghost:hover{border-color:#efe9dc;background:rgba(239,233,220,.08)}
.hero-nav{position:static;display:flex;gap:18px;align-items:center}
.hero-dot{grid-template-columns:1fr;gap:8px;justify-items:start;min-width:64px}
.hero-dot i{width:100%}
.hero-bar{position:relative;border-top:1px solid rgba(239,233,220,.14);background:rgba(8,14,11,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero-bar-in{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;padding-block:18px 20px;flex-wrap:wrap}
.hero-stats{display:flex;gap:clamp(22px,4vw,56px);margin:0}
.hero-stats>div{display:flex;flex-direction:column-reverse;gap:4px}
.hero-stats dt{font-size:12px;color:#aab5ad}
.hero-stats dd{margin:0;font:500 clamp(1.5rem,2.2vw,2rem)/1 "Cormorant Garamond",var(--display);color:#efe9dc}
html[lang="ar"] .hero-stats dd{font-family:var(--display)}
.hero-stats small{font-size:.55em;color:#e2c08f}
.hero-trust{display:flex;align-items:center;gap:16px;color:#aab5ad}
.hero-trust img{height:30px;width:auto;mix-blend-mode:lighten;opacity:.9}
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;gap:22px}
  .hero-nav{grid-template-columns:none;margin:0}
  .hero-lede{font-size:15px}
  .hero-actions .pill{flex:1}
  .hero-stats{gap:18px;width:100%;justify-content:space-between}
  .hero-stats dt{font-size:11px;max-width:12ch}
  .hero-trust{width:100%;justify-content:space-between}.hero-trust img{height:22px}
}
html[dir="rtl"] .hero-stats dd{direction:ltr;text-align:right}
.pill{white-space:nowrap}
@media (max-width:860px){.pill{padding:0 18px;font-size:14px;min-height:48px}}
@media (max-width:860px){.hero-shade,html[dir="rtl"] .hero-shade{background:linear-gradient(180deg,rgba(8,14,11,.55) 0%,rgba(8,14,11,.25) 16%,rgba(8,14,11,.62) 42%,rgba(8,14,11,.86) 75%)}}