:root{
--navy:#1c2f57;
--navy-dark:#11203e;
--red:#c82937;
--paper:#f4f3ef;
--white:#fff;
--ink:#20242b;
--muted:#667085;
--line:#d9dde3;
--max:1440px}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:"DM Sans",sans-serif;
font-size:16px;
line-height:1.6}
img{
display:block;
width:100%}
a{
color:inherit;
text-decoration:none}
button{
font:inherit}
.skip-link{
position:fixed;
left:1rem;
top:-5rem;
background:#fff;
padding:.8rem 1rem;
z-index:100}
.skip-link:focus{
top:1rem}
.topline{
height:34px;
padding:0 clamp(1.25rem,4vw,4.5rem);
display:flex;
align-items:center;
justify-content:space-between;
background:var(--navy);
color:#fff;
font-size:.68rem;
text-transform:uppercase;
letter-spacing:.13em}
.topline a{
font-weight:600}
.site-header{
height:96px;
padding:0 clamp(1.25rem,4vw,4.5rem);
display:flex;
align-items:center;
justify-content:space-between;
background:#fff;
border-bottom:4px solid var(--red);
position:relative;
z-index:20}
.brand{
display:flex;
align-items:center}
.brand img{
width:236px;
height:64px;
object-fit:contain;
object-position:left center}
.site-header nav{
display:flex;
align-items:center;
gap:clamp(1.2rem,3vw,3.5rem);
font-size:.73rem;
text-transform:uppercase;
letter-spacing:.11em;
font-weight:600;
color:var(--navy)}
.site-header nav a:not(.nav-cta){
position:relative}
.site-header nav a:not(.nav-cta):after{
content:"";
position:absolute;
left:0;
right:100%;
bottom:-.45rem;
height:2px;
background:var(--red);
transition:right .25s}
.site-header nav a:hover:after{
right:0}
.nav-cta,.button{
display:inline-flex;
align-items:center;
justify-content:center;
padding:.85rem 1.15rem;
background:var(--red);
color:#fff;
transition:.2s}
.nav-cta:hover,.button:hover{
background:#a71e2b}
.menu-toggle{
display:none;
border:0;
background:none;
padding:.5rem}
.hero{
min-height:720px;
height:calc(100svh - 130px);
display:grid;
grid-template-columns:minmax(360px,38%) 1fr;
background:var(--navy);
color:#fff;
position:relative;
overflow:hidden}
.hero-copy{
padding:clamp(3rem,6vw,7rem) clamp(1.5rem,4vw,5rem);
display:flex;
flex-direction:column;
justify-content:center;
position:relative;
z-index:2}
.eyebrow,.section-number,.label{
font-size:.7rem;
text-transform:uppercase;
letter-spacing:.2em}
.eyebrow{
color:#dce5f4}
.hero h1{
font:600 clamp(3.7rem,6.2vw,7rem)/.93 Manrope,sans-serif;
letter-spacing:-.06em;
margin:1.4rem 0 2rem}
.hero h1 em{
font-style:normal;
color:#f35c67}
.hero-lead{
max-width:540px;
font-size:clamp(1.05rem,1.35vw,1.28rem);
color:#e7ebf2}
.hero-actions{
display:flex;
align-items:center;
gap:1.8rem;
flex-wrap:wrap;
margin-top:1rem}
.button-light{
background:#fff;
color:var(--navy);
font-size:.75rem;
text-transform:uppercase;
letter-spacing:.12em;
font-weight:600}
.button-light:hover{
background:var(--red);
color:#fff}
.text-link{
display:inline-flex;
gap:1.4rem;
align-items:center;
padding-bottom:.35rem;
border-bottom:1px solid currentColor;
font-size:.73rem;
letter-spacing:.12em;
text-transform:uppercase}
.text-link span{
font-size:1rem}
.hero-seal{
margin-top:clamp(2rem,5vh,4.5rem);
display:flex;
align-items:center;
gap:1rem}
.hero-seal strong{
font:600 3.5rem/1 Manrope;
color:#fff}
.hero-seal span{
padding-left:1rem;
border-left:2px solid var(--red);
font-size:.7rem;
text-transform:uppercase;
letter-spacing:.12em}
.hero-photo{
min-width:0;
overflow:hidden}
.hero-photo img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center}
.section{
max-width:var(--max);
margin:auto;
padding:clamp(5.5rem,10vw,10rem) clamp(1.25rem,5vw,5rem)}
.section-number{
color:var(--red);
font-weight:600;
margin:0}
.intro{
display:grid;
grid-template-columns:.65fr 2fr .8fr;
gap:5vw;
align-items:start;
background:var(--white);
max-width:none;
padding-left:max(clamp(1.25rem,5vw,5rem),calc((100% - var(--max))/2 + 5rem));
padding-right:max(clamp(1.25rem,5vw,5rem),calc((100% - var(--max))/2 + 5rem))}
.intro h2,.section-heading h2,.generation h2,.contact h2{
font:600 clamp(2.5rem,4.7vw,5rem)/1.05 Manrope,sans-serif;
letter-spacing:-.045em;
margin:0 0 2rem;
color:var(--navy)}
.intro-copy>p{
font-size:clamp(1.08rem,1.6vw,1.35rem);
max-width:760px}
.intro-stat{
align-self:end;
border-left:3px solid var(--red);
padding-left:2rem}
.intro-stat strong{
font:600 clamp(3rem,6vw,6rem)/1 Manrope;
color:var(--navy)}
.intro-stat span{
display:block;
margin-top:.8rem;
font-size:.72rem;
text-transform:uppercase;
letter-spacing:.12em}
.services{
border-top:0}
.section-heading{
display:grid;
grid-template-columns:.65fr 2.8fr;
gap:5vw;
margin-bottom:5rem}
.service-list{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:1.5rem}
.service{
background:#fff;
border-top:6px solid var(--navy);
padding:2rem;
min-height:280px;
display:grid;
grid-template-columns:auto 1fr;
column-gap:1.5rem;
align-content:start;
box-shadow:0 12px 40px rgba(28,47,87,.07);
transition:transform .25s,border-color .25s}
.service:hover{
transform:translateY(-5px);
border-color:var(--red)}
.service>span{
font-size:.68rem;
color:var(--red);
font-weight:600}
.service h3{
font:600 clamp(1.5rem,2.2vw,2.2rem) Manrope;
margin:0;
color:var(--navy)}
.service p{
grid-column:2;
margin:1rem 0 0;
color:var(--muted);
max-width:520px}
.projects{
background:var(--white);
max-width:none;
position:relative}
.projects:before{
content:"";
position:absolute;
top:0;
left:0;
width:9px;
height:100%;
background:linear-gradient(var(--red) 0 50%,var(--navy) 50%)}
.projects>*{
max-width:calc(var(--max) - 6rem);
margin-left:auto;
margin-right:auto}
.project-grid{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:clamp(1.5rem,3vw,3.5rem);
align-items:start}
.project{
margin:0;
background:var(--paper);
overflow:hidden}
.project:nth-child(even){
margin-top:5rem}
.project img{
height:clamp(380px,50vw,720px);
object-fit:cover;
filter:saturate(.88);
transition:filter .4s,transform .5s}
.project:hover img{
filter:saturate(1.05);
transform:scale(1.015)}
.generation{
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(3rem,8vw,9rem);
align-items:center;
background:var(--navy);
color:#fff;
max-width:none;
padding-left:max(clamp(1.25rem,5vw,5rem),calc((100% - var(--max))/2 + 5rem));
padding-right:max(clamp(1.25rem,5vw,5rem),calc((100% - var(--max))/2 + 5rem))}
.generation-image{
position:relative}
.generation-image:after{
content:"";
position:absolute;
inset:1rem -1rem -1rem 1rem;
border:4px solid var(--red);
z-index:0}
.generation-image img{
height:auto;
aspect-ratio:3/4;
object-fit:cover;
object-position:center;
position:relative;
z-index:1}
.generation h2{
color:#fff}
.generation-copy>p:not(.section-number):not(.signature){
font-size:clamp(1rem,1.35vw,1.2rem);
color:#dbe2ee}
.generation-copy .section-number{
margin-bottom:3rem}
.signature{
margin-top:3rem;
padding-top:2rem;
border-top:1px solid rgba(255,255,255,.25);
font:600 1.2rem Manrope}
.signature span{
font:400 .7rem "DM Sans";
text-transform:uppercase;
letter-spacing:.14em}
.process{
border-top:0}
.steps{
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:repeat(4,1fr);
border-top:5px solid var(--navy)}
.steps li{
padding:2rem 1.6rem 3rem 0;
border-right:1px solid var(--line);
display:flex;
flex-direction:column;
min-height:280px}
.steps li+li{
padding-left:1.6rem}
.steps span{
font-size:.7rem;
color:var(--red);
font-weight:600}
.steps div{
margin-top:auto}
.steps h3{
font:600 1.35rem Manrope;
margin:0 0 .7rem;
color:var(--navy)}
.steps p{
color:var(--muted);
margin:0}
.contact{
background:var(--red);
color:#fff;
padding:clamp(5rem,9vw,9rem) clamp(1.25rem,6vw,6rem);
display:grid;
grid-template-columns:1.5fr 1fr;
gap:8vw}
.contact h2{
font-size:clamp(3rem,6.2vw,6.7rem);
margin-top:1.5rem;
color:#fff}
.contact .eyebrow{
color:#fff}
.contact-details{
align-self:end;
display:grid;
grid-template-columns:1fr 1fr;
gap:2rem}
.contact-details address{
font-style:normal}
.contact-details a:hover{
text-decoration:underline}
footer{
padding:2.5rem clamp(1.25rem,4vw,4.5rem);
background:var(--navy-dark);
color:#fff;
display:flex;
align-items:center;
justify-content:space-between;
gap:2rem;
font-size:.72rem}
footer .brand img{
width:190px;
height:58px;
border:5px solid #fff}
footer>div{
display:flex;
gap:1.5rem}
.legal-link{
border:0;
background:none;
color:inherit;
padding:0;
cursor:pointer;
font-size:inherit}
.legal-link:hover{
text-decoration:underline}
dialog{
width:min(760px,calc(100% - 2rem));
max-height:85vh;
border:0;
padding:0;
background:var(--paper);
box-shadow:0 24px 100px rgba(0,0,0,.3)}
dialog::backdrop{
background:rgba(17,32,62,.78)}
#legal-content{
padding:clamp(2rem,5vw,5rem);
overflow:auto}
#legal-content h2{
font:600 2.5rem Manrope;
margin-top:0;
color:var(--navy)}
#legal-content h3{
margin-top:2rem;
color:var(--navy)}
.dialog-close{
position:absolute;
right:1rem;
top:.7rem;
border:0;
background:none;
font-size:2rem;
cursor:pointer}
.reveal{
opacity:0;
transform:translateY(24px);
transition:opacity .7s ease,transform .7s ease}
.reveal.visible{
opacity:1;
transform:none}
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
.reveal{
opacity:1;
transform:none;
transition:none}
}
@media(max-width:980px){
.site-header{
height:80px}
.brand img{
width:180px;
height:58px}
.menu-toggle{
display:grid;
gap:4px}
.menu-toggle span{
display:block;
width:26px;
height:2px;
background:var(--navy)}
.menu-toggle b{
position:absolute;
clip:rect(0 0 0 0)}
.site-header nav{
display:none;
position:absolute;
left:0;
right:0;
top:80px;
background:#fff;
padding:2rem;
flex-direction:column;
align-items:stretch;
border-bottom:4px solid var(--red)}
.site-header nav.open{
display:flex}
.hero{
height:auto;
min-height:0;
grid-template-columns:1fr}
.hero-copy{
min-height:580px}
.hero-photo{
height:62vw;
min-height:390px}
.intro,.section-heading{
grid-template-columns:1fr}
.intro-stat{
margin-top:2rem}
.steps{
grid-template-columns:1fr 1fr}
.contact{
grid-template-columns:1fr}
.project-grid{
gap:1.5rem}
.project:nth-child(even){
margin-top:3rem}
}
@media(max-width:640px){
.topline span{
display:none}
.topline{
justify-content:flex-end}
.hero-copy{
min-height:540px}
.hero h1{
font-size:clamp(3.2rem,15vw,5rem)}
.hero-photo{
height:75vw;
}
.hero-photo img{
object-position:52% center}
.section{
padding-top:5rem;
padding-bottom:5rem}
.service-list,.project-grid{
grid-template-columns:1fr}
.service{
min-height:230px}
.project:nth-child(even){
margin-top:0}
.project img{
height:120vw;
max-height:600px}
.generation{
grid-template-columns:1fr}
.generation-image img{
height:auto}
.steps{
grid-template-columns:1fr}
.steps li{
min-height:190px;
border-right:0;
border-bottom:1px solid var(--line);
padding-left:0!important}
.contact-details{
grid-template-columns:1fr}
footer{
align-items:flex-start;
flex-direction:column}
.footer-brand{
margin-bottom:1rem}
}