:root{--paper:#fff;--ink:#171717;--muted:#737373;--line:#e5e5e5}
body{background:var(--paper)}
.site-header.hero-header{position:fixed;color:var(--ink);pointer-events:none;background:#ffffffed}
.site-header.hero-header>a,.site-header.hero-header .header-right{pointer-events:auto}
.site-header.hero-header .brand img{filter:brightness(0)}
.site-header{height:94px}.brand{width:190px}.header-right{gap:36px}.header-contact{font-size:12px}.menu-trigger{font-size:10px}.menu-trigger i{height:8px;width:30px}
.scene-stage{height:430svh;position:relative;background:#fff;color:var(--ink)}
.scene-viewport{position:sticky;top:0;height:100svh;min-height:720px;overflow:hidden}
.scene-heading{position:absolute;left:var(--pad);top:35%;z-index:3;pointer-events:none;opacity:calc(1 - var(--hero-copy,0));will-change:opacity}
.scene-heading .eyebrow{font-size:10px;letter-spacing:.16em;color:var(--muted);margin-bottom:28px}
.scene-heading h1{font:clamp(32px,3.1vw,58px)/1.8 var(--serif);letter-spacing:.01em}
.scene-heading h1 span{display:block;opacity:clamp(0,var(--hero-intro,1)*1.5,1)}
.scene-heading h1 span:last-child{opacity:clamp(0,(var(--hero-intro,1) - .12)*1.4,1)}
.scene-heading .scene-heading-note{display:block;font:10px Arial;letter-spacing:.11em;color:var(--muted);margin-top:24px}
.scene-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;touch-action:pan-y}
.scene-fallback,.scene-photo{position:absolute;left:47%;top:14%;width:44%;height:67%;object-fit:contain;z-index:2;transition:opacity .6s}
.gallery-ready .scene-fallback{opacity:0;pointer-events:none}
.scene-photo{pointer-events:none;user-select:none;will-change:transform;transition:none}
.scene-fallback{left:68%;top:47%;width:min(49%,84svh);height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 70%;transform:translate(-50%,-50%)}
.three-ready .scene-fallback{opacity:0;pointer-events:none}
.scene-caption{position:absolute;right:var(--pad);bottom:85px;z-index:4;text-align:right;background:rgb(255 255 255 / .92);padding:10px 14px}
.scene-caption .eyebrow{font-size:9px;color:var(--muted);letter-spacing:.14em;margin-bottom:8px}
.scene-caption a{display:block;font:clamp(20px,2vw,30px)/1.4 var(--serif)}
.scene-caption small{display:none}
.scene-caption a,.scene-caption .eyebrow{animation:caption-arrive .9s cubic-bezier(.2,.6,.3,1) both}
@keyframes caption-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.scene-controls{position:absolute;left:var(--pad);bottom:33px;z-index:4;display:flex;gap:16px;align-items:center;background:rgb(255 255 255 / .94);border-radius:30px}
.scene-controls>button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;font:18px Arial;transition:background .2s,color .2s,transform .3s}
.scene-controls>button:hover{background:var(--ink);color:#fff;transform:scale(1.08)}
.scene-controls>button:disabled{opacity:.3;cursor:default;background:transparent;color:var(--ink);transform:none}
.scene-counter{font:11px Arial;letter-spacing:.05em;min-width:50px;text-align:center}
.scene-dots{display:flex;gap:7px;margin-left:14px}
.scene-dots button{width:22px;height:30px;padding:0;display:grid;place-items:center}
.scene-dots button:before{content:'';width:4px;height:4px;border-radius:50%;background:var(--line);transition:transform .2s,background .2s}
.scene-dots button[aria-pressed=true]:before{background:var(--ink);transform:scale(1.5)}
.scene-scroll{position:absolute;left:50%;transform:translateX(-50%);bottom:46px;z-index:4;font:10px Arial;letter-spacing:.14em;white-space:nowrap}
.scene-scroll span{display:block;text-align:center;font-size:9px;letter-spacing:0;color:var(--muted);margin-top:8px}
.scene-gesture-hint{display:none}
.scene-motion{position:absolute;right:var(--pad);bottom:42px;z-index:4;font-size:10px;color:var(--muted);padding:5px 0;border-bottom:1px solid var(--line)}
.scene-progress{position:absolute;inset:auto 0 0;height:1px;background:var(--line);z-index:5}
.scene-progress i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:var(--ink)}
.scene-cursor{position:absolute;z-index:5;width:75px;height:75px;border-radius:50%;border:1px solid var(--line);background:#fffffff0;color:var(--ink);display:flex;align-items:center;justify-content:center;pointer-events:none;font:9px Arial;letter-spacing:.08em;transform:translate(-50%,-50%) scale(.5);opacity:0;transition:opacity .2s,transform .3s}
.scene-cursor.visible{transform:translate(-50%,-50%) scale(1);opacity:1}.scene-static{height:100svh}.scene-static .scene-cursor{display:none}
.section{padding-top:110px;padding-bottom:110px}.section-label{font-size:10px;color:var(--muted)}.section-label:before{width:3px;height:3px}
.immersive-route .intro{padding-top:135px;padding-bottom:135px;gap:9vw}.intro h2{font-size:clamp(28px,3vw,45px)}.intro p{font-size:15px;line-height:2.35}.approach-copy strong{font-weight:400}
.section-heading h2{font-size:clamp(42px,4.3vw,72px)}.section-heading p{font-size:14px;color:var(--muted)}
.work-picture{border-radius:0;transition:transform .55s cubic-bezier(.2,.7,.3,1)}.work-card:hover .work-picture{transform:translateY(-6px)}
.work-card:hover img{transform:scale(1.09)}.work-meta h3{font-size:clamp(20px,1.8vw,28px)}.work-meta p{font-size:12px}.work-meta .category{font-size:9px}
.service-teaser,.process,.company-section{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.service-list a{border-color:var(--line)}.service-teaser h2{font-size:clamp(28px,3vw,46px)}.service-list h3{font-size:clamp(18px,1.8vw,24px)}
.contact-band{background:#fff;color:var(--ink);border-top:1px solid var(--line);padding:100px var(--pad)}.contact-band h2{font-size:clamp(52px,7vw,110px)}.contact-band p{font-size:14px;color:var(--muted)}.contact-band .big-arrow{font-size:clamp(45px,6vw,90px)}
.menu-dialog{background:rgb(255 255 255 / .3);color:var(--ink);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:32px}
.menu-dialog::backdrop{background:transparent}.menu-links a{border-color:#17171726}.menu-links a span,.menu-links a small{color:#555;opacity:1}.menu-links a:hover{color:var(--muted)}.menu-bottom{color:#555;font-size:13px}
.page-head h1{font-size:clamp(64px,8vw,120px)}.page-head .jp-title{font-size:clamp(32px,4vw,58px)}
.filter-row button:hover{background:#f5f5f5}.filter-row button.active{border-color:var(--line);background:#f5f5f5}
.route-curtain{position:fixed;inset:0;z-index:80;background:#fff;transform:translateY(100%);transition:transform .38s cubic-bezier(.65,0,.35,1);pointer-events:none;display:grid;place-items:center;color:var(--ink);font:36px var(--serif);border-top:1px solid var(--line)}.route-curtain:before{content:'Friend Design.'}.route-curtain.active{transform:translateY(0);pointer-events:auto}
@media(max-width:960px){.scene-stage{height:360svh}.scene-viewport{min-height:700px}.scene-heading{top:15%;left:var(--pad)}.scene-heading .eyebrow{font-size:9px;margin-bottom:17px}.scene-heading h1{font-size:clamp(27px,4vw,34px);line-height:1.7}.scene-heading .scene-heading-note{display:none}.scene-fallback,.scene-photo{left:10%;top:29%;width:80%;height:43%}.scene-caption{bottom:105px;left:var(--pad);right:var(--pad)}.scene-caption a{font-size:23px}.scene-scroll{display:none}.scene-dots{display:none}.scene-controls{bottom:27px}.scene-motion{bottom:37px}.scene-cursor{display:none}.scene-static{height:100svh}}
@media(max-width:640px){.site-header{height:78px}.brand{width:163px}.section{padding:75px var(--pad)}.scene-heading{top:15%}.scene-heading h1{font-size:27px}.scene-heading .eyebrow{font-size:8px;margin-bottom:17px}.scene-caption .eyebrow{font-size:8px}.scene-caption a{font-size:21px}.scene-controls{gap:12px}.scene-controls>button{width:42px;height:42px}.scene-motion{font-size:9px}.immersive-route .intro{padding:90px var(--pad)}.intro h2{font-size:29px}.intro p{font-size:14px}.section-heading h2{font-size:48px}.contact-band{padding:75px var(--pad)}.contact-band h2{font-size:57px}.work-card:hover .work-picture{transform:none}.work-meta h3{font-size:23px}.route-curtain{font-size:28px}}
@media(max-width:960px) and (max-height:760px){.scene-heading{top:14%}.scene-heading h1{font-size:24px}.scene-heading .eyebrow{margin-bottom:14px}}
@media(max-width:960px){.scene-fallback{left:50%;top:53%;width:min(84%,49.5svh);height:auto;aspect-ratio:3/2}}
@media(max-width:640px){.scene-gesture-hint{position:absolute;left:var(--pad);right:var(--pad);bottom:176px;z-index:4;display:grid;justify-items:center;gap:6px;pointer-events:none;text-align:center;color:var(--muted)}.scene-gesture-label{display:flex;align-items:center;gap:16px;font:9px Arial;letter-spacing:.16em;color:var(--ink)}.scene-gesture-label span{display:flex;align-items:center;gap:7px}.scene-gesture-label .ui-icon{width:16px;height:16px}.scene-gesture-label i{width:1px;height:11px;background:var(--line)}.scene-gesture-hint p{margin:0;font-size:11px;line-height:1.4;letter-spacing:.04em}}
@media(prefers-reduced-motion:reduce){.scene-gesture-hint{display:none}}
@media(prefers-reduced-motion:reduce){.scene-stage{height:100svh}.scene-viewport{position:relative}.scene-cursor,.route-curtain{display:none}.work-card:hover .work-picture{transform:none}.scene-caption a,.scene-caption .eyebrow{animation:none}}