
/* Motion layer. Content remains readable when JavaScript or motion is disabled. */
[hidden]{display:none!important}
.reading-progress{height:3px;position:fixed;inset:0 0 auto;z-index:100;background:transparent;pointer-events:none}
.reading-progress span{display:block;width:100%;height:100%;background:var(--blue);transform:scaleX(0);transform-origin:left;box-shadow:0 0 12px #2c43ed55}
.site-header{background:rgba(247,247,244,.78);backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%)}
.header-inner{transition:padding .25s ease,border-color .25s ease}
.site-header.is-scrolled .header-inner{border-color:#cdd1e4}
.motion-toggle{position:fixed;bottom:18px;right:20px;z-index:40;display:flex;align-items:center;gap:9px;padding:11px 15px;background:rgba(247,247,244,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--ink);font:400 .875rem var(--sans);border:1px solid #c7ccdc;border-radius:30px;box-shadow:0 4px 22px #11172b0c;cursor:pointer}
.motion-toggle:hover{border-color:var(--blue)}
.motion-toggle:focus-visible,.project-controls button:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
.motion-toggle:disabled{cursor:default;color:#60646e}
.motion-symbol{color:var(--blue);width:14px;text-align:center;font-weight:700}
.hero{position:relative;isolation:isolate}
.hero-copy,.hero-art{position:relative;z-index:1;min-width:0}
.hero-aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:paint;opacity:.8}
.hero-aurora::before{content:'';position:absolute;inset:-25%;background:radial-gradient(ellipse at 20% 22%,#6b82ff32,transparent 43%),radial-gradient(ellipse at 67% 76%,#6688e624,transparent 42%),radial-gradient(ellipse at 74% 13%,#7890ff24,transparent 38%);transform:translate3d(0,0,0)}
.motion-enabled .hero-aurora::before{animation:aurora-drift 18s ease-in-out infinite alternate}
@keyframes aurora-drift{from{transform:translate3d(-3%,2%,0) rotate(-5deg) scale(1)}to{transform:translate3d(5%,-4%,0) rotate(7deg) scale(1.08)}}
.headline-line{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.18em}
.headline-line>span,.headline-line>em{display:block!important;width:fit-content}
.motion-enabled .headline-line>span,.motion-enabled .headline-line>em{animation:headline-enter 1.1s cubic-bezier(.16,1,.3,1) both}
.motion-enabled .headline-line:nth-child(2)>span{animation-delay:.12s}
.motion-enabled .headline-line:nth-child(3)>em{animation-delay:.24s}
@keyframes headline-enter{from{transform:translateY(112%) rotate(2deg);opacity:0}to{transform:translateY(0) rotate(0);opacity:1}}
.hero-portrait .art-frame{box-shadow:0 24px 60px -30px #1b285855;transition:box-shadow .4s ease;border-radius:4px}
.hero-portrait .art-frame::before{content:'';position:absolute;inset:12px;border:1px solid #ffffff52;z-index:2;pointer-events:none}
.motion-enabled .hero-portrait .art-frame img,.motion-enabled .hero-portrait .art-frame:hover img{transform:translate3d(0,var(--portrait-y,0px),0) scale(1.08);transition:none;will-change:transform}
.specialty-marquee{overflow:hidden;border-block:1px solid var(--line);background:#f0f1ec;padding:26px 0}
.marquee-track{display:flex;width:max-content;transform:translateX(0)}
.marquee-group{display:flex;align-items:center;gap:36px;padding-right:36px;white-space:nowrap}
.marquee-group>span{font:500 clamp(1.4rem,2.1vw,2rem)/1.3 var(--heading);letter-spacing:-.02em}
.marquee-group>i{font-style:normal;color:var(--blue);font-size:1.35rem}
.motion-enabled .marquee-track{animation:marquee-flow 38s linear infinite}
.specialty-marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee-flow{to{transform:translateX(-50%)}}
html:not(.motion-enabled) .marquee-track{width:100%;display:block}
html:not(.motion-enabled) .marquee-group:first-child{justify-content:center;flex-wrap:wrap;white-space:normal;gap:16px 26px;padding:0 24px}
html:not(.motion-enabled) .marquee-group:nth-child(2){display:none}
.motion-ready .reveal{transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0ms)}
.motion-ready .reveal.visible{transform:translateY(0)}
.button,.header-contact{position:relative;isolation:isolate;overflow:hidden;will-change:auto}
.button-dark{box-shadow:0 5px 18px #11172b0b}
.button-dark::after{content:'';position:absolute;inset:-60% auto -60% -70%;width:35%;background:linear-gradient(90deg,transparent,#ffffff24,transparent);transform:rotate(22deg);pointer-events:none}
.motion-enabled .button-dark:hover::after{animation:button-sheen .75s ease both}
@keyframes button-sheen{to{left:140%}}
.motion-enabled .button:hover{transform:translate(var(--magnet-x,0px),var(--magnet-y,0px))}
.motion-enabled .button,.motion-enabled .header-contact{transform:translate(var(--magnet-x,0px),var(--magnet-y,0px));transition:background .2s,color .2s,transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.motion-enabled .button:hover{box-shadow:0 8px 22px #2c43ed20}
.project-card,.experience-card,.recruit-panel{position:relative;isolation:isolate;--light-x:50%;--light-y:50%}
.project-card::after,.experience-card::after,.recruit-panel::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;background:radial-gradient(350px circle at var(--light-x) var(--light-y),#ffffff26,transparent 70%);box-shadow:inset 0 0 0 1px #8498fc40;transition:opacity .3s}
.motion-enabled .project-card:hover::after,.motion-enabled .experience-card:hover::after,.motion-enabled .recruit-panel:hover::after{opacity:1}
.project-card[data-project-number]::before{content:attr(data-project-number);position:absolute;right:24px;top:46px;z-index:-1;font:500 clamp(6rem,11vw,10rem)/1 var(--heading);letter-spacing:-.08em;color:#26345607;pointer-events:none}
.project-featured[data-project-number]::before{color:#ffffff05;right:42px;top:38px}
.project-card{transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease;transform-style:preserve-3d}
.motion-enabled .project-card.visible:hover{transform:perspective(1200px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));border-color:#7d90ec80;box-shadow:0 16px 38px -25px #14244380}
.project-stage{position:relative}
.project-window{min-width:0}
.project-controls{align-items:center;justify-content:space-between;gap:22px;padding:19px 0 4px;border-top:1px solid var(--line);margin-top:25px}
.project-controls:not([hidden]){display:flex}
.project-steps{display:flex;gap:8px;flex-wrap:wrap}
.project-controls button{font:400 .875rem/1.4 var(--sans);color:#585d6b;border:0;background:transparent;cursor:pointer;min-height:40px;padding:8px 12px;border-radius:24px;transition:background .2s,color .2s}
.project-steps button{display:flex;align-items:center;gap:9px}
.project-steps button>span:first-child{font-size:.75rem}
.project-steps button[aria-current="true"]{background:var(--ink);color:#fff}
.project-controls button:hover{color:var(--blue);background:#2c43ed0b}
.project-steps button[aria-current="true"]:hover{background:var(--blue);color:#fff}
.project-layout-toggle{flex-shrink:0;text-decoration:underline;text-underline-offset:4px}
/* The horizontal layout is enabled only after its full height fits the viewport. */
.projects.rail-layout{position:relative;padding-top:48px;padding-bottom:32px}
.rail-layout .project-stage{padding-top:14px;padding-bottom:12px}
.rail-layout.is-horizontal .project-stage{position:sticky;top:var(--project-top,88px)}
.rail-layout .section-heading{grid-template-columns:1.3fr 1fr;gap:8px 30px}
.rail-layout .section-heading>.eyebrow{margin:0 0 8px}
.rail-layout .section-heading h2{font-size:clamp(2.1rem,2.7vw,2.7rem);line-height:1.12}
.rail-layout .section-intro{font-size:.9375rem;max-width:310px}
.rail-layout .project-window{overflow:hidden;overflow:clip;margin:20px -12px 0;padding:12px}
.rail-layout .project-grid{display:flex;align-items:stretch;gap:24px;width:max-content;margin:0;will-change:transform}
.rail-layout .project-card{flex:0 0 clamp(540px,56vw,760px);width:clamp(540px,56vw,760px);padding:26px;min-width:0;opacity:1!important;transform:none;transition:box-shadow .25s,transform .25s}
.rail-layout .project-featured{display:grid;grid-template-columns:1fr 1fr;gap:32px;flex-basis:clamp(670px,70vw,880px);width:clamp(670px,70vw,880px)}
.rail-layout .project-card:not(.project-featured) h3{font-size:2.2rem;margin-top:18px;line-height:1.15}
.rail-layout .project-subtitle{margin-top:9px;font-size:1.15rem}
.rail-layout .project-description{margin-top:16px;max-width:530px;flex:none}
.rail-layout .project-details{margin-top:18px}
.rail-layout .project-tools{margin-top:auto;padding-top:18px}
.rail-layout .project-client{margin-top:25px}
.rail-layout .project-featured h3{font-size:4.4rem}
.rail-layout .project-short{margin-top:20px}
.rail-layout .featured-story>p{font-size:1rem;line-height:1.55}
.rail-layout .project-contribution{margin-top:18px;padding-top:19px}
.rail-layout .project-contribution ul{font-size:.9375rem;margin-top:12px}
.rail-layout .project-contribution li{margin:5px 0}
.rail-layout .project-controls{margin-top:7px;padding-top:10px}
.rail-layout .reveal{opacity:1;transform:none;transition:none}
.contact{position:relative;isolation:isolate;overflow:hidden}
.contact::before{content:'';position:absolute;width:750px;height:500px;right:-300px;bottom:-300px;background:radial-gradient(ellipse,#384eea40,transparent 66%);pointer-events:none;z-index:-1}
.motion-enabled .contact::before{animation:aurora-drift 15s ease-in-out infinite alternate}
.contact-link h2{transition:color .35s}
.contact-link:hover h2{color:#b7c1ff}
.contact-link:hover h2 em{color:white}
.recruit-panel{background:linear-gradient(125deg,#edf0ff,#f5f6fd);box-shadow:0 16px 42px -38px #263dca77}
.footer{padding-bottom:30px;min-height:115px}
@media(min-width:1100px){.project-card:not(.project-featured){border-radius:8px}.project-featured{border-radius:8px}}
@media(max-width:760px){.motion-toggle{bottom:12px;right:12px;padding:9px 12px;font-size:.8125rem}.marquee-group{gap:24px;padding-right:24px}.specialty-marquee{padding-block:22px}.project-controls{flex-wrap:wrap}.step-name{display:none}.footer{padding-bottom:68px}.hero-aurora{opacity:.6}.hero-portrait .art-frame{box-shadow:0 16px 38px -24px #1b28584d}}
@media(hover:none),(pointer:coarse){.project-card::after,.experience-card::after,.recruit-panel::after{display:none}.button,.header-contact{transform:none!important}}
html:not(.motion-enabled) .reveal{opacity:1;transform:none;transition:none}
html:not(.motion-enabled) .hero-portrait img{transform:none!important}
html:not(.motion-enabled) .project-card:hover{transform:none}
@media(prefers-reduced-motion:reduce){.hero-aurora::before,.contact::before,.marquee-track{animation:none!important}.headline-line>*{animation:none!important;opacity:1!important;transform:none!important}.hero-portrait img{transform:none!important}.reveal{opacity:1!important;transform:none!important}.project-card,.button,.header-contact{transform:none!important}html{scroll-behavior:auto}}

.page-hidden .hero-aurora::before,.page-hidden .contact::before,.page-hidden .marquee-track{animation-play-state:paused!important}
@media(max-width:760px){.motion-enabled .hero-portrait .art-frame img{transform:none!important}}

html:not(.motion-enabled){scroll-behavior:auto}
html:not(.motion-enabled) .button,html:not(.motion-enabled) .header-contact{transform:none!important}

