/* Roofing services hub: a neutral parent page for the six service journeys. */
.services-hub-page {
  --service-accent: var(--orange);
  --service-accent-hover: var(--orange-lo);
  --service-accent-soft: rgba(240, 82, 30, .08);
  --service-accent-border: rgba(240, 82, 30, .34);
  --service-accent-shadow: rgba(240, 82, 30, .24);
}

.services-hub-page main,
.services-hub-page .service-mobile-call {
  --orange: var(--service-accent);
  --orange-lo: var(--service-accent-hover);
}
.services-hub-page .nav-services__link[aria-current="page"],
.services-hub-page .menu-services__title[aria-current="page"] { color: var(--service-accent); }

/* Hero */
.hub-hero { padding-bottom: clamp(28px, 3vw, 44px); }
.hub-hero .subhero__panel { min-height: min(760px, calc(100svh - 28px)); }
.hub-hero .subhero__img { object-position: center 46%; }
.hub-hero .subhero__panel::after {
  background:
    linear-gradient(to top, rgba(10, 9, 8, .94) 0%, rgba(10, 9, 8, .61) 49%, rgba(10, 9, 8, .08) 100%),
    linear-gradient(to right, rgba(10, 9, 8, .62) 0%, rgba(10, 9, 8, .06) 72%);
}
.hub-hero .subhero__in { max-width: 920px; }
.hub-hero .h-xl { max-width: 12ch; font-size: clamp(3.3rem, 7vw, 6.4rem); }
.hub-hero .subhero__sub { max-width: 64ch; }
.hub-hero__eyebrow { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, .76); }
.hub-hero__eyebrow > span { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--service-accent); }
.hub-hero .subhero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hub-hero__note { color: rgba(255, 255, 255, .66); font: 400 .7rem/1.5 var(--f-mono); }

/* Six permanent service identities */
.hub-directory { background: var(--bg); }
.hub-directory .service-directory {
  overflow: hidden; border: 1px solid var(--rule); border-radius: 8px;
  background: var(--rule);
  gap: 1px;
}
.hub-directory .service-directory__item {
  --item-accent: var(--service-accent);
  min-height: 208px; padding: clamp(26px, 3vw, 38px);
  border: 0; background: var(--bg);
  grid-template-rows: auto auto 1fr auto; gap: 13px;
  color: var(--ink);
  transition: color .22s var(--ease), background-color .22s var(--ease), transform .22s var(--ease);
}
.hub-directory .service-directory__item::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: var(--item-accent); transform: scaleX(.2); transform-origin: left;
  transition: transform .24s var(--ease);
}
.hub-directory .service-directory__item[data-service="inspection"] { --item-accent: #f0521e; }
.hub-directory .service-directory__item[data-service="repair"] { --item-accent: #56636a; }
.hub-directory .service-directory__item[data-service="replacement"] { --item-accent: #55705e; }
.hub-directory .service-directory__item[data-service="claims"] { --item-accent: #4d7188; }
.hub-directory .service-directory__item[data-service="emergency"] { --item-accent: #b54d33; }
.hub-directory .service-directory__item[data-service="commercial"] { --item-accent: #3e6b55; }
.hub-directory .service-directory__item .eyebrow { color: var(--item-accent); }
.hub-directory .service-directory__item h3 { font-size: clamp(1.45rem, 2.2vw, 1.92rem); }
.hub-directory .service-directory__item p { max-width: 35ch; font-size: .91rem; line-height: 1.58; }
.hub-directory .service-directory__item > span {
  position: static; align-self: end; justify-self: end;
  display: block; color: var(--item-accent); font-size: 1.22rem;
}

/* Symptom router */
.hub-router { position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--paper); }
.hub-router::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background:
    linear-gradient(115deg, transparent 0 72%, rgba(240, 82, 30, .08) 72% 72.15%, transparent 72.15%),
    linear-gradient(115deg, transparent 0 84%, rgba(255, 255, 255, .045) 84% 84.1%, transparent 84.1%);
  pointer-events: none;
}
.hub-router__grid { display: grid; gap: clamp(46px, 7vw, 104px); }
.hub-router__copy { align-self: start; display: grid; gap: 20px; }
.hub-router__copy .h-lg { color: #fff; max-width: 15ch; }
.hub-router__copy .lede { color: rgba(245, 243, 239, .68); max-width: 49ch; }
.hub-router__copy .link { margin-top: 9px; width: fit-content; }
.hub-routes { border-top: 1px solid var(--rule-dark); }
.hub-routes a {
  min-width: 0; padding: clamp(19px, 2.4vw, 27px) 0;
  border-bottom: 1px solid var(--rule-dark); color: var(--paper); text-decoration: none;
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 22px;
  align-items: center; gap: clamp(10px, 1.7vw, 22px);
  transition: color .22s var(--ease), padding .22s var(--ease);
}
.hub-route__num { align-self: start; padding-top: 4px; color: rgba(245, 243, 239, .36); font: 400 .63rem/1 var(--f-mono); }
.hub-routes a > span:nth-child(2) { display: grid; gap: 5px; }
.hub-routes strong { font-size: .98rem; font-weight: 600; letter-spacing: 0; }
.hub-routes small { color: rgba(245, 243, 239, .53); font-size: .78rem; line-height: 1.45; }
.hub-routes b { color: rgba(245, 243, 239, .66); font: 400 .65rem/1.3 var(--f-mono); white-space: nowrap; }
.hub-routes svg { width: 20px; color: var(--service-accent); transition: transform .22s var(--ease); }

/* Roof systems */
.hub-systems { background: var(--bg-deep); }
.hub-systems__grid { display: grid; gap: clamp(34px, 5vw, 72px); align-items: stretch; }
.hub-systems__media {
  position: relative; overflow: hidden; min-height: 420px;
  border-radius: 8px; background: var(--night);
}
.hub-systems__media::after {
  content: ""; position: absolute; inset: 40% 0 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 9, 8, .88), transparent);
}
.hub-systems__media img { width: 100%; height: 100%; object-fit: cover; }
.hub-systems__media figcaption {
  position: absolute; z-index: 1; inset: auto clamp(22px, 3.3vw, 42px) clamp(22px, 3.3vw, 42px);
  color: #fff; display: grid; gap: 9px;
}
.hub-systems__media figcaption .eyebrow { color: rgba(255, 255, 255, .56); }
.hub-systems__media figcaption strong { max-width: 25ch; font-size: clamp(1.32rem, 2vw, 1.8rem); line-height: 1.12; }
.hub-systems__media figcaption small { color: rgba(255, 255, 255, .62); font: 400 .63rem/1.4 var(--f-mono); }
.hub-system-list { border-top: 1px solid var(--rule); }
.hub-system-list article {
  padding: clamp(25px, 3.2vw, 39px) 0; border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px;
}
.hub-system__icon {
  width: 44px; height: 44px; border: 1px solid var(--service-accent-border);
  border-radius: 8px; display: grid; place-items: center; color: var(--service-accent);
  background: var(--service-accent-soft);
}
.hub-system__icon svg { width: 22px; height: 22px; }
.hub-system-list article > div { display: grid; gap: 8px; }
.hub-system-list h3 { font-size: clamp(1.2rem, 1.7vw, 1.48rem); }
.hub-system-list p:last-child { max-width: 49ch; color: var(--ink-60); font-size: .9rem; line-height: 1.57; }
.hub-systems__more {
  margin-top: clamp(30px, 4vw, 52px); padding-top: 22px; border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 18px 32px;
}
.hub-systems__more p { color: var(--ink-60); font-size: .92rem; }
.hub-systems__more .link { flex: none; }

/* Shared process */
.hub-process { background: var(--bg); }
.hub-process .steps { margin-top: 0; }
.hub-process__foot {
  margin-top: clamp(30px, 4vw, 54px); padding-top: 22px; border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 22px 40px;
}
.hub-process__foot > p { max-width: 55ch; color: var(--ink-60); font-size: .92rem; }
.hub-process__foot > .link { flex: none; white-space: nowrap; }

/* Credentials */
.hub-credentials { background: var(--bg-deep); }

/* FAQ and final conversion */
.hub-faq { background: var(--bg); }
.hub-faq > .wrap > .head,
.hub-faq .faq__list { max-width: 940px; margin-inline: auto; }
.hub-final { padding-top: 0; background: var(--bg); }
.hub-final .endcta__panel { overflow: hidden; position: relative; }
.hub-final .endcta__panel::before {
  content: ""; position: absolute; right: -60px; bottom: -90px;
  width: 260px; aspect-ratio: 1; border: 1px solid rgba(240, 82, 30, .28);
  border-radius: 50%; box-shadow: 0 0 0 38px rgba(240, 82, 30, .035), 0 0 0 76px rgba(240, 82, 30, .025);
  pointer-events: none;
}
.hub-final .endcta__copy,
.hub-final .endcta__actions { position: relative; z-index: 1; }

@media (min-width: 720px) {
  .hub-directory .service-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 940px) {
  .hub-router__grid { grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr); }
  .hub-router__copy { position: sticky; top: calc(var(--header-h) + 36px); }
  .hub-systems__grid { grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr); }
}

@media (min-width: 1080px) {
  .hub-directory .service-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (hover: hover) {
  .hub-directory .service-directory__item:hover,
  .hub-directory .service-directory__item:focus-visible {
    padding-left: clamp(26px, 3vw, 38px); color: var(--item-accent);
    background: color-mix(in srgb, var(--item-accent) 5%, var(--bg)); transform: translateY(-2px);
  }
  .hub-directory .service-directory__item:hover::before,
  .hub-directory .service-directory__item:focus-visible::before { transform: scaleX(1); }
  .hub-directory .service-directory__item:hover > span,
  .hub-directory .service-directory__item:focus-visible > span { transform: translateX(3px); }
  .hub-routes a:hover,
  .hub-routes a:focus-visible { color: #fff; padding-left: 8px; }
  .hub-routes a:hover svg,
  .hub-routes a:focus-visible svg { transform: translateX(4px); }
}

@media (max-width: 899px) {
  .hub-hero .subhero__panel { min-height: 680px; }
  .hub-hero .subhero__panel::after {
    background: linear-gradient(to bottom, rgba(10, 9, 8, .34), rgba(10, 9, 8, .7) 42%, rgba(10, 9, 8, .94) 78%);
  }
  .hub-hero .subhero__in { padding: 82px 24px 30px; }
  .hub-hero .h-xl { font-size: clamp(3rem, 14vw, 4.45rem); }
  .hub-hero .subhero__actions { display: none; }
  .hub-process__foot { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 719px) {
  .hub-directory .service-directory { grid-template-columns: minmax(0, 1fr); }
  .hub-directory .service-directory__item { min-height: 196px; }
  .hub-routes a { grid-template-columns: 28px minmax(0, 1fr) 20px; }
  .hub-routes b { grid-column: 2; color: var(--service-accent); }
  .hub-routes svg { grid-column: 3; grid-row: 1 / span 2; }
  .hub-systems__media { min-height: 460px; }
  .hub-systems__more { align-items: flex-start; flex-direction: column; }
  .hub-process__foot > .link { width: fit-content; }
}

@media (max-width: 480px) {
  .hub-hero .subhero__panel { min-height: 650px; }
  .hub-hero .subhero__in { padding-inline: 20px; }
  .hub-hero__eyebrow { align-items: flex-start; line-height: 1.45; }
  .hub-directory .service-directory__item { min-height: 188px; padding: 24px 22px; }
  .hub-directory .service-directory__item:hover,
  .hub-directory .service-directory__item:focus-visible { padding-left: 22px; }
  .hub-systems__media { min-height: 410px; }
  .hub-system-list article { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
  .hub-system__icon { width: 39px; height: 39px; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-directory .service-directory__item,
  .hub-directory .service-directory__item::before,
  .hub-routes a,
  .hub-routes svg { transform: none !important; }
}