/* Restrained ambient motion on the existing light palette. */
body{isolation:isolate}
.ambient-particles{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.site-intro{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#fff;pointer-events:none;animation:intro-failsafe .1s 2.5s forwards;transition:opacity .55s ease,visibility .55s;}
.intro-identity{display:flex;flex-direction:column;align-items:center;animation:intro-arrive .7s var(--ease) both}
.intro-monogram{font:clamp(100px,16vw,180px)/1.1 var(--display);color:#111;letter-spacing:-.04em}
.intro-monogram>span{color:var(--teal)}
.intro-name{font-size:15px;letter-spacing:4px;margin-top:16px;font-weight:700}
.intro-line{height:2px;width:190px;background:var(--teal);margin:30px 0 20px;transform-origin:left;animation:intro-line 1.1s var(--ease) both}
.intro-label{font-size:11px;letter-spacing:1.5px;color:#5b6464}
.site-intro.is-finished{opacity:0;visibility:hidden}
@keyframes intro-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes intro-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes intro-failsafe{to{opacity:0;visibility:hidden}}
.websites-section{padding-block:100px}
.websites-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:44px}
.websites-heading .eyebrow{margin-bottom:18px}
.websites-heading h2{font:400 clamp(45px,6vw,86px)/1.08 var(--display);letter-spacing:-.02em}
.websites-heading h2 span{color:var(--teal)}
.websites-heading>p{max-width:310px;line-height:1.8;font-size:16px}
.website-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.website-card{min-width:0}
.website-preview{display:block;position:relative;width:100%;background:#eef4f2;border:1px solid var(--line);border-radius:6px;padding:12px;overflow:hidden;text-align:left}
.website-browser{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 3px 12px;font-size:12px;color:#526564}
.website-browser>span:first-child{letter-spacing:3px;color:#08a4a7}
.website-preview img{display:block;width:100%;aspect-ratio:1.77;object-fit:cover;object-position:top;border-radius:3px;transition:transform .8s var(--ease)}
.website-preview:hover img{transform:scale(1.025)}
.website-card-info{padding-top:23px}
.website-card-info>.eyebrow{font-size:11px;color:var(--accent-text)}
.website-card h3{font-size:clamp(25px,2.6vw,36px);font-weight:650;letter-spacing:-1px;margin:10px 0}
.website-card-info>p:not(.eyebrow){font-size:16px;line-height:1.8;max-width:460px}
.project-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:22px}
.project-actions .text-link{font-size:14px}
.websites-footer{margin-top:42px;padding-top:25px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;align-items:center}
.websites-footer p{font-size:14px}
.dialog-image{display:flex;align-items:center;background:#edf3f1;padding:18px;min-width:0}
.dialog-image img{display:block;width:100%;height:auto;border:1px solid #c3d2cc;border-radius:4px}
.project-copy .project-actions{margin-top:0}
.cinema-static .website-preview img{transition:none}
.cinema-static .website-card.reveal{opacity:1;transform:none;transition:none}
.cinema-static .site-intro{display:none}
@media(max-width:760px){
 .websites-section{padding-block:65px}
 .websites-heading{display:block;margin-bottom:30px}
 .websites-heading>p{margin-top:22px;max-width:100%}
 .website-grid{grid-template-columns:1fr;gap:44px}
 .website-preview{padding:9px}
 .website-browser{font-size:11px}
 .website-card-info{padding-top:20px}
 .websites-footer{align-items:flex-start;flex-direction:column;margin-top:35px}
 .dialog-image{padding:12px}
}
@media(prefers-reduced-motion:reduce){.site-intro,.ambient-particles{display:none}.website-preview img{transition:none}}

/* Frosted surfaces sit over slow-moving pools of the brand color. */
.ambient-light{position:fixed;inset:0;overflow:hidden;z-index:-2;pointer-events:none}
.ambient-light i{position:absolute;width:min(55vw,720px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#08a4a71c, #08a4a708 45%,transparent 70%);animation:ambient-drift 24s ease-in-out infinite alternate}
.ambient-light i:first-child{left:-17%;top:-25%}
.ambient-light i:nth-child(2){right:-24%;top:25%;animation-delay:-12s;animation-duration:30s}
.ambient-light i:last-child{width:45vw;left:25%;bottom:-45%;animation-delay:-7s}
@keyframes ambient-drift{from{transform:translate3d(-3%,-4%,0) scale(.9)}to{transform:translate3d(12%,15%,0) scale(1.15)}}
.main-nav{padding:12px 24px;border:1px solid #ffffffd9;border-radius:40px;background:#ffffffb8;box-shadow:0 5px 25px #144b4810,inset 0 1px 0 #fff;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.main-nav>a[aria-current]:before{bottom:-6px}
.website-card{padding:18px;border:1px solid #ffffffed;border-radius:18px;background:#ffffffb3;box-shadow:0 16px 50px #124e4810,inset 0 1px 0 #fff;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.website-card-info{padding:23px 4px 7px}
.website-preview{background:linear-gradient(135deg,#ffffffb8,#e2f2ef80);border-color:#cadfd9;border-radius:10px;box-shadow:0 4px 18px #16423c08;transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .65s var(--ease),box-shadow .5s ease}
.website-preview:hover{box-shadow:0 12px 25px #16423c19}
.website-preview:after,.project-visual:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--shine-x,50%) var(--shine-y,0%),#ffffff60,transparent 55%);opacity:0;transition:opacity .5s;pointer-events:none;z-index:1}
.website-preview:hover:after,.project-visual:hover:before{opacity:1}
.project-visual{background:linear-gradient(135deg,#ffffffa6,#dcefeb80);border-color:#d1e4df;border-radius:16px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .65s var(--ease)}
.reel-card{background:#ffffffb8;box-shadow:0 18px 40px #183c3420,inset 0 1px 0 #fff}
.reel-card-label{background:#ffffffd6;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.gallery-controls{background:#ffffffb3;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid #ffffffef;border-radius:40px;padding:9px 12px;box-shadow:0 8px 25px #16423c0c;width:max-content;justify-self:center}
.identity-art,.brief-form{background:linear-gradient(125deg,#ffffffb3,#e9f5f080);border:1px solid #d5e5df;border-radius:18px;box-shadow:0 18px 50px #124e480b,inset 0 1px 0 #fff;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.brief-form{padding:30px;min-width:0}
.project-dialog{background:#fffffff2;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:18px}
.motion-switch{background:#ffffffb8;border-color:#ffffffec;box-shadow:0 4px 24px #16423c15;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.pill-button{position:relative;overflow:hidden;transition:background .3s,transform .4s var(--ease),box-shadow .4s}
.pill-button:after{content:'';position:absolute;inset:-80% auto -80% -55%;width:35%;background:linear-gradient(90deg,transparent,#ffffff50,transparent);transform:rotate(25deg);transition:left .7s var(--ease);pointer-events:none}
.pill-button:hover:after{left:130%}
.text-link>span,.focus-symbol{transition:transform .4s var(--ease)}
.text-link:hover>span{transform:translate(3px,-3px)}
.focus-row:hover .focus-symbol{transform:rotate(45deg)}
.motion-ribbon{overflow:hidden;border-block:1px solid #bcdad480;background:#eff8f5a6;padding:20px 0;position:relative;isolation:isolate}
.ribbon-track{display:flex;width:max-content;animation:ribbon-travel 32s linear infinite;will-change:transform}
.ribbon-group{display:flex;align-items:center;gap:36px;padding-right:36px;white-space:nowrap;font:400 clamp(20px,2.5vw,34px)/1.2 var(--display);letter-spacing:.01em;color:#34524e}
.ribbon-group b{font:400 24px/1 var(--body);color:var(--teal)}
@keyframes ribbon-travel{to{transform:translateX(-50%)}}
.motion-ribbon:hover .ribbon-track{animation-play-state:paused}
.websites-heading h2{transform:translate3d(0,var(--heading-shift,0px),0);will-change:transform}
.scroll-enter{opacity:0;transform:translate3d(0,30px,0);transition:opacity .85s var(--ease),transform .85s var(--ease);transition-delay:var(--enter-delay,0ms)}
.scroll-enter.is-in-view,.scroll-enter:focus-within{opacity:1;transform:translate3d(0,0,0)}
.effects-paused .ambient-light i,.effects-paused .ribbon-track{animation-play-state:paused}
.cinema-static .ambient-light i,.cinema-static .ribbon-track{animation:none}
.cinema-static .scroll-enter{opacity:1;transform:none;transition:none}
.cinema-static .website-preview,.cinema-static .project-visual,.cinema-static .websites-heading h2{transform:none;transition:none}
.cinema-static .ribbon-track{transform:none}
.cinema-static .pill-button:after{display:none}
.cinema-static .text-link>span,.cinema-static .focus-symbol{transition:none}
@media(max-width:1100px){.main-nav{gap:20px;padding:10px 18px}}
@media(max-width:760px){
 .main-nav{border-radius:16px;padding:14px 22px;background:#fffffff2}
 .main-nav>a[aria-current]:before{bottom:25px}
 .website-card{padding:12px;border-radius:14px}
 .website-card-info{padding:20px 4px 10px}
 .brief-form{padding:22px 16px}
 .gallery-controls{padding:6px 8px;gap:6px}
 .gallery-prev,.gallery-next{width:34px;height:34px}
 .ribbon-group{gap:24px;padding-right:24px}
 .motion-ribbon{padding-block:17px}
 .ambient-light i{width:95vw}
 .website-preview,.project-visual{transform:none}
 .websites-heading h2{transform:none;will-change:auto}
}
@supports not (backdrop-filter:blur(1px)){.website-card,.main-nav,.brief-form,.identity-art{background:#f6faf8}}
@media(max-width:480px){.brief-form .form-row{grid-template-columns:1fr;gap:0}}
@media(prefers-reduced-motion:reduce){
 .ambient-light i,.ribbon-track{animation:none}
 .scroll-enter{opacity:1;transform:none;transition:none}
 .website-preview,.project-visual,.websites-heading h2{transform:none;will-change:auto}
 .pill-button:after{display:none}
}

/* A clear text wordmark and more comfortable reading sizes. */
.brand-name{font-size:22px;font-weight:800;letter-spacing:1px;white-space:nowrap;color:#111}
body{font-size:18px}
.main-nav>a{font-size:16px}
.text-link,.pill-button,.header-contact,.project-actions .text-link{font-size:16px}
.eyebrow,.page-intro>.eyebrow,.intro-bottom .eyebrow,.hero-meta,.portrait-role,.website-card-info>.eyebrow,.project-copy .eyebrow,.section-head .eyebrow,.dialog-top .eyebrow{font-size:13px;letter-spacing:1px}
.intro-bottom p,.story-copy p:not(.eyebrow),.focus-row p,.process-grid p,.project-copy p:not(.eyebrow),.website-card-info>p:not(.eyebrow),.websites-heading>p,.manifesto-bottom p,.contact-aside>p,.contact-note p{font-size:18px;line-height:1.8}
.portrait-hero .hero-note p{font-size:19px;line-height:1.7}
.portrait-hero .hero-actions .pill-button,.portrait-hero .hero-actions .text-link,.portrait-hero .hero-intro .text-link{font-size:15px}
.hero-bottom,.cinema-ready .hero-bottom{font-size:13px;letter-spacing:.4px}
.website-browser,.tags span,.project-number,.visual-play,.reel-card-label small{font-size:13px}
.reel-card-label strong{font-size:16px}
.filter{font-size:16px}.filter span{font-size:13px}
.footer-copy,.footer-links,.footer-top,.websites-footer p,.form-note,.dialog-caption{font-size:15px!important}
.field label,.interest-field legend,.interest-options span,.next-work p,.dialog-copy ul{font-size:16px}
.field input,.field textarea,.field select{font-size:17px}
.dialog-copy p{font-size:17px}
.dialog-copy h3{font-size:14px}
.motion-switch{font-size:13px;min-height:40px}
.scene-kicker,.gallery-intro .eyebrow,.gallery-instruction,.gallery-status .eyebrow,.film-caption .eyebrow{font-size:13px}
.gallery-intro p:last-child,.gallery-current span,.film-caption p,.film-caption .text-link{font-size:16px}
.page-title{overflow-wrap:normal}

/* Inner pages get a quiet typographic curtain instead of the home monogram. */
.page-intro-loader{background:#f7fcfbf5;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .6s var(--ease),opacity .45s ease,visibility .6s;animation:intro-failsafe .1s 1.9s forwards}
.page-loader-content{display:flex;flex-direction:column;align-items:center;gap:22px;padding:24px;animation:page-loader-enter .5s var(--ease) both}
.page-loader-name{font-size:16px;letter-spacing:3px;font-weight:800;color:#111}
.page-loader-title{font:400 clamp(44px,9vw,100px)/1.15 var(--display);letter-spacing:-.02em;color:#08a4a7;text-align:center}
.page-loader-track{width:120px;height:3px;background:#dce9e5;overflow:hidden;border-radius:3px}
.page-loader-track i{display:block;background:#111;width:55%;height:100%;animation:page-loader-sweep .9s var(--ease) infinite}
.page-intro-loader.is-finished{transform:translateY(-100%);opacity:0;visibility:hidden}
@keyframes page-loader-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes page-loader-sweep{from{transform:translateX(-110%)}to{transform:translateX(290%)}}
@view-transition{navigation:none}
@media(min-width:761px) and (max-width:1000px){
 .main-nav{gap:17px;padding:9px 14px}
 .brand-name{font-size:20px}
 .header-contact{font-size:14px;padding:11px 15px;gap:16px}
 .main-nav>a{font-size:15px}
 .portrait-hero .hero-note p{font-size:17px}
 .portrait-hero .hero-actions .pill-button{padding:12px 13px;gap:15px}
}
@media(max-width:760px){
 body{font-size:17px}
 .brand-name{font-size:20px;letter-spacing:.6px}
 .header-contact{font-size:14px;padding:10px 13px;gap:12px}
 .main-nav>a{font-size:17px}
 .eyebrow,.hero-meta,.page-intro>.eyebrow,.section-head .eyebrow{font-size:12px;letter-spacing:.7px}
 .intro-bottom p,.story-copy p:not(.eyebrow),.focus-row p,.process-grid p,.project-copy p:not(.eyebrow),.website-card-info>p:not(.eyebrow),.websites-heading>p,.manifesto-bottom p,.contact-aside>p,.contact-note p{font-size:17px}
 .portrait-hero .hero-note p{font-size:17px;max-width:none}
 .portrait-hero .hero-actions .pill-button,.portrait-hero .hero-actions .text-link,.portrait-hero .hero-intro .text-link{font-size:14px}
 .hero-bottom,.cinema-ready .hero-bottom{font-size:12px}
 .project-actions{gap:16px}
 .project-actions .text-link,.project-copy .text-link,.text-link,.pill-button{font-size:15px}
 .project-actions .text-link{gap:12px}
 .filter{font-size:14px;padding:10px 13px}
 .filter span,.website-browser,.project-number,.visual-play{font-size:12px}
 .scene-kicker,.gallery-intro .eyebrow,.gallery-status .eyebrow,.gallery-instruction{font-size:12px}
 .gallery-intro p:last-child,.gallery-current span{font-size:14px}
 .gallery-current{gap:10px}
 .gallery-controls{padding:6px;gap:5px}
 .gallery-dots{gap:2px}
 .gallery-prev,.gallery-next{width:32px;height:32px}
 .gallery-instruction{grid-column:1/-1}
 .reel-card-label small{font-size:11px}.reel-card-label strong{font-size:15px}
 .footer-inner{gap:20px}
 .footer-copy,.footer-links,.footer-top{font-size:14px!important}
 .footer-links{gap:16px;flex-wrap:wrap}
 .footer-top{margin-left:0}
 .motion-switch{font-size:12px}
 .next-work .text-link{margin-left:0;white-space:normal}
 .film-caption .text-link{font-size:14px}
 .end-copy{padding-inline:20px}
}
@media(max-width:420px){
 .brand-name{font-size:18px}
 .header-contact{font-size:13px;padding:9px 11px;margin-right:10px;gap:9px}
 .portrait-hero .hero-content,.cinema-ready .portrait-hero .hero-content{gap:23px}
 .portrait-hero .hero-intro,.cinema-ready .portrait-hero .hero-intro{grid-column:1/-1;grid-row:2}
 .portrait-hero .hero-intro h2,.cinema-ready .portrait-hero .hero-intro h2{font-size:52px}
 .portrait-hero .hero-intro h2 br{display:none}
 .portrait-hero .hero-intro h2 br:after{content:' '}
 .portrait-hero .hero-note,.cinema-ready .portrait-hero .hero-note{grid-column:1/-1;grid-row:3}
 .portrait-hero .hero-actions{flex-direction:row;align-items:center;gap:20px;flex-wrap:wrap}
 .hero-bottom>span{max-width:145px}
 .project-actions{gap:12px}
 .project-actions .text-link{font-size:14px;gap:9px}
 .gallery-bottom{gap:10px}
}
@media(prefers-reduced-motion:reduce){.page-intro-loader{display:none}}