/* =========================================================
   Doaa Albeik — portfolio
   Charcoal + neon pink · Ruqaa / Instrument Serif wordmark
   ========================================================= */

@font-face{font-family:"Ruqaa";src:url("../assets/fonts/aref-ruqaa-arabic-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Instrument";src:url("../assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url("../assets/fonts/ibm-plex-sans-arabic-arabic-300-normal.woff2") format("woff2");font-weight:300;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC,U+200C-200E}
@font-face{font-family:"Plex";src:url("../assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC,U+200C-200E}
@font-face{font-family:"Plex";src:url("../assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC,U+200C-200E}
@font-face{font-family:"Plex";src:url("../assets/fonts/ibm-plex-sans-arabic-latin-300-normal.woff2") format("woff2");font-weight:300;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Plex";src:url("../assets/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"Plex";src:url("../assets/fonts/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}

:root{
  --ink:#141416;          /* deepest charcoal */
  --charcoal:#1B1B1E;     /* page */
  --raised:#232327;       /* panels */
  --graphite:#313136;     /* hairlines */
  --text:#EEEBF0;
  --ash:#8F8C96;
  --pink:#FF2D87;
  --pink-deep:#B0125A;

  --s1:14px; --s2:16px; --s3:18px; --s4:24px;
  --h2:clamp(40px,6vw,92px);
  --page:1320px; --pad:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.22,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--charcoal);color:var(--text);font:400 var(--s3)/1.7 "Plex",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--pink);color:var(--ink)}
:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
h1,h2,h3,p,dl,dd{margin:0}
.page{width:min(100% - 2*var(--pad),var(--page));margin-inline:auto}
main,footer{position:relative;z-index:2}

/* ---------- atmosphere: moving light + film grain ---------- */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmos .glow{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.atmos .g1{width:62vw;height:62vw;left:-14vw;top:-22vw;background:radial-gradient(circle,rgba(255,45,135,.30),rgba(255,45,135,0) 62%);animation:drift1 26s ease-in-out infinite alternate}
.atmos .g2{width:48vw;height:48vw;right:-12vw;top:38vh;background:radial-gradient(circle,rgba(176,18,90,.34),rgba(176,18,90,0) 64%);animation:drift2 32s ease-in-out infinite alternate}
.atmos .g3{width:34vw;height:34vw;left:30vw;top:30vh;background:radial-gradient(circle,rgba(255,45,135,.16),rgba(255,45,135,0) 65%)}
@keyframes drift1{to{transform:translate(18vw,26vh) scale(1.15)}}
@keyframes drift2{to{transform:translate(-22vw,-18vh) scale(.9)}}
.grain{position:fixed;inset:-100%;z-index:50;pointer-events:none;background:url("../assets/img/grain.png");opacity:.3;animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(4%,-8%)}60%{transform:translate(-9%,-2%)}80%{transform:translate(7%,9%)}100%{transform:translate(0,0)}}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 40%,transparent 55%,rgba(10,10,12,.4))}

/* ---------- preloader ---------- */
.intro{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;overflow:hidden}
.intro .iname{font-family:"Ruqaa",serif;font-weight:700;font-size:clamp(72px,14vw,190px);line-height:1.3;padding:.1em .1em .3em;color:var(--text)}
html[lang="en"] .intro .iname{font-family:"Instrument",serif;font-style:italic;font-weight:400;line-height:1}
.intro .ibar{position:absolute;bottom:clamp(28px,6vh,56px);inset-inline:var(--pad);height:1px;background:var(--graphite)}
.intro .ibar i{position:absolute;inset:0;background:var(--pink);transform-origin:right;transform:scaleX(0)}
html[dir="ltr"] .intro .ibar i{transform-origin:left}
.no-intro .intro{display:none}

/* ---------- cursor ---------- */
.cursor,.cursor-dot{position:fixed;top:0;left:0;z-index:90;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .3s}
.cursor{width:44px;height:44px;margin:-22px 0 0 -22px;border:1px solid rgba(238,235,240,.45);display:grid;place-items:center;transition:opacity .3s,width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),background .3s,border-color .3s}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--pink)}
.cursor span{font-size:13px;font-weight:500;color:var(--ink);opacity:0;transition:opacity .2s;white-space:nowrap}
.has-cursor .cursor,.has-cursor .cursor-dot{opacity:1}
.cursor.is-link{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:var(--pink)}
.cursor.is-view{width:110px;height:110px;margin:-55px 0 0 -55px;background:var(--pink);border-color:var(--pink)}
.cursor.is-view span{opacity:1}
@media (hover:hover) and (pointer:fine){.has-cursor,.has-cursor a,.has-cursor button{cursor:none}}

/* ---------- links & buttons ---------- */
.link{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:color .25s}
.link:hover{color:var(--pink)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 30px;border-radius:999px;background:var(--pink);color:var(--ink);font-weight:500;overflow:hidden;isolation:isolate;will-change:transform}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--text);transform:translateY(101%);border-radius:inherit;transition:transform .5s var(--ease-out)}
.btn:hover::before{transform:translateY(0)}
.btn-line{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--graphite)}
.btn-line::before{background:var(--pink)}
.btn-line:hover{color:var(--ink)}

/* ---------- header ---------- */
.top{position:fixed!important;top:0;inset-inline:0;z-index:60;transition:background .4s,backdrop-filter .4s,transform .5s var(--ease-out)}
.top::before{content:"";position:absolute;inset:0 0 -40px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,rgba(20,20,22,.85),rgba(20,20,22,0));transition:opacity .4s}
.top.scrolled::before{opacity:0}
.top.scrolled{background:rgba(20,20,22,.72);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
.top.hide{transform:translateY(-100%)}
.top .page{display:flex;align-items:center;justify-content:space-between;gap:24px;height:78px}
.top .name{font-size:28px;white-space:nowrap}
.top nav{display:flex;align-items:center;gap:clamp(18px,3vw,38px);font-size:var(--s2)}
.top nav a{color:var(--ash);transition:color .2s;position:relative}
.top nav a:hover{color:var(--text)}
.lang{font-size:var(--s2);color:var(--text);border:1px solid var(--graphite);border-radius:999px;padding:6px 16px;transition:border-color .2s,color .2s}
.lang:hover{border-color:var(--pink);color:var(--pink)}
.menu{display:none;font-size:var(--s2)}
html[lang="ar"] .name.wm,html[lang="ar"] .foot .name{font-family:"Ruqaa",serif;font-weight:700;line-height:1.2}
html[lang="en"] .name.wm,html[lang="en"] .foot .name{font-family:"Instrument",serif;font-style:italic;line-height:1}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:140px 0 clamp(48px,8vh,96px);overflow:hidden}
.wall{position:absolute;top:-30%;bottom:-30%;width:78%;perspective:1600px;pointer-events:none;z-index:0}
html[dir="rtl"] .wall{left:-8%;-webkit-mask-image:linear-gradient(to left,transparent 4%,#000 48%);mask-image:linear-gradient(to left,transparent 4%,#000 48%)}
html[dir="ltr"] .wall{right:-8%;-webkit-mask-image:linear-gradient(to right,transparent 4%,#000 48%);mask-image:linear-gradient(to right,transparent 4%,#000 48%)}
.wall-inner{position:absolute;inset:0;display:flex;justify-content:center;gap:26px;transform:rotateX(24deg) rotateY(-10deg) rotateZ(-16deg) scale(1.06);transform-style:preserve-3d;will-change:transform}
html[dir="ltr"] .wall-inner{transform:rotateX(24deg) rotateY(10deg) rotateZ(16deg) scale(1.06)}
.col{display:flex;flex-direction:column;gap:26px;flex:none;will-change:transform}
.col.desk{width:min(30vw,440px)}
.col.phone{width:min(14vw,210px)}
.col .shot{border-radius:12px;overflow:hidden;background:var(--raised);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 60px -20px rgba(0,0,0,.7);flex:none}
.col.phone .shot{border-radius:22px;border:5px solid #0D0D0F}
.col .shot img{width:100%;height:auto;display:block}
.hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,var(--charcoal) 2%,rgba(27,27,30,0) 38%),linear-gradient(to bottom,rgba(20,20,22,.8),rgba(20,20,22,0) 22%)}
html[dir="rtl"] .hero-shade{background:linear-gradient(to top,var(--charcoal) 2%,rgba(27,27,30,0) 38%),linear-gradient(to bottom,rgba(20,20,22,.8),rgba(20,20,22,0) 22%),linear-gradient(to left,rgba(20,20,22,.92) 8%,rgba(20,20,22,.55) 34%,rgba(20,20,22,0) 58%)}
html[dir="ltr"] .hero-shade{background:linear-gradient(to top,var(--charcoal) 2%,rgba(27,27,30,0) 38%),linear-gradient(to bottom,rgba(20,20,22,.8),rgba(20,20,22,0) 22%),linear-gradient(to right,rgba(20,20,22,.92) 8%,rgba(20,20,22,.55) 34%,rgba(20,20,22,0) 58%)}
.hero .page{position:relative;z-index:2}
.hero-name{display:block;margin-bottom:clamp(28px,4vw,48px)}
.hero-name .big{display:block;font-size:clamp(84px,15vw,236px);text-shadow:0 10px 60px rgba(0,0,0,.5)}
html[lang="ar"] .hero-name .big{font-family:"Ruqaa",serif;font-weight:700;line-height:1.08;padding:.1em 0 .28em;margin-bottom:-.28em}
html[lang="en"] .hero-name .big{font-family:"Instrument",serif;font-style:italic;line-height:.92;letter-spacing:-.02em;padding:.05em .08em .18em 0;margin-bottom:-.18em}
.hero-name .small{display:inline-block;color:var(--pink);font-size:clamp(30px,4.4vw,64px);margin-top:4px}
html[lang="ar"] .hero-name .small{font-family:"Instrument",serif;font-style:italic;line-height:1}
html[lang="en"] .hero-name .small{font-family:"Ruqaa",serif;font-weight:700;line-height:1.3}
.hero-foot{display:grid;gap:30px;justify-items:start;max-width:640px}
.intro-text{font-size:clamp(19px,1.7vw,23px);line-height:1.7;font-weight:300;max-width:31em;color:#D9D6DC}
.hero-side{display:grid;gap:18px;justify-items:start}
.status{display:flex;align-items:center;gap:10px;font-size:var(--s2);color:var(--ash)}
.status i{width:8px;height:8px;border-radius:50%;background:#3BE38E;box-shadow:0 0 0 0 rgba(59,227,142,.6);animation:ping 2.2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(59,227,142,0)}100%{box-shadow:0 0 0 0 rgba(59,227,142,0)}}
.status strong{color:var(--text);font-weight:400}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* reveal helpers (JS sets initial states) */
.mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.mask > span{display:block}

/* ---------- marquee ---------- */
.marquee{position:relative;padding:clamp(60px,9vw,120px) 0;overflow:hidden;direction:ltr;border-top:1px solid var(--graphite);border-bottom:1px solid var(--graphite);background:linear-gradient(180deg,rgba(20,20,22,.4),rgba(20,20,22,.8))}
.mrow{display:flex;white-space:nowrap;will-change:transform}
.mrow + .mrow{margin-top:8px}
.mrow span{font-family:"Instrument",serif;font-style:italic;font-size:clamp(64px,10vw,160px);line-height:1.05;padding-inline:.35em;color:transparent;-webkit-text-stroke:1px rgba(238,235,240,.28)}
.mrow span.on{color:var(--text);-webkit-text-stroke:0}
.mrow span.pk{color:var(--pink);-webkit-text-stroke:0}

/* ---------- numbers ---------- */
.stats{position:relative;padding:clamp(80px,10vw,140px) 0 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--graphite)}
.stat{padding:clamp(28px,3vw,44px) clamp(16px,2vw,32px) 0;border-inline-start:1px solid var(--graphite)}
.stat:first-child{border-inline-start:0;padding-inline-start:0}
.stat b{display:flex;align-items:baseline;font-family:"Instrument",serif;font-style:italic;font-weight:400;font-size:clamp(72px,9vw,150px);line-height:1;direction:ltr;justify-content:flex-start}
html[dir="rtl"] .stat b{justify-content:flex-end}
.stat b i{font-style:italic;color:var(--pink);font-size:.55em;margin-inline-start:.05em}
.stat p{margin-top:16px;color:var(--ash);font-size:var(--s2);max-width:18em}
@media (max-width:900px){.stats-grid{grid-template-columns:1fr 1fr}.stat:nth-child(3){border-inline-start:0;padding-inline-start:0}.stat{padding-bottom:28px}}

/* ---------- sections ---------- */
.sec{position:relative;padding:clamp(96px,13vw,180px) 0}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;margin-bottom:clamp(48px,7vw,96px)}
.sec-head h2{font-size:var(--h2);font-weight:500;line-height:1.08;letter-spacing:-.01em}
html[lang="ar"] .sec-head h2{line-height:1.25;letter-spacing:0}
.sec-head .note{color:var(--ash);font-size:var(--s2);max-width:22em}

/* ---------- work showcase ---------- */
.cases{display:grid;gap:clamp(96px,12vw,170px)}
.case{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,48px);align-items:center}
.case-media{grid-column:1/span 8;position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/10;background:var(--raised);box-shadow:0 0 0 1px rgba(255,255,255,.05),0 40px 80px -30px rgba(0,0,0,.7)}
.case-media img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform;transition:filter .6s}
.case-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(255,45,135,.18),transparent 45%);opacity:0;transition:opacity .5s}
.case:hover .case-media::after{opacity:1}
.case-info{grid-column:9/span 4}
.case:nth-child(even) .case-media{grid-column:5/span 8;grid-row:1}
.case:nth-child(even) .case-info{grid-column:1/span 4;grid-row:1}
.case-meta{display:flex;gap:16px;font-size:var(--s1);color:var(--ash);margin-bottom:18px}
.case-meta span:first-child{color:var(--pink)}
.case-title{font-size:clamp(28px,3vw,44px);font-weight:500;line-height:1.25;margin-bottom:18px;transition:color .3s}
.case:hover .case-title{color:var(--pink)}
.case-sum{color:#C9C6CE;font-weight:300;margin-bottom:22px}
.case-stack{font-size:var(--s1);color:var(--ash);direction:ltr;text-align:start}
html[dir="rtl"] .case-stack{text-align:right}
.case-go{display:inline-block;margin-top:26px;font-size:var(--s2)}

/* ---------- what I build ---------- */
.build{border-top:1px solid var(--graphite)}
.brow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.7fr);gap:clamp(20px,4vw,64px);align-items:baseline;padding:clamp(28px,3.4vw,44px) 0;border-bottom:1px solid var(--graphite);position:relative}
.brow::before{content:"";position:absolute;inset-inline-start:0;bottom:-1px;height:1px;width:100%;background:var(--pink);transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease-out)}
html[dir="ltr"] .brow::before{transform-origin:left}
.brow:hover::before{transform:scaleX(1)}
.brow h3{font-size:clamp(26px,3vw,44px);font-weight:500;line-height:1.25;transition:transform .5s var(--ease-out),color .3s}
.brow:hover h3{color:var(--pink);transform:translateX(-14px)}
html[dir="ltr"] .brow:hover h3{transform:translateX(14px)}
.brow p{color:#C9C6CE;font-weight:300}
.brow .tools{font-size:var(--s1);color:var(--ash);direction:ltr;text-align:end}
html[dir="rtl"] .brow .tools{text-align:left}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(48px,8vw,128px)}
.lede{font-size:clamp(26px,3.2vw,46px);line-height:1.5;font-weight:400}
.lede .w{opacity:.18;transition:opacity .2s}
.about .body{margin-top:32px;color:#C9C6CE;font-weight:300;max-width:34em}
.facts{align-self:end}
.facts div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--graphite);font-size:var(--s2)}
.facts div:first-child{border-top:1px solid var(--graphite)}
.facts dt{color:var(--ash)}

/* ---------- contact ---------- */
.contact{overflow:hidden}
.contact .big{font-size:clamp(56px,10vw,170px);font-weight:500;line-height:1.05;letter-spacing:-.02em}
html[lang="ar"] .contact .big{letter-spacing:0;line-height:1.2}
.contact .big em{font-style:normal;color:var(--pink)}
.contact .sub{color:var(--ash);margin-top:28px;max-width:30em}
.channels{margin-top:clamp(56px,8vw,96px)}
.channel{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:28px 0;border-top:1px solid var(--graphite);flex-wrap:wrap}
.channel:last-child{border-bottom:1px solid var(--graphite)}
.channel span{color:var(--ash);font-size:var(--s2)}
.channel a{font-family:"Instrument",serif;font-style:italic;font-size:clamp(32px,5vw,72px);line-height:1.1;direction:ltr;transition:color .25s;overflow-wrap:anywhere}
.channel a:hover{color:var(--pink)}
.contact-glow{position:absolute;width:70vw;height:70vw;left:50%;bottom:-45vw;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,45,135,.28),transparent 62%);filter:blur(40px);pointer-events:none;z-index:-1}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--graphite);padding:30px 0 40px;color:var(--ash);font-size:var(--s1)}
.foot .page{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot .name{font-size:26px;color:var(--text)}

/* ---------- case study page ---------- */
.cs-top{padding:clamp(130px,16vw,190px) 0 clamp(48px,6vw,72px)}
.back{font-size:var(--s2);color:var(--ash)}
.back:hover{color:var(--text)}
.cs-top h1{font-size:clamp(44px,7vw,108px);font-weight:500;line-height:1.1;margin-top:clamp(28px,4vw,48px);max-width:14em;letter-spacing:-.01em}
html[lang="ar"] .cs-top h1{line-height:1.25;letter-spacing:0}
.cs-top .summary{font-size:clamp(20px,2vw,26px);font-weight:300;margin-top:28px;max-width:32em;color:#D9D6DC}
.cs-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-top:1px solid var(--graphite);margin-top:clamp(48px,6vw,72px)}
.cs-facts div{padding:20px 0;padding-inline-end:24px;font-size:var(--s2)}
.cs-facts dt{color:var(--ash);margin-bottom:4px}
.cs-facts a{color:var(--pink)}
.cs-cover{border-radius:10px;overflow:hidden;background:var(--raised);margin-bottom:clamp(48px,7vw,96px);box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.cs-cover img{width:100%;height:auto}
.cs-pending{padding:28px 0;border-top:1px solid var(--graphite);color:var(--ash)}
.cs-part{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,5vw,80px);padding:clamp(48px,6vw,80px) 0;border-top:1px solid var(--graphite)}
.cs-part h2{font-size:clamp(24px,2.4vw,34px);font-weight:500;line-height:1.4}
.cs-part p,.cs-part li{font-size:clamp(18px,1.6vw,21px);line-height:1.8;max-width:36em;white-space:pre-line;color:#D9D6DC;font-weight:300}
.cs-part ul{margin:0;padding-inline-start:1.1em}
.cs-part li{margin-bottom:8px}
.cs-part li::marker{color:var(--pink)}
.cs-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,48px) clamp(12px,2vw,24px);padding:clamp(8px,2vw,24px) 0 clamp(56px,7vw,88px)}
.cs-gallery figure{margin:0}
.cs-gallery figure.full{grid-column:1/-1}
.cs-gallery img{width:100%;height:auto;border-radius:8px}
.cs-gallery figcaption{font-size:var(--s1);color:var(--ash);margin-top:12px}
.next{display:block;border-top:1px solid var(--graphite);padding:clamp(64px,9vw,120px) 0;position:relative;overflow:hidden}
.next span{color:var(--ash);font-size:var(--s2)}
.next strong{display:block;font-size:clamp(44px,7vw,110px);font-weight:500;line-height:1.15;margin-top:10px;transition:color .3s}
.next:hover strong{color:var(--pink)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .case,.case:nth-child(even){grid-template-columns:1fr}
  .case-media,.case:nth-child(even) .case-media,.case-info,.case:nth-child(even) .case-info{grid-column:1;grid-row:auto}
  .about{grid-template-columns:1fr}
  .brow{grid-template-columns:1fr 1fr}
  .brow .tools{grid-column:1/-1;text-align:start!important}
}
@media (max-width:760px){
  body{font-size:var(--s2)}
  .top .page{height:66px}
  .top nav a:not(.lang){display:none}
  .top nav.open{position:absolute;top:66px;inset-inline:0;flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--pad) 28px;background:rgba(20,20,22,.96);backdrop-filter:blur(16px)}
  .top nav.open a:not(.lang){display:block;padding:12px 0;font-size:var(--s4);color:var(--text)}
  .top nav.open .lang{margin-top:14px}
  .menu{display:block}
  .hero{align-items:flex-end;padding-top:110px}
  .wall{width:150%!important;top:-10%;bottom:20%}
  html[dir="rtl"] .wall{left:-25%;-webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 78%);mask-image:linear-gradient(to bottom,#000 30%,transparent 78%)}
  html[dir="ltr"] .wall{right:-25%;-webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 78%);mask-image:linear-gradient(to bottom,#000 30%,transparent 78%)}
  .col.desk{width:58vw}.col.phone{width:28vw}
  .hero-foot{grid-template-columns:1fr}
  .sec-head{grid-template-columns:1fr}
  .brow{grid-template-columns:1fr}
  .cs-part{grid-template-columns:1fr}
  .cs-gallery{grid-template-columns:1fr}
  .facts div{grid-template-columns:100px 1fr}
  .actions .btn{flex:1 1 auto}
}
@media (min-width:1100px){.grain{opacity:.16}.atmos .glow{filter:blur(70px)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .lede .w{opacity:1}
}