html,body{margin:0}
/* Layout: a 1986 dealer-brochure one-pager. Hunter-green hero with the wagon in profile, woodgrain bands (framed by chrome pinstripes) divide the sections. Single brochure palette by choice. */
:root{
  --hunter:#21372b; --hunter-2:#2c4738; --saddle:#efe5d3; --vinyl:#e2d3b8; --ink:#1f1a14; --muted:#6b5e4c;
  --wood-1:#5a3820; --wood-2:#7a4f2c; --wood-3:#94653a; --chrome:#c9ccc9; --signal:#c8642a;
  --display:"Zilla Slab",Rockwell,"Roboto Slab",Georgia,serif; --body:"Instrument Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--saddle);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6}
a{color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:3px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;line-height:1.05;text-wrap:balance}
p{margin:0}

/* woodgrain band with chrome pinstripes, the brochure's signature */
.wood{height:34px;position:relative;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 37px,rgba(30,15,5,.22) 37px 39px,rgba(0,0,0,0) 39px 93px,rgba(255,220,170,.10) 93px 95px,rgba(0,0,0,0) 95px 151px),
    repeating-linear-gradient(178.6deg,var(--wood-1) 0 3px,var(--wood-2) 3px 7px,var(--wood-3) 7px 9px,var(--wood-2) 9px 14px),
    var(--wood-2);
  box-shadow:inset 0 3px 0 var(--chrome),inset 0 4px 0 rgba(0,0,0,.35),inset 0 -3px 0 var(--chrome),inset 0 -4px 0 rgba(0,0,0,.35)}
.wood.thin{height:16px}

/* header + hero */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--hunter)}
.mocknote{background:var(--ink);color:var(--vinyl);text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 16px}
header.top{background:var(--hunter);color:var(--saddle)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:18px}
.brand{display:flex;flex-direction:column;line-height:1;text-decoration:none}
.brand b{font-family:var(--display);font-size:26px;letter-spacing:.02em}
.brand span{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;color:var(--vinyl);margin-top:5px}
nav.links{display:flex;gap:26px;align-items:center;font-size:15px}
nav.links a{text-decoration:none;color:var(--vinyl)} nav.links a:hover{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:4px;border:0;font:600 15px/1 var(--body);text-decoration:none;cursor:pointer;background:var(--signal);color:#fff;transition:background .15s}
.btn:hover{background:#a9521f}
.btn.ghost{background:transparent;color:var(--saddle);box-shadow:inset 0 0 0 1.5px rgba(239,229,211,.5)}
.btn.ghost:hover{background:rgba(255,255,255,.08)}
@media (max-width:780px){nav.links .t{display:none}}
@media (max-width:600px){.brand b{font-size:19px}.brand span{font-size:9.5px}.spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.spec div{border-right:0;margin-right:0;padding-right:10px;border-bottom:1px solid rgba(239,229,211,.18)}.spec b{font-size:17px}}

.hero{background:var(--hunter);color:var(--saddle);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-block:28px 0}
.hero h1{font-size:clamp(40px,6.4vw,78px);font-weight:700;letter-spacing:-.01em;max-width:15ch}
.hero h1 em{font-style:normal;color:#e9b880}
.hero .lede{font-size:clamp(17px,1.6vw,20px);color:var(--vinyl);max-width:52ch}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.spec{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid rgba(239,229,211,.18);margin-top:6px}
.spec div{padding:14px 22px 14px 0;margin-right:22px;border-right:1px solid rgba(239,229,211,.18);display:grid;gap:2px}
.spec div:last-child{border-right:0}
.spec .label{color:#b9c4b6;font-size:10.5px}
.spec b{font-family:var(--display);font-size:20px;font-weight:500;color:var(--saddle)}
.heroimg{margin:8px 0 0;position:relative;border-radius:6px 6px 0 0;overflow:hidden;box-shadow:0 -1px 0 rgba(239,229,211,.18)}
.heroimg img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.heroimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,55,43,.0) 60%,rgba(33,55,43,.35));pointer-events:none}
.road{height:18px;background:linear-gradient(var(--hunter-2),var(--hunter))}

/* sections */
section{padding-block:clamp(56px,8vw,96px)}
.sechead{display:grid;gap:12px;margin-bottom:36px;max-width:720px}
.sechead .label{color:var(--signal)}
.sechead h2{font-size:clamp(32px,4.2vw,48px)}
.sechead p{color:var(--muted);font-size:18px}

.paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:900px){.paths{grid-template-columns:minmax(0,1fr)}}
.path{background:#f8f2e6;border:1px solid #dccbab;border-radius:6px;display:grid;grid-template-rows:auto auto auto auto 1fr auto;overflow:hidden}
.path img.ph{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.path .tag{background:var(--vinyl);padding:12px 22px;display:flex;justify-content:space-between;gap:10px;align-items:baseline;border-bottom:1px solid #d3c09c}
.path .tag .label{color:var(--wood-1);font-size:11px}
.path h3{font-size:28px;padding:20px 22px 6px}
.path p.sum{padding:0 22px;color:var(--muted)}
.path ul{list-style:none;margin:16px 0 0;padding:0 22px 20px;display:grid;gap:8px;align-content:start}
.path li{display:grid;grid-template-columns:14px 1fr;gap:10px;font-size:15.5px;line-height:1.45}
.path li::before{content:"";width:8px;height:8px;margin-top:7px;background:var(--wood-2);border-radius:1px;transform:rotate(45deg)}
.path .foot{border-top:1px dashed #d3c09c;padding:14px 22px;display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted)}
.path .foot b{color:var(--ink);font-weight:600}
.path.feature{border-color:var(--hunter);box-shadow:0 0 0 1px var(--hunter)}
.path.feature .tag{background:var(--hunter)} .path.feature .tag .label{color:var(--vinyl)}

/* known weak spots */
.dark{background:var(--ink);color:var(--saddle)}
.badge{margin:0 0 40px;border-radius:6px;overflow:hidden}
.badge img{display:block;width:100%;height:clamp(160px,24vw,280px);object-fit:cover;object-position:50% 78%}
.dark .sechead p{color:#b8ab95}
.spots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid #3a3229}
@media (max-width:760px){.spots{grid-template-columns:minmax(0,1fr)}}
.spot{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:18px 0;border-bottom:1px solid #3a3229}
.spot:nth-child(odd){padding-right:28px} 
@media (min-width:761px){.spot:nth-child(even){padding-left:28px;border-left:1px solid #3a3229}}
.spot .label{color:#e9b880;font-size:11.5px;padding-top:4px}
.spot b{display:block;font-family:var(--display);font-size:21px;font-weight:500;margin-bottom:2px}
.spot p{color:#c4b8a3;font-size:15.5px}
@media (max-width:480px){.spot{grid-template-columns:minmax(0,1fr);gap:4px}}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;counter-reset:s}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{display:grid;gap:8px;align-content:start;padding-top:16px;border-top:3px solid var(--hunter)}
.step .n{font-family:var(--display);font-size:44px;line-height:1;color:var(--wood-2)}
.step h3{font-size:22px}
.step p{color:var(--muted);font-size:15.5px}

/* timeline */
.years{background:var(--vinyl)}
.tl{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:relative;gap:0}
.tl::before{content:"";position:absolute;left:0;right:0;top:30px;height:3px;background:var(--wood-2)}
.tl div{position:relative;padding:0 14px 0 0;display:grid;gap:6px}
.tl b{font-family:var(--display);font-size:30px;line-height:1;color:var(--hunter);background:var(--vinyl);justify-self:start;padding-right:10px;position:relative;z-index:1}
.tl div::after{content:"";position:absolute;left:0;top:25px;width:13px;height:13px;border-radius:50%;background:var(--hunter);box-shadow:0 0 0 3px var(--vinyl);z-index:2;display:none}
.tl span{font-size:14.5px;color:var(--muted);padding-top:14px;line-height:1.45}
@media (max-width:900px){.tl{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}.tl::before{display:none}.tl div{border-top:3px solid var(--wood-2);padding-top:10px}}
@media (max-width:520px){.tl{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* contact */
.contact .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:860px){.contact .wrap{grid-template-columns:minmax(0,1fr)}}
.contact .card{display:grid;gap:14px}
.contact .card h2{font-size:clamp(32px,4.2vw,48px)}
.contact .card p{color:var(--muted)}
.facts{display:grid;gap:10px;margin-top:8px}
.contact img.interior{display:block;width:100%;height:auto;border-radius:6px;margin-top:6px}
.facts div{display:grid;grid-template-columns:120px 1fr;gap:12px;font-size:15.5px;border-top:1px solid #d9c9aa;padding-top:10px}
.facts .label{font-size:11px;color:var(--muted);padding-top:3px}
form{background:#f8f2e6;border:1px solid #dccbab;border-radius:6px;padding:24px;display:grid;gap:16px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:520px){.row2{grid-template-columns:minmax(0,1fr)}}
label{display:grid;gap:6px;font-size:14px;font-weight:600}
input,select,textarea{font:inherit;font-size:16px;font-weight:400;color:var(--ink);background:#fffdf8;border:1px solid #cdb995;border-radius:4px;padding:11px 12px;min-height:46px;width:100%}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--hunter);outline-offset:0;border-color:var(--hunter)}
.goal{display:flex;flex-wrap:wrap;gap:8px}
.goal input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.goal label{font-weight:500;display:inline-flex;align-items:center;min-height:42px;padding:0 14px;border:1px solid #cdb995;border-radius:999px;background:#fffdf8;cursor:pointer}
.goal input:checked+label{background:var(--hunter);color:var(--saddle);border-color:var(--hunter)}
.goal input:focus-visible+label{outline:2px solid var(--signal);outline-offset:2px}
fieldset{border:0;padding:0;margin:0;display:grid;gap:8px} legend{font-size:14px;font-weight:600;padding:0;margin-bottom:6px}
.sent{background:var(--hunter);color:var(--saddle);border-radius:4px;padding:12px 14px;font-size:15px}

footer{background:var(--hunter);color:#b9c4b6;font-size:14px}
footer .wrap{padding-block:30px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
footer .credit{display:block;margin-top:6px;font-size:12px;color:#93a291}
footer .credit a{color:#b9c4b6}
footer b{font-family:var(--display);font-size:20px;color:var(--saddle)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.label-muted{color:#b9c4b6}.label-amber{color:#e9b880}.label-signal{color:var(--signal)}
section.flush{padding-block:0}
.soon{display:grid;gap:4px;border-left:4px solid var(--wood-2);padding:12px 16px;background:#f8f2e6;border-radius:0 6px 6px 0;margin-top:6px}
.soon b{font-family:var(--display);font-size:22px}
.soon span{color:var(--muted)}
.contact img.side{margin-top:0}