:root{--cream:#f7f2e8;--navy:#0c2a3d;--gold:#a47c43;--ink:#42515b}
*{box-sizing:border-box}html,body{margin:0;background:var(--cream);color:var(--navy)}body{font-family:Arial,sans-serif}
.hero{position:relative;isolation:isolate;min-height:760px;overflow:hidden}
.art{position:absolute;z-index:-1;inset:0;background:url('../images/blueprint-landscape-v10.jpg') center/cover no-repeat}
.brand{padding-top:30px;margin-left:4.5%;width:115px}.brand img{display:block;width:100%;height:auto}
.copy{width:35%;padding:35px 0 65px 4.5%}
h1{margin:0;font:400 clamp(58px,6.1vw,105px)/.9 Georgia,serif;letter-spacing:-.055em;text-transform:uppercase}
.roles{position:relative;margin:22px 0 50px;font-size:clamp(9px,.8vw,14px);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);white-space:nowrap}.roles b{padding:0 .25em;font-weight:400}
.roles:after{content:'';position:absolute;left:0;bottom:-25px;width:68px;border-top:1px solid var(--gold)}
h2{margin:0 0 25px;font:400 clamp(27px,2.55vw,44px)/1.14 Georgia,serif;text-wrap:balance}
.copy p{margin:0;color:var(--ink);font-size:clamp(14px,1.05vw,17px);line-height:1.6}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#fbf8f2;border-top:1px solid #d8c5a9}.pillars article{text-align:center;padding:40px 5vw}.pillars article+article{border-left:1px solid #d8c5a9}.pillars h3{margin:0 0 15px;font:400 29px Georgia,serif;letter-spacing:.18em;text-transform:uppercase}.pillars i{display:block;width:44px;margin:0 auto 20px;border-top:1px solid var(--gold)}.pillars p{margin:auto;max-width:340px;line-height:1.55;color:var(--ink)}
footer{text-align:center;padding:25px;background:#fbf8f2;border-top:1px solid #d8c5a9}footer span,footer a{display:block;margin:7px;color:var(--gold);font-size:11px;letter-spacing:.16em;text-transform:uppercase}footer a{font-size:14px;letter-spacing:.04em;text-transform:none;text-decoration:none}

@media(min-width:901px) and (max-width:1200px){.hero{min-height:720px}.copy{width:38%}h1{font-size:65px}h2{font-size:29px}.roles{font-size:9px;letter-spacing:.12em}.art{background-position:45% center}}
@media(max-width:900px){
.hero{padding-top:calc(100px + 84vw);min-height:0}
.brand{position:absolute;top:16px;left:6%;margin:0;padding:0;width:90px}
.art{top:100px;bottom:auto;left:-50%;right:auto;width:150%;height:84vw;background-size:100% 100%;background-position:center}
.art:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 86%,var(--cream))}
.copy{width:88%;margin:0 auto;padding:25px 0 45px}h1{font-size:clamp(54px,11vw,80px)}h2{font-size:clamp(29px,5vw,38px)}.copy p{font-size:16px}.roles{font-size:11px;letter-spacing:.15em}
.pillars{grid-template-columns:1fr}.pillars article+article{border-left:0;border-top:1px solid #d8c5a9}.pillars article{padding:30px 8vw}
}
@media(max-width:520px){.brand{width:82px}h1{font-size:clamp(44px,13vw,62px)}.roles{font-size:9px;letter-spacing:.1em}h2{font-size:28px}.copy p{font-size:15px}}

/* Desktop composition fits the available window height; complete artwork stays visible. */
@media(min-width:901px){
main,footer{max-width:1360px;margin-left:auto;margin-right:auto}
.hero{min-height:0;height:clamp(570px,calc(100svh - 155px),740px)}
.art{background-size:contain;background-position:right top}
.brand{padding-top:20px;width:92px}
.copy{width:35%;padding-top:25px;padding-bottom:30px}
h1{font-size:clamp(52px,8svh,82px)}
.roles{font-size:10px;letter-spacing:.13em;margin-top:18px;margin-bottom:40px}
.roles:after{bottom:-19px}
h2{font-size:clamp(26px,3.7svh,34px);margin-bottom:20px}
.copy p{font-size:14px;line-height:1.55}
.pillars article{padding:25px 4vw}
.pillars h3{font-size:25px;margin-bottom:10px}
.pillars i{margin-bottom:14px}
.pillars p{font-size:14px}
}