/* ==========================================================================
   MOOD. — Mohamed / Visual Identity & Branding
   Palette + type derived from the brand reference kit.
   ========================================================================== */

/* ---------- tokens ---------- */
:root{
  --coral:#FF605D;
  --peach:#FFA381;
  --green:#00A652;

  --accent:var(--green);
  --accent-2:var(--peach);

  --ink:#FFFFFF;
  --ink-2:rgba(255,255,255,.62);
  --ink-3:rgba(255,255,255,.34);
  --bg:#000000;
  --bg-2:#0A0A0A;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.06);
  --grid:rgba(0,166,82,.22);

  --ff-d:'Poppins',ui-sans-serif,'Segoe UI',system-ui,sans-serif;
  --ff-m:'JetBrains Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --ff-ar:'Tajawal','Poppins',ui-sans-serif,'Segoe UI',system-ui,sans-serif;

  --pad:clamp(1.15rem,4vw,4.5rem);
  --shell:min(1560px,100% - var(--pad)*2);

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,.05,.15,1);
}

html[data-mood="coral"]{ --accent:#FF605D; --accent-2:#FFA381; }
html[data-mood="peach"]{ --accent:#FFA381; --accent-2:#FF605D; }
html[data-mood="green"]{ --accent:#00A652; --accent-2:#FFA381; }

html[data-theme="light"]{
  --ink:#000000;
  --ink-2:rgba(0,0,0,.64);
  --ink-3:rgba(0,0,0,.36);
  --bg:#FFFFFF;
  --bg-2:#F2F2F0;
  --line:rgba(0,0,0,.14);
  --line-2:rgba(0,0,0,.06);
  --grid:rgba(0,166,82,.20);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  color-scheme:dark;
}
html[data-theme="light"]{color-scheme:light}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-d);
  font-weight:300;
  line-height:1.5;
  overflow-x:hidden;
  transition:background .7s var(--e-out),color .7s var(--e-out);
}
body.is-loading{overflow:hidden;height:100vh}
body.is-locked{overflow:hidden}

img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
mark{background:none;color:var(--accent)}

::selection{background:var(--accent);color:#000}

.mono{
  font-family:var(--ff-m);
  font-weight:400;
  font-size:clamp(.6rem,.72vw,.73rem);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.shell{width:var(--shell);margin-inline:auto}

/* ---------- atmosphere ---------- */
.grid-canvas{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;opacity:.9;
  transition:opacity .7s var(--e-out);
}
html[data-theme="light"] .grid-canvas{opacity:.5}
.grain{
  position:fixed;inset:-150%;z-index:2;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
  mix-blend-mode:overlay;
}
html[data-theme="light"] .grain{opacity:.07;mix-blend-mode:multiply}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-4%)}
  60%{transform:translate(-3%,-3%)}80%{transform:translate(4%,2%)}100%{transform:translate(0,0)}
}
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 40%,transparent 40%,rgba(0,0,0,.55) 100%);
}
html[data-theme="light"] .vignette{background:radial-gradient(120% 80% at 50% 40%,transparent 45%,rgba(0,0,0,.08) 100%)}

main{position:relative;z-index:3}

/* ---------- cursor ---------- */
.cursor{position:fixed;inset:0;z-index:9998;pointer-events:none;display:none}
body.has-cursor .cursor{display:block}
.cursor__dot,.cursor__ring{position:absolute;top:0;left:0;border-radius:100px;will-change:transform}
.cursor__dot{
  width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--accent);
  transition:width .3s var(--e-out),height .3s var(--e-out),margin .3s var(--e-out),opacity .3s;
}
.cursor__ring{
  width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid var(--ink-3);
  display:grid;place-items:center;
  transition:width .45s var(--e-out),height .45s var(--e-out),margin .45s var(--e-out),
             background .35s var(--e-out),border-color .35s var(--e-out);
}
.cursor__label{
  font-family:var(--ff-m);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;
  color:#000;opacity:0;transform:scale(.6);transition:opacity .3s,transform .3s var(--e-out);
  white-space:nowrap;
}
body.cur-hover .cursor__ring{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:var(--accent)}
body.cur-hover .cursor__dot{opacity:0}
body.cur-label .cursor__ring{
  width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--accent);border-color:var(--accent);
}
body.cur-label .cursor__label{opacity:1;transform:scale(1)}
body.cur-down .cursor__ring{width:26px;height:26px;margin:-13px 0 0 -13px}

/* ---------- loader ---------- */
.loader{
  position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:grid;place-items:center;
  transition:clip-path 1.05s var(--e-io),opacity .5s .5s;
  clip-path:inset(0 0 0 0);
}
.loader.is-done{clip-path:inset(0 0 100% 0);pointer-events:none}
.loader__inner{width:min(560px,80vw);text-align:center}
.loader__mark{width:clamp(120px,18vw,190px);margin:0 auto 2.2rem;color:var(--ink)}
.loader__mark svg{width:100%;height:auto;overflow:visible}
.loader__mark g>path{
  opacity:0;transform:translateY(24px);
  animation:markIn .9s var(--e-out) forwards;
}
.loader__mark g>path:nth-child(1){animation-delay:.05s}
.loader__mark g>path:nth-child(2){animation-delay:.13s}
.loader__mark g>path:nth-child(3){animation-delay:.21s}
.loader__mark g>path:nth-child(4){animation-delay:.29s}
.loader__mark .mark-dot{animation-delay:.45s;fill:var(--accent)}
@keyframes markIn{to{opacity:1;transform:translateY(0)}}
.loader__meta{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--ff-m);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.7rem;
}
.loader__count{color:var(--accent);font-variant-numeric:tabular-nums}
.loader__bar{height:1px;background:var(--line);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--accent)}

/* ---------- header ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(.9rem,2vw,1.6rem) var(--pad);
  mix-blend-mode:difference;
}
html[data-theme="light"] .hdr{mix-blend-mode:normal}
.hdr__logo{display:flex;align-items:center;gap:.7rem}
/* large while the hero is on screen, compact once you scroll past it */
.hdr__logo-img{
  width:clamp(52px,5.4vw,82px);height:auto;
  transition:width .7s var(--e-out);
}
body.is-scrolled .hdr__logo-img{width:clamp(30px,3vw,40px)}
.hdr__logo-type{
  font-family:var(--ff-m);font-weight:400;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:#fff;
  transition:font-size .7s var(--e-out),opacity .5s;
}
body.is-scrolled .hdr__logo-type{font-size:.62rem}
html[data-theme="light"] .hdr__logo-type{color:var(--ink)}
.hdr__logo-type i{color:var(--accent);font-style:normal}
.hdr__tools{display:flex;align-items:center;gap:.5rem}

.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid rgba(255,255,255,.28);border-radius:100px;
  padding:.42rem .8rem;color:#fff;
  transition:border-color .35s,background .35s,color .35s;
}
html[data-theme="light"] .chip{border-color:var(--line);color:var(--ink)}
.chip:hover{border-color:var(--accent)}
.chip__label{font-family:var(--ff-m);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase}
.chip__swatch{
  width:11px;height:11px;border-radius:100px;background:var(--accent);
  transition:background .5s var(--e-out),transform .5s var(--e-out);
}
.chip--mood:hover .chip__swatch{transform:scale(1.35)}

.burger{
  width:44px;height:44px;border:1px solid rgba(255,255,255,.28);border-radius:100px;
  display:grid;place-content:center;gap:5px;transition:border-color .35s;
}
html[data-theme="light"] .burger{border-color:var(--line)}
.burger:hover{border-color:var(--accent)}
.burger i{display:block;width:15px;height:1px;background:#fff;transition:transform .45s var(--e-out),opacity .3s}
html[data-theme="light"] .burger i{background:var(--ink)}
body.menu-open .burger i:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ---------- menu ---------- */
.menu{
  position:fixed;inset:0;z-index:880;visibility:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(4rem,10vh,7rem) var(--pad) var(--pad);
}
.menu__bg{
  position:absolute;inset:0;background:var(--bg-2);
  clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--e-io);
}
body.menu-open .menu{visibility:visible}
body.menu-open .menu__bg{clip-path:inset(0 0 0 0)}
.menu__list{position:relative;display:grid;gap:clamp(.2rem,1vh,.6rem)}
.menu__list li{
  /* the em padding must resolve against the LINK's size, so carry it here too */
  font-size:clamp(2.4rem,8.5vw,7.5rem);
  overflow:hidden;padding-bottom:.22em;margin-bottom:-.22em;
}
.menu__list a{
  position:relative;display:flex;align-items:baseline;gap:1.2rem;
  font-size:clamp(2.4rem,8.5vw,7.5rem);font-weight:200;letter-spacing:-.045em;line-height:1.02;
  transform:translateY(140%);transition:transform .85s var(--e-out),color .4s;
}
body.menu-open .menu__list a{transform:translateY(0)}
body.menu-open .menu__list li:nth-child(1) a{transition-delay:.10s}
body.menu-open .menu__list li:nth-child(2) a{transition-delay:.16s}
body.menu-open .menu__list li:nth-child(3) a{transition-delay:.22s}
body.menu-open .menu__list li:nth-child(4) a{transition-delay:.28s}
body.menu-open .menu__list li:nth-child(5) a{transition-delay:.34s}
body.menu-open .menu__list li:nth-child(6) a{transition-delay:.40s}
.menu__list a::before{
  content:attr(data-num);font-family:var(--ff-m);font-size:.72rem;letter-spacing:.2em;
  color:var(--ink-3);transform:translateY(-.9em);
}
.menu__list a:hover{color:var(--accent)}
.menu__foot{
  position:relative;display:flex;justify-content:space-between;
  color:var(--ink-3);margin-top:clamp(2rem,6vh,4rem);
  opacity:0;transition:opacity .5s .5s;
}
body.menu-open .menu__foot{opacity:1}

/* ---------- rail ---------- */
.rail{
  position:fixed;right:calc(var(--pad) * .55);top:50%;transform:translateY(-50%);
  z-index:700;display:flex;flex-direction:column;align-items:center;gap:.9rem;
  mix-blend-mode:difference;pointer-events:none;
}
html[data-theme="light"] .rail{mix-blend-mode:normal}
.rail__num,.rail__name{
  font-family:var(--ff-m);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;
}
html[data-theme="light"] .rail__num,html[data-theme="light"] .rail__name{color:var(--ink-2)}
.rail__name{writing-mode:vertical-rl;color:var(--accent)}
.rail__track{width:1px;height:22vh;background:rgba(255,255,255,.22);position:relative;overflow:hidden}
html[data-theme="light"] .rail__track{background:var(--line)}
.rail__track i{position:absolute;inset:0 auto 0 0;width:100%;height:0;background:var(--accent)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(6rem,14vh,9rem) var(--pad) 0;overflow:hidden;
}
.hero__ghost{
  position:absolute;left:0;right:0;top:52%;transform:translateY(-50%);
  display:flex;gap:6vw;pointer-events:none;white-space:nowrap;
  font-size:min(21vw,34vh);font-weight:600;letter-spacing:-.055em;line-height:.8;
  color:transparent;-webkit-text-stroke:1px var(--line);
  opacity:.85;will-change:transform;
}
.hero__inner{position:relative;width:var(--shell);margin-inline:auto}
.hero__eyebrow{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  color:var(--ink-2);margin-bottom:clamp(1.4rem,4vh,2.6rem);
}
.hero__eyebrow em{color:var(--ink-3);font-style:normal}
.hero__eyebrow .dot{
  width:7px;height:7px;border-radius:100px;background:var(--accent);
  animation:pulse 2.4s var(--e-io) infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.45}}

.hero__title{
  font-size:clamp(2.5rem,min(9.6vw,13.4vh),10.5rem);
  font-weight:200;line-height:.95;letter-spacing:-.045em;
  margin-bottom:clamp(2rem,6vh,3.5rem);
}
.hero__title .ln{display:block;overflow:hidden;padding-bottom:.26em;margin-bottom:-.20em}
.hero__title .ln__i{
  --dx:0px; --dy:0px;
  display:block;opacity:0;
  transform:translate3d(var(--dx),calc(135% + var(--dy)),0);
  transition:transform 1.1s var(--e-out),opacity .8s;
}
body.is-ready .hero__title .ln__i{transform:translate3d(var(--dx),var(--dy),0);opacity:1}
body.is-ready .hero__title .ln:nth-child(1) .ln__i{transition-delay:.05s}
body.is-ready .hero__title .ln:nth-child(2) .ln__i{transition-delay:.14s}
body.is-ready .hero__title .ln:nth-child(3) .ln__i{transition-delay:.23s}
body.is-ready .hero__title .ln:nth-child(4) .ln__i{transition-delay:.32s}
.hero__title b{font-weight:600}
.hero__title em{
  font-style:normal;color:transparent;-webkit-text-stroke:1.4px var(--accent);
  transition:color .5s var(--e-out);
}
.hero__title em:hover{color:var(--accent)}
/* the brand dot — echoes the full stop in the mood. mark */
.pd{
  display:inline-block;vertical-align:baseline;
  width:.145em;height:.145em;margin-left:.035em;
  border-radius:50%;background:var(--accent);
  text-indent:-99em;overflow:hidden;font-style:normal;
  animation:pulse 2.4s var(--e-io) infinite;
}

.hero__foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:2rem;padding-bottom:clamp(4rem,9vh,6rem);
}
.hero__blurb{max-width:38ch;color:var(--ink-2);font-size:clamp(.92rem,1.15vw,1.06rem);line-height:1.65}
.scroller{display:flex;align-items:center;gap:.8rem;color:var(--ink-3)}
.scroller__ring{
  width:42px;height:42px;border:1px solid var(--line);border-radius:100px;
  display:grid;place-items:center;overflow:hidden;
}
.scroller__ring i{
  width:1px;height:14px;background:var(--accent);
  animation:drop 1.8s var(--e-io) infinite;
}
@keyframes drop{0%{transform:translateY(-16px)}60%,100%{transform:translateY(16px)}}
.scroller:hover{color:var(--ink)}

.ticker{
  position:absolute;bottom:0;left:0;right:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:.85rem 0;overflow:hidden;background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(6px);
}
.ticker__row{display:flex;gap:2.4rem;white-space:nowrap;will-change:transform}
.ticker__row span{
  font-size:clamp(.85rem,1.4vw,1.15rem);font-weight:300;letter-spacing:-.01em;
  text-transform:uppercase;
}
.ticker__row i{color:var(--accent);font-style:normal}

/* ---------- section heads ---------- */
.sec-head{
  display:flex;align-items:baseline;gap:clamp(1rem,3vw,2.5rem);
  padding-block:clamp(3rem,10vh,7rem) clamp(2rem,5vh,3.5rem);
  border-top:1px solid var(--line);
}
.sec-head__num{color:var(--accent);flex:none}
.sec-head__title{
  font-size:clamp(1.9rem,6.5vw,5.4rem);font-weight:200;letter-spacing:-.04em;line-height:1;
}

/* word-split reveal */
/* The mask clips at its padding box, and these headings run a tight
   line-height — so descenders (g, j, y, p, and Arabic ج ي) get cut off.
   Pad the bottom to let them through, then pull the same amount back with a
   negative margin so line spacing is untouched. The word has to travel past
   the taller box now, hence 135% rather than 105%. */
[data-split] .w{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.26em;margin-bottom:-.26em;
}
[data-split] .w>i{
  display:inline-block;font-style:inherit;transform:translateY(135%);opacity:0;
  transition:transform .95s var(--e-out),opacity .6s;
  transition-delay:calc(var(--d,0) * 55ms);
}
[data-split].is-in .w>i{transform:translateY(0);opacity:1}

[data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--e-out),transform .9s var(--e-out);
  transition-delay:calc(var(--d,0) * 90ms);
}
[data-reveal].is-in{opacity:1;transform:none}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{position:relative;padding-bottom:clamp(4rem,12vh,9rem)}
.about__grid{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,6rem);align-items:start;
}
.about__portrait{position:relative;isolation:isolate}
.about__plate{
  position:absolute;inset:14% -6% 8% 6%;background:var(--accent);z-index:-1;
  transform:scaleY(.2);transform-origin:bottom;transition:transform 1.1s var(--e-io);
}
.about.is-in .about__plate{transform:scaleY(1)}
.about__frame{
  position:relative;overflow:hidden;
  clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--e-io) .15s;
}
.about.is-in .about__frame{clip-path:inset(0 0 0 0)}
.about__frame img{
  width:100%;height:auto;
  filter:grayscale(1) contrast(1.06);
  transition:filter .8s var(--e-out),transform 1.2s var(--e-out);
}
html[data-theme="light"] .about__frame img{filter:grayscale(1) contrast(1.02)}
.about__portrait:hover .about__frame img{filter:grayscale(0) contrast(1)}
/* no hover to reveal it on touch, so show it in colour there */
@media (hover:none){ .about__frame img{filter:grayscale(0) contrast(1)} }
.about__tag{
  position:absolute;right:0;bottom:-2.1rem;text-align:right;color:var(--ink-3);line-height:1.6;
}
.about__copy{padding-top:clamp(0rem,3vw,2rem)}
.about__copy p{
  color:var(--ink-2);font-size:clamp(.95rem,1.15vw,1.08rem);line-height:1.75;
  margin-bottom:1.5rem;max-width:56ch;
}
.about__copy .lead{
  color:var(--ink);font-size:clamp(1.25rem,2.35vw,2.05rem);font-weight:200;
  line-height:1.35;letter-spacing:-.025em;margin-bottom:2.2rem;max-width:24ch;
}
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;
  border-top:1px solid var(--line);padding-top:clamp(1.5rem,4vh,2.6rem);margin-top:clamp(1.5rem,4vh,3rem);
}
.stat__num{
  display:flex;align-items:baseline;
  font-size:clamp(2.2rem,5vw,4.2rem);font-weight:200;letter-spacing:-.05em;line-height:1;
}
.stat__num i{font-style:normal;font-variant-numeric:tabular-nums}
.stat__num b{color:var(--accent);font-weight:200}
.stat__lbl{display:block;color:var(--ink-3);margin-top:.7rem;line-height:1.7}

/* ==========================================================================
   CRAFT
   ========================================================================== */
.craft{position:relative;padding-bottom:clamp(3rem,10vh,7rem)}
.craft__list{border-top:1px solid var(--line-2)}
.craft__row{
  position:relative;display:grid;align-items:center;
  grid-template-columns:auto minmax(0,1fr) minmax(0,.9fr) auto;
  gap:clamp(1rem,3vw,3rem);
  padding:clamp(1.4rem,3.6vh,2.4rem) 0;
  border-bottom:1px solid var(--line-2);
  cursor:pointer;
  transition:padding .55s var(--e-out),border-color .4s;
}
.craft__row::after{
  content:"";position:absolute;left:-2vw;right:-2vw;top:0;bottom:0;
  background:var(--accent);z-index:-1;
  transform:scaleY(0);transform-origin:bottom;transition:transform .55s var(--e-out);
}
.craft__row:hover{padding-left:clamp(.8rem,2vw,2rem);border-color:transparent}
.craft__idx{color:var(--ink-3);transition:color .4s}
.craft__name{
  font-size:clamp(1.35rem,3.6vw,3rem);font-weight:200;letter-spacing:-.035em;line-height:1.05;
  transition:color .4s,transform .55s var(--e-out);
}
.craft__desc{color:var(--ink-3);font-size:clamp(.82rem,1vw,.95rem);line-height:1.6;max-width:44ch;transition:color .4s}
.craft__arrow{
  font-size:1.5rem;color:var(--ink-3);
  transform:translateX(-8px) rotate(-45deg);opacity:0;
  transition:transform .5s var(--e-out),opacity .4s,color .4s;
}
.craft__row:hover .craft__idx{color:var(--accent)}
.craft__row:hover .craft__name{color:var(--accent)}
.craft__row:hover .craft__arrow{transform:translateX(0) rotate(0);opacity:1;color:var(--accent)}

/* ==========================================================================
   WORK — horizontal rail
   ========================================================================== */
.work{position:relative}
.work__sticky{
  position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;
}
.work__head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(1rem,3vw,2.5rem);
  padding:0 var(--pad) clamp(1.4rem,4vh,2.6rem);
}
.work__title{font-size:clamp(1.6rem,4vw,3.2rem);font-weight:200;letter-spacing:-.04em}
.work__hint{margin-left:auto;color:var(--ink-3)}
/* section description — drops to its own line under the title */
.work__note{
  flex-basis:100%;order:1;
  color:var(--ink-3);font-size:clamp(.85rem,1vw,.98rem);line-height:1.7;
  max-width:52ch;margin-top:.9rem;
}
.work__track{
  display:flex;align-items:stretch;gap:clamp(1.2rem,2.6vw,3rem);
  padding-inline:var(--pad);will-change:transform;
}

.proj{
  flex:0 0 auto;width:clamp(280px,52vw,700px);
  display:flex;flex-direction:column;gap:1.2rem;cursor:pointer;
  outline:none;
}
.proj__media{
  position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--bg-2);
  border:1px solid var(--line-2);
}
.proj__media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);
  transition:transform 1.1s var(--e-out),filter .7s;
}
.proj:hover .proj__media img,.proj:focus-visible .proj__media img{transform:scale(1.08)}
.proj__media::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  mix-blend-mode:color;opacity:0;transition:opacity .6s var(--e-out);
}
.proj:hover .proj__media::after{opacity:.55}
.proj__open{
  position:absolute;left:1rem;bottom:1rem;z-index:2;
  background:var(--ink);color:var(--bg);padding:.5rem .85rem;border-radius:100px;
  transform:translateY(140%);transition:transform .55s var(--e-out);
}
.proj:hover .proj__open,.proj:focus-visible .proj__open{transform:translateY(0)}
.proj:focus-visible .proj__media{outline:2px solid var(--accent);outline-offset:3px}

.proj__meta{display:flex;flex-direction:column;gap:.55rem}
.proj__idx{color:var(--ink-3)}
.proj__name{
  font-size:clamp(1.5rem,3.2vw,2.9rem);font-weight:300;letter-spacing:-.04em;line-height:1;
}
.proj__name em{font-style:normal;font-weight:200;color:var(--ink-2)}
.proj__line{color:var(--ink-2);font-size:clamp(.85rem,1vw,1rem);max-width:46ch}
.proj__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.3rem}
.proj__tags li{
  border:1px solid var(--line);border-radius:100px;padding:.3rem .7rem;
  font-family:var(--ff-m);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}

.proj__media--type{
  display:grid;place-items:center;
  background:var(--bg-2);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:46px 46px;
}
.proj__media--alt{background-color:var(--accent);background-image:none}
.typeplate{display:grid;justify-items:center;gap:.2rem;text-align:center;padding:1rem}
/* contact sheet of real product shots along the base of the FK card */
.typestrip{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  display:flex;gap:1px;padding:0 1px 1px;
  opacity:.85;transition:opacity .5s var(--e-out),transform .7s var(--e-out);
  transform:translateY(18%);
}
.proj:hover .typestrip,.proj:focus-visible .typestrip{opacity:1;transform:translateY(0)}
.typestrip img{
  flex:1 1 0;min-width:0;height:clamp(46px,7vw,86px);object-fit:cover;
  filter:saturate(.85);
}
.typeplate__sm{color:var(--ink-3);margin-bottom:.6rem}
.proj__media--alt .typeplate__sm{color:rgba(0,0,0,.55)}
.typeplate__lg{
  font-size:clamp(2rem,7vw,5.5rem);font-weight:600;letter-spacing:-.05em;line-height:.9;
}
.proj__media--alt .typeplate__lg{color:#000}
.typeplate__lg--out{
  color:transparent;-webkit-text-stroke:1.5px var(--ink);font-weight:200;
}
.proj__media--alt .typeplate__lg--out{-webkit-text-stroke-color:#000}

/* Behance link — same card anatomy as a project, at a smaller scale so it
   reads as the end of the rail rather than a third project */
.proj--cta{width:clamp(250px,30vw,400px);margin-inline-end:var(--pad)}
.proj--cta .proj__media{display:grid;place-items:center}
/* no photo underneath, so skip the accent wash the project covers use */
.proj--cta .proj__media::after{content:none}
.proj--cta .typeplate__lg{font-size:clamp(1.6rem,4.4vw,3.2rem)}
.proj--cta .proj__idx{
  color:var(--ink-3);transition:color .4s var(--e-out);text-transform:none;letter-spacing:.08em;
}
.proj--cta:hover .proj__idx{color:var(--accent)}
.proj--cta .proj__media--type{
  transition:background-color .5s var(--e-out),border-color .5s var(--e-out);
}
.proj--cta:hover .proj__media--type{border-color:var(--accent)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:100px;padding:.95rem 1.6rem;
  font-family:var(--ff-m);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;
  align-self:flex-start;position:relative;overflow:hidden;
  transition:color .45s var(--e-out),border-color .45s;
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--accent);
  transform:translateY(101%);transition:transform .55s var(--e-out);
}
.btn span{position:relative;z-index:1}
.btn:hover{color:#000;border-color:var(--accent)}
.btn:hover::before{transform:translateY(0)}

/* ==========================================================================
   BELIEF
   ========================================================================== */
.belief{padding:clamp(5rem,16vh,12rem) 0 clamp(4rem,12vh,9rem)}
.belief__quote{
  font-size:clamp(1.7rem,5.6vw,5rem);font-weight:200;line-height:1.12;letter-spacing:-.04em;
  max-width:22ch;
}
.belief__quote .w>i{color:var(--ink-3);transition:color .35s var(--e-out)}
.belief__quote .w>i.lit{color:var(--ink)}
.belief__quote .w>i.hot{color:var(--accent)}
.belief__steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,3rem);
  border-top:1px solid var(--line);margin-top:clamp(3rem,9vh,6rem);padding-top:clamp(1.8rem,5vh,3rem);
}
.step span{color:var(--accent);display:block;margin-bottom:1rem}
.step h4{font-size:clamp(1.05rem,1.7vw,1.5rem);font-weight:400;letter-spacing:-.025em;margin-bottom:.6rem}
.step p{color:var(--ink-3);font-size:clamp(.85rem,1vw,.95rem);line-height:1.7}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{padding-top:clamp(3rem,9vh,6rem);border-top:1px solid var(--line)}
.contact .sec-head__num{display:block;color:var(--accent);margin-bottom:clamp(1.5rem,5vh,3rem)}
.contact__big{
  font-size:clamp(2.6rem,12vw,12rem);font-weight:200;line-height:.92;letter-spacing:-.05em;
  margin-bottom:clamp(1.4rem,3vh,2.2rem);
}
.contact__intro{
  color:var(--ink-2);font-size:clamp(.95rem,1.25vw,1.15rem);line-height:1.75;
  max-width:56ch;margin-bottom:clamp(3rem,9vh,6rem);
}
.contact__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.6rem,3vw,3rem);
  border-top:1px solid var(--line);padding-top:clamp(1.6rem,4vh,2.6rem);
  padding-bottom:clamp(3rem,9vh,6rem);
}
.lbl{display:block;color:var(--ink-3);margin-bottom:1rem}
.contact__link{
  font-size:clamp(1.1rem,2.4vw,2rem);font-weight:200;letter-spacing:-.03em;
  position:relative;display:inline-block;
}
.contact__link::after{
  content:"";position:absolute;left:0;right:0;bottom:-.1em;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .6s var(--e-out);
}
.contact__link:hover::after{transform:scaleX(1);transform-origin:left}
.contact__social li a{
  display:inline-flex;align-items:center;gap:.65rem;
  padding:.28rem 0;font-size:clamp(.95rem,1.3vw,1.15rem);
  color:var(--ink-2);transition:color .35s,transform .45s var(--e-out);
}
.contact__social li a:hover{color:var(--accent);transform:translateX(10px)}
/* platform marks — inherit the link colour so they pick up the accent on hover */
.soc-i{
  width:1.05em;height:1.05em;flex:none;fill:currentColor;
  opacity:.6;transition:opacity .35s var(--e-out);
}
.contact__social li a:hover .soc-i{opacity:1}

.foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem;
  width:var(--shell);margin-inline:auto;
  border-top:1px solid var(--line);padding:clamp(1.6rem,4vh,2.6rem) 0 clamp(1.6rem,4vh,2.6rem);
}
.foot__mark img{width:clamp(46px,5vw,72px)}
.foot__meta{display:flex;flex-wrap:wrap;gap:1.6rem;color:var(--ink-3)}

/* ==========================================================================
   DECK (case study viewer)
   ========================================================================== */
.deck{
  position:fixed;inset:0;z-index:950;background:var(--bg);
  display:flex;flex-direction:column;
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .85s var(--e-io),visibility 0s .85s;
}
.deck.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .85s var(--e-io),visibility 0s}
.deck__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding:clamp(1rem,2.4vh,1.6rem) var(--pad);border-bottom:1px solid var(--line);
}
.deck__id{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.deck__idx{color:var(--accent)}
.deck__title{font-size:clamp(1.05rem,2.2vw,1.8rem);font-weight:300;letter-spacing:-.03em}
.deck__sub{color:var(--ink-3)}
.deck__ctl{display:flex;align-items:center;gap:.6rem}
.deck__count{color:var(--ink-3);font-variant-numeric:tabular-nums;margin-right:.4rem}
.deck__nav{
  width:38px;height:38px;border:1px solid var(--line);border-radius:100px;
  display:grid;place-items:center;transition:border-color .35s,background .35s,color .35s;
}
.deck__nav:hover{border-color:var(--accent);background:var(--accent);color:#000}
.deck__close{
  border:1px solid var(--line);border-radius:100px;padding:.55rem 1rem;
  font-family:var(--ff-m);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  transition:border-color .35s,background .35s,color .35s;
}
.deck__close:hover{border-color:var(--accent);background:var(--accent);color:#000}
.deck__note{
  padding:clamp(.8rem,2vh,1.2rem) var(--pad) 0;color:var(--ink-2);
  font-size:clamp(.85rem,1.05vw,1rem);max-width:78ch;line-height:1.65;
}
.deck__strip{
  flex:1;display:flex;align-items:center;gap:clamp(1rem,2vw,2rem);
  padding:clamp(1rem,3vh,2rem) var(--pad);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;cursor:grab;outline:none;
}
.deck__strip::-webkit-scrollbar{display:none}
.deck__strip.is-drag{cursor:grabbing;scroll-snap-type:none}
.deck__slide{
  flex:0 0 auto;
  width:min(88vw,calc(68vh * 16 / 9));height:auto;aspect-ratio:16/9;
  scroll-snap-align:center;background:var(--bg-2);border:1px solid var(--line-2);
  overflow:hidden;position:relative;
}
.deck__slide img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.deck__slide::after{
  content:"view full size";position:absolute;right:.7rem;bottom:.7rem;
  font-family:var(--ff-m);font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--accent);color:#000;padding:.35rem .6rem;border-radius:100px;
  opacity:0;transition:opacity .35s var(--e-out);pointer-events:none;
}
.deck__slide:hover::after{opacity:1}
.deck__slide--text::after{content:none}
.deck__slide--text{
  display:grid;place-items:center;padding:clamp(1.5rem,4vw,4rem);
  aspect-ratio:auto;width:min(760px,86vw);height:auto;max-height:100%;overflow-y:auto;
}
.deck__slide--text p{color:var(--ink-2);font-size:clamp(.9rem,1.2vw,1.1rem);line-height:1.8}
.deck__slide--text p + p{margin-top:1.1rem}
.deck__slide--text h4{font-size:clamp(1.3rem,2.6vw,2.2rem);font-weight:200;letter-spacing:-.03em;margin-bottom:1.2rem}

/* gallery slide — small originals shown near 1:1 so they stay sharp */
.deck__slide--gallery{
  aspect-ratio:auto;width:auto;max-width:92vw;height:auto;max-height:100%;
  display:flex;flex-direction:column;justify-content:center;gap:1.4rem;
  padding:clamp(1.2rem,3vw,2.4rem);
}
.deck__slide--gallery h4{
  font-size:clamp(1rem,1.8vw,1.5rem);font-weight:200;letter-spacing:-.03em;color:var(--ink-2);
}
.deck__slide--gallery .sheet{display:flex;gap:clamp(.6rem,1.4vw,1.4rem);align-items:flex-start}
.deck__slide--gallery figure{margin:0;display:grid;gap:.6rem;justify-items:center}
.deck__slide--gallery img{
  width:clamp(110px,15vw,300px);height:auto;aspect-ratio:1;object-fit:cover;
  border:1px solid var(--line-2);
}
.deck__slide--gallery figcaption{color:var(--ink-3);text-align:center}
.deck__prog{height:2px;background:var(--line-2)}
.deck__prog i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s linear}

/* ==========================================================================
   LOGO WALL
   ========================================================================== */
.logos{position:relative;padding-bottom:clamp(3rem,10vh,7rem)}
.logos__meta{
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:baseline;
  color:var(--ink-3);padding-bottom:clamp(1.5rem,4vh,2.5rem);
}
.logos__meta b{color:var(--accent);font-weight:400}
/* transparent container + per-cell rules, so the trailing empty cells in the
   last row stay invisible however many columns the viewport gives us */
.logo-grid{
  display:grid;gap:0;background:transparent;
  border-top:1px solid var(--line-2);
  grid-template-columns:repeat(auto-fill,minmax(clamp(140px,15vw,215px),1fr));
}
.mark{
  margin:0;background:transparent;position:relative;
  border-inline-end:1px solid var(--line-2);
  border-block-end:1px solid var(--line-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.9rem;padding:clamp(1.1rem,2.4vw,2rem) 1rem;
  opacity:0;transform:translateY(18px) scale(.96);
  transition:opacity .8s var(--e-out),transform .8s var(--e-out),background .45s;
  transition-delay:calc(var(--d,0) * 60ms);
}
.mark.is-in{opacity:1;transform:none}
.mark__box{
  height:clamp(38px,4.6vw,64px);width:100%;
  display:flex;align-items:center;justify-content:center;
}
.mark img{
  max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;
  opacity:.72;transition:opacity .45s var(--e-out),transform .6s var(--e-out),filter .45s;
}
html[data-theme="light"] .mark img{filter:invert(1)}
.mark figcaption{
  color:transparent;text-align:center;line-height:1.4;
  transition:color .4s var(--e-out);
}
.mark:hover{background:var(--bg-2)}
.mark:hover img{opacity:1;transform:scale(1.07)}
.mark:hover figcaption{color:var(--accent)}
.mark--anon .mark__box{height:clamp(42px,5vw,72px)}
.mark--anon::after{
  content:"";position:absolute;inset:auto auto 1rem 50%;transform:translateX(-50%);
  width:14px;height:1px;background:var(--line);
  opacity:0;transition:opacity .4s;
}
.mark--anon:hover::after{opacity:1}

/* ==========================================================================
   WHATSAPP
   ========================================================================== */

.wa{
  display:inline-flex;align-items:center;gap:.7rem;
  border:1px solid var(--green);border-radius:100px;
  padding:.85rem 1.35rem;color:var(--green);
  font-family:var(--ff-m);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  transition:background .4s var(--e-out),color .4s var(--e-out);
}
.wa svg{width:17px;height:17px;fill:currentColor;flex:none}
.wa:hover{background:var(--green);color:#000}

.wa-float{
  position:fixed;z-index:850;
  inset-block-end:clamp(1rem,3vw,1.8rem);
  inset-inline-end:clamp(1rem,3vw,1.8rem);
  width:54px;height:54px;border-radius:100px;
  display:grid;place-items:center;
  background:var(--green);color:#000;
  box-shadow:0 10px 34px rgba(0,0,0,.45);
  transform:translateY(120%) scale(.7);opacity:0;
  transition:transform .7s var(--e-out),opacity .5s,box-shadow .4s;
}
body.is-ready .wa-float{transform:none;opacity:1}
.wa-float:hover{box-shadow:0 14px 42px rgba(0,166,82,.45)}
.wa-float svg{width:26px;height:26px;fill:currentColor}
.wa-float span{
  position:absolute;inset-inline-end:calc(100% + .7rem);white-space:nowrap;
  background:var(--ink);color:var(--bg);border-radius:100px;padding:.45rem .8rem;
  font-family:var(--ff-m);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;transform:translateX(8px);transition:opacity .35s,transform .45s var(--e-out);
  pointer-events:none;
}
[dir="rtl"] .wa-float span{transform:translateX(-8px)}
.wa-float:hover span{opacity:1;transform:none}

/* ---------- language switch ---------- */
.lang{
  display:inline-flex;align-items:center;
  border:1px solid rgba(255,255,255,.28);border-radius:100px;overflow:hidden;
}
html[data-theme="light"] .lang{border-color:var(--line)}
.lang a{
  padding:.42rem .7rem;color:#fff;
  font-family:var(--ff-m);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  transition:background .35s,color .35s;
}
html[data-theme="light"] .lang a{color:var(--ink)}
.lang a[aria-current]{background:var(--accent);color:#000}
.lang a:not([aria-current]):hover{color:var(--accent)}

/* ==========================================================================
   RIGHT-TO-LEFT
   ========================================================================== */
[dir="rtl"]{
  --ff-d:var(--ff-ar);
  letter-spacing:0;
}
/* Arabic doesn't take the tight negative tracking the Latin display type does */
[dir="rtl"] .hero__title,
[dir="rtl"] .sec-head__title,
[dir="rtl"] .contact__big,
[dir="rtl"] .belief__quote,
[dir="rtl"] .work__title,
[dir="rtl"] .proj__name,
[dir="rtl"] .craft__name,
[dir="rtl"] .menu__list a,
[dir="rtl"] .about__copy .lead,
[dir="rtl"] .stat__num{letter-spacing:0}
[dir="rtl"] .hero__title{line-height:1.18}
[dir="rtl"] .contact__big{line-height:1.14}
[dir="rtl"] .belief__quote{line-height:1.5}
[dir="rtl"] .menu__list a{line-height:1.3}
[dir="rtl"] .sec-head__title,[dir="rtl"] .work__title{line-height:1.3}
[dir="rtl"] .about__copy .lead{line-height:1.6}
[dir="rtl"] .mono{letter-spacing:.1em}

[dir="rtl"] .about__plate{inset:14% 6% 8% -6%}
[dir="rtl"] .about__tag{right:auto;left:0;text-align:left}
[dir="rtl"] .proj__open{left:auto;right:1rem}
[dir="rtl"] .deck__slide::after{right:auto;left:.7rem}
[dir="rtl"] .rail{right:auto;left:calc(var(--pad) * .55)}
[dir="rtl"] .rail__name{writing-mode:vertical-lr}
[dir="rtl"] .craft__arrow{transform:translateX(8px) rotate(-135deg)}
[dir="rtl"] .craft__row:hover .craft__arrow{transform:translateX(0) rotate(180deg)}
[dir="rtl"] .contact__social li a:hover{transform:translateX(-10px)}
[dir="rtl"] .craft__row:hover{padding-left:0;padding-right:clamp(.8rem,2vw,2rem)}
[dir="rtl"] .menu__list a::before{transform:translateY(-.9em)}
[dir="rtl"] .hero__ghost{direction:ltr}
[dir="rtl"] .stat__num,[dir="rtl"] .loader__count,
[dir="rtl"] .deck__count,[dir="rtl"] .logos__meta b{direction:ltr;unicode-bidi:isolate}
/* the ltr above keeps "150+" from rendering as "+150", but it also flips the
   flex packing to the left — pin it back to the right so the number sits over
   its label instead of drifting to the far side of the cell */
[dir="rtl"] .stat__num{justify-content:flex-end}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .about__grid{grid-template-columns:1fr;gap:2.5rem}
  .about__copy .lead{max-width:none}
  .craft__row{grid-template-columns:auto 1fr auto;row-gap:.4rem}
  .craft__desc{grid-column:2 / -1;max-width:none}
  .belief__steps{grid-template-columns:1fr;gap:2rem}
  .contact__grid{grid-template-columns:1fr;gap:2.2rem}
  .rail{display:none}
}
@media (max-width:720px){
  .hero__ghost{font-size:44vw}
  /* the .95 display line-height assumes lines that don't wrap. On a phone every
     line wraps, so open it up — and let the browser balance each break instead
     of leaving "use." stranded alone on the last line. */
  .hero__title{line-height:1.1}
  .hero__title .ln__i{text-wrap:balance}
  .hero__title .ln{padding-bottom:.2em;margin-bottom:-.18em}
  /* all three fit in one row at 375px — no need to drop the last one */
  .stats{grid-template-columns:repeat(3,1fr);gap:1rem .6rem}
  .hdr__logo-type{display:none}
  .chip--theme{display:none}
  .work__hint{display:none}
  .proj{width:82vw}
  .work__track{gap:1.2rem}
  .deck__note{display:none}
  .deck__slide{width:min(94vw,calc(70vh * 16 / 9))}
  .deck__slide--gallery{width:auto;overflow-y:auto}
  .deck__slide--gallery .sheet{flex-wrap:wrap;justify-content:center}
  .deck__slide--gallery img{width:clamp(96px,27vw,150px)}
  .about__tag{display:none}
  .foot__meta{gap:.8rem;flex-direction:column}
  .logo-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .wa-float{width:48px;height:48px}
  .wa-float span{display:none}
  .lang{order:-1}
}

/* ==========================================================================
   MOTION PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .hero__title .ln__i,[data-reveal],[data-split] .w>i{transform:none;opacity:1}
  .about__frame{clip-path:none}
  .about__plate{transform:scaleY(1)}
  .grain{display:none}
  .grid-canvas{opacity:.5}
}