/* ============================================================
   SADEN — COMING SOON · PRODUCTION
   Direction B · THE KEEP / VALUE REVEALED

   Arabic is the primary composition. The English view is the mirror,
   not the source. Palette is the August-2026 Saden guidelines only.

   Type: Alexandria (SIL OFL). The guidelines specify Hacen Saudi
   Arabia, whose web licence is unverified (KB M-09) — no Hacen file
   is bundled, embedded or referenced anywhere in this build.

   Backgrounds are PRE-RENDERED blurred WebP. No full-screen CSS blur
   filter runs at any point; backdrop-filter is used on two small
   controls only.
   ============================================================ */

@font-face{font-family:'Saden';src:url('../fonts/Alexandria-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Saden';src:url('../fonts/Alexandria-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Saden';src:url('../fonts/Alexandria-ExtraBold.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap}

:root{
  --ink:#101F34;
  --deep:#0A4D57;
  --teal:#00A69C;
  --white:#fff;
  --on-soft:rgba(255,255,255,.76);
  --on-faint:rgba(255,255,255,.50);
  --on-dim:rgba(255,255,255,.34);
  --line:rgba(0,166,156,.42);
  --line-soft:rgba(255,255,255,.14);
  --wrap:1240px;
  --gut:clamp(22px,4.4vw,72px);
  --ease:cubic-bezier(.16,1,.3,1);
  --reveal:cubic-bezier(.32,.72,.24,1);
  /* header mark height. The masthead is 1.30x this (mark + 2 x 15% SafeZone),
     so the hero's top padding is derived from it and never collides. */
  --mark:clamp(82px,9.4vw,132px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{margin:0;background:var(--ink);color:var(--white);
  font-family:'Saden',system-ui,'Segoe UI',sans-serif;font-weight:500;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
::selection{background:var(--teal);color:#04202a}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);width:100%;position:relative}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:0;inset-inline-start:14px;transform:translateY(-140%);z-index:999;
  background:var(--white);color:var(--ink);padding:10px 18px;border-radius:0 0 4px 4px;
  font-weight:700;font-size:14px;transition:transform .25s var(--ease)}
.skip:focus{transform:translateY(0)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
.ltr{unicode-bidi:isolate;direction:ltr;display:inline-block}

/* ---------- the Saden keyline device: a hairline that ends in open circles ---------- */
.span{display:flex;align-items:center;gap:0;height:12px;width:100%}
.span i{width:8px;height:8px;border:1.4px solid var(--teal);border-radius:50%;flex:none}
.span span{flex:1;height:1px;background:var(--line)}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;
  color:var(--teal);letter-spacing:.04em}
html[lang="en"] .eyebrow{font-size:11px;letter-spacing:.26em;text-transform:uppercase}
.eyebrow::before{content:'';width:7px;height:7px;border:1.4px solid var(--teal);
  border-radius:50%;flex:none}

/* ---------- masthead ----------
   The brand is the primary lockup from the guidelines: silver mark inside the
   teal keyline, the version the guidelines themselves show on a deep field.
   It sits on the page grid — the same column every headline below uses — and
   carries the SafeZone rule from the guidelines: clear space on all four sides
   equal to 15% of the mark's height. */
.head{position:fixed;top:0;inset-inline:0;z-index:80;pointer-events:none}
.head-in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:clamp(9px,1.1vh,14px)}
/* Headlines scroll underneath the mark, so the bar needs something behind it.
   A soft top falloff reads as part of the atmosphere at the top of the page
   and keeps the logo legible over every section below. */
.head::before{content:'';position:absolute;inset-inline:0;top:0;height:calc(100% + 44px);
  z-index:-1;pointer-events:none;
  background:linear-gradient(180deg, rgba(16,31,52,.94) 0%, rgba(16,31,52,.72) 44%,
    rgba(16,31,52,.30) 76%, rgba(16,31,52,0) 100%)}
/* a hairline on the page grid: the masthead has a baseline, so it belongs to
   the layout instead of hovering over it */
.head{--brandbox:calc(var(--mark) * 1.014)}
.head::after{content:'';position:absolute;bottom:0;height:1px;pointer-events:none;
  inset-inline:calc((100% - min(100%, var(--wrap)))/2 + var(--gut));
  background:linear-gradient(to left, rgba(0,166,156,.52) 0 var(--brandbox),
    rgba(255,255,255,.10) var(--brandbox) 100%)}
html[dir="ltr"] .head::after{background:linear-gradient(to right,
  rgba(0,166,156,.52) 0 var(--brandbox), rgba(255,255,255,.10) var(--brandbox) 100%)}
.head-in>*{pointer-events:auto}
/* SafeZone: clear space on every side = 15% of the mark's height */
.brand{display:block;padding:calc(var(--mark) * .15)}
.brand img{height:var(--mark);width:auto}
.head-r{display:flex;align-items:center;gap:10px}
/* the control speaks the same language as the keyline devices elsewhere:
   an open frame and a teal node, not a generic pill */
.lang{position:relative;font:inherit;font-weight:700;background:none;border:0;
  color:var(--on-soft);padding:13px 19px;cursor:pointer;
  display:inline-flex;align-items:center;gap:11px;
  transition:color .3s var(--ease)}
.lang[lang="en"]{font-size:12px;letter-spacing:.17em;text-transform:uppercase}
.lang[lang="ar"]{font-size:13.5px;letter-spacing:0}
.lang::before{content:'';position:absolute;inset:0;z-index:-1;
  border:1px solid rgba(255,255,255,.22);border-inline-end:0;
  transition:border-color .3s var(--ease)}
.lang::after{content:'';width:6px;height:6px;border:1.4px solid var(--teal);
  border-radius:50%;flex:none;transition:background .3s var(--ease)}
.lang:hover,.lang:focus-visible{color:var(--white)}
.lang:hover::before,.lang:focus-visible::before{border-color:var(--teal)}
.lang:hover::after,.lang:focus-visible::after{background:var(--teal)}

/* ============================================================
   01 — HERO — a designed scene, not a gradient
   Asymmetric 55/45. Arabic reads right, so the type column sits right
   and the visual composition sits left. Four depth levels, each with a
   different focus, so the eye has somewhere to go:
     DEEP  pre-rendered atmosphere, heavily out of focus
     MID   the plume as a soft mass — recognisable, not readable
     NEAR  a sharp contour of the same form + a real keyline
     FRONT typography, never filtered
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding-block:calc(var(--mark) * 1.30 + clamp(28px,4vh,52px)) clamp(84px,10vh,104px);
  overflow:hidden;isolation:isolate}
.bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-deep{position:absolute;inset:-2%;background-image:url('../img/bg-deep-desktop.webp');
  background-size:cover;background-position:center;background-repeat:no-repeat}
/* the artwork is abstract, so mirroring it for RTL is invisible and keeps
   the calm side of the composition where Arabic reading begins */
html[lang="en"] .bg-deep{transform:scaleX(-1)}
/* The scrim is deepest on the side the words live on. Type reads off a calm
   ground; the atmosphere keeps its luminance out where the scene is. Measured,
   not guessed: it is what carries the teal headline past 4:1. */
.bg-scrim{position:absolute;inset:0;
  background:linear-gradient(270deg, rgba(16,31,52,.93) 0%, rgba(16,31,52,.87) 27%,
    rgba(16,31,52,.62) 52%, rgba(16,31,52,.30) 76%, rgba(16,31,52,.14) 100%)}
html[lang="en"] .bg-scrim{background:linear-gradient(90deg, rgba(16,31,52,.93) 0%,
  rgba(16,31,52,.87) 27%, rgba(16,31,52,.62) 52%, rgba(16,31,52,.30) 76%,
  rgba(16,31,52,.14) 100%)}
.bg-base{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(16,31,52,.70) 0%, rgba(16,31,52,0) 20%, rgba(16,31,52,0) 60%, rgba(16,31,52,.80) 100%)}

/* ---- the hero grid: type column and scene column on one shared grid ----
   Both sit inside .wrap, so the mark, the headline and every section heading
   below share a single set of edges. That is what makes the page feel built
   rather than assembled. */
.hero-wrap{position:relative;z-index:10;display:grid;align-items:center;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(26px,3.6vw,64px)}

/* ---- the scene: keyline, soft mass, sharp contour ----
   Proportions are lifted from the primary logo: frame 0.545 w/h, plume 1.166x
   the frame height and 0.664x its width, crossing the open edge with 21.6% of
   its width inside, sitting 3.4% of the frame height low. */
.scene{position:relative;z-index:2;height:min(60vh,548px);aspect-ratio:.80;
  justify-self:center;pointer-events:none}
.scene-frame{position:absolute;top:56%;transform:translateY(-50%);
  inset-inline-start:0;height:74%;aspect-ratio:.545;
  border:1.5px solid rgba(0,166,156,.44);
  /* open on the side the form leaves through */
  border-inline-end:0}
/* The artwork carries 15.9% transparent padding on each side so the blur has
   room, so placement is measured to the ink, not to the file's edge. The
   keyline is centred on the plume's mass, not on its bounding box — the form
   is bottom-heavy, and centring the box left the frame's top half vacant. */
.scene-mid{position:absolute;top:58.5%;inset-inline-start:28.6%;height:99%;width:auto;
  transform:translateY(-50%);opacity:0;mix-blend-mode:screen}
.scene-edge{position:absolute;top:58.5%;inset-inline-start:28.6%;height:99%;width:auto;
  transform:translateY(-50%);opacity:0}
/* the artwork is drawn frame-left / plume-right; RTL puts the frame on the
   right, so the form mirrors to keep the logo's own relationship intact */
html[dir="rtl"] .scene-mid,html[dir="rtl"] .scene-edge{
  transform:translateY(-50%) scaleX(-1);transform-origin:50% 50%}
/* nodes sit exactly on the keyline's two outer corners, in either direction */
.scene-node{position:absolute;width:8px;height:8px;border:1.4px solid var(--teal);
  border-radius:50%;opacity:0;inset-inline-start:0;
  margin-inline-start:-4px;margin-top:-4px}
.scene-node.n-a{top:19%}
.scene-node.n-b{top:93%}

.hero-in{min-width:0}
.hero-eyebrow{opacity:0}
/* editorial scale — large and calm, with room for the two lines to breathe */
.hero h1{margin:24px 0 0;font-weight:800;font-size:clamp(29px,3.55vw,52px);
  line-height:1.46;letter-spacing:0}
html[lang="en"] .hero h1{font-size:clamp(34px,4.55vw,58px);line-height:1.10;letter-spacing:-.022em}
.hero h1 .ln{display:block;overflow:hidden;padding-block:.26em;margin-block:-.26em}
html[lang="en"] .hero h1 .ln{padding-block:.14em;margin-block:-.14em}
.hero h1 .l2{margin-top:.07em}
.hero h1 b{display:block;font-weight:800;transform:translateY(105%)}
.hero h1 .l2 b{color:var(--teal)}
/* supporting copy is quieter than the headline but still copy, not a caption */
.hero-sup{margin-top:30px;font-size:clamp(15px,1.22vw,17.5px);line-height:1.92;
  color:rgba(255,255,255,.66);max-width:min(100%,470px);opacity:0}
html[lang="en"] .hero-sup{line-height:1.7;max-width:min(100%,440px)}
.hero-note{margin-top:34px;font-size:13px;color:rgba(255,255,255,.53);opacity:0}
.hero-cta{margin-top:clamp(34px,4.6vh,46px);display:flex;flex-wrap:wrap;
  gap:12px 22px;align-items:center;opacity:0}

/* ---- the CTA is a Saden component, not a bordered rectangle ---- */
.door{position:relative;display:inline-flex;align-items:center;gap:13px;
  padding:15px 27px 15px 23px;font-weight:700;font-size:15px;color:#04202a;
  background:var(--teal);overflow:hidden;isolation:isolate}
html[lang="en"] .door{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase}
.door-e{position:absolute;inset:0;z-index:-1;border:1.5px solid var(--teal);
  transform:translate(6px,6px);transition:transform .34s var(--ease)}
html[dir="rtl"] .door-e{transform:translate(-6px,6px)}
.door-o{width:9px;height:9px;border:1.6px solid #04202a;border-radius:50%;flex:none;
  transition:background .3s var(--ease)}
.door-a{font-size:14px;transition:transform .34s var(--ease)}
.door:hover .door-e,.door:focus-visible .door-e{transform:translate(0,0)}
.door:hover .door-o{background:#04202a}
.door:hover .door-a{transform:translate(-4px,-4px)}
html[dir="rtl"] .door:hover .door-a{transform:translate(4px,-4px)}
/* the rule belongs to the words, not to a button-sized box around them */
.ghost{display:inline-flex;align-items:center;gap:10px;padding:15px 2px;font-weight:700;
  font-size:15px;color:var(--white);border-bottom:1px solid var(--line);
  transition:color .3s var(--ease),border-color .3s var(--ease)}
html[lang="en"] .ghost{font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.ghost:hover{color:var(--teal);border-color:var(--teal)}

/* ---- entrance: the SYSTEM appears, then the words ---- */
.hero.on .scene-frame{animation:frame-draw .72s var(--ease) .15s both}
.hero.on .scene-mid{animation:mass-in 1.0s var(--ease) .35s both}
.hero.on .scene-edge{animation:edge-in .95s var(--ease) .55s both}
.hero.on .scene-node{animation:soft-in .45s linear .9s both}
.hero.on .hero-eyebrow{animation:soft-in .5s var(--ease) .70s both}
.hero.on h1 .l1 b{transform:translateY(0);transition:transform .84s var(--reveal) .85s}
.hero.on h1 .l2 b{transform:translateY(0);transition:transform .84s var(--reveal) 1.05s}
.hero.on .hero-sup{animation:soft-in .6s var(--ease) 1.35s both}
.hero.on .hero-cta{animation:soft-in .6s var(--ease) 1.48s both}
.hero.on .hero-note{animation:soft-in .55s var(--ease) 1.62s both}
@keyframes frame-draw{from{clip-path:inset(0 0 100% 0);opacity:0}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes mass-in{from{opacity:0;transform:translateY(-50%) scale(1.05)}to{opacity:.34;transform:translateY(-50%) scale(1)}}
@keyframes edge-in{from{opacity:0;transform:translateY(-50%) translateX(-16px)}to{opacity:.92;transform:translateY(-50%)}}
html[dir="rtl"] .hero.on .scene-mid{animation-name:mass-in-r}
html[dir="rtl"] .hero.on .scene-edge{animation-name:edge-in-r}
@keyframes mass-in-r{from{opacity:0;transform:translateY(-50%) scaleX(-1) scale(1.05)}to{opacity:.34;transform:translateY(-50%) scaleX(-1)}}
@keyframes edge-in-r{from{opacity:0;transform:translateY(-50%) scaleX(-1) translateX(-16px)}to{opacity:.92;transform:translateY(-50%) scaleX(-1)}}
@keyframes soft-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.span span{transform-origin:0 50%}
html[dir="rtl"] .span span{transform-origin:100% 50%}

/* ============================================================
   02 — THE IDEA — an editorial interlude, not a heading + paragraph
   ============================================================ */
.idea{position:relative;padding-block:clamp(104px,15vh,190px);background:var(--ink);overflow:hidden}
.idea-plume{position:absolute;top:50%;inset-inline-start:-6%;height:120%;width:auto;
  transform:translateY(-50%);opacity:.055;pointer-events:none;mix-blend-mode:screen}
html[dir="rtl"] .idea-plume{transform:translateY(-50%) scaleX(-1)}
.idea::before{content:'';position:absolute;inset-inline-end:-18%;top:-20%;width:66%;height:140%;
  background:radial-gradient(50% 44% at 50% 50%, rgba(10,77,87,.52), rgba(16,31,52,0) 72%);
  pointer-events:none}
.idea .wrap{z-index:2}
.idea-h{margin:22px 0 0;font-weight:800;line-height:1.16}
.idea-h .ih-a{display:block;font-size:clamp(26px,3.2vw,46px);color:var(--on-soft);line-height:1.4}
/* the anchor word carries the section: oversized, teal, allowed to run wide */
.idea-h .ih-b{display:block;font-size:clamp(44px,7.4vw,124px);color:var(--teal);
  line-height:1.14;letter-spacing:-.01em;margin-top:18px}
html[lang="en"] .idea-h .ih-a{line-height:1.1;letter-spacing:-.01em}
html[lang="en"] .idea-h .ih-b{line-height:.98;letter-spacing:-.03em}
.idea-foot{margin-top:clamp(38px,6vh,72px);display:grid;
  grid-template-columns:minmax(120px,220px) minmax(0,1fr);
  gap:clamp(20px,3vw,48px);align-items:start}
.idea-span{margin-top:11px}
/* the paragraph is an editorial note beside the statement, not a second block */
.idea-p{font-size:clamp(14px,1.02vw,16px);line-height:2.0;color:var(--on-faint);max-width:52ch}
html[lang="en"] .idea-p{line-height:1.74}

/* ============================================================
   03 — WHAT WE DO — structured and reactive
   ============================================================ */
.does{position:relative;padding-block:clamp(64px,8.6vh,104px);background:var(--ink)}
/* the list is a reading column, not a full-bleed table: holding it to a
   measure is what makes the section editorial instead of blocky */
/* The label sits directly above the list and shares its edge, so the eye reads
   them as one block. Both are held to the same measure as the hero type column. */
.does-grid>.eyebrow{margin-bottom:15px}
.does-list{max-width:min(100%,628px);border-top:1px solid rgba(255,255,255,.14)}
/* the marker trails the words instead of drifting to the far edge of the row */
.doe{position:relative;display:grid;align-items:baseline;
  grid-template-columns:auto auto minmax(0,1fr);column-gap:clamp(15px,1.9vw,26px);
  padding-block:clamp(15px,1.9vh,21px);border-bottom:1px solid rgba(255,255,255,.095);
  transition:opacity .38s var(--ease)}
/* the numerals are an index, set small and letterspaced — they mark the list,
   they do not compete with it */
.doe-n{font-weight:700;font-size:clamp(11.5px,.92vw,13px);letter-spacing:.13em;
  line-height:1;color:rgba(255,255,255,.48);transition:color .38s var(--ease)}
.doe-m{font-size:clamp(18px,1.86vw,26px);font-weight:700;line-height:1.55;
  transition:transform .42s var(--ease)}
html[lang="en"] .doe-m{line-height:1.2;letter-spacing:-.012em}
.doe-d{align-self:center;justify-self:start;width:7px;height:7px;
  border:1.4px solid var(--teal);border-radius:50%;opacity:.22;
  transition:opacity .38s var(--ease),background .38s var(--ease)}
/* the keyline travels across the row the visitor is actually attending to */
.doe::after{content:'';position:absolute;bottom:-1px;inset-inline-start:0;width:100%;height:1px;
  background:var(--teal);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .6s var(--ease)}
html[dir="rtl"] .doe::after{transform-origin:100% 50%}
/* the rest of the list steps back so attention has somewhere to land */
.does-list.is-live .doe{opacity:.48}
.does-list.is-live .doe.on{opacity:1}
.doe.on::after{transform:scaleX(1)}
.doe.on .doe-n{color:var(--teal)}
.doe.on .doe-d{opacity:1;background:var(--teal)}
.doe.on .doe-m{transform:translateX(8px)}
html[dir="rtl"] .doe.on .doe-m{transform:translateX(-8px)}

/* ============================================================
   04 — SELECTED WORK — a gallery stage, its own spatial mood
   ============================================================ */
.work{position:relative;overflow:hidden;
  padding-block:clamp(78px,11vh,132px) clamp(84px,12vh,140px);
  background:linear-gradient(178deg, #0C1B2E 0%, #0B2C3A 42%, #0A3F4B 100%)}
.work::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 44% at 50% 8%, rgba(0,166,156,.16), rgba(10,77,87,0) 74%)}
.work>*{position:relative;z-index:2}
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;margin-bottom:clamp(28px,4.4vh,50px)}
.work h2{font-weight:800;font-size:clamp(28px,3.6vw,52px);line-height:1.36;margin-top:14px}
html[lang="en"] .work h2{line-height:1.06;letter-spacing:-.022em}
.work-note{font-size:13.5px;line-height:1.95;color:var(--on-faint);max-width:48ch;margin-top:12px}
.work-nav{display:flex;gap:10px}
.work-nav button{width:50px;height:50px;border-radius:50%;background:transparent;
  border:1px solid var(--line-soft);color:var(--white);cursor:pointer;font-size:17px;
  display:grid;place-items:center;transition:border-color .25s,background .25s}
.work-nav button:hover{border-color:var(--teal);background:rgba(0,166,156,.16)}
html[dir="rtl"] .work-nav button{transform:scaleX(-1)}
.rail{display:flex;gap:clamp(18px,2.6vw,34px);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:8px;
  padding-inline:max(var(--gut), calc((100% - var(--wrap))/2 + var(--gut))) var(--gut);
  scroll-padding-inline-start:max(var(--gut), calc((100% - var(--wrap))/2 + var(--gut)))}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
/* one project dominates and the next is deliberately in frame */
.card{flex:0 0 auto;width:min(66vw,880px);scroll-snap-align:start}
.card .fr{position:relative;overflow:hidden;background:#0B1A2C;aspect-ratio:1400/1088}
.card .fr::after{content:'';position:absolute;inset:0;pointer-events:none;
  border:1px solid rgba(0,166,156,0);transition:border-color .45s var(--ease)}
.card:hover .fr::after,.card:focus-within .fr::after{border-color:rgba(0,166,156,.75)}
.card .fr img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .fr img{transform:scale(1.018)}
.card .cap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline;gap:clamp(14px,2vw,32px);padding-top:20px}
.card .idx{font-size:clamp(20px,2vw,32px);font-weight:800;color:var(--teal);line-height:1}
.card .nm{display:block;font-size:clamp(18px,2vw,30px);font-weight:700;line-height:1.44}
html[lang="en"] .card .nm{line-height:1.1;letter-spacing:-.014em}
.card .cat{display:block;font-size:13px;color:var(--on-faint);margin-top:7px;line-height:1.7}
.card .go{font-size:12.5px;font-weight:700;color:var(--teal);white-space:nowrap;
  transition:opacity .25s}
.card:hover .go{opacity:.72}
.card .capline{grid-column:1/-1;height:1px;background:var(--line);margin-top:16px}
.work-prog{display:flex;align-items:center;gap:14px;margin-top:clamp(24px,3.4vh,38px)}
.work-prog .span{max-width:240px}
.work-prog .n{font-size:12.5px;font-weight:700;color:var(--on-faint)}

/* ============================================================
   05 — FINAL CTA — the teal takeover, and the frame opens
   ============================================================ */
.close{position:relative;overflow:hidden;padding-block:clamp(96px,14vh,180px);
  background:linear-gradient(154deg, #0A3F4B 0%, var(--deep) 46%, #073A44 100%)}
.close::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 54% at 76% 30%, rgba(0,166,156,.34), rgba(10,77,87,0) 72%)}
html[lang="en"] .close::before{background:radial-gradient(52% 54% at 24% 30%, rgba(0,166,156,.34), rgba(10,77,87,0) 72%)}
.close-plume{position:absolute;top:50%;inset-inline-end:-12%;height:132%;width:auto;
  transform:translateY(-50%);opacity:.15;pointer-events:none;mix-blend-mode:screen}
html[dir="rtl"] .close-plume{transform:translateY(-50%) scaleX(-1)}
.close .wrap{z-index:2}
.close-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(280px,.72fr);
  gap:clamp(34px,5vw,84px);align-items:center}
.close h2{font-weight:800;font-size:clamp(30px,4.1vw,62px);line-height:1.30;margin-top:20px}
html[lang="en"] .close h2{font-size:clamp(32px,4.0vw,58px);line-height:1.02;letter-spacing:-.026em}
.close h2 .accent{color:#8FE6DE}
.close-in>p{margin-top:22px;font-size:clamp(15px,1.12vw,17px);line-height:2;color:rgba(255,255,255,.82)}
html[lang="en"] .close-in>p{line-height:1.7}
.wa{display:inline-flex;align-items:center;gap:11px;margin-top:clamp(24px,3.4vh,36px);
  font-size:14.5px;font-weight:700;color:var(--white);
  border-bottom:1px solid rgba(255,255,255,.34);padding-bottom:7px;
  transition:border-color .25s,color .25s}
.wa:hover{color:#8FE6DE;border-color:#8FE6DE}

/* The brief panel is a COMPLETE Saden keyline rectangle — four connected
   sides, the same closed figure the transition grows out of. The whole panel
   is the link, and it reads finished before, during and after hover. */
.brief-panel{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  gap:14px;min-height:clamp(210px,27vh,300px);padding:clamp(24px,2.3vw,34px);
  color:var(--white);isolation:isolate;transition:transform .34s var(--ease)}
.of-l{position:absolute;inset:0;z-index:-1;border:1.5px solid rgba(143,230,222,.74);
  transition:border-color .34s var(--ease),background .34s var(--ease)}
/* one open node marks a corner; the line runs through it, so the border stays whole */
.of-n{position:absolute;width:9px;height:9px;border:1.5px solid #8FE6DE;border-radius:50%;
  top:-5px;inset-inline-end:-5px}
.of-t{font-size:clamp(22px,2.4vw,34px);font-weight:800;line-height:1.35}
html[lang="en"] .brief-panel .of-t{line-height:1.06;letter-spacing:-.018em}
.of-a{font-size:20px;color:#8FE6DE;transition:transform .34s var(--ease)}
.brief-panel:hover,.brief-panel:focus-visible{transform:translateY(-2px)}
.brief-panel:hover .of-l,.brief-panel:focus-visible .of-l{
  border-color:#8FE6DE;background:rgba(0,166,156,.10)}
.brief-panel:hover .of-a,.brief-panel:focus-visible .of-a{transform:translate(-5px,-5px)}
html[dir="rtl"] .brief-panel:hover .of-a,
html[dir="rtl"] .brief-panel:focus-visible .of-a{transform:translate(5px,-5px)}

/* ============================================================
   06 — FOOTER — quiet navy close
   ============================================================ */
.foot{position:relative;background:var(--ink);padding-block:clamp(64px,9vh,104px) 30px;overflow:hidden}
.foot::before{content:'';position:absolute;inset-block:0;inset-inline-end:-6%;width:min(420px,42%);
  background-image:url('../img/pattern-accent.webp');background-size:cover;
  background-position:center;opacity:.055;pointer-events:none;
  -webkit-mask-image:radial-gradient(108% 58% at 100% 50%, #000 12%, rgba(0,0,0,.45) 52%, transparent 84%);
          mask-image:radial-gradient(108% 58% at 100% 50%, #000 12%, rgba(0,0,0,.45) 52%, transparent 84%)}
html[dir="rtl"] .foot::before{
  -webkit-mask-image:radial-gradient(108% 58% at 0% 50%, #000 12%, rgba(0,0,0,.45) 52%, transparent 84%);
          mask-image:radial-gradient(108% 58% at 0% 50%, #000 12%, rgba(0,0,0,.45) 52%, transparent 84%)}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,72px);
  align-items:end;position:relative;z-index:2}
.foot-mark{font-weight:800;font-size:clamp(50px,8vw,110px);line-height:.96;letter-spacing:-.01em}
html[lang="en"] .foot-mark{letter-spacing:-.03em}
.foot-sub{margin-top:18px;font-size:clamp(14px,1.02vw,16px);line-height:1.95;
  color:var(--on-faint);max-width:40ch}
.foot-links{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.foot-links a{font-size:14.5px;font-weight:700;display:inline-flex;align-items:center;gap:9px;
  color:var(--on-soft);transition:color .25s}
.foot-links a::before{content:'';width:7px;height:7px;border:1.3px solid var(--teal);
  border-radius:50%;flex:none;transition:background .25s}
.foot-links a:hover{color:var(--white)}
.foot-links a:hover::before{background:var(--teal)}
.foot-rule{margin-block:clamp(34px,5vh,58px) 22px;position:relative;z-index:2}
.foot-btm{display:flex;justify-content:space-between;align-items:center;gap:18px;
  flex-wrap:wrap;position:relative;z-index:2}
.foot-btm span{font-size:12.5px;color:rgba(255,255,255,.52);line-height:1.9}
.foot-endorse{display:inline-flex;align-items:center;gap:9px}
.foot-endorse::before{content:'';width:5px;height:5px;background:var(--teal);
  border-radius:50%;flex:none;opacity:.7}

/* ---------- scroll reveals — each fires once, then is done ---------- */
.rv{opacity:0;transform:translateY(20px)}
.rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .9s var(--ease)}
.rv-d1.in{transition-delay:.10s}
.rv-d2.in{transition-delay:.20s}
.rv-d3.in{transition-delay:.30s}

/* ============================================================
   BRIEF TRANSITION — a Saden keyline grows into the next screen
   ============================================================ */
.veil{position:fixed;z-index:9000;pointer-events:none;border:1.5px solid var(--teal);
  background:rgba(10,77,87,0);
  transition:inset .44s var(--reveal),background-color .44s linear,border-color .42s linear}
.veil.go{inset:0!important;background:var(--deep);border-color:rgba(0,166,156,0)}
.veil-in{position:fixed;inset:0;z-index:9001;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;opacity:0;pointer-events:none;
  transition:opacity .2s linear}
.veil-in.show{opacity:1}
.veil-in img{height:96px;width:auto}
.veil-in b{font-weight:800;font-size:clamp(20px,2.4vw,30px);color:var(--white);letter-spacing:0}
@media(prefers-reduced-motion:reduce){.veil,.veil-in{display:none}}

/* ============================================================
   RESPONSIVE — Arabic mobile is the primary target
   ============================================================ */
@media(max-width:1180px){
  .hero-wrap{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr)}
  .scene{height:min(56vh,476px)}
  .close-grid{grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);gap:34px}
}
@media(max-width:1024px){
  .hero-wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px}
  .scene{height:min(52vh,420px)}
  .idea-foot{grid-template-columns:1fr;gap:18px}
  .idea-span{max-width:200px}
  .close-grid{grid-template-columns:1fr;gap:30px}
  .brief-panel{min-height:190px}
  .card{width:min(74vw,720px)}
}
@media(max-width:820px){
  .bg-deep{background-image:url('../img/bg-deep-mobile.webp')}
  .bg-scrim,html[lang="en"] .bg-scrim{background:linear-gradient(180deg,
    rgba(16,31,52,.52) 0%, rgba(16,31,52,.36) 24%, rgba(16,31,52,.74) 44%,
    rgba(16,31,52,.88) 62%, rgba(16,31,52,.96) 100%)}
  .hero{padding-block:calc(var(--mark) * 1.30 + clamp(20px,3vh,34px)) 64px;align-items:center}
  /* one column: the scene becomes a compact plate above the words, held to a
     size that reads as art direction rather than as background wallpaper */
  .hero-wrap{grid-template-columns:1fr;gap:clamp(20px,3.2vh,34px);align-items:start}
  .scene{order:-1;height:min(31svh,278px);justify-self:start}
  .hero h1{font-size:clamp(30px,8.2vw,42px);line-height:1.44}
  html[lang="en"] .hero h1{font-size:clamp(32px,9vw,46px);line-height:1.1}
  .hero-sup{margin-top:24px;max-width:none;font-size:15.5px;line-height:1.86}
  .hero-cta{margin-top:32px}
  .hero-note{margin-top:28px}
  .door{padding:14px 22px;font-size:14.5px}
  .idea{padding-block:72px}
  .idea-h .ih-a{font-size:clamp(21px,6vw,30px)}
  .idea-h .ih-b{font-size:clamp(38px,12vw,60px)}
  .idea-plume{opacity:.05;height:90%}
  .does{padding-block:clamp(58px,7.4vh,80px)}
  .doe{column-gap:16px;padding-block:14px}
  .does-grid>.eyebrow{margin-bottom:13px}
  .doe-n{font-size:11px}
  .doe-m{font-size:clamp(17px,4.7vw,22px)}
  .doe.on .doe-m,html[dir="rtl"] .doe.on .doe-m{transform:none}
  .card{width:88vw}
  .card .cap{grid-template-columns:auto minmax(0,1fr);row-gap:6px}
  .card .go{grid-column:2;justify-self:start}
  .work-head{align-items:flex-start}
  .close{padding-block:80px}
  .brief-panel{min-height:172px;padding:24px}
  .of-t{font-size:clamp(20px,6vw,28px)}
  .foot-top{grid-template-columns:1fr;align-items:start;gap:30px}
  .foot-mark{font-size:clamp(46px,15vw,72px)}
  .foot-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
}
@media(max-width:400px){
  .hero h1{font-size:clamp(26px,7.8vw,33px)}
  html[lang="en"] .hero h1{font-size:clamp(28px,8.4vw,35px)}
  .scene{height:min(27svh,236px)}
  .hero-cta{gap:10px 18px}
  .ghost{padding:14px 2px}
  .idea-h .ih-b{font-size:clamp(34px,11.4vw,46px)}
  .card{width:90vw}
  .foot-mark{font-size:clamp(40px,13vw,54px)}
}

@media(prefers-reduced-motion:reduce){
  .hero.on .bg-near,.hero.on .hero-eyebrow,.hero.on .hero-span i,.hero.on .hero-span span,
  .hero.on .hero-sup,.hero.on .hero-note,.hero.on .hero-cta{animation:none!important}
  .hero-eyebrow,.hero-sup,.hero-note,.hero-cta,.hero-span i,.hero-span span{opacity:1!important}
  .hero h1 b{transform:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  .card .fr img,.doe{transition:none}
}

@media(prefers-reduced-motion:reduce){
  .hero.on .scene-frame,.hero.on .scene-mid,.hero.on .scene-edge,.hero.on .scene-node,
  .hero.on .hero-eyebrow,.hero.on .hero-sup,.hero.on .hero-cta,.hero.on .hero-note{
    animation:none!important}
  .hero-eyebrow,.hero-sup,.hero-note,.hero-cta,.scene-node{opacity:1!important;transform:none!important}
  .scene-mid{opacity:.34!important}
  .scene-edge{opacity:.92!important}
  .hero h1 b{transform:none!important;transition:none!important}
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  .card .fr img,.doe,.doe-m,.brief-panel,.door-e,.door-a,.of-a{transition:none!important}
}