/* Abu Aisheh Contracting · website · shared styles
   Colours, type and devices from the brand book (28 Sep v2) and the company profile kit. */

@font-face{font-family:AA;font-weight:200;font-display:swap;src:url(fonts/ibm-plex-sans-latin-200-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:AA;font-weight:300;font-display:swap;src:url(fonts/ibm-plex-sans-latin-300-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:AA;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:AA;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Arabic: Plex Sans Arabic. Display weight 200 maps to 300 (Arabic hairlines break up on screen). */
@font-face{font-family:AA;font-weight:200 300;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-300-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:AA;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:AA;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:AAmono;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:AAmono;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}

:root{
  --ink:#12171C;--deep:#1E2831;--slate:#3E5C78;--slatel:#7093B2;--steel:#7D8B95;--mist:#CBD3D8;--paper:#F5F7F8;
  --sans:AA,system-ui,sans-serif;--mono:AAmono,ui-monospace,monospace;
  --g:16px;                     /* side gutter: 16px on a phone */
  --maxw:1440px;
  --hair:rgba(203,211,216,.16); /* MIST at 16%: rules on dark */
  --hair-l:rgba(18,23,28,.14);  /* INK at 14%: rules on light */
  --t-display:clamp(38px,5.4vw,84px);
  --t-h2:clamp(30px,3.5vw,54px);
  --t-h3:clamp(21px,1.7vw,26px);
  --t-lead:clamp(18px,1.45vw,22px);
  --t-body:17px;
  --t-label:12px;
  /* one scale for small text (20 Oct, design audit #6): label · meta · body · sub. Arabic sits one step up */
  --t-meta:15px;--t-sub:21px;
  --t-label-ar:14px;--t-meta-ar:16px;--t-body-ar:18px;--t-sub-ar:22px;
  --ease:cubic-bezier(.65,0,.35,1);
  --ease-out:cubic-bezier(.2,.7,.1,1);
  --staff-w:30px;
}
@media (min-width:700px){:root{--g:32px}}
@media (min-width:1100px){:root{--g:56px}}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);color:var(--paper);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-weight:400;font-size:var(--t-body);line-height:1.6;background:var(--ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
html[lang=ar] body{font-size:var(--t-body-ar);line-height:1.85}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:300}
button{font:inherit;color:inherit}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--slatel);outline-offset:3px}
.nb{white-space:nowrap}

/* Arabic set inside an English page, and the reverse */
.ar{font-family:var(--sans);direction:rtl;unicode-bidi:isolate}
.en{direction:ltr;unicode-bidi:isolate}

/* ── type ─────────────────────────────────────────────── */
.display{font-weight:300;font-size:var(--t-display);line-height:1.04;letter-spacing:-.012em}
.display.ar,html[lang=ar] .display{letter-spacing:0;line-height:1.28}
.h2{font-weight:300;font-size:var(--t-h2);line-height:1.08;letter-spacing:-.008em}
.h2.ar,html[lang=ar] .h2{letter-spacing:0;line-height:1.3}
.h3{font-weight:400;font-size:var(--t-h3);line-height:1.25}
.lead{font-weight:300;font-size:var(--t-lead);line-height:1.55;color:var(--mist)}
.lead.ar,html[lang=ar] .lead{line-height:1.85;font-size:calc(var(--t-lead) + 1px)}
.label{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;color:var(--mist);line-height:1.5}
.label .ar,.label.ar{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:var(--t-label-ar)}
html[lang=ar] .label{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:var(--t-label-ar)}
html[lang=ar] .label .en{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-size:var(--t-label)}
.light .label{color:var(--slate)}
.muted{color:var(--mist)}

/* ── surfaces ─────────────────────────────────────────── */
.light{background:var(--paper);color:var(--ink)}
.light .lead{color:#34424E}
.deep{background:var(--deep)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--g)}
@media (min-width:1100px){.wrap{padding-inline-end:calc(var(--g) + 12px)}}

/* ── header ───────────────────────────────────────────── */
.hdr{position:fixed;inset:0 0 auto 0;z-index:40;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-inline:var(--g);transition:background-color .4s var(--ease),border-color .4s;border-bottom:1px solid transparent}
.hdr.solid{background:rgba(18,23,28,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:var(--hair)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
.brand .icon{height:34px;width:auto;flex:none}
.brand .nm{font-weight:500;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
html[lang=ar] .brand .nm{letter-spacing:0;text-transform:none;font-size:16px}
.nav{display:none;align-items:center;gap:30px}
.nav a{text-decoration:none;font-size:var(--t-meta);color:var(--mist);padding:10px 0;position:relative}
.nav a:hover,.nav a[aria-current]{color:var(--paper)}
.nav a[aria-current]::after{content:"";position:absolute;inset:auto 0 4px 0;height:1px;background:var(--slatel)}
.hdr .end{display:flex;align-items:center;gap:8px}
.lang{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;text-decoration:none;font-size:var(--t-meta-ar);color:var(--paper)}
.lang[lang=en]{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 18px;background:var(--slate);color:var(--paper);
  text-decoration:none;font-size:var(--t-meta);font-weight:500;border:0;cursor:pointer;transition:background-color .25s}
.btn:hover{background:#4A6C8B}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px rgba(245,247,248,.4)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--paper)}
/* the phone menu: three lines that turn into a cross, and a full-screen sheet under the header (v18) */
.menu-btn{display:inline-grid;place-items:center;width:48px;height:48px;padding:0;margin-inline-end:-12px;background:none;border:0;cursor:pointer;color:var(--paper);-webkit-tap-highlight-color:transparent}
.menu-btn .bars{position:relative;display:block;width:24px;height:14px}
.menu-btn .bars i{position:absolute;inset-inline:0;height:1.5px;border-radius:1px;background:currentColor;
  transition:top .32s var(--ease-out),transform .32s var(--ease-out),opacity .2s,inset-inline-start .32s var(--ease-out)}
.menu-btn .bars i:nth-child(1){top:0}
.menu-btn .bars i:nth-child(2){top:6.25px;inset-inline-start:8px}
.menu-btn .bars i:nth-child(3){top:12.5px}
.menu-btn[aria-expanded=true] .bars i:nth-child(1){top:6.25px;transform:rotate(45deg)}
.menu-btn[aria-expanded=true] .bars i:nth-child(2){opacity:0;inset-inline-start:24px}
.menu-btn[aria-expanded=true] .bars i:nth-child(3){top:6.25px;transform:rotate(-45deg)}
.menu-btn:focus-visible{outline:1px solid var(--slatel);outline-offset:-4px}
.sheet{position:fixed;inset:0;z-index:39;background:var(--ink);overflow-y:auto;overscroll-behavior:contain;opacity:0;transition:opacity .28s var(--ease)}
.sheet[hidden]{display:none}
.sheet.on{opacity:1}
.sh-in{min-height:100%;display:flex;flex-direction:column;padding:calc(64px + clamp(20px,5vh,40px)) var(--g) calc(24px + env(safe-area-inset-bottom));max-width:640px}
.sh-nav{display:grid;border-top:1px solid var(--hair)}
.sh-nav a{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;min-height:76px;padding:12px 0;border-bottom:1px solid var(--hair);
  text-decoration:none;color:var(--paper)}
.sh-nav .k{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;color:var(--steel);direction:ltr}
html[dir=rtl] .sh-nav .k{text-align:right}
.sh-nav .t{font-weight:300;font-size:clamp(28px,8.4vw,38px);line-height:1.1;letter-spacing:-.01em}
html[lang=ar] .sh-nav .t{font-weight:400;letter-spacing:0;font-size:clamp(28px,8.6vw,38px);line-height:1.3}
.sh-nav .go{font-size:22px;color:var(--steel);transition:translate .3s var(--ease-out),color .3s}
.sh-nav a:active .go,.sh-nav a:hover .go{color:var(--paper);translate:4px 0}
html[dir=rtl] .sh-nav a:active .go,html[dir=rtl] .sh-nav a:hover .go{translate:-4px 0}
.sh-nav a[aria-current] .k{color:var(--slatel)}
.sh-nav a[aria-current] .go{width:12px;height:auto;aspect-ratio:128/217.46;clip-path:url(#op);background:var(--slatel);color:transparent;font-size:0;translate:none}
.sh-cta{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:28px}
.sh-cta .btn{min-height:54px;font-size:var(--t-body)}
.sh-cta .btn.ghost{padding:0 22px}
.sh-cta .btn[lang=en]{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase}
.sh-ppl{display:grid;margin-top:auto;padding-top:clamp(32px,6vh,56px)}
.sh-ppl .label{margin-bottom:8px}
.sh-ppl a{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;min-height:52px;padding:12px 0;border-top:1px solid var(--hair);
  text-decoration:none;color:var(--paper)}
.sh-ppl .n{font-size:var(--t-body)}
.sh-ppl .v{font-family:var(--mono);font-weight:300;font-size:var(--t-meta);letter-spacing:.02em;color:var(--mist);direction:ltr;unicode-bidi:isolate}
.sh-ft{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--hair)}
.sh-ft a{color:var(--mist);text-decoration:none;text-transform:none;letter-spacing:.04em}
.sh-nav a,.sh-cta,.sh-ppl,.sh-ft{transition:opacity .45s var(--ease-out),translate .45s var(--ease-out);transition-delay:calc(var(--i,0) * 45ms + 60ms)}
.sheet:not(.on) .sh-nav a,.sheet:not(.on) .sh-cta,.sheet:not(.on) .sh-ppl,.sheet:not(.on) .sh-ft{opacity:0;translate:0 14px;transition-delay:0s}
html.sheet-open,html.sheet-open body{overflow:hidden}
html.sheet-open .hdr{background:var(--ink);border-bottom-color:var(--hair);-webkit-backdrop-filter:none;backdrop-filter:none}
html.sheet-open .staff{display:none}
html.sheet-open .hdr .lang{visibility:hidden}   /* the sheet carries the language button */
@media (prefers-reduced-motion:reduce){.sheet,.sh-nav a,.sh-cta,.sh-ppl,.sh-ft,.menu-btn .bars i{transition:none!important}.sheet:not(.on) .sh-nav a,.sheet:not(.on) .sh-cta,.sheet:not(.on) .sh-ppl,.sheet:not(.on) .sh-ft{translate:none}}
@media (min-width:1100px){.sheet{display:none!important}}
.hdr .btn{display:none}
@media (min-width:700px){.hdr .btn{display:inline-flex}html.sheet-open .hdr .btn{visibility:hidden}}   /* 20 Oct: tablets get Start a project too */
@media (min-width:1100px){.nav{display:flex}.menu-btn{display:none}}
@media (max-width:420px){.brand .nm{font-size:11px;letter-spacing:.16em}.brand .icon{height:30px}.lang{padding:0 8px}}

/* ── the survey staff (outer edge) ────────────────────── */
.staff{position:fixed;z-index:30;top:96px;bottom:64px;inset-inline-end:10px;width:var(--staff-w);pointer-events:none}
.staff svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.staff .tick{stroke:rgba(203,211,216,.42);stroke-width:1}
.staff .tick.mj{stroke:rgba(203,211,216,.7)}
.staff .zero{stroke:var(--paper);stroke-width:1.4}
.staff .mk{position:absolute;inset-inline-end:0;width:100%;height:0;transform:translateY(var(--y,0px));transition:transform .12s linear}
.staff .mk::before{content:"";position:absolute;inset-inline-end:0;top:-6px;border-block:6px solid transparent;border-inline-end:9px solid var(--paper)}
.staff .mk::after{content:"";position:absolute;inset-inline-end:9px;top:-.5px;width:14px;height:1px;background:var(--paper)}
.staff .rd{position:absolute;inset-inline-end:30px;top:-9px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.08em;white-space:nowrap;color:var(--paper);
  background:rgba(18,23,28,.78);padding:2px 6px;direction:ltr;opacity:0;transition:opacity .5s}
.staff.live .rd,.staff.show .rd{opacity:1}
.light-under .staff .tick{stroke:rgba(18,23,28,.35)}
@media (max-width:699px){.staff{display:none}}   /* v18: on a phone the staff sat in the text gutter; the desktop keeps it */
@media (min-width:1100px){.staff{inset-inline-end:14px}}

/* ── The Opening: the arch as a window ───────────────── */
.op{position:relative;aspect-ratio:128/217.46;clip-path:url(#op);background:var(--deep);overflow:hidden}
.op>img,.op>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.op.tall{aspect-ratio:128/260}
.op.tall{clip-path:url(#op-tall)}
/* the arch keeps its lean in Arabic too: it is the mark's own arch, never mirrored */

/* ── motion: drawn, then built ─────────────────────────
   Each kind of content arrives in its own way, once, as it comes into view: the line is drawn first,
   headings come into focus, words and rows follow, photographs settle into a frame that is already there.
   aa.js tags only what is still below the fold (data-m) and adds .in when it is reached; whatever is on
   screen when the page opens, and everything under reduced motion, is simply there. */
:root{--soft:cubic-bezier(.16,.84,.24,1)}
html [data-m=draw]:not(.in){scale:0 1}
[data-m=draw]{transform-origin:0 50%}
[dir=rtl] [data-m=draw]{transform-origin:100% 50%}
[data-m=draw].in{animation:m-draw 1.6s var(--ease) var(--md,0s) backwards}
@keyframes m-draw{from{scale:0 1}}
html [data-m=drop]:not(.in){scale:1 0}
[data-m=drop]{transform-origin:50% 0}
[data-m=drop].in{animation:m-drop .8s var(--ease) var(--md,0s) backwards}
@keyframes m-drop{from{scale:1 0}}
html [data-m=head]:not(.in),html [data-m=text]:not(.in),html [data-m=row]:not(.in),html [data-m=card]:not(.in){opacity:0}
[data-m=head].in{animation:m-head .7s var(--soft) var(--md,0s) backwards}
@keyframes m-head{from{opacity:0;translate:0 .26em;filter:blur(4px)}50%{filter:blur(0)}}
[data-m=text].in{animation:m-text .6s var(--soft) var(--md,0s) backwards}
@keyframes m-text{from{opacity:0;translate:0 14px}}
[data-m=row].in{animation:m-row .6s var(--soft) var(--md,0s) backwards}
[dir=rtl] [data-m=row].in{animation-name:m-row-r}
@keyframes m-row{from{opacity:0;translate:-18px 0}}
@keyframes m-row-r{from{opacity:0;translate:18px 0}}
[data-m=card].in{animation:m-card .7s var(--soft) var(--md,0s) backwards}
@keyframes m-card{from{opacity:0;translate:0 34px}}
/* photographs: the frame is there from the start; the picture settles into it as the light comes up */
html [data-m=photo]:not(.in) img,html [data-m=arch]:not(.in)>img,html [data-m=wide]:not(.in)>img{scale:1.1;filter:saturate(.2) brightness(.74)}
[data-m=photo].in img,[data-m=arch].in>img,[data-m=wide].in>img{animation:m-settle 2.8s var(--soft) var(--md,0s) backwards,m-light 1.9s cubic-bezier(.3,.6,.3,1) var(--md,0s) backwards}
@keyframes m-settle{from{scale:1.1}}
@keyframes m-light{from{filter:saturate(.2) brightness(.74)}}
/* the wall of scopes slides in from the side it scrolls towards */
html [data-m=slide]:not(.in)>*{opacity:0}
[data-m=slide].in>*{animation:m-slide .8s var(--soft) calc(var(--i,0) * .1s) backwards}
[dir=rtl] [data-m=slide].in>*{animation-name:m-slide-r}
@keyframes m-slide{from{opacity:0;translate:110px 0}}
@keyframes m-slide-r{from{opacity:0;translate:-110px 0}}
/* the structure goes up level by level */
html [data-m=chart]:not(.in)>*{opacity:0}
[data-m=chart].in>*{animation:m-chart 1s var(--soft) calc(var(--md,0s) + var(--i,0) * .07s) backwards}
@keyframes m-chart{from{opacity:0;scale:.94}}
/* arches and wide photographs drift a little as they pass, like a view through a window */
@supports (view-timeline-name:--a){
  @media (prefers-reduced-motion:no-preference){
    .op,.pj-ph,.ah-ph{view-timeline:--fr block}
    html .op>img,html .pj-ph>img,html .ah-ph>img{top:-6%;bottom:auto;height:112%;animation:m-drift linear both;animation-timeline:--fr}
    [data-m=arch].in>img,[data-m=wide].in>img{animation:m-settle 2.8s var(--soft) var(--md,0s) backwards,m-light 1.9s cubic-bezier(.3,.6,.3,1) var(--md,0s) backwards,m-drift linear both;
      animation-timeline:auto,auto,--fr}
  }
}
@keyframes m-drift{from{translate:0 -5%}to{translate:0 5%}}

/* ── The Line (ground bar, the ع's angled cut at the visible end) ── */
.line{--t:6px;height:var(--t);background:var(--slate);clip-path:polygon(0 0,100% 0,calc(100% - var(--t)*12/21) 100%,0 100%)}
[dir=rtl] .line{clip-path:polygon(0 0,100% 0,100% 100%,calc(var(--t)*12/21) 100%)}
.line.paper{background:var(--paper)} .line.ink{background:var(--ink)}

/* ── the arcade (3–7 arches, one lit) ─────────────────── */
.arcade{display:flex;gap:calc(var(--aw)*.15);--aw:32px}
.arcade .a{display:block;width:var(--aw);aspect-ratio:128/217.46;clip-path:url(#op);background:var(--deep);transition:background-color .5s var(--ease)}
.arcade .ac{display:grid;justify-items:center;gap:8px}
.arcade .a.on,.arcade .ac.on .a{background:var(--slate)}
.light .arcade .a{background:var(--mist)} .light .arcade .a.on,.arcade .ac.on .a{background:var(--slate)}

/* ── sections, rules ─────────────────────────────────── */
.sec{padding-block:clamp(72px,10vw,160px)}
.rule{height:1px;background:var(--hair)} .light .rule{background:var(--hair-l)}
.kv{display:grid;grid-template-columns:minmax(110px,30%) 1fr;border-top:1px solid var(--hair)}
.kv>*{padding:14px 0;border-bottom:1px solid var(--hair)}
.kv dt{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--mist);padding-top:17px}
html[lang=ar] .kv dt{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:var(--t-meta-ar);padding-top:14px}
.kv dd{margin:0}

/* tags (status) */
.tag{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border:1px solid rgba(245,247,248,.45);font-size:var(--t-meta)}

/* ── the mark, drawn (first load) ─────────────────────── */
.intro{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;pointer-events:auto}
.intro svg{width:min(60vh,78vw);height:auto;overflow:visible;transform-origin:0 0}
.intro .skip{position:absolute;inset:auto auto 24px var(--g);font-family:var(--mono);font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;
  color:var(--mist);background:none;border:0;padding:12px 0;cursor:pointer}
html.no-intro .intro{display:none}

/* ── footer ───────────────────────────────────────────── */
.ftr{position:relative;background:var(--ink);padding:96px 0 40px;overflow:hidden}
.ftr .line{position:absolute;top:0;inset-inline-start:0;width:min(78%,1100px);--t:7px}
.ftr .grid{display:grid;gap:40px}
.ftr .mark{height:96px;width:auto}
.ftr .ppl{display:grid;gap:28px}
.ftr .p .n{font-size:var(--t-body)}
.ftr .p a.n{display:inline-block;text-decoration:none;border-bottom:1px solid transparent}
.ftr .p a.n:hover{border-bottom-color:currentColor}
.ftr .p .c a.em{font-size:var(--t-meta);direction:ltr;unicode-bidi:isolate}
.ftr .p .r{color:var(--mist);font-size:var(--t-meta);margin-top:2px}
.ftr .p .c{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px}
.ftr .p .c a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;border-bottom:1px solid rgba(203,211,216,.4)}
.ftr .p .c a.num{font-family:var(--mono);font-size:var(--t-meta);letter-spacing:.04em;direction:ltr;unicode-bidi:isolate}
.ftr nav{display:grid;gap:2px}
.ftr nav a{display:inline-flex;min-height:40px;align-items:center;text-decoration:none;color:var(--mist)}
.ftr .base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:64px;padding-top:20px;border-top:1px solid var(--hair)}
.ftr .base a{display:inline-flex;align-items:center;min-height:44px;margin-block:-13px}   /* 20 Oct: bigger target, same row */
/* breadcrumbs: 32 px targets, same line height (20 Oct) */
.crumb a{display:inline-flex;align-items:center;min-height:32px;margin-block:-7px}
@media (min-width:900px){.ftr .grid{grid-template-columns:1.1fr 1.3fr .6fr}.ftr .ppl{grid-template-columns:1fr 1fr}}

/* ── between pages (18 Oct): a curtain with the mark, faded; the stroke draws when the next page is ready,
   the mark flies to the header icon and the curtain lifts (aa.js). Replaces the browser's view transition. ── */
.pgl{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:var(--ink);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,visibility 0s linear .2s}
html.pl-out .pgl,html.pl-in .pgl{opacity:1;visibility:visible;transition:opacity .2s ease}
html.pl-in .pgl{transition:none;animation:pl-safe .3s 4.5s forwards}   /* if the script never runs, the curtain still lifts */
@keyframes pl-safe{to{opacity:0;visibility:hidden}}
.pgl-m{width:52px;height:auto;overflow:visible;will-change:transform}
.pgl-g,.pgl-s{fill:none;stroke-width:21;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:6}
.pgl-g{stroke:rgba(245,247,248,.16)}
.pgl-gf{fill:rgba(245,247,248,.16)}
.pgl-s{stroke:#F5F7F8;stroke-dasharray:1 1;stroke-dashoffset:1}
.pgl-f{fill:#F5F7F8;opacity:0}

/* ── reduced motion: the finished state, at once ──────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .intro{display:none}
  [data-m]:not([data-m=glide]),[data-m=slide]>*,[data-m=chart]>*,[data-m=photo] img,[data-m=arch]>img,[data-m=wide]>img{opacity:1!important;scale:none!important;filter:none!important}
}

/* ── v15 (16 Oct): office, email and company profile in the footer and on Start a project ── */
.fmeta{display:grid;gap:26px;margin-top:56px;padding-top:26px;border-top:1px solid var(--hair)}
@media (min-width:900px){.fmeta{grid-template-columns:6fr 3fr 3fr;column-gap:40px}}
.fm-v{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;font-size:var(--t-body);color:var(--paper);text-decoration:none;border-bottom:1px solid rgba(245,247,248,.3)}
.fm-v:hover{border-bottom-color:var(--paper)}
.office .ob{display:grid;gap:10px;margin-top:10px;text-decoration:none;color:inherit}
@media (min-width:700px){.office .ob{grid-template-columns:1fr 1fr;column-gap:28px;align-items:start}}
.office .oe{font-size:var(--t-body);line-height:1.55;direction:ltr;text-align:left}
.office .oa{font-size:var(--t-body-ar);line-height:1.7;direction:rtl;text-align:right}
.office .go{grid-column:1/-1;display:inline-flex;min-height:32px;align-items:center;font-size:var(--t-meta);color:var(--slatel)}
.office .ob:hover .go{color:var(--paper)}
.light .office .oe,.light .office .oa{color:var(--ink)}
.light .office .go{color:var(--slate)}
.light .office .ob:hover .go{color:var(--ink)}
/* ── phones: Start a project, one tap away (20 Oct, design audit #2B) ── inset, never full width */
.cta-dock{position:fixed;z-index:35;inset-inline-end:var(--g);bottom:calc(16px + env(safe-area-inset-bottom));min-height:48px;padding:0 20px;
  box-shadow:0 10px 28px rgba(0,0,0,.38);transition:opacity .2s,translate .2s var(--ease-out),visibility 0s}
.cta-dock:not(.on){opacity:0;translate:0 12px;pointer-events:none;visibility:hidden;transition:opacity .2s,translate .2s var(--ease-out),visibility 0s .2s}
html.sheet-open .cta-dock{display:none}
@media (min-width:700px){.cta-dock{display:none}}
/* the rule: Arabic is never smaller than the English beside it */
html[lang=en] span.o[lang=ar],html[lang=en] span.sub-o[lang=ar]{font-size:inherit!important}
/* English set inside an Arabic page keeps its own direction (no stray full stops at the wrong end), and the reverse */
html[dir=rtl] span[lang=en]{direction:ltr;unicode-bidi:isolate;text-align:right}
html[dir=ltr] span[lang=ar]{direction:rtl;unicode-bidi:isolate;text-align:left}
/* English left, Arabic right, in both languages, wherever the two are set side by side as a pair */
.duo{direction:ltr}
.duo>.ar,.duo>[lang=ar]{direction:rtl;text-align:right}
.duo>.en,.duo>[lang=en]{direction:ltr;text-align:left}
/* ── Liquid Glass: the floating controls (20 Oct, same layer as the portal) ──────────────
   Glass only on the controls that float over the page: the header, the phone menu, Start a project.
   Content stays solid and keeps the brand's square edges; the floating layer is rounded, concentric.
   Tints are INK so the paper text keeps ≥ 4.5:1 over the brightest photo; stronger once the page moves under them, so a light section reads as smoked glass, not grey. */
:root{--gl-tint:rgba(18,23,28,.62);--gl-tint-s:rgba(18,23,28,.82);--gl-blur:blur(22px) saturate(180%);
  --gl-rim:inset 0 0 0 1px rgba(245,247,248,.14);--gl-hi:inset 0 1px 0 rgba(245,247,248,.16);--gl-shade:0 12px 32px -12px rgba(0,0,0,.55)}
/* phones and tablets: the header floats as a glass capsule; the menu button sits concentric inside it */
@media (max-width:1099px){
  .hdr,.hdr.solid,html.sheet-open .hdr{inset:calc(env(safe-area-inset-top) + 10px) 10px auto 10px;height:56px;border-radius:28px;border:0;
    padding-inline:16px 4px;background:var(--gl-tint);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
    box-shadow:var(--gl-rim),var(--gl-hi),var(--gl-shade);transition:background-color .4s var(--ease)}
  .hdr.solid,html.sheet-open .hdr{background:var(--gl-tint-s)}
  .hdr .end{gap:4px}
  .menu-btn{margin-inline-end:0;border-radius:24px;transition:background-color .25s}
  .menu-btn[aria-expanded=true]{background:rgba(245,247,248,.1)}
  .lang{border-radius:22px;padding:0 12px}
  .hdr .btn{min-height:40px;padding:0 16px;border-radius:20px}
  /* the menu: the page blurs behind, the rows sit in one glass panel under the header */
  .sheet{background:rgba(11,15,18,.5);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
  .sh-in{max-width:none;margin:calc(env(safe-area-inset-top) + 74px) 10px calc(env(safe-area-inset-bottom) + 10px);
    min-height:calc(100% - 84px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:clamp(14px,3vh,28px) 18px 20px;
    border-radius:28px;background:rgba(30,40,49,.8);box-shadow:var(--gl-rim),var(--gl-hi),0 28px 64px -24px rgba(0,0,0,.7)}
  /* small labels one step lighter than STEEL: the panel can sit over a light section (≥ 5:1 measured on the worst case) */
  .sh-nav .k,.sh-nav .go,.sh-ppl .label,.sh-ft{color:#A3AFB8}
  .sh-nav a[aria-current] .k{color:#9DBAD3}
  .sh-cta .btn{border-radius:27px}
}
@media (min-width:700px) and (max-width:1099px){
  .hdr,.hdr.solid,html.sheet-open .hdr{inset-inline:16px;padding-inline:20px 4px}
  .sh-in{margin-inline:16px;padding:32px 32px 28px}
}
@media (max-width:420px){.hdr,.hdr.solid,html.sheet-open .hdr{padding-inline:12px 4px}.brand{gap:10px}.lang{padding:0 10px}}
/* phones: Start a project is the one coloured control, tinted glass, concentric with the header's edge */
.cta-dock{inset-inline-end:10px;bottom:calc(12px + env(safe-area-inset-bottom));border-radius:24px;background:rgba(62,92,120,.88);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  box-shadow:inset 0 0 0 1px rgba(245,247,248,.18),inset 0 1px 0 rgba(245,247,248,.24),0 12px 30px -8px rgba(0,0,0,.5)}
.cta-dock:hover{background:rgba(74,108,139,.92)}
/* desktop: the bar becomes glass once the page moves under it; the four pages sit in one glass capsule */
@media (min-width:1100px){
  .hdr.solid{background:rgba(18,23,28,.8);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);border-bottom-color:rgba(245,247,248,.1)}
  .nav{gap:2px;padding:4px;border-radius:24px;background:rgba(245,247,248,.06);box-shadow:var(--gl-rim),var(--gl-hi);transition:background-color .4s var(--ease)}
  .hdr:not(.solid) .nav{background:rgba(18,23,28,.34);-webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur)}
  .nav a{padding:9px 16px;border-radius:20px;transition:background-color .25s,color .25s}
  .nav a:hover{background:rgba(245,247,248,.08)}
  .nav a[aria-current]{background:rgba(245,247,248,.14)}
  .nav a[aria-current]::after{display:none}
  .lang{border-radius:22px}
  .hdr .btn{border-radius:22px}
}
/* Reduce Transparency, Increase Contrast, and browsers without the blur: solid, same shapes */
@media (prefers-reduced-transparency:reduce){
  .hdr.solid,.sheet,.cta-dock,.nav,.hdr:not(.solid) .nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .hdr.solid{background:var(--ink)}.sheet{background:var(--ink)}.sh-in{background:var(--deep)}.cta-dock{background:var(--slate)}.nav,.hdr:not(.solid) .nav{background:var(--deep)}
}
@media (prefers-reduced-transparency:reduce) and (max-width:1099px){
  .hdr,html.sheet-open .hdr{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--ink)}
}
@media (prefers-contrast:more){
  :root{--gl-rim:inset 0 0 0 1px rgba(245,247,248,.5);--gl-tint:rgba(18,23,28,.86);--gl-tint-s:rgba(18,23,28,.92)}
  .sh-in{background:var(--deep)}.cta-dock{background:var(--slate)}
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  :root{--gl-tint:rgba(18,23,28,.94);--gl-tint-s:rgba(18,23,28,.96)}
  .sheet{background:rgba(11,15,18,.9)}.sh-in{background:var(--deep)}.cta-dock{background:var(--slate)}
}