/* Fovoya — sketch-to-reality hero. All styles are scoped to the homepage. */
body.home{padding-top:76px;background:#fff;overflow-x:hidden}
.home .site-header,.home .site-header.is-scrolled{height:76px;padding:12px 3.8%;background:#fff;border-bottom:1px solid #e3e3e3}
.home .site-header.is-hidden{transform:none}
.home .wordmark{width:100px;display:flex;align-items:center}
.home .wordmark img{display:block;width:100%;height:auto;filter:brightness(0)}
.home .wordmark>span{display:none}
.design-home{--hero-blue:#082bb9;--hero-ink:#171713;color:var(--hero-ink);background:#fff;height:calc(100svh - var(--home-header,112px) - var(--admin-height,0px));min-height:0;display:flex;flex-direction:column}
.design-stage{position:relative;display:flex;flex:1;flex-direction:column;padding:0;height:auto;min-height:0}
.design-canvas{position:relative;width:100%;max-width:none;margin:0;flex:1;min-height:0;touch-action:pan-y pinch-zoom;user-select:none}
.design-scene{display:block;position:absolute;inset:0;width:100%;height:100%}
.board-grid{stroke:#9da5b1;stroke-width:.65;opacity:.32}
.board-axes{stroke:#87919f;stroke-width:.8;stroke-dasharray:20 5 2 5;opacity:.7}
.board-marks{stroke:#697481;stroke-width:.9;opacity:.75}
.board-dimensions{font:9px monospace;letter-spacing:1px;fill:#69717e;stroke:none}
.construction{stroke:#8e98a6;stroke-width:.8;opacity:.75}
.draft-logo{fill:none;stroke:#343940;stroke-width:1.1}
.draft-ghost{fill:none;stroke:#949da9;stroke-width:.6;stroke-dasharray:24 5 3 9;opacity:.45}
.hero-photo{overflow:hidden}
.hero-photo .photo-draft{filter:url(#draft-ink)}
.color-logo{fill:var(--hero-blue)}
.design-canvas.reveal-ready{cursor:auto}
.design-canvas.reveal-ready.is-tracking{cursor:none}
.design-canvas:focus-visible{outline:1px solid var(--hero-blue);outline-offset:-5px}
.reveal-cursor{position:absolute;left:0;top:0;opacity:0;pointer-events:none;z-index:3;width:16px;height:16px;margin:-8px 0 0 -8px;color:var(--hero-blue);transition:opacity .25s ease}
.reveal-ready.is-tracking .reveal-cursor{opacity:1}
.reveal-cursor:before,.reveal-cursor:after{content:'';position:absolute;background:currentColor}
.reveal-cursor:before{height:1px;width:14px;left:1px;top:8px;background:linear-gradient(to right,currentColor 36%,transparent 36%,transparent 64%,currentColor 64%)}
.reveal-cursor:after{width:1px;height:14px;top:1px;left:8px;background:linear-gradient(to bottom,currentColor 36%,transparent 36%,transparent 64%,currentColor 64%)}
.is-dragging .reveal-cursor:before{height:2px}
.reveal-guides{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;opacity:0;color:var(--hero-blue);transition:opacity .25s ease}
.reveal-ready.is-tracking .reveal-guides{opacity:1}
.reveal-guides:before,.reveal-guides:after{content:'';position:absolute;background:currentColor;opacity:.28}
.reveal-guides:before{left:0;top:var(--guide-y,0px);width:100%;height:1px}
.reveal-guides:after{top:0;left:var(--guide-x,0px);width:1px;height:100%}
.canvas-note{font:var(--note-size,8px) Manrope,Arial,sans-serif;letter-spacing:1.1px;fill:#57564e}
.design-contact:focus-visible{outline:2px solid var(--hero-blue);outline-offset:5px}
.design-intro{display:grid;flex-shrink:0;grid-template-columns:minmax(0,1.65fr) minmax(240px,.75fr);gap:clamp(36px,7vw,128px);align-items:end;width:100%;padding:18px 3.8% 20px;border-top:1px solid #d4d8dd}
.design-statement{min-width:0}
.design-eyebrow{margin:0 0 8px;font:10px/1.6 monospace;letter-spacing:.09em;text-transform:uppercase;color:#66707b}
.design-intro h1,html[lang^=zh] .design-intro h1{font-family:Manrope,'PingFang SC','Microsoft Yahei',sans-serif;font-size:clamp(28px,2.8vw,48px);font-weight:400;line-height:1.16;letter-spacing:-.045em;margin:0;text-wrap:balance}
html[lang^=zh] .design-intro h1{letter-spacing:-.025em}
.design-description{display:grid;gap:4px;width:100%;max-width:320px;justify-self:end}
.design-description p{max-width:26ch;font-size:15px;line-height:1.65;margin:0;text-align:left;color:#50565e}
/* Draft-line CTA: the arrow is clipped inside its own frame. */
.design-contact{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;width:100%;padding:2px 0 6px;border-bottom:1px solid #b4bac2;background:transparent;color:var(--hero-ink);text-decoration:none;font-size:13px;line-height:1.5;touch-action:manipulation;transition:color .2s ease}
.design-contact:before{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--hero-blue);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.design-contact-icon{position:relative;flex:0 0 30px;height:30px;border:1px solid #a4adb8;overflow:hidden;transition:background .25s ease,border-color .25s ease,transform .15s ease}
.design-contact-icon:before,.design-contact-icon:after{content:'\2197';position:absolute;inset:0;display:grid;place-items:center;font:22px/1 Arial,sans-serif;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.design-contact-icon:after{transform:translate(-100%,100%)}
.design-contact:focus-visible{color:var(--hero-blue)}
.design-contact:focus-visible:before{transform:scaleX(1)}
.design-contact:focus-visible .design-contact-icon{background:var(--hero-blue);border-color:var(--hero-blue);color:#fff}
.design-contact:focus-visible .design-contact-icon:before{transform:translate(100%,-100%)}
.design-contact:focus-visible .design-contact-icon:after{transform:translate(0,0)}
@media(hover:hover){
 .design-contact:hover{color:var(--hero-blue)}
 .design-contact:hover:before{transform:scaleX(1)}
 .design-contact:hover .design-contact-icon{background:var(--hero-blue);border-color:var(--hero-blue);color:#fff}
 .design-contact:hover .design-contact-icon:before{transform:translate(100%,-100%)}
 .design-contact:hover .design-contact-icon:after{transform:translate(0,0)}
}
.design-contact:active{color:var(--hero-blue)}
.design-contact:active:before{transform:scaleX(1)}
.design-contact:active .design-contact-icon{transform:scale(.92);background:var(--hero-blue);border-color:var(--hero-blue);color:#fff}
@media(max-width:900px){
 body.home{padding-top:72px}
 .home .site-header,.home .site-header.is-scrolled{height:72px;padding:14px 6%}
 .board-grid,.board-axes,.board-marks,.construction path,#brand-contours path{vector-effect:non-scaling-stroke}
 .board-grid{stroke-width:.5}
 .board-axes{stroke-width:.65}
 .board-marks,.construction path{stroke-width:.75}
 .draft-logo{stroke-width:1.05}
 .draft-ghost{stroke-width:.5}
 .board-dimensions{display:none}
 .design-intro{padding:16px 6% 18px;grid-template-columns:minmax(0,1.3fr) minmax(210px,1fr);gap:32px}
 .design-intro h1,html[lang^=zh] .design-intro h1{font-size:clamp(30px,4.6vw,41px)}
 .design-eyebrow{max-width:30ch;font-size:9px;margin-bottom:8px}
 .design-description p{font-size:14px}
}
@media(max-width:600px){
 .design-intro{grid-template-columns:minmax(0,1fr);gap:12px;padding-top:14px;padding-bottom:16px}
 .design-intro h1,html[lang^=zh] .design-intro h1{font-size:clamp(26px,6.6vw,36px);max-width:none}
 .design-eyebrow{max-width:none}
 .design-description{max-width:none;justify-self:stretch;grid-template-columns:minmax(0,1fr) max-content;align-items:center;gap:14px}
 .design-contact{max-width:320px;gap:12px}
}
@media(prefers-reduced-motion:reduce){.reveal-cursor,.reveal-guides,.design-contact:after{transition:none}}
@media(prefers-reduced-motion:reduce){
 .design-contact,.design-contact:before,.design-contact-icon,.design-contact-icon:before,.design-contact-icon:after{transition:none}
 .design-contact-icon:after{display:none}
 .design-contact:is(:hover,:focus-visible,:active) .design-contact-icon:before,.design-contact:active .design-contact-icon{transform:none}
}
@media(max-width:560px){.home{--home-header:72px}}
.admin-bar.home{--admin-height:32px}
@media(max-width:782px){.admin-bar.home{--admin-height:46px}}

/* Portrait small screens: compact readable intro; canvas receives the remaining height. */
@media(max-width:600px){
 .design-intro{padding:12px 6%;gap:10px}
 .design-intro h1,html[lang^=zh] .design-intro h1{font-size:clamp(24px,6.3vw,32px);line-height:1.18}
 .design-eyebrow{font-size:9px;line-height:1.4;margin-bottom:6px}
 .design-description p{font-size:12px;line-height:1.5}
 .design-contact{font-size:12px}
}
/* Compact three-image composition: intro follows the artwork, not the viewport bottom. */
@media(min-width:1101px){
 .design-home{height:calc(100svh - var(--home-header,112px) - var(--admin-height,0px) - clamp(44px,6svh,64px))}
 .design-intro{padding-top:22px;padding-bottom:24px}
}
@media(max-width:1100px){
 .design-home{height:auto}
 .design-stage{flex:none;height:min(calc(48.6vw + 100px),max(240px,calc(100svh - var(--home-header,112px) - var(--admin-height,0px) - 170px)))}
}

/* Normal header: independent of the interactive drafting canvas. */
.home .site-header,.home .site-header.is-scrolled,.home .site-header.has-mega{background:#f3f4f6;border-bottom-color:#e2e5e9}
.home .wordmark .nav-wordmark{display:block;width:100%;height:auto}

/* The original studio character rests its paws on the contact rule. */
.design-contact{align-items:flex-end;gap:16px;padding:0;min-height:64px}
.design-contact > .nav-label{padding-bottom:12px}
.design-mascot-enter{display:block;flex:0 0 80px;width:80px;margin-bottom:-5px;pointer-events:none}
.design-mascot{display:block;width:100%;height:auto;transform-origin:50% 95%;transition:transform .3s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){.design-contact:hover .design-mascot{transform:translateY(-3px) rotate(-2deg)}}
.design-contact:focus-visible .design-mascot{transform:translateY(-3px)}
.design-contact:active .design-mascot{transform:translateY(-1px) scale(.97)}
@media(max-width:600px){
 .design-contact{width:max-content;max-width:100%;gap:8px;min-height:54px}
 .design-mascot-enter{flex-basis:64px;width:64px;margin-bottom:-4px}
 .design-contact > .nav-label{flex:0 0 auto;padding-bottom:10px;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
 .design-mascot{transition:none}
 .design-contact:is(:hover,:focus-visible,:active) .design-mascot{transform:none}
}