/* Alfa Capital. Warm ink, white and stone grounds, one bronze accent.
   Type does the work: large, tight headlines, grey copy with ink emphasis, small tracked labels, hairlines.
   No shadows, outlines, glows or chips. Layout spans the page with generous margins. */
:root{
  --ink:#0b0b0a; --ink-2:#151412; --paper:#ffffff; --stone:#f4f2ee; --stone-2:#ebe7e0;
  --text:#0b0b0a; --text-2:#6b665e; --text-3:#b9b3a9; --line:rgba(11,11,10,.12);
  --bronze:#9c7339; --metal:#c8a26a; --on:#ffffff; --bg:var(--paper);
  --f:"Instrument Sans","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --fa:"IBM Plex Sans Arabic","Instrument Sans",Tahoma,system-ui,sans-serif;
  --max:1680px; --z:1; --gutter:clamp(20px,5vw,96px); --rhythm:clamp(104px,13vw,208px);
  --ease:cubic-bezier(.2,.7,.2,1); --nav:64px;
  color-scheme:light;
}
[data-on="dark"]{--bg:var(--ink);--text:#f4f1eb;--text-2:#a29c92;--text-3:#4c4842;--line:rgba(244,241,235,.12);--bronze:#d2ae76;--on:var(--ink)}
[data-on="stone"]{--bg:var(--stone)}
[data-on="light"]{--bg:var(--paper)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--nav)}
body{margin:0;background:var(--paper);color:var(--text);font:400 17px/1.55 var(--f);letter-spacing:-.006em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
[dir="rtl"] body{font-family:var(--fa);letter-spacing:0}
h1,h2,h3,p,ol,ul{margin:0}
h1,h2,h3{font-weight:600;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img,svg,canvas{display:block;max-width:100%}
::selection{background:#d9c39b;color:#0b0b0a}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;border-radius:4px}
.skip{position:fixed;inset-inline-start:16px;top:-80px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:14px}
.skip:focus{top:12px}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sec{position:relative;background:var(--bg);color:var(--text);padding-block:var(--rhythm)}
.label{display:block;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)}
/* the guide's spread: words in the narrower left column, the picture or list on the right */
.spread{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,128px);align-items:start}
[dir="rtl"] .label{letter-spacing:0;font-size:15px}
.h2{margin-top:28px;font-size:clamp(40px,5.4vw,88px);line-height:1.02;letter-spacing:-.034em;max-width:16ch}
[dir="rtl"] .h2{letter-spacing:0;line-height:1.2}
.lead{font-size:clamp(19px,1.45vw,24px);line-height:1.45;color:var(--text-2);max-width:40ch}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translate3d(0,28px,0)}
.js .rv.in{opacity:1;transform:none;transition:opacity 1s var(--ease) var(--d,0s),transform 1.2s var(--ease) var(--d,0s)}

/* ---------- brand ---------- */
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--text)}
.brand svg{height:22px;width:auto;fill:currentColor}
.brand .word{font-size:14px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
[dir="rtl"] .brand .word{letter-spacing:0;font-size:17px;font-weight:600}

/* ---------- nav ---------- */
.nav{position:fixed;inset-inline:0;top:0;z-index:50;color:var(--text);transition:background-color .4s ease,color .4s ease}
.nav[data-on="dark"]{--text:#f4f1eb;--text-2:#a29c92}
.nav[data-on="light"],.nav[data-on="stone"]{--text:#0b0b0a;--text-2:#6b665e}
.nav.sc[data-on="dark"]{background:rgba(0,0,0,.72);-webkit-backdrop-filter:saturate(160%) blur(20px);backdrop-filter:saturate(160%) blur(20px)}
.nav.sc[data-on="light"]{background:rgba(255,255,255,.76);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.nav.sc[data-on="stone"]{background:rgba(244,242,238,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.nav-in{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);height:var(--nav);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.nav .brand{justify-self:start;color:var(--text)}
.links{display:flex;gap:clamp(20px,2.4vw,40px);font-size:14px;color:var(--text-2)}
.links a{transition:color .25s ease}
.links a:hover{color:var(--text)}
[dir="rtl"] .links{font-size:15px}
.tools{justify-self:end;display:flex;align-items:center;gap:22px;font-size:14px}
.lang{color:var(--text-2);transition:color .25s ease}
.lang:hover{color:var(--text)}
.lang:lang(ar){font-family:var(--fa);font-size:15px}
.lang:lang(en){font-family:var(--f)}
.cta{background:var(--text);color:var(--on,#0b0b0a);border-radius:999px;padding:9px 18px;font-weight:500;transition:opacity .25s ease}
.nav[data-on="dark"] .cta{color:#0b0b0a}
.nav[data-on="light"] .cta,.nav[data-on="stone"] .cta{color:#fff}
.cta:hover{opacity:.86}
.burger{display:none;border:0;background:none;width:40px;height:40px;position:relative;cursor:pointer;padding:0}
.burger i{position:absolute;inset-inline:10px;height:1.5px;background:var(--text);transition:transform .35s var(--ease),top .35s var(--ease)}
.burger i:first-child{top:16px}.burger i:last-child{top:23px}
.burger[aria-expanded="true"] i:first-child{top:19.5px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{top:19.5px;transform:rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:40;background:var(--ink);color:#f4f1eb;padding:calc(var(--nav) + 40px) var(--gutter) 40px;display:flex;flex-direction:column;justify-content:space-between}
.sheet[hidden]{display:none}
.sheet nav{display:grid;gap:6px}
.sheet nav a{font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1.2}
[dir="rtl"] .sheet nav a{letter-spacing:0}
.sheet-foot{display:grid;gap:6px;font-size:17px;color:#a29c92;font-family:var(--f)}
.sheet-foot a{justify-self:start}

/* ---------- hero film ---------- */
.hero{position:relative;height:400vh;background:#000;color:var(--text)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.alpha{position:absolute;inset:0;width:100%;height:100%}
.fallback{position:absolute;inset:0;pointer-events:none;transition:opacity 1.4s var(--ease)}
.fallback svg{position:absolute;left:50%;top:var(--fb-top,54vh);height:var(--fb-h,34vh);width:auto;transform:translateX(-50%);fill:var(--metal)}
.gl .fallback{opacity:0}
.no-js .hero{height:auto}
.no-js .film{display:none}
.intro{position:absolute;inset-inline:0;top:calc(var(--nav) + 8vh);text-align:center;padding-inline:var(--gutter);will-change:opacity,transform}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze)}
[dir="rtl"] .eyebrow{letter-spacing:0;font-size:15px}
.intro h1{margin:22px auto 0;font-size:clamp(48px,min(6.6vw,10.4vh),calc(112px * var(--z)));line-height:.98;letter-spacing:-.04em;max-width:12ch}
[dir="rtl"] .intro h1{letter-spacing:0;line-height:1.15}
.intro .sub{margin:24px auto 0;font-size:clamp(18px,min(1.5vw,2.4vh),calc(23px * var(--z)));line-height:1.45;color:var(--text-2);max-width:34ch}
.film{position:absolute;inset-block:0;inset-inline-start:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)));list-style:none;padding:0;display:flex;flex-direction:column;justify-content:center;gap:.06em;font-size:clamp(40px,min(5.4vw,9vh),calc(96px * var(--z)));font-weight:600;line-height:1.04;letter-spacing:-.04em;opacity:0;pointer-events:none}
[dir="rtl"] .film{letter-spacing:0;line-height:1.25}
.film li{color:#2c2a26;transition:color .6s ease}
.film li.on{color:#f4f1eb}
.js .intro > *{opacity:0;transform:translate3d(0,18px,0);animation:arrive 1.4s var(--ease) forwards}
.js .intro > :nth-child(2){animation-delay:.12s}.js .intro > :nth-child(3){animation-delay:.24s}
@keyframes arrive{to{opacity:1;transform:none}}
.js .alpha{opacity:0;transform:translate3d(0,3vh,0);transition:opacity 1.8s var(--ease) .2s,transform 2.2s var(--ease) .2s}
.gl .alpha{opacity:1;transform:none}

/* ---------- about ---------- */
.statement{margin-top:44px;font-size:clamp(30px,3.6vw,60px);line-height:1.14;letter-spacing:-.026em;font-weight:500;max-width:28ch}
[dir="rtl"] .statement{letter-spacing:0;line-height:1.45;max-width:30ch}
.statement .w{color:var(--text-3);transition:color .45s ease}
.statement .w.on{color:var(--text)}

/* ---------- work ---------- */
.work .head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 16px;align-items:end}
.work .lead{padding-bottom:10px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(56px,6vw,96px)}
.tiles.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles.two .tile{min-height:600px}
.tiles.two .art svg{max-width:400px}
.tile{background:var(--paper);border-radius:28px;padding:clamp(28px,2.6vw,44px);display:flex;flex-direction:column;min-height:540px}
.tile .art{flex:1;display:grid;place-items:center;min-height:220px;margin:-4px -4px 28px}
.tile .art svg{width:100%;max-width:340px;height:auto;overflow:visible}
.tile .n{font-size:13px;letter-spacing:.12em;color:var(--bronze);font-variant-numeric:tabular-nums}
.tile h3{margin-top:12px;font-size:clamp(30px,2.5vw,40px);letter-spacing:-.03em;line-height:1.05}
[dir="rtl"] .tile h3{letter-spacing:0;line-height:1.3}
.tile p{margin-top:12px;font-size:17px;line-height:1.5;color:var(--text-2);max-width:32ch}
.note{margin-top:40px;font-size:15px;color:var(--text-2)}

/* drawings: ink hairlines, faint construction lines, one bronze detail. --k (set by site.js) keeps every line one pixel wide at any size */
.fa{overflow:visible}
.fa .h{fill:none;stroke:#0b0b0a;stroke-width:calc(1.1px * var(--k,1) / var(--m,1));stroke-linecap:round;stroke-linejoin:round}
.fa .c{fill:none;stroke:#0b0b0a;stroke-opacity:.22;stroke-width:calc(1px * var(--k,1) / var(--m,1))}
.fa .c.dash{stroke-dasharray:calc(3px * var(--k,1) / var(--m,1)) calc(4px * var(--k,1) / var(--m,1))}
.fa .a{fill:none;stroke:var(--metal);stroke-width:calc(1.5px * var(--k,1) / var(--m,1));stroke-linecap:round;stroke-linejoin:round}
.fa .dot{fill:var(--metal)}
.fa .ink{fill:#0b0b0a}
.fa .face{fill:var(--paper)}
.fa .mk{fill:var(--metal)}
.fa .pop{transform-box:fill-box;transform-origin:center}
.fa .lp-grow,.fa .hx-loop,.fa .pkt,.fa-mark .ln{opacity:0}
/* our approach: one statement on ink, set like the guide's 'Our idea' page */
.idea{padding-block:calc(var(--rhythm) * 1.15)}
.idea-h{margin-top:36px;font-size:clamp(56px,8.4vw,164px);line-height:.96;letter-spacing:-.05em;font-weight:600;max-width:12ch;text-wrap:balance}
[dir="rtl"] .idea-h{letter-spacing:0;line-height:1.25}
.idea .lead{margin-top:clamp(36px,3.6vw,64px);max-width:40ch;font-size:clamp(19px,1.6vw,27px)}
/* partnerships: words on the left, a long road on the right */
.partner .spread{align-items:center;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.partner .h2{max-width:14ch;text-wrap:balance}
.partner .lead,.contact .lead{margin-top:28px}
.partner .go{margin-top:clamp(36px,3.4vw,56px)}
.art-wide svg{display:block;width:100%;height:auto;overflow:visible}

/* gallery: cards you scroll sideways; the active dot's fill is the timer, as on apple.com */
.gal-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.gal-arrows{display:flex;gap:10px;padding-bottom:8px}
.gal-arrows button,.gal-play{width:48px;height:48px;border-radius:999px;border:0;background:rgba(11,11,10,.07);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background-color .25s ease,opacity .25s ease}
.gal-arrows button:hover,.gal-play:hover{background:rgba(11,11,10,.13)}
.gal-arrows button:disabled{opacity:.3;cursor:default}
.gal-arrows svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
[dir="rtl"] .gal-arrows svg{transform:scaleX(-1)}
.gal{margin-top:clamp(32px,3.4vw,56px)}
/* the track lines up with the page's content edge (100% here leaves out a desktop scrollbar, which 100vw would count) */
.gal-track{--pad:max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter)));--card:min(70vw,960px);--gap:clamp(12px,1.4vw,20px);display:flex;gap:var(--gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-inline:var(--pad);scroll-padding-inline:var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gal-track::-webkit-scrollbar{display:none}
/* room after the last card, so it too can come to rest on the content edge */
.gal-track::after{content:"";flex:0 0 calc(100% - var(--card) - var(--gap))}
.gal-card{position:relative;flex:0 0 var(--card);height:clamp(420px,min(36vw,60vh),580px);scroll-snap-align:start;background:var(--paper);border-radius:28px;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(28px,3vw,52px);overflow:hidden}
/* the drawing takes the card's right side; the words sit bottom left */
.gal-card .art{position:absolute;top:clamp(18px,2vw,36px);bottom:clamp(18px,2vw,36px);inset-inline-end:clamp(18px,2.4vw,44px);inset-inline-start:34%;display:grid;place-items:center}
.gal-card .art svg{width:100%;height:100%;overflow:visible}
.gal-card .cap{position:relative;display:grid;gap:10px;max-width:38%}
.gal-card .n{font-size:14px;letter-spacing:.12em;color:var(--bronze);font-variant-numeric:tabular-nums}
.gal-card h3{font-size:clamp(34px,3.8vw,64px);letter-spacing:-.04em;line-height:1.02}
[dir="rtl"] .gal-card h3{letter-spacing:0;line-height:1.3}
.gal-card p{font-size:clamp(17px,1.45vw,23px);color:var(--text-2)}
.gal-card.end{background:var(--ink);color:#f4f1eb}
.gal-card.end .art{inset-inline-start:46%;padding:clamp(24px,4vw,64px)}
.gal-card.end h3{color:#f4f1eb;max-width:14ch}
.gal-card.end .cap{max-width:52%}
.gal-ui{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:28px}
.gal-dots{display:flex;align-items:center;gap:10px;height:48px;padding-inline:22px;border-radius:999px;background:rgba(11,11,10,.07)}
.gal-dots .dot{position:relative;width:8px;height:8px;border:0;padding:0;border-radius:999px;background:rgba(11,11,10,.3);cursor:pointer;overflow:hidden;transition:width .5s var(--ease),background-color .3s ease}
.gal-dots .dot.on{width:48px;background:rgba(11,11,10,.16)}
.gal-dots .dot i{position:absolute;inset:0;border-radius:inherit;background:var(--text);transform:scaleX(0);transform-origin:left center}
[dir="rtl"] .gal-dots .dot i{transform-origin:right center}
.gal-dots .dot.on i{animation:galfill var(--dur,5s) linear forwards}
.gal-ui.paused .dot.on i,.gal-ui.idle .dot.on i{animation-play-state:paused}
@keyframes galfill{to{transform:scaleX(1)}}
.gal-play svg{width:16px;height:16px;fill:currentColor}
.gal-play .i-play{display:none}
.gal-ui.paused .gal-play .i-play{display:block}
.gal-ui.paused .gal-play .i-pause{display:none}
/* the pen: when a card comes forward, its drawing is written again from the first line */
.fa .dr{stroke-dasharray:1 1}
.gal-card.live .fa .dr{animation:pen var(--dur,1s) cubic-bezier(.5,0,.15,1) var(--sd,0s) both}
.gal-card.live .fa .pop{animation:pop .7s cubic-bezier(.2,.7,.2,1) var(--sd,0s) both}
.gal-card.live .fa .fade{animation:fade .8s ease var(--sd,0s) both}
@keyframes pen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* drawings outside the gallery are written once, when they come into view */
.rv.in .fa .dr{animation:pen var(--dur,1s) cubic-bezier(.5,0,.15,1) var(--sd,0s) both}
.rv.in .fa .pop{animation:pop .7s cubic-bezier(.2,.7,.2,1) var(--sd,0s) both}
.rv.in .fa .fade{animation:fade .8s ease var(--sd,0s) both}
.fa .a.trav{opacity:0;stroke-width:calc(3.2px * var(--k,1))}
.rv.in .fa .a.trav{stroke-dasharray:.04 .96;animation:travel 4.6s cubic-bezier(.45,0,.55,1) var(--ld) infinite}
@keyframes travel{from{stroke-dashoffset:.04;opacity:1}to{stroke-dashoffset:-.96;opacity:1}}
@keyframes pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* cards waiting their turn keep a faint, finished drawing */
.gal-card .art{transition:opacity .6s ease}
.gal-card:not(.live) .art{opacity:.3}
/* after the pen, a quiet loop while the card is in front */
.gal-card.live .lp-grow{animation:grow 5.5s cubic-bezier(.2,.7,.2,1) var(--ld) infinite}
@keyframes grow{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.13)}}
.gal-card.live .lp-f1{animation:hover 6s ease-in-out var(--ld) infinite}
.gal-card.live .lp-f2{animation:hover 6s ease-in-out calc(var(--ld) + .7s) infinite}
@keyframes hover{0%,100%{transform:none}50%{transform:translateY(-6px)}}
.gal-card.live .fa .pkt{stroke-dasharray:.07 1.53;animation:packet 2.6s linear calc(var(--ld) + var(--pd,0s)) infinite}
@keyframes packet{from{stroke-dashoffset:.07;opacity:1}to{stroke-dashoffset:-1.53;opacity:1}}
.gal-card.live .hx-in{animation:gone .01s linear var(--ld) forwards}
.gal-card.live .hx-loop{animation:fade .01s linear var(--ld) forwards,slide 7s linear var(--ld) infinite}
@keyframes gone{to{opacity:0}}
@keyframes slide{to{transform:translateX(156px)}}
.gal-card.live .lp-load{animation:trolley 9s ease-in-out var(--ld) infinite alternate}
@keyframes trolley{to{transform:translate(17.3px,10px)}}
.gal-card.live .lp-lift{animation:lower 4.5s ease-in-out var(--ld) infinite alternate}
@keyframes lower{to{transform:translateY(14px)}}
.gal-card.live .lp-cable{animation:cable 4.5s ease-in-out var(--ld) infinite alternate}
@keyframes cable{to{transform:scaleY(1.35)}}
.gal-card.live .fa .ndl{animation:settle 2.6s cubic-bezier(.33,0,.2,1) 1.9s both}
@keyframes settle{0%{transform:rotate(-140deg)}48%{transform:rotate(10deg)}68%{transform:rotate(-4deg)}84%{transform:rotate(1.5deg)}100%{transform:none}}
.gal-card.live .fa .ndl-l{animation:sway 7s ease-in-out var(--ld) infinite}
@keyframes sway{0%,100%{transform:none}30%{transform:rotate(-2deg)}70%{transform:rotate(1.4deg)}}
.gal-card.live .lp-dlv{animation:deliver 8s cubic-bezier(.45,0,.2,1) var(--ld) infinite}
@keyframes deliver{0%,34%{transform:none;opacity:1}42%{transform:none;opacity:0}43%{transform:translate(53px,31px);opacity:0}54%{opacity:1}80%,100%{transform:none;opacity:1}}
.gal-card.live .fa-mark .ln{animation:penout 2.9s ease both}
.gal-card.live .fa-mark .mk{animation:fillin 2.9s ease both}
@keyframes penout{0%,74%{opacity:1}100%{opacity:0}}
@keyframes fillin{0%,58%{opacity:0}100%{opacity:1}}

/* ---------- how ---------- */
.rows{list-style:none;padding:0;margin-top:clamp(56px,6vw,96px);border-bottom:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:minmax(80px,1fr) minmax(0,4fr) minmax(0,4fr);gap:24px 48px;align-items:baseline;padding-block:clamp(28px,3vw,44px);border-top:1px solid var(--line)}
.rows .n{font-size:14px;letter-spacing:.12em;color:var(--bronze);font-variant-numeric:tabular-nums}
.rows h3{font-size:clamp(26px,2.4vw,40px);font-weight:500;letter-spacing:-.025em;line-height:1.1}
[dir="rtl"] .rows h3{letter-spacing:0;line-height:1.35}
.rows p{font-size:clamp(17px,1.3vw,21px);line-height:1.5;color:var(--text-2);max-width:38ch}

/* ---------- riyadh ---------- */
.home{overflow:hidden;padding-block:calc(var(--rhythm) * 1.1)}
.dunes{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.home .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px 64px;align-items:end}
.home .lead{margin-top:28px}
.clock{justify-self:end;text-align:end}
.time{font-size:clamp(84px,11vw,188px);line-height:.9;font-weight:300;color:var(--bronze);letter-spacing:-.06em;font-variant-numeric:tabular-nums;font-family:var(--f)}
.clock .meta{margin-top:22px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 24px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
[dir="rtl"] .clock .meta{letter-spacing:0;font-size:15px}
.coords{color:var(--bronze);font-variant-numeric:tabular-nums}

/* ---------- contact ---------- */
.contact .lead{margin-top:28px}
.mail{margin-top:clamp(8px,1vw,16px);display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 28px;padding-bottom:clamp(28px,3vw,44px);border-bottom:1px solid var(--line)}
.mail .addr{font-size:clamp(28px,4.6vw,76px);font-weight:500;letter-spacing:-.035em;line-height:1.1;overflow-wrap:anywhere;font-family:var(--f);background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease)}
.mail .addr:hover{background-size:100% 1px}
.copy{border:0;background:none;cursor:pointer;font-size:15px;color:var(--text-2);padding:6px 0;border-bottom:1px solid var(--line);transition:color .25s ease}
.copy:hover{color:var(--text)}
.contact .go{margin-top:clamp(36px,3.4vw,56px)}
.specs{margin:0}
.specs div{display:grid;grid-template-columns:minmax(110px,.32fr) minmax(0,1fr);gap:8px 24px;padding:22px 0;border-bottom:1px solid var(--line)}
.specs dt{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);padding-top:5px}
[dir="rtl"] .specs dt{letter-spacing:0;font-size:15px}
.specs dd{margin:0;font-size:19px;line-height:1.5}
.specs dd a{transition:color .25s ease}
.specs dd a:hover{color:var(--bronze)}
.phones{display:grid;gap:2px;font-variant-numeric:tabular-nums}
.specs .phones{margin:0}
.btn{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;background:var(--ink);color:#fff;border-radius:999px;padding:18px 30px;font-size:17px;font-weight:500;transition:transform .3s var(--ease),background-color .3s ease}
.btn:hover{background:#2a2824}
.btn:active{transform:scale(.98)}

/* ---------- footer ---------- */
.foot{background:var(--stone);color:var(--text);padding-block:clamp(112px,12vw,200px) 40px}
.foot-sign{display:grid;justify-items:center;gap:28px;text-align:center;padding-bottom:clamp(88px,9vw,152px)}
.foot-mark svg{display:block;height:clamp(64px,6.4vw,112px);width:auto;fill:var(--bronze)}
.foot-line{font-size:clamp(20px,1.6vw,26px);color:var(--text);letter-spacing:-.01em}
.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:16px 32px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--line);font-size:13px;color:var(--text-2)}
.foot-bot nav{display:flex;gap:24px;flex-wrap:wrap}
.foot-bot a{transition:color .25s ease}
.foot-bot a:hover{color:var(--text)}
.totop{margin-inline-start:18px}
.totop:hover{color:var(--text)}

/* ---------- 404 ---------- */
.nf{min-height:100svh;display:grid;place-items:center;text-align:center;background:var(--ink);color:#f4f1eb;padding:var(--gutter)}
.nf svg{height:72px;width:auto;margin:0 auto 40px;fill:var(--metal)}
.nf h1{font-size:clamp(40px,6vw,88px);letter-spacing:-.04em;line-height:1}
[dir="rtl"] .nf h1{letter-spacing:0;line-height:1.25}
.nf p{margin-top:20px;color:#a29c92;font-size:19px}
.nf a{display:inline-block;margin-top:36px;background:#f4f1eb;color:#0b0b0a;border-radius:999px;padding:14px 26px;font-weight:500}

/* ---------- responsive ---------- */
@media (max-width:760px),(max-aspect-ratio:21/20){
  .film{inset-block:auto 13vh;inset-inline-start:var(--gutter);inset-inline-end:var(--gutter);justify-content:flex-end;font-size:clamp(32px,9.6vw,72px)}
}
@media (max-width:1100px){
  .burger{display:block}
  .spread,.partner .spread{grid-template-columns:1fr}
  .links{display:none}
  .nav-in{grid-template-columns:1fr auto}
  .tiles{grid-template-columns:1fr 1fr}
  .rows li{grid-template-columns:minmax(56px,.6fr) minmax(0,4fr) minmax(0,4fr)}
}
@media (max-width:760px){
  :root{--nav:58px}
  .cta{display:none}
  .burger{display:block}
  .tools{gap:12px}
  .brand .word{font-size:13px;letter-spacing:.18em}
  .hero{height:360vh}
  .intro{top:calc(var(--nav) + 6vh)}
  .intro .sub{max-width:28ch}
  .work .head{grid-template-columns:1fr}
  .tiles,.tiles.two{grid-template-columns:1fr}
  .gal-track{--card:84vw}
  .gal-card{height:min(580px,136vw)}
  .gal-card .art{top:14px;inset-inline:12px;bottom:44%}
  .gal-card .cap,.gal-card.end .cap{max-width:none}
  .gal-card .fa{--m:var(--mz,1);transform:scale(var(--m))}
  .gal-card.end .art{inset-inline-start:12px;padding:12% 18%}
  .gal-arrows{display:none}
  .tiles.two .tile{min-height:0}
  .tile{min-height:0}
  .tile .art{min-height:200px}
  .rows li{grid-template-columns:1fr;gap:10px}
  .home .wrap{grid-template-columns:1fr}
  .clock{justify-self:start;text-align:start}
  .clock .meta{justify-content:flex-start}
  .specs div{grid-template-columns:1fr;gap:6px}
  .foot-bot{flex-direction:column}
}
/* very large screens: the page grows as one, as if the display itself were scaled */
@media (min-width:2200px){:root{--z:1.18}}
@media (min-width:2800px){:root{--z:1.4}}
@media (min-width:3400px){:root{--z:1.66}}
@media (min-width:2200px){
  :root{--max:calc(1680px * var(--z));--gutter:calc(96px * var(--z));--rhythm:calc(208px * var(--z));--nav:calc(64px * var(--z))}
  body{font-size:calc(17px * var(--z))}
  .label,.eyebrow,.clock .meta,.specs dt,.foot-bot{font-size:calc(13px * var(--z))}
  [dir="rtl"] .label,[dir="rtl"] .eyebrow,[dir="rtl"] .clock .meta,[dir="rtl"] .specs dt,[dir="rtl"] .links,.lang:lang(ar),.copy{font-size:calc(15px * var(--z))}
  .brand .word,.links,.tools,.gal-card .n{font-size:calc(14px * var(--z))}
  [dir="rtl"] .brand .word,.btn{font-size:calc(17px * var(--z))}
  .h2{font-size:calc(88px * var(--z))}
  .lead{font-size:calc(24px * var(--z))}
  .gal-track{--card:calc(960px * var(--z));--gap:calc(20px * var(--z))}
  .gal-card{height:calc(580px * var(--z));padding:calc(52px * var(--z));border-radius:calc(28px * var(--z))}
  .gal-card h3{font-size:calc(64px * var(--z))}
  .gal-card p{font-size:calc(23px * var(--z))}
  .gal-arrows button,.gal-play{width:calc(48px * var(--z));height:calc(48px * var(--z))}
  .gal-dots{height:calc(48px * var(--z))}
  .time{font-size:calc(188px * var(--z))}
  .mail .addr{font-size:calc(76px * var(--z))}
  .specs dd,.phones{font-size:calc(19px * var(--z))}
  .statement{font-size:calc(60px * var(--z))}
  .idea-h{font-size:calc(164px * var(--z))}
  .idea .lead{font-size:calc(27px * var(--z))}
}

@media (prefers-reduced-motion:reduce){
  .hero{height:auto}
  .stage{position:relative}
  .film{display:none}
  .js .rv,.js .intro > *,.js .alpha{opacity:1;transform:none;animation:none;transition:none}
  .fa *{animation:none!important}
  .gal-card:not(.live) .art{opacity:1}
}