@font-face{font-family:Vazirmatn;src:url('/assets/fonts/vazirmatn-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('/assets/fonts/vazirmatn-500.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('/assets/fonts/vazirmatn-600.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Vazirmatn;src:url('/assets/fonts/vazirmatn-700.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:Oswald;src:url('/assets/fonts/oswald-bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
:root{--black:#121212;--white:#f1f1f1;--green:#00a693;--blue:#0067a5;--muted:#a7aaa8;--edge:rgba(241,241,241,.13);color-scheme:dark;font-family:Vazirmatn,sans-serif;font-synthesis:none;background:var(--black);color:var(--white)}
*{box-sizing:border-box}html,body{margin:0}html{scrollbar-color:#00a693 #121212;scrollbar-width:thin}body{overflow-x:clip}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{color:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:7px}button{border:0;background:none;cursor:pointer}.skip-link{position:fixed;top:-100px;left:30px;z-index:10;background:var(--green);padding:12px}.skip-link:focus{top:18px}.header{position:fixed;background:#121212;inset:0 0 auto;z-index:5;height:112px;margin:0 5.3%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--edge)}.brand{display:flex;align-items:center}.brand-word{font:700 31px/1 Oswald,sans-serif;letter-spacing:1px}.brand-period{color:var(--green)}.navigation{display:flex;align-items:center;gap:36px;font-size:13px}.nav-link{color:#a5a5a5;transition:color .2s;position:relative;padding:10px 0}.nav-link:hover,.nav-link.is-active{color:var(--white)}.nav-link.is-active:after{content:'';height:3px;width:3px;position:absolute;right:50%;bottom:0;background:var(--green)}.nav-link span{padding-right:7px;color:var(--green);font-size:18px}.header-note{font-size:11px;color:#8e9492}.scroll-story{height:430svh;position:relative}.stage{position:sticky;top:0;height:100svh;min-height:640px;overflow:hidden;isolation:isolate;background:#121212}.stage-frame{position:absolute;top:150px;bottom:126px;left:5.3%;width:43%;border-left:1px solid rgba(241,241,241,.07);pointer-events:none}.stage-frame:before,.stage-frame:after{content:'+';position:absolute;left:-5px;color:#797d7a;font:12px monospace}.stage-frame:before{top:-7px}.stage-frame:after{bottom:-6px}.hero-word{position:absolute;left:7.3%;top:18%;font:700 clamp(70px,10.25vw,180px)/1 Oswald,sans-serif;letter-spacing:-4px;color:transparent;-webkit-text-stroke:1px rgba(241,241,241,.10);user-select:none;will-change:transform,opacity}.machine-scene{position:absolute;left:0;top:0;width:800px;transform-origin:0 0;will-change:transform,opacity;opacity:.28;pointer-events:none}.machine-scene img{display:block;width:100%;height:auto;filter:brightness(.78) saturate(.45);transition:filter .4s}.machine-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#121212 0%,transparent 22%,transparent 78%,#121212 98%);opacity:.75}.copy-panel{position:absolute;right:7.1%;top:50%;width:42%;transform:translateY(-48%);will-change:opacity,transform}.etymology{font-size:12px;color:#a5aba7;margin:0 0 30px;line-height:1.8;white-space:nowrap}.etymology bdi{font-family:Arial,sans-serif;font-size:11px;letter-spacing:.2px}.intro-copy h1{font-weight:500;font-size:clamp(30px,3.08vw,56px);line-height:1.68;letter-spacing:-1.2px;margin:0}.intro-copy h1>span{display:block}.intro-copy h1 .intro-brand{font:700 clamp(43px,4.5vw,80px)/1.2 Oswald,sans-serif;letter-spacing:-.5px;margin-bottom:13px;display:table;direction:ltr}.intro-brand span{font-family:Vazirmatn,sans-serif;font-size:.65em;padding-left:5px}.subtitle{font-size:14px;color:#aeb3af;display:flex;gap:13px;align-items:center;margin:27px 0 0;line-height:1.8}.subtitle>span{display:block;width:27px;height:1px;background:var(--green)}.story-action{font-size:12px;display:inline-flex;align-items:center;gap:26px;margin-top:35px;padding-bottom:8px;border-bottom:1px solid #464c49}.action-arrow{color:var(--green);font-size:21px}.object-caption{position:absolute;left:8.4%;top:16.7%;display:flex;align-items:center;gap:13px;font-size:11px;color:#b3b8b4;direction:rtl;will-change:transform,opacity}.object-caption .cross{color:var(--green);font:18px monospace}.hairline{display:block;width:46px;height:1px;background:#555d57}.object-caption [dir=ltr]{font:10px monospace;letter-spacing:1px;color:#858b87}.why-copy{opacity:0;pointer-events:none}.why-copy h2{font-size:clamp(44px,5.15vw,86px);font-weight:500;line-height:1.65;letter-spacing:-2px;margin:0 0 24px}.why-copy h2 span{color:var(--green)}.why-copy p{font-size:clamp(19px,1.85vw,30px);font-weight:400;line-height:2.1;color:#c3c7c4;margin:0}.why-line{display:flex;direction:ltr;align-items:center;gap:10px;width:190px;margin-top:40px}.why-line span{flex:1;height:1px;background:#34403a}.why-line i{width:5px;height:5px;border-radius:50%;background:var(--green)}.why-line span:last-child{background:var(--blue)}.connection-copy{position:absolute;top:20%;left:50%;transform:translateX(-50%);opacity:0;display:flex;gap:26px;align-items:center;white-space:nowrap;will-change:opacity,transform}.connection-copy h2{font-size:18px;line-height:1.8;letter-spacing:-.2px;font-weight:400;margin:0}.connection-line{width:58px;height:1px;background:var(--green)}#coffee-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.bottom-bar{position:absolute;bottom:0;left:5.3%;right:5.3%;height:100px;border-top:1px solid var(--edge);display:flex;justify-content:space-between;align-items:center;gap:20px}.service-scope{font-size:11px;display:flex;align-items:center;gap:12px;color:#c1c5c1}.scope-dot{width:3px;height:3px;background:#58605a;border-radius:50%}.coming-soon{color:#727d76}.scene-controls{display:flex;gap:14px;align-items:center}.scene-controls button{display:flex;align-items:center;gap:10px;padding:10px 1px}.step-number{font:11px/1 monospace;color:#747f77;transition:color .3s}.step-line{display:block;width:45px;height:1px;background:#3a413c;position:relative;overflow:hidden}.step-line i{position:absolute;inset:0;background:var(--green);transform:scaleX(0);transform-origin:left}.scene-controls button[aria-current] .step-number{color:var(--white)}.scroll-hint{display:flex;align-items:center;gap:14px;padding:10px 0;font-size:11px;color:#b2b6b2}.mouse-icon{width:17px;height:25px;border:1px solid #6f7871;border-radius:9px;position:relative;display:block}.mouse-icon i{width:2px;height:6px;position:absolute;top:5px;left:6.5px;background:var(--green);border-radius:2px}.noscript{position:fixed;bottom:90px;left:20px;background:#121212;padding:20px;z-index:9;max-width:80%;font-size:14px}
@media(min-width:1700px){.header{height:128px}.bottom-bar{height:120px}.etymology{font-size:14px}.subtitle{font-size:17px}.copy-panel{right:8%;width:41%}.navigation{font-size:15px}.object-caption{font-size:13px}}
@media(max-width:1000px) and (min-width:701px){.header{margin:0 4%;height:94px}.header-note{display:none}.navigation{gap:24px}.copy-panel{width:46%;right:5%;}.intro-copy h1{font-size:32px}.subtitle{font-size:12px}.etymology{font-size:10px}.etymology bdi{font-size:10px}.bottom-bar{left:4%;right:4%}.service-scope{font-size:10px;gap:8px}.scene-controls{gap:9px}.step-line{width:28px}}
@media(max-width:700px){.header{height:81px;margin:0 6.2%;}.brand-word{font-size:25px}.header-note{display:none}.navigation{gap:20px;font-size:11px}.nav-link:last-child{display:none}.scroll-story{height:440svh}.stage{min-height:660px}.stage-frame{left:6.2%;top:103px;bottom:108px;width:87.6%;border-right:1px solid rgba(241,241,241,.04)}.hero-word{top:49%;left:9%;font-size:84px;letter-spacing:-2px;-webkit-text-stroke-color:rgba(241,241,241,.11)}.copy-panel{top:118px;right:8%;width:84%;transform:none}.etymology{font-size:10px;margin-bottom:17px;color:#aab0ab}.etymology bdi{font-size:10px}.intro-copy h1{font-size:27px;line-height:1.65;letter-spacing:-.6px}.intro-copy h1 .intro-brand{font-size:38px;margin-bottom:8px;line-height:1.12}.subtitle{font-size:10.5px;margin-top:14px;gap:9px}.subtitle>span{width:18px}.story-action{margin-top:16px;font-size:10px;gap:16px;padding-bottom:2px}.action-arrow{font-size:17px}.object-caption{left:11%;top:auto;bottom:112px;gap:10px;font-size:10px}.object-caption [dir=ltr]{font-size:9px}.hairline{width:30px}.bottom-bar{height:88px;left:6.2%;right:6.2%;gap:5px;align-items:center}.service-scope{position:absolute;bottom:92px;right:4px;display:flex;font-size:9px;gap:7px;writing-mode:horizontal-tb}.coming-soon{font-size:8px}.scene-controls{gap:14px}.scene-controls button{gap:7px}.step-line{width:29px}.step-number{font-size:10px}.scroll-hint{font-size:10px;gap:10px}.mouse-icon{height:22px;width:15px}.mouse-icon i{left:5.5px}.why-copy{top:145px}.why-copy h2{font-size:48px;line-height:1.5;margin-bottom:19px}.why-copy p{font-size:19px;line-height:2.05}.why-line{margin-top:26px;width:150px}.connection-copy{top:145px;gap:18px}.connection-copy h2{font-size:19px}.connection-line{width:38px}}
@media(max-width:370px){.navigation{gap:13px;font-size:10px}.brand-word{font-size:23px}.intro-copy h1{font-size:24px}.copy-panel{top:110px}.subtitle{font-size:9.5px}.scene-controls{gap:10px}.step-line{width:23px}.why-copy h2{font-size:43px}.why-copy p{font-size:17px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}.scroll-story{height:350svh}}

@media(max-height:650px) and (min-width:701px){.stage{min-height:0}.header{height:62px}.brand-word{font-size:24px}.navigation{font-size:11px}.header-note{font-size:9px}.bottom-bar{height:58px}.copy-panel{right:7%;width:43%;top:49%}.intro-copy h1{font-size:23px;line-height:1.5}.intro-copy h1 .intro-brand{font-size:34px;margin-bottom:5px}.etymology{font-size:9px;margin-bottom:12px}.etymology bdi{font-size:9px}.subtitle{font-size:10px;margin-top:14px}.story-action{font-size:10px;margin-top:14px}.why-copy h2{font-size:42px;margin-bottom:14px}.why-copy p{font-size:17px}.why-line{margin-top:20px}.object-caption{display:none}.connection-copy{top:21%}.stage-frame{top:80px;bottom:80px}.hero-word{top:22%;font-size:95px}.connection-copy h2{font-size:15px}.service-scope{font-size:10px}.scroll-hint{font-size:10px}}
@media(max-width:700px) and (max-height:750px){.stage{min-height:0}.copy-panel{top:104px}.intro-copy h1{font-size:24px;line-height:1.55}.intro-copy h1 .intro-brand{font-size:33px}.etymology{margin-bottom:11px}.subtitle{margin-top:11px;font-size:10px}.story-action{margin-top:10px}.object-caption{bottom:104px}.service-scope{display:none}.why-copy{top:125px}.why-copy h2{font-size:41px}.why-copy p{font-size:17px}.why-line{margin-top:17px}.connection-copy{top:125px}}

/* Supplied photography stays bright and fully contained in the opening. */
.scroll-story{height:540svh}.machine-scene{opacity:1;background:#fff;overflow:hidden}.machine-pictures{position:relative;width:100%;aspect-ratio:1609/977;transform-origin:36% 44%;will-change:transform}.machine-scene img{width:100%;height:100%;object-fit:contain;filter:none;transition:none}.machine-scene #machine-closed{position:absolute;inset:0;opacity:0;transform:scale(1.08);will-change:opacity}.object-caption{display:none}.etymology{display:flex;direction:ltr;justify-content:flex-end;align-items:center;gap:6px;flex-wrap:nowrap;text-align:right}.etymology>span{display:inline-flex;align-items:center;gap:4px}.brew-anchor{position:absolute;inset:0;pointer-events:none;visibility:hidden}
@media(max-width:700px){.scroll-story{height:550svh}.scene-controls{gap:10px}.scene-controls button{gap:6px}.step-line{width:23px}.etymology{gap:5px}.bottom-bar{gap:6px}}
@media(max-width:370px){.scene-controls{gap:9px}.step-line{width:17px}.scene-controls button{gap:5px}.etymology{gap:4px}}
@media(prefers-reduced-motion:reduce){.scroll-story{height:460svh}}

@media(max-width:700px){.service-scope{bottom:60px;right:0}}

/* Transparent machine cutouts restore the continuous dark scene. */
.machine-scene{background:transparent;overflow:visible}.machine-pictures{overflow:visible}.machine-scene img{filter:none}.machine-scene #machine-closed{transform:scale(1.08)}

/* The brand origin reads as Persian prose; the visual is centered alongside it. */
.etymology{display:block;direction:rtl;text-align:right;white-space:normal;line-height:2.05}.etymology bdi{display:inline;unicode-bidi:isolate;font-family:Arial,sans-serif;font-size:1em}
@media(min-width:1001px){.copy-panel{right:6%;width:39%}.stage-frame{left:8.5%;width:44%}.hero-word{left:11%;top:19%}}
@media(max-width:700px){.etymology{font-size:10.5px;line-height:1.95;margin-bottom:14px}}
@media(max-width:700px) and (max-height:750px){.etymology{font-size:10px;line-height:1.9;margin-bottom:10px}}

/* One typographic measure, with natural Persian line breaking. */
.copy-panel{text-align:justify;text-align-last:right}.etymology{font-size:13px;line-height:2.15;margin:0 0 22px;letter-spacing:normal;word-spacing:.025em;text-align:justify;text-align-last:right;color:#b5beb7}.intro-copy h1{font-size:clamp(30px,2.8vw,46px);line-height:1.88;font-weight:500;letter-spacing:normal;word-spacing:.025em}.intro-copy h1 .intro-brand{font-size:clamp(44px,4.5vw,72px);line-height:1.18;margin-bottom:18px;letter-spacing:normal}.hero-statement{text-align:justify;text-align-last:right;text-justify:inter-word}.subtitle{font-size:14px;line-height:2;margin-top:22px;letter-spacing:normal;word-spacing:normal}.story-action{font-size:12px;margin-top:26px}.why-copy h2{font-size:clamp(42px,4.7vw,74px);line-height:1.65;margin-bottom:20px;letter-spacing:normal;text-align:right}.why-copy p{font-size:clamp(18px,1.7vw,27px);line-height:2.2;letter-spacing:normal;word-spacing:.025em;text-align:justify;text-align-last:right}.why-line{margin-top:28px}#steam-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
@media(min-width:1001px){.copy-panel{right:5.5%;width:34.5%}.stage-frame{left:5.5%;width:53.5%}.hero-word{left:6.5%;top:17%;font-size:11vw}}
@media(min-width:701px) and (max-width:1000px){.copy-panel{right:5%;width:39%}.intro-copy h1{font-size:30px;line-height:1.85}.intro-copy h1 .intro-brand{font-size:44px}.etymology{font-size:11px}.why-copy h2{font-size:43px}.why-copy p{font-size:20px}}
@media(max-width:700px){.copy-panel{top:110px;right:7%;width:86%}.etymology{font-size:12px;line-height:1.95;margin-bottom:16px}.intro-copy h1{font-size:25px;line-height:1.85;letter-spacing:normal}.intro-copy h1 .intro-brand{font-size:37px;line-height:1.18;margin-bottom:14px}.subtitle{font-size:11px;line-height:1.9;margin-top:16px}.story-action{font-size:11px;margin-top:14px}.why-copy{top:130px}.why-copy h2{font-size:43px;line-height:1.65;margin-bottom:18px}.why-copy p{font-size:19px;line-height:2.1}.why-line{margin-top:25px}}
@media(max-width:700px) and (max-height:750px){.copy-panel{top:96px}.etymology{font-size:11px;line-height:1.9;margin-bottom:12px}.intro-copy h1{font-size:22px;line-height:1.8}.intro-copy h1 .intro-brand{font-size:31px;margin-bottom:12px}.subtitle{font-size:10px;line-height:1.8;margin-top:12px}.story-action{font-size:10px;margin-top:12px}.why-copy{top:115px}.why-copy h2{font-size:37px}.why-copy p{font-size:17px;line-height:2}}
@media(max-height:650px) and (min-width:701px){.copy-panel{right:5%;width:38%}.intro-copy h1{font-size:21px;line-height:1.7}.intro-copy h1 .intro-brand{font-size:30px;line-height:1.1;margin-bottom:9px}.etymology{font-size:10px;line-height:1.8;margin-bottom:12px}.subtitle{font-size:10px;margin-top:12px}.story-action{font-size:10px;margin-top:12px}.why-copy h2{font-size:36px}.why-copy p{font-size:17px;line-height:1.9}}

.keep-ending{white-space:nowrap}.hero-statement{text-wrap:pretty}.intro-copy h1{font-size:clamp(28px,2.5vw,40px)}
@media(max-width:1000px) and (min-width:701px){.intro-copy h1{font-size:28px}}
@media(max-width:700px){.intro-copy h1{font-size:25px}}
@media(max-width:700px) and (max-height:750px){.intro-copy h1{font-size:22px}}
@media(max-height:650px) and (min-width:701px){.intro-copy h1{font-size:21px}}

/* Short definitions keep natural spacing; the main text retains justification. */
.etymology{text-align:right;text-align-last:right;word-spacing:normal}.intro-copy h1{font-size:clamp(24px,2.5vw,40px)}
@media(max-width:1000px) and (min-width:701px){.intro-copy h1{font-size:clamp(21px,2.67vw,24px)}}
@media(max-width:700px){.intro-copy h1{font-size:25px}}
@media(max-width:700px) and (max-height:750px){.intro-copy h1{font-size:22px}}
@media(max-height:650px) and (min-width:701px){.intro-copy h1{font-size:21px}}

/* Closer composition, prominent brand and compact natural Persian spacing. */
.intro-copy h1 .intro-brand{font-size:clamp(58px,6vw,94px);margin-bottom:16px}
.hero-statement{text-align:right;text-align-last:right;text-wrap:balance;word-spacing:normal}
.intro-copy h1{font-size:clamp(24px,2.35vw,38px);line-height:1.85;word-spacing:normal}
.subtitle{font-size:15px;font-weight:500;color:#bec5bf;line-height:1.9;gap:11px;margin-top:23px}
.subtitle>span{width:23px;flex-shrink:0}
@media(min-width:1001px){.copy-panel{right:8%;width:32.5%}.stage-frame{left:8%;width:50%}.hero-word{left:9%}}
@media(min-width:701px) and (max-width:1000px){.copy-panel{right:7.5%;width:37%}.intro-copy h1 .intro-brand{font-size:58px}.intro-copy h1{font-size:clamp(21px,2.5vw,24px)}.subtitle{font-size:13px}}
@media(max-width:700px){.intro-copy h1 .intro-brand{font-size:50px;margin-bottom:10px}.intro-copy h1{font-size:25px;line-height:1.75}.subtitle{font-size:12px;margin-top:17px;gap:9px}.subtitle>span{width:19px}}
@media(max-width:700px) and (max-height:750px){.intro-copy h1 .intro-brand{font-size:42px;margin-bottom:9px}.intro-copy h1{font-size:22px;line-height:1.7}.subtitle{font-size:11px;margin-top:12px}}
@media(max-height:650px) and (min-width:701px){.intro-copy h1 .intro-brand{font-size:40px;margin-bottom:8px}.intro-copy h1{font-size:21px;line-height:1.6}.subtitle{font-size:11px;margin-top:13px}}

/* Bring both sides into a tighter central composition. */
@media(min-width:1001px){.copy-panel{right:13%;width:29.5%}.stage-frame{left:13%;width:44%}.hero-word{left:14%}.intro-copy h1{font-size:clamp(24px,2.2vw,36px)}}
@media(min-width:701px) and (max-width:1000px){.copy-panel{right:11%;width:32%}.stage-frame{left:13%;width:43%}.hero-word{left:14%}}
@media(max-width:700px){.copy-panel{right:9%;width:82%}.intro-copy h1{font-size:24px}}
@media(max-width:700px) and (max-height:750px){.intro-copy h1{font-size:21px}}

/* Scroll-led color progression inspired by the supplied f1 reference. */
:root{--white:#f1f1f1;--edge:rgba(241,241,241,.18);--scene-background:#121212;--scene-muted:#c4cbc6;--scene-faint:#a5b1a9;--scene-outline:rgba(241,241,241,.10)}
html,body,.stage,.header{background:var(--scene-background)}
.etymology,.subtitle,.why-copy p,.scroll-hint,.service-scope{color:var(--scene-muted)}
.header-note,.nav-link,.coming-soon,.step-number{color:var(--scene-faint)}
.nav-link.is-active,.nav-link:hover{color:var(--white)}
.hero-word{-webkit-text-stroke-color:var(--scene-outline)}
.stage-frame{border-color:var(--scene-outline)}
.stage-frame:before,.stage-frame:after{color:var(--scene-faint)}
.story-action{border-bottom-color:var(--edge)}
.mouse-icon{border-color:var(--scene-faint)}
.step-line,.why-line span{background:var(--edge)}
.why-line span:last-child{background:var(--blue)}
.noscript{background:var(--scene-background)}

/* Restore the original large-bean opening, with the machine behind it. */
.why-copy p.repair-approach{font-size:clamp(17px,1.45vw,23px);line-height:1.95;margin-top:18px;text-align:right;text-wrap:pretty}
@media(min-width:1001px){.copy-panel{right:7.1%;width:42%}.intro-copy h1{font-size:clamp(30px,3.08vw,50px);line-height:1.7}.stage-frame{left:5.3%;width:43%}.hero-word{left:7.3%;top:18%;font-size:10.25vw}.why-copy{right:9%;width:38%}}
@media(min-width:701px) and (max-width:1000px){.copy-panel{right:5%;width:43%}.intro-copy h1{font-size:28px}.hero-word{left:7.3%;top:18%}.stage-frame{left:5.3%;width:43%}}
@media(max-width:700px){.why-copy p.repair-approach{font-size:15px;line-height:1.9;margin-top:13px}.why-copy h2{margin-bottom:14px}.why-copy p{line-height:1.95}.why-line{margin-top:20px}}
@media(max-width:700px) and (max-height:750px){.why-copy p.repair-approach{font-size:14px;line-height:1.85;margin-top:11px}.why-copy h2{margin-bottom:11px}.why-line{margin-top:15px}}
@media(max-height:650px) and (min-width:701px){.copy-panel{right:5%;width:43%}.intro-copy h1{font-size:21px;line-height:1.6}.why-copy p.repair-approach{font-size:14px;line-height:1.8;margin-top:10px}.why-copy h2{font-size:32px;margin-bottom:10px}.why-line{margin-top:14px}}

@media(min-width:701px) and (min-height:651px){.hero-statement .opening-line{display:block}}
@media(min-width:1001px){.why-copy{right:13%;width:29.5%}}
@media(min-width:701px) and (max-width:1000px){.why-copy{right:11%;width:32%}}

/* Lift the copy above the center line while preserving the complete machine. */
@media(min-width:1001px){.copy-panel{top:46%}}
@media(min-width:701px) and (max-width:1000px){.copy-panel{top:47%}}
@media(max-width:700px){.intro-copy{top:100px}.why-copy{top:116px}}
@media(max-width:700px) and (max-height:750px){.intro-copy{top:92px}.why-copy{top:104px}}
@media(max-height:650px) and (min-width:701px){.copy-panel{top:46%}}

/* The service is the strongest Persian line; the introduction has a fixed top. */
.intro-copy .hero-statement{font-size:clamp(27px,2.4vw,40px);line-height:1.85;letter-spacing:normal;word-spacing:normal}
.headline-row{display:block;white-space:nowrap}
.intro-copy .etymology{margin-bottom:38px}
.intro-copy h1 .intro-brand{margin-bottom:24px}
.intro-copy .subtitle{display:block;font-size:clamp(21px,1.8vw,27px);font-weight:700;line-height:1.8;color:var(--white);margin-top:30px;text-align:right}
.intro-copy .subtitle>span{display:none}
.intro-copy .story-action{margin-top:24px}
@media(min-width:1001px){.intro-copy{top:clamp(145px,17vh,190px)}}
@media(min-width:701px) and (max-width:1000px){.intro-copy{top:clamp(130px,17vh,175px)}.intro-copy .hero-statement{font-size:23px;line-height:1.85}.intro-copy .etymology{margin-bottom:30px}.intro-copy h1 .intro-brand{margin-bottom:22px}.intro-copy .subtitle{font-size:20px;margin-top:26px}}
@media(max-width:700px){.intro-copy{top:94px}.intro-copy .etymology{margin-bottom:24px}.intro-copy h1 .intro-brand{margin-bottom:16px}.intro-copy .hero-statement{font-size:23px;line-height:1.75}.intro-copy .subtitle{font-size:17px;line-height:1.8;margin-top:24px}.intro-copy .story-action{margin-top:16px}}
@media(max-width:370px){.intro-copy .hero-statement{font-size:21px}.intro-copy .subtitle{font-size:16px}}
@media(max-width:700px) and (max-height:750px){.intro-copy{top:88px}.intro-copy .etymology{margin-bottom:14px}.intro-copy h1 .intro-brand{margin-bottom:10px}.intro-copy .hero-statement{font-size:21px;line-height:1.7}.intro-copy .subtitle{font-size:16px;margin-top:18px}.intro-copy .story-action{margin-top:10px}}
@media(max-height:650px) and (min-width:701px){.intro-copy{top:80px}.intro-copy .etymology{margin-bottom:12px}.intro-copy h1 .intro-brand{margin-bottom:10px}.intro-copy .hero-statement{font-size:19px;line-height:1.8}.intro-copy .subtitle{font-size:16px;margin-top:18px}.intro-copy .story-action{margin-top:12px}}

@media(min-width:371px) and (max-width:700px) and (min-height:751px){.intro-copy .subtitle{font-size:18px}}

/* Give the invitation more space beneath the primary service line. */
.intro-copy .story-action{margin-top:64px}
@media(max-width:700px){.intro-copy .story-action{margin-top:40px}}
@media(max-width:700px) and (max-height:750px){.intro-copy .story-action{margin-top:26px}}
@media(min-width:701px) and (max-height:650px){.intro-copy .story-action{margin-top:26px}}

/* Pin the invitation just above the opening scene's lower divider. */
.intro-action{position:absolute;right:7.1%;bottom:116px;margin:0;will-change:opacity}
@media(min-width:701px) and (max-width:1000px){.intro-action{right:5%}}
@media(max-width:700px){.intro-action{right:9%;bottom:104px}}
@media(min-width:701px) and (max-height:650px){.intro-action{right:5%;bottom:74px}}


/* Smooth, locally rendered liquid material; the lettering stays crisp. */
.repair-action{position:absolute;right:7.1%;bottom:184px;margin:0;text-align:right;isolation:isolate;will-change:opacity}
.repair-button{position:relative;display:grid;place-items:center;width:228px;height:100px;padding:0 22px;isolation:isolate;border-radius:42px;outline-offset:0;transition:transform .25s}
.repair-button__surface{position:absolute;inset:10px 12px;border-radius:40px;background:#0067a5;box-shadow:inset 0 2px 3px #76c3e766,inset 0 -8px 14px #001b3a88,0 12px 24px #0005;background-image:linear-gradient(175deg,#3297c755,transparent 30%,#002c5277 75%,#00508044)}
.repair-button__canvas{position:absolute;width:100%;height:100%;inset:0;pointer-events:none;filter:drop-shadow(0 9px 10px #0004)}
.repair-button.has-liquid .repair-button__surface{visibility:hidden}
.repair-button__label{position:relative;color:#f1f1f1;font-size:17px;font-weight:600;line-height:1.6;text-shadow:0 1px 3px #001e3d;pointer-events:none}
.repair-button:active{transform:scale(.97)}
.repair-status{position:absolute;bottom:calc(100% + 10px);right:0;width:max-content;max-width:min(300px,80vw);font-size:12px;line-height:1.9;color:#f1f1f1;background:#20282f;padding:8px 12px;border:1px solid #0067a566;border-radius:8px;opacity:0;visibility:hidden;transition:opacity .2s;pointer-events:none;z-index:2}
.repair-action.is-notified .repair-status{opacity:1;visibility:visible}
@media(min-width:701px) and (max-width:1000px){.repair-action{right:5%}.repair-button{width:208px;height:86px}}
@media(max-width:700px){.repair-action{right:9%;bottom:156px}.repair-button{width:188px;height:76px}.repair-button__label{font-size:15px}}
@media(max-width:700px) and (max-height:750px){.repair-action{bottom:152px}.repair-button{width:174px;height:56px}.repair-button__label{font-size:14px}.intro-copy .etymology{margin-bottom:10px}.intro-copy h1 .intro-brand{margin-bottom:8px}.intro-copy .subtitle{margin-top:12px}}
@media(min-width:701px) and (max-height:650px){.repair-action{right:5%;bottom:122px}.repair-button{width:174px;height:54px}.repair-button__label{font-size:14px}}
@media(prefers-reduced-motion:reduce){.repair-button{transition:none}}
@media(min-width:701px) and (max-height:450px){
 .intro-copy{top:72px}.intro-copy .etymology{font-size:9px;line-height:1.5;margin-bottom:6px}
 .intro-copy h1 .intro-brand{font-size:34px;line-height:1.1;margin-bottom:8px}
 .intro-copy .hero-statement{font-size:17px;line-height:1.45}
 .intro-copy .subtitle{font-size:14px;line-height:1.6;margin-top:8px}
}

@media(min-width:701px) and (max-height:450px){.intro-copy{top:66px}.intro-copy .etymology{margin-bottom:4px}.intro-copy .subtitle{font-size:13px;margin-top:6px}}

/* Match the marked position: centered below the service lettering. */
.repair-action{right:auto;bottom:auto;left:var(--repair-left,70%);top:var(--repair-top,64%)}
.intro-copy .hero-statement{width:max-content;max-width:100%;margin-inline-start:0;margin-inline-end:auto}
.hero-statement .headline-row{display:block;text-align:justify;text-align-last:justify;text-justify:inter-word;white-space:nowrap}

/* New chapter copy follows the established right column and RTL rhythm. */
.diagnosis-copy h2{font-size:clamp(30px,3vw,46px);line-height:1.65;text-wrap:balance}
.diagnosis-copy p{text-wrap:pretty}
@media(min-width:701px){.third-copy{right:7%;width:31%}}
@media(max-width:700px){.diagnosis-copy h2{font-size:30px;line-height:1.65}.third-copy{top:116px}}
@media(max-width:700px) and (max-height:750px){.diagnosis-copy h2{font-size:27px;line-height:1.6}.third-copy{top:104px}}
@media(min-width:701px) and (max-height:650px){.diagnosis-copy h2{font-size:28px;line-height:1.5}.third-copy h2{font-size:32px}.third-copy p{font-size:16px;line-height:1.85}}

/* One continuous brand-black backdrop; no scene dividers. */
html,body,.stage,.header{background:#121212}
.header,.bottom-bar{border:0}
.stage-frame,.why-line{display:none}
.intro-action{border-bottom:0}
#machine-exploded{position:absolute;left:-200px;top:-110px;width:1200px;height:705.5px;display:none;pointer-events:none}

/* Dedicated right columns keep copy clear of the exploded machine. */
.diagnosis-copy p{text-align:justify;text-align-last:right;text-justify:inter-word;word-spacing:normal;text-wrap:wrap}
@media(min-width:701px){.diagnosis-copy{right:5.5%;width:32%}.diagnosis-copy h2{font-size:clamp(28px,2.8vw,43px)}}
.extraction-copy{opacity:0;visibility:hidden;pointer-events:none;right:5.5%;width:32%;text-align:right}
.extraction-copy h2{font-size:clamp(30px,3vw,46px);line-height:1.65;font-weight:500;letter-spacing:normal;margin:0 0 23px}
.service-steps{list-style:none;counter-reset:service-step;margin:0;padding:0;display:grid;gap:11px;font-size:clamp(16px,1.45vw,23px);line-height:1.9;color:var(--scene-muted)}
.service-steps li{counter-increment:service-step;display:flex;align-items:baseline;gap:13px}
.service-steps li::before{content:counter(service-step,persian) '.';color:#00a693;min-width:1.2em;font-size:.9em;font-weight:500}
.repair-action--extraction{position:relative;inset:auto;margin-top:22px;width:max-content;max-width:100%}
.repair-action--extraction.is-notified .repair-status{opacity:1;visibility:visible}
@media(max-width:700px){.diagnosis-copy{right:7%;width:86%}.extraction-copy{right:7%;width:86%;top:106px}.extraction-copy h2{font-size:27px;line-height:1.5;margin-bottom:12px}.service-steps{font-size:15px;line-height:1.8;gap:5px}.service-steps li{gap:10px}.repair-action--extraction{margin-top:12px}.repair-action--extraction .repair-button{height:66px}}
@media(max-width:700px) and (max-height:750px){.extraction-copy{top:87px}.extraction-copy h2{font-size:23px;line-height:1.45;margin-bottom:7px}.service-steps{font-size:13px;line-height:1.65;gap:3px}.repair-action--extraction{margin-top:9px}.repair-action--extraction .repair-button{height:52px}}
@media(min-width:701px) and (max-height:650px){.extraction-copy{top:48%;width:33%;right:4.5%}.extraction-copy h2{font-size:26px;line-height:1.45;margin-bottom:10px}.service-steps{font-size:14px;line-height:1.7;gap:5px}.repair-action--extraction{margin-top:10px}.repair-action--extraction .repair-button{height:54px}}
@media(min-width:701px) and (max-height:450px){
 .extraction-copy{top:calc(50% + 2px)}
 .extraction-copy h2{font-size:22px;line-height:1.35;margin-bottom:8px}
 .service-steps{font-size:13px;line-height:1.55;gap:3px}
 .repair-action--extraction{margin-top:8px}
 .repair-action--extraction .repair-button{height:48px}
}

/* Composite the rigid object directly, preserving crisp metal during movement. */
#portafilter-rig{position:absolute;left:0;top:0;width:900px;height:600px;transform-origin:0 0;pointer-events:none;visibility:hidden;will-change:transform,opacity}

/* The supplied diagnosis sentence has two intentional lines. */
.diagnosis-description{container-type:inline-size}
.diagnosis-line{display:block;white-space:nowrap;font-size:min(20px,4.15cqw);line-height:2.1;text-align:justify;text-align-last:right}
.diagnosis-line:first-child{text-align-last:justify}
@media(min-width:701px) and (max-width:1000px){.diagnosis-copy{width:36%}}

@font-face{font-family:Vazirmatn;src:url('/assets/fonts/vazirmatn-900.woff2') format('woff2');font-style:normal;font-weight:900;font-display:swap}
.intro-copy .subtitle{font-weight:900;will-change:transform}

.intro-copy .subtitle>.service-row{display:inline}
@media(max-width:700px){.intro-copy .subtitle>.service-row{display:block}}
.intro-copy .subtitle>.service-row{width:auto;height:auto;background:none;flex-shrink:initial}

/* Restore the earlier service lettering while keeping the approved placement. */
.intro-copy .subtitle{font-weight:700}

/* Second and third chapter titles share one size; the third title sits higher. */
.diagnosis-copy,.third-copy{--chapter-title-size:30px}
.diagnosis-copy h2,.third-copy h2{font-size:var(--chapter-title-size);line-height:1.65}
.third-copy{top:100px}
@media(min-width:1001px){.third-copy{top:calc(46% - 38px)}}
@media(min-width:701px) and (max-width:1000px){.third-copy{top:calc(47% - 30px)}}
@media(min-width:701px) and (max-height:650px){.third-copy{top:calc(46% - 20px)}}
@media(min-width:701px){.diagnosis-copy,.third-copy{--chapter-title-size:clamp(28px,2.8vw,43px)}}
@media(max-width:700px) and (max-height:750px){.diagnosis-copy,.third-copy{--chapter-title-size:27px}.diagnosis-copy h2,.third-copy h2{line-height:1.6}.third-copy{top:90px}}

/* Never paint the machine alone before the bean and its layout are ready. */
.stage:not(.scene-ready) .machine-scene,
.stage:not(.scene-ready)>.hero-word,
.stage:not(.scene-ready)>canvas{visibility:hidden!important}
.stage:not(.layout-ready)>.repair-action{visibility:hidden!important}