/* Typography study: stronger display hierarchy, quiet readable supporting copy. */
.top .brand{font-size:38px;line-height:1;letter-spacing:-1.15px;word-spacing:2px}
.top .discipline{font-size:12px;line-height:1.4;letter-spacing:0}
.top nav{font-size:13px;letter-spacing:.01em}
.sectionbar h2{font-size:35px;line-height:1.05;letter-spacing:-.035em}
.project-name{font-size:24px;line-height:1.16;letter-spacing:-.012em}
.category{font-size:11px;line-height:1.6;letter-spacing:.015em}
.eyebrow{font-size:12px;line-height:1.5;letter-spacing:.015em}
.about h2{font-size:clamp(42px,4.4vw,64px);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.bio{margin-top:32px}
.bio p,.services p,.contact-right>p{font-size:14px;line-height:1.85;letter-spacing:0}
.services-heading h2{font-size:clamp(42px,4.3vw,62px);line-height:1.04;letter-spacing:-.035em}
.service-row h3{font-size:29px;line-height:1.15;letter-spacing:-.018em}
.contact h2{font-size:clamp(60px,6.3vw,90px);line-height:.98;letter-spacing:-.04em}
.email{font-size:32px;letter-spacing:-.018em}
.about-email{font-size:16px;letter-spacing:0}
.studio-list{letter-spacing:0}
.project-details h2{font-size:48px;line-height:1.05;letter-spacing:-.03em}
.lab-intro h1{font-size:120px;letter-spacing:-.045em;line-height:.95}
@media(max-width:1000px){.about h2{font-size:43px}.services-heading h2{font-size:44px}.email{font-size:28px}}
@media(max-width:640px){
 .top .brand{font-size:32px;letter-spacing:-.8px}
 .sectionbar h2{font-size:31px}
 .project-name{font-size:25px}
 .about h2{font-size:39px;line-height:1.06}
 .services-heading h2{font-size:40px}
 .contact h2{font-size:59px;line-height:1.01}
 .project-details h2{font-size:37px}
 .lab-intro h1{font-size:96px}
 .email{font-size:28px}
}
/* More readable service and contact copy, without changing display headings. */
.services p,.contact-right>p{font-size:15.5px;line-height:1.75;color:#c4c4c4}
.services .work-end{font-size:14px;line-height:1.6;color:#b8b8b8}
.contact-right>p{max-width:460px}
@media(max-width:640px){.services p,.contact-right>p{font-size:15px;line-height:1.75}}

/* Approved hero wordmark: identity sits over the moving artwork. */
.portfolio-home .top{position:absolute;inset:0 0 auto;z-index:10;background:transparent;height:84px;padding-inline:3.2vw}
.portfolio-home .top>.brand,.portfolio-home .top>.discipline{display:none}
.portfolio-home .hero-caption{left:3.2vw;right:3.2vw;bottom:8%;gap:24px}
.hero .hero-identity{min-width:0}
.hero .hero-identity h1{font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:clamp(72px,10.8vw,172px);line-height:.95;letter-spacing:-.065em;white-space:nowrap;color:#f5f2e9;margin:0}
.hero .hero-discipline{font-family:"helvetica-neue-lt-pro",Helvetica,Arial,sans-serif;font-weight:400;font-size:clamp(17px,2.15vw,34px);line-height:1.25;letter-spacing:-.035em;margin:12px 0 0;color:#e3e1dd}
.portfolio-home .hero-open{flex-shrink:0;margin-bottom:4px}
.portfolio-home .hero-pause{top:94px}
@media(max-width:640px){
 .portfolio-home .top{height:70px;padding-inline:20px}
 .portfolio-home .hero-caption{left:20px;right:20px;bottom:32px;gap:24px}
 .hero .hero-identity h1{font-size:15vw;letter-spacing:-.065em}
 .hero .hero-discipline{font-size:clamp(14px,3.6vw,22px);margin-top:9px;letter-spacing:-.025em}
 .portfolio-home .hero-open{font-size:12px}
 .portfolio-home .hero-pause{top:80px;right:20px}
}
/* Let the wordmark blend with the actual moving hero, not a nested caption layer. */
.portfolio-home .hero{isolation:isolate}
.portfolio-home .hero-caption{z-index:auto}
.portfolio-home .hero-identity{position:relative;z-index:3;mix-blend-mode:difference}
.portfolio-home .hero-identity h1,.portfolio-home .hero-discipline{color:#fff}
.portfolio-home .hero-open{position:relative;z-index:3}

/* Optical alignment with Arial Bold M's left sidebearing. */
.hero .hero-discipline{padding-left:clamp(3px,.43vw,7px)}
@media(max-width:640px){.hero .hero-discipline{padding-left:.6vw}}

/* The identity doubles as a clear route into the work. */
.hero-identity{display:block;text-decoration:none}
.hero-type{position:relative;display:inline-block}
.hero-type-layer{display:none;position:absolute;inset:0;pointer-events:none}
.hero-type-ready>.hero-type-source{opacity:0}
.hero-type-ready>.hero-type-layer{display:block}
.hero-type-glyph{position:absolute;display:block;white-space:pre;transition:transform .28s cubic-bezier(.2,.65,.3,1);letter-spacing:0}
@media(prefers-reduced-motion:reduce){.hero-type-ready>.hero-type-source{opacity:1}.hero-type-ready>.hero-type-layer{display:none}}
.hero-discipline .work-scroll-arrow{display:inline-block;width:.85em;height:.85em;margin-left:.5em;vertical-align:-.03em;transition:transform .2s ease}
.hero-identity:hover .work-scroll-arrow,.hero-identity:focus-visible .work-scroll-arrow{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-discipline .work-scroll-arrow{transition:none}}

/* Keep the two editorial lines intact at each available content width. */
.about-copy{container-type:inline-size}
.about .about-copy h2{font-size:5.2cqw;line-height:1.13;text-wrap:initial}
.about-heading-line{display:block;white-space:nowrap}