.prototype-bar{display:flex;align-items:center;gap:24px;padding:14px 4%;background:#242524;color:white;position:relative;z-index:30}.prototype-label{display:flex;flex-direction:column;line-height:1.5;margin-right:auto}.prototype-label strong{font-size:14px}.prototype-label span{font-size:12px;color:#bbbdb5}.variants{display:flex;gap:5px;padding:4px;border:1px solid #55574d;border-radius:40px}.variants button,.replay{border:0;background:transparent;color:white;font-size:13px;border-radius:30px;padding:9px 14px;white-space:nowrap}.variants button[aria-pressed=true]{background:var(--yellow);color:var(--ink)}.replay{border:1px solid #6a6d60}.motion-description{background:#e8e9e2;margin:0;padding:9px 4%;font-size:13px;color:#55584d}header{height:88px;position:relative}.prototype-hero{padding-top:30px;padding-bottom:25px}.hero-composition{display:grid;grid-template-columns:1.3fr 1fr;gap:7%;align-items:center;padding:28px 0 38px}.prototype-hero h1{font-size:clamp(65px,6.9vw,104px);margin:0 0 28px;line-height:1.035;letter-spacing:-.065em}.line{display:block;overflow:hidden;padding-bottom:.13em;margin-bottom:-.13em}.line>span{display:block;transform-origin:left bottom}.last-line{margin-top:10px}.hero-intro{font-size:17px;line-height:1.6;margin:0 0 23px}.hero-actions{flex-direction:row;align-items:center;gap:22px;flex-wrap:wrap}.hero-portrait{margin:0;position:relative;align-self:center;padding-top:12px}.image-window{width:100%;height:460px;overflow:hidden;background:#d6d3cb}.image-window img{height:100%;width:100%;object-fit:cover;object-position:center 35%;filter:grayscale(1);display:block}.hero-portrait figcaption{display:flex;justify-content:space-between;align-items:center;margin-top:13px;gap:12px;font-size:14px}.hero-portrait small{font-size:12px}.portrait-word{position:absolute;bottom:52px;left:-40px;color:var(--yellow);font:italic 90px/1 Georgia,serif;text-shadow:1px 1px 1px #34352c}.hero-footnote{border-top:1px solid #b29437;padding-top:18px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:1px;font-weight:600}.ribbon{padding:19px 4%}.prototype-hero .eyebrow,.prototype-hero .location{font-size:11px}.reveal{transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);transition-delay:var(--delay,0ms)}.reveal.waiting{opacity:0;transform:translateY(38px)}details .service-content{animation:detailsIn .4s ease both}summary:hover h3{color:#8b6500}summary{transition:background .25s}summary:hover{background:#f2f0e7}.button:hover{transform:translateY(-3px)}.team-grid article:hover img{transform:translateY(-5px)}.team-grid img{transition:filter .4s,transform .4s}.playing .line>span{animation:lineReveal .9s cubic-bezier(.2,.75,.2,1) both;animation-delay:calc(var(--i)*110ms)}.playing .hero-top{animation:fade .6s both}.playing .hero-intro{animation:up .8s .4s both}.playing .hero-actions{animation:up .8s .55s both}.playing .image-window{animation:imageReveal 1.15s cubic-bezier(.2,.75,.2,1) .15s both}.playing .image-window img{animation:portraitZoom 1.5s ease-out .15s both}.playing figcaption{animation:up .7s .7s both}.playing .portrait-word{animation:up .9s .7s both}.playing .hero-footnote{animation:fade .8s .8s both}[data-motion=calm] .playing .line>span{animation-name:fade;animation-duration:1.2s;animation-delay:calc(var(--i)*100ms)}[data-motion=calm] .playing .image-window,[data-motion=calm] .playing .image-window img{animation-name:fade;animation-duration:1.2s}[data-motion=calm] .reveal.waiting{transform:translateY(12px)}[data-motion=expressive] .playing .line>span{animation-name:expressiveReveal;animation-duration:1s;animation-delay:calc(var(--i)*140ms)}[data-motion=expressive] .playing .image-window{animation-name:expressiveImage;animation-duration:1.1s}[data-motion=expressive] .playing .portrait-word{animation-name:hello;animation-duration:1.1s}[data-motion=expressive] .reveal.waiting{transform:translateY(55px)}@keyframes lineReveal{from{opacity:0;transform:translateY(112%)}to{opacity:1;transform:translateY(0)}}@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes imageReveal{from{opacity:0;clip-path:inset(100% 0 0 0);transform:translateY(25px)}to{opacity:1;clip-path:inset(0);transform:translateY(0)}}@keyframes portraitZoom{from{transform:scale(1.08)}to{transform:scale(1)}}@keyframes expressiveReveal{from{opacity:0;transform:translateY(115%) rotate(3deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@keyframes expressiveImage{from{opacity:0;transform:translateY(50px) rotate(4deg);clip-path:inset(20% 0)}to{opacity:1;transform:translateY(0) rotate(0);clip-path:inset(0)}}@keyframes hello{from{opacity:0;transform:translateY(30px) rotate(-10deg) scale(.85)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}@keyframes detailsIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1050px){.prototype-bar{gap:12px;padding:12px 4%;flex-wrap:wrap}.prototype-label span{display:none}.variants button{padding:8px 11px}.hero-actions{flex-direction:column;align-items:flex-start;gap:17px}.hero-portrait figcaption{flex-direction:column;align-items:flex-start;gap:0}.image-window{height:430px}}@media(max-width:700px){.prototype-bar{padding:12px 6%;gap:10px}.prototype-label{flex-basis:60%}.replay{margin-left:auto;order:1;padding:7px 12px}.variants{order:2;width:100%;justify-content:space-between}.variants button{flex:1;padding:8px 6px;font-size:12px}.motion-description{padding:10px 6%;line-height:1.5;font-size:12px}.hero-composition{grid-template-columns:1fr;gap:40px;padding-top:25px}.prototype-hero h1{font-size:clamp(58px,13.2vw,86px)}.hero-intro{font-size:16px}.image-window{height:440px}.hero-portrait{margin-left:25px}.portrait-word{font-size:75px;left:-25px}.hero-portrait figcaption{flex-direction:row;font-size:13px}.hero-portrait small{font-size:11px}.hero-footnote{font-size:10px;gap:20px}.hero-footnote span:last-child{display:none}.hero-actions{flex-direction:row;align-items:center;gap:20px}.prototype-hero .location{display:none}}@media(prefers-reduced-motion:reduce){.playing *,.reveal,.service-content{animation:none!important;transition:none!important;opacity:1!important;transform:none!important;clip-path:none!important}.reveal.waiting{opacity:1;transform:none}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.prototype-hero .typing-heading{font-size:clamp(52px,6.4vw,94px);margin-bottom:4px}.typed-slot{display:block;font-size:clamp(32px,3.9vw,57px);line-height:1.18;letter-spacing:-.045em;min-height:3.65em;padding:14px 0 0;max-width:100%;overflow-wrap:normal}.type-cursor{display:inline-block;width:2px;height:.85em;background:currentColor;vertical-align:-.02em;margin-left:5px;animation:cursorBlink 1s steps(1) infinite}.typing-pause{border:0;border-bottom:1px solid #b29437;color:#55503c;background:transparent;font-size:12px;padding:0 0 3px;margin:0 0 22px;min-height:25px}.typing-pause:hover{color:var(--ink)}.typing-paused .type-cursor{animation:none;opacity:0}@keyframes cursorBlink{0%,48%{opacity:1}49%,100%{opacity:0}}@media(max-width:700px){.prototype-hero .typing-heading{font-size:clamp(52px,11.4vw,78px)}.typed-slot{font-size:clamp(32px,7.8vw,46px);min-height:3.7em;letter-spacing:-.03em}}@media(prefers-reduced-motion:reduce){.type-cursor{display:none}}

/* Mobile layout and touch controls */
.hero-left,.hero-portrait,.about-copy,.team-grid article,.contact-details>div{min-width:0}
img{max-width:100%}
@media(max-width:700px){
 header{height:78px}header nav{top:100%}
 .menu{min-height:44px;padding:8px 0 8px 14px}
 nav a{min-height:44px;display:flex;align-items:center}
 .typing-pause{min-height:44px;font-size:14px;margin-bottom:14px}
 .hero-portrait figcaption{flex-wrap:wrap;gap:4px 12px}
 .hero-portrait figcaption span,.hero-portrait figcaption small{max-width:100%;overflow-wrap:anywhere}
 .team-grid h3,.contact-details a{overflow-wrap:anywhere}
 .text-link{min-height:44px;display:inline-flex;align-items:center}
 .typed-slot{overflow-wrap:anywhere}
}
@media(max-width:360px){.prototype-hero .typing-heading{font-size:46px}.hero-actions{align-items:flex-start;flex-direction:column;gap:8px}}
