@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');
:root{--ink:#e9e6dd;--muted:#a9b5b8;--blue:#071827;--blue2:#0b2739;--orange:#f2a65a;--line:rgba(233,230,221,.18);--serif:'Playfair Display',Georgia,serif;--sans:Manrope,Arial,sans-serif;--mono:'DM Mono',monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--blue);color:var(--ink);font-family:var(--sans);line-height:1.65}
.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;max-width:1280px;margin:auto;padding:0 44px;border-bottom:1px solid var(--line);position:relative;z-index:5}
.brand{font:500 12px var(--mono);letter-spacing:.12em;color:var(--ink);text-decoration:none}
.brand span{display:inline-grid;place-items:center;border:1px solid var(--orange);color:var(--orange);width:29px;height:29px;margin-right:9px;letter-spacing:0}
nav{display:flex;gap:29px}
nav a{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink);text-decoration:none;opacity:.8}
nav a:hover{color:var(--orange)}
.language-switch{display:flex;align-items:center;gap:7px;margin-left:4px;padding-left:19px;border-left:1px solid var(--line);font:500 11px var(--mono);letter-spacing:.12em}.language-switch strong{color:var(--orange);font-weight:500}.language-switch a{opacity:.62}.language-switch a:hover{opacity:1}
.menu-button{display:none;background:none;border:0;color:var(--ink);font:500 11px var(--mono);letter-spacing:.12em}
.hero{height:min(680px,calc(100vh - 76px));min-height:540px;max-width:1280px;margin:auto;position:relative;overflow:hidden;display:flex;align-items:center;padding:70px 44px}
.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,18,31,.97) 0%,rgba(4,18,31,.75) 43%,rgba(4,18,31,.1) 78%),linear-gradient(0deg,rgba(4,18,31,.6),transparent 32%)}
.hero-copy{position:relative;z-index:1;max-width:700px}
.eyebrow{color:var(--orange);font:500 11px var(--mono);letter-spacing:.14em;margin:0 0 16px}
.hero h1,.section h2,.contact h2{font:700 clamp(38px,5vw,68px)/1.08 var(--serif);letter-spacing:-.045em;margin:0}
.hero h1 em{color:var(--orange);font-weight:600}
.hero-copy>p:not(.eyebrow){max-width:570px;color:#d2d9d8;font-size:17px;margin:25px 0}
.button{display:inline-flex;align-items:center;gap:25px;color:var(--blue);background:var(--orange);padding:13px 19px;text-decoration:none;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.button span{font-size:18px}
.hero-footer{position:absolute;z-index:1;bottom:25px;left:44px;right:44px;display:flex;justify-content:space-between;font:10px var(--mono);color:#d2d9d8;letter-spacing:.1em}
.section{max-width:1192px;margin:auto;padding:86px 0}
.profile{border-top:1px solid var(--line)}
.profile-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:10%}
.intro,.today p,.projects-heading p{color:var(--muted);font-size:16px}
.route{border-top:1px solid var(--line)}
.route article{padding:19px 0;border-bottom:1px solid var(--line)}
.route span,.project-type{font:10px var(--mono);letter-spacing:.1em;color:var(--orange)}
h3{font:600 24px var(--serif);margin:5px 0}
.route p{color:var(--muted);font-size:14px;margin:0}
.today{max-width:none;background:#d9e5e2;color:#102634;padding-left:max(calc((100% - 1192px)/2),44px);padding-right:max(calc((100% - 1192px)/2),44px)}
.today .eyebrow{color:#55706e}
.today-grid{display:grid;grid-template-columns:1.45fr .55fr;gap:11%;align-items:start}
.today h2{max-width:720px}
.today p{color:#44615e}
.today aside{border-left:1px solid #8eaaa7;padding-left:25px}
.today aside b{font:600 14px var(--mono);color:#163945}
.study{font-size:16px!important;border-top:1px solid #8eaaa7;padding-top:13px;margin-top:17px!important}
.study strong{font:500 10px var(--mono);color:#55706e;letter-spacing:.1em;margin-right:7px}
.projects-heading{display:flex;align-items:end;justify-content:space-between;gap:50px;margin-bottom:32px}
.projects-heading h2{max-width:640px}
.projects-heading p{max-width:280px;margin:0}
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.project-card{min-height:255px;padding:30px;display:flex;flex-direction:column;border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .2s,background .2s}
.project-card.weather{background:linear-gradient(140deg,#16404e,#0f2536)}
.project-card:hover{transform:translateY(-5px);background:#12334a}
.project-card h3{font-size:32px;margin-top:43px}
.project-card p{font-size:14px;color:var(--muted);max-width:380px;margin:0}
.project-card b{font:600 11px var(--mono);letter-spacing:.07em;margin-top:auto;color:var(--orange)}
.project-card i{font-style:normal;font-size:16px;margin-left:5px}
.upcoming{opacity:.76}
.contact{max-width:none;padding:60px max(calc((100% - 1192px)/2),44px);background:var(--orange);color:#132733;display:flex;justify-content:space-between;align-items:end}
.contact .eyebrow{color:#294854}
.contact a{color:#132733;font:600 13px var(--mono);text-decoration:none;border-bottom:1px solid #42606a;padding:10px 0;min-width:290px;display:flex;justify-content:space-between}
footer{max-width:1280px;margin:auto;padding:22px 44px;display:flex;justify-content:space-between;color:var(--muted);font:10px var(--mono);letter-spacing:.09em}
@media(max-width:800px){.topbar{height:70px;padding:0 22px}
.menu-button{display:block}
nav{display:none;position:absolute;right:22px;top:58px;background:#102d3e;border:1px solid var(--line);padding:15px;flex-direction:column;gap:14px}
nav.open{display:flex}
.language-switch{margin:2px 0 0;padding:12px 0 0;border-left:0;border-top:1px solid var(--line)}
.hero{height:610px;padding:60px 22px;align-items:flex-start}
.hero-image{object-position:65% center}
.hero:after{background:linear-gradient(90deg,rgba(4,18,31,.97),rgba(4,18,31,.45)),linear-gradient(0deg,rgba(4,18,31,.65),transparent 40%)}
.hero h1{font-size:45px}
.hero-copy>p:not(.eyebrow){font-size:15px;width:90%}
.hero-footer{left:22px;right:22px;font-size:8px}
.hero-footer span:nth-child(2){display:none}
.section{padding:67px 22px}
.profile-grid,.today-grid{display:block}
.intro{margin-bottom:35px}
.today{padding:65px 22px}
.today aside{margin-top:32px;padding-left:18px}
.projects-heading{display:block}
.projects-heading p{margin-top:20px}
.project-grid{grid-template-columns:1fr}
.project-card{min-height:220px}
.contact{padding:55px 22px;display:block}
.contact a{margin-top:30px;min-width:0}
footer{padding:20px 22px;font-size:8px}
footer span:last-child{display:none}
}
