@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400&family=Playfair+Display:wght@400&family=Shippori+Mincho:wght@400;500&display=swap');
:root{--paper:#0b0c06;--ink:#e9e9dc;--line:#ffffff22;--muted:#a6a89a}html{scroll-behavior:smooth}body{font-family:'Shippori Mincho',serif;background:#0b0c06;color:#e9e9dc}body.menu-open{overflow:hidden}p{font-family:'Shippori Mincho',serif;line-height:2.4}.ref-header{position:fixed;inset:0 0 auto;height:150px;padding:5.5vh 5%;background:transparent;z-index:30;pointer-events:none;color:#f4f3e9;mix-blend-mode:difference}.ref-header a,.ref-header button{pointer-events:auto}.chrono-mark{display:flex;flex-direction:column;align-items:center;gap:7px;width:56px}.monogram{font-family:'Cinzel',serif;font-size:43px;line-height:.85;letter-spacing:-10px;position:relative;padding-right:10px}.monogram>span{font-size:32px;display:block;line-height:.75;margin-left:10px;letter-spacing:0}.chrono-mark small{font-family:'Cinzel',serif;font-size:7px;letter-spacing:1.7px;text-align:center;line-height:1.3}.header-right{display:flex;gap:80px;align-items:center}.language,.menu-toggle{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.02em}.menu-toggle{background:none;color:inherit;border:0;padding:12px 0;cursor:pointer}.language:before{content:'·';display:block;text-align:center;margin-bottom:7px}.site-menu{position:fixed;inset:0;margin:0;width:100vw;max-width:none;height:100dvh;max-height:none;border:0;padding:0;background:#10120ced;color:var(--ink);backdrop-filter:blur(22px)}.site-menu::backdrop{background:#090b08bb}.menu-layout{padding:15vh 15%;height:100%;display:grid;grid-template-columns:1fr 1.3fr;align-items:center;gap:50px}.menu-layout nav{display:flex;flex-direction:column;align-items:start;gap:15px}.menu-layout nav a{font-family:'Playfair Display',serif;font-size:clamp(30px,4vw,60px);line-height:1.1}.menu-caption{font-size:12px;line-height:2.5;letter-spacing:2px}.menu-close{position:absolute;top:6vh;right:5%;border:0;background:none;color:inherit;padding:12px;cursor:pointer;font-family:'Cinzel',serif;font-size:12px}.ref-hero{height:100svh;min-height:620px;position:relative;overflow:hidden;background:#161d15}.ref-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 37%;filter:saturate(.55) brightness(.67)}.ref-hero-tint{position:absolute;inset:0;background:linear-gradient(0deg,#080d0bea,transparent 55%),linear-gradient(90deg,#14211950,transparent)}.ref-hero h1{position:absolute;left:17.5%;top:49%;margin:0;font-family:'Playfair Display',serif;font-size:clamp(16px,1.4vw,22px);font-weight:400;line-height:1.5}.hero-footer{position:absolute;left:5%;right:5%;bottom:28px;display:grid;grid-template-columns:14% 1fr auto;align-items:end;font-family:'Cinzel',serif;font-size:10px;line-height:1.5;color:#e0e2d3b8}.philosophy-stage{position:relative;isolation:isolate;overflow:clip}.stage-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden}.stage-backdrop img{width:100%;height:100%;object-fit:cover;filter:brightness(.37) saturate(.45);object-position:center}.stage-backdrop:after{content:'';position:absolute;inset:0;background:linear-gradient(#0b0c06 0%,transparent 35%,transparent 75%,#0b0c06 100%)}.ref-philosophy{position:relative;min-height:1100px;height:145svh;padding:44vh 0 10vh}.side-label{position:absolute;left:5.2%;top:80px;writing-mode:vertical-rl;font-family:'Cinzel',serif;font-size:14px;line-height:1;letter-spacing:.03em;color:#d6d8c9b5}.ref-philosophy>.side-label{top:47vh}.philosophy-copy{margin-left:17.5%;position:relative;z-index:3;width:47%}.reference-home h2{font-family:'Playfair Display',serif;font-weight:400;letter-spacing:-.035em;font-size:clamp(36px,4.3vw,65px);line-height:1.24;margin:0 0 30px}.philosophy-copy h2 span{display:block;margin-left:15%}.reference-home p{font-size:clamp(12px,1.05vw,16px);line-height:2.5;letter-spacing:.05em;margin:25px 0}.line-link{display:inline-flex;gap:12px;align-items:center;font-family:'Playfair Display',serif;font-size:16px;margin-top:50px;padding:12px 0}.line-link:before{content:'';width:36px;height:1px;background:currentColor;transition:width .3s}.line-link:hover:before{width:55px}.floating-picture{position:absolute;overflow:hidden;will-change:transform}.floating-picture img{height:100%;width:100%;object-fit:cover;filter:saturate(.7) brightness(.75)}.floating-one{left:5%;top:10%;width:20%;height:24%}.floating-two{right:5%;top:23%;width:32.5%;height:43%}.floating-three{right:10%;top:8%;width:17.5%;height:28%;z-index:2}.ref-project-intro{position:relative;min-height:750px;height:100svh;padding:5vh 10% 15vh 50%;display:flex;align-items:flex-start}.ref-project-intro .side-label{top:10vh}.ref-project-intro>div{max-width:580px}.ref-projects{padding:30px 5% 50px;background:#0b0c06}.ref-project{display:grid;grid-template-columns:21% 1fr 25%;gap:4.2%;padding:75px 0 45px;border-bottom:1px solid #ffffff20;min-height:410px}.project-rail{display:flex;flex-direction:column;justify-content:space-between;font-family:'Cinzel',serif;font-size:12px;padding:5px 0 25px}.project-rail span:first-child{writing-mode:vertical-rl;align-self:flex-start;font-size:14px}.reference-home .project-copy h2{font-size:clamp(40px,4vw,60px);margin:0 0 12px}.project-copy h3{font-size:16px;line-height:1.8;font-weight:400;margin:0 0 20px}.project-copy p{font-size:13px;line-height:2.2}.project-copy .line-link{margin-top:30px}.project-image{display:block;padding-top:10px}.project-image img{width:100%;height:100%;max-height:380px;aspect-ratio:3/4;object-fit:cover;filter:brightness(.8) saturate(.72);transition:filter .5s}.project-image:hover img{filter:brightness(.98) saturate(.9)}.ref-company{position:relative;isolation:isolate;padding:150px 5%;min-height:980px;overflow:hidden;text-align:center}.company-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;z-index:-2;filter:brightness(.43) saturate(.4)}.ref-company:after{content:'';position:absolute;inset:0;background:linear-gradient(#0b0c0600,#0b0c06);z-index:-1}.company-brand{display:block;font-family:'Cinzel',serif;font-size:16px;letter-spacing:5px;line-height:1.8;margin-bottom:65px}.company-copy{max-width:650px;margin:auto}.reference-home .company-copy h2{font-size:clamp(42px,4.5vw,65px)}.company-copy .line-link{margin-top:25px}.ref-contact{position:relative;text-align:center;padding:140px 10% 100px}.ref-contact .small-service-link{display:block;font-size:12px;margin:30px auto 0;text-decoration:underline;text-underline-offset:8px}.ref-footer{padding:40px 5% 25px;overflow:hidden;background:#0b0c06}.huge-name{font-family:'Playfair Display',serif;font-size:29vw;letter-spacing:-.075em;line-height:1.1;display:block;margin-left:-1%;color:#dadfcd}.footer-inner{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;padding:60px 0}.footer-inner .line-link{margin:0;align-self:start}.footer-inner nav{display:flex;flex-direction:column;align-items:start;gap:12px;font-family:'Cinzel',serif;font-size:12px}.footer-inner nav a{padding:0}.footer-studio{font-family:'Cinzel',serif;font-size:11px;line-height:2;letter-spacing:1px}.ref-bottom{display:flex;justify-content:space-between;padding:35px 0 10px;font-family:'Cinzel',serif;font-size:10px;color:#a6aa98}.ref-footer .preview-note{font-size:9px}.contact-band{background:#11130d;border-color:#ffffff20}.contact-band .eyebrow{color:#9dA58f}.page-main,.story-heading{padding-top:220px}.page-title,.section-heading h2,.service-row h3{font-family:'Playfair Display',serif;font-style:normal}.page-title i{font-style:normal}.page-title{font-size:clamp(54px,6vw,90px);line-height:1.12}.work-meta>span{color:#a5ac95}.photo{background:#161b12}.photo img{filter:saturate(.78) brightness(.88)}.filters button{color:#e9e9dc}.service-detail,.process,.story-note,.contact-layout{color:#e1e3d6}.story-cover img{background:#11150e}.submit{background:#dce1ce;color:#171b12;border-color:#dce1ce}select option{background:#13190f;color:#f1f2e9}input,select,textarea{border-color:#6b735f}.about-layout h2,.service-detail h2,.contact-layout h2{font-family:'Shippori Mincho',serif}.motion{opacity:1;transform:none}.motion.is-pending{opacity:0;transform:translateY(28px)}.motion{transition:opacity 1.2s ease,transform 1.2s ease}.reveal{animation:none}.ref-project.motion{transition-delay:.1s}
@media(min-width:1500px){.ref-philosophy{min-height:1300px}.ref-project-intro{min-height:950px}.ref-project{min-height:500px}.project-image img{max-height:500px}}
@media(max-width:700px){.ref-header{height:120px;padding:30px 6%;align-items:start}.chrono-mark{width:42px}.monogram{font-size:33px}.monogram>span{font-size:25px}.chrono-mark small{font-size:6px}.header-right{gap:35px}.language,.menu-toggle{font-size:10px}.ref-hero{min-height:640px;height:100svh}.ref-hero-photo{object-position:54% center}.ref-hero h1{left:17.5%;font-size:16px;top:49%}.hero-footer{left:6%;right:6%;font-size:8px;grid-template-columns:23% 1fr auto;bottom:23px}.side-label{left:6%;font-size:11px}.ref-philosophy{height:auto;min-height:960px;padding:410px 0 150px}.floating-one{top:75px;left:6%;width:29%;height:170px}.floating-three{right:6%;top:60px;width:27%;height:220px}.floating-two{top:180px;right:12%;width:37%;height:290px}.philosophy-copy{margin-left:17%;width:77%;padding-top:30px}.reference-home h2{font-size:36px;line-height:1.2}.philosophy-copy h2 span{margin-left:4%;}.reference-home p{font-size:13px;line-height:2.3}.ref-philosophy>.side-label{top:450px}.line-link{font-size:15px;margin-top:30px}.ref-project-intro{height:auto;min-height:650px;padding:110px 7% 130px 27%;align-items:start}.ref-project-intro .side-label{top:110px}.stage-backdrop img{object-position:50% center}.ref-projects{padding:15px 6% 40px}.ref-project{grid-template-columns:12% 1fr;gap:20px;padding:50px 0 35px;min-height:0}.project-rail{grid-row:1/3;padding-bottom:0}.project-rail span:first-child{font-size:11px}.project-copy h3{font-size:14px;line-height:1.9}.reference-home .project-copy h2{font-size:39px}.project-copy p{font-size:12px}.project-copy .line-link{margin-top:10px}.project-image{grid-column:2;width:83%;justify-self:end;padding-top:10px}.project-image img{max-height:340px;aspect-ratio:4/5}.ref-company{min-height:830px;padding:100px 8% 80px}.company-brand{font-size:13px;letter-spacing:4px;margin-bottom:45px}.ref-company .side-label{top:100px}.reference-home .company-copy h2{font-size:42px}.company-copy p{font-size:13px}.ref-contact{padding:95px 10% 70px}.ref-contact .side-label{top:100px}.ref-contact h2{font-size:31px}.ref-contact p{font-size:12px}.ref-footer{padding:30px 6% 20px}.footer-inner{grid-template-columns:1fr 1fr;gap:40px 20px;padding:40px 0 20px}.footer-inner .line-link{font-size:14px}.footer-studio{grid-column:1/-1;font-size:10px}.ref-bottom{font-size:8px;gap:15px;flex-wrap:wrap}.menu-layout{padding:100px 15%;grid-template-columns:1fr;gap:30px}.menu-caption{font-size:10px;align-self:end}.menu-layout nav{align-self:start;gap:18px}.menu-layout nav a{font-size:35px}.menu-close{top:30px;right:5%}.page-main,.story-heading{padding-top:175px}.page-title{font-size:49px}.works-intro{font-size:12px}.filters button{font-size:11px}.contact-band>a{font-size:24px}.company-background{object-position:48% center}}
@media(prefers-reduced-motion:reduce){.motion.is-pending{opacity:1;transform:none}.floating-picture{transform:none!important}.ref-hero-photo{transform:none!important}}
.ref-header{mix-blend-mode:normal;text-shadow:0 1px 10px #0005}.floating-two img{object-position:center top}.ref-hero-tint{background:linear-gradient(0deg,#080d0bea,transparent 55%),linear-gradient(180deg,#0d191d33,transparent 45%)}

/* Softer charcoal and brighter photography — selected direction */
:root{--paper:#292f28;--ink:#f0f0e5;--line:#ffffff30;--muted:#bec5b5}
body{background:#292f28;color:#f0f0e5}
.ref-hero{background:#344036}
.ref-hero-photo{filter:saturate(.78) brightness(.90)}
.ref-hero-tint{background:linear-gradient(0deg,#19271fb8,transparent 48%),linear-gradient(180deg,#14231a24,transparent 40%)}
.ref-hero h1{text-shadow:0 1px 14px #101b1670}
.hero-footer{color:#f0f2e5e0}
.stage-backdrop img{filter:brightness(.57) saturate(.68)}
.stage-backdrop:after{background:linear-gradient(#292f28 0%,#16201620 35%,#16201620 75%,#292f28 100%)}
.floating-picture img{filter:saturate(.88) brightness(.96)}
.ref-projects,.ref-footer{background:#292f28}
.project-image img{filter:brightness(.98) saturate(.90)}
.project-image:hover img{filter:brightness(1.03) saturate(1)}
.company-background{filter:brightness(.65) saturate(.65)}
.ref-company:after{background:linear-gradient(#292f2826,#292f28)}
.site-menu{background:#293329f5}
.site-menu::backdrop{background:#1c281fb0}
.contact-band{background:#30382e}
.photo{background:#353e31}
.photo img{filter:saturate(.94) brightness(1)}
.story-cover img{background:#30382e}
.work-meta>span,.ref-bottom{color:#c0c9b5}
select option{background:#293329;color:#f1f2e9}
/* Atmosphere and cinematic pacing */
.ref-hero-photo{will-change:transform;transform-origin:center 45%}
.atmosphere{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.88;mix-blend-mode:screen}
.ref-hero h1,.hero-footer{z-index:2}
.ref-hero h1{animation:hero-copy-in 1.8s cubic-bezier(.2,.7,.25,1) both;animation-delay:.25s}
.motion-control{position:absolute;bottom:75px;right:5%;z-index:3;border:0;border-bottom:1px solid #ffffff50;padding:6px 0;background:none;color:#f1f3e4;font-family:'Shippori Mincho',serif;font-size:11px;letter-spacing:.08em;cursor:pointer;text-shadow:0 1px 8px #1a291b}
.project-image{overflow:hidden}.project-image img{transition:filter .6s,transform .5s ease-out}
.motion{transition:opacity 1.3s ease,transform 1.5s cubic-bezier(.2,.7,.25,1),clip-path 1.5s cubic-bezier(.2,.7,.25,1);clip-path:inset(0 0 0 0)}
.motion.is-pending{transform:translateY(35px);clip-path:inset(0 0 8% 0)}
.philosophy-copy.motion h2,.ref-project-intro .motion h2{transition:letter-spacing 1.5s ease}
.philosophy-copy.is-pending h2,.ref-project-intro .is-pending h2{letter-spacing:-.015em}
.ref-project .project-image{transition:clip-path 1.4s cubic-bezier(.2,.7,.25,1);clip-path:inset(0)}
.ref-project.is-pending .project-image{clip-path:inset(10% 0 0 0)}
.ref-footer .huge-name{transition:letter-spacing .8s ease}.ref-footer .huge-name:hover{letter-spacing:-.06em}
.motion-paused .motion{transition:none!important;clip-path:none!important}.motion-paused .motion.is-pending{opacity:1;transform:none}
.motion-paused .floating-picture,.motion-paused .ref-hero-photo,.motion-paused .company-background{transform:none!important}
@keyframes hero-copy-in{from{opacity:0;translate:0 13px;filter:blur(3px)}to{opacity:1;translate:0;filter:blur(0)}}
@media(max-width:700px){.atmosphere{opacity:.72}.motion-control{font-size:10px;bottom:75px;right:6%}}
@media(prefers-reduced-motion:reduce){.ref-hero h1{animation:none}.ref-hero-photo,.company-background,.project-image img{transform:none!important}.motion,.motion.is-pending{clip-path:none!important}.atmosphere{opacity:.45}}

/* Dark opening with denser directional fog; other sections stay brighter. */
.ref-hero-photo{filter:saturate(.55) brightness(.64)}
.ref-hero-tint{background:linear-gradient(0deg,#080d0bdb,transparent 58%),linear-gradient(180deg,#0d191d42,transparent 50%)}
.atmosphere{opacity:.57;mix-blend-mode:normal}
@media(max-width:700px){.atmosphere{opacity:.52}}
@media(prefers-reduced-motion:reduce){.atmosphere{opacity:.45}}

/* Keep the couple fully inside the opening composition. */
.ref-hero-photo{object-position:66% 77%;transform-origin:66% bottom;transform:none!important}

/* Richer green atmosphere, with the feet just inside the frame. */
.ref-hero-photo{filter:saturate(1.08) brightness(.66)}
.ref-hero-tint{background:linear-gradient(0deg,#08190de0,transparent 58%),linear-gradient(180deg,#193d272e,#153c2420)}

/* The opening title remains in place as the photograph appears behind it. */
.opening-sequence{position:fixed;inset:0;z-index:1000;background:#090a04;pointer-events:none;animation:opening-away 3.6s ease-in-out both}
.opening-sequence>span{position:absolute;left:17.5%;top:49%;color:#e9e9dc;font-family:'Playfair Display',serif;font-size:clamp(16px,1.4vw,22px);font-weight:400;line-height:1.5;animation:opening-name 1.8s .25s cubic-bezier(.2,.6,.25,1) both}
.opening-progress{position:absolute;left:17.5%;bottom:6.5%;font-family:'Playfair Display',serif;font-size:14px;color:#e9e9dc;animation:opening-count-away 3.6s both}
.ref-hero h1{animation:none}
@keyframes opening-name{from{opacity:0;clip-path:inset(0 100% 0 0);filter:blur(2px)}to{opacity:1;clip-path:inset(0);filter:blur(0)}}
@keyframes opening-away{0%,58%{opacity:1;visibility:visible}99%{opacity:0;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes opening-count-away{0%,56%{opacity:1}68%,100%{opacity:0}}
@media(max-width:700px){.opening-sequence>span{font-size:16px}}
@media(prefers-reduced-motion:reduce){.opening-sequence{display:none}}


/* Shared pointer effect, retained across the main studio site. */
.pointer-bloom{position:fixed;inset:0;width:100%;height:100%;z-index:50;pointer-events:none;mix-blend-mode:screen;opacity:.57}
@media(prefers-reduced-motion:reduce){.pointer-bloom{display:none}}

/* First transition: retain the landscape while mist fades and photographs rise. */
.opening-landscape{position:relative;isolation:isolate}
.opening-landscape .ref-hero{position:sticky;top:0;z-index:0}
.opening-landscape .philosophy-stage{z-index:1;overflow:clip}
.opening-landscape .stage-backdrop{background:#202b22;mask-image:linear-gradient(to bottom,transparent,#000 650px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 650px)}
.opening-landscape .stage-backdrop img{filter:brightness(.40) saturate(.65);opacity:.65}
.opening-landscape .stage-backdrop:after{background:linear-gradient(to bottom,#202b2200,#202b2299 45%,#292f28 100%)}
.opening-landscape .ref-hero h1,.opening-landscape .hero-footer,.opening-landscape .motion-control{opacity:var(--hero-copy-opacity,1)}
.opening-landscape .atmosphere{opacity:calc(.57 * var(--fog-presence,1))}
.opening-landscape .ref-hero:after{content:'';position:absolute;inset:0;pointer-events:none;background:#202b22;opacity:var(--landscape-shade,0);z-index:1}
@media(max-width:700px){.opening-landscape .atmosphere{opacity:calc(.52 * var(--fog-presence,1))}.opening-landscape .stage-backdrop{mask-image:linear-gradient(to bottom,transparent,#000 480px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 480px)}}
@media(prefers-reduced-motion:reduce){.opening-landscape .ref-hero{position:relative}.opening-landscape .ref-hero:after{display:none}}


/* Gentle photo reveals within the original second-section composition. */
.ref-philosophy .floating-two img{object-position:58% center}
.ref-philosophy .floating-picture{transition:opacity 1.3s ease,clip-path 1.5s cubic-bezier(.2,.7,.25,1)}
.ref-philosophy .floating-picture.photo-pending{opacity:0;clip-path:inset(8% 0 8% 0)}
.ref-philosophy .floating-picture.photo-shown{opacity:1;clip-path:inset(0)}
.ref-philosophy .floating-picture img{transition:scale 1.8s cubic-bezier(.2,.7,.25,1)}
.ref-philosophy .floating-picture.photo-pending img{scale:1.08}
.ref-philosophy .floating-picture.photo-shown img{scale:1}
@media(hover:hover){.ref-philosophy .floating-picture:hover img{scale:1.035}}
@media(prefers-reduced-motion:reduce){.ref-philosophy .floating-picture,.ref-philosophy .floating-picture img{transition:none!important;opacity:1!important;clip-path:none!important;scale:1!important}}
.motion-paused .ref-philosophy .floating-picture{opacity:1;clip-path:none;transition:none}
.motion-paused .ref-philosophy .floating-picture img{scale:1;transition:none}

/* Aligned silver typography, with a quiet staggered entrance. */
.ref-philosophy .philosophy-title{color:#bfc4bf;font-size:clamp(32px,4vw,60px);line-height:1.28;letter-spacing:-.035em}
.ref-philosophy .philosophy-title span{display:block;margin-left:0;white-space:nowrap;transition:opacity 1s ease,translate 1.2s cubic-bezier(.2,.7,.25,1);transition-delay:.08s}
.ref-philosophy .philosophy-title span:nth-child(2){transition-delay:.22s}
.ref-philosophy .philosophy-title span:nth-child(3){transition-delay:.36s}
.ref-philosophy .is-pending .philosophy-title span{opacity:0;translate:0 12px}
.ref-philosophy .philosophy-copy p{color:#b7bdb6}
.ref-philosophy .philosophy-copy .line-link{color:#c3c8c1}
@media(max-width:700px){.ref-philosophy .philosophy-title{font-size:clamp(25px,5.3vw,36px);line-height:1.35}}
@media(prefers-reduced-motion:reduce){.ref-philosophy .philosophy-title span{transition:none;translate:none;opacity:1}}
.motion-paused .ref-philosophy .philosophy-title span{transition:none;translate:none;opacity:1}

/* Reserve a separate text row so drifting photographs cannot cover the copy. */
.ref-philosophy{height:auto;min-height:0;display:grid;grid-template-columns:20fr 47.5fr 32.5fr;grid-template-rows:auto auto;row-gap:100px;padding:100px 5% 140px}
.ref-philosophy .floating-one{position:relative;inset:auto;grid-column:1;grid-row:1;width:100%;height:clamp(230px,24vw,360px);margin-top:0}
.ref-philosophy .floating-two{position:relative;inset:auto;grid-column:3;grid-row:1;width:100%;height:clamp(360px,36vw,540px);margin-top:90px}
.ref-philosophy .philosophy-copy{grid-column:1/-1;grid-row:2;width:75%;margin-left:14%;padding-top:0}
.ref-philosophy>.side-label{top:auto;bottom:240px}
@media(max-width:700px){
.ref-philosophy{grid-template-columns:29fr 22fr 37fr;row-gap:70px;padding:75px 6% 120px}
.ref-philosophy .floating-one{height:170px;margin-top:0}
.ref-philosophy .floating-two{height:290px;margin-top:105px}
.ref-philosophy .philosophy-copy{width:88%;margin-left:12%;padding-top:0}
.ref-philosophy>.side-label{bottom:240px}
}

/* Matte treatment only on the two philosophy photographs. */
.ref-philosophy .floating-picture{isolation:isolate}
.ref-philosophy .floating-picture img{filter:saturate(.72) brightness(.85) contrast(.88)}
.ref-philosophy .floating-picture:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:#6c7066;opacity:.12;mix-blend-mode:screen}
.ref-philosophy .floating-picture:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.17;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22grain%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.82%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Cpath%20fill%3D%22%23888%22%20filter%3D%22url%28%23grain%29%22%20d%3D%22M0%200h180v180H0z%22%2F%3E%3C%2Fsvg%3E");background-size:180px 180px}

/* Dark originals, with a little more fine grain. */
.ref-philosophy .floating-one img{object-position:30% center}
.ref-philosophy .floating-two img{object-position:60% center}
.ref-philosophy .floating-picture img{filter:saturate(.72) brightness(.96) contrast(.92)}
.ref-philosophy .floating-picture:after{opacity:.26}

/* Preserve the original contrast and color; retain only the fine grain. */
.ref-philosophy .floating-picture img{filter:none}
.ref-philosophy .floating-picture:before{display:none}
.ref-philosophy .floating-two img{object-position:55% center}

/* Restrained editorial sizing; extra grain only on the right photograph. */
.ref-philosophy{grid-template-columns:24fr 40fr 36fr}
.ref-philosophy .floating-one{height:clamp(230px,24vw,360px)}
.ref-philosophy .floating-two{height:clamp(360px,36vw,540px);margin-top:90px}
.ref-philosophy .floating-two:after{opacity:.48;background-size:240px 240px;mix-blend-mode:overlay}
@media(max-width:700px){.ref-philosophy{grid-template-columns:31fr 18fr 39fr}.ref-philosophy .floating-one{height:180px}.ref-philosophy .floating-two{height:300px;margin-top:105px}}

/* Compact homepage footer brand and social marks, ready for future URLs. */
.home-dark .ref-footer .huge-name{font-size:clamp(28px,5vw,76px);letter-spacing:-.055em;margin-left:0;line-height:1.2}
.home-dark .ref-footer .huge-name:hover{letter-spacing:-.055em}
.footer-socials{display:flex;align-items:center;gap:23px;margin-top:26px;color:#c3c8c1}
.footer-social-icon{display:inline-flex;width:27px;height:27px;align-items:center;justify-content:center}
.footer-social-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5}
.footer-social-icon .social-dot,.footer-social-icon .social-solid{fill:currentColor;stroke:none}
.footer-social-icon text{fill:#292f28;stroke:none;font-family:Arial,sans-serif;font-weight:700;font-size:7px;letter-spacing:0}

/* Restrained work titles in the portfolio and individual stories. */
.story .story-heading h1{font-size:clamp(26px,3.2vw,42px);line-height:1.55;letter-spacing:.06em}
.works-grid .work-meta h2{font-size:14px;line-height:1.65}
@media(max-width:700px){.story .story-heading h1{font-size:25px}.works-grid .work-meta h2{font-size:13px}}

.story-heading h1 .title-honorific,.work-meta h2 .title-honorific{font-size:.65em;margin-left:.15em;letter-spacing:0;white-space:nowrap}

/* Brand spelling: Chrono Studio, with true lowercase glyphs. */
.chrono-mark small,.company-brand,.footer-studio,.menu-caption{font-family:"Playfair Display",Georgia,serif;text-transform:none}
.ref-footer .huge-name{font-size:clamp(28px,5vw,76px);letter-spacing:-.055em;line-height:1.2;margin-left:0;text-transform:none}

/* Subtle one-line notes below work covers. */
.story .story-note p{font-size:12px;line-height:2}
@media(max-width:700px){.story .story-note p{font-size:11px}}

/* Move the white-house thumbnail content slightly right within its frame. */
.works-grid .work-card[href="/works/open-house/"] .photo img{object-position:20% center}

/* Full-screen photo viewer, scoped to work stories. */
.story-cover img,.story-gallery img{cursor:zoom-in}
.story-cover img:focus-visible,.story-gallery img:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.photo-viewer{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#10120f;color:#eee;overflow:hidden;z-index:1000}
.photo-viewer::backdrop{background:transparent}
.photo-viewer-bar{position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:20px;padding:16px 24px;z-index:2;background:#10120fe8;font:13px sans-serif}
.photo-viewer-count{margin-right:auto}.photo-viewer button{border:1px solid #ffffff40;background:#171c17;color:#eee;padding:10px 14px;cursor:pointer;font:inherit;border-radius:3px}
.photo-viewer-stage{position:absolute;inset:72px 64px 20px;display:flex;align-items:center;justify-content:center;overflow:auto;touch-action:pan-x pan-y pinch-zoom}
.photo-viewer-stage img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;filter:none}
.photo-viewer-stage.is-zoomed{display:block}.photo-viewer-stage.is-zoomed img{width:max(100%,1400px);max-width:none;max-height:none;height:auto;cursor:zoom-out}
.photo-viewer .photo-viewer-prev,.photo-viewer .photo-viewer-next{position:absolute;top:50%;font:32px Georgia,serif;padding:8px 12px;z-index:2}.photo-viewer-prev{left:12px}.photo-viewer-next{right:12px}
@media(max-width:700px){.photo-viewer-bar{gap:10px;padding:12px;font-size:11px}.photo-viewer-stage{inset:65px 12px 60px}.photo-viewer .photo-viewer-prev,.photo-viewer .photo-viewer-next{top:auto;bottom:8px;font-size:25px;padding:4px 18px}.photo-viewer-stage.is-zoomed img{width:max(100%,900px)}}

.photo-viewer-stage img{cursor:default;transform-origin:center;will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.photo-viewer-stage img{will-change:auto}}

/* Quiet, frameless controls; keep a generous touch target. */
.photo-viewer button{border:0;background:transparent;border-radius:0}
.photo-viewer .photo-viewer-prev,.photo-viewer .photo-viewer-next{width:48px;height:56px;padding:0;font-size:0;display:grid;place-items:center}
.photo-viewer .photo-viewer-prev::before,.photo-viewer .photo-viewer-next::before{content:"";display:block;width:13px;height:13px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.photo-viewer .photo-viewer-prev::before{transform:rotate(-135deg)}
.photo-viewer button:hover{color:#fff;opacity:.75}
.photo-viewer button:focus-visible{outline:1px solid #aaa;outline-offset:2px}
.photo-viewer button[hidden]{display:none}

/* Work description: restrained size with comfortable line spacing. */
.story .story-heading>p{font-size:14px;line-height:2.2}
@media(max-width:700px){.story .story-heading>p{font-size:13px}}

/* Keep work titles on one line; JS fits long titles to available width. */
.story .story-heading h1,.works-grid .work-meta h2{white-space:nowrap;min-width:0}
.works-grid .work-meta h2{flex:1}
.works-grid .work-meta>span{flex-shrink:0}

/* Wrap the work introduction at meaningful Japanese phrases. */
.ref-project-intro .works-summary .summary-sentence{display:block}
.ref-project-intro .works-summary .summary-sentence>span{display:inline-block}

/* Visible rolling-label interaction, without shifting surrounding layout. */
.line-link.rolling-link{position:relative;gap:16px}
.line-link.rolling-link::before{width:48px;flex:0 0 48px;transition:none;transform-origin:left center}
.line-link.rolling-link:hover::before{width:48px}
.link-roll-mask{position:relative;display:block;overflow:hidden;line-height:1.5;padding-right:1px}
.link-roll-row{display:block;transition:transform .65s cubic-bezier(.22,1,.36,1);will-change:transform}
.link-roll-row+ .link-roll-row{position:absolute;top:0;left:0;transform:translateY(130%)}
@media(hover:hover){
.rolling-link:hover .link-roll-row:first-child{transform:translateY(-130%)}
.rolling-link:hover .link-roll-row+ .link-roll-row{transform:translateY(0)}
.line-link.rolling-link:hover::before{animation:link-line-sweep .65s cubic-bezier(.22,1,.36,1) both}
}
.rolling-link:focus-visible .link-roll-row:first-child{transform:translateY(-130%)}
.rolling-link:focus-visible .link-roll-row+ .link-roll-row{transform:translateY(0)}
@keyframes link-line-sweep{0%{clip-path:inset(0 0 0 0)}40%{clip-path:inset(0 0 0 100%)}41%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){.link-roll-row{transition:none;will-change:auto}.line-link.rolling-link:hover::before{animation:none}}

/* Three work panels stack as the next panel arrives. */
@media(min-height:560px){
.ref-projects{position:relative;padding:0 5% 12vh;isolation:isolate}
.ref-projects>.ref-project{position:sticky;top:6vh;min-height:88vh;height:88vh;padding:8vh 3% 6vh;background:#292f28;align-items:center;border-top:1px solid #ffffff20;border-bottom:0;box-shadow:0 -24px 50px #10150e24;transform:scale(var(--stack-scale,1))!important;transform-origin:center 8%;opacity:1!important;transition:none!important}
.ref-projects>.ref-project:nth-child(1){z-index:1}
.ref-projects>.ref-project:nth-child(2){z-index:2}
.ref-projects>.ref-project:nth-child(3){z-index:3}
.ref-projects .project-rail{height:100%}
.ref-projects .project-image{height:100%;max-height:65vh;clip-path:none!important}
.ref-projects .project-image img{height:100%;max-height:none}
}
@media(prefers-reduced-motion:reduce){.ref-projects>.ref-project{position:relative;top:auto;transform:none!important}}

@media(max-width:700px) and (min-height:560px){
.ref-projects>.ref-project{grid-template-columns:8% 1fr 39%;gap:4%;padding:9vh 2% 6vh}
.ref-projects .project-rail{grid-row:1;grid-column:1;font-size:10px}
.ref-projects .project-copy{grid-column:2;grid-row:1}
.ref-projects .project-image{grid-column:3;grid-row:1;width:100%;height:48vh;align-self:center;max-height:48vh;padding-top:0}
.ref-projects .project-image img{aspect-ratio:auto;object-fit:cover}
.reference-home .ref-projects .project-copy h2{font-size:clamp(24px,5vw,36px)}
.ref-projects .project-copy h3{font-size:12px}
.ref-projects .project-copy p{font-size:11px;line-height:2}
.ref-projects .project-copy .line-link{font-size:12px;gap:8px}
.ref-projects .line-link.rolling-link::before{width:22px;flex-basis:22px}
}

/* Soft menu entrance, staggered letter rolls and a restrained moving glow. */
.site-menu{background:#172017f7;overflow:auto}
.site-menu::backdrop{background:transparent}
.site-menu:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--glow-x,65%) var(--glow-y,45%),#b5c5af14,transparent 75%)}
.site-menu .menu-layout{position:relative;min-height:100%;height:auto;padding-top:18vh;padding-bottom:12vh}
.site-menu .menu-layout nav{gap:20px;align-items:stretch}
.site-menu .menu-layout nav a{position:relative;display:flex;align-items:center;gap:22px;width:fit-content;max-width:100%;font-size:clamp(32px,4.5vw,68px);line-height:1.25;padding:2px 0;transition:color .4s}
.site-menu nav a:before{content:attr(data-number);font:10px sans-serif;letter-spacing:.1em;color:#9ba897;transition:transform .5s,opacity .5s}
.site-menu nav a:after{content:"↗";font-size:.4em;opacity:0;transform:translate(-12px,8px);transition:opacity .5s,transform .5s}
.menu-word-mask{display:block;position:relative;overflow:hidden;transform:translateX(var(--pull,0px));transition:transform .45s cubic-bezier(.22,1,.36,1)}
.menu-word{display:block;white-space:nowrap}.menu-word+ .menu-word{position:absolute;inset:0;color:#d6dfc8}
.menu-word span{display:inline-block;transition:transform .7s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--char)*22ms)}
.menu-word+ .menu-word span{transform:translateY(125%) rotate(5deg)}
.site-menu nav a:is(:hover,:focus-visible) .menu-word:first-child span{transform:translateY(-125%) rotate(-5deg)}
.site-menu nav a:is(:hover,:focus-visible) .menu-word+ .menu-word span{transform:translateY(0) rotate(0)}
.site-menu nav a:is(:hover,:focus-visible):after{opacity:1;transform:translate(0,0)}
.site-menu nav a:is(:hover,:focus-visible):before{transform:translateX(-5px);opacity:.5}
@media(max-width:700px){.site-menu .menu-layout{padding:100px 10% 60px;gap:35px}.site-menu .menu-layout nav{gap:16px}.site-menu .menu-layout nav a{font-size:36px}.site-menu .menu-caption{align-self:auto}}
@media(prefers-reduced-motion:reduce){.menu-word span,.menu-word-mask,.site-menu nav a:before,.site-menu nav a:after{transition:none}.site-menu:before{display:none}}

/* Compact navigation aligned to the right of the menu. */
.site-menu .menu-layout nav{align-items:flex-end;text-align:right}
.site-menu .menu-layout nav a{font-size:clamp(26px,3.2vw,44px);justify-content:flex-end}
@media(max-width:700px){.site-menu .menu-layout nav a{font-size:28px}}

/* Keep the navigation group on the right, with smaller left-aligned labels. */
.site-menu .menu-layout nav{width:max-content;max-width:100%;justify-self:end;align-items:flex-start;text-align:left}
.site-menu .menu-layout nav a{font-size:clamp(22px,2.2vw,30px);justify-content:flex-start}
@media(max-width:700px){.site-menu .menu-layout nav a{font-size:24px}}

/* Interactive header trigger, preserving its size and position. */
.menu-toggle{position:relative}
.toggle-roll{position:relative;display:block;overflow:hidden;line-height:1.5}
.toggle-word{display:block;white-space:nowrap}
.toggle-word+ .toggle-word{position:absolute;inset:0}
.toggle-word span{display:inline-block;transition:transform .6s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--char)*40ms)}
.toggle-word+ .toggle-word span{transform:translateY(130%) rotate(8deg)}
.menu-toggle:after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .55s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){
.menu-toggle:hover .toggle-word:first-child span{transform:translateY(-130%) rotate(-8deg)}
.menu-toggle:hover .toggle-word+ .toggle-word span{transform:translateY(0) rotate(0)}
.menu-toggle:hover:after{transform:scaleX(1);transform-origin:left}
}
.menu-toggle:focus-visible .toggle-word:first-child span{transform:translateY(-130%)}
.menu-toggle:focus-visible .toggle-word+ .toggle-word span{transform:translateY(0)}
.menu-toggle:focus-visible:after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.toggle-word span,.menu-toggle:after{transition:none}}

/* Smaller About introduction heading. */
.ref-philosophy .philosophy-title{font-size:clamp(26px,3vw,44px)}
@media(max-width:700px){.ref-philosophy .philosophy-title{font-size:clamp(21px,4.2vw,29px)}}

/* Shared three-line editorial rhythm, with an inset final line. */
.ref-philosophy .editorial-heading,.ref-project-intro .editorial-heading{font-family:'Playfair Display',Georgia,serif;font-size:clamp(26px,3vw,44px);font-weight:400;line-height:1.22;letter-spacing:-.035em;color:#bfc4bf;text-align:left}
.ref-philosophy .editorial-heading span,.ref-project-intro .editorial-heading span{display:block;margin-left:0;white-space:nowrap}
.ref-philosophy .editorial-heading span:last-child,.ref-project-intro .editorial-heading span:last-child{margin-left:2em}
@media(max-width:700px){.ref-philosophy .editorial-heading,.ref-project-intro .editorial-heading{font-size:clamp(21px,4.2vw,29px)}}

/* Stepped About heading; flush-left Works heading. */
.ref-philosophy .editorial-heading span:nth-child(1){margin-left:0}
.ref-philosophy .editorial-heading span:nth-child(2){margin-left:1em}
.ref-philosophy .editorial-heading span:nth-child(3){margin-left:2em}
.ref-project-intro .editorial-heading span{margin-left:0}
.ref-project-intro .editorial-heading span:last-child{margin-left:0}

/* Scoped to the two editorial headings; retain their chosen line alignment. */
.ref-philosophy .editorial-heading.heading-waiting>span,.ref-project-intro .editorial-heading.heading-waiting>span{opacity:0}
.motion-paused .editorial-heading.heading-waiting>span{opacity:1!important}
@media(prefers-reduced-motion:reduce){.editorial-heading.heading-waiting>span{opacity:1!important}}

/* Automatic View About motion reuses the hover treatment. */
.rolling-link.auto-roll .link-roll-row:first-child{transform:translateY(-130%)}
.rolling-link.auto-roll .link-roll-row+ .link-roll-row{transform:translateY(0)}
.line-link.rolling-link.auto-roll::before{animation:link-line-sweep .8s cubic-bezier(.22,1,.36,1) both}
@media(prefers-reduced-motion:reduce){.rolling-link.auto-roll .link-roll-row{transform:none}.rolling-link.auto-roll .link-roll-row+ .link-roll-row{transform:translateY(130%)}.line-link.rolling-link.auto-roll::before{animation:none}}

/* Bring Business closer to the View Works introduction. */
.ref-project-intro{height:auto;min-height:0;padding-bottom:70px}
@media(max-width:700px){.ref-project-intro{padding-bottom:50px}}

/* Slightly smaller homepage service headings. */
.reference-home .ref-projects .project-copy h2{font-size:clamp(32px,3.2vw,48px)}
@media(max-width:700px){.reference-home .ref-projects .project-copy h2{font-size:clamp(21px,4vw,29px)}}

/* Landscape photographs in the three homepage work panels. */
.ref-projects>.ref-project{grid-template-columns:10% minmax(0,1fr) 46%;gap:4%}
.ref-projects .project-image{width:100%;height:auto;max-height:none;aspect-ratio:3/2;padding-top:0;align-self:center}
.ref-projects .project-image img{width:100%;height:100%;max-height:none;aspect-ratio:3/2;object-fit:cover}
@media(max-width:700px){
.ref-projects>.ref-project{grid-template-columns:8% minmax(0,1fr);gap:18px;padding-top:5vh;padding-bottom:4vh;align-content:center}
.ref-projects .project-rail{grid-column:1;grid-row:1/3;height:100%}
.ref-projects .project-copy{grid-column:2;grid-row:1}
.ref-projects .project-image{grid-column:2;grid-row:2;width:100%;height:auto;max-height:none;aspect-ratio:3/2}
.ref-projects .project-image img{height:100%;max-height:36vh;aspect-ratio:3/2}
.ref-projects .project-copy h3{margin-bottom:8px}
.ref-projects .project-copy p{margin:8px 0}
}

/* A quieter title scale for the Works index only. */
.page-main:has(>.works-grid)>.page-title{font-size:clamp(34px,5vw,68px);line-height:1.2}
@media(max-width:700px){.page-main:has(>.works-grid)>.page-title{font-size:clamp(28px,6vw,38px)}}

/* Keep photography free of overlaid link arrows. */
.image-arrow{display:none!important}

/* Subtle animated category tabs, with a persistent selection marker. */
.filters button[data-filter]{position:relative;border-bottom:0;transition:opacity .45s ease,color .45s ease}
.category-roll{position:relative;display:block;overflow:hidden;line-height:1.6}
.category-word{display:block;white-space:nowrap;transition:transform .65s cubic-bezier(.22,1,.36,1)}
.category-word+ .category-word{position:absolute;inset:0;transform:translateY(125%)}
.filters button[data-filter]:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .65s cubic-bezier(.22,1,.36,1)}
.filters button[data-filter].active:after{transform:scaleX(1)}
@media(hover:hover){
.filters button[data-filter]:hover{opacity:1}
.filters button[data-filter]:hover .category-word:first-child{transform:translateY(-125%)}
.filters button[data-filter]:hover .category-word+ .category-word{transform:translateY(0)}
.filters button[data-filter]:hover:after{transform:scaleX(1)}
}
.filters button[data-filter]:focus-visible .category-word:first-child{transform:translateY(-125%)}
.filters button[data-filter]:focus-visible .category-word+ .category-word{transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.category-word,.filters button[data-filter],.filters button[data-filter]:after{transition:none}}

/* Matching stepped line arrangement for the Works introduction. */
.ref-project-intro .editorial-heading span:nth-child(1){margin-left:0}
.ref-project-intro .editorial-heading span:nth-child(2){margin-left:1em}
.ref-project-intro .editorial-heading span:nth-child(3){margin-left:2em}

/* About: framed photo, restrained depth, and a moving contact underline. */
.about-motion .page-title i{display:inline-block}
.about-motion .about-photo-frame{overflow:hidden;aspect-ratio:4/3;background:#252d23}
.about-motion .about-photo-frame img{width:100%;height:100%;object-fit:cover;transform:translateY(var(--about-drift,0px)) scale(1.065);transition:scale 1.4s cubic-bezier(.22,1,.36,1)}
@media(hover:hover){.about-motion .about-photo-frame:hover img{scale:1.035}}
.about-motion .contact-band>a{position:relative}
.about-motion .contact-band>a:after{content:"";display:block;height:1px;background:currentColor;margin-top:18px;transform:scaleX(.18);transform-origin:center;opacity:.35;transition:transform 1s cubic-bezier(.22,1,.36,1),opacity 1s}
.about-motion .contact-band>a:is(:hover,:focus-visible):after{transform:scaleX(1);opacity:.8}
@media(prefers-reduced-motion:reduce){.about-motion .about-photo-frame img{transform:none;transition:none}.about-motion .contact-band>a:after{transition:none}}

/* Japanese statement and expandable personal profile. */
.statement-char{display:inline-block;transform-origin:50% 100%}
.statement-rule{width:65px;height:1px;background:currentColor;opacity:.5;transform-origin:left;margin:26px 0}
.personal-profile{padding:110px 0 70px;border-top:1px solid #ffffff20;margin-top:80px}
.profile-label h2{font:400 clamp(28px,3vw,42px)/1.3 'Playfair Display',Georgia,serif;color:#bfc4bf;margin:20px 0 50px}
.profile-layout{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}
.profile-photo-placeholder{aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#2c342b;color:#b6bfb2;border:1px solid #ffffff15}
.profile-photo-placeholder span{font:24px Georgia;letter-spacing:.15em}.profile-photo-placeholder small{font-size:11px}
.profile-information h3{font-size:26px;font-weight:400;margin:25px 0}.profile-information p{font-size:13px}.profile-draft{color:#aeb7a9}
@media(max-width:700px){.personal-profile{padding-top:70px;margin-top:50px}.profile-layout{grid-template-columns:1fr;gap:36px}.profile-photo-placeholder{max-width:350px;width:100%}.profile-label h2{font-size:28px}}

/* Smaller Japanese About statement heading. */
.about-layout .about-statement>h2{font-size:22px;line-height:1.8}
@media(max-width:700px){.about-layout .about-statement>h2{font-size:20px}}

.about-photo-frame{position:relative;overflow:hidden;aspect-ratio:4/3}
.about-photo-frame .about-slide-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}

/* Individually unfolding letters for the About title. */
.about-motion .about-title-char{display:inline-block;transform-origin:50% 100%;backface-visibility:hidden}

.profile-label>.eyebrow{display:inline-block}
.profile-title-word{display:inline-block;white-space:nowrap}
.profile-title-char{display:inline-block;transform-origin:50% 100%}

/* Shared top-level page typography; homepage and story pages stay independent. */
.unified-page main>.page-title,.unified-page .svc-intro h1{font-size:clamp(34px,5vw,68px);line-height:1.2}
.unified-page .about-title-char{display:inline-block;transform-origin:50% 100%;backface-visibility:hidden}
@media(max-width:700px){.unified-page main>.page-title,.unified-page .svc-intro h1{font-size:clamp(28px,6vw,38px)}}

/* Footer movement follows the restrained roll of the reference footer. */
.ref-footer .huge-name{overflow:hidden;padding-bottom:.12em}.footer-brand-char{display:inline-block}
.ref-footer .footer-roll{display:inline-block}.footer-roll .link-roll-mask{display:block;position:relative;overflow:hidden;line-height:1.5}.footer-roll .link-roll-row{display:block;transition:transform .85s cubic-bezier(.22,1,.36,1)}.footer-roll .link-roll-row+.link-roll-row{position:absolute;inset:0;transform:translateY(130%)}
.footer-roll:is(:hover,:focus-visible) .link-roll-row:first-child{transform:translateY(-130%)}.footer-roll:is(:hover,:focus-visible) .link-roll-row+.link-roll-row{transform:translateY(0)}
.ref-footer .line-link:before{transition:width .85s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){.footer-roll .link-roll-row{transition:none}}

/* Responsive finishing: preserve words, Japanese punctuation and touch access. */
.page-title-word{display:inline-block;white-space:nowrap}
.page-main p,.svc-main p,.reference-home p,.story-note{line-break:strict;word-break:normal;overflow-wrap:break-word;text-wrap:pretty}
.page-main h2,.page-main h3,.svc-description h3{line-break:strict;text-wrap:balance}
img{max-width:100%}
@media(max-width:700px){
 .page-main,.svc-main,.story-heading,.contact-layout,.about-layout,.footer-inner{min-width:0}
 .contact-layout>*{min-width:0}
 .contact-layout input,.contact-layout select,.contact-layout textarea{font-size:16px;max-width:100%;min-height:44px}
 .contact-layout textarea{min-height:150px}
 .page-main p br,.svc-description p br,.project-copy p br,.company-copy p br{display:none}
 .footer-inner nav{gap:0}.footer-inner nav a{min-height:44px;display:inline-flex;align-items:center}
 .footer-socials .footer-social-icon{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
 .menu-toggle,.menu-close,.filters button{min-height:44px;min-width:44px}
 .ref-bottom>a{min-height:44px;display:inline-flex;align-items:center}
 .ref-contact h2{text-wrap:balance}
}
@media(max-width:360px){.unified-page main>.page-title,.unified-page .svc-intro h1{font-size:26px}.ref-contact h2{font-size:26px}}

@media(max-width:700px){.works-intro{display:flex;flex-direction:column;align-items:stretch;gap:16px}.works-intro p{width:100%;max-width:none;text-wrap:balance}.works-intro p br{display:block}.works-intro #result-count{align-self:flex-end;white-space:nowrap}}

/* Keep animated gallery transforms within the page during their reveal. */
main.story{overflow-x:clip}

/* iPhone review: quieter Japanese copy and natural horizontal Works text. */
@media(max-width:700px){
 .reference-home .philosophy-copy>p,.reference-home .ref-project-intro .works-summary{font-size:11px;line-height:2.15;letter-spacing:.035em}
 .reference-home .ref-project-intro{padding-left:17%;padding-right:7%}
 .reference-home .ref-project-intro>div{width:100%;max-width:none}
 .reference-home .ref-project-intro .editorial-heading{line-height:1.4;text-wrap:balance}
 .reference-home .ref-project-intro .editorial-heading>span{display:inline;margin-left:0;white-space:normal}
 .reference-home .ref-project-intro .editorial-heading>span:not(:last-child):after{content:' '}
 .reference-home .ref-project-intro .works-summary .summary-sentence,.reference-home .ref-project-intro .works-summary .summary-sentence>span{display:inline}
 .reference-home .ref-project-intro .works-summary{line-break:strict;word-break:normal;text-wrap:balance}
}

/* iPhone review: compact About and Contact, without the menu focus box. */
.site-menu nav a:focus{outline:none}
.site-menu nav a:focus-visible{outline:none;text-decoration:underline;text-underline-offset:.22em}
@media(hover:none){.site-menu nav a:focus-visible{text-decoration:none}}
@media(max-width:700px){
 .about-motion.unified-page main>.page-title{font-size:26px;margin-bottom:36px}
 .about-motion .about-layout{gap:32px}
 .about-motion .about-photo-frame{width:82%;max-width:310px;aspect-ratio:4/3;margin:0 auto}
 .about-motion .about-layout .about-statement>h2{font-size:15px;line-height:1.7}
 .about-motion .about-statement p,.about-motion .profile-information p{font-size:11px;line-height:2.15;letter-spacing:.025em}
 .about-motion .profile-label h2{font-size:23px;line-height:1.4;margin-bottom:28px}
 .about-motion .profile-information h3{font-size:20px;margin:18px 0}
 .about-motion .profile-photo-placeholder{width:82%;max-width:270px;margin:auto}
 .unified-page:has(.contact-layout) main>.page-title{font-size:25px;line-height:1.3;margin-bottom:40px}
 .contact-layout{gap:35px}
 .contact-layout h2{font-size:18px;line-height:1.7;letter-spacing:.025em}
 .contact-layout p{font-size:11px;line-height:2.1;letter-spacing:.02em;text-wrap:balance}
 .contact-layout label{font-size:11px}
}

/* Compact profile and consistent contact invitation. */
.about-motion .profile-layout{grid-template-columns:minmax(110px,190px) minmax(0,1fr);gap:36px;align-items:start}
.about-motion .profile-photo-placeholder{width:100%;max-width:190px;margin:0;aspect-ratio:4/5}
.profile-photo-placeholder span{font-size:14px}.profile-photo-placeholder small{font-size:9px;text-align:center;padding:0 8px}
.ref-footer~*{box-sizing:border-box}
.contact-band>a{font-size:20px;line-height:1.8}.contact-layout h2{font-size:20px}
@media(max-width:700px){.about-motion .profile-layout{grid-template-columns:90px minmax(0,1fr);gap:18px}.about-motion .profile-photo-placeholder{width:90px;max-width:90px}.profile-photo-placeholder span{font-size:9px;letter-spacing:.04em}.profile-photo-placeholder small{font-size:7px;line-height:1.6}.about-motion .profile-information h3{font-size:17px;margin:0 0 12px}.about-motion .profile-information p{font-size:10px;line-height:2}.contact-band>a,.contact-layout h2{font-size:16px!important;line-height:1.8}.contact-band{padding-top:50px;padding-bottom:50px}}
[data-break-custom]{white-space:normal!important}

[data-break-custom] br{display:block!important}.contact-band>a>.contact-invitation{font:inherit;border:0;padding:0;margin:0}