:root {
  color-scheme: light;
  --ink: #2c3033;
  --dark: #191b1d;
  --blue: #004d84;
  --light: #f4f5f6;
  --line: #dce0e3;
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); font: 1rem/1.65 system-ui, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid #008bce; outline-offset: 4px; }
h1, h2, h3 { margin: 0 0 .65em; line-height: 1.12; }
h1 { font-size: clamp(2rem, 4vw, 3.6rem); letter-spacing: -.045em; }
h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -.03em; }
p { margin: 0 0 1em; }
.wrap { width: min(72rem, calc(100% - 2rem)); margin-inline: auto; }
.masthead, .contact { background: var(--ink); color: white; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .5rem; }
.bar img { width: clamp(4.5rem, 10vw, 7.8125rem); }
nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem 1.3rem; }
nav a, .contact a { color: white; }
nav a { text-decoration: none; font-weight: 600; }
nav a:hover { text-decoration: underline; }
.hero, .about { background: var(--light); }
.hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); padding-block: clamp(2.5rem, 7vw, 6rem); }
.hero-photo { width: 100%; }
.button { display: inline-block; background: var(--blue); color: white; padding: .65rem 1.15rem; border-radius: .35rem; font-weight: 650; text-decoration: none; }
.button:hover { background: #0061ad; }
.section { padding-block: clamp(2.5rem, 6vw, 5rem); }
.services { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(1.25rem, 4vw, 3rem); align-items: start; }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.gallery a { padding: .25rem; border: 1px solid var(--line); border-radius: .3rem; }
.gallery a:hover { border-color: var(--blue); }
.gallery img { width: 100%; }
.products { display: grid; grid-template-columns: .85fr 1fr 1fr; align-items: center; gap: 1rem; border-top: 1px solid var(--line); margin-top: 1.75rem; padding-top: 1.75rem; }
.products img { background: var(--light); border-radius: .35rem; }
.office { display: grid; grid-template-columns: minmax(0, 12.5rem) minmax(0, 38rem); align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
figure { margin: 0; }
figure img { border-radius: .35rem; }
figcaption { margin-top: .4rem; }
address, .footer { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-style: normal; }
.footer { justify-content: space-between; padding-block: 1rem; font-size: .875rem; }
@media (max-width: 720px) {
  .hero-grid, .services { grid-template-columns: 1fr; }
  .hero-photo { max-width: 460px; }
  .products { grid-template-columns: 1fr 1fr; }
  .products div { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  nav { font-size: .875rem; }
  .office { grid-template-columns: 1fr; }
}
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
nav { gap: .25rem .5rem; }
nav a { padding: .45rem .65rem; border-radius: .35rem; }
nav a[aria-current="page"] { background: var(--blue); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.secondary { font-weight: 650; }
.product-section { padding-block: 0 clamp(2.5rem, 6vw, 5rem); }
.hero + .product-section { padding-top: clamp(2.5rem, 6vw, 5rem); }
.products { margin-top: 0; }
.hero + .product-section .products { border-top: 0; padding-top: 0; }
.contact { background: var(--light); color: var(--ink); }
.contact address { display: grid; gap: .75rem; }
.contact a { color: var(--blue); }
.footer { border-top: 1px solid var(--line); }
@media (max-width: 480px) {
  nav { gap: .1rem; }
  nav a { padding-inline: .4rem; }
}
.contact-grid { display: grid; grid-template-columns: 1fr minmax(0, 1.6fr); gap: 2rem; align-items: start; }
.contact-form { background: white; border: 1px solid var(--line); border-radius: .5rem; padding: clamp(1rem, 4vw, 2rem); }
.contact-form label { display: block; font-weight: 600; }
.contact-form input, .contact-form textarea { display: block; width: 100%; margin: .25rem 0 1rem; padding: .65rem; border: 1px solid #777; border-radius: .3rem; font: inherit; }
.contact-form textarea { resize: vertical; }
.contact-form button { border: 0; cursor: pointer; font: inherit; font-weight: 650; }
@media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr; } }
.contact > .section { padding-top: clamp(1.5rem, 4vw, 3rem); }
.contact-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.contact-grid address { padding: 1rem; border: 1px solid var(--line); border-radius: .5rem; }
@media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr; gap: 1rem; } }