#zemu-opening-shell .desktop-nav .studio-nav{display:flex;flex-direction:column;gap:4px;line-height:1.25;align-items:flex-start}
#zemu-opening-shell .studio-nav a{white-space:nowrap;font:inherit}
#studioDialog{--paper-ink:#263b1c;--paper-line:#263b1c66;position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;padding:6.95vw 24px;box-sizing:border-box;background:transparent;color:var(--paper-ink);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;outline:none}
#studioDialog:not([open]){display:none}
#studioDialog::backdrop{background:#060804d1;opacity:0;transition:opacity .6s ease-out}
#studioDialog.is-open::backdrop{opacity:1}
#studioDialog.is-closing::backdrop{opacity:0;transition:opacity .43s cubic-bezier(.55,.055,.675,.19);transition-delay:1s}
html body #studioDialog,html body #studioDialog *{font-family:ZemuSerif,serif!important}
#studioDialog .studio-paper{position:relative;isolation:isolate;width:69.68vw;margin:0 auto;background:#848f7a;box-sizing:border-box;padding:clamp(24px,1.67vw,40px);color:var(--paper-ink);outline:none}
#studioDialog .studio-paper::before{content:"";position:absolute;inset:0;z-index:-2;background:url('./paper-texture.jpg') top/100% 100%;pointer-events:none}
#studioDialog .studio-paper::after{content:"";position:absolute;inset:0;z-index:-1;background:#000;opacity:.1;pointer-events:none}
#studioDialog .studio-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:42px}
#studioDialog .studio-head nav{display:flex;gap:40px;font-size:clamp(22px,1.55vw,34px);line-height:1.3}
#studioDialog .studio-head a{color:inherit;text-decoration:none;text-underline-offset:7px;text-decoration-thickness:1px}
#studioDialog .studio-head a:first-child{text-decoration:underline}
#studioDialog .studio-close{border:0;background:none;color:inherit;padding:3px 0;cursor:pointer;font-size:13px;line-height:1.5}
#studioDialog :focus-visible{outline:1px solid currentColor;outline-offset:5px}
#studioDialog .studio-paper:focus-visible{outline:none}
#studioDialog #about,#studioDialog #serviceFlow{color:var(--paper-ink);background:none;scroll-margin-top:24px}
#studioDialog .studio-hero{max-width:12em;margin:0 0 clamp(70px,9vw,180px);color:inherit;font-size:clamp(46px,5vw,108px);font-weight:300;line-height:1.18;letter-spacing:-.055em}
#studioDialog .about-group .services{position:relative;padding:0;background:none;color:inherit}
#studioDialog .about-group .services::before,#studioDialog #process.design-process::before{display:none}
#studioDialog .about-group .statement{height:auto;min-height:0;background:none;color:inherit}
#studioDialog .about-group .statement-pin{position:relative;top:auto;display:grid;grid-template-columns:34% 1fr;gap:5%;height:auto;min-height:0;padding:24px 0 48px;border-top:1px solid var(--paper-line);border-bottom:0;overflow:visible}
#studioDialog .about-main{max-width:none;margin:0;align-self:start}
#studioDialog .about-intro-label{padding:0;background:none;color:inherit;font-size:clamp(17px,1.2vw,24px);font-weight:300}
#studioDialog .about-intro-body{max-width:32em;margin:0;color:inherit;font-size:clamp(16px,1.18vw,24px);font-weight:300;line-height:1.7}
#studioDialog .about-intro-body p{margin:0 0 24px}
#studioDialog .about-numbers-grid{border-color:var(--paper-line)}
#studioDialog .about-number{border-color:var(--paper-line);min-height:150px;padding-top:25px;padding-bottom:25px}
#studioDialog .about-number strong{color:inherit;font-size:clamp(36px,3vw,64px);font-weight:300}
#studioDialog .about-number span,#studioDialog .about-number .about-number-suffix{color:inherit}
#studioDialog #serviceFlow{--flow-accent:#263b1c;--flow-bg:transparent;margin-top:90px;border-top:1px solid var(--paper-line)}
#studioDialog #process.design-process{background:none;min-height:0;color:var(--paper-ink)}
#studioDialog .flow-stage{min-height:0;padding:36px 0 50px;grid-template-columns:34% 1fr;gap:5%}
#studioDialog .flow-label{color:inherit;background:none;padding:0;font-size:clamp(17px,1.2vw,24px);font-weight:300}
#studioDialog .flow-timeline{max-width:none;border-color:var(--paper-line)}
#studioDialog .flow-toggle{color:#263b1c88;font-weight:300}
#studioDialog .flow-toggle:hover,#studioDialog .flow-step.is-active .flow-toggle,#studioDialog .flow-step.is-active .flow-index,#studioDialog .flow-step.is-past .flow-index{color:var(--paper-ink)}
#studioDialog .flow-copy{color:inherit;font-size:clamp(15px,1vw,20px);font-weight:300}
#studioDialog .flow-index{color:#263b1c88}
#studioDialog .flow-index::after{background:#263b1c66}
#studioDialog .flow-art{color:var(--paper-ink)}
html.studio-panel-open{overflow:hidden}
@media(max-width:1024px){#studioDialog{padding:80px 24px}#studioDialog .studio-paper{width:100%;max-width:850px}#studioDialog .studio-hero{font-size:clamp(42px,6vw,76px)}}
@media(max-width:600px){#studioDialog{padding:72px 12px 24px}#studioDialog .studio-paper{padding:22px 20px}#studioDialog .studio-head{gap:12px;margin-bottom:38px}#studioDialog .studio-head nav{gap:20px;font-size:20px}#studioDialog .studio-close{font-size:12px}#studioDialog .studio-hero{font-size:42px;margin-bottom:60px;line-height:1.3}#studioDialog .about-group .statement-pin{display:block;padding:20px 0 30px}#studioDialog .about-intro-side{margin-bottom:26px}#studioDialog .about-intro-body{font-size:16px}#studioDialog .about-number{min-height:114px}#studioDialog .about-number strong{font-size:40px}#studioDialog #serviceFlow{margin-top:52px}#studioDialog .flow-stage{display:block;padding-top:24px}#studioDialog .flow-label{margin-bottom:38px;font-size:18px}#studioDialog .flow-timeline{margin-left:30px;padding-left:24px}#studioDialog .flow-toggle{font-size:27px}#studioDialog .flow-copy{font-size:15px}#studioDialog .flow-index{left:-56px}#studioDialog .flow-index::after{left:26px}}
@media(prefers-reduced-motion:reduce){#studioDialog::backdrop,#studioDialog.is-closing::backdrop{transition:opacity .15s;transition-delay:0s}}

/* Right-aligned introduction and the statistics at the foot of the same sheet. */
#studioDialog .studio-head{justify-content:flex-end}
#studioDialog .studio-hero{width:max-content;max-width:100%;margin-left:auto;text-align:left}
#studioDialog .studio-paper>.about-numbers{margin-top:46px;padding-bottom:12px}
@media(max-width:600px){#studioDialog .studio-hero{font-size:clamp(30px,8.8vw,42px)}#studioDialog .studio-paper>.about-numbers{margin-top:30px}}

/* Shared body scale and masked reference entrance. */
#studioDialog .studio-hero{margin-left:0;text-align:left}
#studioDialog .about-intro-body,#studioDialog .flow-copy{font-size:clamp(15px,1vw,20px);line-height:1.85}
#studioDialog .studio-text-line{display:block;overflow:hidden}
#studioDialog .studio-line-track{display:block}
#studioDialog .studio-rule{position:absolute;left:0;top:0;width:100%;height:1px;background:var(--paper-line);transform-origin:left;pointer-events:none}
#studioDialog .studio-rule-bottom{top:auto;bottom:0}
#studioDialog .about-group .statement-pin,#studioDialog #serviceFlow,#studioDialog .about-numbers-grid{position:relative;border-top-color:transparent}
#studioDialog .about-numbers-grid{border-bottom-color:transparent}

/* Keep the reading position and align the two text columns. */
#studioDialog,#studioDialog .studio-paper{overflow-anchor:none}
#studioDialog .about-main{padding-left:65px;box-sizing:border-box}
@media(max-width:600px){#studioDialog .about-main{padding-left:55px}}

#studioDialog .about-numbers-grid{border-left:1px solid var(--paper-line);border-right:1px solid var(--paper-line)}

/* Equal inset for every statistics cell, including the outside cells. */
#studioDialog .about-number,#studioDialog .about-number:first-child,#studioDialog .about-number:last-child{padding-left:clamp(16px,1.55vw,24px);padding-right:clamp(16px,1.55vw,24px)}
#studioDialog .studio-close{font-size:18px;min-height:40px;min-width:48px;padding:6px 10px;margin-right:-10px}
#studioDialog .studio-roll-window{display:inline-block;height:1.35em;line-height:1.35;overflow:hidden;vertical-align:top}
#studioDialog .studio-close .studio-roll-window{height:1.5em;line-height:1.5}
#studioDialog .studio-roll-track{display:block;position:relative;height:100%;transform:translateY(0);transition:none}
#studioDialog .studio-roll-track>span{display:block;white-space:nowrap}
#studioDialog .studio-roll-copy{position:absolute;top:100%;left:0}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
#studioDialog .studio-paper[data-hover-ready="true"] .flow-toggle:hover .studio-roll-track,
#studioDialog .studio-paper[data-hover-ready="true"] .studio-close:hover .studio-roll-track{transform:translateY(-100%);transition:transform .4s cubic-bezier(.215,.61,.355,1)}
}

/* Let the green sheet reach the viewport edge at the end of scrolling. */
#studioDialog{padding-bottom:0}

/* Keep shared panels independent of host-page body typography. */
#studioDialog{font-size:16px;line-height:normal}

/* One introduction alignment on every host; balance both divider insets. */
#studioDialog .about-group .statement-pin{align-items:center;padding:clamp(48px,5vw,80px) 0;}
#studioDialog .about-intro-side,#studioDialog .about-main{align-self:center;}
#studioDialog .about-intro-body p:last-child{margin-bottom:0;}
#studioDialog #serviceFlow{margin-top:0;}
@media(max-width:600px){
 #studioDialog .about-group .statement-pin{padding:32px 0;}
 #studioDialog .about-intro-side{margin-bottom:24px;}
}

/* Align the introduction title with the first copy line on every host. */
#studioDialog .about-group .statement-pin{align-items:baseline;}
#studioDialog .about-intro-side,#studioDialog .about-main{align-self:baseline;}

/* Improve small-screen text contrast and reading width. */
@media(max-width:600px){#studioDialog{--paper-ink:#172511}#studioDialog .about-main{padding-left:0}#studioDialog .about-intro-body,#studioDialog .flow-copy{font-size:16px}}