@charset "utf-8";
/* ============================================================================
   MS MARKETING SOLUTIONS — mark 14
   Mark 13's editorial paper system, made to move. One story carries the home
   page — a hotel façade whose windows light as the work is told — and every
   other interaction exists to help a hotelier decide, not to decorate.

   Motion rules (learned from Z House mark 6, Adiyat and Alathel):
   · Nothing is hidden in plain CSS. "Before reveal" states live only under
     html.motion-ready, which mark14.js adds once its observers are attached.
   · html[data-motion="off"] (OS setting, footer toggle or ?motion=off) shows
     the finished page: no pins, no scrubbing, no marquee, no cursor.
   · Hover effects only where hover exists (hover:hover and pointer:fine).
   · Every UI transition is under 300 ms and uses a strong ease-out; the long
     ones (reveals, the façade) are narrative, not interface.
   ========================================================================= */

/* ---------- 1. Fonts (self-hosted) -------------------------------------- */
/* Reading text: Jost (English), Amiri (Arabic). Brand face: MadinahEng and
   Almadinah, used only where the type is large — a display face this short on
   its em cannot carry body copy or 12px labels (see README, "Type"). */
@font-face{font-family:'Jost';src:url('../fonts/jost-latin-400.woff2') format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';src:url('../fonts/jost-latinext-400.woff2') format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';src:url('../fonts/jost-latin-500.woff2') format('woff2');font-weight:500 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';src:url('../fonts/jost-latinext-500.woff2') format('woff2');font-weight:500 700;font-display:swap;
  unicode-range:U+0100-02BA,U+1E00-1E9F,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Amiri';src:url('../fonts/amiri-arabic-400.woff2') format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Amiri';src:url('../fonts/amiri-arabic-700.woff2') format('woff2');font-weight:700;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Amiri';src:url('../fonts/amiri-latin-400.woff2') format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2010-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Almadinah is drawn very small on its em (alef 0.39em against Amiri's 0.70em),
   so it only ever sets headlines. Its U+00A0 is 1em wide (a font bug that blew
   a hole in every  ) and its ASCII digits are a thin serif, so both are
   excluded and fall through to the Latin companion. */
@font-face{font-family:'Almadinah';src:url('../fonts/almadinah-arabic-400.woff2') format('woff2');font-weight:300 500;font-display:swap;
  unicode-range:U+0000-002F,U+003A-009F,U+00A1-10FFFF}
@font-face{font-family:'Almadinah';src:url('../fonts/almadinah-arabic-700.woff2') format('woff2');font-weight:600 800;font-display:swap;
  unicode-range:U+0000-002F,U+003A-009F,U+00A1-10FFFF}
@font-face{font-family:'MadinahEng';src:url('../fonts/madinah-eng-700.woff2') format('woff2');font-weight:300 800;font-display:swap}

/* ---------- 2. Tokens --------------------------------------------------- */
:root{
  /* paper — the client's chosen "paige" and its neighbours */
  --paper:#F5F3EE;
  --paper-white:#FFFFFF;
  --paper-deep:#EEEBE3;
  --ink-band:#141414;

  --ink:#1B1B1B;
  --ink-soft:rgba(27,27,27,.72);     /* 6.4:1 on paper */
  --ink-faint:rgba(27,27,27,.64);    /* 4.9:1 on every paper tone */
  --rule:rgba(27,27,27,.15);
  --rule-strong:rgba(27,27,27,.34);

  --paper-on-ink:#F5F3EE;
  --soft-on-ink:rgba(245,243,238,.74);
  --faint-on-ink:rgba(245,243,238,.62);
  --rule-on-ink:rgba(245,243,238,.2);

  /* brand colours, sampled from the 2026 profile: teal #0097B2, champagne gold #C9A96A, sun-yellow #FEDE5A */
  --teal:#0097B2;                    /* the brand teal: graphics, large numerals, thin rules */
  --teal-band:#00829B;               /* the teal as a ground for white text (4.5:1) */
  --teal-deep:#00778F;               /* buttons and teal text on paper (white on it 5.2:1, on paper 4.7:1) */
  --teal-ink:#00667A;                /* hover / pressed */
  --gold:#C9A96A;                    /* the brand gold: shapes, rules, anything on the dark band (8.2:1 on ink) */
  --gold-deep:#7A5F25;               /* the gold as text on paper (5.4:1) */
  --sun:#FEDE5A;                     /* the profile's highlight yellow: teal and dark grounds only */
  --accent:var(--teal);
  --accent-deep:var(--teal-deep);
  --glow:#E3C373;                    /* a lit window — brand gold, only ever on the night band */
  --unlit:#252525;
  --danger:#9B2C1F;                  /* 7.6:1 on white */

  /* type — brand face for big, reading face for everything else */
  --display:'MadinahEng','Jost',Georgia,serif;
  --text:'Jost','Helvetica Neue',Arial,sans-serif;

  --page:min(1240px,90vw);
  --measure:62ch;
  --section:clamp(5.5rem,13vh,10rem);
  --gap:clamp(1.5rem,3vw,2.75rem);

  /* easing: the built-in curves are too weak (emil-design-eng) */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --t-press:160ms;
  --t-ui:220ms;

  /* z-index layers, named once */
  --z-fab:50;
  --z-sheet:70;
  --z-header:80;
  --z-cursor:90;
}

/* ---------- 3. Reset & base -------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:light;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
html[data-motion="off"]{scroll-behavior:auto}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--text);font-weight:400;
  font-size:clamp(1.0625rem,.3vw + 1rem,1.1875rem);line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
ul,ol{list-style:none}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}
.band-ink :focus-visible,.foot :focus-visible,.sheet :focus-visible{outline-color:var(--paper-on-ink)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:14px 22px;font-size:.9rem}
.skip:focus{inset-inline-start:0}

/* ---------- 4. Typography ---------------------------------------------- */
h1,h2,h3,.display{font-family:var(--display);font-weight:400;color:var(--ink);text-wrap:balance}
.standfirst,.words{text-wrap:balance}
p,figcaption,li{text-wrap:pretty}
h1{font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1.04;letter-spacing:-.025em}
.hero h1.h1--long,.h1--long{font-size:clamp(2.2rem,4.8vw,4.2rem);line-height:1.08;max-width:22ch}
h2{font-size:clamp(2rem,4.3vw,3.7rem);line-height:1.08;letter-spacing:-.018em}
h3{font-size:clamp(1.3rem,1.9vw,1.7rem);line-height:1.22;letter-spacing:-.01em}
.band-ink h1,.band-ink h2,.band-ink h3{color:var(--paper-on-ink)}
p{max-width:var(--measure);color:rgba(27,27,27,.86)}
.band-ink p{color:var(--soft-on-ink)}
p + p{margin-top:1.1em}
strong{font-weight:500}

.label,.eyebrow{
  font-family:var(--text);font-weight:500;font-size:.75rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}
.eyebrow{display:block;margin-bottom:1.4rem;color:var(--gold-deep)}
.band-ink .label{color:var(--faint-on-ink)}
.band-ink .eyebrow{color:var(--gold)}
.standfirst{font-size:clamp(1.2rem,1.9vw,1.55rem);line-height:1.5;color:var(--ink-soft);max-width:38ch}
.num{font-variant-numeric:lining-nums tabular-nums}

/* a text link that earns its underline */
.link{
  position:relative;display:inline-block;padding-block:1rem .8rem;
  font-weight:500;font-size:.8125rem;letter-spacing:.18em;text-transform:uppercase;
}
.link::after{
  content:"";position:absolute;inset-inline:0;bottom:.5rem;height:2px;background:var(--teal);
  transform-origin:left;transition:transform .42s var(--ease-out);
}
html[dir="rtl"] .link::after{transform-origin:right}
@media (hover:hover) and (pointer:fine){.link:hover::after{transform:scaleX(.35)}}

/* ---------- 5. Buttons -------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:1.1rem;min-height:56px;
  padding-block:.5rem;padding-inline:1.7rem .5rem;border-radius:999px;
  background:var(--teal-deep);color:#fff;
  font-weight:500;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.1;
  transition:transform var(--t-press) var(--ease-out),background-color var(--t-ui) var(--ease-out);
}
.btn__ic{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:rgba(245,243,238,.16);transition:transform .32s var(--ease-out);
}
.btn__ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
html[dir="rtl"] .btn__ic svg{transform:scaleX(-1)}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--teal-ink)}
  .btn:hover .btn__ic{transform:translate(2px,-1px)}
  html[dir="rtl"] .btn:hover .btn__ic{transform:translate(-2px,-1px)}
}
.btn--light{background:var(--paper-on-ink);color:var(--ink)}
.btn--light .btn__ic{background:rgba(27,27,27,.1)}
@media (hover:hover) and (pointer:fine){.btn--light:hover{background:#fff}}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-strong)}
.btn--ghost .btn__ic{background:rgba(27,27,27,.08)}
@media (hover:hover) and (pointer:fine){.btn--ghost:hover{background:rgba(27,27,27,.05)}}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- 6. Layout --------------------------------------------------- */
.page{width:var(--page);margin-inline:auto}
.section{padding-block:var(--section)}
.section--tight{padding-block:clamp(3rem,7vh,5.5rem)}
.paper-white{background:var(--paper-white)}
.paper-deep{background:var(--paper-deep)}
.band-ink{background:var(--ink-band);color:var(--paper-on-ink)}
.rule{border:0;border-top:1px solid var(--rule)}
.center{text-align:center}
.center p,p.center,.eyebrow.center{margin-inline:auto}
p.center{text-align:center}
.eyebrow.center{text-align:center}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5.5rem);align-items:start}
.split--text{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
@media(max-width:820px){.split,.split--text{grid-template-columns:1fr;gap:2.25rem}}
@media(min-width:821px){.split--text > :first-child{position:sticky;inset-block-start:7.5rem}}
/* the organic paper edge between two grounds — the reference's signature */
.edge{display:block;width:100%;height:clamp(38px,5vw,80px);fill:var(--paper)}
.edge--to-white{fill:var(--paper-white)}
.edge--to-paper{fill:var(--paper)}
.edge--to-deep{fill:var(--paper-deep)}
.edge--to-ink{fill:var(--ink-band)}
.edge--to-teal{fill:var(--teal-band)}

/* ---------- 7. Header, progress, mobile sheet --------------------------- */
.progress{position:fixed;top:0;inset-inline:0;height:3px;z-index:calc(var(--z-header) + 1);pointer-events:none;
  background:var(--teal);transform:scaleX(var(--p,0));transform-origin:left}
html[dir="rtl"] .progress{transform-origin:right}
html:not(.motion-ready) .progress{display:none}

.masthead{position:sticky;top:0;z-index:var(--z-header);border-bottom:1px solid transparent;
  transition:background-color .3s var(--ease-out),border-color .3s var(--ease-out)}
.masthead.is-solid{background:color-mix(in srgb,var(--paper) 90%,transparent);
  -webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);
  border-bottom-color:var(--rule)}
.masthead__in{width:var(--page);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:78px}
.wordmark{display:flex;align-items:center;gap:.75rem;min-height:44px;direction:ltr}
/* the supplied logo is a WHITE lockup — recoloured with a mask so it sits on paper */
.wordmark__mark{width:30px;height:42px;flex:none;background:var(--ink);
  -webkit-mask:url('../img/brand/ms-logo-mark.png') center/contain no-repeat;
  mask:url('../img/brand/ms-logo-mark.png') center/contain no-repeat}
.wordmark__type{display:flex;flex-direction:column;line-height:1;direction:ltr;align-items:flex-start}
.wordmark__name{font-family:var(--display);font-size:1.3rem;letter-spacing:.02em}
.wordmark__sub{font-size:.6875rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-faint);margin-top:.4em}

.nav{display:flex;align-items:center;gap:clamp(1.2rem,2.6vw,2.6rem)}
.nav a{position:relative;font-weight:500;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
  padding-block:.9rem;transition:color var(--t-ui) var(--ease-out)}
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:.55rem;height:2px;background:var(--teal);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
html[dir="rtl"] .nav a::after{transform-origin:right}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.nav a:hover{color:var(--ink)}.nav a:hover::after{transform:scaleX(1)}}
.masthead__end{display:flex;align-items:center;gap:1rem}
.lang[lang="ar"]{font-size:1.02rem}
.lang{display:inline-flex;align-items:center;min-height:44px;padding:.4em 1.1em;border:1px solid var(--rule-strong);border-radius:999px;
  font-weight:500;font-size:.78rem;letter-spacing:.12em;color:var(--ink-soft);
  transition:border-color var(--t-ui),color var(--t-ui),transform var(--t-press) var(--ease-out)}
.lang:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.lang:hover{border-color:var(--ink);color:var(--ink)}}

.burger{display:none;width:44px;height:44px;position:relative}
.burger span{position:absolute;inset-inline:9px;height:1px;background:var(--ink);transition:transform .35s var(--ease-out)}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:26px}
html.nav-open .burger span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
html.nav-open .burger span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}

/* the sheet is a SIBLING of the header: a backdrop-filter on the header would
   make it the containing block for position:fixed and trap the menu inside the bar */
.sheet{position:fixed;inset:0;z-index:var(--z-sheet);background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;gap:2.2rem;padding:6rem 5vw 3rem;
  visibility:hidden;clip-path:inset(0 0 100% 0);
  transition:clip-path .5s var(--ease-out),visibility 0s linear .5s}
html.nav-open .sheet{visibility:visible;clip-path:inset(0);transition-delay:0s}
html.nav-open{overflow:hidden}
.sheet__nav{display:grid;gap:.4rem}
.sheet__nav a{font-family:var(--display);font-size:clamp(2.2rem,9vw,3.2rem);line-height:1.15;padding-block:.35rem;color:var(--ink);
  opacity:0;transform:translateY(16px);transition:opacity .4s var(--ease-out),transform .5s var(--ease-out)}
html.nav-open .sheet__nav a{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 45ms + 140ms)}
.sheet__meta .lang{display:none}
.sheet__nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
.sheet__meta a{display:inline-flex;align-items:center;min-height:44px}
.sheet__meta{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;color:var(--ink-soft);font-size:.95rem}
@media(min-width:440px){.wordmark__sub{white-space:nowrap}}
@media(max-width:400px){        /* 320px phones: the logo, language chip and burger must fit one row in Arabic too */
  .masthead__in{gap:.6rem}
  .masthead__end{gap:.3rem}
  .lang{padding-inline:.8em}
  .wordmark{gap:.55rem}
  .wordmark__sub{letter-spacing:.18em}
}
@media(max-width:900px){
  .nav{display:none}
  .burger{display:block}
  .masthead__in{min-height:68px}
}
@media(min-width:901px){.sheet{display:none}}

/* ---------- 8. Hero ------------------------------------------------------ */
.hero{padding-block:clamp(4.5rem,14vh,10rem) clamp(4rem,10vh,7rem);text-align:center;position:relative;overflow:clip}
.hero h1{margin-inline:auto;max-width:14ch;text-wrap:balance}
.hero .standfirst{margin:2rem auto 0;max-width:42ch}
.hero__meta{margin-top:clamp(2.2rem,5vh,3.5rem);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.9rem 1.6rem}
.hero__meta span{font-weight:500;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.hero__meta i{font-style:normal;color:var(--rule-strong)}
.hero__cta{margin-top:clamp(2.2rem,5vh,3rem);display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* "Madinah now" — local time and computed sunset, no third party */
.now{display:inline-flex;align-items:center;gap:.7rem;min-height:36px;padding:.35rem 1rem;border:1px solid var(--rule-strong);border-radius:999px;
  font-size:.8125rem;color:var(--ink-soft);margin-bottom:2rem}
.now__dot{width:7px;height:7px;border-radius:50%;background:var(--teal)}
html.motion-ready[data-motion="on"] .now__dot{animation:pulse 2.4s var(--ease-in-out) infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.8)}}
.now b{font-weight:500;color:var(--ink)}
.band-ink .now{border-color:var(--rule-on-ink);color:var(--soft-on-ink)}
.band-ink .now b{color:var(--paper-on-ink)}

/* split headline: word masks (word-level only, so Arabic never loses its joins) */
.wd{display:inline-block;white-space:pre}
html.motion-pre[data-motion="on"] [data-split]:not(.is-split){opacity:0;animation:rv-failsafe .01s 3s forwards}
html.motion-ready [data-split] .wd{overflow:hidden;vertical-align:top;padding-block:.14em;margin-block:-.14em}
html.motion-ready [data-split] .wd > span{display:inline-block;transform:translateY(112%);
  transition:transform .9s var(--ease-out);transition-delay:calc(var(--w,0) * 55ms)}
html.motion-ready [data-split].is-in .wd > span{transform:none}

/* ---------- 9. Reveals (hidden only after the script is ready) ----------- */
html.motion-pre[data-motion="on"] .rv{opacity:0;transform:translateY(18px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);transition-delay:calc(var(--d,0) * 90ms);
  animation:rv-failsafe .01s 3s forwards}
html.motion-pre[data-motion="on"] .rv.is-in{opacity:1;transform:none;animation:none}
@keyframes rv-failsafe{to{opacity:1;transform:none}}

/* ---------- 10. Figures & plates ---------------------------------------- */
figure{margin:0}
.plate{overflow:hidden;background:var(--paper-deep);position:relative}
.plate img,.plate video{width:100%;height:100%;object-fit:cover}
.plate--wide{aspect-ratio:16/7}
.plate--book{aspect-ratio:3/2}
.plate--tall{aspect-ratio:4/5}
.plate--portrait{aspect-ratio:820/1229;max-width:420px;background:#FBF6EE}
figcaption{margin-top:1rem;font-size:.95rem;color:var(--ink-soft);max-width:60ch}
figcaption b{display:block;font-weight:500;font-size:.85rem;letter-spacing:.02em;color:var(--ink-soft);margin-bottom:.35rem}

/* ---------- 11. The façade (home) ---------------------------------------- */
.facade{position:relative;--n:103}
.facade__runway{position:relative}
.facade__stage{position:relative;padding-block:clamp(5rem,12vh,9rem);overflow:hidden}
.facade__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.facade__title{max-width:14ch}
.facade__beats{margin-top:2rem;display:grid;gap:1.5rem;max-width:44ch}
.facade__beats li{padding-inline-start:1.2rem;border-inline-start:1px solid var(--rule-on-ink)}
.facade__beats h3{font-size:1.15rem;margin-bottom:.35rem;color:var(--paper-on-ink)}
.facade__beats p{font-size:1rem;color:var(--soft-on-ink)}
.facade__tally{margin-top:2.2rem;display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap}
.facade__n{font-family:var(--display);font-size:clamp(3rem,7vw,5.5rem);line-height:1;color:var(--paper-on-ink);font-variant-numeric:proportional-nums lining-nums;direction:ltr;unicode-bidi:isolate}
.facade__of{font-size:.8rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--faint-on-ink)}
.facade__cta{margin-top:2rem}
.facade__building{position:relative;padding:clamp(.8rem,2vw,1.4rem);border:1px solid var(--rule-on-ink);border-radius:2px;
  background:radial-gradient(120% 90% at 50% 100%,rgba(243,200,119,calc(var(--n) / 103 * .13)),transparent 70%),#181818}
.facade__building::before{content:"";position:absolute;inset-inline:-1px;top:-14px;height:14px;border:1px solid var(--rule-on-ink);border-bottom:0;background:#181818;
  clip-path:polygon(0 100%,4% 0,96% 0,100% 100%)}
.windows{--cols:13;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:clamp(4px,.8vw,9px);direction:ltr}
.w{
  --lit:clamp(0,calc(var(--n) - var(--k,0)),1);
  aspect-ratio:3/4;border-radius:2px 2px 1px 1px;
  background:color-mix(in srgb,var(--glow) calc(var(--lit) * var(--v,1) * 100%),var(--unlit));
}
.w--yours::before{content:"";position:absolute;inset:-8px}
.w--yours:active::after{opacity:.9}
.w--yours{--lit:0;position:relative;display:block;background:var(--unlit);outline:1px solid rgba(243,200,119,.75);outline-offset:1px}
.w--yours::after{content:"";position:absolute;inset:0;background:var(--glow);opacity:0;transition:opacity var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.w--yours:hover::after{opacity:.9}}
.w--yours:focus-visible::after{opacity:.9}
html.motion-ready[data-motion="on"] .w--yours{animation:yours 2.8s var(--ease-in-out) infinite}
@keyframes yours{50%{outline-color:rgba(243,200,119,.2)}}
@media(max-width:900px){.facade__grid{grid-template-columns:1fr}.windows{--cols:8}.facade__building{max-width:460px;margin-inline:auto;width:100%}}

/* pinned: a tall runway, a sticky stage, copy that changes with progress */
html.pin-on .facade__runway{height:360svh}
html.pin-on .facade__stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding-block:5.5rem 2rem}
html.pin-on .facade__grid{width:var(--page);margin-inline:auto}
html.pin-on .facade__beats{position:relative;display:block;min-height:9.5rem}
html.pin-on .facade__beats li{position:absolute;inset:0;opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .45s var(--ease-out),transform .55s var(--ease-out)}
html.pin-on .facade__beats li.is-active{opacity:1;transform:none;pointer-events:auto}

/* ---------- 12. Scroll-lit statement ------------------------------------ */
.words{font-family:var(--display);font-size:clamp(1.9rem,4.4vw,3.8rem);line-height:1.18;letter-spacing:-.018em;
  max-width:23ch;margin-inline:auto;text-align:center;color:var(--ink)}
html.motion-ready[data-motion="on"] .words[data-words-ready] .wd{opacity:.16;transition:opacity .3s var(--ease-out)}
html.motion-ready[data-motion="on"] .words[data-words-ready] .wd.is-lit{opacity:1}

/* ---------- 13. Discipline explorer + guest journey --------------------- */
.explorer{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,5rem);margin-top:clamp(2.5rem,6vh,4rem);align-items:start}
.explorer__tabs{display:grid;border-top:1px solid var(--rule)}
html:not(.js) .explorer__tabs{display:none}
.tab{display:grid;grid-template-columns:3rem 1fr;align-items:baseline;gap:.5rem;padding:1.15rem .2rem;border-bottom:1px solid var(--rule);
  font-family:var(--display);font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.2;color:var(--ink-faint);
  transition:color var(--t-ui) var(--ease-out),opacity var(--t-ui) var(--ease-out)}
.tab > span:last-child{transition:transform var(--t-ui) var(--ease-out)}
.tab .no{font-family:var(--text);font-weight:500;font-size:.75rem;letter-spacing:.14em;color:var(--ink-faint)}
.tab[aria-selected="true"]{color:var(--ink);box-shadow:inset 3px 0 0 var(--teal)}
.tab[aria-selected="true"] > span:last-child{transform:translateX(.7rem)}
html[dir="rtl"] .tab[aria-selected="true"] > span:last-child{transform:translateX(-.7rem)}
html[dir="rtl"] .tab[aria-selected="true"]{box-shadow:inset -3px 0 0 var(--teal)}
@media (hover:hover) and (pointer:fine){.tab:hover{color:var(--ink)}}
.explorer[data-stop] .tab:not(.is-related){opacity:.38}
.explorer__panels{position:relative}
.dpanel{background:var(--paper-white);border:1px solid var(--rule);padding:clamp(1.6rem,3.2vw,2.8rem)}
.dpanel::before{content:"";display:block;width:34px;height:3px;background:var(--teal);margin-bottom:1.5rem}
.dpanel + .dpanel{margin-top:1.5rem}
.dpanel{scroll-margin:5.5rem 0 6rem}
html.js .dpanel[hidden]{display:none}
html.js .dpanel{animation:none}
.dpanel.is-entering{animation:panel-in .28s var(--ease-out)}
@keyframes panel-in{from{opacity:0;transform:translateY(8px)}}
.dpanel h3{margin-bottom:1rem}
.dpanel .chips{margin-top:1.6rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{padding:.4rem .9rem;border:1px solid var(--rule-strong);border-radius:999px;font-size:.85rem;color:var(--ink-soft);line-height:1.4}
.dpanel__stops{margin-top:1.6rem;font-size:.8125rem;color:var(--ink-faint)}

.journey{margin-top:clamp(2.5rem,6vh,4rem);display:grid;grid-template-columns:repeat(5,1fr);position:relative;counter-reset:stop}
.journey::before{content:"";position:absolute;top:10px;inset-inline:10%;height:1px;background:var(--rule-strong)}
.journey li{display:block}
.stop{position:relative;display:grid;justify-items:center;gap:.8rem;text-align:center;padding:0 .2rem .4rem;min-height:44px;width:100%;align-content:start}
.stop__dot{width:21px;height:21px;border-radius:50%;background:var(--paper);border:1px solid var(--rule-strong);display:grid;place-items:center;
  transition:background-color var(--t-ui) var(--ease-out),border-color var(--t-ui) var(--ease-out),transform var(--t-press) var(--ease-out)}
.stop__dot::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal);transform:scale(0);transition:transform .28s var(--ease-out)}
.stop__label{font-size:.8125rem;line-height:1.3;color:var(--ink-faint);font-weight:500;transition:color var(--t-ui)}
.stop.is-on .stop__dot{border-color:var(--teal)}
.stop.is-on .stop__dot::after{transform:scale(1)}
.stop.is-on .stop__label{color:var(--ink)}
button.stop:active .stop__dot{transform:scale(.92)}
button.stop[aria-pressed="true"] .stop__dot{background:var(--teal-deep);border-color:var(--teal-deep)}
button.stop[aria-pressed="true"] .stop__dot::after{background:var(--paper);transform:scale(1)}
@media (hover:hover) and (pointer:fine){button.stop:hover .stop__label{color:var(--ink)}}
.journey__hint{margin-top:1rem;text-align:center;font-size:.85rem;color:var(--ink-faint);max-width:none}
@media(max-width:820px){.explorer{grid-template-columns:1fr}.tab{grid-template-columns:2.4rem 1fr}.stop__label{font-size:.75rem}}

#disciplines h2{max-width:20ch}

/* ---------- 14. Work cards (home) --------------------------------------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3.2vw,3rem)}
@media(max-width:860px){.trio{grid-template-columns:1fr;max-width:34rem;margin-inline:auto}}
.card{display:flex;flex-direction:column}
.card .plate img{transition:transform 1.1s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.card:hover .plate img{transform:scale(1.045)}}
.card h3{margin:1.4rem 0 .8rem}
.card p{font-size:.98rem;color:var(--ink-soft)}
.card__go{margin-top:auto;padding-top:1.1rem;display:inline-block;font-weight:500;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}

/* ---------- 15. Client rail --------------------------------------------- */
.rail{overflow:hidden;display:grid;gap:clamp(1.6rem,3vw,2.4rem);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.rail__row{display:flex;width:max-content;gap:clamp(2.4rem,5vw,4.5rem);align-items:center;animation:rail 70s linear infinite}
.rail__row--b{animation-direction:reverse;animation-duration:85s}
html[dir="rtl"] .rail__row{animation-direction:reverse}
html[dir="rtl"] .rail__row--b{animation-direction:normal}
.rail__clone{display:contents}
.rail__row img{height:clamp(34px,4.6vw,52px);width:auto;max-width:170px;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1);opacity:.78;
  transition:opacity .35s var(--ease-out),filter .35s var(--ease-out)}
.rail__row img[data-pale]{filter:grayscale(1) contrast(1.5) brightness(.92);opacity:.85}
@media (hover:hover) and (pointer:fine){
  .rail:hover .rail__row{animation-play-state:paused}
  .rail__row img:hover{opacity:1;filter:grayscale(0)}
}
.rail:focus-within .rail__row{animation-play-state:paused}
@keyframes rail{to{transform:translateX(-50%)}}
html[dir="rtl"] .rail__row{animation-name:rail-rtl}
@keyframes rail-rtl{to{transform:translateX(50%)}}
/* motion off, or a viewer who cannot use a moving strip: a still, wrapped wall */
html[data-motion="off"] .rail,html:not(.js) .rail{mask-image:none;-webkit-mask-image:none}
html[data-motion="off"] .rail__row,html:not(.js) .rail__row{animation:none;width:var(--page);margin-inline:auto;flex-wrap:wrap;justify-content:center;row-gap:1.8rem}
html[data-motion="off"] .rail__row [aria-hidden="true"],html:not(.js) .rail__row [aria-hidden="true"],
html[data-motion="off"] .rail__row--b,html:not(.js) .rail__row--b{display:none}
@media (prefers-reduced-motion:reduce){html:not([data-motion="on"]) .rail__row{animation:none}}

/* ---------- 16. Stats ---------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule-on-ink)}
.stat{padding:clamp(1.6rem,3vw,2.6rem) clamp(.5rem,1.5vw,1.5rem);border-inline-end:1px solid var(--rule-on-ink)}
.stat:last-child{border-inline-end:0}
.stat:first-child{padding-inline-start:0}
.stat__n{font-family:var(--display);font-size:clamp(3rem,7vw,6rem);line-height:1;color:var(--paper-on-ink);font-variant-numeric:proportional-nums lining-nums;direction:ltr;unicode-bidi:isolate;display:block;text-align:start}
.stat__l{display:block;margin-top:.9rem;font-size:.78rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--faint-on-ink)}
@media(max-width:700px){.stats{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-inline-end:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--rule-on-ink)}}

/* ---------- 17. Closing call + contact lines ---------------------------- */
.mega{display:block;font-family:var(--display);font-size:clamp(2.2rem,5.6vw,4.8rem);line-height:1.06;letter-spacing:-.025em;color:var(--ink);
  max-width:20ch;text-wrap:balance;position:relative;min-block-size:44px}
.mega span{background:linear-gradient(currentColor,currentColor) left bottom/0 2px no-repeat;transition:background-size .6s var(--ease-out);padding-bottom:.06em}
html[dir="rtl"] .mega span{background-position:right bottom}
@media (hover:hover) and (pointer:fine){.mega:hover span{background-size:100% 2px}}
.mega svg{display:inline-block;width:.6em;height:.6em;vertical-align:baseline;margin-inline-start:.2em;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease-out)}
html[dir="rtl"] .mega svg{transform:scaleX(-1)}
@media (hover:hover) and (pointer:fine){.mega:hover svg{transform:translate(.06em,-.04em)}html[dir="rtl"] .mega:hover svg{transform:scaleX(-1) translate(.06em,-.04em)}}
.contact-lines{display:grid;gap:1.4rem}
.contact-lines a,.contact-lines p{font-family:var(--display);font-size:clamp(1.15rem,1.9vw,1.5rem);line-height:1.35;letter-spacing:-.01em;color:var(--ink);max-width:none}
.contact-lines a{position:relative;display:inline-block;padding-block:.4em}
.contact-lines a::after{content:"";position:absolute;inset-inline:0;bottom:.28em;height:1px;background:var(--rule-strong);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.contact-lines a:hover::after{transform:scaleX(1)}}
.contact-lines .label{display:block;margin-bottom:.4rem}

/* ---------- 18. Footer --------------------------------------------------- */
.foot{background:var(--ink-band);color:var(--paper-on-ink);padding-block:clamp(3.5rem,8vh,5.5rem) 2rem;border-top:2px solid var(--teal)}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(2rem,5vw,4rem)}
@media(max-width:820px){.foot__grid{grid-template-columns:1fr 1fr}.foot__brand{grid-column:1/-1}}
@media(max-width:520px){.foot__grid{grid-template-columns:1fr}}
.foot h2{font-family:var(--text);font-weight:500;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem}
.foot li{margin-bottom:.1rem}
.foot a,.foot p{color:var(--soft-on-ink);font-size:.97rem}
.foot li a{display:inline-block;padding:.62rem .6rem;margin-inline:-.6rem}
.foot__legal a{margin-inline:-.6rem;padding-inline:.6rem}
.foot a{transition:color var(--t-ui)}
@media (hover:hover) and (pointer:fine){.foot a:hover{color:var(--paper-on-ink)}}
.foot__mark{width:42px;height:auto;margin-bottom:1.4rem;opacity:.92}
.foot__now{margin-top:1.6rem}
.foot__legal{margin-top:clamp(2.5rem,6vh,4rem);padding-top:1.4rem;border-top:1px solid var(--rule-on-ink);
  display:flex;flex-wrap:wrap;gap:.4rem 2rem;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--faint-on-ink)}
.foot__legal a,.foot__legal button{display:inline-flex;align-items:center;min-height:44px;color:var(--soft-on-ink);font-size:.85rem}
.motion-toggle{gap:.6rem}
.motion-toggle__sw{width:30px;height:16px;border-radius:99px;border:1px solid var(--faint-on-ink);position:relative;flex:none}
.motion-toggle__sw::after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:10px;height:10px;border-radius:50%;background:var(--paper-on-ink);transition:transform .25s var(--ease-out)}
.motion-toggle[aria-pressed="true"] .motion-toggle__sw::after{transform:translateX(14px)}
html[dir="rtl"] .motion-toggle[aria-pressed="true"] .motion-toggle__sw::after{transform:translateX(-14px)}

/* ---------- 19. Floating call, cursor label, toast ---------------------- */
.fab{position:fixed;z-index:var(--z-fab);inset-inline:0;bottom:clamp(14px,3vh,28px);margin-inline:auto;width:max-content;max-width:calc(100vw - 32px);
  opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s var(--ease-out),transform .4s var(--ease-out)}
.fab.is-shown{opacity:1;transform:none;pointer-events:auto}
html:not(.js) .fab{display:none}
.fab .btn{min-height:50px;box-shadow:0 8px 28px rgba(20,20,20,.22)}
.fab .btn__ic{width:36px;height:36px}
.cursor{position:fixed;top:0;left:0;z-index:var(--z-cursor);pointer-events:none;padding:.5rem 1rem;border-radius:999px;background:var(--ink);color:var(--paper);
  font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;opacity:0;
  translate:-50% -140%;transition:opacity .18s var(--ease-out);will-change:transform}
.cursor.is-on{opacity:1}
.toast{position:fixed;inset-inline:0;bottom:24px;margin-inline:auto;width:max-content;max-width:calc(100vw - 32px);z-index:var(--z-cursor);
  padding:.75rem 1.2rem;background:var(--ink);color:var(--paper);border-radius:999px;font-size:.9rem;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .25s var(--ease-out),transform .3s var(--ease-out)}
.toast.is-on{opacity:1;transform:none}

/* ---------- 20. Page transitions (cross-document, progressive) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .masthead{view-transition-name:masthead}
  ::view-transition-old(root){animation:vt-out .18s var(--ease-out) both}
  ::view-transition-new(root){animation:vt-in .32s var(--ease-out) both}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0}}
}
html[data-motion="off"] ::view-transition-group(*),html[data-motion="off"] ::view-transition-old(*),html[data-motion="off"] ::view-transition-new(*){animation:none!important}

/* ---------- 21. Work page: filters, gallery, lightbox -------------------- */
.filters{display:flex;flex-wrap:wrap;gap:.6rem}
html:not(.js) .filters{display:none}
.fchip{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:.5rem 1.15rem;border:1px solid var(--rule-strong);border-radius:999px;
  font-weight:500;font-size:.92rem;letter-spacing:.02em;color:var(--ink-soft);
  transition:background-color var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out),border-color var(--t-ui),transform var(--t-press) var(--ease-out)}
.fchip sup{font-size:.75rem;color:var(--ink-faint);vertical-align:baseline;direction:ltr}
.fchip:active{transform:scale(.97)}
.fchip[aria-pressed="true"]{background:var(--teal-deep);color:#fff;border-color:var(--teal-deep)}
.fchip[aria-pressed="true"] sup{color:#fff}
@media (hover:hover) and (pointer:fine){.fchip:not([aria-pressed="true"]):hover{border-color:var(--ink);color:var(--ink)}}
html:not(.js) .filters__count{display:none}
.filters__count{margin-top:1rem;font-size:.9rem;color:var(--ink-faint);max-width:none}
.gallery{columns:330px;column-gap:clamp(1rem,2.4vw,2rem);margin-top:clamp(1.8rem,4vh,3rem)}
.shot{break-inside:avoid;margin-bottom:clamp(1.4rem,3vw,2.4rem);transition:opacity .26s var(--ease-out),transform .3s var(--ease-out)}
.shot.is-out{opacity:0;transform:scale(.97)}
.shot[hidden]{display:none}
.shot__open{display:block;position:relative;overflow:hidden;background:var(--paper-deep);cursor:zoom-in}
html:not(.js) .shot__open{cursor:default}
.shot__open img{width:100%;height:auto;transition:transform 1.1s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.shot__open:hover img{transform:scale(1.04)}}
.shot__open:active img{transform:scale(1.02);transition-duration:.2s}
.shot figcaption{margin-top:.9rem}


.lb{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100%;height:100%;background:transparent;color:var(--paper-on-ink)}
.lb::backdrop{background:rgba(12,12,12,.94)}
.lb[open]{display:grid;grid-template-rows:auto 1fr auto;animation:lb-in .22s var(--ease-out)}
@keyframes lb-in{from{opacity:0}}
.lb__bar{display:flex;justify-content:space-between;align-items:center;padding:1rem clamp(1rem,3vw,2rem);font-size:.85rem;letter-spacing:.14em;color:var(--faint-on-ink)}
.lb__count{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.lb__stage{position:relative;display:grid;place-items:center;padding:0 clamp(3.5rem,8vw,6rem);min-height:0;touch-action:pan-y}
.lb__stage img{max-width:100%;max-height:calc(100svh - 12rem);width:auto;height:auto;object-fit:contain;transition:opacity .18s var(--ease-out)}
.lb__stage img.is-swap{opacity:0}
.lb__cap{padding:1rem clamp(1rem,3vw,2rem) 1.6rem;text-align:center;font-size:.98rem;color:var(--soft-on-ink);max-width:70ch;margin-inline:auto}
.lb__cap b{display:block;font-weight:500;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint-on-ink);margin-bottom:.3rem}
.lb__btn{position:absolute;top:50%;translate:0 -50%;width:48px;height:48px;border-radius:50%;border:1px solid var(--rule-on-ink);display:grid;place-items:center;color:var(--paper-on-ink);
  transition:background-color var(--t-ui),transform var(--t-press) var(--ease-out)}
.lb__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.lb__btn:active{transform:scale(.94)}
.lb__btn--prev{inset-inline-start:clamp(.4rem,2vw,1.4rem)}
.lb__btn--next{inset-inline-end:clamp(.4rem,2vw,1.4rem)}
html[dir="rtl"] .lb__btn svg{transform:scaleX(-1)}
@media (hover:hover) and (pointer:fine){.lb__btn:hover,.lb__x:hover{background:rgba(245,243,238,.12)}}
.lb__x{width:44px;height:44px;border-radius:50%;border:1px solid var(--rule-on-ink);display:grid;place-items:center;color:var(--paper-on-ink);transition:background-color var(--t-ui)}
.lb__x svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.4;fill:none;stroke-linecap:round}
body.lb-open{overflow:hidden}
@media(max-width:600px){
  .lb__stage{padding-inline:.4rem}
  .lb__btn{background:rgba(12,12,12,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .lb__btn--prev{inset-inline-start:.9rem}.lb__btn--next{inset-inline-end:.9rem}
}

/* ---------- 22. Services page: chapter index + process line ------------- */
.chapters{display:grid;grid-template-columns:minmax(0,.28fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.chapters__index{position:sticky;top:6.5rem;display:grid;gap:.2rem}
.chapters__index a{display:grid;grid-template-columns:2.4rem 1fr;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--rule);color:var(--ink-faint);font-size:.95rem;
  transition:color var(--t-ui) var(--ease-out)}
.chapters__index a .no{font-size:.72rem;font-weight:500;letter-spacing:.14em;justify-self:start}
.chapters__index a[aria-current="true"]{color:var(--ink);box-shadow:inset 3px 0 0 var(--teal);padding-inline-start:.7rem}
html[dir="rtl"] .chapters__index a[aria-current="true"]{box-shadow:inset -3px 0 0 var(--teal)}
@media (hover:hover) and (pointer:fine){.chapters__index a:hover{color:var(--ink)}}
.chapter{padding-block:clamp(2.5rem,6vh,4.5rem);border-top:1px solid var(--rule);transition:opacity .3s var(--ease-out)}
.chapter:first-child{border-top:0;padding-top:0}
.chapters[data-stop] .chapter:not(.is-related){opacity:.32}
@media(max-width:900px){.chapters[data-stop] .chapter:not(.is-related){display:none}}
.chapter__no{display:block;font-weight:500;font-size:.75rem;letter-spacing:.2em;color:var(--ink-faint);margin-bottom:1rem}
.chapter h2{margin-bottom:1.6rem;font-size:clamp(1.9rem,3.6vw,3rem)}
.chapter .chips{margin-top:1.6rem}
.chapter__label{display:block;margin-top:1.8rem}
@media(max-width:900px){.chapters{grid-template-columns:1fr}.chapters__index{display:none}}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,3vw,2.5rem);position:relative;padding-top:2.4rem}
.steps::before{content:"";position:absolute;top:.5rem;inset-inline:0;height:1px;background:var(--rule-on-ink)}
.steps::after{content:"";position:absolute;top:.5rem;inset-inline:0;height:1px;background:var(--paper-on-ink);transform:scaleX(var(--sp,1));transform-origin:left}
html[dir="rtl"] .steps::after{transform-origin:right}
.step{position:relative}
.step::before{content:"";position:absolute;top:-2.1rem;inset-inline-start:0;width:9px;height:9px;border-radius:50%;background:var(--ink-band);border:1px solid var(--faint-on-ink);transition:background-color .3s var(--ease-out)}
.step.is-on::before{background:var(--paper-on-ink)}
.step__no{display:block;font-weight:500;font-size:.75rem;letter-spacing:.18em;color:var(--faint-on-ink);margin-bottom:.6rem}
.step h3{margin-bottom:.6rem;color:var(--paper-on-ink)}
.step p{font-size:.97rem}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr;row-gap:2.6rem}.steps::before,.steps::after{display:none}.step::before{display:none}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- 23. About: rules --------------------------------------------- */
.rules{border-top:1px solid var(--rule)}
.rule-row{display:grid;grid-template-columns:4rem minmax(0,1fr) minmax(0,1.3fr);gap:clamp(1rem,3vw,2.5rem);align-items:baseline;padding-block:clamp(1.6rem,3.4vh,2.6rem);border-bottom:1px solid var(--rule)}
.rule-row > *{transition:transform .3s var(--ease-out)}
.rule-row__no{font-weight:500;font-size:.75rem;letter-spacing:.16em;color:var(--ink-faint)}
.rule-row h3{margin:0}
.rule-row p{color:var(--ink-soft)}
@media (hover:hover) and (pointer:fine){.rule-row:hover > *{transform:translateX(.6rem)}html[dir="rtl"] .rule-row:hover > *{transform:translateX(-.6rem)}}
@media(max-width:820px){.rule-row{grid-template-columns:2.6rem 1fr;row-gap:.6rem}.rule-row p{grid-column:2}}

/* ---------- 24. Contact: the brief builder ------------------------------ */
.brief{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr);gap:clamp(2rem,5vw,5rem);align-items:start}
@media(max-width:900px){.brief{grid-template-columns:1fr}}
.brief__progress{display:none;margin-bottom:2rem}
html.js .brief__progress{display:block}
.brief__bar{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:.8rem}
.brief__bar i{height:2px;background:var(--rule-strong);transition:background-color .3s var(--ease-out)}
.brief__bar i.is-done{background:var(--teal)}
.step-set{border:0;min-inline-size:0}
.step-set + .step-set{margin-top:clamp(2.2rem,5vh,3.2rem)}
.step-set legend{font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.15;margin-bottom:.5rem;padding:0;color:var(--ink)}
.step-set legend:focus{outline:none}
.step-set legend,.chipgrid{scroll-margin-top:6.5rem}
.step-set .hint{font-size:.95rem;color:var(--ink-soft);margin-bottom:1.4rem;max-width:52ch}
html.js .brief.is-stepped .step-set{display:none}
html.js .brief.is-stepped .step-set.is-current{display:block;animation:panel-in .26s var(--ease-out)}
html.js .brief.is-stepped.is-keyed .step-set.is-current{animation:none}
.chipgrid{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;margin:0}
.chip span{display:inline-flex;align-items:center;min-height:46px;padding:.55rem 1.1rem;border:1px solid var(--rule-strong);border-radius:999px;font-size:.95rem;line-height:1.2;color:var(--ink);
  background:var(--paper-white);transition:background-color var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out),border-color var(--t-ui),transform var(--t-press) var(--ease-out)}
.chip input:checked + span{background:var(--teal-deep);color:#fff;border-color:var(--teal-deep)}
.chip input:focus-visible + span{outline:2px solid var(--ink);outline-offset:3px}
.chip:active span{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.chip input:not(:checked):hover + span{border-color:var(--ink)}}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
@media(max-width:620px){.fieldrow{grid-template-columns:1fr}}
.fld{display:block;margin-top:1.6rem}
.fld:first-child{margin-top:0}
.fld > .label{display:block;margin-bottom:.2rem;text-transform:none;letter-spacing:.01em;font-size:.95rem;color:var(--ink-soft)}
.field{display:block;width:100%;font:inherit;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink-faint);border-radius:0;-webkit-appearance:none;appearance:none;padding-block:.65rem;min-height:46px;
  transition:border-color var(--t-ui)}
textarea.field{resize:vertical;min-height:7.5rem;line-height:1.6}
.field:focus{outline:none;border-bottom-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.field[aria-invalid="true"]{border-bottom-color:var(--danger);box-shadow:0 1px 0 var(--danger)}
.err{display:block;margin-top:.45rem;font-size:.9rem;color:var(--danger);max-width:none}
.err[hidden]{display:none}
html[dir="rtl"] input[type="email"],html[dir="rtl"] input[type="tel"]{direction:ltr;text-align:right}
.brief__back{justify-content:center;padding-inline:1.5rem}
.brief__nav{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2.4rem;align-items:center}
.brief__send{display:none}
html:not(.js) .brief__send,html.js .brief:not(.is-stepped) .brief__send{display:inline-flex}
html.js .brief.is-stepped .brief__send{display:none}
html.js .brief.is-stepped.is-last .brief__send{display:inline-flex}
html.js .brief.is-stepped.is-last .brief__next{display:none}
html:not(.js) .brief__next,html:not(.js) .brief__back{display:none}
html.js .brief.is-stepped.is-first .brief__back{display:none}
.summary{background:var(--paper-white);border:1px solid var(--rule);padding:clamp(1.4rem,2.6vw,2.2rem);position:sticky;top:6.5rem}
.summary::before{content:"";display:block;width:34px;height:3px;background:var(--gold);margin-bottom:1.3rem}
.summary h2{font-size:clamp(1.4rem,2vw,1.8rem);margin-bottom:1.2rem}
.summary dl{display:grid;gap:1rem}
.summary dt{font-size:.72rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.summary dd{margin-top:.25rem;font-size:1rem;color:var(--ink);overflow-wrap:anywhere}
.summary dd.is-empty{color:var(--ink-faint)}
.summary__alt{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--rule);display:grid;gap:.4rem}
.summary__alt a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--rule-strong);align-self:start}
.summary__alt button{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--rule-strong);align-self:start;color:var(--ink)}
html[lang="ar"] .summary__alt a,html[lang="ar"] .summary__alt button{letter-spacing:0;text-transform:none;font-size:1.05rem;font-weight:700}
@media(max-width:900px){.summary{position:static}}
.formnote{font-size:.9rem;color:var(--ink-faint);margin-top:1.2rem;max-width:52ch}

/* ---------- 25. Arabic / RTL --------------------------------------------- */
/* Arabic has no italics, no capitals and no tracking (tracking breaks the joined
   script). Reading text is Amiri; Almadinah sets headlines only, at sizes where
   its small em still reads. */
html[lang="ar"]{
  --display:'Almadinah','MadinahEng','Amiri',Georgia,serif;
  --text:'Amiri','Jost',Georgia,serif;
  --measure:58ch;
}
html[lang="ar"] body{font-size:clamp(1.2rem,.5vw + 1.1rem,1.4rem);line-height:1.95}
html[lang="ar"] h1{font-size:clamp(3.8rem,9.2vw,7.6rem);line-height:1.02;letter-spacing:0}
html[lang="ar"] .hero h1{max-width:12ch}
html[lang="ar"] .hero h1.h1--long,html[lang="ar"] .h1--long{font-size:clamp(3.2rem,6.4vw,5.4rem);line-height:1.05;max-width:14ch}
html[lang="ar"] h2{font-size:clamp(2.6rem,5.6vw,4.8rem);line-height:1;letter-spacing:0}
html[lang="ar"] h3,html[lang="ar"] .tab,html[lang="ar"] .summary h2,html[lang="ar"] .facade__beats h3,html[lang="ar"] .dpanel h3,html[lang="ar"] .card h3{font-family:'Amiri','Jost',serif;font-weight:700;font-size:clamp(1.5rem,2.1vw,1.9rem);line-height:1.4;letter-spacing:0}
html[lang="ar"] .chapter h2{font-size:clamp(2.2rem,4.4vw,3.5rem)}
html[lang="ar"] .words{font-size:clamp(2.7rem,6.2vw,5.2rem);line-height:1.12;letter-spacing:0;max-width:20ch}
html[lang="ar"] .mega{font-size:clamp(3rem,7.6vw,6.2rem);line-height:1.08;letter-spacing:0}
html[lang="ar"] .step-set legend{font-size:clamp(2.1rem,3.4vw,2.8rem);line-height:1.15}
html[lang="ar"] .tab{font-size:clamp(1.4rem,2vw,1.75rem);line-height:1.35}
html[lang="ar"] .now{font-size:1rem}
/* Amiri reads smaller than Jost at the same rem: every fixed-size line of running text gets its own Arabic size */
html[lang="ar"] .facade__beats p,html[lang="ar"] .card p,html[lang="ar"] .step p,html[lang="ar"] .step-set .hint,html[lang="ar"] .lb__cap{font-size:1.18rem;line-height:1.85}
html[lang="ar"] .chapters__index a{font-size:1.12rem}
html[lang="ar"] .foot li a:not([href^="mailto"]):not([href^="tel"]),html[lang="ar"] .foot p{font-size:1.15rem}
html[lang="ar"] .contact-lines p{text-wrap:balance}
html[lang="ar"] .dpanel__stops,html[lang="ar"] .journey__hint,html[lang="ar"] .formnote,html[lang="ar"] .err,html[lang="ar"] .filters__count,html[lang="ar"] .summary dd{font-size:1.05rem;line-height:1.7}
html[lang="ar"] .summary h2{font-size:clamp(1.7rem,2.4vw,2.1rem)}
html[lang="ar"] .contact-lines p{font-family:var(--text);font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.7}
html[lang="ar"] .facade__title{max-width:12ch}
html[lang="ar"] .stat__n,html[lang="ar"] .facade__n{font-family:'MadinahEng','Jost',serif}
html[lang="ar"] .sheet__nav a{font-size:clamp(2.6rem,10vw,3.8rem);line-height:1.4}
/* kill every Latin-only device */
html[lang="ar"] .label,html[lang="ar"] .eyebrow,html[lang="ar"] .link,html[lang="ar"] .btn,html[lang="ar"] .nav a,html[lang="ar"] .lang,
html[lang="ar"] .hero__meta span,html[lang="ar"] .stat__l,html[lang="ar"] .facade__of,html[lang="ar"] figcaption b,html[lang="ar"] .foot h2,
html[lang="ar"] .fchip,html[lang="ar"] .summary dt,html[lang="ar"] .card__go,html[lang="ar"] .chapter__no,html[lang="ar"] .step__no,
html[lang="ar"] .rule-row__no,html[lang="ar"] .tab .no,html[lang="ar"] .cursor,html[lang="ar"] .lb__cap b,html[lang="ar"] .wordmark__sub{
  letter-spacing:0;text-transform:none;font-style:normal}
html[lang="ar"] .label,html[lang="ar"] .eyebrow,html[lang="ar"] .hero__meta span,html[lang="ar"] .stat__l,html[lang="ar"] .facade__of,
html[lang="ar"] figcaption b,html[lang="ar"] .foot h2,html[lang="ar"] .summary dt,html[lang="ar"] .chapter__no,html[lang="ar"] .step__no,html[lang="ar"] .lb__cap b{
  font-size:1rem;font-weight:700}
html[lang="ar"] .nav a{font-size:1.08rem;font-weight:700}
html[lang="ar"] .btn,html[lang="ar"] .link,html[lang="ar"] .fchip,html[lang="ar"] .lang,html[lang="ar"] .card__go{font-size:1.02rem;font-weight:700}
html[lang="ar"] .stop__label{font-size:1rem}
html[lang="ar"] .chips li{font-size:1rem}
html[lang="ar"] .chip span{font-size:1.08rem}
html[lang="ar"] .standfirst{font-size:clamp(1.45rem,2.2vw,1.85rem);line-height:1.8;max-width:30ch}
html[lang="ar"] figcaption{font-size:1.1rem}
html[lang="ar"] .wordmark__name{font-family:'MadinahEng','Jost',serif}
html[lang="ar"] .wordmark__sub{font-family:'Jost',sans-serif;font-size:.6875rem;letter-spacing:.28em;text-transform:uppercase;font-weight:500}
@media(max-width:400px){html[lang="ar"] .wordmark__sub{letter-spacing:.18em}}
html[lang="ar"] .lat,html[lang="ar"] .num{font-family:'Jost','Amiri',sans-serif}
html[lang="ar"] .stat__n.num,html[lang="ar"] .facade__n.num{font-family:'MadinahEng','Jost',sans-serif}
html[lang="ar"] [lang="en"]{font-family:'Jost',sans-serif;letter-spacing:0}
html[lang="ar"] .num,html[lang="ar"] .contact-lines a[href^="tel"],html[lang="ar"] .contact-lines a[href^="mailto"]{direction:ltr;unicode-bidi:isolate;display:inline-block}
html[lang="ar"] .contact-lines a[href^="mailto"],html[lang="ar"] .contact-lines a[href^="tel"]{font-family:'MadinahEng','Jost',sans-serif}
html[lang="ar"] .foot a[href^="mailto"],html[lang="ar"] .foot a[href^="tel"]{font-family:'Jost',sans-serif;direction:ltr;unicode-bidi:isolate}
html[lang="ar"] .words .wd,html[lang="ar"] h1 .wd,html[lang="ar"] h2 .wd{letter-spacing:0}
[lang="ar"]:not(html){font-family:'Amiri','Jost',serif;letter-spacing:0;text-transform:none}

/* ---------- 26. Motion off + print -------------------------------------- */
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{
  animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
html[data-motion="off"] .cursor,html[data-motion="off"] .progress{display:none}
@media print{
  .masthead,.sheet,.progress,.fab,.cursor,.edge,.facade__building{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  .section{padding-block:1.2rem}
  html.pin-on .facade__runway{height:auto}
}

/* sheet link stagger (the build keeps markup free of inline styles) */
.sheet__nav a:nth-child(1){--i:0}.sheet__nav a:nth-child(2){--i:1}.sheet__nav a:nth-child(3){--i:2}
.sheet__nav a:nth-child(4){--i:3}.sheet__nav a:nth-child(5){--i:4}

/* ---------- 27. Rail pause control ---------------------------------------- */
.rail-wrap{position:relative}
.rail__toggle{display:none;margin:1.4rem auto 0;align-items:center;gap:.6rem;min-height:44px;padding:.4rem 1rem;border-radius:999px;border:1px solid var(--rule-strong);
  font-weight:500;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);transition:border-color var(--t-ui),transform var(--t-press) var(--ease-out)}
html.js[data-motion="on"] .rail__toggle{display:flex}
.rail__toggle:active{transform:scale(.97)}
.rail__toggle i{display:inline-block;width:10px;height:12px;background:linear-gradient(90deg,currentColor 0 36%,transparent 36% 64%,currentColor 64%)}
.rail-wrap.is-paused .rail__toggle i{background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.rail-wrap.is-paused .rail__row{animation-play-state:paused}
@media (hover:hover) and (pointer:fine){.rail__toggle:hover{border-color:var(--ink);color:var(--ink)}}
html[lang="ar"] .rail__toggle{letter-spacing:0;text-transform:none;font-size:1.02rem;font-weight:700}

/* ---------- 28. Phones ------------------------------------------------------ */
@media(max-width:600px){
  :root{--section:clamp(3.5rem,9vh,5rem)}
  .hero{padding-block:3.2rem 2.4rem}
  .hero__meta{flex-direction:column;gap:.5rem}
  .hero__meta i{display:none}
  .rail__row img{height:46px;opacity:.82}
  .lb__btn{top:auto;bottom:.9rem;translate:0;background:rgba(12,12,12,.6)}
  .summary dl > div:has(dd.is-empty){display:none}
}
@media(max-width:360px){.wordmark__sub{letter-spacing:.12em}}

/* ---------- 29. Brand colour: teal band, slants, closing art ------------------ */
.band-teal{background:var(--teal-band);color:#fff;position:relative;overflow:clip}
.band-teal .eyebrow{color:#fff}
.band-teal .eyebrow::before{content:"";display:inline-block;width:30px;height:3px;background:var(--sun);margin-inline-end:.9rem;vertical-align:middle}
.band-teal .stats{border-top-color:rgba(255,255,255,.34)}
.band-teal .stat{border-inline-end-color:rgba(255,255,255,.34)}
.band-teal .stat__n{color:#fff}
.band-teal .stat__l{color:#fff}
@media(max-width:700px){.band-teal .stat:nth-child(-n+2){border-bottom-color:rgba(255,255,255,.34)}}
.band-teal :focus-visible{outline-color:#fff}
.band-teal > .page{position:relative;z-index:1}

/* the profile's slanted lines: a quiet echo in the hero and the teal band */
.slants{position:absolute;pointer-events:none;inset-block-start:0;inset-inline-end:0;width:min(44vw,620px);aspect-ratio:1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%230097B2' stroke-width='1.2'%3E%3Cpath d='M400 20 L176 20 L400 260' opacity='.55'/%3E%3Cpath d='M400 64 L232 64 L400 262' opacity='.35'/%3E%3Cpath d='M400 108 L288 108 L400 262' opacity='.2'/%3E%3C/svg%3E") no-repeat top right/contain}
html[dir="rtl"] .slants{transform:scaleX(-1)}
.slants--low{inset-block-start:auto;inset-block-end:0;inset-inline-end:auto;inset-inline-start:0;transform:scaleY(-1);background-position:top right}
html[dir="rtl"] .slants--low{transform:scale(-1,-1)}
.band-teal .slants{display:none}
.hero > .page{position:relative;z-index:1}

/* the closing call: the profile's teal and gold parallelograms around one photograph */
.close{position:relative;overflow:clip}
.close > .page{position:relative;z-index:1}
.close__art{position:absolute;inset-block-start:0;inset-inline-end:0;width:min(38%,540px);height:min(48%,340px);pointer-events:none;display:none}
.close__teal{position:absolute;inset:0;background:var(--teal);clip-path:polygon(38% 0,100% 0,100% 100%,0 100%)}
.close__gold{position:absolute;inset-block:0;inset-inline-start:0;width:46%;background:var(--gold);clip-path:polygon(70% 0,100% 0,30% 100%,0 100%)}
.close__photo{position:absolute;inset-block-start:9%;inset-inline-end:0;width:74%;height:82%;object-fit:cover;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
html[dir="rtl"] .close__art{transform:scaleX(-1)}
html[dir="rtl"] .close__photo{transform:scaleX(-1)}
@media(min-width:1100px){
  .close__art{display:block}
  .close .mega{max-width:min(20ch,58%)}
}

.rules--gold .rule-row__no{color:var(--gold-deep)}