@font-face {
  font-family: "Barlow Condensed";
  src: url("display.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("body.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}
* { box-sizing: border-box; }
html { scroll-padding-block: 1rem; }
body { margin: 0; background: #f9f7f0; color: #18332a; font: 1rem/1.55 "DM Sans", Arial, sans-serif; }
.wrap { width: min(90%, 1200px); margin-inline: auto; }
header, footer { background: #18332a; color: #f7efe2; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.45rem; }
.logo { display: block; width: 134px; height: auto; }
a { color: inherit; }
.bar a { text-decoration: none; font-weight: 650; }
a:hover { text-decoration: underline; text-underline-offset: .22em; }
a:focus-visible { outline: 3px solid #ce8555; outline-offset: 4px; }
.hero { display: grid; grid-template-columns: .86fr 1fr; gap: 5%; align-items: center; padding-block: clamp(2rem, 5.4vw, 5.3rem); }
.eyebrow { margin: 0 0 1.1rem; font-size: .74rem; text-transform: uppercase; letter-spacing: .15em; font-weight: 750; }
h1, h2, dt { margin: 0; font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; line-height: 1; }
h1 { font-size: clamp(3rem, 6.5vw, 6.65rem); letter-spacing: -.024em; max-width: 10.5ch; }
h1 span { color: #a56839; }
h2 { font-size: clamp(2.35rem, 4vw, 3.8rem); letter-spacing: -.018em; }
.intro, .contact p { margin: 1.25rem 0 1.6rem; max-width: 54ch; color: #42554b; }
.button { display: inline-flex; align-items: center; gap: 1.5rem; justify-content: space-between; text-decoration: none; font-weight: 700; color: white; background: #224536; padding: .77rem 1.25rem; }
.button:hover { background: #305641; }
figure { margin: 0; min-width: 0; }
figure img { display: block; width: 100%; height: auto; }
figcaption { border-bottom: 1px solid #bdc6b9; padding-block: .5rem; font-size: .75rem; color: #47594d; }
.specs { background: #ebeee5; border-block: 1px solid #d2d9cd; padding-block: clamp(2.2rem, 4vw, 4rem); }
dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin: 2rem 0 0; }
dl div { padding-top: 1rem; border-top: 1px solid #b0bdaf; }
dt { font-size: 2rem; font-weight: 700; }
dd { margin: .75rem 0 0; color: #42554b; }
.contact { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: clamp(2.7rem, 5vw, 5rem); }
.contact p { margin-bottom: 0; }
.actions { display: grid; justify-items: start; gap: .6rem; }
.address { text-underline-offset: .2em; font-size: .95rem; }
footer { font-size: .83rem; }
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 1.7rem; }
  h1 { max-width: 15ch; }
  dl { grid-template-columns: 1fr; gap: 1.3rem; }
  .contact { align-items: flex-start; flex-direction: column; gap: 1.25rem; }
}
@media (max-width: 400px) {
  .logo { width: 105px; }
  header a { font-size: .88rem; }
  h1 { font-size: 2.85rem; }
}