:root {
  --navy: #082640;
  --blue: #5797C7;
  --steel: #d8e4ed;
  --ice: #f3f7fa;
  --ink: #082640;
}

.brand-header img {
  display: block;
  width: clamp(190px, 18vw, 280px);
  height: auto;
}

.brand-footer img {
  display: block;
  width: clamp(190px, 20vw, 300px);
  height: auto;
}

.brand-mark { display: none; }

.button {
  background: #082640;
}

.button:hover {
  background: #5797C7;
}

.button-light {
  background: #fff;
  color: #082640;
}

.hero h1 span,
.eyebrow {
  color: #5797C7;
}

.showcase,
.cta {
  background: #082640;
}

.cta {
  background: linear-gradient(135deg, #0c3557, #082640);
}

.showcase .eyebrow,
.cta .eyebrow {
  color: #8ebde0;
}

footer {
  background: #082640;
  color: #d8e4ed;
  border-top: 0;
}

footer p { color: #d8e4ed; }

.site-footer {
  display: block;
  padding: 0 max(6vw, 32px) 28px;
  font-size: 1rem;
}

.footer-shipping {
  display: flex;
  align-items: center;
  scroll-margin-top: 84px;
  gap: 20px;
  margin: 0 calc(max(6vw, 32px) * -1) 0;
  padding: 30px max(6vw, 32px);
  background: #5797C7;
  color: #fff;
}

.footer-shipping-flag { display: block; flex: 0 0 48px; width: 48px; height: auto; border-radius: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.16); }

.footer-shipping strong {
  display: block;
  font-family: Montserrat, sans-serif;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
  line-height: 1.25;
}

.footer-shipping p { margin: 4px 0 0; color: #fff; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr .85fr .8fr;
  gap: clamp(38px, 5vw, 82px);
  padding: 72px 0 58px;
}

.footer-about h2 {
  margin: 25px 0 18px;
  max-width: 520px;
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: clamp(1.45rem, 2.5vw, 2.15rem);
  line-height: 1.2;
}

.footer-about > p { max-width: 650px; margin: 0; line-height: 1.8; }
.footer-title { margin: 0 0 20px; color: #fff; font-family: Montserrat, sans-serif; font-size: 1.05rem; font-weight: 800; }

.footer-contact { display: flex; flex-direction: column; }
.footer-contact > a, .footer-location { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-bottom: 1px solid rgba(216,228,237,.18); }
.footer-location { margin: 0; font-style: normal; }
.footer-contact span { color: #93b3cc; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.footer-contact strong { color: #fff; font-size: .95rem; overflow-wrap: anywhere; }
.footer-contact a:hover strong { color: #8ec5ec; }

.footer-social > p:not(.footer-title) { margin: 0 0 22px; }
.social-links { display: grid; gap: 12px; }
.social-links a { display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 12px 16px; border: 1px solid rgba(216,228,237,.3); border-radius: 8px; color: #fff; background: rgba(255,255,255,.05); transition: .2s transform,.2s background,.2s border-color; }
.social-links a:hover { transform: translateY(-2px); background: #5797C7; border-color: #5797C7; }
.social-links svg { flex: 0 0 30px; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.social-links svg path { fill: currentColor; stroke: none; }
.social-links .social-dot { fill: currentColor; stroke: none; }
.social-links a > span { display: flex; flex-direction: column; line-height: 1.25; }
.social-links small { color: #a8c4d8; font-size: .72rem; font-weight: 600; }
.social-links a:hover small { color: #fff; }
.social-links strong { font-size: .94rem; }

.footer-bottom { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 28px; border-top: 1px solid rgba(216,228,237,.18); text-align: center; }
.footer-bottom p { margin: 0; }
.footer-principle { color: #fff; font-family: Manrope, Arial, sans-serif; font-size: 1rem; font-weight: 400; }
.footer-copyright { font-size: .76rem; opacity: .8; }

@media (max-width: 620px) {
  .brand-header img { width: 172px; }
  .brand-footer img { width: 220px; }
}

@media (max-width: 980px) {
  .site-footer { padding-left: 32px; padding-right: 32px; }
  .footer-shipping { margin-left: -32px; margin-right: -32px; padding-left: 32px; padding-right: 32px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .site-footer { padding-left: 22px; padding-right: 22px; }
  .footer-shipping { align-items: flex-start; margin-left: -22px; margin-right: -22px; padding: 25px 22px; }
  .footer-shipping-flag { flex-basis: 42px; width: 42px; }
  .footer-grid { grid-template-columns: 1fr; gap: 42px; padding: 56px 0 46px; }
  .footer-about { grid-column: auto; }
  .footer-principle { font-size: .92rem; }
}