@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Barlow+Condensed:wght@400;600;700&display=swap');

:root { --bg:#f2f0ec; --surface:#e8e3da; --ink:#211c17; --muted:#756c61; --line:rgba(33,28,23,.17); --rust:#a3612e; --rust-dark:#7d481f; --paper:#f7f5f2; --heading:'Barlow Condensed',sans-serif; --body:'Barlow',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 var(--body); }
a { color:inherit; text-underline-offset:3px; }
img { display:block; max-width:100%; }
button,input,textarea { font:inherit; }
.site-header { position:sticky; z-index:10; top:0; border-bottom:1px solid var(--line); background:rgba(242,240,236,.94); backdrop-filter:blur(8px); }
.nav { width:min(1200px,90%); min-height:64px; margin:auto; display:flex; align-items:center; gap:28px; }
.brand { margin-right:auto; display:flex; align-items:center; gap:9px; font:600 21px/1 var(--heading); letter-spacing:.03em; text-decoration:none; }
.brand-mark { width:28px; height:28px; display:grid; place-items:center; border:2px solid var(--rust-dark); clip-path:polygon(50% 0,94% 25%,94% 75%,50% 100%,6% 75%,6% 25%); color:var(--rust-dark); font:700 16px/1 var(--heading); }
.brand b,.accent { color:var(--rust-dark); }
.nav-links { display:flex; gap:25px; align-items:center; text-transform:uppercase; font-size:13px; letter-spacing:.07em; }
.nav-links a { padding:21px 0 18px; text-decoration:none; border-bottom:2px solid transparent; }
.nav-links a:hover,.nav-links a[aria-current=page] { color:var(--rust-dark); border-color:var(--rust-dark); }
.button { display:inline-flex; justify-content:center; align-items:center; border:1px solid var(--rust); padding:11px 20px; background:var(--rust); color:var(--bg); font:600 15px/1 var(--heading); text-transform:uppercase; letter-spacing:.05em; text-decoration:none; cursor:pointer; }
.button:hover { background:var(--rust-dark); border-color:var(--rust-dark); }
.button.outline { color:var(--ink); background:transparent; border-color:var(--line); }.button.outline:hover { background:#f1e4d8; border-color:var(--rust); }
.menu-toggle { display:none; background:none; border:0; font:600 18px var(--heading); text-transform:uppercase; }
.shell { width:min(1200px,90%); margin:auto; }.hero { padding:clamp(52px,8vw,100px) 0 68px; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(35px,6vw,72px); align-items:center; }
.eyebrow,.section-label { color:var(--rust-dark); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }.eyebrow { display:inline-flex; gap:8px; align-items:center; border:1px solid var(--line); padding:6px 11px; color:var(--ink); }.eyebrow::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--rust); }
h1,h2,h3 { margin:0; font-family:var(--heading); line-height:1.02; text-transform:uppercase; }h1 { margin-top:20px; font-size:clamp(48px,7vw,76px); }h2 { font-size:clamp(31px,4vw,48px); }h3 { font-size:23px; }
.lead { margin:23px 0 0; max-width:56ch; font-size:17px; color:#443f38; }.actions { display:flex; flex-wrap:wrap; gap:13px; margin-top:30px; }
.blueprint { position:relative; border:1px solid var(--line); }.blueprint::before,.blueprint::after { content:'+'; position:absolute; color:rgba(33,28,23,.55); font:18px/1 sans-serif; z-index:2; }.blueprint::before { top:-10px; left:-8px; }.blueprint::after { bottom:-10px; right:-8px; }
.portrait { overflow:hidden; }.portrait img { width:100%; aspect-ratio:4/5; object-fit:cover; filter:grayscale(1) sepia(.3); }.portrait::marker { content:''; }.portrait:after { content:''; position:absolute; inset:0; background:var(--rust); mix-blend-mode:color; pointer-events:none; }.caption { display:flex; justify-content:space-between; margin-top:10px; font-size:11px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:70px; }.stat { padding:18px; border-right:1px solid var(--line); }.stat:last-child { border:0; }.stat b { display:block; font:600 29px var(--heading); }.stat span { font-size:10px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
.section { padding:0 0 76px; }.section-head { display:flex; align-items:center; gap:15px; margin-bottom:28px; }.section-head::after { content:''; height:1px; flex:1; background:var(--line); }.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }.card { padding:26px; display:flex; min-height:200px; flex-direction:column; }.card p { color:#514a42; margin:14px 0 18px; }.card a { margin-top:auto; font:600 16px var(--heading); color:var(--rust-dark); text-decoration:none; }
.video { padding:8px; }.video-frame { aspect-ratio:16/9; background:#17120e; display:grid; place-items:center; color:#d9c1aa; text-align:center; font:600 18px var(--heading); }.video figcaption { padding:9px 3px 0; font-size:11px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
.page-title { padding:70px 0 45px; border-bottom:1px solid var(--line); margin-bottom:45px; }.page-title p { max-width:660px; margin:15px 0 0; color:#514a42; font-size:17px; }
.profile { display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; }.facts { margin:0; }.facts div { display:grid; grid-template-columns:110px 1fr; padding:12px 0; border-bottom:1px solid var(--line); }.facts dt { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }.facts dd { margin:0; font-weight:600; }
.build-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }.build-card { padding:8px; }.build-art { aspect-ratio:16/9; background:linear-gradient(135deg,#211c17,#67411e); display:grid; place-items:center; color:#eadfd3; font:600 42px var(--heading); }.build-card figcaption { padding:11px 3px 3px; }.build-card small { color:var(--rust-dark); font-weight:600; letter-spacing:.08em; }.build-card strong { display:block; font-size:16px; }
.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }.product { display:flex; flex-direction:column; }.product-art { aspect-ratio:1; display:grid; place-items:center; border-bottom:1px solid var(--line); color:var(--muted); font:600 21px var(--heading); text-transform:uppercase; background:repeating-linear-gradient(45deg,transparent 0 9px,rgba(33,28,23,.025) 10px 11px); }.product-body { padding:16px; }.product-body span { color:var(--rust-dark); font:600 17px var(--heading); }.product .button { width:100%; margin-top:16px; background:transparent; color:var(--ink); border-color:var(--line); }.product .button:hover { background:#f1e4d8; border-color:var(--rust); }
.contact { display:grid; grid-template-columns:1fr 1fr; gap:60px; }.field { margin-bottom:15px; }.field label { display:block; margin-bottom:5px; color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }.field input,.field textarea { width:100%; padding:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); }.field textarea { min-height:120px; resize:vertical; }.form-note { min-height:24px; color:var(--rust-dark); font-size:14px; }
.site-footer { margin-top:10px; border-top:1px solid var(--line); padding:42px 0 32px; }.footer-row { width:min(1200px,90%); margin:auto; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }.socials { display:flex; gap:10px; flex-wrap:wrap; }.socials a { border:1px solid var(--line); padding:7px 11px; text-decoration:none; font-size:13px; }.socials a:hover { border-color:var(--rust); color:var(--rust-dark); }.legal { width:min(1200px,90%); margin:28px auto 0; color:var(--muted); font-size:11px; }
@media (max-width:760px) { .nav { min-height:58px; flex-wrap:wrap; }.menu-toggle { display:block; }.nav-links { display:none; width:100%; order:3; flex-direction:column; align-items:stretch; gap:0; padding-bottom:12px; }.nav-links.open { display:flex; }.nav-links a { padding:10px 0; }.subscribe { display:none; }.hero,.profile,.contact { grid-template-columns:1fr; }.hero { padding-top:48px; }.portrait { max-width:450px; }.stats,.grid,.build-grid { grid-template-columns:repeat(2,1fr); }.product-grid { grid-template-columns:repeat(2,1fr); }.stat:nth-child(2) { border-right:0; }.stat:nth-child(-n+2) { border-bottom:1px solid var(--line); } }
@media (max-width:460px) { h1 { font-size:51px; }.shell,.nav,.footer-row,.legal { width:88%; }.stats,.grid,.build-grid,.product-grid { grid-template-columns:1fr; }.stat { border-right:0; border-bottom:1px solid var(--line); }.stat:last-child { border-bottom:0; }.section { padding-bottom:56px; } }
