/* Modern commercial palette: confident navy, vivid blue and warm amber. */
:root{--ink:#071f36;--muted:#3b5368;--brand:#0969e8;--brand-dark:#004aa9;--warm:#f1f8ff;--line:#c7dced}
.site-header{background:rgba(255,255,255,.97);backdrop-filter:blur(12px)}.brand-mark{background:linear-gradient(135deg,#23b7ff,#0969e8)}.hero{background:radial-gradient(circle at 78% 18%,#0878ce 0,transparent 30%),linear-gradient(120deg,#061b31,#0a416c)}.hero-art{border-color:#4fbaff;background:linear-gradient(90deg,rgba(6,27,49,.72),rgba(6,27,49,.2)),url('../images/kitchen-ventilation-installation.webp') center/cover no-repeat;box-shadow:0 24px 65px rgba(3,31,57,.32)}.button{border-radius:999px;background:linear-gradient(135deg,#1686ff,#075ccc);border-color:#1686ff;box-shadow:0 8px 20px rgba(9,105,232,.28)}.button:hover{background:linear-gradient(135deg,#075ccc,#003f91);border-color:#075ccc;transform:translateY(-1px)}.button-secondary{background:rgba(255,255,255,.1);border-color:#91d2ff;box-shadow:none}.button-light{background:#fff;border-color:#fff;color:#071f36}.band{background:linear-gradient(135deg,#e4f5ff,#f9fcff)}.reviews{background:linear-gradient(135deg,#edf8ff,#f7fbff)}.service-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(7,31,54,.09);transition:transform .2s,box-shadow .2s}.service-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(7,31,54,.15)}.review-grid figure{border-top:4px solid #ffad0a;border-radius:14px;box-shadow:0 10px 24px rgba(7,31,54,.07)}.stars{color:#ef9900}.cta{background:linear-gradient(115deg,#0969e8,#063a88)}.card-grid .service-card:before{content:"";display:block;height:148px;margin:-28px -28px 24px;background:center/cover no-repeat}.card-grid .service-card:nth-child(1):before{background-image:url('../images/kitchen-exhaust-fan-repairs.webp')}.card-grid .service-card:nth-child(2):before{background-image:url('../images/commercial-exhaust-installation.webp')}.card-grid .service-card:nth-child(3):before{background-image:url('../images/commercial-kitchen-installation.webp')}.card-grid .service-card h3{margin-top:0}

/* Prominent, consistent RAMCO wordmark across every page. */
.brand {
  flex-shrink: 0;
  gap: 12px;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0.025em;
  white-space: nowrap;
}
.brand b {
  display: inline;
  margin-top: 0;
  font-size: inherit;
  font-weight: 800;
  letter-spacing: inherit;
}
.brand-mark {
  flex-shrink: 0;
  width: 54px;
  height: 60px;
  font-size: 2rem;
}
.brand small {
  font-size: 0.56rem;
  letter-spacing: 0.04em;
}
.header-inner {
  min-height: 108px;
}
.footer-brand {
  font-size: 1.5rem;
}
.footer-brand b {
  color: #61c4ff;
}
@media (max-width: 1150px) {
  .header-inner {
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 0;
  }
  .header-inner nav {
    order: 3;
    width: 100%;
    min-width: 0;
  }
  .nav-list {
    flex-wrap: wrap;
    gap: 8px 20px;
  }
  .nav-list a {
    display: block;
    padding: 7px 0;
  }
}
@media (max-width: 510px) {
  .brand {
    gap: 9px;
    font-size: clamp(1.3rem, 5.5vw, 1.65rem);
  }
  .brand-mark {
    width: 44px;
    height: 50px;
    font-size: 1.7rem;
  }
  .header-inner {
    gap: 12px;
  }
}

/* Supplied RAMCO logo, aligned with the desktop navigation. */
.site-header {
  background: linear-gradient(180deg, #092647, #031019);
  border-bottom: 3px solid #f5cd19;
}
.site-header .header-inner {
  min-height: 144px;
  gap: 24px;
  padding: 10px 0;
}
.header-brand {
  display: block;
  width: 440px;
  max-width: 100%;
  line-height: 0;
}
.brand-logo {
  display: block;
  width: 100%;
  height: auto;
}
.site-header .nav-list a {
  color: #fff;
  white-space: nowrap;
}
.site-header .nav-list a:hover,
.site-header .nav-list a[aria-current="page"] {
  color: #ffe027;
  border-color: #ffe027;
}
.site-header .call-link {
  color: #ffe027;
}
.site-header .call-link span {
  color: #dbeeff;
}
.site-header a:focus-visible {
  outline-color: #ffe027;
}
@media (min-width: 1151px) {
  .site-header .header-inner {
    flex-wrap: nowrap;
  }
  .site-header nav {
    margin-left: auto;
  }
  .site-header .nav-list {
    gap: 16px;
  }
}
@media (max-width: 1150px) {
  .site-header .header-inner {
    gap: 12px 24px;
  }
  .site-header nav {
    border-top: 1px solid #ffffff26;
    padding-top: 8px;
  }
}
@media (max-width: 600px) {
  .site-header .header-inner {
    justify-content: center;
  }
  .header-brand {
    width: min(440px, 100%);
  }
  .site-header .call-link {
    margin: 0;
  }
  .site-header .nav-list {
    justify-content: center;
    gap: 4px 16px;
  }
}

/* Accessibility and layout refinements shared by all five pages. */
img { max-width: 100%; }
.hero-grid > *, .prose-grid > *, .footer-grid > *, .card-grid > * { min-width: 0; }
.hero .eyebrow, .page-hero .eyebrow { color: #ffd45c; }
.hero .eyebrow span, .page-hero .eyebrow span { color: inherit !important; }
.button { background: #075ccc; border-color: #075ccc; font: inherit; font-weight: 800; cursor: pointer; }
.button-secondary { background: #103f66; border-color: #91d2ff; }
.button-light { background: #fff; border-color: #fff; color: #071f36; }
.button-light:hover { color: #fff; }
.stars, .page-reviews .stars { color: #966000; }
:focus-visible { outline: 3px solid #005fcc; outline-offset: 4px; }
.hero :focus-visible, .page-hero :focus-visible, .site-footer :focus-visible, .cta :focus-visible { outline-color: #ffdd00; }
main:focus { outline: none; }
.skip-link:focus { color: #000; outline: 3px solid #005fcc; }
.nav-list { overflow: visible; }
.nav-list a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom a, .site-footer li a { display: inline-block; min-height: 24px; }
@media (min-width: 1151px) { .header-brand { width: 350px; flex-shrink: 1; } }
@media (max-width: 600px) { .site-header .nav-list { gap: 4px 16px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .service-card:hover, .button:hover { transform: none; }
}

.service-photo { max-width: none; }
/* The header is opaque; avoid unnecessary backdrop compositing. */
.site-header { backdrop-filter: none; }
@media (min-width: 841px) { .hero-grid { padding-block: 48px; } }