@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600;700&family=Manrope:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--ink:#f5f6f4;--muted:#a6b3b4;--line:#ffffff26;--bg:#101b1e;--accent:#cbdcae}*{box-sizing:border-box}html,body{margin:0;font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--ink)}body{overflow:hidden}button,a,input{-webkit-tap-highlight-color:transparent}button,a{color:inherit}button{font:inherit;cursor:pointer}a{text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #d5e9be;outline-offset:6px}button{border:0;background:none}button:hover,a:hover{opacity:.8}[hidden]{display:none!important}.home{height:100svh;min-height:520px;position:relative;isolation:isolate;background:url('/water.webp?v=20260929080410') center/cover}#water,.shade{position:absolute;inset:0;width:100%;height:100%;z-index:-2}.shade{z-index:-1;background:linear-gradient(180deg,#07151a55,transparent 35%,#0712179c);pointer-events:none}.navigation{position:relative;display:flex;align-items:center;padding:34px 4.5vw;gap:50px;z-index:10}.wordmark{font:600 25px 'Manrope',sans-serif;letter-spacing:-1.3px}.asterisk{margin-left:6px;font-size:30px;display:inline-block;vertical-align:middle}.navigation nav{display:flex;gap:34px;margin-left:auto;font-size:15px}.navigation sup{font-size:10px;margin-left:3px;opacity:.6}.clock{display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff5c;border-radius:50%}.clock svg{width:23px;height:23px}.hero-copy{position:absolute;left:8.4vw;right:8.4vw;top:50%;transform:translateY(-41%);max-width:1120px}.eyebrow{letter-spacing:3px;font-size:12px;margin:0 0 26px}.hero-copy h1{font:500 clamp(52px,6.8vw,110px)/1.04 'Manrope',sans-serif;letter-spacing:-.065em;margin:0;text-shadow:0 2px 40px #04101230}.hero-copy h1 em{font:italic 400 1.05em/1.05 Georgia,serif;letter-spacing:-.055em}.hero-bottom{display:flex;align-items:end;gap:10vw;margin-top:38px}.hero-bottom p{font-size:16px;line-height:1.6;margin:0;color:#f0f4f3d9}.round-link{font-size:14px;display:flex;gap:24px;align-items:center}.round-link span{display:grid;place-items:center;border:1px solid #ffffff80;border-radius:50%;height:43px;width:43px;font-size:22px;transition:transform .3s}.round-link:hover span{transform:rotate(45deg)}.home-meta{position:absolute;bottom:30px;left:4.5vw;right:4.5vw;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#ffffffc2;letter-spacing:.2px}.home-meta i{display:inline-block;background:#cadab2;border-radius:50%;width:5px;height:5px;margin-right:9px}.water-hint{font:italic 15px Georgia,serif}.time-panel{position:absolute;right:4.5vw;top:99px;background:#0b171aeb;backdrop-filter:blur(25px);border:1px solid var(--line);padding:25px;width:320px;z-index:20;border-radius:8px;box-shadow:0 15px 60px #0005}.time-panel>div:first-child{display:flex;justify-content:space-between;font-size:14px}.time-panel input{width:100%;accent-color:#cbdcae;margin:26px 0}.time-presets{display:flex;justify-content:space-between}.time-presets button{font-size:12px;padding:6px;border:1px solid var(--line);border-radius:20px}#local-time{display:block;font-size:12px;color:var(--muted);margin:20px 0 0;padding:0}#content{position:fixed;inset:0;overflow:auto;background:#101b1e;z-index:30}.content-nav{position:sticky;top:0;background:#101b1eed;backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.content-nav .close-link{margin-left:0;font-size:24px}.page-wrap{max-width:1440px;padding:85px 7vw 110px;margin:auto}.page-intro{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:65px}.page-intro h1{font:500 clamp(56px,7vw,104px)/1 'Manrope';letter-spacing:-.065em;margin:0}.page-intro h1 em{font-family:Georgia;font-weight:400}.page-intro p{max-width:340px;font-size:16px;line-height:1.7;color:var(--muted);margin:0}.section-label{font-size:12px;letter-spacing:2px;color:var(--accent);margin-bottom:18px}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:66px 34px}.project-visual{position:relative;aspect-ratio:1.4;display:flex;align-items:center;justify-content:center;background:#bcc9c8;overflow:hidden;border-radius:4px}.project-visual img{width:88%;height:80%;object-fit:contain;filter:drop-shadow(0 14px 25px #0003);transition:transform .6s}.project-visual:hover img{transform:scale(1.035)}.project-visual.meridian{background:#263d49}.project-visual.polyquant{background:#1d2929}.project-visual.trieste{background:#748b8a}.project-visual .project-number{position:absolute;top:18px;left:20px;color:#fff9;font-size:12px}.project-visual .open-project{position:absolute;right:16px;bottom:16px;width:38px;height:38px;background:#ffffffde;color:#15252b;display:grid;place-items:center;border-radius:50%;font-size:20px}.project-heading{display:flex;align-items:baseline;justify-content:space-between;margin:24px 0 9px;gap:12px}.project-heading h2{font:500 28px 'Manrope';letter-spacing:-1px;margin:0}.project-heading span{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted)}.project-card h3{font-size:17px;font-weight:500;margin:12px 0}.project-card p{font-size:15px;line-height:1.75;color:var(--muted);margin:0}.tags{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.tags span{border:1px solid var(--line);padding:6px 10px;border-radius:20px;font-size:11px;color:#c5cece}.text-link{font-size:13px;border-bottom:1px solid #81908d;padding-bottom:5px;display:inline-block}.footer-art{position:relative;min-height:380px;background:#11262a url('/phi-phi-footer-v3.webp?v=20260929080410') center/cover;display:flex;flex-direction:column;justify-content:space-between;padding:55px 7vw 25px}.footer-art::before{content:'';position:absolute;inset:0;background:linear-gradient(#04131a45,#04131a99)}.footer-art>*{position:relative}.footer-art h2{font:400 clamp(42px,5vw,78px)/1.1 'Manrope';letter-spacing:-.05em;margin:0}.footer-art h2 em{font-family:Georgia}.footer-line{display:flex;justify-content:space-between;gap:20px;font-size:12px;margin-top:80px;color:#ffffffba}.bio-copy{max-width:800px;font-size:clamp(22px,3vw,36px);line-height:1.6;letter-spacing:-.7px}.bio-copy em{font-family:Georgia;color:var(--accent)}.skill-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:70px 0 0}.skill-columns article{border-top:1px solid var(--line);padding-top:20px}.skill-columns h2{font-size:18px;font-weight:500}.skill-columns p{font-size:15px;line-height:1.8;color:var(--muted)}.case-hero{width:100%;max-height:700px;object-fit:contain;background:#284048;padding:30px;border-radius:4px}.case-body{display:grid;grid-template-columns:1.5fr 1fr;gap:7vw;margin-top:45px}.case-body h2{font:500 28px 'Manrope';letter-spacing:-1px}.case-body p,.case-body li{font-size:16px;color:var(--muted);line-height:1.85}.case-body ul{padding-left:20px}.case-body video{width:100%;margin-top:24px}.note{font-size:12px!important}.demo-strip{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}.solid-link{background:var(--accent);color:#142424;border-radius:30px;padding:14px 22px;display:inline-block;font-size:14px}@media(min-width:1700px){.hero-copy{max-width:none}.hero-copy h1{font-size:7vw}}@media(max-width:700px){.navigation{padding:22px 6vw;gap:23px}.navigation nav{gap:21px}.wordmark{font-size:22px}.clock{width:38px;height:38px}.hero-copy{left:7vw;right:7vw}.hero-copy h1{font-size:clamp(44px,10vw,68px)}.eyebrow{font-size:10px;letter-spacing:2px}.hero-bottom{display:block;margin-top:30px}.hero-bottom p{font-size:14px}.round-link{margin-top:28px;width:max-content}.home-meta{left:7vw;right:7vw;font-size:10px;bottom:22px}.water-hint{display:none}.home-meta>span:first-child{max-width:140px}.time-panel{right:6vw;max-width:88vw;top:78px}.page-wrap{padding:55px 7vw 65px}.page-intro{display:block;margin-bottom:38px}.page-intro h1{font-size:60px}.page-intro p{margin-top:26px}.project-grid,.skill-columns,.case-body{grid-template-columns:1fr}.project-grid{gap:44px}.project-heading span{font-size:10px}.project-heading h2{font-size:26px}.footer-art{min-height:300px}.footer-line{font-size:10px}.skill-columns{gap:20px;margin-top:40px}.content-nav .close-link{display:none}}@media(max-height:620px) and (min-width:701px){.hero-copy h1{font-size:62px}.hero-copy{top:49%}.hero-bottom{margin-top:18px}.eyebrow{margin-bottom:12px}.navigation{padding-top:20px}}
