:root { --ink:#101010; --red:#d51f2a; --green:#2b9b62; --cream:#f4f0ea; --muted:#6c6965; --line:rgba(16,16,16,.15); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
.landing-shell { min-height:100vh; overflow:hidden; }
.site-header { width:min(1420px,100%); height:118px; margin:0 auto; padding:18px clamp(24px,5vw,72px); display:flex; align-items:center; border-bottom:1px solid var(--line); }
.brand { display:inline-grid; grid-template-columns:102px auto; align-items:center; gap:12px; }
.brand-mark { width:102px; height:82px; display:block; position:relative; line-height:1; }
.brand-mark strong { position:absolute; left:0; top:-5px; font-size:72px; font-weight:900; letter-spacing:-7px; }
.brand-mark b { position:absolute; left:50px; top:15px; color:var(--red); font-size:72px; font-weight:900; letter-spacing:-7px; }
.brand-copy { display:flex; flex-direction:column; gap:5px; white-space:nowrap; }
.brand-copy strong { font-size:18px; line-height:1; letter-spacing:.4px; }
.brand-copy small { color:var(--red); font-size:10px; font-weight:900; letter-spacing:1.7px; }
.hero { width:min(1420px,100%); min-height:calc(100vh - 246px); margin:0 auto; padding:clamp(58px,8vw,118px) clamp(24px,6.5vw,96px) clamp(54px,7vw,92px); display:grid; grid-template-columns:minmax(0,1.08fr) minmax(390px,.72fr); align-items:center; gap:clamp(46px,8vw,126px); position:relative; }
.hero::before { content:""; position:absolute; width:260px; height:260px; border:1px solid rgba(213,31,42,.28); border-radius:50%; left:-160px; top:40px; box-shadow:0 0 0 42px rgba(213,31,42,.035),0 0 0 84px rgba(213,31,42,.025); }
.hero-copy { position:relative; z-index:1; }
.eyebrow { margin:0; display:flex; align-items:center; gap:12px; color:var(--red); text-transform:uppercase; letter-spacing:2.2px; font-size:12px; font-weight:900; }
.eyebrow-line { width:34px; height:3px; background:var(--red); }
.hero h1 { max-width:820px; margin:26px 0 28px; font-size:clamp(58px,7.1vw,108px); line-height:.9; letter-spacing:-6px; font-weight:900; }
.hero h1 em { color:var(--red); font-style:normal; }
.intro { max-width:690px; margin:0; color:#2b2a28; font-size:clamp(18px,1.55vw,22px); line-height:1.55; }
.hero-actions { margin-top:38px; display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.button { min-height:58px; padding:0 27px; display:inline-flex; align-items:center; justify-content:center; gap:18px; border:2px solid var(--ink); border-radius:100px; font-size:15px; font-weight:900; transition:transform .2s,box-shadow .2s; }
.button:hover { transform:translateY(-3px); }
.button-primary { background:var(--ink); color:white; box-shadow:6px 6px 0 var(--red); }
.button-secondary { background:transparent; }
.status { margin-top:34px; display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:1.2px; }
.status i { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(43,155,98,.14); }
.contact-card { min-height:455px; padding:44px; background:var(--ink); color:white; border-radius:8px; box-shadow:14px 14px 0 var(--red); position:relative; overflow:hidden; }
.contact-card::after { content:"BH"; position:absolute; right:-18px; bottom:-52px; color:rgba(255,255,255,.04); font-size:190px; line-height:1; font-weight:900; letter-spacing:-8px; }
.card-monogram { width:116px; height:106px; position:relative; display:block; line-height:1; }
.card-monogram span { position:absolute; left:0; top:-6px; font-size:84px; font-weight:900; letter-spacing:-8px; }
.card-monogram b { position:absolute; left:58px; top:18px; color:var(--red); font-size:84px; font-weight:900; letter-spacing:-8px; }
.card-kicker { margin:18px 0 8px; color:var(--red); text-transform:uppercase; letter-spacing:1.8px; font-size:12px; font-weight:900; }
.contact-card h2 { max-width:430px; margin:0; font-size:clamp(30px,2.7vw,40px); line-height:1.06; letter-spacing:-1.5px; }
.contact-card h2 small { display:block; margin-top:10px; color:var(--red); font-size:13px; line-height:1; letter-spacing:2.2px; }
.surname { white-space:nowrap; }
.red-rule { height:3px; margin:32px 0 20px; background:var(--red); }
.contact-card address { display:grid; font-style:normal; position:relative; z-index:1; }
.contact-card address a { min-height:58px; display:flex; align-items:center; border-bottom:1px solid rgba(255,255,255,.16); }
.contact-card address strong { overflow-wrap:anywhere; font-size:15px; }
.services { padding:26px clamp(24px,5vw,72px); background:var(--red); color:white; display:flex; align-items:center; justify-content:center; gap:34px; }
.services>p { flex:0 0 auto; margin:0; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:1.5px; }
.services>div { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.services span { padding:9px 13px; border:1px solid rgba(255,255,255,.48); border-radius:100px; font-size:11px; font-weight:800; }
footer { min-height:92px; padding:28px clamp(24px,5vw,72px); display:flex; align-items:center; justify-content:space-between; gap:24px; color:var(--muted); font-size:11px; }
footer p { margin:0; }
footer a { color:var(--ink); font-weight:800; }
@media (max-width:980px) { .site-header { height:108px; } .hero { min-height:auto; grid-template-columns:1fr; gap:64px; padding-top:74px; } .hero-copy { max-width:780px; } .hero h1 { font-size:clamp(62px,10vw,92px); } .contact-card { width:min(620px,100%); min-height:auto; } .services { align-items:flex-start; flex-direction:column; gap:14px; } .services>div { justify-content:flex-start; } }
@media (max-width:600px) { .site-header { height:94px; padding:12px 20px; } .brand { grid-template-columns:88px auto; gap:9px; } .brand-mark { width:88px; height:70px; } .brand-mark strong { font-size:61px; } .brand-mark b { left:42px; top:12px; font-size:61px; } .brand-copy strong { font-size:14px; } .brand-copy small { font-size:8px; letter-spacing:1.3px; } .hero { padding:54px 22px 62px; gap:50px; } .hero h1 { margin:22px 0 24px; font-size:clamp(50px,15vw,70px); line-height:.94; letter-spacing:-4px; } .intro { font-size:17px; } .hero-actions { align-items:stretch; flex-direction:column; } .button { width:100%; } .contact-card { padding:34px 25px 38px; box-shadow:8px 8px 0 var(--red); } .contact-card h2 { font-size:34px; } .contact-card address strong { font-size:14px; } .services { padding:26px 22px; } footer { align-items:flex-start; flex-direction:column; } }
@media (max-height:560px) and (orientation:landscape) { .site-header { position:relative; } .hero { grid-template-columns:1fr 360px; padding-top:46px; gap:42px; } .hero h1 { font-size:56px; } .intro { font-size:16px; } .contact-card { padding:30px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }