/* Shared sizing tokens, first applied to the homepage. */
:root {
  --alf-radius-button: 15px;
  --alf-radius-compact: 10px;
  --alf-header-hover: #e8f4ff;
  --alf-header-hover-text: #005ab0;
  --alf-control-height: 44px;
  --alf-control-large: 48px;
  --alf-control-padding: 16px;
  --alf-control-text: .875rem;
  --alf-control-icon: 18px;
  --alf-home-gutter: clamp(16px, 3vw, 40px);
  --alf-home-section-space: clamp(40px, 6vw, 88px);
}

@media (min-width: 768px) {
  :root {
    --alf-control-height: 46px;
    --alf-control-large: 52px;
    --alf-control-padding: 20px;
    --alf-control-text: .9375rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --alf-control-height: 48px;
    --alf-control-large: 54px;
    --alf-control-padding: 24px;
  }
}

#main :is(.button, .card-continue, .card-message),
.footer-support .button {
  box-sizing: border-box;
  min-height: var(--alf-control-height);
  padding: 8px var(--alf-control-padding);
  border-radius: var(--alf-radius-button);
  font-size: var(--alf-control-text);
  line-height: 1.35;
}

#main .hero-buttons .button {
  min-height: var(--alf-control-large);
}

#main .service-actions :is(.card-continue, .card-message) {
  padding-inline: clamp(10px, 1.2vw, 16px);
}

#main :is(.button, .card-continue, .card-message) .icon,
.footer-support .button .icon {
  width: var(--alf-control-icon);
  height: var(--alf-control-icon);
  flex: none;
}

#main :is(.service-favorite, .icon-button),
.header .nav-actions .icon-button,
.header .mobile-toggle {
  border-radius: var(--alf-radius-compact);
}

#main .hero-title {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.4rem);
  line-height: 1.08;
}

#main .hero-description {
  font-size: clamp(1rem, .93rem + .3vw, 1.1875rem);
  line-height: 1.55;
}

#main .section-heading h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.45vw, 2.75rem);
  line-height: 1.15;
}

#main .section-heading p {
  font-size: clamp(.9375rem, .88rem + .24vw, 1.0625rem);
  line-height: 1.55;
}

#main .section {
  padding-block: var(--alf-home-section-space);
}

@media (max-width: 767px) {
  #main .hero-buttons {
    flex-wrap: wrap;
    gap: 8px;
  }
  #main .service-actions {
    flex-wrap: wrap;
  }
}

/* Solid navigation surfaces and shared interaction states. */
body .header,
body .header :is(.header-glass-panel, .mega-menu, .alf-profile-menu) {
  background: #fff !important;
  border: 1px solid #e5ebf2;
  border-radius: 20px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 8px 24px rgb(22 36 59 / 8%) !important;
}

body .header .navigation {
  background: transparent;
  border-radius: inherit;
}

body .header :is(.header-glass-control, .mobile-toggle),
body .header .nav-actions :is(button, .header-glass-control) {
  background: #f4f8fd;
  color: #16243b;
  border-color: transparent;
  border-radius: var(--alf-radius-button);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body .header :is(.desktop-nav > a, .desktop-nav > button, .header-more-toggle, .header-more-panel a, .header-glass-control, .mobile-toggle):hover,
body .header .nav-actions :is(button, .header-glass-control):hover {
  background: var(--alf-header-hover) !important;
  color: var(--alf-header-hover-text) !important;
  box-shadow: none;
}

body .header :is(.desktop-nav > a, .desktop-nav > button, .header-more-toggle, .header-glass-control, .mobile-toggle):is(:active, [aria-expanded="true"], [aria-current="page"]),
body .header .nav-actions :is(button, .header-glass-control):is(:active, [aria-expanded="true"]) {
  background: var(--blue, #0081fb) !important;
  color: #fff !important;
  box-shadow: none;
}

body .header :is(a, button):focus-visible {
  outline: 2px solid #0064bf;
  outline-offset: 2px;
}


body .header :is(.desktop-nav > a, .desktop-nav > button, .header-more-toggle, .header-more-panel a, .header-glass-control, .mobile-toggle),
body .header .nav-actions :is(button, .header-glass-control),
#main :is(.button.small, .card-continue, .card-message) {
  border-radius: var(--alf-radius-compact);
}
/* The Services menu uses the same surfaces and states as the header. */
body .header .mega-menu {
  top: calc(100% + 8px);
  padding: clamp(12px, 2vw, 24px);
  gap: clamp(12px, 2vw, 24px);
  max-height: calc(100dvh - 100px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #a9bdd4 transparent;
}

body .header .mega-group {
  min-width: 0;
}

body .header .mega-group h3 {
  margin: 0 0 8px;
  padding: 0 8px;
  color: #16243b;
  font-size: clamp(.8125rem, 1.2vw, .9375rem);
  line-height: 1.35;
}

body .header .mega-group :is(a, button) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 8px;
  border-radius: var(--alf-radius-compact);
  color: #394a61;
  font-size: .875rem;
  line-height: 1.35;
  white-space: normal;
}

body .header .mega-group :is(a, button):is(:hover, :focus-visible) {
  background: var(--alf-header-hover);
  color: var(--alf-header-hover-text);
}

body .header .mega-group :is(a, button):active {
  background: var(--blue, #0081fb);
  color: #fff;
}

@supports selector(::-webkit-scrollbar) {
  body .header .mega-menu {
    scrollbar-width: auto;
    scrollbar-color: auto;
  }

  body .header .mega-menu::-webkit-scrollbar {
    width: 12px;
  }

  body .header .mega-menu::-webkit-scrollbar-track {
    background: transparent;
    margin-block: 12px;
  }

  body .header .mega-menu::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 10px;
    background: #a9bdd4;
    background-clip: padding-box;
  }
}
/* Keep the homepage service cards compact without shrinking their controls. */
#service-grid .service-body {
  padding: 12px 12px 8px;
}

#service-grid .service-actions {
  padding: 0 12px 12px;
  gap: 8px;
}

/* Keep the favorite hit area, with the heart as the only visible surface. */
#main #service-grid .service-favorite {
  color: #fff;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#main #service-grid .service-favorite .icon {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 50%)) drop-shadow(0 0 1px rgb(0 0 0 / 30%));
}

#main #service-grid .service-favorite[aria-pressed="true"] {
  color: #e32349;
}

#main #services .service-help > .button[data-free-quote] {
  border-radius: var(--alf-radius-compact);
}

#main #services .service-help > .button[data-free-quote]::before {
  mask-image: url("/assets/quote-help.svg");
}

body.homepage > button.chat-launcher {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
}

body.homepage > button.chat-launcher .icon {
  width: 24px;
  height: 24px;
}

#main .project-cta {
  background:
    radial-gradient(circle, rgb(255 255 255 / 21%) 1px, transparent 1.5px) right top / 16px 16px repeat,
    repeating-radial-gradient(circle at 96% 115%, transparent 0 23px, rgb(255 255 255 / 13%) 24px 25px, transparent 26px 45px),
    linear-gradient(115deg, #0081fb, #0069da);
}

/* The live shared quote stylesheet still carries the previous header pill. */
body.homepage .header .desktop-nav > a.fq-nav-entry:not(:hover):not(:active):not([aria-current="page"]) {
  background: transparent;
  color: inherit;
  font-weight: inherit;
}
body.homepage .header .desktop-nav > a.fq-nav-entry::after {
  content: none;
  animation: none;
}

body.homepage .button[data-free-quote]::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  mask: url("/assets/quote-help.svg") center / contain no-repeat;
}

#main #services .service-help > .button[data-free-quote]::before {
  mask-image: url("/assets/quote-help.svg");
}

/* Match the shared header's outer width at each breakpoint. */
body.homepage #main .hero-grid { width: calc(100% - 40px); max-width: 1400px; padding-inline: 10px; box-sizing: border-box; margin-inline: auto; }
body.homepage #main .hero-copy { max-width: none; }
@media (901px <= width <= 1440px) { body.homepage #main .hero-grid { width: calc(100% - 64px); max-width: 1160px; } }
@media (901px <= width <= 1100px) { body.homepage #main .hero-grid { width: calc(100% - 48px); } }
@media (max-width: 900px) { body.homepage #main .hero-grid { width: calc(100% - 24px); } }
@media (max-width: 600px) { body.homepage #main .hero-grid { width: calc(100% - 16px); } }

/* Give the headline and actions priority over the comparison artwork. */
body.homepage #main .hero-grid { gap: clamp(16px, 2vw, 28px); }
body.homepage #main .hero-work { max-width: 540px; margin-inline: auto 0; justify-self: end; }
body.homepage #main .hero-work .comparison-image { padding-inline: 0; object-position: center; }
@media (min-width: 768px) {
  body.homepage #main .hero-grid { grid-template-columns: minmax(0, 1fr) min(44%, 540px); }
}
@media (max-width: 767px) {
  body.homepage #main .hero-grid { grid-template-columns: minmax(0, 1fr); }
  body.homepage #main .hero-copy { order: 0; }
  body.homepage #main .hero-work { order: -1; max-width: 420px; margin-inline: auto; justify-self: center; }
  body.homepage #main .hero-work .comparison-image { object-position: center; }
}

/* Increase legibility and use the available space on wide displays. */
@media (min-width: 1600px) {
  body.homepage {
    --home-wide-detail: clamp(.875rem, .8rem + .08vw, 1rem);
    --home-wide-text: clamp(1rem, .9rem + .11vw, 1.1875rem);
    --home-wide-label: clamp(1.0625rem, .95rem + .12vw, 1.25rem);
    --home-wide-section: clamp(1440px, 60vw + 280px, 1700px);
  }
  body.homepage #main .wrap:not(.hero-grid), body.homepage .footer > .wrap { max-width: var(--home-wide-section); }
  body.homepage #main .section { padding-block: clamp(52px, 3.1vw, 68px); }
  body.homepage #main .hero-description { max-width: 46ch; font-size: clamp(1.25rem, 1.05rem + .19vw, 1.5rem); }
  body.homepage #main :is(.hero-trust-line, .hero-benefits li, .hero-team p, .hero-team p span) { font-size: var(--home-wide-text); }
  body.homepage #main .comparison-simple .compare-label { font-size: var(--home-wide-detail); }
  body.homepage #main :is(.section-heading p, .team-intro p, .experience-heading p, .home-reviews-heading p, .service-help p, .home-ordering-note p, .project-cta p),
  body.homepage #main :is(.ordering-step p, .home-review-card blockquote, .faq-list summary, .faq-list details p),
  body.homepage .footer .footer-brand p,
  body.homepage .footer .footer-grid a:not(.footer-brand > a:first-child) { font-size: var(--home-wide-text); line-height: 1.55; }
  body.homepage #main :is(.service-short, .ordering-step h3, .home-review-card h3, .team-grid h3),
  body.homepage .footer .footer-links h3 { font-size: var(--home-wide-label); line-height: 1.35; }
  body.homepage #main .service-headline { font-size: var(--home-wide-text); line-height: 1.45; }
  body.homepage #main :is(.reassurance-grid strong, .experience-rating strong) { font-size: var(--home-wide-label); }
  body.homepage #main :is(.reassurance-grid p, .reassurance-grid p > span, .experience-stat > span, .experience-marketplaces > span, .experience-rating span),
  body.homepage #main :is(.review-line, .review-line strong, .service-price, .service-price strong, .service-count, .ordering-number, .team-grid p),
  body.homepage #main :is(.home-review-overview > span, .home-review-location, .home-review-rating strong, .home-review-service, .home-review-source, .home-review-position, .home-review-expand),
  body.homepage .footer .footer-bottom :is(span, a) { font-size: var(--home-wide-detail); }
  body.homepage #main :is(.filter-tabs button, .catalog-toolbar input, .button, .card-continue, .card-message) { font-size: var(--home-wide-text); }
  body.homepage #main :is(.filter-tabs button, .catalog-toolbar input, .card-continue, .card-message) { min-height: 46px; }
  body.homepage #main :is(.card-continue, .card-message) { padding-inline: 8px; }
  body.homepage #main :is(.section-heading, .experience-heading, .home-reviews-heading, .project-cta) .eyebrow { font-size: var(--home-wide-detail); }
}