:root{  
 --ink:#101413; --cream:#f2eee5; --soft:#d9d5cc; --olive:#82972d;  
 --line:rgba(242,238,229,.16);  
}  
*{box-sizing:border-box}  
html,body{margin:0;background:var(--ink);color:var(--cream)}  
body{font-family:"Avenir Next",Avenir,"Helvetica Neue",Helvetica,Arial,sans
serif;-webkit-font-smoothing:antialiased}  
a{color:inherit;text-decoration:none}  
img{display:block;max-width:100%}  
.hero{height:min(78vh,820px);min
height:650px;position:relative;overflow:hidden;background:var(--ink)}  
.photo{position:absolute;inset:0;background:url("assets/hero.png") 61%   
51%/cover no-repeat}  
.fade{position:absolute;inset:0;background:  
 linear-gradient(90deg,#101413 0%,rgba(16,20,19,.99) 18%,rgba(16,20,19,.92)   
29%,rgba(16,20,19,.62) 40%,rgba(16,20,19,.22) 53%,rgba(16,20,19,.04) 69%),  
 linear-gradient(0deg,rgba(8,11,10,.22),rgba(8,11,10,.05))}  
.content{height:100%;position:relative;z
index:2;padding:clamp(38px,4.3vw,78px)   
clamp(38px,4.8vw,92px);flex
direction:column;width:min(49%,760px)}  
.brand{max-height:80px}  
.intro{margin:2em 0 0}  
h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font
size:clamp(60px,5.3vw,100px);line-height:.96;letter-spacing:-.045em;margin:0}  
h1 span{color:var(--olive)}  
.accent{width:62px;height:2px;background:var(--olive);margin:28px 0 30px}  
.intro p{font-size:clamp(19px,1.45vw,27px);line
height:1.55;color:#e2ded5;margin:0}  
.contact{font-style:normal;display:grid;gap:17px;margin-top:2em}  
.contact a{display:flex;align-items:center;gap:18px;width:max-content;font
size:clamp(18px,1.25vw,23px)}  
.contact svg{width:27px;height:27px;fill:var(--olive)}  
.contact a:hover{color:white}  
.footer{border-top:1px solid var(--line);padding:26px clamp(38px,4.8vw,92px)   
18px;background:linear-gradient(#151918,#101312)}  
.footer-inner{max-width:1500px;margin:auto;display:grid;grid-template
columns:220px 1fr;gap:44px;align-items:center}
.green{padding-right:38px;border-right:1px solid rgba(242,238,229,.22)}  
.green img{width:165px;max-height:90px;object-fit:contain;object-position:left   
center}  
.green span{display:block;color:var(--olive);font-size:18px;margin-top:4px}  
.tagline{margin:0;font-size:clamp(20px,1.55vw,28px);color:#dfdbd2}  
.accent.small{width:46px;margin:18px 0 19px}  
.values{margin:0;display:flex;align-items:center;gap:18px;flex
wrap:wrap;color:#c4c0b7;font-size:12px;letter-spacing:.27em}  
.values i{width:1px;height:17px;background:var(--olive)}  
.legal{max-width:1500px;margin:18px auto 0;padding-top:13px;border-top:1px   
solid rgba(242,238,229,.09);display:flex;justify-content:space
between;gap:20px;color:#8e928e;font-size:10.5px;line-height:1.45}  
@media(max-width:900px){  
 .hero{height:auto;min-height:760px;display:flex;flex-direction:column}  
 .photo{inset:0;background-position:54% 48%;background-size:cover}  
 /* On phone the photograph sits behind the whole hero and fades vertically  
 into the dark text area, instead of becoming a separate rectangular image. */  
 .fade{background:  
 linear-gradient(180deg,#101413 0%,rgba(16,20,19,.99) 20%,rgba(16,20,19,.94)   
39%,rgba(16,20,19,.74) 55%,rgba(16,20,19,.32) 70%,rgba(16,20,19,.08) 86%),  
 linear-gradient(90deg,rgba(16,20,19,.90) 0%,rgba(16,20,19,.50)   
54%,rgba(16,20,19,.08) 100%)}  
 .content{width:100%;min-height:760px;padding:28px 24px 34px}    
 .intro{margin-top:62px}  
 h1{font-size:clamp(50px,13vw,70px)}  
 .accent{margin:23px 0 24px;width:55px}  
 .intro p{font-size:18px;max-width:33rem}  
 .desktop{display:none}  
 .contact{margin-top:38px;gap:15px}  
 .contact a{font-size:17px;gap:14px}  
 .contact svg{width:24px;height:24px}  
 .footer{padding:30px 24px 18px}  
 .footer-inner{grid-template-columns:1fr;gap:28px}  
 .green{border-right:0;border-bottom:1px solid rgba(242,238,229,.17);padding:0   
0 24px}  
 .green img{width:165px}  
 .tagline{font-size:21px;line-height:1.45}  
 .values{gap:11px 13px;font-size:10.5px;letter-spacing:.18em;line-height:1.8}  
 .legal{flex-direction:column;gap:5px;margin-top:24px;font-size:9.5px}  
}
@media(max-width:430px){  
 .hero{min-height:720px}  
 .content{min-height:720px;padding-left:20px;padding-right:20px}   
 .intro{margin-top:50px}  
 h1{font-size:49px}  
 .intro p{font-size:16.5px}  
 .contact a{font-size:16px}  
 .footer{padding-left:20px;padding-right:20px}  
}  
@media(prefers-reduced-motion:reduce){*{scroll
behavior:auto!important;transition:none!important}}