/* Homepage: Silver Wings Roofing. Branded, company-forward; same tokens as the funnels.
   Brand colour: the Silver Wings royal blue, sampled from the company tent (#2151AB). White on it is 7.6:1. */
:root { --brand: #2151ab; --brand-ink: #ffffff; }

/* On the blue, the main button turns white with blue text so it still stands out. */
.home-top .btn--primary, .home-hero .btn--primary { background: #fff; color: var(--brand); }
.home-top .btn--primary:hover, .home-hero .btn--primary:hover { background: #e8eefb; }
.home-hero .facts strong { color: inherit; }

.home-top { background: var(--brand); color: var(--brand-ink); border-bottom-color: color-mix(in srgb, var(--brand-ink) 18%, transparent); }
.home-top .top__phone { background: color-mix(in srgb, var(--brand-ink) 14%, transparent); color: var(--brand-ink); }
.home-top .top__phone svg { color: inherit; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: none; }
.brand img { height: 40px; width: auto; }
.brand__name { font: 400 1.375rem/1 var(--font-display); letter-spacing: var(--display-tracking); white-space: nowrap; }
.home-nav { display: none; }
@media (min-width: 1024px) {
  .home-nav { display: flex; gap: var(--space-6); }
  .home-nav a { color: inherit; font-weight: 500; font-size: 0.9375rem; text-decoration: none; padding: 12px 0; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1.5px no-repeat; transition: background-size 200ms ease; }
  .home-nav a:hover { background-size: 100% 1.5px; }
  .home-top .top__phone { background: none; }
}

.home-hero { background: var(--brand); color: var(--brand-ink); padding: var(--space-6) 0 var(--space-8); }
.home-hero__grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
.home-hero__text { display: grid; gap: var(--space-4); align-content: start; }
.home-hero__kicker { font-size: var(--t-small); opacity: 0.8; }
.home-hero h1 { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem); line-height: 1; }
.home-hero__lead { font-size: var(--t-lead); line-height: 1.5; max-width: 46ch; }
.home-hero .btn--secondary { background: color-mix(in srgb, var(--brand-ink) 14%, transparent); color: var(--brand-ink); }
.home-hero .facts li::before { background: var(--brand-ink); }
.home-hero__photo { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
.home-hero__photo img { object-position: 50% 40%; }
@media (min-width: 1024px) {
  .home-hero { padding: var(--space-9) 0; }
  .home-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: center; }
  .home-hero__text { grid-column: 1 / span 6; gap: var(--space-5); }
  .home-hero__photo { grid-column: 8 / span 5; }
  .home-hero__photo { aspect-ratio: 1 / 1; }
}

/* Services: a numbered two-by-two list, not a row of identical cards */
.svc { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); counter-reset: s; }
.svc li { counter-increment: s; position: relative; padding: var(--space-4) 0 0 56px; border-top: 1px solid var(--color-line); display: grid; gap: var(--space-2); }
.svc li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: var(--space-4); font: 400 1.75rem/1 var(--font-display); color: var(--color-accent); }
.svc h3 { font-size: var(--t-h3); }
@media (min-width: 900px) { .svc { grid-template-columns: 1fr 1fr; column-gap: var(--space-7); } }

.home-about { display: grid; gap: var(--space-7); }
.home-about__text { display: grid; gap: var(--space-4); align-content: start; max-width: 64ch; }
.inspector { display: grid; gap: var(--space-3); align-content: start; background: var(--color-ground); border: 1px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-5); }
.inspector__photo { width: 150px; height: 150px; border-radius: 50%; }
.inspector h3 { font-size: var(--t-h3); }
.inspector .btn { justify-self: start; }
@media (min-width: 1024px) {
  .home-about { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); }
  .home-about__text { grid-column: 1 / span 7; }
  .inspector { grid-column: 9 / span 4; }
}

.home-foot { background: var(--brand); color: var(--brand-ink); padding: var(--space-8) 0 var(--space-7); font-size: 0.9375rem; }
.home-foot__grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
.home-foot__brand { font: 400 1.5rem/1.2 var(--font-display); margin-bottom: var(--space-2); }
.home-foot__label { font-size: var(--t-label); font-weight: 600; opacity: 0.75; }
.home-foot .link { color: inherit; display: inline-block; padding: 10px 0; }
.home-foot__legal { grid-column: 1 / -1; opacity: 0.75; border-top: 1px solid color-mix(in srgb, var(--brand-ink) 18%, transparent); padding-top: var(--space-4); }
.home-foot__legal .link { padding: 0; text-decoration: underline; }
@media (min-width: 900px) { .home-foot__grid { grid-template-columns: 2fr 1fr 1fr; } }