:root {
  --ink: #142440;
  --muted: #72777e;
  --lime: #e3c27b;
  --paper: #faf9f6;
  --line: #e6e5e0;
}

body { background: var(--paper); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline-color: #ac8438;
}

header {
  height: 100px;
  background: #fff;
  color: var(--ink);
  border-bottom: 1px solid #eeede8;
  padding-left: 5%;
  padding-right: 5%;
}
.brand-logo-light { width: 255px; background: transparent; border-radius: 0; }
.brand-logo-light svg { display: block; width: 100%; height: 100%; overflow: hidden; }
header nav { gap: 32px; font-size: 13px; }
header nav a { padding: 10px 0; }
header nav a:hover { color: #a37b2d; }
.header-actions { gap: 22px; }
.header-actions button { color: var(--ink); }
.header-actions .button { background: var(--ink); color: #fff; border-radius: 5px; padding: 13px 20px; }
.header-actions .button:hover { background: #2e456b; }

.button { border-radius: 5px; }
.button:hover { background: #d7b263; }
.text-link:hover { color: #9d7832; }
.eyebrow { color: #8c7449; letter-spacing: 1.7px; }
.eyebrow i { background: #c8a558; }
.hero { min-height: 620px; background: #f8f7f3; }
.hero-copy { padding-top: 72px; }
.hero-copy h1 { letter-spacing: -3.5px; font-weight: 500; }
.hero-copy p { max-width: 390px; color: #73777c; }
.hero-bottom { color: #8d8f90; }
.hero-image {
  min-height: 620px;
  margin: 20px 22px 20px 0;
  border-radius: 12px;
  background: #f5f4f0;
  isolation: isolate;
}
.hero-image > img {
  object-fit: contain;
  object-position: center;
  filter: none;
  padding: 0 0 90px;
}
.hero-tag {
  bottom: 24px; left: 28px; right: 28px;
  padding: 22px 0 0;
  background: transparent;
  border-top: 1px solid #dcdad3;
  color: var(--ink);
}
.hero-tag span { color: #8a8172; }
.hero-tag a { border-color: #c0b9ab; }
.intro-strip { background: #efede6; }
.product-controls { padding-bottom: 24px; }
#filters button { padding: 10px 18px; color: #6b6e73; border-color: #e3e1da; background: transparent; }
#filters button.active { background: var(--ink); color: #fff; }
.product-grid { gap: 38px 26px; }
.product-picture { height: auto; aspect-ratio: 1 / 1; border-radius: 10px; background: #f5f4f0; }
.product-picture img { object-fit: contain; object-position: center; }
.product-card:hover img { transform: scale(1.035); }
.product-picture .tag { top: 16px; left: 16px; background: #ffffffdb; color: #7b756b; border-radius: 3px; }
.product-picture .arrow { right: 16px; bottom: 16px; color: var(--ink); box-shadow: 0 2px 12px #17233b08; }
.product-card h3 { margin-top: 19px; font-weight: 600; font-size: 20px; }
.product-meta { border-color: #e8e5dd; }
.applications { background: #f0efea; }
.application { border-radius: 9px; }
.road { background: #243750; }
.road-art { color: #7489a4; }
.solar { background: #e7dbb9; }
.sun-art { color: #aa8a40; }
.about-images img { border-radius: 7px; }
.download { background: #142640; }
.download p { color: #bdc7d5; }
.download .eyebrow { color: #e3c27b; }
.catalog-book { background: #e8d8ad; color: #182b48; border-left-color: #c5ac73; box-shadow: 20px 25px 0 #0c1b30; }
.stats strong { color: #223754; }
.contact-email { font-size: 26px; }
.contact-phone { display: inline-block; padding-bottom: 4px; border-bottom: 1px solid #d9bd84; }
footer { background: #102247; border-color: #263b60; }
.dialog-layout > img { object-fit: contain; object-position: center; background: #f5f4f0; }
dialog { border-radius: 12px; }
dialog::backdrop { background: #101f38a6; }

@media (max-width: 1100px) {
  header .brand-logo { width: 225px; }
  header nav { gap: 22px; }
  .header-actions { gap: 14px; }
  .hero-copy h1 { letter-spacing: -2.5px; }
}
@media (max-width: 900px) and (min-width: 721px) {
  header { height: 118px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
  header nav { order: 3; width: 100%; justify-content: center; gap: 36px; }
}
@media (max-width: 720px) {
  header { height: auto; min-height: 110px; gap: 18px 8px; padding-top: 17px; padding-bottom: 15px; }
  header .brand-logo { width: min(190px, 48vw); }
  header nav { justify-content: space-between; font-size: 11px; gap: 8px; }
  header nav a { padding: 0; }
  .header-actions { gap: 10px; }
  .header-actions .button { padding: 10px 13px; font-size: 11px; }
  .hero { min-height: 0; }
  .hero-copy { padding-top: 42px; }
  .hero-image { min-height: 430px; margin: 6px 5% 24px; }
  .hero-image > img { padding: 0 0 84px; }
  .hero-tag { bottom: 22px; left: 22px; right: 22px; }
  .hero-tag strong { font-size: 22px; }
  .hero-tag a { font-size: 10px; }
  .product-grid { gap: 28px 14px; }
  .product-picture { height: auto; aspect-ratio: 1 / 1.08; border-radius: 7px; }
  .product-picture .tag { top: 10px; left: 10px; padding: 5px 6px; font-size: 8px; }
  .product-picture .arrow { width: 26px; height: 26px; font-size: 15px; bottom: 10px; right: 10px; }
  .product-card h3 { font-size: 18px; }
  .dialog-layout > img { height: 300px; padding: 10px; }
}
@media (max-width: 360px) {
  .header-actions { gap: 6px; }
  .header-actions .button { padding: 9px; font-size: 10px; }
  .contact-email { font-size: 23px; }
}

.hero { grid-template-columns: 49% 51%; }
.hero-copy { padding-left: 10.2%; padding-right: 7%; }
.hero-copy h1 { font-size: clamp(42px, 4.1vw, 66px); }
.hero-range { margin: 25px 5% 25px 0; padding: 27px 24px 15px; border: 1px solid #e9e6dd; border-radius: 12px; background: #f5f4f0; display: flex; flex-direction: column; }
.range-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 22px; }
.range-heading .eyebrow { font-size: 10px; letter-spacing: 1.4px; }
.range-count { color: #a7a196; font-size: 10px; letter-spacing: 2px; white-space: nowrap; }
.range-board { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 15px; align-content: center; }
.range-item { min-width: 0; display: flex; flex-direction: column; border-bottom: 1px solid #e0ddd4; padding-bottom: 13px; }
.range-item img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 7px; transition: transform .3s; }
.range-item:hover img { transform: translateY(-4px); }
.range-item > div { display: flex; justify-content: space-between; gap: 5px; padding-top: 5px; }
.range-item span { font-size: 12px; font-weight: 500; }
.range-item b { color: #a89059; font-weight: 400; }
.range-item small { font-size: 9px; letter-spacing: .8px; color: #929088; margin-top: 5px; }
.range-collection { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 15px; border-radius: 8px; background: #eae4d5; }
.range-collection > span { font-family: Manrope,sans-serif; font-size: 25px; letter-spacing: -1px; color: #b69b64; }
.range-collection strong { font-size: 14px; font-weight: 500; line-height: 1.6; margin: 12px 0 18px; }
.range-collection small { font-size: 7px; line-height: 1.6; letter-spacing: .8px; }
.range-note { font-size: 10px; color: #969187; margin: 22px 0 0; }

@media (max-width: 1000px) and (min-width: 721px) {
  .hero-range { padding: 23px 16px 15px; }
  .range-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .range-item img { height: 116px; }
  .range-item span { font-size: 11px; }
  .range-item { padding-bottom: 9px; }
  .range-heading .eyebrow { font-size: 8px; }
  .range-collection strong { font-size: 12px; margin: 6px 0; }
  .range-collection > span { font-size: 20px; }
  .range-collection small { font-size: 6px; }
}
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 42px 6% 28px; }
  .hero-copy h1 { font-size: 45px; }
  .hero-range { margin: 0 5% 26px; padding: 22px 18px 17px; }
  .range-heading { padding-bottom: 12px; }
  .range-heading .eyebrow { font-size: 9px; letter-spacing: 1px; }
  .range-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 14px; }
  .range-item img { aspect-ratio: 1.2; }
  .range-item span { font-size: 12px; }
  .range-note { margin-top: 16px; }
}