/* Dino Hair Stylist — site styles. Monochrome only. */
:root{
  --ink:#0a0a0a; --ink-2:#161616; --paper:#f3f1ec; --paper-2:#e9e6df;
  --line-d:rgba(243,241,236,.16); --line-l:rgba(10,10,10,.14);
  --mute-d:rgba(243,241,236,.82); --mute-l:rgba(10,10,10,.76);
  --serif:Montserrat,"Helvetica Neue",Arial,sans-serif; --sans:Montserrat,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --gutter:clamp(1.25rem,4vw,4rem); --max:1360px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:400;margin:0}
/* display type: heavy geometric caps, like the brand slides */
.title-lg,.title-xl,.hero-title,.svc-cat,.menu-links a,.wf-cap,.point{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:-.005em}
.svc-name,.svc-price,.row dd,.place-text{font-family:var(--sans);font-weight:700}
.hero-title em,.title-lg em{font-style:normal}
p{margin:0}
::selection{background:var(--paper);color:var(--ink)}
.section-light ::selection,.studio ::selection,.gallery ::selection{background:var(--ink);color:var(--paper)}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}

/* type */
.kicker{font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;font-weight:600}
.kicker .dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;margin:0 .9em;vertical-align:middle;opacity:.7}
.title-lg{font-size:clamp(1.7rem,3.3vw,3rem);line-height:1.08;max-width:22ch;text-wrap:balance}
.title-xl{font-size:clamp(2.4rem,5.6vw,5.2rem);line-height:1;text-wrap:balance}
.lede{font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.75;max-width:52ch}
.note{font-size:.86rem;line-height:1.7;max-width:56ch;opacity:.9}
em{font-style:italic}

/* buttons & links */
.btn{display:inline-flex;align-items:center;gap:.9em;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;padding:1.05em 1.9em 1em;border-radius:999px;border:1px solid var(--paper);color:var(--paper);background:transparent;transition:background .5s var(--ease),color .5s var(--ease),transform .5s var(--ease);white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-light{background:var(--paper);color:var(--ink)}
.btn-light:hover{background:var(--ink);color:var(--paper)}
.btn-ghost:hover{background:var(--paper);color:var(--ink)}
.btn-lg{font-size:.74rem;padding:1.2em 2.3em 1.15em}
.btn-arrow{width:.95em;height:.95em;transition:transform .5s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(4px)}
.link-u{display:inline-flex;align-items:center;gap:.6em;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600}
.link-u::after{content:"";width:.42em;height:.42em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .5s var(--ease)}
html[lang=ar] .link-u::after{transform:rotate(135deg)}
.link-u:hover::after{transform:translateX(3px) rotate(-45deg)}
html[lang=ar] .link-u:hover::after{transform:translateX(-3px) rotate(135deg)}

/* photos: monochrome filter + grain */
.photo{position:relative;overflow:hidden;background:var(--ink-2)}
.photo img{width:100%;height:100%;object-fit:cover;color:transparent;filter:grayscale(1) contrast(1.06) brightness(.97);transition:transform 1.4s var(--ease),filter 1.2s var(--ease)}
.photo::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.photo::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(10,10,10,0) 60%,rgba(10,10,10,.28))}
.photo:hover img{transform:scale(1.03)}
.photo-ph{background-size:cover;background-position:center;background-color:#e9e6df}

/* barber pole glyph (animated stripes) */
.pole{width:14px;height:36px;display:inline-block;color:currentColor;flex:none}
.pole-stripes{animation:poleMove 1.4s linear infinite}
@keyframes poleMove{to{transform:translateY(-14.15px)}}
.pole-sm{width:10px;height:26px;margin:0 2.2rem}
.pole-hero{width:16px;height:44px}

/* ── intro ─────────────────────────────────────────────────────────── */
.intro{position:fixed;inset:0;z-index:100;background:var(--ink);display:grid;place-items:center;clip-path:inset(0 0 0 0)}
.intro-logo{position:relative;width:min(68vw,640px);aspect-ratio:2.7934;transform-origin:0 0;will-change:transform}
.piece{position:absolute;opacity:0}
.piece-pole{background:var(--paper);-webkit-mask:url(/assets/logo/piece-pole-white.png) center/100% 100% no-repeat;mask:url(/assets/logo/piece-pole-white.png) center/100% 100% no-repeat;overflow:hidden}
.piece-pole::after{content:"";position:absolute;inset:-20% -60%;background:linear-gradient(115deg,transparent 42%,rgba(10,10,10,.55) 50%,transparent 58%);transform:translateX(-120%)}
.intro-line{position:absolute;left:50%;bottom:9vh;width:min(38vw,240px);height:1px;background:var(--line-d);transform:translateX(-50%);overflow:hidden}
.intro-line i{position:absolute;inset:0;background:var(--paper);transform:scaleX(0);transform-origin:left}
.intro.play .piece-d{animation:pieceX 1.1s var(--ease) .15s forwards;--x:-40px}
.intro.play .piece-o{animation:pieceX 1.1s var(--ease) .15s forwards;--x:40px}
.intro.play .piece-n{animation:pieceY 1.1s var(--ease) .32s forwards;--y:34px}
.intro.play .piece-pole{animation:pieceDrop 1s cubic-bezier(.22,1.4,.36,1) .55s forwards}
.intro.play .piece-pole::after{animation:shine 1s var(--ease-io) 1.35s forwards}
.intro.play .piece-tag{animation:pieceTag 1.1s var(--ease) .85s forwards}
.intro.play .intro-line i{animation:lineFill 1.9s var(--ease-io) .1s forwards}
@keyframes pieceX{from{opacity:0;transform:translateX(var(--x))}to{opacity:1;transform:none}}
@keyframes pieceY{from{opacity:0;transform:translateY(var(--y))}to{opacity:1;transform:none}}
@keyframes pieceDrop{from{opacity:0;transform:translateY(-70%)}to{opacity:1;transform:none}}
@keyframes shine{to{transform:translateX(120%)}}
@keyframes pieceTag{from{opacity:0;transform:scaleX(.72)}to{opacity:1;transform:none}}
@keyframes lineFill{to{transform:scaleX(1)}}
.intro.leave{transition:clip-path .85s var(--ease-io) .2s;clip-path:inset(0 0 100% 0)}
.intro.leave .intro-line{opacity:0;transition:opacity .3s}
.intro.leave .intro-logo{transition:transform .95s var(--ease-io)}
.intro.done,html.skip-intro .intro{display:none}
html.no-js .intro{display:none}

/* ── nav ───────────────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.35rem var(--gutter);mix-blend-mode:difference;color:#fff;transition:padding .5s var(--ease)}
.nav.compact{padding-block:.9rem}
.nav-logo{display:block;width:118px;flex:none}
.nav-logo img{width:100%;height:auto}
html.js:not(.skip-intro) .nav-logo img{opacity:0}
html.js.intro-done .nav-logo img{opacity:1}
.nav-links{display:flex;gap:2.4rem;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;font-weight:600}
.nav-links a{position:relative;padding:.3em 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav .btn{border-color:#fff;background:#fff;color:#000}
.nav .btn:hover{background:#000;color:#fff}
html.js:not(.skip-intro) .nav-links,html.js:not(.skip-intro) .nav-cta,html.js:not(.skip-intro) .burger{opacity:0;transition:opacity .8s var(--ease) .35s}
html.js.intro-done .nav-links,html.js.intro-done .nav-cta,html.js.intro-done .burger{opacity:1}
.burger{display:none;width:44px;height:44px;margin-right:-10px;border:0;background:none;cursor:pointer;flex-direction:column;justify-content:center;gap:6px;align-items:center;color:inherit}
.burger span{display:block;width:24px;height:1px;background:currentColor;transition:transform .5s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:55;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:space-between;padding:7rem var(--gutter) 2.5rem;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-io)}
.menu.open{clip-path:inset(0 0 0 0)}
.menu-links{display:flex;flex-direction:column;gap:.2em}
.menu-links a{font-size:clamp(2rem,8.5vw,3.6rem);line-height:1.15;display:flex;align-items:baseline;gap:1rem;opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.menu.open .menu-links a{opacity:1;transform:none;transition-delay:calc(.25s + var(--i)*.07s)}
.menu-n{font-family:var(--sans);font-size:.64rem;letter-spacing:.3em;opacity:.7;font-weight:600}
.menu-foot{display:flex;flex-wrap:wrap;gap:1.4rem 2.2rem;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;opacity:0;transition:opacity .8s var(--ease) .5s}
.menu.open .menu-foot{opacity:1}
body.menu-open{overflow:hidden}

.preview-bar{position:fixed;left:50%;bottom:1rem;transform:translateX(-50%);z-index:70;background:var(--paper);color:var(--ink);font-size:.7rem;padding:.7em 1.2em;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.35);max-width:calc(100% - 2rem);text-align:center}
.preview-bar a{text-decoration:underline;margin-left:.6em;font-weight:500}

/* ── hero ──────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:7.5rem var(--gutter) clamp(3rem,8vh,6rem);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,6rem);align-items:end;width:min(100%,var(--max));margin-inline:auto;flex:1}
.hero-copy{padding-bottom:clamp(1rem,6vh,5rem)}
.hero-title{font-size:clamp(2.6rem,6.4vw,6rem);line-height:1;letter-spacing:-.012em}
.hero-sub{margin:2rem 0 2.4rem;max-width:44ch;font-size:clamp(.95rem,1.2vw,1.1rem);line-height:1.75;color:var(--mute-d)}
.proof{display:flex;align-items:center;gap:.7rem;margin:-1.2rem 0 2.4rem;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.proof-star{font-size:.9rem;line-height:1}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem 2.4rem}
.hero-photo{margin:0;position:relative;justify-self:end;width:100%;max-width:520px}
.hero-photo-frame{aspect-ratio:3/4;clip-path:inset(0 0 100% 0);transition:clip-path 1.5s var(--ease) .35s}
.hero-photo-frame img{transform:scale(1.12);transition:transform 2.6s var(--ease) .35s}
html.intro-done .hero-photo-frame,html.skip-intro .hero-photo-frame,html.no-js .hero-photo-frame{clip-path:inset(0 0 0 0)}
html.intro-done .hero-photo-frame img,html.skip-intro .hero-photo-frame img,html.no-js .hero-photo-frame img{transform:scale(1)}
.hero-photo figcaption{display:flex;align-items:center;gap:1rem;margin-top:1rem;font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;font-weight:700;opacity:.95}
html[lang=ar] .hero-photo figcaption{font-family:Montserrat,var(--sans);letter-spacing:.32em;text-transform:uppercase;direction:ltr;justify-content:flex-end}
.cap-sep{flex:1;height:1px;background:var(--line-d);max-width:80px}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;width:min(100%,var(--max));margin:2.5rem auto 0}
.scroll-cue{display:inline-flex;align-items:center;gap:.8rem;margin-top:2.6rem;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;opacity:.9}
.chev{position:relative;display:inline-block;width:.8rem;height:.8rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);animation:chev 1.8s var(--ease-io) infinite}
.chev-down{width:.6rem;height:.6rem}
.arrow{display:inline-block;width:.55rem;height:.55rem;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin-inline-start:.2rem;animation:arrowx 1.6s var(--ease-io) infinite}
html[lang=ar] .arrow{transform:rotate(135deg);animation-name:arrowx-rtl}
@keyframes arrowx{0%,100%{transform:translateX(0) rotate(-45deg)}50%{transform:translateX(4px) rotate(-45deg)}}
@keyframes arrowx-rtl{0%,100%{transform:translateX(0) rotate(135deg)}50%{transform:translateX(-4px) rotate(135deg)}}

/* line reveals (hero) */
.line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line>*{display:block}
html.js .line>*{transform:translateY(112%);transition:transform 1.3s var(--ease)}
html.js .fade{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
html.intro-done .line>*,html.skip-intro .line>*{transform:none}
html.intro-done .hero-title .line:nth-child(2)>*,html.skip-intro .hero-title .line:nth-child(2)>*{transition-delay:.12s}
html.intro-done .hero-kicker .line>*,html.skip-intro .hero-kicker .line>*{transition-delay:.35s}
html.intro-done .fade,html.skip-intro .fade{opacity:1;transform:none}

/* ── marquee ───────────────────────────────────────────────────────── */
.marquee{background:var(--paper);color:var(--ink);overflow:hidden;border-block:1px solid var(--ink);padding:1.05rem 0;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600}
.marquee-track{display:flex;align-items:center;width:max-content;animation:marquee 46s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ── sections ──────────────────────────────────────────────────────── */
.section{padding:clamp(5rem,11vw,10rem) 0}
.section-head{display:grid;gap:1.4rem;margin-bottom:clamp(3rem,6vw,5rem)}
.studio,.gallery,.work{background:var(--paper);color:var(--ink)}
.studio-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2.5rem,7vw,8rem);align-items:end}
.studio-copy{display:grid;gap:1.6rem}
.studio .lede{color:var(--mute-l)}
.points{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-l)}
.point{display:flex;gap:1.6rem;align-items:baseline;padding:1.05rem 0;border-bottom:1px solid var(--line-l);font-size:clamp(.95rem,1.25vw,1.15rem);line-height:1.3;font-weight:700;letter-spacing:.02em}
.point-n{font-family:var(--sans);font-size:.64rem;letter-spacing:.25em;font-weight:600;opacity:.75}
.studio-photo{margin:0;width:min(100%,440px);justify-self:end;transform:translateY(clamp(0px,3vw,2.5rem))}
.studio-photo .photo{aspect-ratio:3/4}

/* services: tabs + compact accordion rows */
.services .note{color:var(--mute-d)}
.svc-tabs-wrap{position:relative;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.svc-tabs{display:flex;flex-wrap:wrap;gap:.5rem}
.svc-tabs-more{display:none}
.svc-tab{font:inherit;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--paper);background:transparent;border:1px solid var(--line-d);border-radius:999px;padding:.8em 1.2em .7em;cursor:pointer;display:inline-flex;align-items:center;gap:.7em;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s}
.svc-tab:hover{border-color:var(--paper)}
.svc-tab.is-active{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.svc-tab-n{font-size:.58rem;opacity:.6}
html.no-js .svc-tabs{display:none}
html.no-js .svc-panel[hidden]{display:block}
.svc-cat{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:clamp(1.1rem,1.6vw,1.4rem);padding-bottom:.8rem;margin-bottom:.2rem;border-bottom:1px solid var(--paper)}
.svc-cat-count{font-family:var(--sans);font-style:normal;font-size:.64rem;letter-spacing:.3em;font-weight:600;opacity:.8}
.svc-list{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,4rem);align-items:start}
.svc{border-bottom:1px solid var(--line-d);break-inside:avoid}
.svc-row{list-style:none;display:grid;grid-template-columns:1fr auto auto 1.2rem;gap:.6rem 1rem;align-items:baseline;padding:1rem 0;cursor:pointer;transition:opacity .3s}
.svc-row::-webkit-details-marker{display:none}
.svc-row:hover{opacity:.85}
.svc-name{font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.3;text-transform:uppercase;letter-spacing:.03em}
.svc-time{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;opacity:.7;white-space:nowrap}
.svc-price{font-size:clamp(1.05rem,1.3vw,1.25rem);font-weight:800;white-space:nowrap;display:flex;align-items:baseline;gap:.4rem;justify-self:end;font-variant-numeric:tabular-nums}
.svc-price .cur{font-family:var(--sans);font-size:.6rem;letter-spacing:.18em;font-weight:600;opacity:.8;margin-left:.4em}
.svc-from{font-family:var(--sans);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;opacity:.8}
.svc-chev{position:relative;width:.9rem;height:.9rem;align-self:center;opacity:.6}
.svc-chev::before,.svc-chev::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:currentColor;transition:transform .4s var(--ease)}
.svc-chev::after{transform:rotate(90deg)}
.svc[open] .svc-chev::after{transform:rotate(0)}
.svc-desc{margin:-.3rem 0 1rem;font-size:.86rem;line-height:1.6;opacity:.8;max-width:46ch}
.svc-list-open .svc-chev{display:none}
.svc-list-open .svc-row{cursor:default;pointer-events:none}
.svc-list-open .svc-name{font-size:clamp(1.05rem,1.3vw,1.2rem)}
.services-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem 2.4rem;margin-top:clamp(2.5rem,5vw,4rem)}

/* about Dino: one portrait + bio */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,7vw,8rem);align-items:center}
.about-photo{margin:0;width:100%;max-width:520px}
.about-photo .photo{aspect-ratio:3/4}
.about-copy{display:grid;gap:1.6rem}
.about-copy .lede{color:var(--mute-l)}
.about-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2.2rem;margin-top:.4rem}
/* gallery */
.gallery{padding-bottom:clamp(4rem,9vw,8rem)}
.gallery-track{display:flex;gap:clamp(1rem,2.5vw,2.5rem);align-items:flex-start;padding:0 var(--gutter);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gallery-track::-webkit-scrollbar{display:none}
.g{margin:0;flex:none;scroll-snap-align:start;will-change:transform}
.g .photo{width:100%;height:100%}
.g-1{width:clamp(220px,26vw,380px);aspect-ratio:3/4;margin-top:clamp(2rem,6vw,6rem)}
.g-2{width:clamp(180px,20vw,300px);aspect-ratio:1}
.g-3{width:clamp(220px,24vw,360px);aspect-ratio:3/4;margin-top:clamp(3rem,9vw,9rem)}
.g-4{width:clamp(200px,22vw,330px);aspect-ratio:3/4;margin-top:clamp(1rem,3vw,3rem)}
.g-5{width:clamp(230px,27vw,400px);aspect-ratio:3/4;margin-top:clamp(2.5rem,7vw,7rem)}
.gallery .g .photo img{transition:transform .2s linear,filter 1.2s var(--ease)}

/* ── work: scroll-driven showcase + moving wall ─────────────────────── */
.work{background:var(--paper);color:var(--ink);padding-bottom:clamp(4rem,8vw,7rem)}
.work-head{margin-bottom:clamp(1.5rem,4vw,3rem);position:relative;z-index:2}
.btn-dark{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:transparent;color:var(--ink)}
.work-stage{position:relative;height:calc(var(--n,12) * 46vh + 100vh);z-index:1}
.work-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;padding-top:clamp(5rem,11vh,7.5rem)}
.work-track{display:flex;align-items:flex-start;gap:clamp(1.2rem,3vw,3.2rem);padding:0 var(--gutter);will-change:transform}
.wf{flex:none;margin:0;width:min(clamp(240px,29vw,430px),52vh)}
.wf:nth-child(3n+2){margin-top:8vh}
.wf:nth-child(3n+3){margin-top:3vh}
.wf .photo{aspect-ratio:4/5;background:#fff}
.wf .photo::before{background:linear-gradient(180deg,rgba(10,10,10,0) 75%,rgba(10,10,10,.12))}
.wf .photo::after{display:none}
.wf,.wi{contain:content}
.wall-row{will-change:transform;contain:paint}
.wf .photo img{filter:grayscale(1) contrast(1.04);transition:filter 1s var(--ease),transform 1.6s var(--ease)}
.wf:hover .photo img,.wf.is-colour .photo img{filter:grayscale(0) contrast(1.02);transform:scale(1.02)}
.wf figcaption{display:flex;align-items:baseline;gap:1rem;margin-top:.9rem;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600}
.wf-n{opacity:.6}
.wf-cap{font-size:.78rem;letter-spacing:.14em}
.work-foot{display:flex;align-items:center;gap:1.6rem;margin-top:clamp(1.5rem,4vh,3rem);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600}
.work-counter{display:inline-flex;align-items:center;gap:.6rem;font-variant-numeric:tabular-nums}
.work-counter b{font-weight:600}
.work-counter i{display:inline-block;opacity:.5;font-style:normal}
.work-counter i::before{content:"/"}
.work-progress{flex:1;max-width:320px;height:1px;background:var(--line-l);position:relative}
.work-progress i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.work-hint{opacity:.8;display:inline-flex;align-items:center;gap:.6rem}
.work-hint-touch{display:none}
.work-wall{overflow:hidden;display:grid;gap:clamp(.8rem,1.6vw,1.4rem);padding:clamp(3rem,6vw,5rem) 0 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.wall-row{display:flex;gap:clamp(.8rem,1.6vw,1.4rem);width:max-content;animation:marquee 70s linear infinite}
.wall-set{display:flex;gap:clamp(.8rem,1.6vw,1.4rem)}
.wall-b{animation-direction:reverse;animation-duration:84s}
.work-wall:hover .wall-row{animation-play-state:paused}
.wi{flex:none;width:clamp(110px,13vw,190px);aspect-ratio:4/5;overflow:hidden;background:#fff center/cover;filter:grayscale(1);transition:filter .6s var(--ease)}
.wi img{width:100%;height:100%;object-fit:cover;color:transparent}
.wi:hover{filter:none}
.work-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem 2.4rem;margin-top:clamp(3rem,6vw,5rem)}
@media (max-width:860px),(hover:none){
  .work-stage{height:auto}
  .work-sticky{position:static;height:auto;overflow:visible;padding-top:0}
  .work-track{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:.5rem}
  .work-track::-webkit-scrollbar{display:none}
  .work-track{scroll-padding-inline:var(--gutter)}
  .wf{width:min(72vw,360px);scroll-snap-align:start}
  .wf:nth-child(3n+2),.wf:nth-child(3n+3){margin-top:0}
  .work-foot{padding-inline:var(--gutter)}
  .work-hint-desk{display:none}
  .work-hint-touch{display:inline-flex}
  .work-progress{display:none}
}
@media (prefers-reduced-motion:reduce){
  /* the slow marquees keep drifting (linear, pausable); abrupt motion stays off */
  .work-stage{height:auto}.work-sticky{position:static;height:auto}
  .work-track{overflow-x:auto}
}
  .work-stage{height:auto}.work-sticky{position:static;height:auto}
  .work-track{overflow-x:auto}
}

/* book */
.book{background:var(--ink);color:var(--paper)}
.book-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(3rem,7vw,8rem);align-items:start}
.book-main{display:grid;gap:1.8rem}
.book .lede{color:var(--mute-d)}
.book-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.6rem}
.book-side{display:grid;gap:2.6rem;padding-top:.6rem}
.rows{margin:0;border-top:1px solid var(--line-d)}
.row{display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--line-d)}
.row dt{font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600;opacity:.8}
.row dd{margin:0;font-size:1rem;letter-spacing:.02em}
.row dd a{border-bottom:1px solid transparent;transition:border-color .4s}
.row dd a:hover{border-color:currentColor}
.hours,.place{display:grid;gap:.8rem}
.hours-row{display:flex;justify-content:space-between;gap:1.5rem;font-size:.9rem;padding:.4rem 0;border-bottom:1px solid var(--line-d)}
.hours-row span:last-child{font-variant-numeric:tabular-nums}
.place-text{font-size:1rem;line-height:1.5;letter-spacing:.02em}

/* footer */
.footer{background:var(--ink);color:var(--paper);border-top:1px solid var(--line-d);padding:3rem 0 2.2rem}
.footer-grid{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:2rem}
.footer-logo{width:140px;height:auto}
.footer-meta{display:flex;gap:2rem;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;opacity:.75;justify-content:center}
.footer-credit{display:flex;gap:1.6rem;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;opacity:.75}
.footer-credit a:hover{opacity:1;text-decoration:underline;text-underline-offset:.4em}

/* scroll reveals */
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .75s var(--ease) calc(var(--i,0)*.07s),transform .75s var(--ease) calc(var(--i,0)*.07s)}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal-photo{transform:none}
html.js .reveal-photo .photo{clip-path:inset(10% 0 10% 0);transition:clip-path 1s var(--ease) calc(var(--i,0)*.07s)}
html.js .reveal-photo.in .photo{clip-path:inset(0 0 0 0)}
html.js .reveal-photo .photo img{transform:scale(1.08);transition:transform 1.3s var(--ease) calc(var(--i,0)*.07s),opacity .7s var(--ease)}
html.js .reveal-photo.in .photo img{transform:none}

/* ── responsive ────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .nav-links{display:none}
}
@media (max-width:860px){
  .nav-cta{display:none}
  .burger{display:flex}
  .hero{padding-top:6rem;justify-content:flex-start}
  .hero-grid{grid-template-columns:1fr;align-items:start;gap:2.5rem}
  .hero-copy{order:2;padding-bottom:0}
  .hero-photo{order:1;max-width:none;width:min(100%,420px);justify-self:start}
  .hero-photo-frame{aspect-ratio:4/5}
  .hero-kicker{margin-bottom:1.4rem}
  .hero-title{font-size:clamp(2.3rem,10.5vw,3.8rem)}
  .hero-sub{margin:1.6rem 0 2rem}
  .hero-foot{margin-top:3rem}
  .studio-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .about-photo{max-width:none}
  .svc-list{grid-template-columns:1fr}
  .svc-row{grid-template-columns:1fr auto 1rem;grid-template-areas:"name price chev" "meta meta meta"}
  .svc-name{grid-area:name}.svc-price{grid-area:price}.svc-chev{grid-area:chev}.svc-meta{grid-area:meta;margin-top:-.4rem}
  .svc-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter) 5.5rem}
  .svc-tabs::-webkit-scrollbar{display:none}
  .svc-tab{flex:none}
  .svc-tabs-more{display:inline-flex;align-items:center;gap:.4rem;position:absolute;inset-inline-end:calc(-1*var(--gutter));top:0;bottom:0;padding-inline:1.4rem .9rem;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--paper);background:linear-gradient(to right,rgba(10,10,10,0),var(--ink) 40%);pointer-events:none}
  html[lang=ar] .svc-tabs-more{background:linear-gradient(to left,rgba(10,10,10,0),var(--ink) 40%);letter-spacing:0;text-transform:none;font-size:.8rem}
  .book-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;align-items:start;gap:1.4rem}
  .footer-meta{justify-content:flex-start;flex-wrap:wrap;gap:.6rem 1.6rem}
  .pole-sm{margin:0 1.4rem}
}
@media (max-width:480px){
  .hero-actions{gap:1.2rem}
  .row{flex-direction:column;gap:.3rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pole-stripes,.chev,.arrow{animation:none!important}
  html.js .reveal,html.js .line>*,html.js .fade{transition:none!important;opacity:1!important;transform:none!important}
  html.js .reveal-photo .photo{clip-path:none!important}
  html.js .reveal-photo .photo img{transform:none!important;transition:none!important}
  .hero-photo-frame,.hero-photo-frame img{transition:none!important}
}

/* ── language switch: a small pill naming the other language ─────── */
.lang-switch{display:inline-flex;align-items:center;gap:.5em;height:2.1rem;padding:0 1em;border:1px solid currentColor;border-radius:999px;font-size:.82rem;font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap;line-height:1;margin-inline-start:.4rem;transition:background .35s var(--ease),color .35s var(--ease)}
.lang-switch::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.nav-links .lang-switch{margin-inline-start:1rem;padding:0 1em;height:2rem;font-size:.8rem}
.nav-links .lang-switch::after{display:none}
.lang-switch:hover{background:#fff;color:#000}
html[lang=en] .lang-switch{font-family:Almarai,var(--sans);padding-bottom:.15em}
html[lang=ar] .lang-switch{font-family:Montserrat,var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.lang-switch-m{display:none;margin-inline-start:auto;margin-inline-end:1rem}
@media (max-width:1100px){.lang-switch-m{display:inline-flex}}
@media (max-width:860px){.lang-switch-m{margin-inline-start:0;margin-inline-end:.6rem;height:2.3rem;padding:0 1.1em;font-size:.9rem}}

/* ── Arabic ─────────────────────────────────────────────────────────── */
html[lang=ar]{--serif:Almarai,"Noto Kufi Arabic",system-ui,sans-serif;--sans:Almarai,"Noto Sans Arabic",system-ui,sans-serif}
html[lang=ar] body{font-weight:400}
html[lang=ar] .kicker,html[lang=ar] .btn,html[lang=ar] .link-u,html[lang=ar] .nav-links,html[lang=ar] .marquee,html[lang=ar] .svc-tag,html[lang=ar] .svc-time,html[lang=ar] .svc-from,html[lang=ar] .svc-price .cur,html[lang=ar] .row dt,html[lang=ar] .footer-meta,html[lang=ar] .footer-credit,html[lang=ar] .scroll-cue,html[lang=ar] .hero-photo figcaption,html[lang=ar] .menu-foot,html[lang=ar] .work-foot,html[lang=ar] .wf figcaption,html[lang=ar] .proof,html[lang=ar] .preview-bar,html[lang=ar] .lang-switch-m{letter-spacing:0;text-transform:none;font-weight:500}
html[lang=ar] .kicker{font-size:.9rem}
html[lang=ar] .btn{font-size:.9rem;padding:.8em 1.7em}
html[lang=ar] .link-u,html[lang=ar] .nav-links{font-size:.9rem}
html[lang=ar] .nav-links{gap:2rem}
html[lang=ar] .marquee{font-size:.95rem;padding:.9rem 0}
html[lang=ar] .title-lg,html[lang=ar] .title-xl,html[lang=ar] .hero-title,html[lang=ar] .svc-name,html[lang=ar] .svc-price,html[lang=ar] .svc-cat,html[lang=ar] .point,html[lang=ar] .row dd,html[lang=ar] .place-text,html[lang=ar] .menu-links a,html[lang=ar] .wf-cap{font-variation-settings:normal;font-optical-sizing:auto;font-weight:800;font-style:normal;letter-spacing:0}
html[lang=ar] .svc-name,html[lang=ar] .svc-price,html[lang=ar] .point,html[lang=ar] .row dd,html[lang=ar] .place-text,html[lang=ar] .wf-cap{font-weight:700}
html[lang=ar] .hero-title{font-size:clamp(2.8rem,7.2vw,6.8rem);line-height:1.22}
html[lang=ar] .hero-title em{font-style:normal;font-weight:400}
html[lang=ar] .kicker,html[lang=ar] .btn,html[lang=ar] .link-u,html[lang=ar] .nav-links a:not(.lang-switch),html[lang=ar] .marquee,html[lang=ar] .svc-tab,html[lang=ar] .row dt,html[lang=ar] .footer-meta,html[lang=ar] .footer-credit,html[lang=ar] .menu-foot,html[lang=ar] .work-foot,html[lang=ar] .svc-time,html[lang=ar] .svc-from,html[lang=ar] .svc-price .cur{font-weight:700}
html[lang=ar] .lede,html[lang=ar] .hero-sub,html[lang=ar] .note,html[lang=ar] .svc-desc,html[lang=ar] .book .lede{font-weight:400;line-height:1.9}
html[lang=ar] .title-lg{font-size:clamp(1.9rem,3.8vw,3.6rem);line-height:1.3}
html[lang=ar] .title-xl{font-size:clamp(2.4rem,6.2vw,5.8rem);line-height:1.2}
html[lang=ar] .svc-cat{font-style:normal}
html[lang=ar] .svc-tab{letter-spacing:0;text-transform:none;font-size:.85rem;font-weight:500}
html[lang=ar] .svc-time,html[lang=ar] .svc-from{letter-spacing:0;text-transform:none;font-size:.8rem}
html[lang=ar] .line{padding:.15em 0 .2em;margin:-.15em 0 -.2em}
html[lang=ar] .svc-n,html[lang=ar] .svc-cat-count,html[lang=ar] .point-n,html[lang=ar] .wf-n,html[lang=ar] .menu-n,html[lang=ar] .work-counter{letter-spacing:.08em}
html[lang=ar] .proof{font-family:var(--sans)}
html[lang=ar] .lede,html[lang=ar] .hero-sub,html[lang=ar] .note,html[lang=ar] .svc-desc{font-size:1.05em;line-height:1.85}
html[lang=ar] .svc-desc{font-size:.95rem}
html[lang=ar] .svc-price .cur{font-size:.8rem;margin-left:0;margin-inline-start:.4em}
html[lang=ar] .btn-arrow{transform:scaleX(-1)}
html[lang=ar] .btn:hover .btn-arrow{transform:scaleX(-1) translateX(4px)}
html[lang=ar] .marquee-track,html[lang=ar] .work-track,html[lang=ar] .gallery-track,html[lang=ar] .wall-row,html[lang=ar] .work-wall{direction:ltr}
html[lang=ar] .wf figcaption{direction:rtl;justify-content:flex-start}
html[lang=ar] .work-foot{direction:rtl}
html[lang=ar] .work-progress i{transform-origin:right}
html[lang=ar] .menu-n{font-family:var(--sans)}
html[lang=ar] .hero-photo{justify-self:start}
html[lang=ar] .studio-photo{justify-self:start}
html[lang=ar] .svc-price{justify-self:start}
html[lang=ar] .nav-links a::after{transform-origin:left}
html[lang=ar] .nav-links a:hover::after{transform-origin:right}
html[lang=ar] .hours-row span:last-child,html[lang=ar] .svc-price,html[lang=ar] .proof{font-variant-numeric:tabular-nums}
@media (max-width:860px){ html[lang=ar] .hero-photo,html[lang=ar] .studio-photo{justify-self:start} html[lang=ar] .hero-title{font-size:clamp(2.6rem,12vw,4.8rem)} }