:root{--navy:#082c52;--blue:#155f9f;--pale:#dce9f0;--orange:#e9602a;--paper:#f6f6f2;--ink:#10283e;--rule:rgba(16,40,62,.22);--pad:clamp(1.2rem,4vw,4.5rem)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif}img{width:100%;height:100%;display:block;object-fit:cover}a{color:inherit;text-decoration:none}::selection{background:var(--orange);color:#fff}
.header{height:82px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;position:absolute;inset:0 0 auto;z-index:5;color:#fff;border-bottom:1px solid rgba(255,255,255,.28)}.brand{display:flex;align-items:center;gap:.8rem;font:500 .68rem/1.25 "Manrope",sans-serif;letter-spacing:.08em;text-transform:uppercase}.brand i{font-style:normal;font-weight:600;font-size:1rem;border:1px solid var(--orange);padding:.45rem}.header nav{display:flex;gap:2.5rem;font-size:.78rem}.header nav a{transition:color .2s}.header nav a:hover{color:var(--orange)}.menu{display:none;color:inherit;background:none;border:0;font:inherit}
.hero{min-height:100svh;background:var(--navy);color:#fff;display:grid;grid-template-columns:58% 42%;position:relative;padding-top:82px}.hero-photo{grid-row:1;grid-column:1;min-height:calc(100svh - 82px);overflow:hidden}.hero-photo:after{content:"";position:absolute;inset:82px 42% 0 0;background:linear-gradient(90deg,rgba(8,44,82,.16),transparent)}.hero-copy{grid-row:1;grid-column:2;padding:clamp(5rem,12vh,9rem) var(--pad) 5rem;align-self:center}.kicker{text-transform:uppercase;letter-spacing:.19em;font-size:.65rem;font-weight:500}.hero h1,.section-head h2,.approach h2,.contact h2{font-family:"Manrope",sans-serif;font-weight:400;letter-spacing:-.055em}.hero h1{font-size:clamp(4rem,8.5vw,9rem);line-height:.87;margin:1.5rem 0 3rem;margin-left:-20%;position:relative}.hero h1:after{content:"";display:inline-block;width:.13em;height:.13em;background:var(--orange);border-radius:50%;margin-left:.07em}.lede{max-width:25rem;font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.6;color:rgba(255,255,255,.78)}.text-link{display:flex;justify-content:space-between;max-width:25rem;margin-top:4rem;padding-bottom:.8rem;border-bottom:1px solid rgba(255,255,255,.55);font-size:.78rem;letter-spacing:.05em}.text-link span{color:var(--orange)}.index{position:absolute;left:var(--pad);bottom:2rem;font-size:.65rem;line-height:1.5;text-transform:uppercase;letter-spacing:.13em;color:#fff}
.work{padding:clamp(6rem,12vw,12rem) var(--pad)}.section-head{display:grid;grid-template-columns:1fr 2fr 1fr;gap:2rem;align-items:start;margin-bottom:clamp(4rem,8vw,8rem)}.section-head h2{font-size:clamp(3rem,6vw,6.5rem);line-height:.95;margin:0}.section-head>p:last-child{line-height:1.6;margin:0;max-width:21rem}.projects{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(4rem,9vw,10rem)}.project-feature{grid-column:1/-1}.project figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--pale)}.project-feature figure{aspect-ratio:16/7}.project-offset{margin-top:10rem}.project img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}.project a:hover img{transform:scale(1.02)}.project div{display:grid;grid-template-columns:1fr 1.5fr;gap:1.5rem;border-top:1px solid var(--ink);padding-top:1rem;margin-top:1rem}.project span{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}.project h3{font:400 clamp(1.6rem,3vw,3.2rem)/1 "Manrope";letter-spacing:-.04em;margin:0}.project p{grid-column:2;line-height:1.5;margin:0;color:#506273}
.approach{background:var(--blue);color:#fff;padding:clamp(6rem,11vw,11rem) var(--pad)}.approach>div{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(3rem,8vw,8rem);margin-top:5rem}.approach h2{font-size:clamp(3.2rem,6.5vw,7rem);line-height:1;margin:0}.approach h2:after{content:"";display:block;width:2.5rem;height:2px;background:var(--orange);margin-top:2rem}.approach-copy{font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.7;color:rgba(255,255,255,.8)}
.services{background:var(--pale);padding:clamp(5rem,9vw,9rem) var(--pad);display:grid;grid-template-columns:1fr 3fr;gap:3rem}.services ul{list-style:none;margin:0;padding:0}.services li{display:grid;grid-template-columns:4rem 1fr;border-top:1px solid var(--rule);padding:1.25rem 0;font:400 clamp(1.3rem,2.5vw,2.5rem) "Manrope";letter-spacing:-.03em}.services li:last-child{border-bottom:1px solid var(--rule)}.services li span{font:500 .65rem "DM Sans";letter-spacing:.1em;color:var(--orange)}
.contact{background:var(--navy);color:#fff;padding:clamp(6rem,11vw,11rem) var(--pad) 2rem}.contact h2{font-size:clamp(3.8rem,9vw,10rem);line-height:.94;margin:3rem 0 6rem}.contact-links{border-block:1px solid rgba(255,255,255,.55)}.contact-link{display:flex;justify-content:space-between;padding:1.5rem 0;font:400 clamp(1.3rem,2.5vw,2.7rem) "Manrope"}.contact-link+.contact-link{border-top:1px solid rgba(255,255,255,.25)}.contact-link>span:last-child{color:var(--orange);transition:transform .2s}.contact-link:hover>span:last-child{transform:translate(4px,-4px)}.social-handle{display:flex;align-items:center;gap:.65em}.social-handle svg{width:.9em;height:.9em;flex:none;color:var(--orange)}.contact footer{display:flex;justify-content:space-between;padding-top:7rem;text-transform:uppercase;letter-spacing:.12em;font-size:.62rem}.contact footer b{font-weight:400}
.hero-photo img{object-position:38% center}.reveal{opacity:0;transform:translateY(18px);transition:opacity 1s ease,transform 1s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:760px){.header nav{display:none;position:absolute;top:82px;left:0;right:0;background:var(--navy);padding:2rem var(--pad);flex-direction:column}.header nav.open{display:flex}.menu{display:block}.hero{grid-template-columns:1fr}.hero-photo{grid-column:1;min-height:55svh}.hero-photo:after{inset:82px 0 auto;height:55svh}.hero-copy{grid-row:2;grid-column:1;padding-top:4rem}.hero h1{margin-left:0}.index{display:none}.section-head,.approach>div,.services{grid-template-columns:1fr}.projects{grid-template-columns:1fr}.project-feature{grid-column:auto}.project-feature figure{aspect-ratio:4/3}.project-offset{margin-top:0}.project div{grid-template-columns:1fr}.project p{grid-column:1}.contact footer{gap:1rem;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}