:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; color: #100e3f; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
.site { max-width: 880px; margin: 30px auto 60px; padding: 0 22px; }
.masthead { border-bottom: 1px solid #ff5c00; padding-bottom: 8px; }
.masthead img { display: block; max-width: 100%; height: auto; }
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: 35px; padding: 20px 0 25px; border-bottom: 1px solid #ff5c00; }
h1 { font-size: clamp(24px, 4vw, 29px); font-weight: 400; margin: 0 0 16px; }
p { line-height: 1.5; margin: 0 0 12px; }
.contact address { font-style: normal; line-height: 1.8; }
a { color: inherit; text-underline-offset: 3px; }
a:hover, a:focus-visible { color: #d64d00; }
.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 16px; padding: 24px 0; border-bottom: 1px solid #ff5c00; }
figure { margin: 0; }
figure img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
figcaption { line-height: 1.4; padding-top: 8px; }
.video { max-width: 560px; margin: 34px auto 0; aspect-ratio: 16 / 9; }
.video iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 680px) { .site { margin-top: 18px; } .intro { grid-template-columns: 1fr; gap: 8px; } .products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 360px) { .products { grid-template-columns: 1fr; } }