/* ============================ TOKENS ============================ */
:root{
  --wine:#36000c; --wine-deep:#36000c;
  --cream:#ffffff; --bone:#f5f5f5; --sand:#f5f5f5; --taupe:#82766b;
  --ink:#4f4f4f; --ink-soft:#82766b;
  --acc:#82766b; --off:#f5f5f5;
  --line:rgba(79,79,79,.16);
  --f-display:'Avenir Next Arabic','Avenir Next','Avenir','Cairo',system-ui,-apple-system,sans-serif;
  --f-body:'Avenir Next Arabic','Avenir Next','Avenir','Cairo',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --maxw:1280px; --pad: clamp(20px, 5vw, 80px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--f-body);font-weight:300;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
::selection{background:var(--wine);color:var(--cream)}

.latin{font-family:var(--f-display)!important;font-weight:300;direction:ltr;unicode-bidi:isolate;letter-spacing:.18em}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.eyebrow{font-family:var(--f-body);font-weight:500;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--wine);display:inline-flex;align-items:center;gap:.7em}
html[lang="ar"] .eyebrow{text-transform:none;letter-spacing:.04em;font-size:.95rem}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--taupe);opacity:.7}
.fold{height:1px;border-top:1px dashed var(--taupe);opacity:.45}

/* ===================== ATMOSPHERE OVERLAYS ===================== */
.grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.cursor{position:fixed;top:0;left:0;width:34px;height:34px;border:1px solid var(--acc);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:9500;transition:width .3s var(--ease),height .3s var(--ease),background .3s var(--ease),opacity .3s;mix-blend-mode:multiply;opacity:0}
.cursor.dot{width:7px;height:7px;background:var(--acc);border-color:transparent}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ============================ 3D INTRO ============================ */
#intro{position:fixed;inset:0;z-index:9800;overflow:hidden;
  background:
    radial-gradient(100% 62% at 50% 104%, #5c0a1a 0%, #36000c 30%, rgba(54,0,12,0) 66%),
    linear-gradient(180deg, #140004 0%, #240008 22%, #36000c 52%, #300009 72%, #240007 88%, #1a0005 100%)}
#introCanvas{position:absolute;inset:0}
#introCanvas canvas{display:block;width:100%!important;height:100%!important}
.intro-ui{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;color:var(--cream);pointer-events:none;padding:24px}
#introCard{max-width:820px;will-change:transform,opacity}
#introCard .kicker{font-family:var(--f-display);font-size:clamp(4rem,14vw,9.5rem);letter-spacing:.2em;padding-inline-start:.2em;line-height:1;text-shadow:0 4px 40px rgba(0,0,0,.35)}
#introCard .sub{margin-top:1.1rem;letter-spacing:.42em;text-transform:uppercase;font-size:.72rem;color:var(--off)}
#introCard .line{font-family:var(--f-display);font-size:clamp(1.55rem,4vw,3rem);line-height:1.3;text-shadow:0 3px 30px rgba(0,0,0,.4)}
.enter-btn{pointer-events:auto;display:none;margin-top:36px;border:1px solid var(--off);color:var(--cream);padding:15px 32px;border-radius:999px;letter-spacing:.22em;text-transform:uppercase;font-size:.74rem;transition:.4s var(--ease)}
.enter-btn:hover{background:var(--off);color:var(--wine-deep);letter-spacing:.3em}
.tap-hint{position:absolute;bottom:54px;left:0;width:100%;text-align:center;color:var(--bone);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;z-index:2;opacity:.85;transition:opacity .4s}
.tap-hint .chev{display:block;margin:12px auto 0;width:10px;height:10px;border-right:1px solid var(--off);border-bottom:1px solid var(--off);transform:rotate(45deg);animation:bob 1.8s var(--ease) infinite}
@keyframes bob{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(4px,4px)}}
.intro-skip{position:absolute;top:24px;right:28px;z-index:3;pointer-events:auto;color:var(--bone);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;opacity:.65;transition:.3s}
.intro-skip:hover{opacity:1;color:#eeeeee}
.intro-dots{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:3}
.intro-dots i{width:6px;height:6px;border-radius:50%;background:rgba(244,239,231,.28);transition:.4s var(--ease)}
.intro-dots i.on{background:var(--off);width:20px;border-radius:3px}
.intro-flash{position:fixed;inset:0;z-index:10000;background:var(--cream);opacity:0;pointer-events:none}

html.intro-active,html.intro-active body{overflow:hidden;height:100%}
.intro-lang{position:absolute;top:22px;left:26px;z-index:3;pointer-events:auto;border:1px solid rgba(217,217,217,.5);color:var(--bone);font-size:.66rem;letter-spacing:.16em;padding:6px 13px;border-radius:999px;display:flex;align-items:center;gap:7px;transition:.3s var(--ease)}
.intro-lang:hover{border-color:var(--off);color:var(--off)}
.intro-lang b{color:var(--off)}
html[lang="ar"] .intro-lang{letter-spacing:0;font-size:.82rem}
html[lang="ar"] #introCard .line{font-family:var(--f-display);direction:rtl;line-height:1.5}
html[lang="ar"] #introCard .sub{font-family:var(--f-display);direction:rtl;letter-spacing:.06em;text-transform:none;font-size:.98rem}
html[lang="ar"] .tap-hint{text-transform:none;letter-spacing:.08em;font-size:.78rem}
html[lang="ar"] .tap-hint{letter-spacing:.04em;font-size:.82rem}
html[lang="ar"] .enter-btn{text-transform:none;letter-spacing:.06em}
html[lang="ar"] .intro-skip{letter-spacing:0;font-size:.82rem}
/* opacity:1 is explicit so #site always has a value to transition back TO —
   without it, removing .intro-active in the same tick as .gate-running (the
   no-GSAP fallback) strands the element at 0 and the page renders blank */
#site{transition:opacity .9s var(--ease);opacity:1}
html.intro-active #site{opacity:0;pointer-events:none}
/* during the gate the clip does the reveal — the .9s crossfade would fight it */
html.gate-running #site{opacity:1;pointer-events:none;transition:none}

/* ---- intro palette (onboarding screen only) — brand tokens ---- */
#intro{
  --b-burgundy:#36000c; --b-silver:#d9d9d9; --b-taupe:#9a9a9a;
  --b-charcoal:#6b6b6b; --b-off:#F5F5F5; --b-black:#000;
  /* silver tints derived from #d9d9d9 */
  --b-lift:#e4e4e4;   /* d9d9d9 → off-white 35% */
  --b-glow:#eeeeee;   /* d9d9d9 → off-white 62% */
  --b-burgundy-deep:#1a0005;
}
.intro-ui{color:var(--b-off)}
#introCard .sub{color:var(--b-silver)}
/* silver is light, so the label only stays legible as dark wine on the filled
   state and as bright silver on the near-transparent resting state */
.enter-btn{
  border:1px solid rgba(217,217,217,.85);color:#fff;
  background:rgba(20,0,4,.55);
  text-shadow:0 1px 12px rgba(26,0,5,.75);
}
.enter-btn:hover{
  color:#36000c;text-shadow:none;
  background:var(--b-silver);border-color:var(--b-silver);
}
.tap-hint{color:rgba(245,245,245,.82)}
.tap-hint .chev{border-right-color:var(--b-lift);border-bottom-color:var(--b-lift)}
.intro-skip{color:rgba(245,245,245,.72)}
.intro-skip:hover{color:var(--b-glow)}
.intro-dots i{background:rgba(245,245,245,.26)}
.intro-dots i.on{background:var(--b-silver)}
/* the flash is no longer a flat wash — it is the cream bloom that rides the
   leading edge of the opening aperture. Same id/element, so the no-GSAP and
   skipIntro() paths (which only set opacity:0) keep working untouched. */
.intro-flash{
  background:radial-gradient(58% 46% at 50% 56%,
    rgba(243,241,237,.95) 0%,
    rgba(236,230,220,.72) 38%,
    rgba(214,204,190,.28) 66%,
    rgba(214,204,190,0) 100%);
  transform-origin:50% 56%;
}
/* promoted only while the gate is actually animating it */
html.gate-running .intro-flash{will-change:opacity,transform}

/* ===================== GATE — arch portal transition ===================== */
/* sits above .intro-flash (10000) so the drawn arch stays over the bloom */
.gate-layer{position:fixed;inset:0;z-index:10001;pointer-events:none;opacity:0;visibility:hidden}
.gate-layer.on{visibility:visible}

/* the drawn arch — path is byte-identical to .hero .archline, which is what
   sells the handoff when the hero's own archline fades up underneath it */
.gate-arch{
  position:absolute;left:50%;top:50%;
  width:min(78vw,520px);
  transform:translate(-50%,-50%) scale(1);
  transform-origin:50% 50%;
  overflow:visible;
  will-change:transform,opacity;
}
.gate-arch path{
  fill:none;stroke:var(--off);stroke-width:1.15;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(217,217,217,.55));
}
/* non-scaling-stroke is applied ONLY for the scale-up, never during the draw.
   Engines disagree on which coordinate space the dash pattern lives in under
   this vector-effect (the SVG WG issue is still open): Chrome lays dashes out
   in SCREEN space, WebKit/Gecko in USER space. getTotalLength() always answers
   in user units, so with the effect on, one dash length cannot be correct
   everywhere — compensating for Chrome (x1.3) overshoots in Safari, and the
   arch there finishes drawing early and then sits idle.
   The effect is only needed while the arch scales to full bleed, which happens
   AFTER the draw completes; during the draw the arch is pinned at scale 1,
   where it changes nothing. So drop it until the scale tween and the dash is
   unambiguously in user units in every engine. */
.gate-arch.gate-scaling path{vector-effect:non-scaling-stroke}
/* The light that runs along each half as it draws. Same path, same dash trick —
   a short lit segment chased along the stroke, so the arch reads as being
   *inscribed* by a moving point rather than simply appearing. */
/* must out-specify `.gate-arch path` above, which would otherwise repaint the
   light head in the same silver hairline as the arch itself */
.gate-arch path.gate-comet{
  fill:none;stroke:#ffffff;stroke-width:3.4;stroke-linecap:round;
  /* vector-effect deliberately omitted here too — same dash-space reason as
     above. The comet is gone by the time the scale-up starts, so it never
     needs the effect at all. */
  /* three stacked shadows: a tight core, a warm mid, and a wide silver haze. A
     hairline of white on a near-black ground reads as nothing without them —
     the glow is what makes it look like light rather than a thicker line. */
  filter:drop-shadow(0 0 4px rgba(255,255,255,1))
         drop-shadow(0 0 14px rgba(255,255,255,.95))
         drop-shadow(0 0 34px rgba(217,217,217,.75));
  opacity:0;
}
html.gate-low .gate-arch path.gate-comet{filter:none}
/* Keystone: the flare where the two halves meet. Small and brief — it marks the
   moment the arch closes, which is the one instant worth punctuating. */
.gate-key{
  position:absolute;left:50%;top:50%;
  width:min(20vw,132px);aspect-ratio:1/1;
  transform:translate(-50%,-50%) scale(.3);
  transform-origin:50% 50%;
  opacity:0;pointer-events:none;
  background:radial-gradient(closest-side,
    rgba(245,245,245,.95) 0%,
    rgba(238,238,238,.55) 30%,
    rgba(217,217,217,.22) 55%,
    rgba(217,217,217,0) 100%);
  will-change:transform,opacity;
}
html.gate-low .gate-key{display:none}
/* Light spilling under the threshold once the arch completes: a wide, shallow
   pool at the base that the aperture then opens through. */
.gate-sill{
  position:absolute;left:50%;top:50%;
  width:min(96vw,760px);height:min(30vw,190px);
  transform:translate(-50%,-50%) scaleY(.6);
  transform-origin:50% 50%;
  opacity:0;
  background:radial-gradient(58% 100% at 50% 100%,
    rgba(245,245,245,.5) 0%,
    rgba(217,217,217,.24) 30%,
    rgba(217,217,217,0) 72%);
  will-change:transform,opacity;
}
html.gate-low .gate-sill{display:none}

/* apex flare — opacity/transform only, no backdrop-filter */
.gate-glow{
  position:absolute;left:50%;top:50%;
  width:min(78vw,520px);aspect-ratio:1/1;
  transform:translate(-50%,-50%) scale(.9);
  transform-origin:50% 50%;
  opacity:0;
  background:radial-gradient(closest-side,
    rgba(238,238,238,.85) 0%,
    rgba(217,217,217,.35) 42%,
    rgba(217,217,217,0) 100%);
  will-change:transform,opacity;
}

/* #site is NEVER clipped. A referenced clip-path on a ~7700px-tall element
   forces the browser to re-rasterise the mask across that whole element every
   frame — ~69 frames of it — which is what stalled the end of the transition
   and left the page sluggish afterwards.
   Instead the aperture is a hole in a viewport-sized cover that sits ON TOP of
   the page: one screen's worth of pixels, and #site just sits there untouched. */
/* The cover replaces the intro at the swap, so it wears the intro's own wine
   backdrop — not a cream slab. The scene appears to stay put while the arch
   opens a hole through it onto the page, which is the read the transition
   had before the cover existed. */
#gateCover{
  position:fixed;inset:0;z-index:10000;pointer-events:none;
  background:
    radial-gradient(100% 62% at 50% 104%, #5c0a1a 0%, #36000c 30%, rgba(54,0,12,0) 66%),
    linear-gradient(180deg, #140004 0%, #240008 22%, #36000c 52%, #300009 72%, #240007 88%, #1a0005 100%);
  visibility:hidden;
  will-change:clip-path;
}
#gateCover.on{visibility:visible}
/* scoped to the gate: a permanent will-change on a full-viewport image keeps a
   promoted layer alive for the whole session and taxes every later repaint */
html.gate-running #heroBg{will-change:transform}
#nav.gate-hold{transform:translateY(-110%);opacity:0}

/* mobile / low-power: drop the two costliest effects so the clip gets the frame */
@media(max-width:560px){
  .gate-arch,.gate-glow{width:min(88vw,420px)}
  .gate-arch path{filter:none}
}
html.gate-low .gate-arch path{filter:none}
html.gate-low .gate-glow{display:none}

@media(prefers-reduced-motion:reduce){
  .gate-layer,#gateCover{display:none}
}
.intro-lang{
  color:rgba(245,245,245,.88);
  border-color:rgba(217,217,217,.50);
  background:rgba(54,0,12,.42);
  backdrop-filter:blur(6px);
}
.intro-lang:hover{border-color:var(--b-lift);color:var(--b-glow)}
.intro-lang b{color:var(--b-lift)}

/* atmospheric gradient scrim over the 3D canvas — ties UI text to the scene */
#intro::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 4%, rgba(0,0,0,.38) 0%, rgba(0,0,0,.12) 44%, rgba(0,0,0,0) 74%),
    radial-gradient(85% 48% at 46% 92%, rgba(217,217,217,.10) 0%, rgba(217,217,217,0) 72%),
    linear-gradient(180deg, rgba(26,0,5,.30) 0%, rgba(54,0,12,.06) 32%, rgba(0,0,0,0) 62%);
}
/* vignette keeps the wine corners rich */
#intro::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(115% 88% at 50% 52%, rgba(0,0,0,0) 52%, rgba(20,0,4,.48) 100%);
}

/* ============================ NAV ============================ */
.nav{position:fixed;top:0;left:0;width:100%;z-index:8000;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);transition:transform .5s var(--ease),background .5s var(--ease),padding .5s var(--ease),border-color .5s;border-bottom:1px solid transparent}
.nav.scrolled{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding-block:12px}
.nav.hidden{transform:translateY(-110%)}
.nav .brand{font-family:var(--f-display);font-size:1.5rem;letter-spacing:.2em;padding-inline-start:.2em;color:var(--ink)}
.nav .brand span{color:var(--wine)}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.4vw,34px)}
.nav-links a{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;font-weight:400;position:relative;padding:4px 0;color:var(--ink-soft);transition:color .3s}
html[lang="ar"] .nav-links a{text-transform:none;letter-spacing:0;font-size:.95rem}
.nav-links a::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:0;height:1px;background:var(--acc);transition:width .35s var(--ease)}
.nav-links a:hover{color:var(--wine)}
.nav-links a:hover::after{width:100%}
.lang-toggle{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.72rem;letter-spacing:.12em;display:flex;align-items:center;gap:8px;color:var(--ink);transition:border-color .3s,color .3s}
.lang-toggle:hover{border-color:var(--acc);color:var(--wine)}
.lang-toggle b{color:var(--wine)}
.menu-btn{display:none}
.menu-btn{display:none;background:none;border:0;cursor:pointer}body.menu-open{overflow:hidden}@media(max-width:980px){.lang-toggle{margin-inline-start:auto;margin-inline-end:10px}.menu-btn{display:flex;flex-direction:column;gap:5px;padding:6px;z-index:9001}.menu-btn span{width:24px;height:1.5px;background:var(--cream);transition:transform .3s,opacity .3s,background .5s}.nav.scrolled .menu-btn span{background:var(--cream)}.nav.scrolled.over-dark .menu-btn span{background:var(--ink)}body.menu-open .menu-btn span{background:var(--cream)}body.menu-open .menu-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}body.menu-open .menu-btn span:nth-child(2){opacity:0}body.menu-open .menu-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}.nav-links{position:fixed;top:0;inset-inline:0;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;background:rgba(36,0,10,.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:translateY(-100%);transition:transform .5s var(--ease);z-index:9000}.nav-links.open{transform:translateY(0)}.nav-links a{color:var(--cream)!important;font-size:1.5rem;letter-spacing:.04em}.nav-links a::after{display:none}.nav-links a:hover{color:var(--off)!important}body.menu-open .lang-toggle{color:var(--cream);border-color:rgba(243,241,237,.5);z-index:9001}body.menu-open .lang-toggle b{color:var(--off)}}

/* ============================ HERO ============================ */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;text-align:center}
.hero .bg{position:absolute;inset:-8% 0;z-index:0}
.hero .bg .ph,.hero .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the hero render is portrait (1125×1398). Wide screens crop a horizontal band,
   tall screens crop a vertical one, so one point does both jobs: 48% down keeps
   the facade and its RASA sign centred on desktop/landscape, 58% across keeps
   the sign inside the frame on phones and portrait tablets */
.hero .bg img{object-position:58% 48%}
.hero .scrim{position:absolute;inset:0;z-index:1;background:rgba(54,0,12,.48)}
.hero .vign{display:none}
.hero-inner{position:relative;z-index:3;color:var(--cream);padding:120px var(--pad) 90px;max-width:920px}
.hero .archline{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(78vw,520px);z-index:2;opacity:.55}
.hero .archline path{stroke:var(--off);stroke-width:1;fill:none}
.hero .h-eyebrow{color:#f5f5f5;margin-bottom:26px;justify-content:center;text-shadow:0 1px 6px rgba(20,0,6,.55),0 6px 26px rgba(20,0,6,.45)}
.hero .h-eyebrow::before{background:var(--off)}
.hero h1{font-family:var(--f-display);font-weight:400;line-height:.95;font-size:clamp(4.6rem,17vw,12rem);letter-spacing:.16em;padding-inline-start:.16em;color:var(--cream)}
.hero .sub{margin-top:22px;font-size:clamp(.78rem,1.9vw,1.05rem);letter-spacing:.34em;text-transform:uppercase;color:var(--bone);font-weight:400}
html[lang="ar"] .hero .sub{text-transform:none;letter-spacing:.02em;font-family:var(--f-display);font-size:clamp(1.1rem,3.6vw,1.7rem)}
.hero .tag{margin-top:30px;font-size:clamp(1rem,2.4vw,1.3rem);color:#ffffff;opacity:.98;font-weight:400;letter-spacing:.06em;text-shadow:0 1px 8px rgba(20,0,6,.6),0 8px 30px rgba(20,0,6,.4)}
html[lang="ar"] .hero .tag{letter-spacing:0}
.hero .lede{margin-top:22px;font-size:clamp(.95rem,1.9vw,1.12rem);color:var(--off);opacity:.94;max-width:56ch;margin-inline:auto;line-height:1.9;text-shadow:0 1px 6px rgba(20,0,6,.5)}
.hero-actions{margin-top:42px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* arch-revealed media — THE signature */
.arch{clip-path:url(#archClip);-webkit-clip-path:url(#archClip)}
.media{position:relative;overflow:hidden;background:var(--bone)}
.media .ph{position:absolute;inset:0;background:var(--bone)}
.media .ph::after{content:"";position:absolute;inset:0;opacity:.5;background-size:64px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><g fill='none' stroke='%2382766B' stroke-opacity='0.18' stroke-width='1'><path d='M32 2 L62 32 L32 62 L2 32 Z'/><path d='M32 14 L50 32 L32 50 L14 32 Z'/><circle cx='32' cy='32' r='5'/></g></svg>")}
.media .ph .phlabel{position:absolute;inset-inline-start:0;inset-block-end:0;width:100%;padding:18px 20px;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--wine)}
html[lang="ar"] .media .ph .phlabel{text-transform:none;letter-spacing:0}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
/* promoted on hover only: a standing will-change keeps a GPU layer per image
   alive for the whole session, which taxes every scroll and repaint */
.media:hover img{will-change:transform}

/* ============================ SECTIONS ============================ */
section{position:relative}
.sec-pad{padding-block:clamp(80px,12vw,170px)}
.shead{max-width:760px;margin-bottom:clamp(40px,6vw,80px)}
.shead h2{font-family:var(--f-display);font-weight:400;line-height:1.04;font-size:clamp(2.3rem,5.6vw,4.6rem);color:var(--ink);margin-top:18px;letter-spacing:.01em}
.shead h2 em{color:var(--wine);font-style:normal}
.shead p{margin-top:20px;font-size:clamp(1rem,1.5vw,1.18rem);color:var(--ink-soft);max-width:60ch}

.contact{background:var(--cream)}
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,80px)}
@media(min-width:880px){.contact-grid{grid-template-columns:1.2fr .8fr}}
.contact h2{font-family:var(--f-display);font-weight:400;font-size:clamp(3rem,9vw,7rem);line-height:.95;color:var(--ink)}
.contact h2 em{color:var(--wine);font-style:normal}
.contact .lead{margin-top:24px;font-size:clamp(1.1rem,2vw,1.4rem);color:var(--ink-soft);max-width:30ch}
.contact-meta{display:flex;flex-direction:column;gap:26px;align-self:center}
.cm-item .cm-lbl{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--acc)}
html[lang="ar"] .cm-item .cm-lbl{text-transform:none;letter-spacing:0;font-size:.9rem}
.cm-item .cm-val{font-family:var(--f-display);font-size:clamp(1.1rem,1.8vw,1.4rem);color:var(--ink);margin-top:6px;transition:color .3s}
.cm-item a.cm-val:hover{color:var(--wine)}

footer{background:var(--wine-deep);color:var(--bone);padding:40px var(--pad)}
.foot-in{max-width:var(--maxw);margin-inline:auto;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
footer .f-mark{font-family:var(--f-display);letter-spacing:.2em;color:var(--cream);font-size:1.1rem;padding-inline-start:.2em}
footer .f-note{font-size:.74rem;letter-spacing:.06em;color:var(--taupe)}

/* ===================== REVEAL (JS-gated) ===================== */
.js .reveal{opacity:0;transform:translateY(38px)}
.js .reveal-mask .media,.js .reveal-mask.media{clip-path:inset(100% 0 0 0)}
.js .stagger>*{opacity:0;transform:translateY(30px)}
/* the gate aperture reveals #site BEFORE the hero tween runs, so the hero
   content has to start hidden. GSAP's inline opacity takes over before
   .gate-running drops, so there is no flash at the handoff. */
.js.intro-active .hero-inner>*,.js.gate-running .hero-inner>*{opacity:0}
@media(prefers-reduced-motion:reduce){
  .js.intro-active .hero-inner>*,.js.gate-running .hero-inner>*{opacity:1}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .reveal,.js .stagger>*{opacity:1;transform:none}
  .hero .cta .arrow{animation:none}
}

/* ===================== PDF-CONTENT SECTIONS ===================== */
/* brand logos */
.brand-logo{height:21px;width:auto;display:block;transition:height .4s var(--ease)}
.nav.scrolled .brand-logo{height:19px}
.brand-dark{display:none}
/* light logo by default (hero + wine bar); the off-white bar swaps it below */
.nav .brand-light{display:block}
.nav .brand-dark{display:none}
/* light text over the hero and on the wine bar; dark text on the off-white bar */
.nav-links a{color:var(--cream)}
.nav-links a:hover{color:var(--off)}
.nav.scrolled .nav-links a{color:var(--bone)}
.nav.scrolled .nav-links a:hover{color:var(--off)}
.nav .brand{color:var(--cream)}
.nav .brand span{color:var(--off)}
.lang-toggle{color:var(--cream);border-color:rgba(243,241,237,.45)}
.lang-toggle b{color:var(--off)}
.lang-toggle:hover{color:#fff;border-color:var(--off)}
.nav.scrolled .lang-toggle{color:var(--cream);border-color:rgba(243,241,237,.34)}
.nav.scrolled .lang-toggle b{color:var(--off)}
.nav.scrolled .lang-toggle:hover{color:#fff;border-color:var(--off)}

/* ---- context-aware bar: wine over light sections, off-white over dark ---- */
.nav.scrolled{background:rgba(36,0,10,.90);border-color:rgba(245,245,245,.22)}
/* over the dark sections (Philosophy, CTA, footer) the bar returns to the
   original off-white treatment, so it reads as a light bar on dark ground */
.nav.scrolled.over-dark{background:rgba(244,239,231,.88);border-color:var(--line)}
.nav.scrolled.over-dark .nav-links a{color:var(--ink-soft)}
.nav.scrolled.over-dark .nav-links a:hover{color:var(--wine)}
.nav.scrolled.over-dark .brand{color:var(--ink)}
.nav.scrolled.over-dark .brand span{color:var(--wine)}
.nav.scrolled.over-dark .brand-light{display:none}
.nav.scrolled.over-dark .brand-dark{display:block}
.nav.scrolled.over-dark .lang-toggle{color:var(--ink);border-color:var(--line)}
.nav.scrolled.over-dark .lang-toggle b{color:var(--wine)}
.nav.scrolled.over-dark .lang-toggle:hover{color:var(--wine);border-color:var(--acc)}
.hero-logo{width:min(60vw,430px);height:auto;display:block;margin:0 auto;}
.foot-logo{height:24px;width:auto}
.cta-logo{height:30px;width:auto;display:block;margin:0 auto;opacity:.96}
.intro-logo{display:block;margin:0 auto;width:min(66vw,480px);height:auto;
  }
/* last station: the wordmark shares the card with a line + the enter button */
.intro-logo.gate-mark{width:min(46vw,320px);margin-bottom:clamp(18px,3vw,30px)}
.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vid-wrap{cursor:pointer}
.vid-tap{position:absolute;inset-inline-start:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:72px;height:72px;border-radius:50%;display:none;align-items:center;justify-content:center;background:rgba(36,0,10,.55);color:var(--cream);border:1px solid var(--off);backdrop-filter:blur(6px);transition:transform .3s var(--ease),background .3s}
html[dir="rtl"] .vid-tap{transform:translate(50%,-50%)}
.vid-tap:hover{background:rgba(54,0,12,.75);transform:translate(-50%,-50%) scale(1.06)}
html[dir="rtl"] .vid-tap:hover{transform:translate(50%,-50%) scale(1.06)}
.vid-tap svg{margin-inline-start:3px}
.vid-blocked .vid-tap{display:flex}
.vid-playing .vid-tap{display:none!important}
.card-media{position:relative;overflow:hidden;border-radius:16px;background:var(--bone)}
.card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.card-media:hover img{will-change:transform}
.card-media .cm-cap{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:40px 20px 18px;color:var(--cream);background:linear-gradient(180deg,transparent,rgba(20,0,6,.86))}
.card-media .cm-cap .t{font-family:var(--f-display);font-weight:500;font-size:1.08rem;line-height:1.3}
.card-media .cm-cap .s{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--off);margin-bottom:7px}
html[lang="ar"] .card-media .cm-cap .s{text-transform:none;letter-spacing:0;font-size:.84rem}

/* About */
.about{background:var(--cream)}
.about-grid{display:grid;grid-template-columns:1fr;gap:clamp(36px,6vw,84px);align-items:center}
@media(min-width:900px){.about-grid{grid-template-columns:1.05fr .95fr}}
.about .lead-line{font-family:var(--f-display);font-weight:500;font-size:clamp(1.35rem,2.5vw,1.95rem);color:var(--wine);line-height:1.45}
.about p.body{margin-top:18px;color:var(--ink-soft);font-size:1.04rem;line-height:1.95;max-width:56ch}
.about .subh{margin-top:30px;font-family:var(--f-display);font-weight:500;font-size:clamp(1.15rem,2vw,1.45rem);color:var(--ink)}
.about .a-media{aspect-ratio:4/5;width:100%}

/* Experience (maroon band) */
.exp{background:var(--wine-deep);color:var(--bone);overflow:hidden;position:relative}
.exp .mash-bg{position:absolute;inset:0;opacity:.06;background-size:150px}
.exp-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:clamp(36px,6vw,80px);align-items:center}
@media(min-width:900px){.exp-grid{grid-template-columns:1fr 1fr}}
.exp .e-media{aspect-ratio:4/5;width:100%}
.exp .eyebrow{color:var(--off)}.exp .eyebrow::before{background:var(--off)}
.exp h2{font-family:var(--f-display);font-weight:500;font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.28;color:var(--cream);margin-top:16px}
.exp p{margin-top:18px;color:var(--bone);opacity:.92;font-size:1.04rem;line-height:1.95;max-width:54ch}

/* Services */
.services{background:var(--cream)}
.svc-group+.svc-group{margin-top:clamp(52px,8vw,104px)}
.svc-ghead{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:30px;border-bottom:1px solid var(--line);padding-bottom:18px}
.svc-ghead h3{font-family:var(--f-display);font-weight:500;font-size:clamp(1.5rem,3.2vw,2.4rem);color:var(--ink)}
.svc-ghead .en{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);opacity:.85}
html[lang="ar"] .svc-ghead .en{text-transform:none;letter-spacing:0;font-size:.9rem}
.svc-cards{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:640px){.svc-cards{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.svc-cards{grid-template-columns:repeat(4,1fr)}}
.svccard{border:1px solid transparent;border-radius:14px;padding:22px 20px 24px;background:rgba(54,0,12,.04);transition:background-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease)}
.svccard:hover{background:rgba(54,0,12,.07);transform:translateY(-3px);box-shadow:0 14px 30px -24px rgba(79,79,79,.5)}
.svccard .en{font-family:var(--f-display);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wine);font-weight:500}
html[lang="ar"] .svccard .en{letter-spacing:0;font-size:.8rem;direction:ltr;text-align:start;unicode-bidi:isolate}
.svccard h4{font-family:var(--f-display);font-weight:500;font-size:1.1rem;color:var(--ink);margin-top:9px;line-height:1.35}
.svccard p{margin-top:10px;font-size:.9rem;color:var(--ink);line-height:1.72}

/* CTA band */
.cta-band{background:var(--wine);color:var(--cream);text-align:center}
.cta-band h2{font-family:var(--f-display);font-weight:500;font-size:clamp(1.8rem,4.4vw,3rem);color:var(--cream)}
.cta-band p{margin-top:16px;color:var(--bone);opacity:.9;font-size:1.05rem;max-width:48ch;margin-inline:auto}
.cta-actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:14px 26px;font-size:.8rem;letter-spacing:.14em;border:1px solid var(--off);color:var(--cream);transition:.35s var(--ease)}
html[lang="ar"] .btn{letter-spacing:0;font-size:.98rem}
.btn:hover{background:var(--off);color:var(--wine-deep)}
.btn.solid{background:var(--off);color:var(--wine-deep)}
.btn.solid:hover{background:var(--cream);border-color:var(--cream)}

/* Contact additions */
.contact .map{margin-top:30px;border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/7;background:var(--sand)}
.contact .map iframe{width:100%;height:100%;border:0;filter:grayscale(.15) contrast(1.02)}
.cm-item .cm-val.addr{font-family:var(--f-body);font-size:1.02rem;line-height:1.7}
.cm-phones{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.cm-phones .cm-val{margin-top:0}

/* header CTA */
.nav-links a.nav-cta{border:1px solid rgba(245,245,245,.55);border-radius:999px;padding:7px 16px;transition:.3s var(--ease)}
.nav-links a.nav-cta::after{display:none}
.nav-links a.nav-cta:hover{background:var(--off);color:var(--wine)!important}
.nav.scrolled.over-dark .nav-links a.nav-cta{border-color:var(--wine);color:var(--wine)}
.nav.scrolled.over-dark .nav-links a.nav-cta:hover{background:var(--wine);color:#fff!important}


/* Services accordion — four practices first, services revealed on demand */
.svc-group .svc-ghead{cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.svc-ghead .g-no{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;border-radius:999px;background:rgba(54,0,12,.08);color:var(--wine);font-family:var(--f-display);font-size:.78rem;letter-spacing:.06em;line-height:1;padding:0 8px;flex:none;align-self:center;transition:background-color .35s var(--ease),color .35s var(--ease)}
.svc-group.open .svc-ghead .g-no{background:var(--wine);color:#fff}
.svc-group.open .svc-ghead{border-bottom:1px solid rgba(54,0,12,.35)}
.svc-ghead .chev{width:11px;height:11px;border-inline-end:1.5px solid var(--wine);border-block-end:1.5px solid var(--wine);transform:rotate(45deg);transition:transform .4s var(--ease);margin-inline-start:auto;flex:none;margin-bottom:4px}
.svc-group.open .svc-ghead .chev{transform:rotate(-135deg)}
.svc-body{display:none}
.svc-group.open .svc-body{display:block}
@media(min-width:1040px){.svc-cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}}
.legal-note{margin-top:20px;font-size:.86rem;color:var(--ink-soft);border-inline-start:2px solid var(--taupe);padding-inline-start:14px;line-height:1.8;max-width:72ch}

/* Process */
.process{background:var(--wine)}
.process .eyebrow{color:var(--bone)}
.process .eyebrow::before{background:var(--off)}
.process .shead h2{color:#fff}
.process .shead h2 em{color:var(--taupe)}
.step-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 18px}
@media(min-width:620px){.step-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1000px){.step-grid{grid-template-columns:repeat(7,1fr)}}
.step{border-top:1px solid rgba(245,245,245,.25);padding-top:18px}
.step .st-no{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;border-radius:999px;background:var(--bone);color:var(--wine);font-family:var(--f-display);font-size:.78rem;letter-spacing:.06em;padding:0 8px}
.step h4{margin-top:10px;font-family:var(--f-display);font-weight:500;font-size:1.02rem;color:#fff;line-height:1.4}
.step .st-sub{margin-top:3px;font-size:.7rem;letter-spacing:0;text-transform:uppercase;color:rgba(245,245,245,.62)}

/* Selected projects meta */
.projects-sec{background:var(--cream)}


/* video arches: SVG clip-path blanks <video> in WebKit; use border-radius arch instead */
.vid-wrap{clip-path:none!important;-webkit-clip-path:none!important;
  border-radius:50% 50% 0 0 / 40% 40% 0 0;overflow:hidden;
  isolation:isolate;transform:translateZ(0);
  -webkit-mask-image:-webkit-radial-gradient(white,black)}
.vid-wrap video{border-radius:inherit}

/* residential villa projects */.villa+.villa{margin-top:clamp(40px,6vw,72px)}.villa-head{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}.villa-kick{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--acc)}html[lang="ar"] .villa-kick{letter-spacing:0;text-transform:none;font-size:.92rem}.villa-title{font-family:var(--f-display);font-weight:500;font-size:clamp(1.6rem,3.4vw,2.4rem);color:var(--ink);line-height:1}.villa-parts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}@media(min-width:700px){.villa-parts{gap:48px}}.vpart{position:relative}.vpart.tappable{cursor:pointer;-webkit-tap-highlight-color:transparent}.vpart-media{position:relative;overflow:hidden;border-radius:14px;aspect-ratio:3/4;background:var(--bone)}.vpart-media{overflow:visible;border-radius:0;background:none;perspective:1300px}.villa-parts{padding-top:16px}.vcard{position:absolute;inset:0;border-radius:15px;overflow:hidden;background:var(--sand);border:4px solid var(--cream);box-shadow:0 10px 26px -14px rgba(20,0,6,.5);transform-origin:50% 72%;transform:translate(9%,-7%) rotate(4.5deg) scale(.93);filter:brightness(.9) saturate(.96);z-index:1;transition:transform .62s cubic-bezier(.34,1.45,.5,1),box-shadow .55s var(--ease),filter .55s var(--ease)}.vcard.active{transform:none;filter:none;z-index:2;box-shadow:0 24px 54px -22px rgba(20,0,6,.62),0 6px 16px -8px rgba(20,0,6,.28)}.vcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.vpart.tappable:hover .vcard:not(.active){transform:translate(12.5%,-9.5%) rotate(6.5deg) scale(.92)}.vpart.tappable:hover .vcard.active{transform:translateY(-5px) scale(1.012)}.vpart.tappable:active .vcard.active{transform:scale(.99);transition-duration:.15s}@media(max-width:560px){.vcard{border-width:2px;border-radius:11px;transform:translate(6%,-5%) rotate(3.5deg) scale(.95)}.villa-parts{padding-top:10px}}.vpart-hint{position:absolute;top:10px;inset-inline-end:10px;z-index:2;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(36,0,10,.5);color:var(--cream);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:.3s}.vpart.tappable:hover .vpart-hint{background:rgba(54,0,12,.8)}.vpart-cap{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}.vpart-label{font-family:var(--f-display);font-weight:500;font-size:1rem;color:var(--ink)}.vpart-text{display:flex;flex-direction:column;gap:3px;min-width:0}.vpart-sub{font-family:var(--f-body);font-weight:400;font-size:.8rem;color:var(--ink-soft);line-height:1.45}.vpart-count{font-size:.72rem;letter-spacing:.1em;color:var(--acc)}@media(max-width:560px){.villa-parts{gap:8px}.vpart-media{border-radius:10px}.vpart-cap{margin-top:8px;flex-direction:column;align-items:flex-start;gap:2px}.vpart-label{font-size:.74rem}.vpart-sub{font-size:.6rem;line-height:1.35}.vpart-count{font-size:.58rem}.vpart-hint{width:24px;height:24px;top:6px;inset-inline-end:6px}}.villa-style{display:inline-block;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);border:1px solid var(--acc);border-radius:999px;padding:5px 13px;font-weight:500}html[lang="ar"] .villa-style{letter-spacing:0;text-transform:none;font-size:.8rem}::selection{background:rgba(130,118,107,.35);color:var(--ink)}.sr-seo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =====================================================================
   2026 FINAL BRIEF — typography, inner pages and new components
   ===================================================================== */
/* identity: Arabic RTL in Times New Roman, English LTR in Arial */
:root{
  --f-ar:"Times New Roman",Times,"Noto Naskh Arabic","Geeza Pro",serif;
  --f-en:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --r:4px;                      /* rounded cards kept to a minimum */
  --hair:rgba(54,0,12,.14);
}
html[lang="ar"]{--f-display:var(--f-ar);--f-body:var(--f-ar)}
html[lang="en"]{--f-display:var(--f-en);--f-body:var(--f-en)}
body{font-weight:400}
/* Times New Roman's Arabic runs visually smaller than Latin, so Arabic gets a larger root */
html[lang="ar"]{font-size:110%}
.latin{font-family:var(--f-en)!important;font-weight:400;letter-spacing:.14em}
h1,h2,h3,h4{font-weight:400}
.sr-seo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* eyebrows carry the counterpart language: English caps over Arabic copy, Arabic over English */
.eyebrow{font-weight:400}
html[lang="ar"] .eyebrow{font-family:var(--f-en);text-transform:uppercase;letter-spacing:.3em;font-size:.68rem}
html[lang="en"] .eyebrow{font-family:var(--f-ar);text-transform:none;letter-spacing:0;font-size:1.02rem}

/* fewer rounded corners across the existing card system */
.card-media,.svccard,.vcard,.contact .map,.vpart-media{border-radius:var(--r)}
.svccard{background:#fff;border:1px solid var(--hair)}
.svccard:hover{background:#fff;border-color:rgba(54,0,12,.3)}
.svccard .en{font-family:var(--f-en)}
.svc-ghead .en{font-family:var(--f-en)}
html[lang="en"] .svc-ghead .en,html[lang="en"] .svccard .en{font-family:var(--f-ar);letter-spacing:0;text-transform:none;font-size:.95rem}
.svc-ghead h3{font-weight:400}
.svccard h4{font-weight:700;font-size:1.08rem}
html[lang="ar"] .svccard h4{font-size:1.2rem}
.svccard p{line-height:1.8;color:var(--ink)}

/* ---------------- links and buttons ---------------- */
.text-link{display:inline-flex;align-items:center;gap:.6em;margin-top:26px;color:var(--wine);font-size:1rem;position:relative;padding-bottom:6px}
.text-link::before{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:currentColor;opacity:.35;transform-origin:var(--tl-o,right);transition:opacity .4s var(--ease)}
html[dir="ltr"] .text-link{--tl-o:left}
.text-link::after{content:"←";font-family:var(--f-en);transition:transform .4s var(--ease)}
html[dir="ltr"] .text-link::after{content:"→"}
.text-link:hover::before{opacity:1}
html[dir="rtl"] .text-link:hover::after{transform:translateX(-5px)}
html[dir="ltr"] .text-link:hover::after{transform:translateX(5px)}
.text-link.light{color:#fff;margin-top:0}
.text-link.light::before{opacity:.55}
.btn.wine{background:var(--wine);border-color:var(--wine);color:#fff}
.btn.wine:hover{background:#4a0412;border-color:#4a0412;color:#fff}
.btn.wide{width:100%;justify-content:center;padding-block:17px}
.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:1px solid var(--wine);color:var(--wine);border-radius:999px;padding:12px 22px;font-size:.95rem;transition:background .35s var(--ease),color .35s var(--ease)}
html[lang="en"] .btn-line{font-size:.82rem;letter-spacing:.06em}
.btn-line::before{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.1 5.1 0 0 0 1.1 2.7 11.6 11.6 0 0 0 4.4 3.9c1.6.7 2.3.8 3.1.6a2.7 2.7 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .1-1.3c0-.1-.2-.2-.4-.3z'/></svg>") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.1 5.1 0 0 0 1.1 2.7 11.6 11.6 0 0 0 4.4 3.9c1.6.7 2.3.8 3.1.6a2.7 2.7 0 0 0 1.8-1.2 2.2 2.2 0 0 0 .1-1.3c0-.1-.2-.2-.4-.3z'/></svg>") center/contain no-repeat}
.btn-line:hover{background:var(--wine);color:#fff}
.tagpill{display:inline-block;font-family:var(--f-en);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wine);border:1px solid rgba(54,0,12,.28);border-radius:999px;padding:4px 11px;line-height:1.4;white-space:nowrap}

/* ---------------- nav ---------------- */
.nav-links a[aria-current="page"]{color:#fff}
.nav-links a[aria-current="page"]::after{width:100%;background:var(--off)}
.nav.scrolled.over-dark .nav-links a[aria-current="page"]{color:var(--wine)}
.nav.scrolled.over-dark .nav-links a[aria-current="page"]::after{background:var(--wine)}
@media(min-width:981px) and (max-width:1180px){.nav-links{gap:18px}html[lang="ar"] .nav-links a{font-size:.9rem}.nav-links a{font-size:.68rem;letter-spacing:.12em}}

/* ---------------- home hero ---------------- */
.hero .scrim{background:linear-gradient(180deg,rgba(36,0,10,.55) 0%,rgba(54,0,12,.42) 45%,rgba(36,0,10,.66) 100%)}
.hero .tag{margin-top:26px;font-size:clamp(.66rem,1.3vw,.8rem);letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.hero .slogan{margin-top:30px;font-family:var(--f-display);font-size:clamp(1.55rem,3.8vw,2.7rem);line-height:1.45;color:#fff;text-shadow:0 2px 18px rgba(20,0,6,.55)}
.hero .slogan i{font-style:normal;color:rgba(245,245,245,.6);margin-inline:.35em;font-size:.7em;vertical-align:.12em}
html[lang="en"] .hero .slogan{font-size:clamp(1.25rem,2.9vw,2.05rem);letter-spacing:.01em}
.hero .lede{margin-top:14px;font-family:var(--f-display);font-size:clamp(1.05rem,2.1vw,1.4rem);color:rgba(255,255,255,.9);line-height:1.7}
.hero-actions{align-items:center;gap:30px;margin-top:40px}
.hero .btn.solid{padding:15px 32px}

/* ---------------- inner page hero ---------------- */
.page-hero{position:relative;min-height:clamp(440px,66svh,700px);display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:var(--wine)}
.page-hero .bg{position:absolute;inset:-6% 0;z-index:0}
.page-hero .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(36,0,10,.62) 0%,rgba(54,0,12,.34) 42%,rgba(36,0,10,.85) 100%)}
.page-hero .archline{position:absolute;z-index:2;bottom:-1px;inset-inline-end:var(--pad);width:clamp(150px,22vw,280px);opacity:.42}
.page-hero .archline path{fill:none;stroke:#f5f5f5;stroke-width:1.2}
/* bright daylight renders (about): a lighter wash keeps the image crisp and true to colour;
   the top still shades the nav and the bottom still carries the white title */
.page-hero.is-bright .scrim{background:linear-gradient(180deg,rgba(36,0,10,.46) 0%,rgba(36,0,10,.06) 30%,rgba(36,0,10,.1) 55%,rgba(36,0,10,.78) 100%)}
.ph-inner{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin-inline:auto;padding:150px var(--pad) clamp(52px,7vw,96px)}
.ph-inner .eyebrow{color:#f5f5f5}
.ph-inner .eyebrow::before{background:#f5f5f5}
.ph-inner h1{font-family:var(--f-display);font-size:clamp(3rem,8.4vw,6.4rem);line-height:1.05;margin-top:18px;color:#fff;text-shadow:0 2px 24px rgba(20,0,6,.35)}

/* ---------------- section heads ---------------- */
.shead-row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap}
.shead-row .text-link{margin-top:0}
.shead h2{font-size:clamp(2.2rem,5.2vw,4.2rem);line-height:1.12}
.sec-title{font-family:var(--f-display);font-size:clamp(2.2rem,5vw,3.8rem);line-height:1.12;color:var(--ink);margin-top:16px}
.statement{margin-top:clamp(48px,6vw,80px);padding-top:28px;border-top:1px solid var(--hair);font-family:var(--f-display);font-size:clamp(1.35rem,2.8vw,2.1rem);line-height:1.55;color:var(--wine);max-width:34ch}
.fine-note{margin-top:16px;font-size:.92rem;color:var(--ink-soft)}

/* ---------------- about (home brief + about page) ---------------- */
.about .lead-line{margin-top:22px;font-weight:400;font-size:clamp(1.45rem,2.7vw,2.15rem);line-height:1.6}
html[lang="en"] .about .lead-line{font-size:clamp(1.2rem,2.1vw,1.6rem);line-height:1.6}
.about p.body{font-size:1.1rem;line-height:2;color:var(--ink)}
html[lang="en"] .about p.body{font-size:1rem;line-height:1.85}
.about p.body.emph{color:var(--wine)}
.who .sec-title{margin-bottom:10px}
.exp h2{font-weight:400;font-size:clamp(2.2rem,5vw,3.6rem)}
.exp .vis-lead{font-family:var(--f-display);font-size:clamp(1.25rem,2.3vw,1.7rem);line-height:1.7;color:#fff;opacity:1;max-width:none}
html[lang="en"] .exp .vis-lead{font-size:clamp(1.1rem,1.8vw,1.35rem)}
.exp p{font-size:1.08rem;line-height:2}

/* why RASA */
.why{background:#fff}
.why-lead{font-family:var(--f-display);font-size:clamp(1.2rem,2.2vw,1.6rem)!important;line-height:1.7;color:var(--ink)!important;max-width:44ch!important}
.why-grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--hair)}
@media(min-width:720px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.why-grid{grid-template-columns:repeat(3,1fr)}}
.why-item{padding:34px 0 38px;border-bottom:1px solid var(--hair)}
@media(min-width:720px){.why-item{padding-inline-end:clamp(24px,3vw,48px)}}
.wi-no,.ri-no{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;border-radius:50%;border:1px solid rgba(54,0,12,.3);color:var(--wine);font-size:.74rem;letter-spacing:.06em!important}
.why-item h3,.rcv-item h3{margin-top:18px;font-family:var(--f-display);font-size:clamp(1.3rem,2vw,1.6rem);color:var(--ink);line-height:1.35}
.why-item p,.rcv-item p{margin-top:10px;color:var(--ink);font-size:1.02rem;line-height:1.9;max-width:40ch}
html[lang="en"] .why-item p,html[lang="en"] .rcv-item p{font-size:.95rem;line-height:1.8}

/* how we view the project */
.view{background:var(--bone)}
.view-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,96px);align-items:start}
@media(min-width:960px){.view-grid{grid-template-columns:1.1fr .9fr}}
.view .lead-line{margin-top:22px;font-family:var(--f-display);font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.65;color:var(--wine)}
.view p.body{margin-top:18px;font-size:1.08rem;line-height:2;color:var(--ink);max-width:58ch}
html[lang="en"] .view p.body{font-size:1rem;line-height:1.85}
.cascade{font-family:var(--f-display);font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.5;color:var(--ink);align-self:center}
@media(min-width:960px){.cascade{position:sticky;top:120px}}
.cascade span{display:block;padding-block:.18em}
.cascade span:nth-child(2){padding-inline-start:1.1em}
.cascade span:nth-child(3){padding-inline-start:2.2em}
.cascade .cascade-end{margin-top:.9em;padding-top:.7em;border-top:1px solid rgba(54,0,12,.25);color:var(--wine);font-size:.78em;line-height:1.6}

/* ---------------- home: services families ---------------- */
.fam-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media(min-width:700px){.fam-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.fam-grid{grid-template-columns:repeat(4,1fr)}}
.fam{position:relative;display:flex;flex-direction:column;min-height:clamp(220px,22vw,300px);padding:30px 28px 32px;background:#fff;transition:background .5s var(--ease),color .5s var(--ease)}
.fam-no{font-size:.78rem;color:var(--wine);letter-spacing:.2em!important}
.fam h3{margin-top:auto;padding-top:40px;font-family:var(--f-display);font-size:clamp(1.45rem,2.2vw,1.85rem);line-height:1.3;color:var(--ink);transition:color .5s var(--ease)}
.fam-en{margin-top:8px;font-family:var(--f-en);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);transition:color .5s var(--ease)}
html[lang="en"] .fam-en{font-family:var(--f-ar);font-size:1rem;letter-spacing:0;text-transform:none}
.fam-go{position:absolute;top:28px;inset-inline-end:28px;width:30px;height:30px;border-radius:50%;border:1px solid rgba(54,0,12,.25);transition:.5s var(--ease)}
.fam-go::after{content:"←";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-en);font-size:.85rem;color:var(--wine)}
html[dir="ltr"] .fam-go::after{content:"→"}
.fam:hover{background:var(--wine)}
.fam:hover h3{color:#fff}.fam:hover .fam-en,.fam:hover .fam-no{color:rgba(245,245,245,.75)}
.fam:hover .fam-go{border-color:rgba(245,245,245,.5)}.fam:hover .fam-go::after{color:#fff}

/* ---------------- fit cards (home + solutions) ---------------- */
.fit{background:var(--bone)}
.fit-grid{display:grid;grid-template-columns:1fr;gap:clamp(48px,6vw,40px) clamp(24px,4vw,64px)}
@media(min-width:760px){.fit-grid{grid-template-columns:1fr 1fr}}
.fit-card{display:block;color:var(--ink)}
.fit-media{position:relative;aspect-ratio:5/6;overflow:hidden;background:var(--sand)}
.fit-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.fit-card:hover .fit-media img{transform:scale(1.05)}
.fit-body{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:26px}
.fit-no{font-size:.72rem;color:var(--wine);letter-spacing:.24em!important}
.fit-body h3{margin-top:10px;font-family:var(--f-display);font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.25;color:var(--ink);transition:color .4s var(--ease)}
.fit-desc{margin-top:12px;max-width:34em;color:var(--ink);font-size:.98rem;line-height:1.8}
.fit-sub{margin-top:14px;color:var(--wine);font-size:1.02rem}
html[lang="en"] .fit-sub{font-size:.9rem;letter-spacing:.04em}
.fit-go{margin-top:18px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(54,0,12,.3);position:relative;transition:background .4s var(--ease),border-color .4s var(--ease)}
.fit-go::after{content:"←";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-en);color:var(--wine)}
html[dir="ltr"] .fit-go::after{content:"→"}
.fit-card:hover .fit-go{background:var(--wine);border-color:var(--wine)}
.fit-card:hover .fit-go::after{color:#fff}
.fit-card:hover h3{color:var(--wine)}
.choices{background:#fff}

/* ---------------- home: featured projects ---------------- */
.feat-sec{background:#fff}
.feat-grid{display:grid;grid-template-columns:1fr;gap:28px 22px}
@media(min-width:760px){.feat-grid{grid-template-columns:1.3fr 1fr 1fr;align-items:end}}
.feat{display:block}
.feat-media{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r);background:var(--sand)}
@media(min-width:760px){.feat:first-child .feat-media{aspect-ratio:4/5}}
.feat-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.feat:hover .feat-media img{transform:scale(1.05)}
.feat-cap{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--hair)}
.feat-name{font-family:var(--f-display);font-size:1.15rem;color:var(--ink)}

/* ---------------- how we work (6 stages) ---------------- */
.process .shead h2{color:#fff}
.steps6{display:grid;grid-template-columns:1fr;gap:0 clamp(24px,4vw,56px)}
@media(min-width:700px){.steps6{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.steps6{grid-template-columns:repeat(3,1fr)}}
.st6{padding:28px 0 34px;border-top:1px solid rgba(245,245,245,.2)}
.st6 .st-no{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;border-radius:50%;background:transparent;border:1px solid rgba(245,245,245,.45);color:#fff;font-size:.72rem}
.st6 h4{margin-top:16px;font-family:var(--f-display);font-size:clamp(1.3rem,2vw,1.6rem);color:#fff;line-height:1.35}
.st6 p{margin-top:10px;color:rgba(245,245,245,.78);font-size:1rem;line-height:1.9;max-width:38ch}
html[lang="en"] .st6 p{font-size:.93rem;line-height:1.75}
.close-lines{margin-top:clamp(48px,6vw,80px);padding-top:32px;border-top:1px solid rgba(245,245,245,.2);font-family:var(--f-display);font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.55;color:#fff}
.close-lines span{display:block}
.close-lines span:nth-child(2){padding-inline-start:1.1em;color:rgba(245,245,245,.85)}
.close-lines span:nth-child(3){padding-inline-start:2.2em;color:rgba(245,245,245,.68)}

/* ---------------- light CTA band ---------------- */
.cta-light{position:relative;overflow:hidden;background:var(--bone);text-align:center}
.cta-light .cta-arch{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);width:min(70vw,480px);opacity:.5;pointer-events:none}
.cta-light .cta-arch path{fill:none;stroke:rgba(54,0,12,.18);stroke-width:1}
.cta-light .wrap{position:relative}
.cta-light .eyebrow{justify-content:center}
.cta-light .eyebrow::after{content:"";width:34px;height:1px;background:var(--taupe);opacity:.7}
.cta-light h2{margin-top:18px;font-family:var(--f-display);font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.1;color:var(--wine)}
.cta-light p{margin-top:16px;font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--ink)}
.cta-light .cta-actions{align-items:center;gap:30px;margin-top:38px}
.cta-light .text-link{margin-top:0}

/* ---------------- services page ---------------- */
.services .shead p{margin-top:0;color:var(--ink-soft)}
.rcv{background:var(--bone)}
.rcv .shead p{color:var(--ink);font-family:var(--f-display);font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.7;max-width:46ch}
.rcv-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair);border:1px solid var(--hair)}
@media(min-width:640px){.rcv-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.rcv-grid{grid-template-columns:repeat(4,1fr)}}
.rcv-item{background:#fff;padding:30px 26px 34px}
.rcv-item h3{font-size:clamp(1.25rem,1.8vw,1.45rem)}
.rcv-item p{font-size:.98rem}
.sectors-sec{background:#fff}
.sec-list{list-style:none;border-top:1px solid var(--hair)}
.sec-row{display:grid;grid-template-columns:auto 1fr;gap:6px 24px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--hair)}
@media(min-width:820px){.sec-row{grid-template-columns:70px minmax(220px,.9fr) 1.4fr;gap:40px}}
.sr-no{font-size:.72rem;color:var(--wine)}
.sr-name h3{font-family:var(--f-display);font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--ink);line-height:1.25}
.sr-alt{display:block;margin-top:4px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);font-family:var(--f-en)}
html[lang="en"] .sr-alt{font-family:var(--f-ar);font-size:1rem;letter-spacing:0;text-transform:none}
.sec-row p{grid-column:2;color:var(--ink);font-size:1.05rem;line-height:1.85}
@media(min-width:820px){.sec-row p{grid-column:auto}}

/* ---------------- solutions ---------------- */
.sol-sec{background:var(--bone)}
.sol-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 16px}
@media(min-width:1000px){.sol-grid{grid-template-columns:repeat(4,1fr);gap:22px}}
.sol{display:flex;flex-direction:column;gap:16px}
.sol-media{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r);background:var(--wine);color:#fff}
.sol-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.sol-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,0,10,.1) 30%,rgba(36,0,10,.82) 100%)}
.sol:hover .sol-media img{transform:scale(1.05)}
.sol-no{position:absolute;top:16px;inset-inline-start:16px;z-index:2;font-size:.7rem;color:rgba(255,255,255,.85)}
.sol-cap{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:22px 20px;display:flex;flex-direction:column;gap:4px}
.sol-cap h3{font-family:var(--f-ar);font-size:clamp(2rem,4.2vw,3rem);line-height:1.1;color:#fff}
.sol-cap .latin{font-size:.66rem;letter-spacing:.32em!important;color:rgba(255,255,255,.8)}
.sol .btn-line{align-self:stretch;padding-inline:12px}
@media(max-width:520px){.sol .btn-line{font-size:.82rem;padding:10px}}

/* ---------------- residential packages ---------------- */
.pkg-sec{background:#fff}
.pkg-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:0 auto clamp(40px,5vw,64px);padding:6px;border:1px solid var(--hair);border-radius:999px;width:max-content;max-width:100%}
.pkg-tab{padding:12px 24px;border-radius:999px;color:var(--ink);font-size:1rem;transition:background .35s var(--ease),color .35s var(--ease)}
html[lang="en"] .pkg-tab{font-size:.84rem;letter-spacing:.04em}
.pkg-tab:hover{color:var(--wine)}
.pkg-tab[aria-selected="true"]{background:var(--wine);color:#fff}
.pkg-tab:focus-visible{outline:2px solid var(--wine);outline-offset:2px}
@media(max-width:560px){.pkg-tabs{border-radius:var(--r);width:100%}.pkg-tab{flex:1 1 100%;border-radius:var(--r);padding:11px 14px}}
.pkg-panel{display:grid;grid-template-columns:1fr;gap:clamp(18px,2.4vw,28px);max-width:980px;margin-inline:auto}
.pkg-panel[hidden]{display:none}
@media(min-width:760px){.pkg-panel{grid-template-columns:1fr 1fr}}
.pkg{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:clamp(30px,4vw,48px);background:#fff;border:1px solid var(--hair);border-top:2px solid var(--wine);border-radius:var(--r);transition:box-shadow .5s var(--ease)}
.pkg:hover{box-shadow:0 30px 60px -44px rgba(54,0,12,.45)}
.pkg .mini-arch{position:absolute;top:-30px;inset-inline-end:-36px;width:190px;opacity:.9;pointer-events:none}
.pkg .mini-arch path{fill:none;stroke:rgba(54,0,12,.1);stroke-width:1.4}
.pkg-cat{font-size:.98rem;color:var(--ink-soft)}
html[lang="en"] .pkg-cat{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.pkg-name{margin-top:20px;font-family:var(--f-ar);font-size:clamp(3rem,6vw,4.4rem);line-height:1;color:var(--wine)}
.pkg-en{margin-top:12px;font-size:.72rem;letter-spacing:.34em!important;color:var(--ink-soft)}
.pkg-scope{margin-top:34px;padding-top:20px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:8px}
.ps-lbl{font-size:.92rem;color:var(--ink-soft)}
html[lang="en"] .ps-lbl{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.ps-vals{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.ps-val{font-family:var(--f-display);font-size:clamp(1.35rem,2.2vw,1.7rem);color:var(--ink)}
.ps-plus{color:var(--wine);font-family:var(--f-en)}
.pkg-note{margin-top:22px;font-size:.95rem;line-height:1.8;color:var(--ink-soft)}
.pkg .btn-line{margin-top:auto;align-self:flex-start}
.pkg-note{margin-bottom:28px}
.pkg-cross{margin-top:clamp(48px,6vw,72px);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 18px;color:var(--ink-soft);font-size:1.05rem}
.pkg-cross .text-link{margin-top:0}

/* ---------------- projects + reviews ---------------- */
.projects-sec{background:#fff}
.villa-head{gap:12px 18px;margin-bottom:24px;align-items:baseline}
.villa-no{font-size:.74rem;color:var(--wine)}
.villa-title{font-weight:400;font-size:clamp(1.7rem,3.4vw,2.6rem)}
.villa-en{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
html[lang="en"] .villa-en{font-size:1rem;letter-spacing:0;text-transform:none;font-family:var(--f-ar)}
.villa-tags{display:flex;gap:6px;flex-wrap:wrap;margin-inline-start:auto}
@media(max-width:640px){.villa-tags{margin-inline-start:0;width:100%}}
.vcard{border-width:3px}
.vpart-label{font-size:.62rem;letter-spacing:.2em!important;text-transform:uppercase;color:var(--wine)}
.villa+.villa{padding-top:clamp(40px,6vw,72px);border-top:1px solid var(--hair)}
.reviews{background:var(--bone)}
.rev-rating{display:inline-flex;align-items:baseline;gap:12px;flex-wrap:wrap;color:var(--ink);padding-bottom:6px;border-bottom:1px solid rgba(54,0,12,.25);transition:border-color .3s}
.rev-rating:hover{border-color:var(--wine)}
.rr-score{font-size:1.9rem;color:var(--wine);letter-spacing:.02em!important}
.stars{color:var(--wine);letter-spacing:.12em;font-family:var(--f-en);font-size:.95rem}
.rr-count{color:var(--ink-soft);font-size:.98rem}
.rev-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:900px){.rev-grid{grid-template-columns:repeat(3,1fr)}}
.rev{position:relative;display:flex;flex-direction:column;gap:18px;padding:34px 30px 36px;background:#fff;border:1px solid var(--hair);border-radius:var(--r)}
.rev::before{content:"”";position:absolute;top:6px;inset-inline-end:22px;font-family:var(--f-ar);font-size:5rem;line-height:1;color:rgba(54,0,12,.1)}
.rev-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rev-src{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
.rev blockquote{font-family:var(--f-ar);font-size:1.18rem;line-height:2;color:var(--ink);text-align:right}

/* ---------------- contact ---------------- */
.contact{background:#fff}
.contact-grid{align-items:start}
@media(min-width:960px){.contact-grid{grid-template-columns:1.25fr .75fr;gap:clamp(48px,6vw,96px)}}
.lead-card{padding:clamp(28px,4vw,52px);border:1px solid var(--hair);border-top:2px solid var(--wine);border-radius:var(--r);background:#fff}
.contact .lead-card h2{margin-top:16px;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.1;color:var(--wine)}
.form-lead{margin-top:12px;font-size:1.1rem;color:var(--ink)}
.lead-form{margin-top:34px;display:grid;grid-template-columns:1fr;gap:22px 26px}
@media(min-width:640px){.lead-form{grid-template-columns:1fr 1fr}}
.ff{display:flex;flex-direction:column;gap:8px;min-width:0}
.ff.full,.plan-note,.lead-form .btn{grid-column:1/-1}
.ff label,.ff-lbl{font-size:.95rem;color:var(--ink-soft)}
html[lang="en"] .ff label,html[lang="en"] .ff-lbl{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.ff input,.ff select,.ff textarea{width:100%;font:inherit;font-size:1.05rem;color:var(--ink);background:transparent;border:0;border-bottom:1px solid rgba(79,79,79,.3);border-radius:0;padding:10px 2px;transition:border-color .3s;-webkit-appearance:none;appearance:none}
.ff textarea{resize:vertical;min-height:110px;border:1px solid rgba(79,79,79,.3);border-radius:var(--r);padding:12px}
.ff select{background-image:linear-gradient(45deg,transparent 50%,var(--wine) 50%),linear-gradient(135deg,var(--wine) 50%,transparent 50%);background-size:5px 5px,5px 5px;background-repeat:no-repeat;background-position:left 10px center,left 5px center;padding-inline-end:28px}
html[dir="ltr"] .ff select{background-position:right 5px center,right 10px center}
.ff input:focus,.ff select:focus,.ff textarea:focus{outline:none;border-color:var(--wine)}
.ff-file{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 16px}
.ff-file .ff-lbl{flex-basis:100%}
.sr-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.file-btn{display:inline-flex;align-items:center;border:1px dashed rgba(54,0,12,.45);color:var(--wine);border-radius:999px;padding:9px 18px;font-size:.92rem;cursor:pointer;transition:background .3s}
.file-btn:hover{background:rgba(54,0,12,.05)}
.sr-file:focus-visible+.file-btn{outline:2px solid var(--wine);outline-offset:2px}
.file-name{font-size:.9rem;color:var(--ink-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.plan-note{font-size:.95rem;color:var(--wine);border-inline-start:2px solid var(--wine);padding-inline-start:12px}
.contact-meta{gap:24px}
.contact-meta .eyebrow{margin-bottom:4px}
.contact .map{margin-top:6px;aspect-ratio:4/3}
.cm-item .cm-val.addr{font-size:1.08rem}

/* ---------------- footer ---------------- */
footer{padding:clamp(60px,8vw,100px) var(--pad) 28px}
.foot-grid{max-width:var(--maxw);margin-inline:auto;display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:880px){.foot-grid{grid-template-columns:1.1fr .9fr 1.3fr;gap:56px}}
.foot-brand{display:flex;flex-direction:column;gap:18px}
.foot-logo{height:30px;width:auto;align-self:flex-start}
.foot-tag{font-size:.6rem;letter-spacing:.3em!important;color:rgba(245,245,245,.6);text-transform:uppercase}
.foot-nav{display:grid;grid-template-columns:repeat(2,max-content);gap:12px 40px;align-content:start}
.foot-nav a{color:rgba(245,245,245,.85);font-size:1rem;transition:color .3s}
html[lang="en"] .foot-nav a{font-size:.88rem}
.foot-nav a:hover{color:#fff}
.foot-contact{display:flex;flex-direction:column;gap:18px}
.fc-row{display:flex;flex-direction:column;gap:3px}
.fc-lbl{font-size:.85rem;color:rgba(245,245,245,.55)}
html[lang="en"] .fc-lbl{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase}
.fc-val{color:#fff;font-size:1rem;line-height:1.6}
a.fc-val:hover{color:var(--off)}
.foot-base{max-width:var(--maxw);margin:clamp(44px,6vw,72px) auto 0;padding-top:20px;border-top:1px solid rgba(245,245,245,.14);display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
footer .f-note{color:rgba(245,245,245,.55);font-size:.8rem}
footer a.f-note:hover{color:#fff}

/* ---------------- intro copy ---------------- */
html #introCard .sub.latin{direction:ltr;letter-spacing:.42em!important;text-transform:uppercase;font-size:.7rem;color:var(--b-silver)}
html[lang="ar"] #introCard .line{font-size:clamp(1.8rem,4.6vw,3.3rem);line-height:1.6}
html.intro-seen #intro,html.intro-seen #gateLayer,html.intro-seen #gateCover,html.intro-seen #introFlash{display:none}

/* ---------------- small screens ---------------- */
@media(max-width:560px){
  .hero-actions{flex-direction:column;gap:22px}
  .cta-light .cta-actions{flex-direction:column;gap:22px}
  .ph-inner{padding-top:130px}
  .fam{min-height:0}
  .fam h3{padding-top:28px}
  .rev{padding:28px 22px 30px}
}
/* .latin flips direction to LTR for correct glyph order; in RTL layouts the
   block-level ones must still sit on the right edge with their Arabic siblings */
html[dir="rtl"] :is(.pkg-en,.sol-cap .latin,.sr-no,.foot-tag,.fam-no,.svccard .en){text-align:right}
.fam-no{align-self:stretch}
.fc-row{align-items:flex-start}
.st6 p{color:rgba(245,245,245,.84);font-size:1.06rem}
.cta-light .cta-arch{width:min(84vw,600px);opacity:.38}
.rev::before{top:auto;bottom:-26px;inset-inline-end:18px;font-size:6rem}
.rev{overflow:hidden}
.cm-val.latin,.fc-val.latin{letter-spacing:.04em}
.cm-item .cm-val.latin{font-size:clamp(1.05rem,1.6vw,1.25rem)}
.hero .slogan{text-wrap:balance}
html[lang="en"] .hero .slogan{font-size:clamp(1.15rem,2.5vw,1.75rem)}
html[lang="en"] .eyebrow{font-size:1.18rem}
html[lang="en"] :is(.fam-en,.sr-alt,.villa-en,.svc-ghead .en,.svccard .en){font-size:1.12rem}
.hero .slogan span{white-space:nowrap}
.ff-file{position:relative}
.ff .sr-file{position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;padding:0;border:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}

/* =====================================================================
   SMOOTHNESS PASS — scroll, page transitions, richer home sections
   ===================================================================== */
/* Lenis drives the scroll; the browser's own smoothing would fight it */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* page-to-page: #site fades in on arrival and out before an internal link is followed */
html.js:not(.page-ready) #site{opacity:0}
html.page-leaving #site{opacity:0;transition:opacity .32s var(--ease)}
html.page-leaving .nav{opacity:0;transition:opacity .32s var(--ease)}

/* inner hero image settles in from a slight zoom (tween in heroIn) */
.page-hero .bg img{transform-origin:50% 50%;will-change:transform}

/* ---------------- home: service families as photo cards ---------------- */
.fam-grid{display:grid;grid-template-columns:1fr;gap:18px;background:none;border:0}
@media(min-width:620px){.fam-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.fam-grid{grid-template-columns:repeat(4,1fr);gap:22px}}
.fam{position:relative;display:block;min-height:0;padding:0;background:var(--wine);color:#fff;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4}
.fam-media{position:absolute;inset:0}
.fam-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),filter .8s var(--ease)}
.fam-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,0,10,.06) 35%,rgba(36,0,10,.78) 100%)}
.fam-cap{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:22px 22px 24px}
.fam-no{display:block;font-size:.66rem;color:rgba(245,245,245,.82);letter-spacing:.24em!important}
.fam h3{margin-top:12px;padding-top:0;font-family:var(--f-display);font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.3;color:#fff}
.fam-en{margin-top:6px;font-family:var(--f-en);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,245,245,.78)}
html[lang="en"] .fam-en{font-family:var(--f-ar);font-size:1rem;letter-spacing:0;text-transform:none}
.fam-go{position:absolute;top:18px;inset-inline-end:18px;z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(36,0,10,.25);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .4s var(--ease),border-color .4s var(--ease)}
.fam-go::after{content:"←";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-en);font-size:.9rem;color:#fff}
html[dir="ltr"] .fam-go::after{content:"→"}
.fam:hover{background:var(--wine)}
.fam:hover .fam-media img{transform:scale(1.06)}
.fam:hover h3{color:#fff}.fam:hover .fam-en,.fam:hover .fam-no{color:rgba(245,245,245,.9)}
.fam:hover .fam-go{background:#fff;border-color:#fff}.fam:hover .fam-go::after{color:var(--wine)}

/* ---------------- home: selected projects, one even row ---------------- */
@media(min-width:760px){.feat-grid{grid-template-columns:repeat(3,1fr);align-items:start}.feat:first-child .feat-media{aspect-ratio:3/4}}
.feat-media{border-radius:var(--r)}

/* ---------------- CTA band: project image under a wine scrim ---------------- */
.cta-band{position:relative;overflow:hidden;background:var(--wine);color:#fff;text-align:center}
.cta-band .bg{position:absolute;inset:-8% 0;z-index:0}
.cta-band .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta-band .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(36,0,10,.74) 0%,rgba(54,0,12,.62) 50%,rgba(36,0,10,.82) 100%)}
.cta-band .cta-arch{position:absolute;z-index:2;left:50%;bottom:-2px;transform:translateX(-50%);width:min(84vw,600px);opacity:.5;pointer-events:none}
.cta-band .cta-arch path{fill:none;stroke:rgba(245,245,245,.45);stroke-width:1}
.cta-band .wrap{position:relative;z-index:3}
.cta-band .eyebrow{color:#f5f5f5;justify-content:center}
.cta-band .eyebrow::before,.cta-band .eyebrow::after{content:"";width:34px;height:1px;background:#f5f5f5;opacity:.7}
.cta-band h2{margin-top:18px;font-family:var(--f-display);font-weight:400;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.1;color:#fff}
.cta-band p{margin-top:16px;font-size:clamp(1.05rem,1.8vw,1.3rem);color:rgba(245,245,245,.92);opacity:1;max-width:48ch;margin-inline:auto}
.cta-band .cta-actions{align-items:center;gap:30px;margin-top:38px}
.cta-band .text-link{margin-top:0}
.cta-band .btn.solid{padding:15px 32px}

/* ---------------- projects: softer photo stack, tags beside the title ---------------- */
.vcard{border-radius:6px}
.villa-tags{margin-inline-start:6px}
@media(max-width:640px){.villa-tags{margin-inline-start:0}}
.villa-title{line-height:1.2}

/* ---------------- quiet lifts on the static cards ---------------- */
.pkg,.rev,.lead-card{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pkg:hover{transform:translateY(-4px)}
.sol-media{transition:box-shadow .5s var(--ease)}
.sol:hover .sol-media{box-shadow:0 30px 50px -36px rgba(54,0,12,.6)}

/* ---------------- tagline: one line on every screen ----------------
   "Architecture • Interiors • Execution" measures ~22em + 40×letter-spacing
   in Arial. Below 600px the spacing tightens and the size follows the
   viewport so the three words never wrap. */
#introCard .sub.latin,.hero .tag,.foot-tag{white-space:nowrap}
@media(max-width:600px){
  html #introCard .sub.latin{letter-spacing:.24em!important;font-size:min(.7rem,calc((100vw - 56px) / 32))}
  .hero .tag{letter-spacing:.24em;font-size:min(.66rem,calc((100vw - 48px) / 32))}
  .foot-tag{letter-spacing:.2em!important;font-size:min(.6rem,calc((100vw - 48px) / 30.5))}
}

/* ---------------- main headings: one line on every screen ----------------
   Page titles, section titles and the hero slogan never wrap. When a title is
   wider than its column, fitHeadings() in js/site.js shrinks its font just
   enough to fit; everywhere else the sizes above apply unchanged. The column
   and flex/grid parents must be allowed to be narrower than the text. */
.ph-inner h1,.shead h2,.sec-title,.exp h2,.cta-band h2,.lead-card h2,.villa-title,.hero .slogan{white-space:nowrap;text-wrap:nowrap}
.shead{max-width:none}
.shead-row>div,.villa-head>.villa-title,.about-grid>*,.exp-grid>*,.view-grid>*,.contact-grid>*{min-width:0;max-width:100%}
.hero-inner{width:100%;min-width:0}
.hero .slogan.is-stacked{line-height:1.55}
.hero .slogan.is-stacked span{display:block}
.hero .slogan.is-stacked i{display:none}

/* =====================================================================
   SERVICES — the four families as photo cards (Oct 2026)
   Home: an expanding gallery, one family open at a time. Services page:
   each family unfolds with its photo beside its service cards.
   ===================================================================== */
/* ---- home stage: a vertical accordion on phones and tablets ----
   Between the open and closed states only compositor properties change
   (opacity, transform, the overlay washes); the card's own size is the one
   layout animation. The photo and the caption are sized to the OPEN card
   (initFamStage sets --fam-open/--fam-closed from the flex ratios), so growing
   a card reveals more of a still photo instead of re-cropping four images and
   rewrapping four captions on every frame. */
.fam-stage{display:flex;flex-direction:column;gap:10px}
.fam-stage .fam{position:relative;display:block;flex:none;height:96px;min-height:0;padding:0;overflow:hidden;border-radius:var(--r);background:var(--wine);color:#fff;aspect-ratio:auto;-webkit-tap-highlight-color:transparent;outline:none;contain:layout paint;transition:height 1s var(--ease),flex-grow 1s var(--ease)}
.fam-stage .fam.is-active{height:min(124vw,540px)}
.fam-stage .fam:focus-visible{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--wine)}
/* photo: a still window centred on the card; bleeds 6% top and bottom for the scroll drift */
.fam-stage .fam-media{position:absolute;inset:-6% 0;z-index:0;overflow:hidden}
.fam-stage .fam-media img{position:absolute;top:0;bottom:0;left:50%;height:100%;width:var(--fam-open,100%);max-width:none;margin-left:calc(var(--fam-open,100%) / -2);object-fit:cover;transform:scale(1.08);filter:saturate(.72);will-change:transform;transition:transform 1.5s var(--ease),filter 1s var(--ease)}
.fam-stage .fam.is-active .fam-media img{transform:none;filter:none}
.fam-stage .fam.is-active:hover .fam-media img{transform:scale(1.025)}
/* washes: a wine tint over the closed cards, a foot gradient under the open caption */
.fam-stage .fam-media::before{content:"";position:absolute;inset:0;background:rgba(36,0,10,.56);transition:opacity 1s var(--ease)}
.fam-stage .fam-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,0,10,0) 38%,rgba(36,0,10,.86) 100%);opacity:.55;transition:opacity 1s var(--ease)}
.fam-stage .fam.is-active .fam-media::before{opacity:0}
.fam-stage .fam.is-active .fam-media::after{opacity:1}
/* a soft light sweeps across the photo as a card opens (JS) */
.fam-stage .fam-sheen{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.13) 50%,rgba(255,255,255,0) 58%);transform:translateX(-130%);opacity:0}
/* caption, sized to the open card so its text never rewraps mid-animation */
.fam-stage .fam-cap{position:absolute;top:0;bottom:0;inset-inline-start:0;width:var(--fam-open,100%);z-index:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:16px 18px 18px;pointer-events:none}
.fam-stage .fam-no{display:flex;align-items:center;gap:10px;align-self:stretch;margin:0 0 auto;font-size:.66rem;color:rgba(245,245,245,.85);letter-spacing:.24em!important}
.fam-stage .fam-no::after{content:"";width:0;height:1px;background:rgba(245,245,245,.5);transition:width .9s var(--ease)}
/* .latin keeps the digits LTR; the row itself still starts at the page's inline-start, which is the closed card's visible edge */
html[dir="rtl"] .fam-stage .fam-no{flex-direction:row-reverse}
.fam-stage .fam.is-active .fam-no::after{width:34px;transition-delay:.3s}
/* closed: a small title at the foot; open: the full block fades up in its place */
.fam-stage .fam-title-sm{position:absolute;z-index:2;bottom:18px;inset-inline-start:18px;max-width:calc(var(--fam-closed,100%) - 36px);margin:0;font-family:var(--f-display);font-size:clamp(1.15rem,1.5vw,1.4rem);line-height:1.3;color:#fff;pointer-events:none;transition:opacity .45s var(--ease),transform .7s var(--ease)}
.fam-stage .fam.is-active .fam-title-sm{opacity:0;transform:translateY(-10px);transition-duration:.3s,.3s}
.fam-stage .fam-open{opacity:0;transform:translateY(26px);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.fam-stage .fam.is-active .fam-open{opacity:1;transform:none;transition:opacity .8s var(--ease) .32s,transform 1s var(--ease) .32s}
.fam-stage .fam h3{margin:0;padding:0;max-width:100%;font-family:var(--f-display);font-size:clamp(1.55rem,2.4vw,2.2rem);line-height:1.2;color:#fff}
.fam-stage .fam-en{display:block;margin:0;padding-top:8px}
.fam-stage .fam-list{list-style:none;margin:0;padding:12px 0 0;max-width:48ch;font-size:.95rem;line-height:1.75;color:rgba(245,245,245,.9)}
html[lang="en"] .fam-stage .fam-list{font-size:.9rem;line-height:1.7}
.fam-stage .fam-list li{display:inline}
.fam-stage .fam-list li+li::before{content:"·";margin-inline:.55em;color:rgba(245,245,245,.55)}
/* the counterpart language runs down the closed card's edge (desktop only) */
.fam-stage .fam-side{display:none;position:absolute;top:58px;z-index:2;writing-mode:vertical-rl;text-orientation:mixed;max-height:calc(100% - 190px);overflow:hidden;white-space:nowrap;font-family:var(--f-en);font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:rgba(245,245,245,.62);pointer-events:none;transition:opacity .5s var(--ease),transform .7s var(--ease)}
html[dir="rtl"] .fam-stage .fam-side{right:18px}
html[dir="ltr"] .fam-stage .fam-side{left:18px}
html[lang="ar"] .fam-stage .fam-side{direction:ltr}
html[lang="en"] .fam-stage .fam-side{direction:rtl;font-family:var(--f-ar);font-size:.95rem;letter-spacing:.04em;text-transform:none}
/* a soft shadow keeps the number, side label and titles legible over bright photos (blueprints, stone) */
.fam-stage .fam-no,.fam-stage .fam-side,.fam-stage .fam h3,.fam-stage .fam-title-sm{text-shadow:0 1px 10px rgba(20,0,6,.45)}
/* the arrow and the arch belong to the open card only; the arch draws itself in */
.fam-stage .fam-go{position:absolute;top:14px;inset-inline-end:14px;z-index:3;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.6);background:rgba(36,0,10,.28);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transform:scale(.8);transition:opacity .5s var(--ease),transform .6s var(--ease),background .4s var(--ease),border-color .4s var(--ease)}
.fam-stage .fam-go::after{content:"←";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-en);font-size:.95rem;color:#fff;transition:color .4s var(--ease)}
html[dir="ltr"] .fam-stage .fam-go::after{content:"→"}
.fam-stage .fam.is-active .fam-go{opacity:1;transform:none;transition-delay:.15s}
.fam-stage .fam.is-active:hover .fam-go{background:#fff;border-color:#fff}
.fam-stage .fam.is-active:hover .fam-go::after{color:var(--wine)}
.fam-stage .fam-arch{position:absolute;z-index:1;bottom:-2px;inset-inline-end:6%;width:38%;max-width:250px;opacity:0;pointer-events:none;transition:opacity 1s var(--ease)}
.fam-stage .fam-arch path{fill:none;stroke:rgba(245,245,245,.6);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s var(--ease)}
.fam-stage .fam.is-active .fam-arch{opacity:.34;transition-delay:.25s}
.fam-stage .fam.is-active .fam-arch path{stroke-dashoffset:0;transition-delay:.3s}
/* ---- desktop: one row, the open card takes the width ---- */
@media(min-width:981px){
  .fam-stage{flex-direction:row;gap:12px;height:clamp(440px,60vh,600px)}
  .fam-stage .fam{flex:1 1 0;min-width:0;height:auto}
  .fam-stage .fam.is-active{flex-grow:2.4;height:auto}
  .fam-stage .fam-cap{padding:22px 24px 26px}
  .fam-stage .fam-title-sm{bottom:26px;inset-inline-start:24px;max-width:calc(var(--fam-closed,100%) - 48px);font-size:clamp(1.05rem,1.2vw,1.25rem)}
  .fam-stage .fam-go{top:18px;inset-inline-end:18px}
  .fam-stage .fam-side{display:block}
  .fam-stage .fam.is-active .fam-side{opacity:0;transform:translateY(-8px)}
  .fam-stage .fam h3{font-size:clamp(1.6rem,2.3vw,2.2rem)}
}
@media(min-width:1200px){.fam-stage{gap:14px}.fam-stage .fam.is-active{flex-grow:2.8}}
/* entrance (JS): each card wipes in from its leading edge once the stage scrolls into view */
.js .fam-stage:not(.is-in) .fam{clip-path:inset(0 0 0 100%)}
html[dir="ltr"].js .fam-stage:not(.is-in) .fam{clip-path:inset(0 100% 0 0)}
@media(prefers-reduced-motion:reduce){.js .fam-stage:not(.is-in) .fam{clip-path:none}}

/* ---- services page: the family photo beside its cards ---- */
.svc-grid{display:grid;grid-template-columns:1fr;gap:24px}
.svc-fig{position:relative;margin:0;overflow:hidden;border-radius:var(--r);background:var(--bone);aspect-ratio:16/10}
.svc-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(min-width:900px){
  .svc-grid{grid-template-columns:minmax(260px,1fr) 1.9fr;gap:clamp(28px,4vw,56px);align-items:start}
  .svc-fig{position:sticky;top:96px;aspect-ratio:4/5;border-radius:0;clip-path:url(#archClip);-webkit-clip-path:url(#archClip)}
  .svc-main .svc-cards{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
}

/* ---------------- intro slogan station: one line on every screen ----------------
   Station 2 of the intro repeats the hero slogan. The Arabic line measures
   ~15.6em in Times and the English ~28.7em in Arial; the card is capped at
   820px, so the size follows the narrower of the viewport and the card instead
   of wrapping. English on phones would need <15px, so there it breaks only
   between the three phrases (each phrase stays whole), like the hero's stacked
   fallback. */
#introCard .line.slogan span{white-space:nowrap}
html[lang="ar"] #introCard .line.slogan{white-space:nowrap;font-size:min(clamp(1.8rem,4.6vw,3.3rem),calc(min(100vw - 48px,820px)/16))}
html[lang="en"] #introCard .line.slogan{font-size:max(15px,min(clamp(1.55rem,4vw,3rem),calc(min(100vw - 48px,820px)/29.3)))}

/* ---------------- address: two fixed lines (street + area / city + country) ----------------
   Replaces the dash-separated run; each line stays whole in both languages. */
.addr-l{display:block;white-space:nowrap}
.fc-val .addr-l+.addr-l,.cm-val .addr-l+.addr-l{color:rgba(245,245,245,.66);font-size:.92em;margin-top:2px}
.cm-val .addr-l+.addr-l{color:var(--ink-soft)}

/* =====================================================================
   CONTENT + MOBILE PASS (Oct 2026)
   New sections from the client's mobile layout brief, then one type scale
   and one rhythm for phones: Arabic runs smaller and lighter, every heading
   level has one size, rows of photos swipe instead of stacking.
   ===================================================================== */
/* ---------------- how we approach your project (home) ---------------- */
.process .shead .work-lead{margin-top:22px;max-width:58ch;font-family:var(--f-display);font-size:clamp(1.08rem,1.6vw,1.3rem);line-height:1.9;color:rgba(245,245,245,.84)}
.close-line{margin-top:clamp(44px,6vw,80px);padding-top:30px;border-top:1px solid rgba(245,245,245,.2);max-width:46ch;font-family:var(--f-display);font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.75;color:#fff}

/* ---------------- packages: what each one includes ---------------- */
.pkg .ps-lbl{display:block}
.pkg-incl{margin-top:26px;padding-top:20px;border-top:1px solid var(--hair)}
.pkg-incl>.ps-lbl{margin-bottom:10px}
.pkg-group+.pkg-group{margin-top:20px}
.pkg-gt{margin:0 0 8px;font-family:var(--f-display);font-size:1rem;font-weight:400;color:var(--wine)}
html[lang="en"] .pkg-gt{font-size:.84rem;letter-spacing:.06em}
.pkg-list{list-style:none;margin:0;padding:0}
.pkg-list li{position:relative;padding-inline-start:18px;font-size:.98rem;line-height:1.8;color:var(--ink)}
.pkg-list li+li{margin-top:4px}
.pkg-list li::before{content:"";position:absolute;inset-inline-start:2px;top:.82em;width:6px;height:1px;background:var(--wine);opacity:.7}
html[lang="en"] .pkg-list li{font-size:.92rem;line-height:1.7}
.pkg-list bdi{font-family:var(--f-en);font-size:.86em;letter-spacing:.02em}
.pkg-incl.is-folded li:nth-child(n+6),.pkg-incl.is-folded .pkg-group+.pkg-group{display:none}
.pkg-more{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;color:var(--wine);font-size:.95rem;border-bottom:1px solid rgba(54,0,12,.3)}
html[lang="en"] .pkg-more{font-size:.84rem}
.pkg-more .latin{font-size:.78em;letter-spacing:.06em!important;opacity:.75}
.pkg-more .pm-close,.pkg-more[aria-expanded="true"] .pm-open{display:none}
.pkg-more[aria-expanded="true"] .pm-close{display:inline}
.pkg-fit{margin:22px 0 30px;padding-top:18px;border-top:1px solid var(--hair);font-size:1rem;line-height:1.8;color:var(--ink)}
.pkg-fit .ps-lbl{margin-bottom:4px}
html[lang="en"] .pkg-fit{font-size:.94rem}

/* ---------------- sector solutions: category + description ---------------- */
.sol-body{display:flex;flex-direction:column;gap:8px}
.sol-cat{font-family:var(--f-display);font-weight:400;font-size:1.12rem;line-height:1.45;color:var(--wine)}
.sol-desc{font-size:.96rem;line-height:1.85;color:var(--ink)}
html[lang="en"] .sol-cat{font-size:1rem}
html[lang="en"] .sol-desc{font-size:.9rem;line-height:1.7}
.sol .btn-line{margin-top:auto}

/* ---------------- projects: a second group (interior fit-out) ---------------- */
.villa-group{margin-top:clamp(64px,8vw,110px);padding-top:clamp(40px,6vw,72px);border-top:1px solid var(--hair);margin-bottom:clamp(28px,4vw,48px)}

/* ---------------- intro: a quieter, smaller Arabic line ---------------- */
html[lang="ar"] #introCard .line{font-size:clamp(1.3rem,3vw,2.3rem);line-height:2;color:rgba(245,245,245,.94);text-shadow:0 2px 24px rgba(0,0,0,.35)}
html[lang="ar"] #introCard .line.slogan{font-size:min(clamp(1.2rem,2.6vw,2rem),calc(min(100vw - 96px,820px)/16));line-height:1.6}

/* =====================================================================
   PHONES (≤760px) — one scale, one rhythm
   ===================================================================== */
@media(max-width:760px){
  /* Times New Roman's Arabic no longer needs the 110% desktop boost at arm's length */
  html[lang="ar"]{font-size:100%}

  /* rhythm */
  .sec-pad{padding-block:72px}
  .shead{margin-bottom:34px}
  .shead h2,.sec-title{margin-top:14px}
  .statement{margin-top:40px;padding-top:24px}

  /* eyebrows: one quiet size, kept to a single line */
  html[lang="ar"] .eyebrow{font-size:.6rem;letter-spacing:.22em}
  html[lang="en"] .eyebrow{font-size:1rem}
  .eyebrow::before,.cta-band .eyebrow::after{width:24px}

  /* headings: display / section / item */
  .ph-inner h1{font-size:2.6rem;margin-top:14px}
  .shead h2,.sec-title,.exp h2,.cta-band h2,.cta-light h2,.contact .lead-card h2{font-size:1.95rem;line-height:1.3}
  html[lang="en"] :is(.shead h2,.sec-title,.exp h2,.cta-band h2,.contact .lead-card h2){font-size:1.7rem}
  .villa-title{font-size:1.5rem}
  .fit-body h3,.why-item h3,.rcv-item h3,.st6 h4,.sr-name h3,.svc-ghead h3{font-size:1.28rem;line-height:1.45}
  html[lang="en"] :is(.fit-body h3,.why-item h3,.rcv-item h3,.st6 h4,.sr-name h3,.svc-ghead h3){font-size:1.12rem}
  .svccard h4,html[lang="ar"] .svccard h4{font-size:1.08rem}
  .fam-stage .fam h3{font-size:1.45rem}
  .fam-stage .fam-title-sm{font-size:1.08rem}
  .pkg-name{font-size:2.5rem}
  .sol-cap h3{font-size:1.9rem}
  .rr-score{font-size:1.6rem}

  /* lead lines: one size for every opening paragraph */
  .about .lead-line,.exp .vis-lead,.why-lead,.rcv .shead p,.process .shead .work-lead,.cta-band p,.form-lead{font-size:1.12rem!important;line-height:1.95}
  html[lang="en"] :is(.about .lead-line,.exp .vis-lead,.why-lead,.rcv .shead p,.process .shead .work-lead,.cta-band p,.form-lead){font-size:1.02rem!important;line-height:1.75}
  .statement,.close-line{font-size:1.12rem;line-height:1.95}
  html[lang="en"] :is(.statement,.close-line){font-size:1.02rem;line-height:1.75}

  /* body copy */
  .about p.body,.exp p,.why-item p,.rcv-item p,.st6 p,.sec-row p,.fit-desc,.sol-desc,.pkg-list li,.pkg-fit,.svccard p{font-size:.98rem;line-height:1.95}
  html[lang="en"] :is(.about p.body,.exp p,.why-item p,.rcv-item p,.st6 p,.sec-row p,.fit-desc,.sol-desc,.pkg-list li,.pkg-fit,.svccard p){font-size:.92rem;line-height:1.72}
  .rev blockquote{font-size:1.04rem;line-height:2}
  .legal-note,.fine-note,.pkg-note{font-size:.86rem}

  /* hero */
  .hero-logo{width:min(54vw,300px)}
  .hero .slogan{font-size:1.25rem;margin-top:26px}
  .hero .lede{font-size:1rem;margin-top:10px}
  .hero-actions{margin-top:34px}
  .btn,html[lang="ar"] .btn{font-size:.95rem;padding:13px 28px}
  .hero .btn.solid,.cta-band .btn.solid{padding:14px 30px}

  /* inner page hero */
  .page-hero{min-height:min(62svh,520px)}
  .ph-inner{padding-top:120px;padding-bottom:44px}

  /* cards and lists */
  .why-item{padding:26px 0 28px}
  .st6{padding:24px 0 26px}
  .rcv-item{padding:24px 22px 26px}
  .sec-row{padding:22px 0}
  .fit-body{padding-top:20px}
  .fit-grid{gap:44px}
  .pkg{padding:28px 22px}
  .pkg .mini-arch{width:150px}
  .lead-card{padding:28px 20px}
  .lead-form{gap:20px;margin-top:28px}
  .contact-meta{gap:20px}

  /* touch targets: 44px where a thumb lands */
  .lang-toggle{min-height:40px;padding:8px 14px}
  .menu-btn{padding:14px 10px;margin-inline-end:-10px}
  .foot-nav a{display:inline-block;padding-block:6px}
  .fc-val,.cm-item .cm-val{display:inline-block;padding-block:4px}
  .foot-nav{gap:4px 40px}
  .text-link{padding-block:8px}

  /* full-screen menu */
  .nav-links{gap:20px}
  .nav-links a,html[lang="ar"] .nav-links a{font-size:1.3rem}
  html[lang="en"] .nav-links a{font-size:1rem;letter-spacing:.14em}
  .nav-links a.nav-cta{margin-top:10px;padding:11px 26px;font-size:1.05rem}

  /* packages: the three categories sit in one row */
  .pkg-tabs{flex-wrap:nowrap;width:100%;border-radius:999px;gap:4px;padding:4px}
  .pkg-tab{flex:1 1 0;min-width:0;padding:11px 6px;border-radius:999px;font-size:.9rem;line-height:1.3;white-space:nowrap}
  html[lang="en"] .pkg-tab{font-size:.74rem;white-space:normal;letter-spacing:.02em}

  /* services page: the portrait photos keep their portrait frame */
  .svc-fig[data-fam="svc-fitout"]{aspect-ratio:4/5}
  .svc-fig[data-fam="svc-pm"]{aspect-ratio:1/1}
  .svc-fig[data-fam="svc-design"]{aspect-ratio:4/3}
}

/* ---------------- swipe rows (phones and small tablets) ----------------
   Rows that sit side by side on desktop become one swipeable row with the
   next card peeking in, instead of a long stack of full-width photos. */
@media(max-width:759px){
  .feat-grid,.villa-parts{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
  .feat-grid::-webkit-scrollbar,.villa-parts::-webkit-scrollbar,.rev-grid::-webkit-scrollbar{display:none}
  .feat{flex:0 0 76%;scroll-snap-align:start}
  .feat-name{font-size:1.05rem}
  /* project parts: three photo stacks, each large enough to read */
  .villa-parts{padding-top:18px;padding-bottom:6px}
  .vpart{flex:0 0 64%;scroll-snap-align:start}
  .vcard{border-width:3px;border-radius:6px;transform:translate(6%,-5%) rotate(3.5deg) scale(.95)}
  .vpart-cap{flex-direction:row;align-items:center;margin-top:14px;gap:10px}
  .vpart-label{font-size:.66rem}
  .vpart-count{font-size:.66rem}
  .vpart-hint{width:30px;height:30px}
  .villa-head{margin-bottom:14px}
  /* sector solutions: one per row, photo first */
  .sol-grid{grid-template-columns:1fr;gap:44px}
  .sol-media{aspect-ratio:4/3}
}
@media(max-width:899px){
  .rev-grid{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
  .rev{flex:0 0 min(84%,420px);scroll-snap-align:start}
}
@media(max-width:560px){
  .rev{padding:26px 22px 28px}
}
@media(max-width:560px){
  .cta-band .cta-actions{flex-direction:column;gap:20px}
}
@media(max-width:760px){
  /* services families: number · title · chevron on one row, the counterpart name always below */
  .svc-ghead{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 14px;margin-bottom:22px;padding-bottom:16px}
  .svc-ghead .g-no{grid-row:1;grid-column:1;min-width:30px;height:30px;font-size:.7rem}
  .svc-ghead h3{grid-row:1;grid-column:2}
  .svc-ghead .chev{grid-row:1;grid-column:3;margin:0}
  .svc-ghead .en{grid-row:2;grid-column:2;font-size:.66rem!important;letter-spacing:.14em!important}
  html[lang="en"] .svc-ghead .en{font-size:1rem!important;letter-spacing:0!important}
  .svccard{padding:20px 18px 22px}
  html[lang="ar"] .svccard .en{font-size:.64rem;letter-spacing:.12em}
  .svc-group+.svc-group{margin-top:34px}
}
@media(max-width:760px){
  html[lang="en"] .btn{font-size:.8rem;letter-spacing:.08em}
  html[lang="en"] .btn.wide{letter-spacing:.04em}
}

/* =====================================================================
   HOME — the client's single-page order (Oct 2026)
   ===================================================================== */
/* about brief: a centred statement that leads into "عن RASA" */
.about.brief{background:#fff;padding-block:clamp(72px,9vw,130px)}
.brief-in{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:860px}
.brief-in .eyebrow::after{content:"";width:34px;height:1px;background:var(--taupe);opacity:.7}
.brief-in .lead-line{max-width:40ch;margin-inline:auto}
body[data-page="home"] #about-us{background:var(--bone)}
/* why RASA: the heading shares its row with a photo */
.why-head{display:grid;grid-template-columns:1fr;gap:28px;margin-bottom:clamp(36px,5vw,64px)}
.why-head .shead{margin-bottom:0}
.why-fig{position:relative;margin:0;overflow:hidden;aspect-ratio:4/3;border-radius:var(--r);background:var(--bone)}
.why-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
@media(min-width:900px){
  .why-head{grid-template-columns:1.25fr .75fr;align-items:end;gap:clamp(40px,6vw,96px)}
  .why-fig{aspect-ratio:4/5;border-radius:0;clip-path:url(#archClip);-webkit-clip-path:url(#archClip)}
}
/* home section rhythm: the packages and solutions heads sit centred over their content */
body[data-page="home"] #packages .shead,body[data-page="home"] #sector-solutions .shead{text-align:center;margin-inline:auto}
body[data-page="home"] #packages .shead .eyebrow,body[data-page="home"] #sector-solutions .shead .eyebrow{justify-content:center}
body[data-page="home"] #packages .shead .eyebrow::after,body[data-page="home"] #sector-solutions .shead .eyebrow::after{content:"";width:34px;height:1px;background:var(--taupe);opacity:.7}
/* services brief, titles only: the open card needs less height on phones */
@media(max-width:980px){.fam-stage.titles-only .fam.is-active{height:min(100vw,440px)}}
@media(max-width:760px){
  .about.brief{padding-block:64px}
  .brief-in .lead-line{font-size:1.18rem!important}
  html[lang="en"] .brief-in .lead-line{font-size:1.05rem!important}
  .why-fig{aspect-ratio:4/3}
}

/* ---------------- final polish (Oct 2026) ---------------- */
/* intro: the words sit a little below the middle of the screen */
.intro-ui{padding-top:calc(24px + 14svh)}
/* tracked capitals carry their letter-spacing after the last letter too; the
   matching space before the first letter keeps the line optically centred */
html #introCard .sub.latin{padding-left:.42em}
.hero .tag{padding-left:.34em}
@media(max-width:600px){
  html #introCard .sub.latin{padding-left:.24em}
  .hero .tag{padding-left:.24em}
}
@media(max-width:760px){
  /* smallest text floor: tracked Latin labels never drop below ~10.5px */
  html[lang="ar"] .eyebrow{font-size:.66rem;letter-spacing:.2em}
  .tagpill,.rev-src,.fam-no,.fam-stage .fam-no,.sol-cap .latin,.sol-no,.vpart-label,.vpart-count,.svccard .en,html[lang="ar"] .svccard .en,.fam-en,.fam-stage .fam-en{font-size:.66rem}
  .pkg-en{font-size:.7rem}
  .ps-lbl,.pkg .ps-lbl{font-size:.88rem}
  html[lang="en"] .ps-lbl{font-size:.7rem}
}
@media(max-width:600px){
  html #introCard .sub.latin{letter-spacing:.2em!important;font-size:min(.74rem,calc((100vw - 52px) / 30.5));padding-left:.2em}
  .hero .tag{letter-spacing:.2em;font-size:min(.7rem,calc((100vw - 48px) / 30.5));padding-left:.2em}
}
/* intro, last details: the Arabic enter button reads at body size */
html[lang="ar"] .enter-btn{font-size:.98rem;padding:14px 32px}
@media(max-width:600px){
  /* English intro on phones: the slogan's three phrases stack, the second line stays small */
  html[lang="en"] #introCard .line{font-size:1.12rem;line-height:1.75;letter-spacing:.01em}
  html[lang="en"] #introCard .line.slogan{font-size:0;line-height:2.1}
  html[lang="en"] #introCard .line.slogan span{display:block;font-size:1.12rem;white-space:nowrap}
  html[lang="en"] .enter-btn{font-size:.72rem;letter-spacing:.18em;padding:14px 28px}
}
@media(max-width:600px){
  .foot-tag{letter-spacing:.2em!important;font-size:min(.7rem,calc((100vw - 48px) / 30.5))}
}

/* ---------------- side photos and videos keep their full frame (Oct 2026) ----------------
   Every picture that sits beside text shows the whole image: the frame takes the
   picture's own proportions and the arch only rounds its top. */
.about .a-media,.exp .e-media{aspect-ratio:auto;height:auto}
.media.vid-wrap video{position:relative;inset:auto;display:block;width:100%;height:auto;object-fit:cover}
.why-fig,.svc-fig,.svc-fig[data-fam]{aspect-ratio:auto!important}
.why-fig img,.svc-fig img,.fit-media img{position:relative;inset:auto;display:block;width:100%;height:auto}
.fit-media{aspect-ratio:auto}
/* project stacks: a 4:5 frame matches the renders, so nothing is trimmed */
.vpart-media{aspect-ratio:4/5}
/* with one WhatsApp band, the home sections alternate light and pale grey */
.why-fig{border-radius:0;clip-path:url(#archClip);-webkit-clip-path:url(#archClip)}


/* ---------------- home: Our Solutions as two options that unfold ---------------- */
.hub-sec{background:#fff}
body[data-page="home"] #projects{background:var(--bone)}
body[data-page="home"] #reviews{background:#fff}
.hub{border-top:1px solid var(--hair)}
.hub-opt{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px clamp(18px,3vw,40px);padding:22px 0;border-bottom:1px solid var(--hair);text-align:start;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.hub-opt:focus-visible{outline:2px solid var(--wine);outline-offset:4px}
.hub-thumb{display:block;width:clamp(68px,18vw,150px);overflow:hidden;background:var(--bone);clip-path:url(#archClip);-webkit-clip-path:url(#archClip)}
.hub-thumb img{display:block;width:100%;height:auto;transition:transform 1.2s var(--ease)}
.hub-opt:hover .hub-thumb img{transform:scale(1.05)}
.hub-txt{display:flex;flex-direction:column;min-width:0}
.hub-no{font-size:.66rem;color:var(--wine);letter-spacing:.24em!important}
html[dir="rtl"] .hub-no{text-align:right}
.hub-t{margin-top:6px;font-family:var(--f-display);font-size:clamp(1.35rem,2.6vw,2.2rem);line-height:1.25;color:var(--ink);transition:color .4s var(--ease)}
.hub-s{margin-top:6px;font-size:.9rem;line-height:1.6;color:var(--ink-soft)}
html[lang="en"] .hub-s{font-size:.82rem;letter-spacing:.02em}
.hub-go{position:relative;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(54,0,12,.3);transition:background .45s var(--ease),border-color .45s var(--ease)}
.hub-go::after{content:"←";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-en);color:var(--wine);transition:transform .5s var(--ease),color .45s var(--ease)}
html[dir="ltr"] .hub-go::after{content:"→"}
.hub-opt:hover .hub-t,.hub-opt[aria-expanded="true"] .hub-t{color:var(--wine)}
.hub-opt[aria-expanded="true"] .hub-go{background:var(--wine);border-color:var(--wine)}
.hub-opt[aria-expanded="true"] .hub-go::after{color:#fff}
html[dir="rtl"] .hub-opt[aria-expanded="true"] .hub-go::after{transform:rotate(90deg)}
html[dir="ltr"] .hub-opt[aria-expanded="true"] .hub-go::after{transform:rotate(-90deg)}
.hub-panel{padding:clamp(28px,4vw,48px) 0 clamp(40px,5vw,64px);border-bottom:1px solid var(--hair)}
.hub-panel .pkg-tabs{margin-bottom:clamp(28px,4vw,48px)}
.hub-sec .shead{margin-bottom:clamp(28px,4vw,48px)}

/* ---------------- phones: a calmer landing hero ----------------
   The intro has just shown the logo, tagline and both lines, so the hero keeps
   only the wordmark, the slogan and the two actions. */
@media(max-width:760px){
  .hero .tag,.hero .lede{display:none}
  .hero-logo{width:min(44vw,240px)}
  .hero .slogan{margin-top:22px;font-size:1.15rem}
  html[lang="en"] .hero .slogan{font-size:1rem}
  .hero-actions{margin-top:30px;gap:18px}
}
.nb{white-space:nowrap}

/* =====================================================================
   DETAIL SCREENS (Oct 2026) — About, Services, Packages, Sector Solutions
   slide over the home page; each scrolls on its own and has a back button
   at the top left. Forward motion follows the reading direction.
   ===================================================================== */
.screen{position:fixed;inset:0;z-index:8600;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#fff;transform:translate3d(100%,0,0);transition:transform .66s cubic-bezier(.22,1,.36,1),box-shadow .66s ease}
html[dir="rtl"] .screen{transform:translate3d(-100%,0,0)}
html .screen.open,html[dir] .screen.open{transform:none;box-shadow:0 0 90px rgba(20,0,6,.3)}
.screen[hidden]{display:none}
html.screen-open,html.screen-open body{overflow:hidden}
/* back button: a small glass pill over the hero, solid wine once the hero has gone */
.scr-bar{position:sticky;top:0;z-index:6;height:0}
.scr-back{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:16px;direction:ltr;display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 18px 0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.38);background:rgba(36,0,10,.36);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;font-size:.92rem;line-height:1;cursor:pointer;transition:background .45s var(--ease),border-color .45s var(--ease),transform .3s var(--ease)}
html[lang="en"] .scr-back{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.scr-back svg{flex:none;transition:transform .35s var(--ease)}
.scr-back:hover svg{transform:translateX(-3px)}
.scr-back:active{transform:scale(.97)}
.scr-back:focus-visible{outline:2px solid #fff;outline-offset:3px}
.screen.is-solid .scr-back{background:rgba(54,0,12,.92);border-color:rgba(54,0,12,.92)}
@media(min-width:761px){.scr-back{top:22px;left:var(--pad)}}
/* hero: shorter than a page hero; it settles in as the screen arrives */
.scr-hero{min-height:min(52svh,480px)}
@media(min-width:761px){.scr-hero{min-height:clamp(380px,54vh,560px)}}
.screen .ph-inner>*{opacity:0}
.screen.open .ph-inner>*{animation:scrUp .9s var(--ease) .22s both}
.screen.open .ph-inner>*:nth-child(2){animation-delay:.32s}
.screen.open .scr-hero .bg img{animation:scrZoom 1.8s var(--ease) both}
.screen.open .scr-hero .archline{animation:scrFade 1.4s var(--ease) .3s both}
@keyframes scrUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes scrZoom{from{transform:scale(1.07)}to{transform:none}}
@keyframes scrFade{from{opacity:0}to{opacity:.42}}
/* content inside a screen is simply there: no window-scroll reveals */
.js .screen .reveal,.js .screen .stagger>*{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.screen .ph-inner>*{opacity:1}}
/* once the hero has scrolled away, a slim wine bar (like the site's own top bar) sits behind the back button */
.scr-bar::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(70px + env(safe-area-inset-top,0px));background:rgba(36,0,10,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(245,245,245,.18);opacity:0;transform:translateY(-100%);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.screen.is-solid .scr-bar::before{opacity:1;transform:none}
.screen.is-solid .scr-back{background:transparent;border-color:rgba(245,245,245,.45)}
@media(min-width:761px){.scr-bar::before{height:86px}}

/* hero actions: "Discover what we offer" leads (solid, bolder); "Start your project" follows, lighter */
.hero .hero-discover{font-weight:700;letter-spacing:.01em}
html[lang="en"] .hero .hero-discover{font-weight:700;letter-spacing:.1em}
.hero .hero-start{font-weight:400;opacity:.86}
.hero .hero-start:hover{opacity:1}