/* A short brand entrance using the client's original, unmodified logo. */
:root{--entrance-ease:cubic-bezier(.22,1,.36,1)}
.hero{background:radial-gradient(ellipse at 14% 30%,#fff 20%,#f5f7f9 70%)}
.hero-copy{padding-top:66px}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,4.55vw,78px);letter-spacing:-2px;line-height:1.17;margin:30px 0 27px}
.headline-line{display:block;overflow:hidden;padding:0 .08em .12em 0;margin-bottom:-.12em}
.headline-line>span,.headline-line>em{display:block;white-space:nowrap;transform-origin:left bottom}
h1 em{font-size:1.075em;letter-spacing:-2px;position:relative;padding-bottom:8px}
.hero-copy>.eyebrow{font-size:12px;letter-spacing:1.8px}
.hero-copy>p{margin-top:3px;max-width:540px}
.hero-visual{border-radius:2px 2px 72px 2px;isolation:isolate}
.hero-image.active{animation:none}
.hero-frame{position:absolute;inset:17px;z-index:2;border:1px solid #ffffff40;border-bottom-right-radius:50px;pointer-events:none}
.hero-visual::before{content:'';position:absolute;inset:0;z-index:5;background:var(--ink);transform:scaleX(0);transform-origin:right center;pointer-events:none}
.hero-images{transition:transform .8s var(--entrance-ease);transform:translate3d(var(--photo-x,0px),var(--photo-y,0px),0) scale(1.025);will-change:auto}
.hero-image{transition:opacity 1s ease,transform 7s ease}
.hero-project{box-shadow:0 8px 40px #142e4914;transition:transform .55s var(--entrance-ease),box-shadow .55s}
.hero-visual:hover .hero-project{transform:translateY(-5px);box-shadow:0 18px 50px #142e4928}
.hero-next:hover{transform:rotate(-35deg)}
.header .brand{position:relative;overflow:hidden}
.header .brand::after{content:'';position:absolute;inset:-25% auto -25% -80%;width:45%;background:linear-gradient(105deg,transparent,#ffffffd9,transparent);transform:skewX(-20deg);pointer-events:none}
.header .brand:hover::after,.header .brand:focus-visible::after{animation:logo-glint .9s var(--entrance-ease)}
.button{position:relative;overflow:hidden}
.button::before{content:'';position:absolute;inset:0 auto 0 -100%;width:55%;background:linear-gradient(105deg,transparent,#ffffff25,transparent);transform:skewX(-20deg);pointer-events:none}
.button:hover::before{animation:logo-glint .85s ease}
.button>span{transition:transform .35s var(--entrance-ease)}
.button:hover>span{transform:translate(3px,-3px)}
.intro-replay{display:inline-flex;align-items:center;gap:13px;min-height:44px;padding:8px 0 8px 12px;background:transparent;color:var(--ink);font-size:12px;margin-left:auto}
.intro-replay span{font-size:23px;transition:transform .5s}.intro-replay:hover span{transform:rotate(-120deg)}
.intro-replay[hidden]{display:none}
.brand-intro{display:none;position:fixed;inset:0;z-index:90;pointer-events:none}
.intro-playing .brand-intro{display:block}
.intro-curtain{position:absolute;inset:0;background:#fff;box-shadow:0 30px 80px #203f6010}
.intro-grid{position:absolute;inset:0;display:flex;justify-content:space-around;overflow:hidden}
.intro-grid>span{height:100%;width:1px;background:linear-gradient(transparent,#203f601f,transparent);transform-origin:top}
.intro-grid:before,.intro-grid:after{content:'';position:absolute;left:6%;right:6%;height:1px;background:#203f6014;top:26%}.intro-grid:after{top:auto;bottom:26%}
.intro-logo-stage{position:absolute;inset:0 0 9%;display:flex;align-items:center;justify-content:center}
.intro-logo{width:min(480px,70vw);height:auto;object-fit:contain;transform-origin:top left;will-change:transform,clip-path}
.intro-words{position:absolute;left:10%;right:10%;top:61%;display:flex;justify-content:center;gap:20px;font:400 21px var(--serif);color:var(--ink)}
.intro-words em{font-style:italic}
.intro-bottom{position:absolute;bottom:40px;left:6%;right:6%;display:flex;justify-content:space-between;gap:25px;font-size:10px;letter-spacing:2px;color:var(--ink)}
.intro-skip{display:none;position:fixed;bottom:85px;right:6%;z-index:91;min-height:44px;align-items:center;gap:20px;background:transparent;border-bottom:1px solid var(--line);font-size:12px;padding:10px 0}
.intro-skip>span{font-size:20px}.intro-playing .intro-skip{display:flex}
.intro-playing .header .brand-logo{opacity:0}
.intro-playing .intro-curtain{animation:curtain-lift .95s 1.25s cubic-bezier(.76,0,.24,1) both}
.intro-playing .intro-grid{animation:intro-grid-out .5s 1.1s both}
.intro-playing .intro-grid>span{animation:grid-draw 1s var(--entrance-ease) both}
.intro-playing .intro-logo{animation:logo-unveil 1.15s .05s var(--entrance-ease) both}
.intro-playing .intro-words{animation:intro-words 1.4s .35s both}
.intro-playing .intro-bottom{animation:intro-words 1.5s .15s both}
.intro-playing .intro-skip{animation:intro-skip-in .5s .3s both}
.entrance-active .headline-line>span,.entrance-active .headline-line>em{animation:line-rise 1.1s var(--entrance-ease) both}
.entrance-active .headline-line:nth-child(1)>span{animation-delay:1.52s}
.entrance-active .headline-line:nth-child(2)>span{animation-delay:1.68s}
.entrance-active .headline-line:nth-child(3)>em{animation-delay:1.84s}
.entrance-active .hero-copy>.eyebrow{animation:soft-rise .8s 1.45s both}
.entrance-active .hero-copy>p{animation:soft-rise .9s 2.05s both}
.entrance-active .hero-actions{animation:soft-rise .9s 2.2s both}
.entrance-active .hero-scope,.entrance-active .hero-foot{animation:soft-rise .9s 2.35s both}
.entrance-active .header .nav,.entrance-active .header .nav-cta,.entrance-active .header .menu-toggle{animation:soft-rise .8s 1.8s both}
.entrance-active .hero-visual::before{animation:photo-unveil 1.15s 1.45s cubic-bezier(.76,0,.24,1) both}
.entrance-active .hero-image.active{animation:photo-settle 2.2s 1.45s var(--entrance-ease) both}
.entrance-active .hero-project{animation:soft-rise 1s 2.1s both}
.entrance-active .visual-index,.entrance-active .hero-frame,.entrance-active .hero-slider{animation:soft-rise .8s 2.3s both}
@keyframes logo-unveil{from{clip-path:inset(0 100% 0 0);opacity:0;filter:blur(6px)}20%{opacity:1}to{clip-path:inset(0);opacity:1;filter:blur(0)}}
@keyframes grid-draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes intro-grid-out{to{opacity:0}}
@keyframes intro-words{0%{opacity:0;transform:translateY(12px)}25%,65%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-8px)}}
@keyframes intro-skip-in{from{opacity:0}to{opacity:1}}
@keyframes curtain-lift{from{transform:translateY(0)}to{transform:translateY(-105%)}}
@keyframes line-rise{from{transform:translateY(120%) rotate(2deg);opacity:0}to{transform:translateY(0) rotate(0);opacity:1}}
@keyframes soft-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes photo-unveil{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes photo-settle{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes logo-glint{from{left:-80%}to{left:160%}}
@media(min-width:1600px){h1{font-size:clamp(72px,4.55vw,91px)}.hero-copy{padding-top:80px}}
@media(max-width:1150px){h1{font-size:clamp(42px,4.65vw,58px);letter-spacing:-1.5px}.hero-copy{padding-top:58px}}
@media(max-width:900px){h1{font-size:clamp(37px,4.65vw,45px);letter-spacing:-1.25px}h1 em{letter-spacing:-1.4px}.hero-copy>.eyebrow{font-size:10px;letter-spacing:1.2px}.hero-copy{padding-top:48px}.hero-images{transform:none}.intro-words{font-size:19px;gap:14px}}
@media(max-width:600px){h1{font-size:clamp(35px,10.1vw,60px);line-height:1.22;letter-spacing:-1.15px;margin:23px 0 24px}h1 em{font-size:1.08em;letter-spacing:-1.5px}.hero-copy{padding-top:38px}.hero-copy>.eyebrow{font-size:10px;letter-spacing:1.1px}.hero-copy>p{margin-top:0}.hero-visual{border-radius:2px 2px 54px 2px}.hero-frame{inset:12px;border-bottom-right-radius:42px}.intro-replay{font-size:11px;gap:8px;padding-left:6px}.hero-foot{gap:6px;flex-wrap:wrap}.intro-logo-stage{bottom:11%}.intro-logo{width:79vw;max-width:390px}.intro-words{top:57%;left:8%;right:8%;font-size:19px;gap:7px;flex-direction:column;align-items:center;line-height:1.6}.intro-bottom{bottom:26px;font-size:8px;letter-spacing:1.1px;line-height:1.7}.intro-bottom span{max-width:135px}.intro-bottom span:last-child{text-align:right}.intro-skip{bottom:82px}.hero-visual:hover .hero-project{transform:none}}
@media(prefers-reduced-motion:reduce){.brand-intro,.intro-skip{display:none!important}.intro-playing .header .brand-logo{opacity:1}.entrance-active .hero-visual::before{transform:scaleX(0)}.headline-line>span,.headline-line>em,.entrance-active .hero-copy>*,.entrance-active .header>*{opacity:1!important;transform:none!important}.intro-replay{display:none}.hero-images{transform:none}.hero-visual:hover .hero-project{transform:none}}