/* ============================================================
   0. TOKENS
   ============================================================ */
:root{
  --black:#0B0B0D;            /* ink */
  --white:#F2EFE9;            /* bone */
  --grey:#77736D;             /* bone-3 — secondary text */
  --grey-2:#B5B1AA;           /* bone-2 */
  --accent:#C86A78;           /* oxblood — the only accent */
  --glass:rgba(242,239,233,.08);
  --glass-line:rgba(242,239,233,.14);
  --line:rgba(242,239,233,.55);

  --display:"Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --body:"Manrope", "Helvetica Neue", Arial, sans-serif;
  --ui:"Inter", "Helvetica Neue", Arial, sans-serif;
  --fa-display:"Lalezar", "Vazirmatn", sans-serif;
  --fa-body:"Vazirmatn", Tahoma, sans-serif;
  --logo:"Bodoni Moda", Didot, Georgia, serif;

  --ease:cubic-bezier(.76,0,.24,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}
html{ font-size:.8333vw; color-scheme:dark; }
@media (max-width:767px){ html{ font-size:clamp(14px, 4.26vw, 17px); } }

/* ============================================================
   1. BASE
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; background:var(--black); color:var(--white); }
body{ font-family:var(--body); font-size:1rem; line-height:1; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:clip; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
img,video,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3,h4,p,figure{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:1px solid var(--accent); outline-offset:3px; }

/* type scale — mirrors the reference's classes, in rem */
.h1{ font-family:var(--display); font-weight:400; font-size:15.625rem; line-height:.8; }
.h2{ font-family:var(--display); font-weight:400; font-size:4rem; line-height:.9; text-transform:uppercase; }
.h3{ font-family:var(--display); font-weight:400; font-size:2.5rem; line-height:.9; text-transform:uppercase; }
.h4{ font-family:var(--display); font-weight:400; font-size:2rem; line-height:.9; text-transform:uppercase; }
.heading-200{ font-family:var(--display); font-weight:400; font-size:12.5rem; line-height:1; }
.heading-32{ font-size:2rem; line-height:.8; letter-spacing:-.05em; }
.text-30{ font-size:1.875rem; font-weight:300; line-height:.9; }
.text-24{ font-size:1.5rem; font-weight:300; line-height:.9; }
.text-20{ font-size:1.25rem; }
.text-16{ font-size:1rem; }
.text-14{ font-size:.875rem; }
.grey{ color:var(--grey); }
.upper{ text-transform:uppercase; }
.justify{ text-align:justify; line-height:1; }
.stretch{ text-align-last:justify; }
.ui{ font-family:var(--ui); }
@media (max-width:767px){
  .h1{ font-size:5rem; } .h2{ font-size:2.25rem; } .h3{ font-size:2rem; } .h4{ font-size:1.75rem; }
  .heading-200{ font-size:6.875rem; } .heading-32{ font-size:1.75rem; } .text-24{ font-size:1.125rem; } .text-30{ font-size:1.25rem; }
}

/* Farsi faces */
html[lang="fa"] body{ font-family:var(--fa-body); }
html[lang="fa"] :is(.h1,.h2,.h3,.h4,.heading-200,.display,.word,.f-title,.logo-t,.stat .num,.p-stat .n){ font-family:var(--fa-display); text-transform:none; letter-spacing:0; line-height:1.1; }
html[lang="fa"] .ui, html[lang="fa"] .ui *, html[lang="fa"] .btn, html[lang="fa"] .arrow-link, html[lang="fa"] .play, html[lang="fa"] .keep, html[lang="fa"] .f-link, html[lang="fa"] .f-mail, html[lang="fa"] .f-social-list li{ font-family:var(--fa-body); }
html[lang="fa"] .stretch{ text-align-last:auto; }

html[dir="rtl"] .mirror{ transform:scaleX(-1); }
.skip{ position:absolute; inset-inline-start:-999px; top:0; }
.skip:focus{ inset-inline-start:1rem; top:1rem; z-index:5000; background:var(--white); color:var(--black); padding:.5rem 1rem; }

/* ============================================================
   3. MEDIA PLACEHOLDERS  (.ph)
   ============================================================ */
.ph{
  position:relative; overflow:hidden; width:100%; border-radius:1px;
  background:repeating-linear-gradient(135deg, transparent 0 14px, rgba(242,239,233,.035) 14px 15px), #141416;
  outline:1px dashed rgba(242,239,233,.26); outline-offset:-1px;
}
.ph::before{ content:""; position:absolute; inset:0; margin:auto; width:2.4rem; height:2.4rem; border:1px solid rgba(242,239,233,.35); border-radius:50%; background:center / 40% no-repeat; }
.ph[data-kind="video"]::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 5v14l11-7z' fill='%23F2EFE9' opacity='.8'/></svg>"); }
.ph[data-kind="image"]::before{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2EFE9' stroke-width='1.4' opacity='.8'><rect x='3' y='5' width='18' height='14' rx='1'/><path d='M3 16l5-5 4 4 3-3 6 6'/><circle cx='16' cy='9' r='1.5'/></svg>"); }
.ph[data-kind="logo"]::before{ width:1.6rem; height:1.6rem; border-radius:2px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2EFE9' stroke-width='1.4' opacity='.7'><path d='M4 18h16M6 18l6-12 6 12'/></svg>"); }
.ph-label{ position:absolute; inset-inline-start:.6rem; bottom:.5rem; z-index:1; font-family:var(--ui); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--grey-2); pointer-events:none; line-height:1.3; }
.ph.fill{ position:absolute; inset:0; height:100%; border-radius:0; }
.ph.r-16x9{ aspect-ratio:16/9; } .ph.r-3x2{ aspect-ratio:3/2; } .ph.r-21x9{ aspect-ratio:21/9; } .ph.r-9x16{ aspect-ratio:9/16; }
.ph > video, .ph > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ph:has(> video), .ph:has(> img){ background:#141416; outline:0; }
.ph:has(> video)::before, .ph:has(> img)::before, .ph:has(> video) .ph-label, .ph:has(> img) .ph-label{ display:none; }

/* ============================================================
   4. LAYOUT PRIMITIVES
   ============================================================ */
.container{ width:115rem; max-width:calc(100% - 2rem); margin-inline:auto; position:relative; z-index:2; }
.grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0; align-items:start; width:100%; }
.section{ position:relative; padding-block:6.25rem; }
.span-2{ grid-column:span 2; }
.col-2{ grid-column:2; } .col-3{ grid-column:3; } .col-4{ grid-column:4; }
.brk{ display:inline-flex; align-items:center; gap:.75em; }
.brk::before{ content:"["; } .brk::after{ content:"]"; }
.brk.open::after{ content:none; }
.brk.right::before{ content:none; }
.brk.multi{ display:block; }
.brk.multi::before{ margin-inline-end:.75em; }
.brk.multi::after{ margin-inline-start:.75em; }
.dashed{ border:0; border-top:1px dashed var(--white); margin:0; }
.center{ text-align:center; }
.page-wrapper{ position:relative; z-index:3; background:var(--black); }
.bg-overlay{ position:absolute; inset:0; background:rgba(11,11,13,.25); pointer-events:none; }
@media (max-width:767px){
  .section{ padding-block:3.125rem; }
  .grid{ display:flex; flex-direction:column; gap:1.5rem; }
  .span-2, .col-2, .col-3, .col-4{ grid-column:auto; }
}

/* viewfinder corners (media frames and buttons) */
.frame{ position:absolute; inset:.625rem; pointer-events:none; z-index:3; }
.frame i{ position:absolute; width:.625rem; height:.625rem; border:0 solid var(--white); }
.frame i:nth-child(1){ top:0; left:0; border-top-width:1px; border-left-width:1px; }
.frame i:nth-child(2){ top:0; right:0; border-top-width:1px; border-right-width:1px; }
.frame i:nth-child(3){ bottom:0; left:0; border-bottom-width:1px; border-left-width:1px; }
.frame i:nth-child(4){ bottom:0; right:0; border-bottom-width:1px; border-right-width:1px; }
.frame .cross{ position:absolute; inset:0; margin:auto; width:2.5rem; height:2.5rem; border:0; }
.frame .cross::before, .frame .cross::after{ content:""; position:absolute; background:var(--white); opacity:.9; }
.frame .cross::before{ left:0; right:0; top:50%; height:1px; }
.frame .cross::after{ top:0; bottom:0; left:50%; width:1px; }

/* text-roll (links & buttons): the child is cloned by JS, the box shows one line */
.roll{ display:inline-flex; flex-direction:column; height:1em; overflow:hidden; line-height:1; vertical-align:top; }
.roll > *{ display:block; transition:transform .6s var(--ease); }
a:hover .roll > *, button:hover .roll > *{ transform:translateY(-100%); }

/* CTA button component */
.btn{ display:inline-flex; align-items:center; gap:.25rem; height:2.25rem; font-family:var(--ui); font-size:1rem; font-weight:500; text-transform:uppercase; letter-spacing:0; color:var(--white); }
.btn-body{ position:relative; display:flex; align-items:center; justify-content:center; height:100%; padding:0 1.75rem; background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.btn-body .frame{ inset:-1px; }
.btn-body .frame i{ width:.5rem; height:.5rem; }
.btn-arrow{ position:relative; overflow:hidden; display:grid; place-items:center; width:2.25rem; height:100%; background:var(--accent); color:var(--black); }
.btn-arrow svg{ width:1.25rem; height:1.25rem; transition:transform .5s var(--ease); }
.btn-arrow::after{ content:""; position:absolute; inset-inline-start:-100%; top:50%; width:100%; height:1px; background:var(--black); opacity:.6; transition:inset-inline-start .5s var(--ease); }
.btn:hover .btn-arrow svg{ transform:translate(20%, -20%); }
.btn:hover .btn-arrow::after{ inset-inline-start:100%; }
.btn.big{ height:6.25rem; font-size:1.875rem; font-weight:400; }
.btn.big .btn-body{ padding:0 5rem; }
.btn.big .btn-arrow{ width:6.25rem; }
.btn.big .btn-arrow svg{ width:1.875rem; height:1.875rem; }
.btn.mid{ height:3.75rem; font-size:1.25rem; }
.btn.mid .btn-body{ padding:0 3.75rem; }
.btn.mid .btn-arrow{ width:3.75rem; }
html[lang="fa"] .btn, html[lang="fa"] .nav-link, html[lang="fa"] .menu-list a, html[lang="fa"] .process-item .sub, html[lang="fa"] .award .name, html[lang="fa"] .award .proj, html[lang="fa"] .upper{ text-transform:none; }
@media (max-width:767px){ .btn{ height:2.875rem; } .btn-arrow{ width:2.875rem; } .btn.big{ height:4rem; font-size:1.25rem; } .btn.big .btn-body{ padding:0 2rem; } .btn.big .btn-arrow{ width:4rem; } }

/* arrow link ("scroll to explore") */
.arrow-link{ display:inline-flex; align-items:center; gap:.75rem; font-family:var(--ui); font-size:1.25rem; font-weight:500; }
.arrow-link .icon{ width:2.5rem; height:2.5rem; display:grid; place-items:end; overflow:hidden; }
.arrow-link .icon svg{ width:1.25rem; height:1.25rem; transition:transform .5s var(--ease); }
.arrow-link:hover .icon svg{ transform:translate(30%, 30%); }

/* letter / word typing */
.type .w{ display:inline-block; white-space:nowrap; }
.type .ch{ display:inline-block; opacity:0; transform:translateY(.15em); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), color .4s; transition-delay:calc(var(--i) * 28ms); }
.type.in .ch{ opacity:1; transform:none; }
.type .wch{ display:inline-block; opacity:0; transition:opacity .6s var(--ease-out); transition-delay:calc(var(--i) * 90ms); }
.type.in .wch{ opacity:1; }
/* scrubbed variant: JS sets .on / .trail per letter, no transition delays */
.scrub .ch, .scrub .wch{ transition:opacity .25s, color .35s, transform .25s; transition-delay:0s !important; color:var(--grey); }
.scrub .ch.on, .scrub .wch.on{ opacity:1; transform:none; color:var(--white); }
.scrub .ch.trail, .scrub .wch.trail{ color:var(--grey); }
/* line reveal for paragraphs */
.lines{ opacity:0; transform:translateY(1rem); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.lines.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .type .ch, .type .wch, .lines, .scrub .ch, .scrub .wch{ opacity:1 !important; transform:none !important; transition:none !important; color:inherit; }
}

/* ============================================================
   5. PRELOADER
   ============================================================ */
.loader{ position:fixed; inset:0; z-index:3999; background:var(--black); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.5rem; transition:transform 1s var(--ease), visibility 0s 1s; }
.loader.done{ transform:translateY(-100%); visibility:hidden; }
.loader-mark{ width:5rem; height:5rem; border-radius:50%; border:1px solid var(--glass-line); display:grid; place-items:center; font-family:var(--logo); font-style:italic; font-size:2.8rem; color:var(--accent); opacity:0; transition:opacity 1s; }
.loader.s1 .loader-mark{ opacity:1; }
.loader-title{ font-family:var(--logo); font-weight:500; font-size:2.75rem; letter-spacing:.42em; text-indent:.42em; text-transform:uppercase; display:flex; }
.loader-title span{ opacity:0; transition:opacity .35s; }
.loader-title span.c{ font-style:italic; color:var(--accent); }
.loader-sub{ font-size:1.875rem; font-weight:300; color:var(--grey-2); display:flex; letter-spacing:.06em; }
.loader-sub span{ opacity:0; transition:opacity .3s; }
.loader-bottom{ display:flex; flex-direction:column; align-items:center; gap:1rem; margin-top:1rem; }
.loader-num{ font-family:var(--ui); font-size:.875rem; font-weight:600; color:var(--grey); font-variant-numeric:tabular-nums; }
.loader-track{ width:4rem; height:1px; background:var(--glass-line); overflow:hidden; }
.loader-track i{ display:block; height:100%; width:0; background:var(--white); transition:width .2s linear; }
@media (max-width:767px){ .loader-title{ font-size:1.4rem; letter-spacing:.3em; } .loader-sub{ font-size:1rem; } }

/* ============================================================
   6. NAV
   ============================================================ */
.nav{ position:fixed; inset:0 0 auto; z-index:1999; padding:calc(1rem + env(safe-area-inset-top, 0px)) 0 1rem; }
.nav-inner{ display:flex; align-items:center; gap:2rem; }
.brand{ display:flex; align-items:center; gap:.75rem; flex:none; }
.brand-mark{ width:3.75rem; height:3.75rem; border-radius:50%; border:1px solid rgba(242,239,233,.35); display:grid; place-items:center; font-family:var(--logo); font-style:italic; font-weight:500; font-size:2rem; color:var(--accent); line-height:1; }
.brand-word{ font-family:var(--logo); font-weight:500; letter-spacing:.06em; font-size:1rem; }
.brand-word i{ font-style:italic; color:var(--accent); }
.nav-links{ display:flex; align-items:center; gap:.75rem; margin-inline-start:auto; }
.nav-link{ display:inline-flex; align-items:center; gap:.25rem; font-size:1rem; font-weight:500; text-transform:uppercase; }
.nav-link .dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--accent); opacity:0; transform:scale(.4); transition:opacity .4s, transform .4s var(--ease-out); }
.nav-link:hover .dot{ opacity:1; transform:none; }
.nav-cta{ flex:none; }
.menu-btn{ display:none; margin-inline-start:auto; }
@media (max-width:767px){
  .nav{ padding-bottom:0; }
  .brand-mark{ width:2.25rem; height:2.25rem; font-size:1.2rem; }
  .brand-word{ display:none; }
  .nav-links, .nav-cta{ display:none; }
  .menu-btn{ display:inline-flex; }
}
/* mobile menu overlay */
.menu{ position:fixed; inset:0; z-index:2999; background:var(--black); display:flex; flex-direction:column; padding:calc(1rem + env(safe-area-inset-top, 0px)) 0 2rem; opacity:0; visibility:hidden; transition:opacity .4s, visibility 0s .4s; }
.menu.open{ opacity:1; visibility:visible; transition-delay:0s; }
.menu-head{ display:flex; align-items:center; justify-content:space-between; }
.menu-list{ margin-top:3rem; display:flex; flex-direction:column; gap:1.25rem; }
.menu-list a{ font-family:var(--display); font-size:2.25rem; text-transform:uppercase; line-height:1; display:inline-flex; gap:.5em; }
html[lang="fa"] .menu-list a{ font-family:var(--fa-display); }
.menu-foot{ margin-top:auto; display:flex; flex-direction:column; gap:1.5rem; }
.menu-foot h3{ color:var(--accent); font-size:1.5rem; }

/* ============================================================
   7. HERO  (sticky under the statement section)
   ============================================================ */
.hero{ position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:8.125rem; z-index:1; }
.hero-bg{ position:absolute; inset:0; overflow:hidden; }
.hero-bg .ph-label{ top:calc(6rem + env(safe-area-inset-top, 0px)); bottom:auto; inset-inline-start:2.5rem; }
.hero-block{ display:flex; flex-direction:column; gap:2.5rem; }
.hero-sub{ display:flex; flex-direction:column; gap:.75rem; }
.hero-sub .brk{ font-size:1.25rem; }
.hero-block > *{ opacity:0; transform:translateY(1.5rem); transition:opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out); }
.hero.in .hero-block > *{ opacity:1; transform:none; }
.hero.in .hero-block > *:nth-child(2){ transition-delay:.15s; }
.player{ position:absolute; inset:auto 2.5rem 2rem; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.play{ display:flex; align-items:center; gap:1.25rem; font-family:var(--ui); font-size:1rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.play svg{ width:.75rem; height:.75rem; }
.timer{ font-family:var(--ui); font-size:.875rem; font-weight:600; font-variant-numeric:tabular-nums; }
.track{ position:relative; flex:1; height:1.25rem; margin-inline-start:13.25rem; cursor:pointer;
  background:
    repeating-linear-gradient(to right, rgba(242,239,233,.35) 0 1px, transparent 1px 8px) 0 100% / 100% 45% no-repeat,
    repeating-linear-gradient(to right, rgba(242,239,233,.8) 0 1px, transparent 1px 48px) 0 100% / 100% 100% no-repeat; }
.playhead{ position:absolute; bottom:0; inset-inline-start:0; width:.125rem; height:2.5rem; background:var(--white); }
.scroll-badge{ display:none; }
@media (max-width:767px){
  .hero{ padding-bottom:1rem; }
  .hero-sub .arrow-link{ display:none; }
  .player{ inset:auto 1rem 1rem; }
  .track{ margin-inline-start:1rem; }
}

/* ============================================================
   8. STATEMENT  (pinned letter reveal)
   ============================================================ */
.statement{ padding-top:25rem; padding-bottom:6.25rem; z-index:2; background:linear-gradient(to bottom, rgba(11,11,13,0) 0, rgba(11,11,13,.85) 34rem, var(--black) 52rem); }
.st-block{ position:relative; display:flex; flex-direction:column; }
.st-sticky{ position:sticky; top:calc(100svh - 48rem); }
.st-phrase{ grid-column:span 2; text-transform:uppercase; }
.st-phrase.b{ grid-column:3 / span 2; text-align:end; }
.st-phrase .t > span{ display:block; }
.st-aside{ grid-column:4; display:flex; flex-direction:column; gap:.75rem; }
.st-aside .brk{ font-size:1.25rem; text-transform:uppercase; }
.st-next{ margin-top:-1rem; }
.st-last{ margin-top:6rem; }
.st-copy{ grid-column:2; color:var(--grey); font-weight:300; }
.st-copy p + p{ margin-top:1.5rem; }
.st-copy strong{ color:rgba(217,217,217,.8); font-weight:500; }
@media (max-width:767px){
  .statement{ padding-top:6rem; }
  .st-sticky{ position:static; }
  .st-phrase.b{ text-align:end; }
  .st-aside{ display:none; }
  .st-last{ margin-top:2rem; }
}

/* ============================================================
   9. PROJECTS
   ============================================================ */
.title-block{ display:flex; flex-direction:column; gap:2rem; }
.title-block .text-24{ max-width:28rem; }
.hp-block{ margin-top:5rem; display:flex; flex-direction:column; gap:5rem; }
.project{ position:relative; display:grid; grid-template-columns:1fr 55rem 1fr; gap:1.25rem; padding-top:2.5rem; color:inherit; opacity:0; transform:translateY(2rem); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out); }
.project.in{ opacity:1; transform:none; }
.project .rule{ position:absolute; top:0; inset-inline-start:0; width:0; height:1px; border-top:1px dashed var(--white); transition:width 1.4s var(--ease); }
.project.in .rule{ width:100%; }
.p-first{ display:flex; gap:4.5rem; align-items:flex-start; }
.p-first .brk{ font-size:1.875rem; }
.p-gallery{ display:flex; flex-direction:column; gap:1.25rem; width:11rem; flex:none; }
.p-gallery .ph{ aspect-ratio:16/9; }
.p-gallery .ph::before{ width:1.2rem; height:1.2rem; }
.p-gallery .ph-label{ display:none; }
.p-video{ position:relative; height:35rem; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.p-video .ph{ position:absolute; inset:0; height:100%; }
.p-info{ position:absolute; z-index:4; top:1.25rem; inset-inline:1.25rem; display:flex; align-items:flex-start; border-bottom:1px solid var(--white); transition:opacity .5s; }
.p-stat{ display:flex; gap:.75rem; align-items:flex-start; border-inline-end:1px solid var(--white); padding-inline-end:1.25rem; padding-bottom:.625rem; }
.p-stat .n{ font-family:var(--display); font-size:6.25rem; line-height:.9; letter-spacing:-.03em; }
.p-stat .l{ font-size:1.5rem; font-weight:300; max-width:6em; line-height:.95; }
.info-desc{ margin-inline-start:auto; display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; text-align:end; }
.info-desc .brk{ font-size:1.875rem; font-weight:400; }
.info-desc .kind{ font-size:1.25rem; }
.p-play{ position:absolute; z-index:5; left:50%; top:50%; transform:translate(-50%, 1.5rem); opacity:0; transition:opacity .5s, transform .5s var(--ease-out); }
.project:hover .p-info{ opacity:0; }
.project:hover .p-play{ opacity:1; transform:translate(-50%, .5rem); }
.p-title{ display:flex; flex-direction:column; gap:.5rem; height:100%; }
.p-title h3{ color:var(--accent); }
.p-title .kind{ font-size:1.5rem; font-weight:300; }
.p-desc{ margin-top:auto; color:var(--grey); font-size:1.5rem; font-weight:300; line-height:1.05; transition:color .5s; }
.p-desc strong{ font-weight:700; }
.project:hover .p-desc{ color:var(--grey-2); }
.hp-cta{ display:flex; align-items:center; justify-content:center; gap:1.25rem; padding-top:3rem; font-size:1.25rem; }
@media (max-width:1023px){
  .project{ grid-template-columns:3.125rem 1fr; gap:0 1.25rem; row-gap:1.5rem; padding-top:.75rem; }
  .p-first{ gap:1rem; }
  .p-gallery{ display:none; }
  .p-video{ grid-column:2; height:auto; aspect-ratio:16/9; }
  .p-title{ grid-column:2; }
  .p-info{ top:.75rem; inset-inline:.75rem; }
  .p-stat .n{ font-size:2.5rem; }
  .p-stat .l{ font-size:.875rem; }
  .info-desc .brk{ font-size:1rem; }
  .info-desc .kind{ font-size:.75rem; }
  .p-desc{ margin-top:1rem; }
}

/* ============================================================
   10. PROCESS  (focus stack)
   ============================================================ */
.process-list{ display:flex; flex-direction:column; align-items:center; gap:1.5rem; position:relative; margin-top:5rem; }
.process-item{ position:relative; color:inherit; display:flex; flex-direction:column; align-items:center; opacity:.7; filter:blur(6px); color:var(--grey); transition:opacity .6s, filter .6s, color .6s; }
.process-item .top{ display:flex; gap:.25rem; align-items:flex-start; }
.process-item .idx{ font-size:2rem; line-height:.8; letter-spacing:-.05em; color:var(--accent); opacity:0; transition:opacity .5s; margin-top:.5rem; }
.process-item .word{ font-family:var(--display); font-size:15.625rem; line-height:.8; text-transform:uppercase; }
html[lang="fa"] .process-item .word{ line-height:1.05; }
.process-item .sub{ align-self:flex-end; font-size:.875rem; text-transform:uppercase; text-align:end; max-width:34rem; opacity:0; transition:opacity .5s; color:var(--grey); }
.process-item.on{ opacity:1; filter:none; color:var(--white); }
.process-item.on .idx, .process-item.on .sub{ opacity:1; }
.process-close{ position:absolute; left:0; right:0; top:50%; text-align:center; font-size:1.875rem; font-weight:300; color:var(--grey); opacity:0; transition:opacity .8s; pointer-events:none; }
.process-list.done .process-close{ opacity:1; }
@media (max-width:767px){
  .process-item .word{ font-size:4.5rem; }
  .process-item .idx{ font-size:1.25rem; }
  .process-close{ position:static; font-size:1.125rem; margin-top:2rem; }
}

/* ============================================================
   11. NUMBERS
   ============================================================ */
.stats{ margin-top:5rem; }
.stat{ position:relative; display:flex; flex-direction:column; gap:10rem; padding-top:12.5rem; padding-inline-start:2.5rem; opacity:0; transition:opacity 1s var(--ease-out); }
.stat.in{ opacity:1; }
.stat.high{ padding-top:20rem; }
.stat::before{ content:""; position:absolute; inset-inline-start:0; top:12.5rem; height:0; width:1px; background:var(--glass-line); transition:height 1.4s var(--ease); }
.stat.high::before{ top:20rem; }
.stat.in::before{ height:calc(100% - 12.5rem); }
.stat.high.in::before{ height:calc(100% - 20rem); }
.stat .tag{ position:relative; font-size:1.875rem; font-weight:300; color:var(--grey); }
.stat .tag::after{ content:""; position:absolute; left:0; top:-1rem; width:0; height:1px; background:var(--glass-line); transition:width 1.4s var(--ease) .3s; }
.stat.in .tag::after{ width:calc(100% + 2.5rem); }
.stat .num{ font-family:var(--display); font-size:12.5rem; line-height:1; font-variant-numeric:tabular-nums; }
.stat .lbl{ margin-top:2.5rem; color:var(--grey); }
@media (max-width:767px){
  .stat, .stat.high{ padding:0 35% 0 0; gap:2.5rem; }
  .stat::before, .stat .tag::after{ display:none; }
  .stat .num{ font-size:6.875rem; }
  .stat .lbl{ margin-top:0; }
}

/* ============================================================
   12. RECOGNITION
   ============================================================ */
.awards{ padding-top:12.5rem; }
.awards-wrap{ display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.awards-grid{ display:grid; grid-template-columns:23.75rem 1fr 23.75rem; gap:2.5rem; align-items:center; width:100%; margin-top:2.5rem; }
.tile{ position:relative; height:15rem; background:var(--glass); display:flex; align-items:center; justify-content:center; }
.tile .ph{ position:absolute; inset:0; height:100%; background:transparent; outline:0; }
.awards-list{ display:flex; flex-direction:column; align-items:center; gap:3.75rem; text-align:center; }
.award{ display:flex; flex-direction:column; align-items:center; gap:1rem; }
.award .name{ font-size:1.5rem; font-weight:300; text-transform:uppercase; }
.award .proj{ font-size:1.25rem; text-transform:uppercase; }
.award .brk{ font-size:1.125rem; }
.award .sub{ display:flex; flex-direction:column; align-items:center; gap:.25rem; }
@media (max-width:767px){
  .awards{ padding-top:3.75rem; }
  .awards-grid{ display:flex; flex-direction:column; }
  .tile{ display:none; }
}

/* ============================================================
   13. PARTNER MARQUEE
   ============================================================ */
.partners{ overflow:hidden; }
.marquee{ display:flex; gap:1.25rem; width:max-content; animation:marquee 60s linear infinite; }
.marquee .logo{ position:relative; width:18rem; height:10rem; background:var(--glass); flex:none; }
.marquee .logo .ph{ position:absolute; inset:0; height:100%; background:transparent; outline:0; }
.marquee .logo .ph-label{ display:none; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
html[dir="rtl"] .marquee{ animation-direction:reverse; }
@media (prefers-reduced-motion:reduce){ .marquee{ animation:none; } }

/* ============================================================
   14. MOVIE  (600vh pinned sequence)
   ============================================================ */
.movie{ padding:0; }
.movie-outer{ position:relative; height:600vh; overflow:clip; }
.camera{ position:sticky; top:0; height:100svh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.movie-canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none; }
.panels{ position:absolute; inset:0; display:flex; align-items:center; gap:1.25rem; padding-inline:0; filter:brightness(1); transition:filter .2s linear; }
.panel{ position:relative; flex:none; overflow:hidden; will-change:transform; }
.panel .ph{ position:absolute; inset:0; height:100%; border-radius:0; }
.panel .ph.b{ opacity:0; transition:opacity .2s linear; }
.panel:nth-child(1){ width:20%; height:74vh; margin-top:22vh; }
.panel:nth-child(2){ width:18%; height:100vh; }
.panel:nth-child(3){ width:23%; height:88vh; margin-top:-4vh; }
.panel:nth-child(4){ width:16%; height:48vh; margin-top:-20vh; }
.grain{ position:absolute; inset:-50%; pointer-events:none; opacity:.12; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation:grain 1.2s steps(6) infinite; }
@keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-8%,4%)} 40%{transform:translate(6%,-7%)} 60%{transform:translate(-4%,8%)} 80%{transform:translate(7%,2%)} 100%{transform:translate(0,0)} }
.movie-word{ position:absolute; z-index:150; left:50%; top:50%; transform:translate(-50%,-50%); direction:ltr; display:flex; align-items:baseline; font-family:var(--body); font-weight:700; font-size:6.5rem; line-height:1; color:var(--white); opacity:0; white-space:nowrap; }
.movie-word > span{ display:inline-block; }
.movie-word .shared{ color:var(--white); transition:color .4s; }
.movie-word .dot{ opacity:0; transition:opacity .4s; }
.movie-word[data-merged] .shared{ color:var(--accent); }
.movie-word[data-merged] .dot{ opacity:1; }
.movie-grid{ position:absolute; inset:0; z-index:151; height:100%; pointer-events:none; }
.movie-grid .grid{ height:100%; padding-block:calc(6rem + env(safe-area-inset-top, 0px)) 6rem; grid-template-rows:auto 1fr; }
.movie-grid .h3{ opacity:0; transform:translateY(1rem); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.movie-grid .h3.b{ grid-column:4; grid-row:2; align-self:end; }
.movie-grid.in .h3{ opacity:1; transform:none; }
.keep{ position:absolute; z-index:152; inset-inline-end:2.5rem; bottom:2rem; display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .75rem; border:1px solid var(--white); font-family:var(--ui); font-size:1rem; font-weight:500; opacity:.9; }
.keep svg{ width:1rem; height:1rem; }
@media (max-width:767px){
  .movie-outer{ height:400vh; }
  .panels{ gap:.5rem; }
  .panel:nth-child(1){ width:34%; height:60vh; margin-top:14vh; }
  .panel:nth-child(2){ width:30%; height:80vh; }
  .panel:nth-child(3){ width:36%; height:66vh; margin-top:-6vh; }
  .panel:nth-child(4){ display:none; }
  .movie-word{ font-size:2.4rem; }
  .movie-grid .grid{ display:grid; grid-template-columns:1fr; grid-template-rows:auto 1fr; padding:5rem 1rem 3rem; }
  .movie-grid .h3.b{ grid-column:1; }
  .keep{ inset-inline-end:1rem; bottom:1rem; }
}

/* ============================================================
   15. MANIFESTO
   ============================================================ */
.mt-30{ margin-top:1.875rem; } .mt-100{ margin-top:6.25rem; }
.manifesto .line-a{ grid-column:1; color:var(--grey); font-weight:300; }
.manifesto .line-b{ grid-column:3; }
.manifesto .line-c{ grid-column:4; }
@media (max-width:767px){ .mt-100{ margin-top:2rem; } }

/* ============================================================
   16. CTA
   ============================================================ */
.cta-section{ padding:15rem 0 9.375rem; }
.cta-centered{ display:flex; flex-direction:column; align-items:center; gap:1.5rem; text-align:center; }
.cta-word{ text-transform:uppercase; position:relative; }
.cta-word .caret{ display:inline-block; width:.06em; height:.8em; background:var(--white); vertical-align:baseline; margin-inline-start:.06em; animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.cta-centered .btn{ margin-top:1rem; }
@media (max-width:767px){ .cta-section{ padding:6rem 0 4rem; } }

/* ============================================================
   17. FOOTER
   ============================================================ */
.footer{ padding:12.5rem 0 2.5rem; }
.f-col{ display:flex; flex-direction:column; gap:3.125rem; }
.f-title{ font-family:var(--display); font-size:2.25rem; line-height:.9; text-transform:uppercase; color:var(--accent); }
.f-links{ display:flex; flex-direction:column; gap:.5rem; }
.f-link{ display:inline-flex; align-items:center; gap:.25rem; font-family:var(--ui); font-size:1.25rem; line-height:1.2; }
.f-link .dot{ order:2; width:.5rem; height:.5rem; border-radius:50%; background:var(--accent); opacity:0; transition:opacity .4s; }
.f-link:hover .dot{ opacity:1; }
.socials{ display:flex; gap:1.5rem; }
.socials a{ width:1.875rem; height:1.875rem; border:1px solid var(--grey); border-radius:2px; display:grid; place-items:center; color:var(--grey); transition:color .3s, border-color .3s; }
.socials a:hover{ color:var(--white); border-color:var(--white); }
.f-sub{ font-size:1.25rem; color:var(--grey); }
.f-group{ display:flex; flex-direction:column; gap:1rem; }
.f-mail{ position:relative; display:inline-flex; align-items:center; gap:1rem; font-family:var(--ui); font-size:1.5rem; color:var(--accent); width:max-content; cursor:pointer; }
.f-mail .tip{ position:absolute; inset-inline-start:0; bottom:calc(100% + .5rem); padding:.3rem .75rem; background:var(--accent); color:var(--black); font-size:1rem; font-weight:500; opacity:0; visibility:hidden; transition:opacity .3s, visibility 0s .3s; white-space:nowrap; }
.f-mail.copied .tip{ opacity:1; visibility:visible; transition-delay:0s; }
.f-social-list{ display:flex; flex-direction:column; gap:1rem; }
.f-social-list li{ display:flex; align-items:center; gap:1rem; font-family:var(--ui); font-size:1.25rem; color:var(--grey); }
.f-social-list li::before{ content:""; width:1.25rem; height:1.25rem; border:1px solid var(--grey); border-radius:2px; }
.f-copy{ margin-top:2.5rem; padding-top:1rem; border-top:1px dashed var(--grey); display:grid; grid-template-columns:repeat(4,1fr); align-items:center; font-size:1rem; color:var(--grey-2); }
.f-copy .links{ display:flex; gap:1rem; }
.f-copy .end{ grid-column:4; display:flex; justify-content:space-between; gap:1rem; }
@media (max-width:767px){
  .footer{ padding:3.75rem 0 1.25rem; }
  .footer .grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; }
  .footer .col-2, .footer .col-4{ grid-column:auto; }
  .footer .col-4{ display:none; }
  .f-col{ gap:1.5rem; }
  .btn.mid{ height:2.875rem; font-size:1rem; }
  .btn.mid .btn-body{ padding:0 1.75rem; }
  .btn.mid .btn-arrow{ width:2.875rem; }
  .f-mail{ font-size:1.125rem; }
  .f-copy{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; }
  .f-copy .end{ flex-direction:column; gap:.4rem; }
}


/* marquee text tiles (clinic names) */
.marquee .logo{ display:flex; align-items:center; justify-content:center; }
.logo-t{ font-family:var(--display); font-size:1.75rem; letter-spacing:.04em; text-transform:uppercase; color:var(--grey-2); white-space:nowrap; padding:0 1rem; }

/* cinema mode (film with sound) */
.cinema{ position:fixed; inset:0; z-index:4000; background:rgba(11,11,13,.96); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; padding:2rem; }
.cinema[hidden]{ display:none; }
.cinema video{ max-width:100%; max-height:78vh; width:auto; height:auto; background:#000; outline:1px solid var(--glass-line); }
.cinema-title{ font-family:var(--ui); font-size:1rem; color:var(--grey-2); }
.cinema-close{ position:absolute; top:1.5rem; inset-inline-end:2rem; font-family:var(--ui); font-size:1rem; font-weight:500; text-transform:uppercase; letter-spacing:.06em; padding:.5rem 1rem; border:1px solid var(--glass-line); }
.socials a{ font-family:var(--ui); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; }
.f-social-list li a{ color:var(--grey); transition:color .3s; }
.f-social-list li a:hover{ color:var(--white); }
.p-video{ cursor:pointer; }
/* opener: the film wall runs over the hero film once, then dissolves out */
.hero-bg .opener{ z-index:2; transition:opacity .55s linear; }
.hero-bg .opener.out{ opacity:0; }
.player{ opacity:0; transition:opacity .8s var(--ease-out) .2s; }
.hero.in .player{ opacity:1; }
/* hero film hosted on YouTube: the iframe covers the hero like object-fit:cover; the poster sits on top until it plays */
.ph.yt .yt-frame, .ph.yt iframe{ position:absolute; top:50%; left:50%; width:max(100%, 177.78vh); height:max(100%, 56.25vw); transform:translate(-50%, -50%); border:0; pointer-events:none; }
.ph.yt .yt-poster{ transition:opacity .6s linear; }
.ph.yt.yt-on .yt-poster{ opacity:0; }
/* short copy: a justified last line with two words reads as a gap, not a style */
.title-block .stretch, .manifesto .stretch{ text-align-last:auto; }
html[lang="fa"] .st-phrase{ font-size:13rem; }
html[lang="fa"] .process-item .word{ font-size:12rem; }
@media (max-width:767px){ html[lang="fa"] .st-phrase{ font-size:4.4rem; } html[lang="fa"] .process-item .word{ font-size:3.8rem; } }

/* ============================================================
   18. PHONES + TABLETS  (2 Oct 2026 mobile pass)
   The desktop model is vw-based; below 1280px it needs floors and
   a different flow. Rules here override the ones above.
   ============================================================ */
html{ overflow-x:clip; }
.roll > *{ white-space:nowrap; }                        /* a wrapped label was being clipped by the one-line roll box */
/* tablets + small laptops: keep the proportions, but never below 10px per rem */
@media (min-width:768px) and (max-width:1279px){ html{ font-size:clamp(10px, .8333vw, 12px); } }

@media (max-width:767px){
  /* flex-column grids: children fill the width — a shrink-to-fit child with a long line pushed the page wider than the screen */
  .grid{ align-items:stretch; }
  .grid > *{ min-width:0; max-width:100%; }
  .justify{ text-align:start; }
  .text-24, .text-30, .st-copy, .p-desc, .process-item .sub, .manifesto p{ line-height:1.25; }
  .container{ max-width:calc(100% - 2.5rem); }

  /* nav: transparent over the film, glass once content scrolls under it */
  .nav{ padding:.75rem 0; transition:background .3s, backdrop-filter .3s; }
  .nav.scrolled{ background:rgba(11,11,13,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
  .nav-inner{ gap:1rem; }
  .brand-mark{ width:2.5rem; height:2.5rem; font-size:1.35rem; }
  .btn, .menu-btn{ height:2.5rem; font-size:.875rem; }
  .btn-arrow{ width:2.5rem; }
  .btn-body{ padding:0 1.1rem; }
  .menu{ padding:calc(.75rem + env(safe-area-inset-top, 0px)) 0 calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
  .menu .container{ display:flex; flex-direction:column; flex:1; min-height:0; }
  .menu-list{ margin-top:2rem; gap:.9rem; overflow:auto; }
  .menu-list a{ font-size:2rem; }
  .menu-foot{ padding-top:1.5rem; }

  /* hero: the player bar has its own lane under the text */
  .hero{ padding-bottom:5rem; }
  .hero-block{ gap:1.25rem; }
  .hero-sub .brk{ display:inline; font-size:1rem; }
  .hero-sub .brk::before{ margin-inline-end:.5em; }
  .hero-sub .brk::after{ margin-inline-start:.5em; }
  .player{ inset:auto 1.25rem 1.25rem; gap:.75rem; }
  .play{ gap:.6rem; font-size:.8rem; }
  .timer{ font-size:.8rem; }
  .track{ margin-inline-start:.5rem; height:1rem; }
  .playhead{ height:1.75rem; }

  /* statement: the two phrases stack, so the hero text must be covered sooner and they must not touch */
  .statement{ padding-top:5rem; padding-bottom:3rem; background:linear-gradient(to bottom, rgba(11,11,13,0) 0, rgba(11,11,13,.92) 9rem, var(--black) 16rem); }
  .st-phrase{ font-size:4.6rem; }
  .st-next{ margin-top:1.25rem; }
  .st-last{ margin-top:2.5rem; }
  .st-copy{ font-size:1.125rem; }
  html[lang="fa"] .st-phrase{ font-size:3.9rem; }

  /* films: full-width film, number above, caption below; the hover overlay is gone, the button stays */
  .hp-block{ margin-top:2.5rem; gap:3rem; }
  .project{ display:flex; flex-direction:column; gap:1rem; padding-top:1.25rem; }
  .p-first{ gap:.75rem; }
  .p-first .brk{ font-size:1.25rem; }
  .p-video{ width:100%; height:auto; aspect-ratio:16/9; }
  .p-info{ display:none; }
  .p-play{ opacity:1; transform:translate(-50%, -50%); }
  .project:hover .p-play{ transform:translate(-50%, -50%); }
  .p-title{ gap:.4rem; height:auto; }
  .p-title h3{ font-size:1.75rem; }
  .p-title .kind{ font-size:1rem; }
  .p-desc{ margin-top:.25rem; font-size:1.05rem; }
  .hp-cta{ flex-direction:column; align-items:flex-start; gap:1rem; padding-top:2rem; font-size:1.05rem; }

  /* process: left-aligned captions, words that can wrap */
  .process-list{ margin-top:2.5rem; gap:1.75rem; align-items:flex-start; }
  .process-item{ align-items:flex-start; width:100%; }
  .process-item .top{ align-items:flex-start; gap:.5rem; }
  .process-item .word{ font-size:3.6rem; line-height:.85; }
  .process-item .idx{ font-size:1rem; margin-top:.35rem; }
  .process-item .sub{ align-self:flex-start; text-align:start; max-width:100%; font-size:.8rem; margin-top:.5rem; }
  .process-close{ position:static; font-size:1.05rem; margin-top:1rem; text-align:start; }
  html[lang="fa"] .process-item .word{ font-size:3.2rem; }

  /* numbers: a 2 × 2 grid instead of four shrink-to-fit items */
  .grid.stats{ display:grid; grid-template-columns:1fr 1fr; gap:2.25rem 1.25rem; margin-top:2rem; }
  .stat, .stat.high{ padding:0; gap:.75rem; min-width:0; }
  .stat .tag{ font-size:1rem; }
  .stat .num{ font-size:4.25rem; line-height:1; letter-spacing:-.02em; }
  .stat .lbl{ margin-top:0; font-size:1rem; line-height:1.1; }
  html[lang="fa"] .stat .num{ font-size:3.4rem; }

  /* recognition + marquee */
  .awards-list{ gap:2rem; }
  .award .name{ font-size:1.25rem; }
  .award .proj{ font-size:1rem; }
  .award .brk{ font-size:.9rem; }
  .marquee .logo{ width:12rem; height:6rem; }
  .logo-t{ font-size:1.25rem; }

  /* movie: statements clear of the nav and of the badge */
  .movie-grid .grid{ padding:6.5rem 1.25rem 4.75rem; }
  .movie-grid .h3{ font-size:1.6rem; }
  .keep{ font-size:.8rem; padding:.3rem .6rem; }

  /* manifesto + cta */
  .manifesto .line-b{ font-size:1.1rem; }
  .cta-word{ font-size:5.5rem; }
  .btn.big{ height:3.5rem; font-size:1rem; }
  .btn.big .btn-body{ padding:0 1.5rem; }
  .btn.big .btn-arrow{ width:3.5rem; }
  .btn.big .btn-arrow svg{ width:1.25rem; height:1.25rem; }

  /* footer */
  .f-title{ font-size:1.75rem; }
  .f-link{ font-size:1.05rem; line-height:1.4; }
  .f-mail{ font-size:1rem; }
  .f-copy{ font-size:.85rem; }
}
/* touch screens of any size: the film's button needs no hover */
@media (hover:none){
  .p-play{ opacity:1; }
}
@media (max-width:767px){
  .loader-title{ font-size:1.1rem; letter-spacing:.22em; text-indent:.22em; }
  .loader-sub{ font-size:.95rem; }
}
/* tablets (768–1023px): four columns are narrow here — the numbers go 2 × 2 and the big Farsi words step down */
@media (min-width:768px) and (max-width:1023px){
  .grid.stats{ grid-template-columns:1fr 1fr; gap:3rem 2rem; }
  .stat, .stat.high{ padding-top:0; }
  .stat::before, .stat.high::before{ top:0; }
  .stat.in::before, .stat.high.in::before{ height:100%; }
  .stat .num{ font-size:9rem; }
  html[lang="fa"] .st-phrase{ font-size:8.5rem; }
  html[lang="fa"] .process-item .word{ font-size:9rem; }
  html[lang="fa"] .stat .num{ font-size:7.5rem; }
}