@charset "UTF-8";

/* ==========================================================
   EJI INTERIORS — stylesheet
   Static site. No build step, no framework.
   ========================================================== */

/* ============================================================
   EJI INTERIORS — 2026 redesign
   Single-file static site. No build step, no framework.
   ------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Utilities / typography primitives
   4.  Reveal system
   5.  Header & navigation
   6.  Hero
   7.  Ticker
   8.  Intro
   9.  Services
   10. Projects
   11. Why us
   12. About
   13. Process
   14. Testimonials
   15. Contact
   16. Footer
   17. Project case-study overlay
   18. Responsive
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --ink:#1F2937;
  --ink-deep:#161C26;
  --ink-soft:#2B3644;
  --gold:#C89B3C;
  --gold-soft:#D9B463;
  --white:#FFFFFF;
  --grey:#F5F5F5;
  --grey-2:#EBEBE8;
  --muted:#6E7683;
  --muted-dark:rgba(255,255,255,.62);
  --line:rgba(31,41,55,.13);
  --line-dark:rgba(255,255,255,.16);

  --f-head:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  --pad:clamp(20px,5vw,80px);
  --maxw:1560px;
  --sec:clamp(80px,10vw,150px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:92px;
}

/* ---------- 2. Reset & base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:clamp(15.5px,.42vw + 14.4px,17.5px);
  line-height:1.75;
  font-weight:400;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block}
h1,h2,h3,h4,h5{
  font-family:var(--f-head);
  font-weight:500;
  line-height:1.06;
  letter-spacing:-.018em;
  margin:0;
  color:var(--ink);
}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
::selection{background:var(--gold);color:#fff}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:1px;
}
.skip{
  position:fixed;top:-100px;left:16px;z-index:9999;
  background:var(--ink);color:#fff;padding:12px 20px;
  font-family:var(--f-head);font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  transition:top .25s var(--ease);
}
.skip:focus{top:16px}

/* ---------- 3. Utilities ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sec)}

.eyebrow{
  font-family:var(--f-head);
  font-size:clamp(10.5px,.9vw,12px);
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 26px;
}
.eyebrow::before{
  content:"";width:clamp(28px,4vw,54px);height:1px;background:var(--gold);flex:none;
}
.eyebrow.on-dark{color:var(--gold-soft)}
.eyebrow.on-dark::before{background:var(--gold-soft)}

.h-display{font-size:clamp(38px,6.4vw,74px);font-weight:500;line-height:1.02;letter-spacing:-.028em}
.h-1{font-size:clamp(34px,5vw,62px);line-height:1.04;letter-spacing:-.026em}
.h-2{font-size:clamp(29px,3.6vw,46px);line-height:1.08;letter-spacing:-.022em}
.h-3{font-size:clamp(21px,1.9vw,29px);line-height:1.2;letter-spacing:-.012em}
.lede{font-size:clamp(17px,1.25vw,20px);line-height:1.72;color:var(--muted);font-weight:300}
.small-caps{
  font-family:var(--f-head);font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
}
.gold{color:var(--gold)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--f-head);font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  padding:19px 34px;
  border:1px solid transparent;
  position:relative;overflow:hidden;
  transition:color .45s var(--ease),border-color .45s var(--ease),background-color .45s var(--ease);
  white-space:nowrap;
}
.btn span{position:relative;z-index:2}
.btn::after{
  content:"";position:absolute;inset:0;z-index:1;
  transform:scaleX(0);transform-origin:right;
  transition:transform .55s var(--ease-out);
}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(1);transform-origin:left}

.btn-primary{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn-primary::after{background:var(--ink)}
.btn-primary:hover,.btn-primary:focus-visible{border-color:var(--ink)}

.hero .btn-primary{background:var(--ink);border-color:var(--ink)}
.hero .btn-primary::after{background:var(--gold)}
.hero .btn-primary:hover,.hero .btn-primary:focus-visible{border-color:var(--gold)}

.btn-ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-ink::after{background:var(--gold)}
.btn-ink:hover,.btn-ink:focus-visible{border-color:var(--gold)}

.btn-outline{border-color:var(--line);color:var(--ink)}
.btn-outline::after{background:var(--ink)}
.btn-outline:hover,.btn-outline:focus-visible{color:#fff;border-color:var(--ink)}

.btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost::after{background:#fff}
.btn-ghost:hover,.btn-ghost:focus-visible{color:var(--ink);border-color:#fff}

.btn .arw{transition:transform .45s var(--ease)}
.btn:hover .arw{transform:translateX(6px)}

/* Text link with animated rule */
.tlink{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--f-head);font-size:12.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:8px;position:relative;
}
.tlink::before{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;opacity:.25;
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease-out);
}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleX(1)}
.tlink svg{transition:transform .45s var(--ease)}
.tlink:hover svg{transform:translateX(6px)}

/* ---------- 4. Reveal system ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
[data-reveal].in{opacity:1;transform:none}

/* Image reveals: opacity only on the frame, zoom on the photo inside.
   These used to animate clip-path on the frame while the image inside
   animated its own transform, with will-change promoting the frame to its
   own compositing layer. That combination hits a long-standing Chrome bug
   where the clip is never repainted — the image stays invisible until some
   unrelated scroll forces an invalidation, which is why it looked like the
   photo "never loaded". No clip-path here any more: the crop comes from
   .img-mask's overflow:hidden, and the reveal uses the same opacity path as
   every other section. will-change names only what actually animates. */
[data-reveal="mask"]{
  opacity:0;transform:none;clip-path:none;
  transition:opacity 1s var(--ease-out);transition-delay:var(--d,0ms);
  will-change:opacity;
}
[data-reveal="mask"].in{opacity:1}

.img-mask{overflow:hidden;position:relative;background:var(--grey-2)}
/* Absolutely positioned so the image never depends on a percentage height
   resolving against an aspect-ratio parent (which collapses it to zero). */
.img-mask>img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.14);
  transition:transform 1s var(--ease-out),filter 1s var(--ease-out);
}
.img-mask.in>img{transform:scale(1)}

@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .img-mask>img{transform:none!important}
}

/* ---------- 5. Header ---------- */
.site-head{
  position:fixed;inset:0 0 auto;z-index:900;
  height:var(--nav-h);
  display:flex;align-items:center;
  transition:height .5s var(--ease),background-color .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-head .wrap{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.site-head::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,rgba(22,28,38,.62),rgba(22,28,38,0));
  transition:opacity .5s var(--ease);
}
.site-head.solid{
  height:70px;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--line);
}
.site-head.solid::before{opacity:0}

/* Logo. Two files: the white version reads over the hero photograph, the navy
   one takes over once the header turns solid. Swap the src on both to change it. */
.brand{position:relative;display:block;flex:none;line-height:0}
.brand img{
  display:block;width:auto;height:var(--logo-h,58px);
  transition:height .5s var(--ease),opacity .45s var(--ease);
}
.brand .brand-dark{position:absolute;top:0;left:0;opacity:0}
/* Source files are 1200x748, so even at these sizes the logo renders at a
   fraction of its native resolution — there is no upscaling and nothing to
   lose. Sizes are capped by the header height (92px, 70px when solid) so the
   mark keeps clear space above and below. */
.site-head{--logo-h:72px}
.site-head.solid{--logo-h:52px}
.site-head.solid .brand-light{opacity:0}
.site-head.solid .brand-dark{opacity:1}

.nav-main{display:flex;align-items:center;gap:clamp(20px,2.4vw,42px)}
.nav-main a{
  font-family:var(--f-head);font-size:12.5px;font-weight:500;
  letter-spacing:.15em;text-transform:uppercase;
  color:rgba(255,255,255,.9);
  padding:8px 0;position:relative;
  transition:color .4s var(--ease);
}
.nav-main a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.nav-main a:hover::after,.nav-main a:focus-visible::after,.nav-main a.active::after{transform:scaleX(1);transform-origin:left}
.nav-main a.active{color:#fff}
.solid .nav-main a{color:var(--ink-soft)}
.solid .nav-main a:hover,.solid .nav-main a.active{color:var(--ink)}

/* Language switch and the quote button travel together at the right edge.
   align-items:stretch keeps the shorter one matched to the taller. */
.head-actions{display:flex;align-items:stretch;gap:14px;flex:none}

.head-cta{
  font-family:var(--f-head);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  padding:14px 26px;border:1px solid rgba(255,255,255,.5);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;flex:none;
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.head-cta span{position:relative;z-index:2}
.head-cta::after{
  content:"";position:absolute;inset:0;background:var(--gold);z-index:1;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out);
}
.head-cta:hover::after,.head-cta:focus-visible::after{transform:scaleX(1);transform-origin:left}
.head-cta:hover,.head-cta:focus-visible{color:#fff;border-color:var(--gold)}
.solid .head-cta{border-color:var(--ink);color:var(--ink)}
.solid .head-cta:hover,.solid .head-cta:focus-visible{color:#fff;border-color:var(--gold)}

.burger{
  display:none;width:46px;height:46px;margin-right:-10px;
  position:relative;flex:none;
}
.burger i{
  position:absolute;left:11px;height:1.5px;width:24px;background:#fff;
  transition:transform .45s var(--ease),opacity .3s var(--ease),background-color .5s var(--ease),width .45s var(--ease);
}
.burger i:nth-child(1){top:18px}
.burger i:nth-child(2){top:24px;width:17px}
.burger i:nth-child(3){top:30px}
.solid .burger i{background:var(--ink)}
.burger[aria-expanded="true"] i{background:#fff;width:24px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Mobile drawer ---------- */
.drawer{
  position:fixed;inset:0;z-index:880;
  background:var(--ink-deep);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 20px) var(--pad) 40px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease-out);
  visibility:hidden;
}
.drawer.open{clip-path:inset(0 0 0 0);visibility:visible}
.drawer::before{
  content:"";position:absolute;inset:0;
  background:url("uploads/decor-drawer-bg.jpg") center/cover no-repeat;
  opacity:.13;filter:grayscale(1);
}
.drawer-nav{position:relative;display:flex;flex-direction:column;gap:2px}
.drawer-nav a{
  font-family:var(--f-head);font-weight:400;
  font-size:clamp(30px,9vw,46px);letter-spacing:-.02em;color:#fff;
  padding:11px 0;display:flex;align-items:baseline;gap:16px;
  border-bottom:1px solid rgba(255,255,255,.09);
  opacity:0;transform:translateY(24px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),color .3s var(--ease);
}
.drawer.open .drawer-nav a{opacity:1;transform:none}
.drawer.open .drawer-nav a:nth-child(1){transition-delay:.16s}
.drawer.open .drawer-nav a:nth-child(2){transition-delay:.22s}
.drawer.open .drawer-nav a:nth-child(3){transition-delay:.28s}
.drawer.open .drawer-nav a:nth-child(4){transition-delay:.34s}
.drawer.open .drawer-nav a:nth-child(5){transition-delay:.40s}
.drawer-nav a em{
  font-style:normal;font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--gold);
}
.drawer-nav a:hover{color:var(--gold-soft)}
.drawer-foot{
  position:relative;margin-top:44px;
  opacity:0;transform:translateY(20px);
  transition:opacity .6s var(--ease-out) .48s,transform .6s var(--ease-out) .48s;
}
.drawer.open .drawer-foot{opacity:1;transform:none}
.drawer-foot .btn{width:100%;justify-content:center}
.drawer-meta{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;
  font-size:13px;color:var(--muted-dark);
}
.drawer-meta a:hover{color:var(--gold-soft)}

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  min-height:100vh;
  display:flex;align-items:flex-end;
  overflow:hidden;
  background:var(--ink-deep);
}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
  transform:scale(1.16);
  animation:heroSettle 2.6s var(--ease-out) .1s forwards;
}
@keyframes heroSettle{to{transform:scale(1.02)}}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(15,20,28,.90) 0%,rgba(15,20,28,.55) 34%,rgba(15,20,28,.18) 66%,rgba(15,20,28,.42) 100%),
    linear-gradient(to right,rgba(15,20,28,.62) 0%,rgba(15,20,28,.12) 62%);
}
.hero-inner{
  position:relative;z-index:2;width:100%;
  padding-bottom:clamp(46px,7vw,96px);
  padding-top:calc(var(--nav-h) + 40px);
}
.hero-desc{
  font-family:var(--f-head);font-size:clamp(9.5px,.85vw,11.5px);font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.82);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:clamp(22px,3vw,34px);
}
.hero-desc s{text-decoration:none;color:var(--gold);font-size:1.1em;line-height:0}
.hero h1{
  color:#fff;max-width:19ch;
  font-size:clamp(35px,5.6vw,70px);
  font-weight:400;line-height:1.03;letter-spacing:-.03em;
}
.hero h1 b{font-weight:600}
.hero-sub{
  color:rgba(255,255,255,.8);max-width:56ch;font-weight:300;
  font-size:clamp(16px,1.15vw,19px);line-height:1.72;
  margin-top:clamp(20px,2.4vw,30px);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,3.6vw,44px)}

/* staged entrance */
.hero-stage{opacity:0;transform:translateY(30px);animation:heroUp 1.15s var(--ease-out) forwards}
.hero-stage.s1{animation-delay:.45s}
.hero-stage.s2{animation-delay:.62s}
.hero-stage.s3{animation-delay:.80s}
.hero-stage.s4{animation-delay:.98s}
@keyframes heroUp{to{opacity:1;transform:none}}

.hero-scroll{
  position:absolute;right:var(--pad);bottom:clamp(46px,7vw,96px);z-index:3;
  display:flex;align-items:center;gap:14px;
  font-family:var(--f-head);font-size:10px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(255,255,255,.7);
  writing-mode:vertical-rl;
  opacity:0;animation:heroUp 1.2s var(--ease-out) 1.25s forwards;
}
.hero-scroll .track{
  width:1px;height:64px;background:rgba(255,255,255,.28);
  position:relative;overflow:hidden;flex:none;
}
.hero-scroll .track i{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent,var(--gold));
  animation:scrollDrop 2.4s var(--ease) infinite;
}
@keyframes scrollDrop{0%{transform:translateY(-64px)}60%,100%{transform:translateY(64px)}}
@media (max-width:900px){.hero-scroll{display:none}}

/* ---------- 7. Ticker ---------- */
.ticker{
  background:var(--ink);color:#fff;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.ticker-track{
  display:flex;gap:0;width:max-content;
  animation:tick 42s linear infinite;
  /* Locked to LTR regardless of page language: under dir="rtl", flex would
     reverse the item order and the browser would anchor overflow to the
     right edge, which together cancel out the mirrored keyframe below and
     leave the strip crawling the same physical direction as English. */
  direction:ltr;
}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker-track span{
  display:inline-flex;align-items:center;gap:clamp(22px,3vw,40px);
  padding:19px 0;padding-inline-end:clamp(22px,3vw,40px);
  font-family:var(--f-head);font-size:12px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.68);
  white-space:nowrap;
}
.ticker-track span::after{content:"";width:5px;height:5px;background:var(--gold);flex:none}

/* ---------- 8. Intro ---------- */
.intro{background:var(--white)}
.intro-grid{
  display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(38px,6vw,96px);align-items:center;
}
.intro-copy .h-display{max-width:14ch}
.intro-copy .lede{margin-top:clamp(22px,2.6vw,32px);max-width:50ch}
.intro-sign{
  display:flex;align-items:center;gap:18px;margin-top:clamp(28px,3vw,40px);
  font-family:var(--f-head);font-size:12px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);
}
.intro-sign::before{content:"";width:52px;height:1px;background:var(--gold);flex:none}
.intro-media{position:relative}
.intro-media .img-mask{aspect-ratio:4/5}
.intro-media .stamp{
  position:absolute;left:-6%;bottom:-6%;
  background:var(--ink);color:#fff;padding:clamp(22px,2.6vw,34px) clamp(24px,3vw,42px);
  min-width:min(280px,72%);
}
.intro-media .stamp b{
  display:block;font-family:var(--f-head);font-weight:300;
  font-size:clamp(40px,4.4vw,60px);line-height:1;letter-spacing:-.03em;color:#fff;
  /* Numerals read left-to-right even inside Arabic text, but the "+" sits in
     its own inline element — left to the ambient RTL paragraph direction,
     the bidi algorithm swaps it in front of the number ("+40" instead of
     "40+"). Isolating this run as LTR keeps the reading order correct. */
  direction:ltr;unicode-bidi:isolate;
}
.intro-media .stamp b i{font-style:normal;color:var(--gold)}
.intro-media .stamp em{
  font-style:normal;display:block;margin-top:12px;
  font-family:var(--f-head);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.62);line-height:1.7;
}

/* stat strip */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);margin-top:var(--sec);
}
/* Logical (not physical) properties on purpose: CSS grid re-flows these
   items start-to-end automatically under dir="rtl", so the divider and the
   outer edge's padding have to follow the same start/end edges or they land
   on the wrong side of the mirrored row. */
.stats li{padding:clamp(30px,3.4vw,46px) clamp(16px,2vw,32px) 0;border-inline-end:1px solid var(--line)}
.stats li:first-child{padding-inline-start:0}
.stats li:last-child{border-inline-end:0}
.stats b{
  display:block;font-family:var(--f-head);font-weight:300;
  font-size:clamp(38px,4.6vw,64px);line-height:1;letter-spacing:-.035em;color:var(--ink);
  /* Same fix as .intro-media .stamp b: keeps "40+" from flipping to "+40"
     under the ambient RTL paragraph direction. */
  direction:ltr;unicode-bidi:isolate;
}
.stats b i{font-style:normal;color:var(--gold);font-size:.55em;vertical-align:top;line-height:1.6}
.stats em{
  font-style:normal;display:block;margin-top:14px;
  font-family:var(--f-head);font-size:11.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);line-height:1.7;
}

/* ---------- 9. Services ---------- */
.services{background:var(--grey);position:relative}
.sec-head{margin-bottom:clamp(44px,5vw,72px)}
.sec-head .h-1{max-width:none}

.svc-list{border-top:1px solid var(--line)}
.svc{
  display:grid;
  grid-template-columns:96px minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(16px,2.6vw,44px);align-items:center;
  padding:clamp(26px,3vw,40px) 0;
  border-bottom:1px solid var(--line);
  position:relative;cursor:default;
  transition:padding-left .6s var(--ease),background-color .6s var(--ease);
}
.svc::before{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease-out);
}
.svc:hover::before{transform:scaleX(1)}
.svc:hover{padding-left:clamp(8px,1.4vw,22px)}
.svc-num{
  font-family:var(--f-head);font-weight:300;font-size:clamp(28px,2.6vw,38px);
  letter-spacing:-.02em;color:var(--muted);opacity:.45;
  transition:color .5s var(--ease),opacity .5s var(--ease);
}
.svc:hover .svc-num{color:var(--gold);opacity:1}
.svc-name{
  font-family:var(--f-head);font-weight:500;
  font-size:clamp(22px,2.5vw,36px);line-height:1.12;letter-spacing:-.02em;
  transition:transform .6s var(--ease);
}
.svc:hover .svc-name{transform:translateX(4px)}
.svc-desc{color:var(--muted);font-size:15.5px;line-height:1.72;font-weight:300;max-width:52ch}

/* ---------- 10. Projects ---------- */
.projects{background:var(--white)}
/* Projects and Why-us are both white and adjacent, so the usual double
   section padding between them reads as a void rather than as rhythm.
   Tighten this one junction (see the matching .why rule). */
.projects{padding-bottom:clamp(46px,5vw,78px)}
/* two-up project card grid */
.proj-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.8vw,28px);
  margin-top:clamp(40px,4.5vw,64px);
}
.proj-grid .card .img-mask{aspect-ratio:4/3}
.proj-grid .card-body{padding:clamp(22px,2.4vw,34px)}
.proj-grid .card-body h3{font-size:clamp(21px,1.9vw,29px);font-weight:500;letter-spacing:-.018em;line-height:1.14;color:#fff}
.proj-grid .card-body p{font-size:14px}
.card-tag{
  position:absolute;left:0;top:0;z-index:3;
  background:var(--white);color:var(--ink);
  font-family:var(--f-head);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;padding:11px 18px;
}
.card-arrow{
  position:absolute;right:clamp(18px,2vw,26px);bottom:clamp(18px,2vw,26px);z-index:4;
  width:50px;height:50px;background:var(--gold);color:#fff;
  display:grid;place-items:center;
  opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .5s var(--ease-out);
}
.card:hover .card-arrow,.card:focus-visible .card-arrow{opacity:1;transform:none}

/* project cards (used by the two-up grid and the related row in a case study) */
.card{position:relative;display:block;overflow:hidden;background:var(--grey-2)}
.card .img-mask{aspect-ratio:4/3}
.card img{transition:transform 1.3s var(--ease-out)}
.card:hover img,.card:focus-visible img{transform:scale(1.06)}
.card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(15,20,28,.88) 0%,rgba(15,20,28,.3) 42%,rgba(15,20,28,0) 72%);
  transition:opacity .6s var(--ease);opacity:.92;
}
.card:hover::after{opacity:1}
.card-body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(20px,2.2vw,32px);color:#fff;
}
.card-body em{
  font-style:normal;display:block;
  font-family:var(--f-head);font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-soft);margin-bottom:11px;
}
.card-body h3,.card-body h4{
  color:#fff;font-size:clamp(18px,1.55vw,24px);font-weight:500;letter-spacing:-.015em;line-height:1.16;
}
.card-body p{
  font-size:13px;color:rgba(255,255,255,.7);margin-top:8px;
  display:flex;align-items:center;gap:10px;
}
.card-line{
  position:absolute;left:clamp(20px,2.2vw,32px);right:clamp(20px,2.2vw,32px);bottom:0;
  height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease-out);z-index:3;
}
.card:hover .card-line{transform:scaleX(1)}

.projects-cta{
  background:var(--ink);color:#fff;
  margin-top:clamp(40px,4.5vw,64px);
  padding:clamp(30px,3.6vw,54px) clamp(26px,3.4vw,56px);
  display:flex;flex-wrap:wrap;gap:24px 44px;
  align-items:center;justify-content:space-between;
}
.projects-cta h3{
  color:#fff;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(21px,2.1vw,31px);line-height:1.22;max-width:22ch;
}
.projects-cta p{
  margin-top:12px;color:var(--muted-dark);
  font-size:15px;font-weight:300;line-height:1.7;max-width:46ch;
}

/* ---------- 11. Why us ---------- */
.why{background:var(--white);padding-top:clamp(46px,5vw,78px)}

/* full-width cinematic band with the pull-quote set on the image */
.why-band{position:relative;overflow:hidden;background:var(--ink)}
.why-band .img-mask{aspect-ratio:21/9}
.why-band .veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(15,20,28,.88) 0%,rgba(15,20,28,.42) 46%,rgba(15,20,28,.12) 100%);
}
.why-quote{
  position:absolute;z-index:3;
  left:clamp(22px,3.2vw,60px);right:clamp(22px,3.2vw,60px);
  bottom:clamp(22px,3vw,52px);max-width:26ch;
}
.why-quote p{
  font-family:var(--f-head);font-weight:300;color:#fff;
  font-size:clamp(19px,2.3vw,36px);line-height:1.28;letter-spacing:-.022em;
}
.why-quote em{
  font-style:normal;display:flex;align-items:center;gap:14px;margin-top:clamp(14px,1.6vw,22px);
  font-family:var(--f-head);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-soft);
}
.why-quote em::before{content:"";width:38px;height:1px;background:var(--gold);flex:none}

/* below the band: the headline credential beside the four reasons */
.why-cols{
  display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(32px,5vw,84px);align-items:start;
  margin-top:clamp(46px,5.5vw,84px);
}
.why-big{
  display:block;font-family:var(--f-head);font-weight:300;
  font-size:clamp(80px,10vw,152px);line-height:.8;letter-spacing:-.055em;color:var(--ink);
}
.why-big i{font-style:normal;color:var(--gold);font-size:.36em;vertical-align:top;line-height:2.1}
.why-headline h3{
  font-size:clamp(23px,2.3vw,33px);font-weight:500;letter-spacing:-.02em;
  margin-top:clamp(16px,1.8vw,24px);
}
.why-headline p{
  margin-top:16px;color:var(--muted);font-weight:300;
  font-size:clamp(15.5px,1.1vw,17.5px);line-height:1.76;max-width:42ch;
}
.why-since{
  display:flex;align-items:center;gap:16px;margin-top:clamp(20px,2.2vw,30px);
  font-family:var(--f-head);font-size:11.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.why-since::before{content:"";width:clamp(30px,4vw,60px);height:1px;background:var(--gold);flex:none}

.why-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,3vw,44px) clamp(24px,3vw,52px);
}
.why-cell{padding-top:clamp(20px,2.2vw,28px);border-top:1px solid var(--line);position:relative}
.why-cell::before{
  content:"";position:absolute;left:0;top:-1px;height:1px;width:100%;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease-out);
}
.why-cell:hover::before{transform:scaleX(1)}
.why-cell b{
  display:block;font-family:var(--f-head);font-weight:300;
  font-size:clamp(24px,2.2vw,32px);line-height:1;letter-spacing:-.03em;
  color:var(--muted);opacity:.5;margin-bottom:16px;
  transition:color .5s var(--ease),opacity .5s var(--ease);
}
.why-cell:hover b{color:var(--gold);opacity:1}
.why-cell h3{font-size:clamp(17.5px,1.45vw,22px);font-weight:500;letter-spacing:-.012em}
.why-cell p{margin-top:11px;color:var(--muted);font-size:14.5px;line-height:1.7;font-weight:300}

/* ---------- 12. About ---------- */
.about{background:var(--grey)}
.about-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(34px,5vw,90px);align-items:center}
.about-media{position:relative}
.about-media .img-mask.tall{aspect-ratio:3/4}
.about-media .img-mask.small{
  position:absolute;right:-8%;bottom:-9%;width:52%;aspect-ratio:1/1;
  border:10px solid var(--grey);
}
.about-copy .h-1{max-width:15ch}
.about-copy .lede{margin-top:clamp(20px,2.4vw,28px);max-width:52ch;color:var(--ink-soft)}
.cap-cols{
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,44px);
  margin-top:clamp(28px,3vw,40px);border-top:1px solid var(--line);
}
.cap-cols li{
  padding:13px 0;border-bottom:1px solid var(--line);
  font-family:var(--f-head);font-size:13.5px;font-weight:500;letter-spacing:.02em;
  display:flex;align-items:center;gap:12px;
}
.cap-cols li::before{content:"";width:5px;height:5px;background:var(--gold);flex:none}
.mission{
  margin-top:clamp(28px,3vw,42px);padding-left:clamp(20px,2.4vw,32px);
  border-left:1px solid var(--gold);
  font-family:var(--f-head);font-weight:300;
  font-size:clamp(18px,1.7vw,25px);line-height:1.44;letter-spacing:-.015em;color:var(--ink);
}
.about-sign{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px);margin-top:clamp(26px,3vw,38px)}
.about-sign div b{
  display:block;font-family:var(--f-head);font-size:14.5px;font-weight:600;letter-spacing:.02em;
}
.about-sign div em{
  font-style:normal;font-size:11.5px;font-family:var(--f-head);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}

/* ---------- Clients ---------- */
/* Bottom padding trimmed below the section default: a dense logo grid
   reads as "finished" much sooner than a full block of copy, so the usual
   --sec gap plus Process's own top padding left a dead gap between them. */
.clients{background:var(--white);padding-bottom:clamp(50px,5vw,80px)}
.client-grid{
  display:grid;grid-template-columns:repeat(8,1fr);
  gap:clamp(6px,1.4vw,20px);
  margin-top:clamp(36px,4.4vw,60px);
}
.client-grid li{
  background:var(--grey);
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:8/5;padding:clamp(12px,1.3vw,20px);
  transition:background-color .35s var(--ease),transform .35s var(--ease);
}
.client-grid li:hover{background:var(--grey-2);transform:translateY(-3px)}
.client-grid img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
}

/* ---------- 13. Process ---------- */
.process{background:var(--white)}
.steps{position:relative;margin-top:clamp(44px,5vw,72px)}
.steps-line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.steps-line i{
  position:absolute;left:0;top:0;height:1px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease-out);
}
.steps.in .steps-line i{transform:scaleX(1)}
.steps-row{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,34px)}
.step{padding-top:clamp(26px,3vw,40px);position:relative}
.step::before{
  content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;background:var(--white);
  border:1px solid var(--gold);transform:rotate(45deg);
  transition:background-color .5s var(--ease);
}
.step:hover::before{background:var(--gold)}
.step b{
  display:block;font-family:var(--f-head);font-weight:600;font-size:11.5px;
  letter-spacing:.22em;color:var(--gold);margin-bottom:16px;
}
.step h3{font-size:clamp(18px,1.5vw,23px);font-weight:500;letter-spacing:-.012em}
.step p{margin-top:12px;color:var(--muted);font-size:14.5px;line-height:1.7;font-weight:300}

/* ---------- 14. Testimonials ---------- */
.quotes{
  background:var(--ink);color:#fff;position:relative;overflow:hidden;
  padding-block:clamp(66px,7.5vw,112px);
}
.quotes h2{color:#fff}
.quotes::before{
  content:"";position:absolute;inset:0;
  background:url("uploads/decor-quotes-bg.jpg") center/cover no-repeat;
  opacity:.08;filter:grayscale(1);
}
.quotes .wrap{position:relative;text-align:center}
.q-label{justify-content:center;margin:0 0 clamp(30px,3.6vw,50px)}
/* A CSS-grid stack: every .q-item shares the same grid cell, so the row
   auto-sizes to the tallest quote (visible or not) instead of a guessed
   fixed height — a longer quote can never overflow into the nav below. */
.q-stage{display:grid}
.q-item{
  grid-area:1/1;margin:0;
  display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
  pointer-events:none;
}
.q-item.on{opacity:1;transform:none;pointer-events:auto}
.q-item blockquote{
  margin:0;font-family:var(--f-head);font-weight:300;color:#fff;
  font-size:clamp(27px,4vw,58px);line-height:1.2;letter-spacing:-.028em;
  max-width:34ch;margin-inline:auto;
}
/* literal curly quotes — avoids any CSS/encoding escape ambiguity */
.q-item blockquote::before{content:"“";color:var(--gold)}
.q-item blockquote::after{content:"”";color:var(--gold)}
.q-item figcaption{
  display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(20px,2.4vw,30px);
  font-family:var(--f-head);font-size:10.5px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.58);
}
.q-item figcaption::before{content:"";width:36px;height:1px;background:var(--gold);flex:none}

.q-nav{
  display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.4vw,32px);
  margin-top:clamp(20px,2.2vw,32px);
}
.q-arrows{display:flex;gap:8px}
.q-arrows button{
  width:50px;height:50px;border:1px solid var(--line-dark);display:grid;place-items:center;color:#fff;
  transition:background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.q-arrows button:hover{background:var(--gold);border-color:var(--gold)}

/* ---------- 15. Contact ---------- */
.contact{background:var(--white)}
/* Two rows: the heading occupies row 1 on its own, then the supporting copy and
   the form both start on row 2 — so the form's first field lines up with the
   first line of the copy, whatever size the heading renders at. */
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  column-gap:clamp(38px,5vw,92px);
  row-gap:clamp(18px,2vw,26px);
}
.contact-head{grid-column:1;grid-row:1}
.contact-aside{grid-column:1;grid-row:2}
.contact-main{grid-column:2;grid-row:2}
.contact-aside .lede{max-width:40ch}

/* address, phone and email share one treatment: gold label, value beneath,
   hairline between rows */
.contact-list{
  margin-top:clamp(30px,3.4vw,46px);
  border-top:1px solid var(--line);
}
.contact-list li{
  padding:clamp(18px,2vw,24px) 0;
  border-bottom:1px solid var(--line);
}
.contact-list b{
  display:block;font-family:var(--f-head);font-size:10.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  margin-bottom:12px;
}
.contact-list span{
  display:block;color:var(--muted);font-size:15.5px;line-height:1.72;font-weight:300;
}
.contact-list a{
  font-size:16.5px;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:3px;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.contact-list a:hover{color:var(--gold);border-color:var(--gold)}

/* overflow:hidden contains the honeypot field below: it sits at left:-9999px
   with no positioned ancestor, so without this the -9999px offset inflates
   the whole document's scrollable width and causes a horizontal scrollbar. */
.form{margin-top:clamp(6px,1vw,14px);overflow:hidden}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,2.6vw,40px)}
.field{position:relative;margin-bottom:clamp(20px,2.4vw,30px)}
.field label{
  display:block;font-family:var(--f-head);font-size:10.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:11px;
}
.field label .req{color:var(--gold)}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--f-body);font-size:16px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:11px 0;border-radius:0;-webkit-appearance:none;appearance:none;
  transition:border-color .4s var(--ease);
}
.field textarea{resize:vertical;min-height:112px;line-height:1.7}
.field select{
  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='%236E7683' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;cursor:pointer;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-bottom-color:var(--gold)}
.field input::placeholder,.field textarea::placeholder{color:#B4B9C1}
.field.err input,.field.err select,.field.err textarea{border-bottom-color:#B4472F}
.field .msg{
  display:none;margin-top:8px;font-size:12.5px;color:#B4472F;
  font-family:var(--f-head);font-weight:500;letter-spacing:.04em;
}
.field.err .msg{display:block}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-top:clamp(12px,1.6vw,20px)}
.form-done{
  display:none;border-top:2px solid var(--gold);padding:clamp(26px,3vw,40px);
  background:var(--grey);
}
.form-done.on{display:block}
.form-done b{display:block;font-family:var(--f-head);font-size:clamp(19px,1.7vw,25px);font-weight:500;letter-spacing:-.015em}
.form-done p{margin-top:12px;color:var(--muted);font-size:15px;line-height:1.7}
/* Same panel, error colour. Shown when the send failed and the form is still
   sitting above it waiting for a retry. */
.form-done.err{border-top-color:#B4472F;margin-top:clamp(18px,2vw,26px)}
.form-done.err b{color:#B4472F}

/* Spam trap: off the screen but not display:none — bots skip hidden inputs. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* While the enquiry is in flight the submit button is disabled; without this
   it would still look and animate like a live button. */
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn[disabled]:hover::after{transform:none}

/* ---------- 16. Footer ---------- */
.site-foot{
  background:var(--ink-deep);color:#fff;
  padding-block:clamp(56px,6.5vw,92px);
}
.foot-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(34px,5vw,80px);align-items:center;
}
.foot-logo img{height:clamp(70px,6.5vw,96px)}
/* Logical end-alignment, so it sits right in English and left in Arabic
   without needing a separate [dir="rtl"] override. */
.foot-copy{
  justify-self:end;text-align:end;
  color:var(--muted-dark);font-weight:300;
  font-size:clamp(13px,1vw,14.5px);letter-spacing:.03em;
}
.foot-visit{justify-self:end;text-align:right}
.foot-visit h4{
  color:#fff;font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  margin-bottom:clamp(16px,1.8vw,22px);
}
.foot-visit address{
  font-style:normal;color:var(--muted-dark);
  font-size:clamp(15px,1.15vw,17px);line-height:1.85;font-weight:300;
}
.foot-map{
  display:inline-flex;align-items:center;gap:11px;margin-top:20px;
  font-family:var(--f-head);font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;
  padding-bottom:7px;border-bottom:1px solid var(--line-dark);
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.foot-map:hover{color:var(--gold-soft);border-color:var(--gold)}
.foot-map svg{transition:transform .4s var(--ease)}
.foot-map:hover svg{transform:translateX(5px)}

/* Floating controls share one bottom-right stack. WhatsApp sits on top; the
   back-to-top button collapses to zero height when hidden, so WhatsApp drops
   into the corner instead of leaving a gap. */
.float-stack{
  position:fixed;right:clamp(16px,2vw,32px);bottom:clamp(16px,2vw,32px);z-index:700;
  display:flex;flex-direction:column;align-items:flex-end;
}
.wa{
  width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;
  display:grid;place-items:center;flex:none;
  box-shadow:0 10px 26px -8px rgba(15,20,28,.45);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background-color .4s var(--ease);
}
.wa:hover,.wa:focus-visible{
  background:#1FBB57;transform:translateY(-3px);
  box-shadow:0 16px 34px -10px rgba(15,20,28,.55);
}
.totop{
  width:50px;height:0;margin-top:0;overflow:hidden;
  background:var(--ink);color:#fff;display:grid;place-items:center;
  opacity:0;pointer-events:none;flex:none;
  transition:height .4s var(--ease),margin-top .4s var(--ease),
             opacity .4s var(--ease),background-color .4s var(--ease);
}
.totop.on{height:50px;margin-top:12px;opacity:1;pointer-events:auto}
.totop:hover{background:var(--gold)}

/* ---------- 19. Case-study overlay ---------- */
/* The case-study overlay is gone: projects are real pages now, rendered by
   projects/index.php. Everything below still describes that page - only the
   fixed-overlay shell and its close button were removed. */
.case-hero{position:relative;height:min(74vh,760px);overflow:hidden;background:var(--ink)}
.case-hero img{width:100%;height:100%;object-fit:cover}
.case-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(15,20,28,.9),rgba(15,20,28,.15) 62%,rgba(15,20,28,.35));
}
.case-hero-copy{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding-bottom:clamp(34px,4vw,60px);
}
/* h1 on the standalone project pages, h2 when it was an overlay heading. */
.case-hero-copy h1,.case-hero-copy h2{color:#fff;font-size:clamp(30px,4.6vw,62px);letter-spacing:-.028em;max-width:18ch}
.case-hero-copy .eyebrow{color:var(--gold-soft)}
.case-hero-copy .eyebrow::before{background:var(--gold-soft)}
.case-body{padding-block:clamp(46px,6vw,90px)}
.case-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(30px,5vw,80px)}
.case-facts{border-top:1px solid var(--line)}
.case-facts div{display:flex;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid var(--line)}
.case-facts dt{
  font-family:var(--f-head);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);padding-top:3px;
}
.case-facts dd{margin:0;font-size:15px;text-align:right;max-width:60%}
.case-text p{color:var(--muted);font-size:clamp(16px,1.15vw,18px);line-height:1.82;font-weight:300;margin-bottom:20px}
.case-text p:first-child{color:var(--ink);font-size:clamp(18px,1.5vw,23px);line-height:1.6;font-family:var(--f-head);font-weight:300;letter-spacing:-.012em}
.case-scope{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.case-scope span{
  font-family:var(--f-head);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);padding:9px 16px;color:var(--ink-soft);
}
.case-gal{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.4vw,22px);margin-top:clamp(40px,5vw,72px)}
.case-gal figure{margin:0;overflow:hidden;background:var(--grey-2);grid-column:span 2}
.case-gal figure:nth-child(3n+1){grid-column:span 4}
.case-gal img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform 1.2s var(--ease-out)}
.case-gal figure:hover img{transform:scale(1.05)}
.case-next{border-top:1px solid var(--line);margin-top:clamp(46px,6vw,84px);padding-top:clamp(30px,3.4vw,48px)}
.case-next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,26px);margin-top:26px}
.case-cta{
  background:var(--ink);color:#fff;margin-top:clamp(46px,6vw,84px);
  padding:clamp(38px,5vw,72px);display:flex;flex-wrap:wrap;gap:26px;
  align-items:center;justify-content:space-between;
}
.case-cta h3{color:#fff;max-width:18ch;font-size:clamp(22px,2.4vw,34px)}

/* ---------- 18. Responsive ---------- */
@media (max-width:1180px){
  .svc{grid-template-columns:70px minmax(0,1fr) minmax(0,1fr);gap:20px}
}
@media (max-width:1024px){
  :root{--nav-h:76px}
  /* The header is shorter here, so the logo scales down with it to keep the
     same clear space above and below. */
  .site-head{--logo-h:60px}
  .site-head.solid{--logo-h:48px}
  .nav-main{display:none}
  .head-cta{display:none}
  .head-actions{display:none}
  .burger{display:block}
  .intro-grid,.about-grid,.contact-grid,.case-cols,.why-cols{grid-template-columns:1fr}
  .contact-head,.contact-aside,.contact-main{grid-column:auto;grid-row:auto}

  .why-band .img-mask{aspect-ratio:16/9}
  .about-media{order:2;max-width:560px}
  .about-media .img-mask.small{width:44%;right:-4%;bottom:-6%}
  .steps-row{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stats li{border-bottom:1px solid var(--line);padding-bottom:clamp(24px,3vw,34px)}
  .stats li:nth-child(2n){border-inline-end:0}
  .stats li:nth-child(3){padding-inline-start:0}
  .intro-media .stamp{left:0;bottom:0;position:relative;margin-top:0}
  .intro-media{display:grid;gap:0}
  .client-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:860px){
  .case-gal{grid-template-columns:1fr 1fr}
  .case-gal figure,.case-gal figure:nth-child(3n+1){grid-column:span 1}
  .case-next-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .proj-grid{grid-template-columns:1fr}
  .hero{min-height:92svh}
  .svc{
    grid-template-columns:auto 1fr;
    grid-template-areas:"num name" "desc desc";
    gap:6px 18px;align-items:baseline;
  }
  .svc-num{grid-area:num}
  .svc-name{grid-area:name}
  .svc-desc{grid-area:desc;margin-top:10px}
  .steps-row{grid-template-columns:1fr}
  .steps-line{left:0;right:auto;top:0;bottom:0;width:1px;height:auto}
  .steps-line i{width:1px;height:100%;transform:scaleY(0);transform-origin:top}
  .steps.in .steps-line i{transform:scaleY(1)}
  .step{padding-top:0;padding-left:30px;padding-bottom:30px}
  .step::before{top:7px;left:-4px}
  .form-grid{grid-template-columns:1fr;gap:0}
  .why-row{grid-template-columns:1fr}
  .why-band .img-mask{aspect-ratio:4/3}
  .why-quote{max-width:none}
  .why-cell::before{display:none}
  .cap-cols{grid-template-columns:1fr}
  .case-hero{height:min(62vh,540px)}
  .btn{width:100%;justify-content:center}
  .hero-actions .btn,.form-foot .btn{width:auto}
  .client-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){
  .case-gal,.case-next-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .foot-copy{justify-self:start;text-align:start}
  .foot-visit{justify-self:start;text-align:left}
  .stats{grid-template-columns:1fr}
  .stats li{border-inline-end:0;padding-inline-start:0}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;justify-content:center}
  /* Shown on phones too, but pinned flush to the corner (no negative right
     offset) — bleeding it past .about-media's edge the way the desktop
     version does would extend the page's scrollable width sideways. */
  .about-media .img-mask.small{width:42%;right:0;bottom:-14px;border-width:8px}
  .projects-cta{flex-direction:column;align-items:flex-start}
  .client-grid{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   19. Bilingual — language switch + Arabic / RTL
   ============================================================ */
.lang-switch{
  font-family:var(--f-head);font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  padding:0 18px;border:1px solid rgba(255,255,255,.42);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  flex:none;transition:color .4s var(--ease),border-color .4s var(--ease),background-color .4s var(--ease);
}
.lang-switch:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.solid .lang-switch{border-color:var(--line);color:var(--ink)}
.solid .lang-switch:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.drawer-lang{
  display:none;width:100%;margin-bottom:14px;padding:16px;
  border-color:rgba(255,255,255,.28);
}
@media (max-width:1024px){
  .lang-switch{display:none}
  .drawer-lang{display:block}
}

/* ---------- Arabic typography ---------- */
[lang="ar"] body,
[lang="ar"] .lede,
[lang="ar"] p,
[lang="ar"] li,
[lang="ar"] address,
[lang="ar"] input,
[lang="ar"] select,
[lang="ar"] textarea{font-family:'Tajawal',var(--f-body)}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] h3,[lang="ar"] h4,
[lang="ar"] .brand-mark,[lang="ar"] .btn,[lang="ar"] .eyebrow,
[lang="ar"] .nav-main a,[lang="ar"] .why-big,[lang="ar"] .svc-name,
[lang="ar"] .q-item blockquote,[lang="ar"] .foot-phones a{
  font-family:'Tajawal',var(--f-head);letter-spacing:0;
}
/* Arabic script has no uppercase and tight tracking hurts legibility */
[lang="ar"] .eyebrow,[lang="ar"] .small-caps,[lang="ar"] .nav-main a,
[lang="ar"] .btn,[lang="ar"] .tlink,[lang="ar"] .card-tag,[lang="ar"] .card-body em,
[lang="ar"] .why-since,[lang="ar"] .step b,[lang="ar"] .q-item figcaption,
[lang="ar"] .contact-list b,[lang="ar"] .foot-visit h4,[lang="ar"] .foot-map,
[lang="ar"] .field label,[lang="ar"] .case-scope span,[lang="ar"] .case-facts dt,
[lang="ar"] .lang-switch,[lang="ar"] .head-cta,[lang="ar"] .feat-tag{
  text-transform:none;letter-spacing:.02em;
}
[lang="ar"] h1,[lang="ar"] h2,[lang="ar"] .h-display,[lang="ar"] .h-1,[lang="ar"] .h-2{
  line-height:1.3;
}
[lang="ar"] .q-item blockquote{line-height:1.45}

/* ---------- RTL layout ---------- */
[dir="rtl"] .eyebrow::before{order:2}
[dir="rtl"] .svc:hover{padding-left:0;padding-right:clamp(8px,1.4vw,22px)}
[dir="rtl"] .svc::before,[dir="rtl"] .why-cell::before,[dir="rtl"] .q-col::before,
[dir="rtl"] .steps-line i,[dir="rtl"] .card-line,[dir="rtl"] .tlink::after,
[dir="rtl"] .nav-main a::after{transform-origin:right}
[dir="rtl"] .svc:hover::before,[dir="rtl"] .why-cell:hover::before,
[dir="rtl"] .card:hover .card-line,[dir="rtl"] .tlink:hover::after,
[dir="rtl"] .nav-main a:hover::after,[dir="rtl"] .nav-main a.active::after{transform:scaleX(1)}
[dir="rtl"] .svc:hover .svc-name{transform:translateX(-4px)}
[dir="rtl"] .btn:hover .arw,[dir="rtl"] .tlink:hover svg,
[dir="rtl"] .foot-map:hover svg{transform:translateX(-6px)}
[dir="rtl"] .arw svg,[dir="rtl"] .tlink svg,[dir="rtl"] .foot-map svg,
[dir="rtl"] .card-arrow svg,[dir="rtl"] .q-arrows button svg{transform:scaleX(-1)}
[dir="rtl"] .card-tag{left:auto;right:0}
[dir="rtl"] .card-arrow{right:auto;left:clamp(18px,2vw,26px)}
[dir="rtl"] .why-quote{left:auto;right:clamp(22px,3.2vw,60px)}
[dir="rtl"] .mission{border-left:0;border-right:1px solid var(--gold);padding-left:0;padding-right:clamp(20px,2.4vw,32px)}
[dir="rtl"] .foot-visit{justify-self:start;text-align:left}
[dir="rtl"] .case-facts dd,[dir="rtl"] .feat-meta dd{text-align:left}
[dir="rtl"] .float-stack{right:auto;left:clamp(16px,2vw,32px)}
/* The scroll cue is vertical type — Arabic does not set that way, so it is
   dropped in RTL rather than rotated */
[dir="rtl"] .hero-scroll{display:none}
[dir="rtl"] .field select{background-position:left 2px center}
[dir="rtl"] .intro-media .stamp{left:auto;right:-6%}
[dir="rtl"] .about-media .img-mask.small{right:auto;left:-8%}
/* RTL anchors the track to the right edge and it overflows leftwards, so the
   loop has to travel the other way or it slides straight out of the strip */
@keyframes tick-rtl{to{transform:translateX(50%)}}
[dir="rtl"] .ticker-track{animation-name:tick-rtl}
[dir="rtl"] .drawer-nav a em{order:2}
@media (max-width:1024px){
  [dir="rtl"] .about-media .img-mask.small{left:-4%;right:auto}
  /* The desktop overlay offset (right:-6%) has to be cleared here too — equal
     specificity plus later source order would otherwise let it win over the
     mobile reset above and leave the stacked stamp shifted off-position. */
  [dir="rtl"] .intro-media .stamp{left:0;right:auto}
}
@media (max-width:720px){
  [dir="rtl"] .steps-line{left:auto;right:0}
  [dir="rtl"] .step{padding-left:0;padding-right:30px}
  [dir="rtl"] .step::before{left:auto;right:-4px}
}
@media (max-width:560px){
  [dir="rtl"] .about-media .img-mask.small{left:0;right:auto}
}