@font-face{font-family:Manrope;src:url('assets/manrope-regular.ttf') format('truetype');font-weight:400 500;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/manrope-bold.ttf') format('truetype');font-weight:600 800;font-display:swap}
:root{--ink:#073b4c;--paper:#ffd568;--muted:#ffd568;--pink:#ef3f6b;--yellow:#ffd568;--green:#00cba5;--blue:#118aae;--petrol:#073b4c;--line:#118aae;--gutter:64px}
*{box-sizing:border-box;letter-spacing:0}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--ink);color:var(--paper);font-family:Manrope,Arial,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
body.modal-open{overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:3px solid var(--pink);outline-offset:6px}
button{border:0}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-weight:700;line-height:1.1}
svg{width:20px;height:20px;flex:none;stroke-width:1.7}
::selection{background:var(--pink);color:var(--petrol)}
[hidden]{display:none!important}
.skip-link{position:fixed;top:-100px;left:20px;background:var(--yellow);color:var(--ink);padding:12px 24px;z-index:100}
.skip-link:focus{top:15px}
.header{height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);gap:24px;border-bottom:1px solid #118aae66;background:var(--ink)}
.identity{display:flex;align-items:center;gap:18px;flex-shrink:0}
.monogram{font-weight:700;font-size:38px;line-height:1}
.monogram>span{color:var(--pink)}
.identity-name{font-size:13px;line-height:1.35;border-left:1px solid var(--line);padding-left:18px}
.header nav{display:flex;align-items:center;gap:34px;font-size:14px}
.header nav a{transition:color .2s}
.header nav a:hover{color:var(--yellow)}
.nav-contact{display:flex;align-items:center;gap:16px}
.nav-contact svg{color:var(--yellow)}


















.icon-button{width:44px;height:44px;display:grid;place-items:center;background:transparent;border:1px solid #ffd56888;border-radius:50%;flex-shrink:0}
.icon-button:hover{background:var(--paper);color:var(--ink)}



.section-wrap{max-width:1600px;margin-inline:auto;padding-inline:var(--gutter)}
.section-label{font-size:12px;line-height:1.5;display:flex;align-items:center;gap:12px}
.marker{display:inline-block;width:9px;height:9px;border-radius:50%}
.pink{background:var(--pink)}
.intro{display:grid;grid-template-columns:1fr 2fr;gap:45px;padding-block:80px;border-bottom:1px solid var(--line)}
.intro>.section-label{align-self:start;margin-top:8px;color:var(--muted)}
.intro h2{font-size:34px;line-height:1.25;max-width:790px}
.intro>div>p{max-width:770px;color:var(--muted);margin-top:23px;font-size:17px;line-height:1.8}
.portfolio{padding-top:90px;padding-bottom:30px;scroll-margin-top:-50px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:35px}
.section-heading .section-label{margin-bottom:25px;color:var(--muted)}
.section-heading h2{font-size:56px;line-height:1.13}
.section-aside{color:var(--muted);font-size:15px;padding-bottom:5px;line-height:1.7}
.text-pink{color:var(--pink)}
.text-green{color:var(--green)}
.text-blue{color:var(--blue)}
.portfolio-toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid var(--line);margin-top:46px}
.filters{display:flex;gap:30px}
.filter{position:relative;padding:16px 0 20px;background:transparent;color:var(--muted);font-size:15px;white-space:nowrap}
.filter span{font-size:11px;margin-left:5px;vertical-align:super}
.filter:after{content:'';position:absolute;height:3px;bottom:-1px;left:0;right:0;background:transparent}
.filter.is-active{color:var(--paper)}
.filter.is-active:after{background:var(--pink)}
.filter[data-filter=social].is-active:after{background:var(--green)}
.filter[data-filter=film].is-active:after{background:var(--blue)}
.filter:hover{color:var(--paper)}
.project-count{font-size:12px;color:var(--muted);white-space:nowrap}
.category-caption{color:var(--muted);font-size:14px;margin:20px 0 30px;min-height:24px}
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 25px}
.project{min-width:0}
.project-link{display:block;text-align:left;background:none;width:100%;padding:0}
.project-image{position:relative;aspect-ratio:16/9;overflow:hidden;background:#118aae}
.project-image>img{width:100%;height:100%;object-fit:cover;transition:transform .65s cubic-bezier(.2,.7,.3,1)}
.project-link:hover img{transform:scale(1.035)}
.project-action{position:absolute;right:18px;bottom:18px;width:45px;height:45px;display:grid;place-items:center;border-radius:50%;background:var(--paper);color:var(--ink);transition:background .2s,transform .2s}
.project-link:hover .project-action{background:var(--yellow);transform:rotate(-8deg)}
.project-action svg{width:20px;height:20px}
.project-meta{padding-top:16px;display:flex;justify-content:space-between;gap:20px}
.project h3{font-size:20px;line-height:1.35;overflow-wrap:anywhere}
.project-description{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}
.project-number{font-size:12px;line-height:1.6;color:#00cba5;white-space:nowrap;padding-top:5px}
.portfolio-end{margin-top:55px;padding-block:28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font-size:13px;color:var(--muted)}
.portfolio-end a{display:flex;align-items:center;gap:20px;color:var(--paper)}
.about{background:var(--paper);color:var(--ink);margin-top:55px}
.about-inner{padding-block:90px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:100px;align-items:center}
.portrait{position:relative;align-self:start}
.portrait>img{width:100%;aspect-ratio:3/4;object-fit:cover}
.portrait figcaption{display:flex;justify-content:space-between;gap:15px;font-size:12px;line-height:1.5;margin-top:15px;color:#073b4c}
.portrait:before{position:absolute;content:'';width:60px;height:8px;background:var(--pink);left:-20px;top:40px;z-index:1}
.about-copy>.section-label{color:#073b4c;margin-bottom:26px}
.about h2{font-size:53px;line-height:1.12}
.about-lead{font-size:19px;line-height:1.6;margin-top:25px!important;color:var(--ink)!important}
.about-copy>p:not(.section-label){color:#073b4c;margin-top:20px;font-size:16px;line-height:1.8}
.text-link{display:inline-flex;align-items:center;gap:18px;border-bottom:1px solid #073b4c88;padding-block:12px;font-size:14px;margin-top:22px}
.text-link:hover{border-color:var(--pink);color:#073b4c}
.approach{padding-block:90px 100px}
.approach .section-heading h2{font-size:43px}
.approach-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px;margin-top:55px}
.approach-grid article{border-top:1px solid var(--line);padding-top:24px}
.step-number{font-size:14px}
.approach h3{font-size:22px;margin-top:30px;margin-bottom:18px}
.approach article p{color:var(--muted);font-size:15px;line-height:1.8;max-width:380px}
.contact{background:var(--yellow);color:var(--ink);padding-top:65px}
.contact-main{display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;margin-top:35px;margin-bottom:70px}
.contact h2{font-size:86px;line-height:1.02}
.contact h2>span{color:var(--petrol)}
.contact-details>p{font-size:20px;line-height:1.6}
.contact-email{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #073b4c55;padding-block:20px;font-size:24px;margin-top:18px}
.contact-email svg{width:30px;height:30px}
.contact-email:hover{color:#073b4c}
.contact-person{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-top:27px;font-size:15px;overflow-wrap:anywhere}
.contact-person>span{font-size:12px;color:#073b4c;margin-bottom:6px}
.contact-person a:hover{text-decoration:underline;text-underline-offset:4px}
footer{padding-block:25px;display:flex;justify-content:space-between;gap:22px;border-top:1px solid #073b4c33;font-size:12px}
footer a{display:flex;gap:18px;align-items:center}
dialog{background:var(--ink);color:var(--paper);border:1px solid var(--line);padding:25px;width:min(1100px,calc(100% - 40px));max-height:92svh;overflow-y:auto}
dialog::backdrop{background:#073b4cee}
.player-heading{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-bottom:20px}
.player-heading h2{font-size:22px;line-height:1.4;overflow-wrap:anywhere}
.player-heading .section-label{font-size:11px;color:var(--yellow);margin-bottom:6px}
.player-surface{aspect-ratio:16/9;background:#073b4c;display:grid;place-items:center;max-height:65svh;overflow:hidden}
.player-surface video,.player-surface iframe{width:100%;height:100%;max-height:65svh;object-fit:contain;border:0;display:block}
dialog.is-portrait{max-width:620px}
.player-surface.is-portrait{aspect-ratio:9/16;width:min(100%,36.5625svh);margin-inline:auto}
.player-footer{display:flex;justify-content:space-between;gap:20px;padding-top:20px;font-size:13px;color:var(--muted)}
.player-footer a{display:flex;align-items:center;gap:12px;color:var(--paper)}
.player-error{padding:18px 0;color:var(--paper)}
.player-error>span{display:block;color:var(--muted);font-size:14px}
.player-error>button{margin-top:14px;background:var(--yellow);color:var(--ink);padding:8px 14px;font-size:14px}
@media(min-width:1600px){:root{--gutter:90px}}
@media(max-width:1100px){:root{--gutter:36px}.section-heading h2{font-size:46px}.about-inner{gap:50px}.about h2{font-size:42px}.contact h2{font-size:72px}.contact-email{font-size:20px}.intro{grid-template-columns:1fr 2.5fr;gap:30px}.intro h2{font-size:30px}}
@media(max-width:760px){:root{--gutter:24px}html{scroll-padding-top:25px}.header{height:82px}.identity{gap:12px}.monogram{font-size:30px}.identity-name{font-size:11px;padding-left:12px}.header nav{gap:20px;font-size:12px}.nav-contact{gap:0}.nav-contact svg{display:none}.intro{display:block;padding-block:48px}.intro>.section-label{margin-bottom:22px}.intro h2{font-size:28px}.intro>div>p{font-size:16px}.section-heading h2{font-size:38px}.portfolio{padding-top:55px}.section-heading{display:block}.section-aside{margin-top:22px;font-size:14px}.section-aside br{display:none}.section-heading .section-label{margin-bottom:20px}.portfolio-toolbar{margin-top:28px;gap:10px}.filters{gap:24px}.filter{font-size:13px;padding-bottom:16px}.filter span{font-size:10px;margin-left:3px}.project-count{display:none}.category-caption{font-size:13px;margin-bottom:24px}.project-grid{gap:28px 16px}.project h3{font-size:16px}.project-description{font-size:12px}.project-number{display:none}.project-meta{padding-top:12px}.project-action{height:36px;width:36px;right:12px;bottom:12px}.project-action svg{height:16px;width:16px}.portfolio-end{font-size:12px;margin-top:35px}.portfolio-end>span{max-width:150px}.about{margin-top:25px}.about-inner{padding-block:50px;gap:40px;grid-template-columns:1fr}.portrait{max-width:500px;width:100%}.portrait img{aspect-ratio:4/4.5;object-position:center 28%}.portrait:before{left:-12px;width:45px}.about h2{font-size:44px}.about h2 br:nth-of-type(2){display:none}.about-copy>.section-label{margin-bottom:20px}.approach{padding-block:55px}.approach .section-heading h2{font-size:34px}.approach-grid{gap:24px;margin-top:35px}.approach h3{font-size:19px;margin-top:20px}.approach article p{font-size:14px}.contact{padding-top:40px}.contact-main{gap:38px;grid-template-columns:1fr;margin-bottom:45px}.contact h2{font-size:68px}.contact-details{max-width:520px}.contact-email{font-size:22px}.contact-person{font-size:15px}footer{flex-wrap:wrap;font-size:11px}footer>span:nth-child(2){display:none}.player-heading h2{font-size:18px}dialog{padding:16px;width:calc(100% - 24px)}.player-footer{font-size:12px}}
@media(max-width:480px){:root{--gutter:20px}.identity-name{display:none}.header nav{gap:20px}.intro h2{font-size:26px}.section-heading h2{font-size:35px}.filters{gap:18px;width:100%;justify-content:space-between}.filter{font-size:12px}.filter span{font-size:10px;margin-left:2px}.project-grid{grid-template-columns:1fr;gap:29px}.project h3{font-size:18px}.project-description{font-size:13px}.project-number{display:block}.project-action{width:42px;height:42px}.about h2{font-size:39px}.about-copy>p:not(.section-label){font-size:15px}.approach-grid{grid-template-columns:1fr;gap:28px}.approach-grid article{display:grid;grid-template-columns:35px 1fr;column-gap:18px;row-gap:13px}.approach h3{margin:0;align-self:center}.approach article p{grid-column:2}.contact h2{font-size:64px}.contact-details>p{font-size:18px}.contact-email{font-size:20px}.player-footer{align-items:flex-start}.player-footer>span{max-width:48%}}
@media(max-width:360px){.header nav{gap:15px;font-size:11px}.filters{gap:10px}.filter{font-size:11px}.filter span{font-size:9px}.about h2{font-size:34px}.contact h2{font-size:56px}.contact-person{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
.intro{max-width:none;background:var(--green);color:var(--petrol);border-bottom:10px solid var(--pink);padding-inline:max(var(--gutter),calc((100% - 1600px)/2 + var(--gutter)))}
.intro>.section-label,.intro>div>p{color:var(--petrol)}
.about{border-top:12px solid var(--blue)}
.about-copy h3{font-size:27px;line-height:1.3;margin-top:32px}
.about-inner{align-items:start}
.portrait{position:sticky;top:30px}
@media(max-width:760px){.portrait{position:relative;top:auto}}