/* GRS Roofing identity, matched to grsroofing.co on October 23, 2026.
   Original site: blue #0d508c, deeper blue #0a4479, black, and white.
   Layout remains Ironclad. All assets and rules are local to this project. */
:root {
  --grs-blue: #0d508c;
  --grs-blue-hover: #0a4479;
  --grs-blue-light: #b6d8f5;
  --grs-black: #161616;
  --grs-white: #fff;
}

body.design-ironclad {
  --ic-accent: var(--grs-blue);
  --ic-ink: #1b1b1b;
  --ic-paper: #f7f7f7;
  --ic-line: #d9dde1;
  --accent: var(--grs-blue);
}

/* The original black-and-blue logo stays legible on a clean white masthead. */
html[data-company="grs"] body.design-ironclad .site-header {
  background: #fffffff5;
  color: var(--grs-black);
  border-bottom: 1px solid #d9dde1;
}

html[data-company="grs"] body.design-ironclad .brand {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 0;
  line-height: 0;
  letter-spacing: normal;
}

html[data-company="grs"] .brand-logo {
  display: block;
  width: 166px;
  height: 74px;
  max-width: none;
  object-fit: contain;
}

html[data-company="grs"] body.design-ironclad .site-header :is(nav > a, .menu-toggle) {
  color: var(--grs-black);
}

html[data-company="grs"] body.design-ironclad .site-header nav > a:is(:hover, [aria-current="page"]) {
  color: var(--grs-blue);
}

/* A single generous tap target opens the visitor's phone app. */
html[data-company="grs"] body.design-ironclad .site-header .header-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 12px;
  min-height: 54px;
  padding: 10px 20px;
  border: 1px solid var(--grs-blue);
  border-radius: 3px;
  background: var(--grs-blue);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}

html[data-company="grs"] body.design-ironclad .site-header .header-phone:hover {
  background: var(--grs-blue-hover);
  border-color: var(--grs-blue-hover);
  box-shadow: 0 4px 12px #0d508c26;
  transform: translateY(-1px);
}

html[data-company="grs"] body.design-ironclad .site-header .header-phone:focus-visible {
  outline: 3px solid var(--grs-blue);
  outline-offset: 3px;
}

html[data-company="grs"] .header-call-icon {
  flex: 0 0 auto;
}

html[data-company="grs"] .header-call-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

html[data-company="grs"] body.design-ironclad .site-header .header-phone small {
  display: block;
  margin: 0;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .12em;
}

html[data-company="grs"] body.design-ironclad .menu-toggle span {
  background: var(--grs-black);
}

/* Blue actions and cool, neutral surfaces replace the orange and olive palette. */
html[data-company="grs"] body.design-ironclad .ic-estimate button[type="submit"] {
  background: var(--grs-blue);
  border-color: var(--grs-blue);
}

html[data-company="grs"] body.design-ironclad .ic-estimate button[type="submit"]:hover {
  background: var(--grs-blue-hover);
  border-color: var(--grs-blue-hover);
}

html[data-company="grs"] body.design-ironclad .ic-proof .verified-proof {
  background: #111820e8;
  border-color: #4687bd;
}

html[data-company="grs"] body.design-ironclad .ic-proof .grs-score {
  background: #101419;
  border-color: #41698c;
}

html[data-company="grs"] body.design-ironclad .ic-proof .grs-rating-num,
html[data-company="grs"] body.design-ironclad .grs-stars,
html[data-company="grs"] body.design-ironclad .ic-proof .proof-attribution a {
  color: var(--grs-blue-light);
}

html[data-company="grs"] .grs-trust-band {
  background: var(--grs-blue);
  color: var(--grs-white);
}

html[data-company="grs"] .grs-trust-band strong {
  color: var(--grs-white);
}

html[data-company="grs"] .grs-trust-note {
  color: #e6eff7;
}

/* Preserve the transparent BBB mark; reverse it on dark surfaces for contrast. */
html[data-company="grs"] .ic-proof img[src$="bbb-logo-transparent.png"],
html[data-company="grs"] .grs-trust-band img[src$="bbb-logo-transparent.png"] {
  filter: brightness(0) invert(1);
}

/* A light footer repeats the authentic logo without a boxed background. */
html[data-company="grs"] body.design-ironclad footer,
html[data-company="grs"] body.design-ironclad .footer-main {
  background: #f4f5f6;
  color: #333;
  border-top: 1px solid #d9dde1;
}

html[data-company="grs"] body.design-ironclad footer :is(h3, .brand) {
  color: var(--grs-black);
}

html[data-company="grs"] body.design-ironclad footer p {
  color: #565b60;
}

html[data-company="grs"] body.design-ironclad .footer-main a:not(.brand) {
  color: #333;
}

html[data-company="grs"] body.design-ironclad footer a:hover {
  color: var(--grs-blue);
}

html[data-company="grs"] body.design-ironclad footer .brand-logo {
  width: 215px;
  height: 108px;
}

html[data-company="grs"] body.design-ironclad .footer-bottom {
  background: #ebedef;
  color: #565b60;
  border-color: #d9dde1;
}

@media (max-width: 850px) {
  html[data-company="grs"] body.design-ironclad .site-header nav {
    background: #fff;
    border-bottom: 1px solid #d9dde1;
    box-shadow: 0 14px 20px #00000014;
  }
  html[data-company="grs"] .brand-logo {
    width: 142px;
    height: 64px;
  }
}

@media (max-width: 380px) {
  html[data-company="grs"] .brand-logo {
    width: 118px;
    height: 58px;
  }
  html[data-company="grs"] body.design-ironclad .site-header {
    gap: 9px;
  }
}

@media (max-width: 600px) {
  html[data-company="grs"] body.design-ironclad .site-header .header-phone {
    min-height: 48px;
    padding: 9px 10px;
    gap: 8px;
    font-size: 12px;
  }
  html[data-company="grs"] .header-call-icon {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 380px) {
  html[data-company="grs"] .header-call-icon {
    display: none;
  }
  html[data-company="grs"] .site-header .brand-logo {
    width: 108px;
  }
}