:root{
  /* ---- TYPE SYSTEM ----------------------------------------------------
     One scale for every page. Never write a raw font-size; use a token.
     display : home hero only
     3xl     : page titles (Work, Contact, case study, article), big closers
     2xl     : statements, page subtitles, pull quotes
     xl      : list titles, section H2s inside content, step names
     lg      : lead paragraphs, deks, emphasised copy
     body    : long-form reading text
     md      : default UI text, short paragraphs, table cells
     sm      : labels, meta, captions, section heads
     xs      : pills, tags, tiny notes                                     */
  --fs-display:clamp(44px,5.6vw,80px); --lh-display:1;    --ls-display:0;
  --fs-3xl:clamp(36px,4.2vw,56px);     --lh-3xl:1.04;     --ls-3xl:0;
  --fs-2xl:clamp(26px,2.6vw,38px);     --lh-2xl:1.14;     --ls-2xl:0;
  --fs-xl:clamp(22px,1.9vw,28px);      --lh-xl:1.2;       --ls-xl:0;
  --fs-lg:clamp(19px,1.5vw,22px);      --lh-lg:1.35;      --ls-lg:0;
  --fs-body:18px;                      --lh-body:1.6;     --ls-body:0;
  --fs-md:16px;                        --lh-md:1.45;      --ls-md:0;
  --fs-sm:14px;                        --lh-sm:1.4;       --ls-sm:0;
  --fs-xs:13px;                        --lh-xs:1.3;       --ls-xs:0;
  --ink:#000;--grey:#8a8a8a;--mute:#B2B2B2;--paper:#FDFCFC;--line:rgba(0,0,0,.1);--signal:#E13325;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --pad:clamp(16px,3.4vw,48px);
  --gap:16px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--fs-md);line-height:var(--lh-md);letter-spacing:var(--ls-md);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%}
ul,ol{list-style:none}
.wrap{padding-inline:var(--pad)}
.grey{color:var(--grey)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.small{font-size:var(--fs-sm)}

/* section rhythm: a hairline + a small index label, like a document */
.sec{padding-block:clamp(96px,14vw,200px) 0}
.sec__head{border-top:1px solid var(--line);padding-top:14px;margin-bottom:clamp(40px,6vw,88px);font-size:var(--fs-sm)}
.sec__head>*:nth-child(1){grid-column:1/5}
.sec__head>*:nth-child(2){grid-column:5/9}
.sec__head>*:nth-child(3){grid-column:9/13;justify-self:end}

/* list hover: siblings step back, nothing moves */
.dim:hover>*{color:var(--mute)}
.dim>*{transition:color .35s}
.dim>*:hover{color:var(--ink)}

/* nav */
.nav{position:sticky;top:0;z-index:10;background:rgba(253,252,252,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav .wrap{height:68px;display:flex;align-items:center;justify-content:space-between}
.nav img{height:25px;width:auto}
@media (max-width:760px){.nav img{height:22px}}
.nav ul{display:flex;gap:28px;font-size:var(--fs-md)}

.linkbtn{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit;transition:color .3s}
.linkbtn:hover{color:var(--signal)}

/* menu — links stay hidden behind a two-line button.
   Desktop: they slide out in a row next to the button. Phones: full-screen list. */
.nav .wrap{gap:24px}
.nav ul{display:none}
.menu-btn{display:inline-flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:7px;width:44px;height:44px;margin-right:-8px;padding:0 8px;background:none;border:0;cursor:pointer;color:var(--ink)}
.menu-btn span{display:block;width:26px;height:1.5px;background:currentColor;transform-origin:center;transition:transform .35s var(--ease)}
.menu-btn span:nth-child(2){transform:scaleX(.62);transform-origin:right}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(4.25px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){transform:translateY(-4.25px) rotate(-45deg);transform-origin:center}

@media (min-width:761px){
  .nav ul{display:flex;margin-left:auto;pointer-events:none}
  .nav ul li{opacity:0;transform:translateX(12px);transition:opacity .3s var(--ease),transform .4s var(--ease)}
  .nav.open ul{pointer-events:auto}
  .nav.open ul li{opacity:1;transform:none}
  .nav.open ul li:nth-child(2){transition-delay:.03s}
  .nav.open ul li:nth-child(3){transition-delay:.06s}
  .nav.open ul li:nth-child(4){transition-delay:.09s}
  .nav.open ul li:nth-child(5){transition-delay:.12s}
  .nav ul [aria-current="page"]{color:var(--grey)}
  .menu{display:none!important}
}

.menu{position:fixed;inset:68px 0 0;z-index:9;background:var(--paper);display:flex;flex-direction:column;justify-content:space-between;padding-block:24px 28px;opacity:0;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .35s var(--ease)}
.menu[hidden]{display:none}
.menu.open{opacity:1;transform:none}
.menu__list li a{display:flex;align-items:baseline;gap:14px;padding:14px 0;border-top:1px solid var(--line);font-size:var(--fs-3xl);line-height:var(--lh-3xl);letter-spacing:var(--ls-3xl);transition:color .3s}
.menu__list li:last-child a{border-bottom:1px solid var(--line)}
.menu__list li a span{font-size:var(--fs-sm);letter-spacing:0;color:var(--grey);min-width:24px}
.menu__list [aria-current="page"]{color:var(--grey)}
.menu__foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:var(--fs-sm)}
.menu__foot .dim{display:flex;gap:16px}
.menu__list a:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
body.menu-lock{overflow:hidden}
body.menu-lock cal-floating-button{visibility:hidden}

/* hero */
.hero{padding-block:clamp(96px,16vh,180px) clamp(64px,10vh,120px)}
.hero h1{font-weight:400;font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display)}
.hero h1 span{display:block}
.meta{margin-top:clamp(56px,9vh,104px);border-top:1px solid var(--line);padding-top:14px;font-size:var(--fs-sm)}
.meta>*:nth-child(1){grid-column:1/5}
.meta>*:nth-child(2){grid-column:5/9}
.meta>*:nth-child(3){grid-column:9/13;justify-self:end}

/* work */
.work{row-gap:clamp(56px,8vw,112px)}
.project{grid-column:1/-1;display:block;position:relative}
.project.half{grid-column:span 6}
.project figure{overflow:hidden;border-radius:10px;background:#eeecea;aspect-ratio:16/9}
.project.half figure{aspect-ratio:5/4}
.project img{height:112%;object-fit:cover;transform:translate3d(0,var(--py,0px),0) scale(1.02);transition:transform .9s var(--ease);will-change:transform}
.project:hover img{transform:translate3d(0,var(--py,0px),0) scale(1.045)}
.cap{margin-top:14px;font-size:var(--fs-md)}
.cap h2{grid-column:1/5;font-weight:400;font-size:var(--fs-md)}
.cap p{grid-column:5/9}
.cap span{grid-column:9/13;text-align:right}
.half .cap h2{grid-column:1/7}.half .cap p{display:none}.half .cap span{grid-column:7/13}

.more{margin-top:clamp(40px,5vw,72px);display:flex;justify-content:flex-end;font-size:var(--fs-md)}
.arrow{display:inline-flex;gap:8px}
.arrow i{font-style:normal;display:inline-block;transition:transform .4s var(--ease)}
.arrow:hover i{transform:translateX(4px)}

/* practice statement */
.statement{grid-column:1/11;font-size:var(--fs-2xl);line-height:var(--lh-2xl);letter-spacing:var(--ls-2xl)}
.principles{margin-top:clamp(64px,8vw,120px)}
.principles li{border-top:1px solid var(--line);padding:18px 0 22px;align-items:baseline}
.principles li:last-child{border-bottom:1px solid var(--line)}
.principles .n{grid-column:1/2;font-size:var(--fs-sm);color:var(--grey)}
.principles h3{grid-column:2/7;font-weight:400;font-size:var(--fs-xl);letter-spacing:var(--ls-xl)}
.principles p{grid-column:8/13;font-size:var(--fs-md);color:var(--grey);transition:color .35s}
.principles li:hover p{color:var(--ink)}

/* process timeline */
.timeline{position:relative;padding-top:56px}
.timeline::before{content:"";position:absolute;left:0;right:0;top:68px;height:1px;background:var(--ink)}
.timeline::after{content:"";position:absolute;right:-1px;top:64px;width:7px;height:9px;background:var(--ink);clip-path:polygon(0 0,100% 50%,0 100%)}
.step{grid-column:span 3;position:relative;padding-right:24px}
.step .pill{display:inline-block;font-size:var(--fs-xs);border:1px solid var(--ink);border-radius:999px;padding:5px 12px 4px;background:var(--paper);position:relative;z-index:1;transition:background .35s,color .35s}
.step h3{font-weight:400;font-size:var(--fs-xl);letter-spacing:var(--ls-xl);margin:28px 0 10px}
.step p{font-size:var(--fs-md);color:var(--grey);max-width:30ch}
.step ul{margin-top:18px;font-size:var(--fs-sm)}
.step ul li::before{content:"– "}
.step:hover .pill{background:var(--ink);color:var(--paper)}
.process-note{margin-top:clamp(56px,7vw,96px);font-size:var(--fs-md)}
.process-note>*:nth-child(1){grid-column:1/5}
.process-note>*:nth-child(2){grid-column:5/13;font-size:var(--fs-lg);letter-spacing:var(--ls-lg);line-height:var(--lh-lg)}

/* loader — home only. Logo on black for a moment, then the black lifts off
   the page. Once per visit; skipped entirely under reduced motion. */
.loader{display:grid;place-items:center;position:fixed;inset:0;z-index:2147483647;background:var(--ink);transition:transform .9s cubic-bezier(.7,0,.2,1)}
.loader img{width:clamp(180px,26vw,360px);filter:invert(1);opacity:0;animation:loader-in .9s var(--ease) .1s forwards}
.loader.lift{transform:translateY(-100%)}
.loader.gone,.loader-seen .loader{display:none}
.loading cal-floating-button{visibility:hidden}
@keyframes loader-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.loader{display:none}.loading cal-floating-button{visibility:visible}}

/* process teaser: four phases on one hairline */
.phase-line{margin-top:clamp(48px,6vw,88px)}
.phase-line li{grid-column:span 3;border-top:1px solid var(--ink);padding-top:14px;font-size:var(--fs-xl);line-height:var(--lh-xl);letter-spacing:var(--ls-xl)}
.phase-line li span{display:block;font-size:var(--fs-sm);letter-spacing:0;color:var(--grey);margin-bottom:24px}
.posts .soon h3{color:var(--mute)}
.posts .soon a{cursor:default}

/* collapsible index row (Work, Articles): big label, count, +; hover peeks random images */
.ix-toggle{width:100%;background:none;border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:clamp(18px,2vw,28px) 0;font:inherit;color:var(--ink);cursor:pointer;text-align:left;align-items:center}
.ix-label{grid-column:1/7;display:grid;overflow:hidden;font-size:var(--fs-3xl);line-height:var(--lh-3xl);letter-spacing:var(--ls-3xl)}
.ix-label>span{grid-area:1/1;transition:transform .5s var(--ease),opacity .3s}
.ix-close{transform:translateY(100%);opacity:0}
.ix-toggle[aria-expanded="true"] .ix-open{transform:translateY(-100%);opacity:0}
.ix-toggle[aria-expanded="true"] .ix-close{transform:none;opacity:1}
.ix-count{grid-column:7/11;font-size:var(--fs-sm)}
.ix-plus{grid-column:12/13;justify-self:end;position:relative;width:20px;height:20px}
.ix-plus::before,.ix-plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:var(--ink);transition:transform .45s var(--ease)}
.ix-plus::after{transform:rotate(90deg)}
.ix-toggle[aria-expanded="true"] .ix-plus::after{transform:rotate(0)}
.ix-toggle:hover .ix-label{color:var(--grey)}
.ix-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.ix-body.open{grid-template-rows:1fr}
.ix-inner{min-height:0;overflow:hidden}
.ix-body .th{border-top:0}
.ix-peek{position:fixed;left:0;top:0;z-index:15;width:clamp(220px,20vw,320px);aspect-ratio:4/3;border-radius:8px;overflow:hidden;pointer-events:none;opacity:0;background:#eeecea;transform:translate3d(var(--cx,-400px),var(--cy,-400px),0) translate(24px,-50%) scale(.94);transition:opacity .25s,transform .45s var(--ease)}
.ix-peek.on{opacity:1;transform:translate3d(var(--cx),var(--cy),0) translate(24px,-50%) scale(1)}
.ix-peek img{width:100%;height:100%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.ix-body{transition:none}}

/* "Soon" row — articles are not published yet */
.soon-row{border-top:1px solid var(--ink);padding-block:clamp(28px,3.4vw,48px);align-items:baseline}
.soon-row__title{grid-column:1/5;font-size:var(--fs-3xl);line-height:var(--lh-3xl);letter-spacing:var(--ls-3xl)}
.soon-row__note{grid-column:5/12;font-size:var(--fs-lg);line-height:var(--lh-lg);letter-spacing:var(--ls-lg)}
a.soon-row .soon-row__title{transition:color .35s}
a.soon-row:hover .soon-row__title{color:var(--grey)}
.soon-topics{padding-top:16px;font-size:var(--fs-md);row-gap:6px}
.soon-topics>span:first-child{grid-column:1/5}
.soon-topics>span:not(:first-child){grid-column:span 2}
@media (max-width:760px){.soon-row__title,.soon-row__note,.soon-topics>span{grid-column:1/-1!important}.soon-row__note{margin-top:10px}}

/* client marquee (from the previous site).
   site.js repeats the logos until one set is wider than the screen, then doubles it,
   so the loop never shows a gap or a jump on any screen width. */
.marquee{overflow:hidden;margin-inline:calc(var(--pad)*-1);-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;width:max-content;align-items:center}
.marquee.ready .marquee__track{animation:marquee var(--dur,45s) linear infinite;animation-delay:var(--delay,0s)}
.marquee__track li{flex:none;padding-inline:clamp(32px,3.4vw,48px)}
.marquee__track img{height:clamp(28px,2.6vw,36px);width:auto;opacity:.6;transition:opacity .3s}
.marquee__track img:hover{opacity:1}
@keyframes marquee{from{transform:translate3d(calc(var(--shift,0px)*-1),0,0)}to{transform:translate3d(0,0,0)}}
@media (prefers-reduced-motion:reduce){.marquee.ready .marquee__track{animation:none}}

/* articles */
.posts li a{border-top:1px solid var(--line);padding:22px 0;align-items:baseline}
.posts li:last-child a{border-bottom:1px solid var(--line)}
.posts h3{grid-column:1/8;font-weight:400;font-size:var(--fs-xl);letter-spacing:var(--ls-xl)}
.posts .cat{grid-column:8/11;font-size:var(--fs-sm)}
.posts .t{grid-column:11/13;justify-self:end;font-size:var(--fs-sm)}
.preview{position:fixed;left:0;top:0;z-index:15;width:280px;aspect-ratio:4/3;border-radius:8px;overflow:hidden;pointer-events:none;opacity:0;transform:translate3d(var(--cx,-400px),var(--cy,-400px),0) translate(24px,-50%) scale(.92);transition:opacity .3s,transform .5s var(--ease);background:#eeecea}
.preview.on{opacity:1;transform:translate3d(var(--cx),var(--cy),0) translate(24px,-50%) scale(1)}
.preview img{height:100%;object-fit:cover}

/* footer — closes every page: "Let's talk" + actions, then one quiet row */
footer{margin-top:clamp(96px,12vw,176px);border-radius:clamp(20px,2.4vw,32px) clamp(20px,2.4vw,32px) 0 0;background:var(--ink);color:var(--paper);font-size:var(--fs-sm);--line:rgba(253,252,252,.16)}
footer .grey{color:#8f8f8f}
footer .dim:hover>*{color:#6f6f6f}
footer .dim>*:hover{color:var(--paper)}
footer .linkbtn:hover,footer .foot-top h2 a:hover{color:var(--signal)}
.foot-top{padding-block:clamp(40px,5vw,64px);align-items:end}
.foot-top h2{grid-column:1/7;font-weight:400;font-size:var(--fs-3xl);line-height:var(--lh-3xl);letter-spacing:var(--ls-3xl)}
.foot-top h2 a{transition:color .4s}

.foot-cta{grid-column:7/13;display:flex;justify-content:flex-end;align-items:baseline;flex-wrap:wrap;gap:8px 32px;font-size:var(--fs-md)}
.foot-cta .linkbtn{font-size:var(--fs-md)}
footer .foot{border-top:1px solid var(--line);padding-block:18px 28px}
footer .foot>*:nth-child(1){grid-column:1/5}
@media (max-width:760px){.foot-cta{justify-content:flex-start;margin-top:20px}}
footer .foot>*:nth-child(2){grid-column:5/8;display:flex;flex-wrap:wrap;gap:6px 18px}
footer .foot>*:nth-child(3){grid-column:8/11;display:flex;flex-wrap:wrap;gap:6px 18px}
footer .foot>*:nth-child(4){grid-column:11/13;justify-self:end}

/* page header — shared by every inner page */
.page-head{padding-block:clamp(88px,14vh,160px) clamp(48px,7vw,96px)}
.page-head h1{font-weight:400;font-size:var(--fs-3xl);line-height:var(--lh-3xl);letter-spacing:var(--ls-3xl);max-width:20ch}
.page-head .sub{font-size:var(--fs-2xl);line-height:var(--lh-2xl);letter-spacing:var(--ls-2xl);color:var(--grey);margin-top:14px;max-width:28ch}

/* cursor label */
.cursor{position:fixed;left:0;top:0;z-index:20;pointer-events:none;font-size:var(--fs-xs);background:var(--ink);color:var(--paper);padding:8px 12px 7px;border-radius:999px;opacity:0;transform:translate3d(var(--cx,-100px),var(--cy,-100px),0) translate(-50%,-50%) scale(.6);transition:opacity .25s,transform .35s var(--ease);white-space:nowrap}
.cursor.on{opacity:1;transform:translate3d(var(--cx),var(--cy),0) translate(-50%,-50%) scale(1)}

/* entrance */
.in{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.in.seen{opacity:1;transform:none}
.hero h1 span.in:nth-child(2){transition-delay:.08s}

@media (max-width:760px){
  .grid{grid-template-columns:1fr;gap:6px}
  .grid>*{grid-column:1/-1!important;justify-self:start!important;text-align:left!important}
  .project.half figure{aspect-ratio:4/3}
  .half .cap p{display:block}
  .statement{font-size:var(--fs-2xl)}
  .principles li{padding:16px 0}
  .timeline{padding-top:0}
  .timeline::before,.timeline::after{display:none}
  .step{padding:22px 0;border-top:1px solid var(--line)}
  .step h3{margin-top:14px}
  .posts .cat,.posts .t{display:none}
  .preview{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .in{opacity:1;transform:none}
  .project img{transform:none!important;height:100%}
}

/* custom cursor — a small ink dot that eases after the pointer and opens into a ring on anything clickable.
   Only switched on by site.js (fine pointer, motion allowed); text fields keep the normal caret. */
html.has-dot,html.has-dot *{cursor:none!important}
html.has-dot input,html.has-dot textarea,html.has-dot select,html.has-dot [contenteditable]{cursor:text!important}
.cur-dot{position:fixed;left:0;top:0;z-index:2147483646;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ink);pointer-events:none;
  transform:translate3d(var(--dx,-100px),var(--dy,-100px),0) scale(var(--ds,1));transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background-color .3s,border-color .3s,opacity .2s}
.cur-dot.link{width:44px;height:44px;margin:-22px 0 0 -22px;background:transparent;border:1px solid var(--ink)}
.cur-dot.label,.cur-dot.gone{opacity:0}
.cur-dot.down{--ds:.7}
.cur-dot.invert{background:var(--paper);border-color:var(--paper)}
.cur-dot.link.invert{background:transparent}

/* footer clock — Alexandria and Riyadh, with a quiet studio status */
.clock{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 6px;font-variant-numeric:tabular-nums}
.clock time{color:var(--paper)}
.clock .sep{margin:0 4px}
.clock time .colon{transition:opacity .2s}
.clock time .colon.dim{opacity:.25}
.clock__state{margin-left:12px}
.clock__state::before{content:"— "}
.foot-end{display:inline-flex;gap:20px;align-items:baseline}


/* clock face — hairline ring, two hands, a red dot travelling the rim for seconds */
.clock__face{width:34px;height:34px;margin-right:6px;flex:none;overflow:visible}
.clock__face circle:first-child{fill:none;stroke:rgba(253,252,252,.35);stroke-width:1}
.clock__face line{stroke:var(--paper);stroke-width:1.5;stroke-linecap:round;transform-origin:20px 20px}
.clock__face .m{stroke-width:1}
.clock__face .s{fill:var(--signal);transform-origin:20px 20px}
.clock__face .c{fill:var(--paper)}

/* footer bottom row on phones: clock · two link columns · © and Top */
@media (max-width:760px){
  footer .foot{grid-template-columns:1fr 1fr!important;gap:28px 16px!important;padding-block:24px 28px}
  footer .foot>*:nth-child(1){grid-column:1/-1!important;flex-wrap:nowrap;gap:0 6px}
  footer .foot>*:nth-child(2){grid-column:1/2!important;flex-direction:column;gap:10px}
  footer .foot>*:nth-child(3){grid-column:2/3!important;flex-direction:column;gap:10px}
  footer .foot>*:nth-child(4){grid-column:1/-1!important;justify-self:stretch!important;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px}
  footer .clock__face{width:30px;height:30px}
  footer .clock__state{margin-left:8px;white-space:nowrap}
}