:root { --paper:#fcf9f3; --ink:#29302e; --sage:#6f8e85; --deep:#3f5e56; --line:#d6d8cf; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
a:focus-visible { outline:2px solid var(--deep); outline-offset:5px; }
.topline { padding:11px 20px; background:var(--deep); color:#fff; text-align:center; font-size:12px; letter-spacing:.15em; text-transform:uppercase; }
.site-header { max-width:1500px; min-height:170px; margin:auto; padding:18px 7vw; display:flex; align-items:center; justify-content:space-between; gap:30px; border-bottom:1px solid var(--line); }
.brand { display:block; width:225px; flex:none; }
.brand img { display:block; width:100%; height:auto; max-height:140px; object-fit:contain; }
.header-contact { display:inline-flex; align-items:center; gap:15px; padding-bottom:7px; border-bottom:1px solid var(--deep); color:var(--deep); font-size:13px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.header-contact span { font-size:20px; font-weight:400; line-height:1; }
.hero { max-width:1500px; min-height:615px; margin:auto; padding:68px 7vw 82px; display:grid; grid-template-columns:1fr .9fr; align-items:center; gap:6vw; }
.hero-copy { max-width:665px; }
.eyebrow { margin:0 0 25px; color:var(--deep); font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
h1 { margin:0; font:normal clamp(56px,6.5vw,102px)/.98 Georgia,'Times New Roman',serif; letter-spacing:-.045em; }
h1 em { position:relative; display:inline-block; color:var(--sage); font-weight:normal; }
h1 em::after { content:""; position:absolute; left:4%; right:2%; bottom:-.14em; height:2px; background:repeating-linear-gradient(90deg,currentColor 0 7px,transparent 7px 14px); opacity:.5; }
.intro { max-width:570px; margin:32px 0 35px; font:21px/1.6 Georgia,'Times New Roman',serif; }
.primary-link { display:inline-flex; align-items:center; gap:24px; padding:18px 24px; background:var(--ink); color:#fff; font-size:13px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; transition:background .2s ease; }
.primary-link:hover { background:var(--deep); }
.primary-link span { font-size:20px; font-weight:400; line-height:1; }
.contact-address { margin:20px 0 0; color:var(--deep); font-size:15px; }
.contact-address a { text-decoration:underline; text-underline-offset:4px; }
.hero-image { min-width:0; margin:0; align-self:center; }
.hero-artwork { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; }
.hero-artwork img { display:block; width:100%; height:100%; object-fit:contain; }
.image-caption { display:flex; justify-content:space-between; gap:12px; margin-top:-8px; padding:15px 0 0; border-top:1px solid var(--line); color:var(--deep); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.offer { padding:34px 7vw; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#e8ebe5; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.offer p { margin:0; font:23px Georgia,'Times New Roman',serif; }
.offer div { display:flex; flex-wrap:wrap; gap:16px 30px; }
.offer span { color:var(--deep); font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
footer { min-height:150px; padding:45px 7vw; display:flex; align-items:center; justify-content:space-between; gap:20px; }
footer>span { font:24px Georgia,'Times New Roman',serif; letter-spacing:.3em; }
footer>span small { display:block; margin-top:4px; font:9px Arial,Helvetica,sans-serif; letter-spacing:.2em; }
footer>a { color:var(--deep); font-size:15px; text-decoration:underline; text-underline-offset:4px; }
footer p { margin:0; color:#65716b; font-size:12px; }
@media(max-width:850px) { .site-header { min-height:124px; padding:14px 5vw; } .brand { width:150px; } .hero { grid-template-columns:1fr; min-height:auto; padding:65px 6vw 85px; gap:55px; } .offer { display:block; padding:30px 6vw; } .offer div { margin-top:20px; } footer { padding:40px 6vw; flex-wrap:wrap; } }
@media(max-width:520px) { .topline { font-size:10px; line-height:1.5; } .site-header { min-height:104px; } .brand { width:120px; } .header-contact { font-size:11px; letter-spacing:.08em; gap:5px; } .header-contact span { font-size:17px; } .hero { padding-top:54px; gap:48px; } h1 { font-size:clamp(48px,13vw,70px); } .intro { font-size:19px; } .image-caption { font-size:11px; letter-spacing:.07em; } .offer p { font-size:21px; } footer { display:grid; gap:22px; } }