/* September refinement: layout, sequential reveals and touch-first cards. */
body.homepage>header .logo,body.homepage>header .header-cv{position:relative;border:0}
body.homepage>header .logo:after,body.homepage>header .header-cv:after{content:'';position:absolute;top:0;bottom:0;width:1px;background:#9aa1a6;transform-origin:top}
body.homepage>header .logo:after{right:0}body.homepage>header .header-cv:after{left:0}
body.homepage>header.header-pending :is(.logo,.header-cv):after{transform:scaleY(0)}
body.homepage>header.header-entering :is(.logo,.header-cv):after{animation:separator-grow .55s 1.2s ease both}
@keyframes separator-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
body.homepage .hero{height:calc(100svh - 65px);min-height:600px;overflow:visible}
body.homepage .hero:before{bottom:44%}
body.homepage .hero .marquee{height:34%;bottom:7%;display:flex;align-items:center;padding:0}
body.homepage .hero-shell{overflow:hidden}
body.homepage .about-section{position:relative;z-index:5;margin-top:0}
body.homepage .hero-intro{width:46%;max-width:46%}
body.homepage .hero .expertise-intro{max-width:none}
.greeting-line{display:block;white-space:nowrap}
body.homepage .about-story h2 .editorial-mask,body.homepage .about-story h2 .editorial-mask svg{transform:none!important;translate:none!important;opacity:1!important;clip-path:none!important;animation:none!important;transition:none!important}
@media(hover:hover) and (pointer:fine){body.homepage .project.case-hovering .cover{clip-path:inset(14px 14px calc(var(--card-panel-height,120px) + 14px) round 20px)}}
body.homepage .work-section .view-all-projects{margin:clamp(110px,11vw,210px) 0 clamp(130px,12vw,230px)}
body.homepage .view-all-title{display:block;width:100%;text-align:center;font-size:10cqw}
body.homepage .contact{border-radius:20px 20px 0 0;margin-bottom:0}
body.homepage .footer-bottom{border-radius:0}
body.homepage .contact:before{border-radius:0}
@media(max-width:640px),(hover:none) and (max-width:1023px){
 body.homepage .project .project-media .cover{aspect-ratio:1.2!important}
 body.homepage .project .project-media{padding:12px!important}
 body.homepage .case-hover-frame{position:static;overflow:visible}
 body.homepage .case-hover-date{top:0;right:0;bottom:auto;padding:8px 12px;font-size:14px;border-bottom-left-radius:14px}
 body.homepage .case-hover-panel{display:flex;flex-direction:column;gap:20px;padding:24px 0 14px;text-align:left}
 body.homepage .case-hover-title{font-size:clamp(22px,6.1vw,36px);line-height:1.15}
 body.homepage .case-hover-category{font-size:clamp(13px,3.8vw,20px);line-height:1.35;margin-top:10px;gap:8px}
 body.homepage .case-hover-description{font-size:clamp(14px,3.65vw,20px);line-height:1.4;border-top:1px solid #e5e5e5;padding-top:18px;width:100%}
 body.homepage .case-hover-panel [data-card-decode],body.homepage .case-hover-date [data-card-decode]{opacity:1;transform:none;clip-path:none}
}
@media(max-width:640px){
 body.homepage .hero{height:calc(100svh - 65px);min-height:650px}
 body.homepage .hero-intro{top:7%;left:calc(var(--panel-inset) + 14px);width:53%;max-width:53%}
 body.homepage .hero .expertise-intro{font-size:18px;line-height:1.4}
 .greeting-line{display:inline;white-space:normal}.greeting-line+.greeting-line:before{content:' '}
 body.homepage .expertise-cycle{display:block;width:100%;height:2.8em}
 body.homepage .expertise-value{white-space:normal}
 body.homepage .hero .location{top:7%;right:var(--panel-inset);left:auto;max-width:39%;font-size:8px;gap:6px;padding:6px;border-radius:40px 0 0 40px;min-height:56px}
 body.homepage .hero .smiley{width:42px;height:42px;flex-shrink:0}
 body.homepage .hero:before{bottom:44%}
 body.homepage .hero .portrait{bottom:-5%;height:82%}
 body.homepage .hero .marquee{bottom:7%;height:34%}
 body.homepage .work-section .view-all-projects{margin-top:85px;margin-bottom:100px;padding:14px;gap:0 10px}
 body.homepage .view-all-stage{width:100%}
}
@media(prefers-reduced-motion:reduce){body.homepage>header :is(.logo,.header-cv):after{animation:none!important;transform:none!important}}
@media(max-width:640px),(hover:none) and (max-width:1023px){
 body.homepage .case-hover-panel{align-items:stretch}
 body.homepage .case-hover-date{z-index:5}
}
@media(max-width:640px){body.homepage .expertise-value{display:block}body.homepage .hero-intro{top:5%}}
body.homepage .introduction h2,body.homepage #expertise-title{text-transform:none}