/* Fade chart — the page is cut like a skin fade: guard 8 at the top, bare light where you call.
   Lalezar (display) and Vazirmatn (text), both SIL OFL, self-hosted. */
@font-face{font-family:Lalezar;font-weight:400;font-display:swap;src:url(../fonts/Lalezar-Regular.ttf) format("truetype")}
@font-face{font-family:Vazirmatn;font-weight:300;font-display:swap;src:url(../fonts/Vazirmatn-Light.ttf) format("truetype")}
@font-face{font-family:Vazirmatn;font-weight:500;font-display:swap;src:url(../fonts/Vazirmatn-Medium.ttf) format("truetype")}
@font-face{font-family:Vazirmatn;font-weight:800;font-display:swap;src:url(../fonts/Vazirmatn-ExtraBold.ttf) format("truetype")}

:root{
  /* guard tones, darkest (۸) to bare (۰) */
  --g8:#0b0b0b; --g4:#1c1b1a; --g3:#2e2c2a; --g2:#4a4743; --g1:#7a756e; --g05:#b3ada4; --g0:#ece6dc;
  --red:#bb2923; --red-hi:#cf352e;                /* the only colour that isn't a photo: the call */
  --display:Lalezar,Vazirmatn,system-ui,sans-serif;
  --text:Vazirmatn,system-ui,sans-serif;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --gut:clamp(1.25rem,4vw,3.5rem);
  --header:4.5rem;
  --band:clamp(8px,1.4vw,20px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:var(--header);-webkit-text-size-adjust:100%;scrollbar-color:var(--g1) var(--g8);color-scheme:dark}
body{margin:0;background:var(--g8);color:var(--g0);font:300 1.0625rem/1.9 var(--text);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,figure,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
::selection{background:var(--g05);color:var(--g8)}
:focus-visible{outline:2px solid var(--g0);outline-offset:3px;border-radius:2px}
.sr{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;inset-block-start:.5rem;inset-inline-start:.5rem;z-index:200;background:var(--g0);color:var(--g8);padding:.5rem 1rem;transform:translateY(-200%)}
.skip:focus{transform:none}
.h2{font:400 clamp(2.8rem,7vw,6.5rem)/1.05 var(--display)}
.credit{font-size:.75rem;color:var(--g05)}

/* ---------- intro cover: guard bands, wiped off by motion.js ---------- */
.cover{display:none}
.pre .cover{display:flex;flex-direction:column;position:fixed;inset:0;z-index:150;pointer-events:none}
.cover i{flex:1}
.cover i:nth-child(1){background:var(--g8)}.cover i:nth-child(2){background:var(--g4)}.cover i:nth-child(3){background:var(--g3)}
.cover i:nth-child(4){background:var(--g2)}.cover i:nth-child(5){background:var(--g1)}.cover i:nth-child(6){background:var(--g05)}.cover i:nth-child(7){background:var(--g0)}

/* ---------- header ---------- */
.header{position:fixed;inset-inline:0;inset-block-start:0;z-index:60;block-size:var(--header);display:flex;align-items:center;gap:2.2rem;padding-inline:var(--gut);transition:background-color .3s ease}
.header.is-stuck{background:rgba(11,11,11,.9)}
.brand__name{font:400 1.55rem/1 var(--display)}
.brand__name.is-ph{border-block-end:1px dashed var(--g05);padding-block-end:.15rem}
.nav{display:flex;gap:1.8rem;margin-inline-start:auto}
.nav a{position:relative;font-weight:500;font-size:.95rem;padding-block:.35rem}
.nav a::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:2px;background:var(--g0);transform:scaleX(0);transform-origin:100% 50%;transition:transform .25s var(--ease-out)}
.nav a.is-on::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.nav a:hover::after{transform:scaleX(1)}}
.burger{display:none}

/* ---------- buttons: a dark clipper stroke sweeps across on hover ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-block-size:3.4rem;padding-inline:2rem;background:var(--red);color:var(--g0);border-radius:2px;font-weight:800;font-size:1.02rem;overflow:hidden;isolation:isolate;transition:transform .16s var(--ease-out)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--g8);transform:scaleX(0);transform-origin:100% 50%;transition:transform .35s var(--ease-out)}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.btn:hover::before{transform:scaleX(1);transform-origin:0 50%}}
.btn--sm{min-block-size:2.75rem;padding-inline:1.3rem;font-size:.9rem}

/* ---------- hero: one strong photo, the headline on the empty wall ---------- */
.hero{position:relative;block-size:100svh;min-block-size:36rem;overflow:hidden;background:var(--g8)}
.hero__img{position:absolute;inset:0}
.hero__img img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;object-position:60% 40%}
.hero__img .hero__bw{filter:grayscale(1) contrast(1.05);opacity:0}   /* motion.js shows it, then cuts it away */
.hero__line{position:absolute;inset-inline:0;inset-block-start:0;block-size:3px;background:var(--g0);opacity:0;z-index:1}
.hero__img::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(11,11,11,.55),transparent 22%),linear-gradient(to right,rgba(11,11,11,.82) 0%,rgba(11,11,11,.45) 38%,rgba(11,11,11,0) 60%),linear-gradient(to top,rgba(11,11,11,.5),transparent 30%)}
.hero__h{position:absolute;z-index:2;inset-inline-end:var(--gut);inset-block-end:14svh;max-inline-size:min(48rem,52vw);font:400 clamp(3.4rem,7vw,6.6rem)/1.08 var(--display)}
.hero__h .ln{display:block;overflow:hidden;padding-block:.04em}
.hero__h .ln>span{display:block}
.hero__h .ln:last-child>span{color:var(--g05)}
.hero__credit{position:absolute;z-index:2;inset-inline-start:var(--gut);inset-block-end:1.2rem}

/* ---------- tool films: real slow footage, scrubbed by scroll, framed like cinema ---------- */
.film{position:relative;background:#050505}
.film__stage{position:relative;block-size:100svh;min-block-size:34rem;overflow:hidden}
.film__video{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;background:#050505}
.film__stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(5,5,5,.75),transparent 38%),linear-gradient(to bottom,rgba(5,5,5,.45),transparent 25%)}
.film__bar{position:absolute;z-index:2;inset-inline:0;block-size:9svh;background:#050505}
.film__bar--t{inset-block-start:0;transform-origin:50% 0}
.film__bar--b{inset-block-end:0;transform-origin:50% 100%}
.film__text{position:absolute;z-index:3;inset-inline-start:var(--gut);inset-block-end:calc(9svh + 3rem);display:flex;flex-direction:column;gap:.6rem}
.film__idx{display:flex;align-items:center;gap:.8rem;font:500 .85rem/1 var(--text);color:var(--g05)}
.film__idx::after{content:"";inline-size:3rem;block-size:1px;background:currentColor}
.film__h{font:300 clamp(3rem,7vw,6.4rem)/1.1 var(--text);letter-spacing:-.01em;overflow:hidden}
.film__h span{display:block}
.film__sub{font:300 clamp(1.1rem,1.6vw,1.45rem)/1.6 var(--text);color:#d6d0c6}
.film__end{position:absolute;z-index:3;inset-inline:var(--gut);inset-block-end:calc(9svh + 3rem);text-align:center;font:300 clamp(2.2rem,5vw,4.6rem)/1.2 var(--text);opacity:0}
.film__credit{position:absolute;z-index:3;inset-inline-end:var(--gut);inset-block-start:calc(9svh + .8rem);font-size:.75rem;color:var(--g0);background:rgba(5,5,5,.55);padding:.15rem .55rem}

/* ---------- lookbook: the craft, shown as photos ---------- */
.look{background:var(--g8);padding:clamp(4rem,8vw,7rem) var(--gut)}
.look__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem 3rem;max-inline-size:90rem;margin:0 auto clamp(2.5rem,5vw,4rem)}
.look__head p{color:var(--g05);font-size:.95rem}
.look__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.8rem,1.6vw,1.4rem);max-inline-size:90rem;margin-inline:auto;align-items:start}
.lk{position:relative;margin:0;overflow:hidden;background:var(--g3)}
.lk img{inline-size:100%;block-size:100%;object-fit:cover}
.lk figcaption{position:absolute;inset-inline-start:1.2rem;inset-block-end:1rem;font:400 clamp(1.6rem,2.8vw,2.6rem)/1.2 var(--display);text-shadow:0 2px 18px rgba(0,0,0,.6)}
.lk .credit{position:absolute;inset-inline-end:.8rem;inset-block-start:.6rem;font-size:.75rem;color:var(--g0);background:rgba(11,11,11,.62);padding:.15rem .55rem}
.lk:nth-child(1){grid-column:1 / 8;aspect-ratio:16/10}
.lk:nth-child(2){grid-column:8 / 13;aspect-ratio:4/5;margin-block-start:5rem}
.lk:nth-child(3){grid-column:2 / 6;aspect-ratio:4/5;margin-block-start:-3rem}
.lk:nth-child(4){grid-column:6 / 13;aspect-ratio:16/9}
.lk:nth-child(5){grid-column:1 / 13;aspect-ratio:21/8}

/* ---------- services (guard ۳): horizontal run of full-height photo panels ---------- */
.services{position:relative;background:var(--g3)}
/* default (reduced motion / no JS): a grid of panels. motion.js adds .gs and turns it into a horizontal run */
.svc-intro{display:flex;flex-direction:column;justify-content:center;gap:1.5rem;padding:clamp(5rem,9vw,7rem) var(--gut) 3rem}
.svc-intro p{color:var(--g05);font-size:.95rem;max-inline-size:28rem}
.svc-list{display:grid;grid-template-columns:1fr 1fr}
.svc{position:relative;block-size:80svh;overflow:hidden;border-inline-start:1px solid rgba(236,230,220,.12)}
.svc__img{position:absolute;inset:0}
.svc__img img{inline-size:100%;block-size:100%;object-fit:cover}
@media (min-width:901px){
  .gs .services__pin{block-size:100svh;overflow:hidden}
  .gs .services__track{display:flex;block-size:100%;inline-size:max-content}
  .gs .svc-intro{inline-size:min(42vw,40rem);flex:none;padding-block:0;padding-inline:var(--gut) 4vw}
  .gs .svc-list{display:flex;block-size:100%}
  .gs .svc{flex:none;inline-size:min(74vw,82rem);block-size:100%}
  .gs .svc__img img{inline-size:118%;max-width:none;margin-inline-start:-9%}
}
.svc__img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,11,.85) 0%,rgba(11,11,11,.25) 45%,transparent 100%)}
.svc__body{position:absolute;inset-inline:var(--gut);inset-block-end:calc(var(--band) * 3 + 7svh);display:grid;grid-template-columns:1fr auto;align-items:end;gap:.6rem 2rem}
.svc__t{font:400 clamp(2.8rem,6.4vw,6.2rem)/1.1 var(--display)}
.svc__d{grid-column:1;max-inline-size:34rem;color:#d6d0c6}
.svc--ph .svc__t{font-size:clamp(1.6rem,2.4vw,2.3rem);text-decoration:underline dashed var(--g05);text-underline-offset:.35em}
.svc__p{grid-row:1;grid-column:2;font-weight:800;font-size:1.2rem}
.svc__tag{display:inline-block;vertical-align:middle;margin-inline-start:1rem;font:500 .8rem/1.7 var(--text);border:1px dashed var(--g05);color:var(--g05);padding-inline:.7rem}
.svc .credit{position:absolute;z-index:1;inset-block-end:1rem;inset-inline-end:var(--gut);font-size:.75rem;color:var(--g0);background:rgba(11,11,11,.62);padding:.15rem .55rem}

/* ---------- gallery (guard ۱): the real shop, in colour ---------- */
.gallery{position:relative;background:var(--g2);padding:clamp(6rem,11vw,9rem) var(--gut)}
.gallery__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem 3rem;margin-block-end:clamp(2.5rem,6vw,4.5rem);max-inline-size:84rem;margin-inline:auto}
.gallery__head p{color:#e2dcd2}
.gallery__grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-flow:dense;gap:clamp(1rem,2.2vw,2rem);align-items:start;max-inline-size:84rem;margin-inline:auto}
.g{position:relative;display:block;inline-size:100%;padding:0;border:0;background:var(--g3);overflow:hidden;cursor:zoom-in}
.g img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.g .g__bw{filter:grayscale(1) contrast(1.05);opacity:0}   /* motion.js shows it, then cuts it away */
.g__line{position:absolute;inset-inline:0;inset-block-start:0;block-size:3px;background:var(--g0);opacity:0}
@media (hover:hover) and (pointer:fine){.g:hover img{transform:scale(1.04)}}
.g:nth-child(1){grid-column:1 / 8;aspect-ratio:21/20}   /* matches the 3:4 tile beside it: one baseline */
.g:nth-child(2){grid-column:8 / 13;aspect-ratio:3/4}
.g:nth-child(3){grid-column:1 / 6;aspect-ratio:1}
.g:nth-child(4){grid-column:9 / 13;aspect-ratio:4/5}
.g:nth-child(5){grid-column:6 / 9;aspect-ratio:3/5}

/* ---------- contact (guard ۰): bare light, the call ---------- */
.contact{position:relative;background:var(--g0);color:var(--g8);padding:clamp(6rem,11vw,9rem) var(--gut);overflow:hidden}
.contact__in{max-inline-size:80rem;margin-inline:auto;display:grid;grid-template-columns:1.5fr .5fr;gap:clamp(2rem,6vw,6rem);align-items:end}
.contact__h{font:400 clamp(3rem,8vw,7.4rem)/1.05 var(--display);margin-block-end:2rem}
/* call card: the one big red thing on the page */
.callcard{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem);max-inline-size:44rem;padding:clamp(1.2rem,2.4vw,1.8rem) clamp(1.2rem,2.6vw,2.2rem);background:var(--red);color:var(--g0);border-radius:2px;transition:background-color .2s ease,transform .16s var(--ease-out)}
.callcard:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){.callcard:not([aria-disabled=true]):hover{background:var(--red-hi)}}
.callcard__icon{position:relative;flex:none;display:grid;place-items:center;inline-size:clamp(3.6rem,6vw,5rem);aspect-ratio:1;border-radius:50%;background:var(--g0);color:var(--red)}
.callcard__icon svg{inline-size:45%;fill:currentColor;transform-origin:50% 50%}
.callcard__icon .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--g0);opacity:0}
.callcard.ringing .callcard__icon svg{animation:handset 2.6s var(--ease-out) infinite}
.callcard.ringing .ring{animation:ring 2.6s var(--ease-out) infinite}
.callcard.ringing .ring:nth-child(2){animation-delay:.35s}
@keyframes handset{0%,12%,100%{transform:rotate(0)}2%,6%,10%{transform:rotate(-14deg)}4%,8%{transform:rotate(14deg)}}
@keyframes ring{0%{opacity:.7;transform:scale(1)}60%,100%{opacity:0;transform:scale(1.8)}}
.callcard__txt{display:flex;flex-direction:column;min-inline-size:0}
.callcard__label{font-weight:800;font-size:.95rem}
.phone__n{font:400 clamp(2.2rem,6vw,5rem)/1.15 var(--display);white-space:nowrap}
.callcard[aria-disabled=true]{background:transparent;color:var(--g3);border:2px dashed var(--g1);pointer-events:none}
.callcard[aria-disabled=true] .callcard__icon{background:var(--g3);color:var(--g0)}
.callcard[aria-disabled=true] .phone__n{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.phone__hint{margin-block-start:1rem;font-size:.95rem;color:var(--g2)}
/* how booking works: an actual sequence, so it is numbered */
.how{counter-reset:how;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-block-start:clamp(3rem,6vw,4.5rem);position:relative;padding-block-start:1.6rem;border-block-start:2px solid var(--g8)}
.how li{counter-increment:how;display:flex;flex-direction:column;gap:.3rem}
.how li::before{content:counter(how,persian);font:400 2.6rem/1 var(--display);color:var(--red)}
.how b{font-weight:800;font-size:1.1rem}
.how span{color:var(--g2);font-size:.95rem}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.2rem;margin-block-start:2.5rem}
.info dt{font-weight:800;font-size:.85rem}
.info a{border-block-end:1px solid var(--g1)}
.contact__fig img{inline-size:100%;aspect-ratio:3/4;object-fit:cover}
.contact__fig figcaption{margin-block-start:.7rem;font-size:.88rem;color:var(--g2)}
/* ---------- footer ---------- */
.footer{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1rem 3rem;padding:2.5rem var(--gut) 3rem;background:var(--g8)}
.footer__c{color:var(--g05);font-size:.9rem;text-align:end}
.footer__credit{grid-column:1 / -1;color:var(--g05);font-size:.78rem}

.callbar{display:none}

/* ---------- lightbox ---------- */
.lb{border:0;padding:0;margin:0;inline-size:100vw;block-size:100dvh;max-inline-size:100vw;max-block-size:100dvh;background:rgba(11,11,11,.97);color:var(--g0)}
.lb::backdrop{background:transparent}
.lb[open]{display:grid;place-items:center}
.lb img{max-inline-size:min(90vw,74rem);max-block-size:80dvh;inline-size:auto;block-size:auto}
.lb__cap{position:absolute;inset-inline:1rem;inset-block-end:1.2rem;text-align:center;font-size:.9rem;color:#d6d0c6}
.lb__btn{position:absolute;inline-size:3rem;block-size:3rem;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(236,230,220,.2);background:transparent;color:var(--g0);cursor:pointer;transition:background-color .2s ease,color .2s ease}
.lb__btn svg{inline-size:1.25rem;block-size:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.lb__btn:hover{background:var(--g0);color:var(--g8)}}
.lb__x{inset-block-start:1rem;inset-inline-end:1rem}
.lb__next,.lb__prev{inset-block-start:50%;translate:0 -50%}
.lb__next{inset-inline-end:1rem}
.lb__prev{inset-inline-start:1rem}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{--header:4rem}
  .nav{position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;align-items:flex-start;gap:1rem;padding-inline:var(--gut);background:var(--g8);margin:0;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
  .nav a{font:400 2.6rem/1.4 var(--display)}
  .nav.open{opacity:1;visibility:visible}
  .header{gap:.75rem}
  .burger{display:grid;place-content:center;gap:7px;margin-inline-start:auto;inline-size:2.9rem;block-size:2.9rem;border:1px solid rgba(236,230,220,.25);border-radius:50%;background:transparent;cursor:pointer}
  .burger i{display:block;inline-size:18px;block-size:1.5px;background:var(--g0);transition:transform .25s var(--ease-out)}
  .burger[aria-expanded=true] i:first-child{transform:translateY(4.25px) rotate(45deg)}
  .burger[aria-expanded=true] i:last-child{transform:translateY(-4.25px) rotate(-45deg)}
  .header.menu-open{background:var(--g8)}
  .hero__img img{object-position:66% 40%}
  .hero__img::after{background:linear-gradient(to bottom,rgba(11,11,11,.55),transparent 25%),linear-gradient(to top,rgba(11,11,11,.85) 0%,rgba(11,11,11,.3) 50%,transparent 75%)}
  .hero__h{inset-inline:var(--gut);inset-block-end:4.5rem;max-inline-size:none;font-size:clamp(3rem,12.5vw,4.4rem)}
  .hero__credit{inset-block-end:1rem}
  .header .btn{display:inline-flex;margin-inline-start:auto;min-block-size:2.5rem;padding-inline:1rem;font-size:.85rem}
  .header .btn + .burger{margin-inline-start:.4rem}
  /* phones: no pin, no scrub — the whole widescreen shot in a cinema frame, looping while on screen */
  .film__stage{block-size:auto;min-block-size:0;display:flex;flex-direction:column;gap:1.6rem;padding:4.5rem 0 4rem}
  .film__stage::after{display:none}
  .film__video{position:relative;inset:auto;inline-size:100%;block-size:auto;aspect-ratio:16/9;object-fit:cover;order:1}
  .film__bar,.film__end{display:none}
  .film__text{position:static;order:2;padding-inline:var(--gut)}
  .film__h{font-size:clamp(2.4rem,11vw,3.4rem)}
  .film__credit{position:static;order:3;align-self:flex-start;margin-inline:var(--gut)}
  .look__grid{grid-template-columns:repeat(2,1fr)}
  .lk:nth-child(n){grid-column:auto;margin-block-start:0;aspect-ratio:4/5}
  .lk:nth-child(1),.lk:nth-child(4),.lk:nth-child(5){grid-column:1 / -1;aspect-ratio:4/3}
  .svc-list{display:block}
  .svc{block-size:82svh;border:0;border-block-start:1px solid rgba(236,230,220,.12)}
  .svc__body{grid-template-columns:1fr auto}
  .gallery__grid{grid-template-columns:repeat(2,1fr);grid-auto-flow:dense}
  .g:nth-child(n){grid-column:auto;margin-block-start:0;aspect-ratio:3/4}
  .g:nth-child(1),.g:nth-child(3),.g:nth-child(5){grid-column:1 / -1;aspect-ratio:4/3}
  .contact__in{grid-template-columns:1fr}
  .contact__fig{max-inline-size:15rem}
  .how{grid-template-columns:1fr;gap:1.2rem}
  .how li{display:grid;grid-template-columns:2.6rem 1fr;column-gap:.8rem}
  .how li::before{grid-row:span 2}
  .footer{grid-template-columns:1fr;padding-block-end:6rem}
  .footer__c{text-align:start}
  .callbar{display:flex;position:fixed;inset-inline:0;inset-block-end:0;z-index:50;justify-content:center;align-items:center;min-block-size:3.6rem;padding-block-end:env(safe-area-inset-bottom);background:var(--red);color:var(--g0);font-weight:800}
  .callbar.is-pending{display:none}
}

@media (prefers-reduced-motion:reduce){
  .film__end{display:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  .g .g__bw{display:none}
}
html:not(.gs) .film__end{display:none}