:root{color-scheme:light;--ink:#142130;--muted:#536172;--line:#dfe5e9;--paper:#f7f9fa;--aqua:#55d9c8;--navy:#111a28;--blue:#173e58;font-family:Arial,Helvetica,sans-serif;font-synthesis:none;scroll-behavior:smooth}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#fff}button,a{font:inherit}a{color:inherit}button{cursor:pointer}img{max-width:100%;display:block}p,h1,h2,h3,figure{margin:0}.shell{width:min(100% - 72px,1320px);margin-inline:auto}.skip{position:absolute;left:12px;top:-80px;background:white;padding:12px;z-index:40}.skip:focus{top:12px}a:focus-visible,button:focus-visible,video:focus-visible{outline:3px solid #2aa796;outline-offset:4px}
.site-header{background:white;border-bottom:1px solid #ecf0f2}.header-inner{min-height:81px;display:flex;justify-content:space-between;align-items:center;gap:24px}.brand{text-decoration:none;display:flex;align-items:center;gap:13px}.brand-mark{background:var(--navy);color:white;display:grid;place-items:center;font-size:27px;font-weight:900;letter-spacing:-.1em;width:40px;height:40px;border-radius:5px;padding-right:5px}.brand-stop{color:var(--aqua)}.brand-name{font-size:15px;font-weight:800;letter-spacing:.12em;line-height:1.05}.brand-name small{display:block;color:var(--muted);font-weight:600;letter-spacing:.14em;font-size:9px;margin-top:5px}.site-header nav{display:flex;gap:34px}.site-header nav a{text-decoration:none;font-size:14px;font-weight:700;padding:12px 0}.site-header nav a:hover{color:#147f78}
.hero{background:var(--navy);color:white;overflow:hidden}.hero-inner{min-height:530px;display:grid;grid-template-columns:1.03fr .97fr;align-items:stretch}.hero-copy{padding:83px 50px 76px 0;display:flex;flex-direction:column;align-items:flex-start}.eyebrow{font-size:11px;letter-spacing:.2em;font-weight:800;color:#206c75;display:flex;align-items:center;gap:13px}.eyebrow.light{color:#8ee4d5}.eyebrow-line{display:inline-block;height:2px;width:28px;background:currentColor;flex:none}.hero h1{font-size:clamp(52px,6vw,92px);letter-spacing:-.077em;line-height:.99;margin:34px 0 27px;font-weight:800}.hero h1 em{font-style:normal;color:var(--aqua)}.hero-copy p{max-width:530px;color:#d4dde2;font-size:20px;line-height:1.5}.text-link{display:inline-flex;gap:22px;align-items:center;color:inherit;font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:8px}.hero-link{margin-top:38px;color:var(--aqua);font-size:15px}.hero-link span{font-size:22px;line-height:0}.hero-art{align-self:stretch;position:relative;min-height:450px;margin-right:calc((min(100vw,1392px) - min(100vw - 72px,1320px))/ -2);background:#1e2c3e;display:flex;align-items:center;justify-content:center}.hero-art:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,26,40,.15),transparent 38%);z-index:1;pointer-events:none}.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center}.hero-art-label{position:absolute;bottom:24px;right:35px;color:white;background:rgba(13,22,36,.75);font-weight:700;font-size:10px;letter-spacing:.16em;padding:12px 14px;z-index:2}
.section{padding-top:100px;padding-bottom:105px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:39px}.section-head h2{font-size:clamp(42px,5vw,69px);letter-spacing:-.066em;line-height:1.05;margin-top:17px}.section-head p{color:var(--muted);font-size:17px;line-height:1.5;max-width:400px;padding-bottom:5px}.work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.project-card{background:#fff;color:var(--ink);border:1px solid var(--line);padding:0;text-align:left;min-width:0;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.project-card:hover{transform:translateY(-4px);box-shadow:0 16px 35px rgba(20,33,48,.11);border-color:#b7d3d4}.project-card.wide{grid-column:span 2}.art{display:flex;align-items:center;justify-content:center;height:268px;overflow:hidden;background:#eef3f6}.art img{height:100%;width:100%;object-fit:contain;transition:transform .4s ease}.project-card:hover .art img{transform:scale(1.035)}.art-maturity{background:#dce7ee}.art-maturity img{object-fit:cover}.art-leaders,.art-teal{background:#3bbec2}.art-dark{background:#333d4c}.art-paper{background:#eff3f5}.art-paper img{padding:12px}.card-meta{padding:20px 21px 23px;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;min-height:94px}.card-meta strong{display:block;font-size:17px;line-height:1.25;letter-spacing:-.02em}.card-meta small{display:block;color:var(--muted);font-size:13px;line-height:1.35;margin-top:7px}.card-arrow{font-size:20px;color:#4b8d90;line-height:1}
.editorial{background:#113d60;color:#fff;overflow:hidden}.editorial-inner{display:grid;grid-template-columns:.85fr 1.15fr;min-height:560px;align-items:center;gap:65px}.editorial-copy{padding:68px 0}.editorial h2{font-size:clamp(48px,5.2vw,78px);line-height:1;letter-spacing:-.07em;margin:29px 0 23px}.accent{color:#b6e957}.editorial-copy p{font-size:18px;line-height:1.56;color:#dceaf2;max-width:495px}.outline-link{display:inline-flex;align-items:center;gap:34px;border:1px solid #9fd1da;text-decoration:none;color:#fff;padding:16px 20px;font-size:14px;font-weight:700;margin:33px 0 28px;transition:background .2s,color .2s}.outline-link:hover{background:#fff;color:#113d60}.editorial-copy>small{display:block;color:#b9d6e3;font-size:13px}.editorial-preview{position:relative;height:460px;display:flex;align-items:center;justify-content:flex-start}.editorial-preview img{box-shadow:0 16px 40px rgba(5,24,39,.35);background:white}.preview-main{width:77%;position:relative;z-index:2;transform:rotate(-2deg)}.preview-side{width:54%;position:absolute;right:-8%;bottom:19px;z-index:1;transform:rotate(5deg)}
.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}.video-card{text-decoration:none;border:1px solid var(--line);display:block;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}.video-card:hover{transform:translateY(-4px);box-shadow:0 16px 35px rgba(20,33,48,.12)}.video-poster{height:290px;display:flex;flex-direction:column;position:relative;padding:28px;overflow:hidden;isolation:isolate}.video-poster:before,.video-poster:after{content:"";position:absolute;z-index:-1;pointer-events:none}.video-poster:before{width:65%;aspect-ratio:1;border:1px solid currentColor;border-radius:50%;right:-13%;top:-45%;opacity:.3}.video-poster:after{width:67%;height:1px;background:currentColor;opacity:.38;transform:rotate(-27deg);right:-18%;bottom:21%}.video-blue .video-poster{background:linear-gradient(128deg,#102f48,#187d9b);color:#e9ffff}.video-orange .video-poster{background:linear-gradient(128deg,#222b3a,#75432c);color:#fff0dd}.video-green .video-poster{background:linear-gradient(128deg,#133c42,#208d82);color:#e8fff6}.video-violet .video-poster{background:linear-gradient(128deg,#282253,#694497);color:#f6eaff}.video-index{font-size:11px;letter-spacing:.18em;font-weight:800;opacity:.83}.poster-title{font-size:clamp(29px,3.1vw,52px);line-height:.96;letter-spacing:-.055em;font-weight:900;margin:auto 0}.poster-title i{font-style:normal;color:#a8ecdf}.video-orange .poster-title i{color:#ffa655}.video-violet .poster-title i{color:#ceb9ff}.video-orange .poster-title>span{color:#ffa655}.play{position:absolute;right:27px;bottom:28px;display:grid;place-items:center;width:52px;height:52px;border:1px solid currentColor;border-radius:50%;font-size:17px;padding-left:3px;transition:background .2s,transform .2s}.video-card:hover .play{background:rgba(255,255,255,.18);transform:scale(1.08)}.video-info{display:flex;align-items:start;justify-content:space-between;gap:20px;padding:20px 23px 22px}.video-info strong{font-size:19px;display:block;letter-spacing:-.02em}.video-info small{display:block;color:var(--muted);font-size:13px;margin-top:7px}.video-info>span:last-child{color:#438c91;font-size:22px}.short-head{border-top:1px solid var(--line);padding-top:52px;margin-top:69px;display:flex;align-items:baseline;gap:26px}.short-head h3{font-size:30px;letter-spacing:-.05em}.short-head p{color:var(--muted);font-size:15px}.short-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:25px}.short-grid figure{border:1px solid var(--line);background:#fff}.short-grid video{width:100%;aspect-ratio:1200/508;background:#63239c;display:block;object-fit:contain}.short-grid figcaption{padding:16px 19px;font-size:15px;font-weight:700}
.site-footer{background:var(--navy);color:white}.footer-inner{min-height:145px;display:flex;align-items:center;gap:24px}.footer-inner strong{font-size:25px;letter-spacing:-.08em}.footer-inner strong span{color:var(--aqua)}.footer-inner p{color:#acbcc9;font-size:14px}.footer-inner a{font-size:13px;text-decoration:none;color:var(--aqua);margin-left:auto;font-weight:700}
.about{background:#edf4f5}.about-inner{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(40px,8vw,130px);padding-block:85px}.about-copy{max-width:650px}.about h2{font-size:clamp(48px,5.4vw,78px);line-height:1.02;letter-spacing:-.07em;margin:30px 0 24px}.about .accent{color:#278b88}.about p{font-size:clamp(18px,1.8vw,23px);line-height:1.55;color:#34475a;max-width:640px}.about-portrait{max-width:420px;justify-self:end;width:100%;aspect-ratio:4/5;overflow:hidden;background:#214e5e}.about-portrait img{width:100%;height:100%;object-fit:cover;object-position:center center}
dialog{border:0;padding:0;width:min(96vw,1400px);max-width:1400px;max-height:96vh;background:#fff;color:var(--ink);box-shadow:0 30px 90px #0006}dialog::backdrop{background:rgba(10,17,27,.88)}.dialog-top,.dialog-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 24px}.dialog-top{border-bottom:1px solid var(--line)}.dialog-top strong{display:block;font-size:18px}.dialog-top small{display:block;color:var(--muted);margin-top:4px;font-size:13px}.dialog-top button{border:0;background:transparent;font-size:30px;line-height:1;padding:0 4px}.dialog-image-wrap{height:min(72vh,800px);background:#edf1f4;display:grid;place-items:center;overflow:auto}.dialog-image-wrap img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}.dialog-bottom{border-top:1px solid var(--line);font-size:14px;color:var(--muted)}.dialog-bottom button{border:0;background:none;font-weight:700;padding:8px;color:var(--ink)}
@media(max-width:950px){.shell{width:min(100% - 48px,1320px)}.hero-inner{grid-template-columns:1fr .95fr;min-height:460px}.hero-copy{padding:60px 20px 55px 0}.hero h1{font-size:clamp(50px,6vw,70px)}.hero-art{margin-right:-24px}.hero-copy p{font-size:17px}.work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.project-card.wide{grid-column:span 1}.editorial-inner{gap:20px}.editorial-preview{height:370px}.preview-side{right:-15%}.video-poster{height:250px}.poster-title{font-size:clamp(26px,3.6vw,42px)}}
@media(max-width:650px){.shell{width:min(100% - 32px,1320px)}.header-inner{min-height:68px}.brand-name{font-size:13px}.brand-name small{display:none}.brand-mark{width:34px;height:34px;font-size:23px}.site-header nav{gap:11px}.site-header nav a{font-size:11px}.site-header nav a[href="#work"]{display:none}.hero-inner{display:flex;flex-direction:column}.hero-copy{padding:55px 0 48px}.hero h1{font-size:clamp(48px,12vw,70px);margin:30px 0 22px}.hero-art{margin:0 -16px;min-height:0;height:280px}.hero-art img{object-position:center}.hero-art-label{right:16px;bottom:12px;font-size:8px}.section{padding-top:68px;padding-bottom:76px}.section-head{display:block;margin-bottom:30px}.section-head h2{margin-top:13px}.section-head p{margin-top:15px;font-size:16px}.work-grid,.video-grid,.short-grid{grid-template-columns:1fr;gap:18px}.art{height:250px}.card-meta{min-height:0}.editorial-inner{display:flex;flex-direction:column;gap:0;align-items:stretch}.editorial-copy{padding:65px 0 0}.editorial h2{font-size:58px}.editorial-copy p{font-size:16px}.editorial-preview{height:320px;margin-top:6px}.preview-main{width:78%}.preview-side{right:-6%;width:48%;bottom:35px}.video-poster{height:245px}.poster-title{font-size:42px}.short-head{display:block;margin-top:55px;padding-top:39px}.short-head p{margin-top:8px}.short-grid{margin-top:20px}.about-inner{display:flex;flex-direction:column;align-items:stretch;gap:35px;padding-block:65px}.about h2{font-size:clamp(47px,12vw,65px);margin:22px 0}.about p{font-size:18px}.about-portrait{max-width:420px;justify-self:auto}.footer-inner{min-height:120px;gap:13px}.footer-inner p{font-size:12px}.footer-inner a{font-size:12px}dialog{width:100vw;max-height:100dvh}.dialog-image-wrap{height:70dvh}.dialog-top,.dialog-bottom{padding:13px 15px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Kinetic portfolio opening: the motion stays in the type and the real work. */
.hero-kinetic{background:#f0f4f4;color:var(--navy)}
.hero-kinetic .hero-inner{display:block;position:relative;min-height:690px;padding-top:46px;isolation:isolate}
.hero-topline{display:flex;justify-content:space-between;align-items:start;gap:24px;font-size:11px;font-weight:800;line-height:1.16;letter-spacing:.12em}
.hero-topline span:last-child{font-weight:700;color:#557174;text-align:right}
.hero-title-wrap{position:relative;isolation:isolate;width:max-content;max-width:100%;margin:72px auto 0}
.hero-title-bar{position:absolute;left:47%;top:-64px;width:15%;height:250px;background:#54d6c7;z-index:-1;transform:rotate(-2deg);animation:barBreathe 7s ease-in-out infinite}
.hero-kinetic h1{position:relative;margin:0;font-size:clamp(4.8rem,9.6vw,9.4rem);line-height:.95;font-weight:900;letter-spacing:-.09em;white-space:nowrap;isolation:isolate}
.title-fill{display:block;position:relative;z-index:3;color:#111a28;animation:titleNudge 8s steps(1,end) infinite}
.title-outline{position:absolute;inset:0;display:block;color:transparent;-webkit-text-stroke:1.4px #142130;opacity:.88;pointer-events:none}
.outline-back{z-index:1;animation:outlineBack 7s ease-in-out infinite}
.outline-front{z-index:2;animation:outlineFront 7s ease-in-out infinite}
.hero-caption{position:relative;z-index:8;display:flex;justify-content:space-between;align-items:end;gap:25px;margin-top:66px;font-size:15px;line-height:1.45;color:#43575b}
.hero-caption strong{font-size:20px;color:#142130;letter-spacing:-.025em}
.hero-caption a{font-size:14px;font-weight:800;text-decoration:none;border-bottom:1px solid #142130;padding-bottom:6px;white-space:nowrap;color:#142130}
.hero-caption a span{margin-left:14px;font-size:18px}
.hero-caption a:hover{color:#167f79;border-color:#167f79}
.hero-collage{position:absolute;left:0;right:0;top:390px;height:380px;z-index:3;pointer-events:none}
.hero-tile{position:absolute;overflow:hidden;border:8px solid #fff;border-radius:5px;background:#fff;box-shadow:0 17px 28px rgba(13,28,34,.21);transform:rotate(var(--tilt));animation:tileFloat 7s ease-in-out infinite;animation-delay:var(--delay)}
.hero-tile img{width:100%;height:100%;object-fit:cover}
.tile-concept{--tilt:-15deg;--delay:-1.1s;left:1%;top:82px;width:27%;height:245px;z-index:1}
.tile-maturity{--tilt:-8deg;--delay:-2.6s;left:18%;top:19px;width:27%;height:218px;z-index:2}
.tile-portrait{--tilt:2deg;--delay:-4s;left:41%;top:0;width:18%;height:300px;z-index:4}
.tile-paper{--tilt:9deg;--delay:-3.2s;left:57%;top:19px;width:27%;height:226px;z-index:3}
.tile-motion{--tilt:16deg;--delay:-5.3s;left:80%;top:94px;width:22%;height:215px;z-index:1}
.tile-portrait img{object-position:center 28%}
.tile-concept img{object-position:36% 65%;transform:scale(1.35);transform-origin:40% 68%}
.tile-paper img{object-position:center}
@keyframes outlineBack{0%,100%{transform:translate(-21px,20px) skewX(-5deg)}25%{transform:translate(-7px,16px) skewX(1deg)}55%{transform:translate(-27px,8px) skewX(-2deg)}78%{transform:translate(-12px,23px) skewX(4deg)}}
@keyframes outlineFront{0%,100%{transform:translate(21px,-17px) skewX(5deg)}30%{transform:translate(10px,-24px) skewX(-2deg)}60%{transform:translate(26px,-8px) skewX(3deg)}82%{transform:translate(7px,-20px) skewX(-4deg)}}
@keyframes titleNudge{0%,42%,47%,100%{transform:translateX(0) skewX(0)}43%{transform:translateX(3px) skewX(-2deg)}45%{transform:translateX(-2px) skewX(1deg)}}
@keyframes barBreathe{0%,100%{transform:rotate(-2deg) scaleY(1)}50%{transform:rotate(1deg) scaleY(.96)}}
@keyframes tileFloat{0%,100%{transform:translateY(0) rotate(var(--tilt))}50%{transform:translateY(-11px) rotate(calc(var(--tilt) + 1deg))}}
@media(max-width:950px){.hero-kinetic .hero-inner{min-height:645px}.hero-title-wrap{margin-top:86px}.hero-kinetic h1{font-size:clamp(4rem,9.5vw,7rem)}.hero-title-bar{top:-52px;height:210px}.hero-caption{margin-top:60px}.hero-collage{top:380px;height:340px}.hero-tile{border-width:6px}.tile-concept{height:210px}.tile-maturity{height:200px}.tile-portrait{height:262px}.tile-paper{height:190px}.tile-motion{height:186px}}
@media(max-width:650px){.hero-kinetic .hero-inner{min-height:600px;padding-top:31px}.hero-topline{font-size:9px}.hero-title-wrap{margin-top:88px}.hero-kinetic h1{font-size:clamp(2.5rem,12.8vw,4.8rem);letter-spacing:-.085em}.hero-title-bar{top:-46px;height:130px;width:17%;left:46%}.hero-caption{margin-top:55px;align-items:start;gap:13px;font-size:13px}.hero-caption strong{font-size:16px}.hero-caption a{font-size:12px;max-width:115px;white-space:normal;text-align:right}.hero-caption a span{margin-left:5px}.hero-collage{top:345px;left:-10%;right:-10%;height:300px}.hero-tile{border-width:5px}.tile-concept{left:0;top:90px;width:38%;height:148px}.tile-maturity{left:17%;top:33px;width:38%;height:150px}.tile-portrait{left:43%;top:14px;width:29%;height:210px}.tile-paper{left:64%;top:55px;width:40%;height:145px}.tile-motion{left:78%;top:146px;width:34%;height:128px}}
@media(max-width:370px){.hero-kinetic .hero-inner{min-height:575px}.hero-title-wrap{margin-top:76px}.hero-kinetic h1{font-size:11.7vw}.hero-caption{margin-top:48px}.hero-collage{top:330px}}

/* Three.js renders the moving title over this accessible HTML fallback. */
@font-face{font-family:"Archivo Black";src:url("assets/archivo-black.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
.hero-kinetic .hero-title-wrap{width:min(100%,1100px);height:210px;margin-top:42px}
.hero-kinetic .hero-title-bar{top:0;height:100%;animation:none;transform:none}
.hero-kinetic h1{height:100%;display:flex;align-items:center;justify-content:center;font-family:"Archivo Black",Arial,sans-serif;font-weight:400;letter-spacing:-.075em}
.hero-kinetic .title-outline{display:flex;align-items:center;justify-content:center}
.hero-kinetic .hero-caption{margin-top:5px}
.portfolio-webgl{position:absolute;inset:0;width:100%;height:100%;z-index:5;opacity:0;pointer-events:none;transition:opacity .25s ease}
.webgl-ready .portfolio-webgl{opacity:1}
.webgl-ready .title-fill,.webgl-ready .title-outline{opacity:0!important;animation:none!important}
@media(max-width:950px){.hero-kinetic .hero-title-wrap{height:190px;margin-top:56px}.hero-kinetic .hero-caption{margin-top:5px}}
@media(max-width:650px){.hero-kinetic .hero-title-wrap{height:136px;margin-top:56px}.hero-kinetic .hero-caption{margin-top:22px}}
@media(max-width:370px){.hero-kinetic .hero-title-wrap{height:126px;margin-top:46px}.hero-kinetic .hero-caption{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.portfolio-webgl{display:none!important}}

/* Put the message on the same central axis as the moving title and portrait. */
.hero-kinetic .hero-inner{min-height:915px}
.hero-kinetic .hero-caption{display:block;text-align:center;margin:42px auto 0;width:100%;padding:0 170px}
.hero-kinetic .hero-caption strong{display:block;font-size:clamp(30px,3.2vw,43px);line-height:1.12;letter-spacing:-.045em}
.hero-kinetic .hero-caption p>span{display:block;margin-top:7px;font-size:16px;line-height:1.4;color:#43575b}
.hero-kinetic .hero-caption a{position:absolute;right:0;bottom:5px}
.hero-kinetic .hero-collage{top:510px}
@media(max-width:950px){.hero-kinetic .hero-inner{min-height:885px}.hero-kinetic .hero-caption{padding:0 24px}.hero-kinetic .hero-caption a{position:static;display:inline-block;margin-top:15px}.hero-kinetic .hero-collage{top:520px}}
@media(max-width:650px){.hero-kinetic .hero-inner{min-height:855px}.hero-kinetic .hero-caption{margin-top:37px;padding:0 5px}.hero-kinetic .hero-caption strong{font-size:clamp(27px,7vw,35px)}.hero-kinetic .hero-caption p>span{font-size:13px}.hero-kinetic .hero-caption a{font-size:12px;margin-top:13px}.hero-kinetic .hero-collage{top:514px}}
@media(max-width:370px){.hero-kinetic .hero-inner{min-height:845px}.hero-kinetic .hero-collage{top:504px}}