/* ==========================================================
   Homepage — Buena Park Auto Glass
   "Precision Glass" design system: engineered dark hero,
   frosted-glass surfaces, red + ice accent gradients.

   This file is linked from head.php, so it loads site-wide:
   the hero / intro rules are scoped to the homepage-only
   selectors (#hero.hero-section, .intro-form-section) while
   the header and footer rules are global on purpose.
   ========================================================== */

:root {
  /* Ink scale — blue-shifted rather than flat black so dark
     surfaces read as "engineered" instead of muddy. */
  --hp-ink: #080b12;
  --hp-ink-2: #0f1522;
  --hp-ink-3: #1a2233;

  /* Legacy aliases — earlier rules (and inner pages) referenced
     these names; kept so nothing that uses them goes unstyled. */
  --hp-navy: var(--hp-ink);
  --hp-navy-2: var(--hp-ink-3);

  --hp-accent: var(--primary-color, #e84545);
  --hp-accent-deep: #c3282b;
  --hp-ice: #4fc3f0;

  --hp-light-bg: #f5f7fa;
  --hp-slate: #59616f;
  /* Soft graphite for type on light surfaces — near-black at these
     weights reads blunt rather than elegant. */
  --hp-graphite: #29323f;
  /* Cool slate for the section's lead paragraph: sits between the
     graphite headings and the grey body copy, and picks up the ice
     accent instead of reading as flat black. */
  --hp-lead: #4a5a70;
  /* Same cool family, one step deeper — for headings on light cards. */
  --hp-lead-strong: #3a4a63;

  --hp-radius: 14px;
  --hp-radius-lg: 22px;

  --hp-shadow-sm: 0 6px 18px rgba(8, 11, 18, 0.06);
  --hp-shadow: 0 20px 45px rgba(8, 11, 18, 0.1);
  --hp-shadow-lg: 0 40px 90px rgba(8, 11, 18, 0.35);

  /* Fine blueprint grid, reused on the hero, CTA strap and footer */
  --hp-grid: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  --hp-grid-size: 58px 58px;
}

/* ==========================================================
   Header
   ========================================================== */

/* The base template makes .index-page .header transparent with
   white nav text (meant to float over a dark hero image). The
   logo art needs a light backdrop, so force a frosted-white
   header on every page instead. */
.header,
.index-page .header,
.index-page.scrolled .header {
  /* Near-opaque: the blur sits over a very dark hero, and anything
     more translucent tints the bar grey and shows a seam against
     the logo art. */
  --background-color: rgba(255, 255, 255, 0.97);
  --secondary-color: var(--hp-ink);
  --nav-color: var(--hp-ink);
  --nav-hover-color: var(--hp-accent);
  --nav-dropdown-color: var(--hp-ink);
  --nav-dropdown-hover-color: var(--hp-accent);
  padding: 12px 0;
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(8, 11, 18, 0.06);
  box-shadow: 0 6px 26px rgba(8, 11, 18, 0.05);
}

.scrolled .header {
  box-shadow: 0 10px 34px rgba(8, 11, 18, 0.12);
}

/* Top info bar — kept to a single line at every width so the fixed
   header below it (see .header{top}) never has to guess its height. */
.top-header-bar {
  display: flex;
  flex-wrap: nowrap;
  background:
    linear-gradient(90deg, rgba(var(--primary-color-rgb), 0.16) 0%, rgba(var(--primary-color-rgb), 0) 45%),
    linear-gradient(120deg, var(--hp-ink) 0%, var(--hp-ink-3) 100%);
  color: rgba(255, 255, 255, 0.82);
  padding: 0.5rem 0;
  font-size: 0.85rem;
  letter-spacing: 0.2px;
  white-space: nowrap;
  overflow: hidden;
  z-index: 998;
}

/* Hairline of brand colour under the info bar */
.top-header-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--hp-accent) 0%, rgba(var(--primary-color-rgb), 0.15) 40%, rgba(79, 195, 240, 0.35) 100%);
  opacity: 0.7;
}

.top-header-bar .top-bar-info span {
  margin-right: 1.5rem;
}

.top-header-bar .top-bar-info i,
.top-header-bar .top-bar-call i {
  color: var(--hp-accent);
  margin-right: 0.35rem;
}

.top-header-bar .top-bar-call a {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.4px;
  transition: color 0.25s ease;
}

.top-header-bar .top-bar-call a:hover {
  color: var(--hp-accent);
}

/* Header sits below the top bar. style.css's .header-nav-set had a
   margin-top/padding-bottom meant for the old mt-4-offset header —
   now redundant since positioning is handled via `top` below. The
   top bar is forced to a single line at every width, so this offset
   stays constant instead of being guessed per breakpoint. */
.header {
  top: 42px !important;
}

.header-nav-set {
  margin-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Logo */
.header .logo {
  min-width: 0;
}

.header .header-logo-img {
  height: 52px !important;
  max-height: 52px !important;
  width: auto;
  transition: transform 0.35s ease;
}

.header .logo:hover .header-logo-img {
  transform: scale(1.03);
}

/* Desktop nav: the template leaves .navmenu as a block, so the
   <ul> claims the full row and pushes the CTA onto a second line.
   Flex keeps the menu and the CTA on one baseline. */
@media (min-width: 1200px) {
  .header .navmenu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
  }

  /* Animated underline on top-level nav items */
  .navmenu > ul > li > a {
    position: relative;
    font-weight: 600;
    letter-spacing: 0.2px;
  }

  .navmenu > ul > li > a::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 9px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--hp-accent), var(--hp-ice));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
  }

  .navmenu > ul > li > a:hover::after,
  .navmenu > ul > li:hover > a::after,
  .navmenu > ul > li > a.active::after {
    transform: scaleX(1);
  }
}

/* Nav CTA button */
.header .btn-getstarted,
.header .btn-getstarted:focus {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--hp-accent) 0%, var(--hp-accent-deep) 100%);
  color: #fff !important;
  border-radius: 50px;
  padding: 0.7rem 1.5rem;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.2px;
  margin-left: 1.5rem;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(var(--primary-color-rgb), 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.header .btn-getstarted i {
  margin-right: 0.4rem;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  background: linear-gradient(135deg, var(--hp-ink-3) 0%, var(--hp-ink) 100%);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(8, 11, 18, 0.28);
}

/* Dropdown polish */
.navmenu .dropdown ul {
  border-radius: 14px;
  padding: 0.5rem 0;
  border: 1px solid rgba(8, 11, 18, 0.06);
  box-shadow: 0 24px 50px rgba(8, 11, 18, 0.18);
}

.navmenu .dropdown ul li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-left: 3px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, padding-left 0.25s ease;
}

.navmenu .dropdown ul li a:hover {
  border-left-color: var(--hp-accent);
  background: rgba(var(--primary-color-rgb), 0.06);
}

/* Scrollable header dropdowns */
.navmenu .dd-box-shadow.dd-scroll {
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--primary-color-rgb), 0.5) transparent;
}

.navmenu .dd-scroll::-webkit-scrollbar {
  width: 6px;
}

.navmenu .dd-scroll::-webkit-scrollbar-thumb {
  background: rgba(var(--primary-color-rgb), 0.45);
  border-radius: 6px;
}

@media (min-width: 1200px) {
  .navmenu .dropdown:hover > ul.dd-scroll {
    max-height: 60vh;
  }
}

@media (max-width: 1199px) {
  .top-header-bar {
    font-size: 0.78rem;
  }

  .top-header-bar .top-bar-info span {
    margin-right: 0.75rem;
  }
}

@media (max-width: 575px) {
  .header .header-tagline {
    display: none;
  }

  .top-header-bar .top-bar-info span:first-child {
    margin-right: 0;
  }
}

@media (max-width: 380px) {
  .top-header-bar .top-bar-info span:first-child {
    display: none;
  }
}

/* ==========================================================
   Hero Section
   ========================================================== */
#hero.hero-section {
  position: relative;
  isolation: isolate;
  padding-top: 10.5rem !important;
  padding-bottom: 7.5rem !important;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(var(--primary-color-rgb), 0.22) 0%, rgba(var(--primary-color-rgb), 0) 55%),
    radial-gradient(90% 80% at 6% 92%, rgba(79, 195, 240, 0.16) 0%, rgba(79, 195, 240, 0) 58%),
    linear-gradient(160deg, var(--hp-ink-3) 0%, var(--hp-ink-2) 42%, var(--hp-ink) 100%);
  color: #fff;
}

/* Blueprint grid, faded out towards the edges */
#hero .hero-grid {
  position: absolute;
  inset: 0;
  background-image: var(--hp-grid);
  background-size: var(--hp-grid-size);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 25%, transparent 78%);
  pointer-events: none;
  z-index: -1;
}

/* Soft ambient light blooms */
#hero .hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
  z-index: -1;
}

#hero .hero-glow-1 {
  top: -170px;
  right: -120px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.3) 0%, rgba(var(--primary-color-rgb), 0) 68%);
}

#hero .hero-glow-2 {
  bottom: -200px;
  left: -160px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(79, 195, 240, 0.22) 0%, rgba(79, 195, 240, 0) 70%);
}

#hero .container {
  position: relative;
  z-index: 1;
}

/* Short gradient rule above the H1 */
#hero .hero-content h1::before {
  content: "";
  display: block;
  width: 66px;
  height: 4px;
  border-radius: 4px;
  margin-bottom: 1.35rem;
  background: linear-gradient(90deg, var(--hp-accent) 0%, var(--hp-ice) 100%);
  box-shadow: 0 0 22px rgba(var(--primary-color-rgb), 0.6);
}

#hero .hero-content h1 {
  font-size: clamp(1.95rem, 1.05rem + 2vw, 2.8rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.9px;
  color: #ffffff;
  margin-bottom: 1.1rem;
}

#hero .hero-lead {
  font-size: 1.12rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  max-width: 44rem;
  margin-bottom: 1.9rem;
}

#hero .hero-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 2.35rem 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 0.9rem;
}

/* 7 items in a 2-column grid leaves a hole — let the last one span */
#hero .hero-checklist li:last-child {
  grid-column: 1 / -1;
}

#hero .hero-checklist li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 600;
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.028) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 0.72rem 0.9rem;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

#hero .hero-checklist li:hover {
  transform: translateY(-3px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(var(--primary-color-rgb), 0.45);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Circular check-icon badge, reused (smaller) in the intro checklist */
.check-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--hp-accent) 0%, var(--hp-accent-deep) 100%);
  color: #fff;
  font-size: 0.85rem;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(var(--primary-color-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.check-ico-sm {
  width: 22px;
  height: 22px;
  font-size: 0.75rem;
}

.hero-btn-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn-hero-cta,
.btn-hero-call {
  position: relative;
  overflow: hidden;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.2px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Shine sweep shared by both hero buttons */
.btn-hero-cta::after,
.btn-hero-call::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -140%;
  width: 60%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.32) 50%, transparent 100%);
  transform: skewX(-18deg);
  transition: left 0.65s ease;
  pointer-events: none;
}

.btn-hero-cta:hover::after,
.btn-hero-call:hover::after {
  left: 140%;
}

.btn-hero-cta {
  display: inline-block;
  background: linear-gradient(135deg, var(--hp-accent) 0%, var(--hp-accent-deep) 100%);
  color: #fff;
  padding: 1rem 2.1rem;
  box-shadow: 0 16px 34px rgba(var(--primary-color-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.btn-hero-cta:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(var(--primary-color-rgb), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Glass "call" button sitting on the dark hero */
.btn-hero-call {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  padding: 0.95rem 1.8rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.btn-hero-call i {
  color: var(--hp-accent);
}

.btn-hero-call:hover {
  color: #fff;
  border-color: rgba(var(--primary-color-rgb), 0.6);
  background: rgba(255, 255, 255, 0.13);
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
}

/* Hero image: glass frame + corner brackets + slow shine */
.hero-img-frame {
  position: relative;
  padding: 10px;
  border-radius: var(--hp-radius-lg);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.03) 60%, rgba(var(--primary-color-rgb), 0.1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: var(--hp-shadow-lg), 0 0 60px rgba(var(--primary-color-rgb), 0.12);
}

/* Technical corner brackets */
.hero-img-frame::before,
.hero-img-frame::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  pointer-events: none;
}

.hero-img-frame::before {
  top: -7px;
  left: -7px;
  border-top: 2px solid var(--hp-accent);
  border-left: 2px solid var(--hp-accent);
  border-top-left-radius: 10px;
}

.hero-img-frame::after {
  bottom: -7px;
  right: -7px;
  border-bottom: 2px solid var(--hp-ice);
  border-right: 2px solid var(--hp-ice);
  border-bottom-right-radius: 10px;
}

.hero-image-col .hero-img {
  width: 100%;
  border-radius: 16px;
  display: block;
}

.hero-img-sheen {
  position: absolute;
  inset: 10px;
  border-radius: 16px;
  overflow: hidden;
  pointer-events: none;
}

.hero-img-sheen::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -60%;
  width: 45%;
  height: 220%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.28) 50%, transparent 100%);
  transform: rotate(14deg);
  animation: hp-sheen 7s ease-in-out 1.5s infinite;
}

@keyframes hp-sheen {
  0%,
  62% {
    left: -60%;
  }
  92%,
  100% {
    left: 130%;
  }
}

.hero-floating-badge {
  position: absolute;
  left: 24px;
  bottom: -24px;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: linear-gradient(135deg, rgba(15, 21, 34, 0.94) 0%, rgba(26, 34, 51, 0.94) 100%);
  color: #fff;
  padding: 0.85rem 1.2rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.2px;
  max-width: 82%;
  animation: hp-float 5.5s ease-in-out infinite;
}

.hero-floating-badge i {
  color: var(--hp-accent);
  font-size: 1.4rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(var(--primary-color-rgb), 0.65));
}

@keyframes hp-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

/* Curved transition into the white section below */
.hero-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  line-height: 0;
  pointer-events: none;
}

.hero-divider svg {
  display: block;
  width: 100%;
  height: 110px;
}

.hero-divider path {
  fill: #ffffff;
}

/* ==========================================================
   Intro + Quote Form Section
   ========================================================== */
.intro-form-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 3.5rem !important;
  padding-bottom: 6rem !important;
  background:
    radial-gradient(70% 55% at 95% 0%, rgba(var(--primary-color-rgb), 0.06) 0%, rgba(var(--primary-color-rgb), 0) 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(79, 195, 240, 0.08) 0%, rgba(79, 195, 240, 0) 62%),
    linear-gradient(180deg, #ffffff 0%, var(--hp-light-bg) 100%);
}

.intro-form-section .container {
  position: relative;
  z-index: 1;
}

.intro-content p {
  font-size: 1.04rem;
  line-height: 1.8;
  color: var(--hp-slate);
  margin-bottom: 1.2rem;
}

/* Opening paragraph carries the section — set slightly larger and
   airier rather than heavier, so it leads without shouting. */
.intro-content > p:first-of-type {
  font-size: 1.16rem;
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: -0.1px;
  color: var(--hp-lead);
}

/* Light card that sits inside the white section rather than
   competing with the dark hero above it. */
.cta-strap {
  position: relative;
  overflow: hidden;
  border-radius: var(--hp-radius-lg);
  padding: 1.75rem 2rem 1.75rem 2.4rem;
  margin: 2.2rem 0;
  color: var(--hp-ink);
  background: #ffffff;
  border: 1px solid rgba(8, 11, 18, 0.07);
  box-shadow: 0 22px 50px rgba(8, 11, 18, 0.09);
}

/* Accent bar down the left edge */
.cta-strap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--hp-accent) 0%, var(--hp-accent-deep) 55%, var(--hp-ice) 100%);
}

/* Higher specificity than `.intro-content p`, which would otherwise
   win and impose the muted body-text size/colour on these labels. */
.cta-strap .cta-strap-title {
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.6;
  letter-spacing: -0.1px;
  margin-bottom: 1.35rem;
  color: var(--hp-lead-strong);
}

.cta-strap .cta-strap-phone {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.95rem;
  margin-bottom: 0;
  font-size: 0.95rem;
  color: var(--hp-slate);
}

/* "Call" reads as a stray word next to a button — set it as a small
   caps label so it frames the number instead. */
.cta-call-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(89, 97, 111, 0.8);
}

/* The phone number itself is the button */
.cta-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--hp-accent) 0%, var(--hp-accent-deep) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: 0.3px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(var(--primary-color-rgb), 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Translucent puck around the icon — gives the pill a focal point
   instead of a bare glyph floating against the fill. */
.cta-call-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  font-size: 0.88rem;
  flex-shrink: 0;
}

.cta-call-btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 32px rgba(var(--primary-color-rgb), 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Hours sit quietly beside the button, separated by a hairline */
.cta-hours {
  font-size: 0.9rem;
  color: var(--hp-slate);
  padding-left: 0.95rem;
  border-left: 1px solid rgba(8, 11, 18, 0.1);
}

.intro-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.intro-checklist li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 500;
  color: var(--hp-graphite);
  font-size: 0.9rem;
  background: #ffffff;
  border: 1px solid rgba(8, 11, 18, 0.08);
  border-radius: 50px;
  padding: 0.55rem 1.1rem 0.55rem 0.6rem;
  box-shadow: var(--hp-shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.intro-checklist li:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--primary-color-rgb), 0.3);
  box-shadow: 0 12px 26px rgba(8, 11, 18, 0.1);
}

/* ==========================================================
   Quote form card
   ========================================================== */
.quote-form {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border-radius: var(--hp-radius-lg);
  padding: 2.4rem 2rem 2rem;
  border: 1px solid rgba(8, 11, 18, 0.07);
  box-shadow: 0 30px 70px rgba(8, 11, 18, 0.14);
}

/* Gradient cap instead of a flat accent border */
.quote-form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--hp-accent) 0%, var(--hp-accent-deep) 45%, var(--hp-ice) 100%);
}

.quote-form h2 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--hp-lead-strong);
}

.quote-form h2::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--hp-accent), var(--hp-ice));
  margin: 0.65rem auto 0;
}

.quote-form .form-control {
  background: var(--hp-light-bg);
  border: 1px solid rgba(8, 11, 18, 0.09);
  border-radius: 10px;
  padding: 0.8rem 0.95rem 0.8rem 2.6rem;
  font-size: 0.96rem;
  color: var(--hp-ink);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.quote-form .form-control::placeholder {
  color: rgba(89, 97, 111, 0.75);
}

.quote-form .form-control:focus {
  background: #ffffff;
  border-color: var(--hp-accent);
  box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.12);
}

.quote-form .input-icon-wrap {
  position: relative;
}

.quote-form .input-icon-wrap > i {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(var(--primary-color-rgb), 0.85);
  font-size: 0.95rem;
  pointer-events: none;
  transition: color 0.25s ease;
}

.quote-form .input-icon-wrap-textarea > i {
  top: 1.15rem;
  transform: none;
}

/* Captcha row: image + refresh button + answer input, all on ONE line and all
   the same height so they line up. The image is drawn light (grey field, red
   digits) by verificationimage.php, so it needs no dark puck and no invert
   filter — it sits on the white card like any other input. */
.quote-form .captcha-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.quote-form .captcha-row .captcha-img-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 46px;
  margin: 0;
  padding: 0 2px;
  border-radius: 10px;
  background: var(--hp-light-bg);
  border: 1px solid rgba(8, 11, 18, 0.09);
  cursor: pointer;
  overflow: hidden;
}

/* Keep the image at its native 140x42 — upscaling in CSS blurs the digits. */
.quote-form .captcha-row .captcha-img-label img {
  display: block;
  width: 140px;
  height: 42px;
}

.quote-form .captcha-row .captcha-refresh {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(var(--primary-color-rgb), 0.35);
  border-radius: 10px;
  background: rgba(var(--primary-color-rgb), 0.07);
  color: var(--hp-accent-deep);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.quote-form .captcha-row .captcha-refresh:hover {
  background: rgba(var(--primary-color-rgb), 0.14);
  border-color: var(--hp-accent);
}

/* While a new question loads, spin the icon (not the whole box). */
.quote-form .captcha-row .captcha-refresh.is-loading {
  pointer-events: none;
}

.quote-form .captcha-row .captcha-refresh.is-loading i {
  display: inline-block;
  animation: hp-captcha-spin 0.6s linear infinite;
}

@keyframes hp-captcha-spin {
  to { transform: rotate(360deg); }
}

.quote-form .captcha-row .form-control {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding-left: 0.95rem;
}

/* Very narrow phones: let the answer box drop to its own line rather than
   squeezing it to a few characters. Desktop/laptop stays on one row. */
@media (max-width: 420px) {
  .quote-form .captcha-row {
    flex-wrap: wrap;
  }

  .quote-form .captcha-row .form-control {
    flex: 1 0 100%;
  }
}

/* Response messages — success green, error red (must not read as plain black) */
.quote-form #response,
.quote-form #response2 {
  margin-bottom: 0.75rem;
}

.quote-form #response .success,
.quote-form #response2 .success {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #1a8f4a;
}

.quote-form #response .error,
.quote-form #response2 .error {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: #c0341d;
}

.quote-form button[type="submit"] {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--hp-accent) 0%, var(--hp-accent-deep) 100%);
  border: none;
  border-radius: 50px;
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.3px;
  box-shadow: 0 16px 32px rgba(var(--primary-color-rgb), 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.quote-form button[type="submit"]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -140%;
  width: 55%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  transform: skewX(-18deg);
  transition: left 0.65s ease;
}

.quote-form button[type="submit"]:hover::after {
  left: 140%;
}

.quote-form button[type="submit"] i {
  margin-left: 0.4rem;
  transition: transform 0.3s ease;
}

.quote-form button[type="submit"]:hover {
  background: linear-gradient(135deg, var(--hp-ink-3) 0%, var(--hp-ink) 100%);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 20px 38px rgba(8, 11, 18, 0.3);
}

.quote-form button[type="submit"]:hover i {
  transform: translateX(4px);
}

/* ==========================================================
   Shared section header (services / why-us / credentials)
   ========================================================== */
.section-head {
  max-width: 54rem;
  margin: 0 auto 3rem;
  text-align: center;
}

.section-rule {
  display: block;
  width: 66px;
  height: 4px;
  border-radius: 4px;
  margin: 0 auto 1.3rem;
  background: linear-gradient(90deg, var(--hp-accent) 0%, var(--hp-ice) 100%);
  box-shadow: 0 0 22px rgba(var(--primary-color-rgb), 0.45);
}

.section-head h2 {
  font-size: clamp(1.65rem, 1.1rem + 1.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.5px;
  color: var(--hp-lead-strong);
  margin-bottom: 1rem;
}

.section-head .section-lead {
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--hp-slate);
  margin-bottom: 0;
}

.section-head-dark h2 {
  color: #ffffff;
}

.section-head-dark .section-lead {
  color: rgba(255, 255, 255, 0.68);
}

/* ==========================================================
   Services Section
   ========================================================== */
.services-section {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 6rem;
  background:
    radial-gradient(65% 45% at 100% 0%, rgba(79, 195, 240, 0.07) 0%, rgba(79, 195, 240, 0) 60%),
    linear-gradient(180deg, var(--hp-light-bg) 0%, #ffffff 55%);
}

.service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(8, 11, 18, 0.07);
  border-radius: var(--hp-radius-lg);
  box-shadow: var(--hp-shadow-sm);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--primary-color-rgb), 0.28);
  box-shadow: 0 28px 55px rgba(8, 11, 18, 0.14);
}

/* Source images vary between portrait and landscape — a fixed ratio
   plus object-fit keeps the grid even. */
.service-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--hp-light-bg);
}

.service-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.service-card:hover .service-card-media img {
  transform: scale(1.06);
}

/* Scrim so the white card edge doesn't cut hard against the photo */
.service-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 11, 18, 0) 55%, rgba(8, 11, 18, 0.28) 100%);
  pointer-events: none;
}

.service-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.5rem 1.5rem 1.6rem;
}

.service-card-body h3 {
  font-size: 1.14rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.2px;
  color: var(--hp-lead-strong);
  margin-bottom: 0.7rem;
}

.service-card-body p {
  font-size: 0.95rem;
  line-height: 1.72;
  color: var(--hp-slate);
  margin-bottom: 1.25rem;
}

/* Pushed to the card foot so links line up across a row.
   align-self keeps the anchor at content width — stretched, a
   wrapping label would strand the arrow at the far right edge. */
.service-card-link {
  margin-top: auto;
  align-self: flex-start;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--hp-accent);
  text-decoration: none;
  transition: color 0.25s ease;
}

/* Inline so the arrow trails the last word rather than floating */
.service-card-link i {
  display: inline-block;
  margin-left: 0.4rem;
  vertical-align: -1px;
  transition: transform 0.3s ease;
}

.service-card:hover .service-card-link i,
.service-card-link:hover i {
  transform: translateX(4px);
}

.service-card-link:hover {
  color: var(--hp-accent-deep);
}

/* ==========================================================
   Why Us Section (dark band)
   ========================================================== */
.whyus-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 5.5rem 0 6rem;
  color: #fff;
  background:
    radial-gradient(110% 80% at 82% 4%, rgba(var(--primary-color-rgb), 0.2) 0%, rgba(var(--primary-color-rgb), 0) 58%),
    radial-gradient(85% 70% at 4% 96%, rgba(79, 195, 240, 0.14) 0%, rgba(79, 195, 240, 0) 60%),
    linear-gradient(160deg, var(--hp-ink-3) 0%, var(--hp-ink-2) 45%, var(--hp-ink) 100%);
}

.whyus-grid {
  position: absolute;
  inset: 0;
  background-image: var(--hp-grid);
  background-size: var(--hp-grid-size);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 80%);
  pointer-events: none;
  z-index: -1;
}

.whyus-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
  z-index: -1;
}

.whyus-glow-1 {
  top: -160px;
  right: -140px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.26) 0%, rgba(var(--primary-color-rgb), 0) 68%);
}

.whyus-glow-2 {
  bottom: -180px;
  left: -150px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(79, 195, 240, 0.2) 0%, rgba(79, 195, 240, 0) 70%);
}

.whyus-section .container {
  position: relative;
  z-index: 1;
}

.whyus-card {
  height: 100%;
  padding: 1.85rem 1.6rem;
  border-radius: var(--hp-radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.028) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.whyus-card:hover {
  transform: translateY(-5px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(var(--primary-color-rgb), 0.42);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.whyus-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.15rem;
  border-radius: 14px;
  font-size: 1.35rem;
  color: #fff;
  background: linear-gradient(140deg, var(--hp-accent) 0%, var(--hp-accent-deep) 100%);
  box-shadow: 0 12px 26px rgba(var(--primary-color-rgb), 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Not headings: the source doc marks these as labels, not H3s */
.whyus-card-title {
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.2px;
  color: #ffffff;
  margin-bottom: 0.6rem;
}

.whyus-card-text {
  font-size: 0.94rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.66);
  margin-bottom: 0;
}

/* ==========================================================
   Credentials Section
   ========================================================== */
.credentials-section {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 6rem;
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(var(--primary-color-rgb), 0.05) 0%, rgba(var(--primary-color-rgb), 0) 60%),
    linear-gradient(180deg, #ffffff 0%, var(--hp-light-bg) 100%);
}

.credentials-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.credentials-grid li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 1.2rem;
  border-radius: var(--hp-radius);
  background: #ffffff;
  border: 1px solid rgba(8, 11, 18, 0.07);
  box-shadow: var(--hp-shadow-sm);
  font-size: 0.93rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--hp-graphite);
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.credentials-grid li:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--primary-color-rgb), 0.28);
  box-shadow: 0 16px 32px rgba(8, 11, 18, 0.1);
}

/* ==========================================================
   Areas We Serve Section (dark band)
   ========================================================== */
.areas-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 5.5rem 0 6rem;
  color: #fff;
  background:
    radial-gradient(100% 80% at 12% 6%, rgba(var(--primary-color-rgb), 0.18) 0%, rgba(var(--primary-color-rgb), 0) 58%),
    radial-gradient(85% 70% at 92% 92%, rgba(79, 195, 240, 0.15) 0%, rgba(79, 195, 240, 0) 60%),
    linear-gradient(160deg, var(--hp-ink-2) 0%, var(--hp-ink) 60%, var(--hp-ink-3) 100%);
}

.areas-grid-bg {
  position: absolute;
  inset: 0;
  background-image: var(--hp-grid);
  background-size: var(--hp-grid-size);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 20%, transparent 82%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 20%, transparent 82%);
  pointer-events: none;
  z-index: -1;
}

.areas-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
  z-index: -1;
}

.areas-glow-1 {
  top: -150px;
  left: -130px;
  width: 430px;
  height: 430px;
  background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.24) 0%, rgba(var(--primary-color-rgb), 0) 68%);
}

.areas-glow-2 {
  bottom: -170px;
  right: -140px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(79, 195, 240, 0.2) 0%, rgba(79, 195, 240, 0) 70%);
}

.areas-section .container {
  position: relative;
  z-index: 1;
}

/* Primary coverage area gets its own emphasised card */
.primary-area {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 32rem;
  margin: 0 auto 2.5rem;
  padding: 1.1rem 1.6rem;
  border-radius: 50px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(var(--primary-color-rgb), 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.primary-area-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 1.1rem;
  color: #fff;
  background: linear-gradient(140deg, var(--hp-accent) 0%, var(--hp-accent-deep) 100%);
  box-shadow: 0 10px 22px rgba(var(--primary-color-rgb), 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.primary-area-text {
  margin-bottom: 0;
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.72);
}

.primary-area-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  display: block;
  margin-bottom: 0.15rem;
}

.primary-area-text a {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.2px;
  transition: color 0.25s ease;
}

.primary-area-text a:hover {
  color: var(--hp-accent);
}

.areas-list-label {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1.4rem;
}

.areas-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.areas-list li a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  height: 100%;
  padding: 0.8rem 1.05rem;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.025) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform 0.28s ease, color 0.28s ease, border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}

.areas-list li a i {
  color: var(--hp-accent);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.areas-list li a:hover {
  transform: translateY(-3px);
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(var(--primary-color-rgb), 0.45);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
}

/* ==========================================================
   Testimonials Section
   ========================================================== */
.testimonials-section {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 6rem;
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(var(--primary-color-rgb), 0.05) 0%, rgba(var(--primary-color-rgb), 0) 60%),
    linear-gradient(180deg, #ffffff 0%, var(--hp-light-bg) 100%);
}

.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 2.5rem 1.75rem 1.75rem;
  border-radius: var(--hp-radius-lg);
  background: #ffffff;
  border: 1px solid rgba(8, 11, 18, 0.07);
  box-shadow: var(--hp-shadow-sm);
  transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}

.review-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--primary-color-rgb), 0.25);
  box-shadow: 0 26px 50px rgba(8, 11, 18, 0.12);
}

.review-quote-mark {
  position: absolute;
  top: 1.1rem;
  right: 1.4rem;
  font-size: 2.6rem;
  line-height: 1;
  color: rgba(var(--primary-color-rgb), 0.16);
  pointer-events: none;
}

.review-card blockquote {
  flex: 1 1 auto;
  margin: 0 0 1.5rem;
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--hp-slate);
}

.review-author {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(8, 11, 18, 0.08);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--hp-lead-strong);
}

.review-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(140deg, var(--hp-accent) 0%, var(--hp-accent-deep) 100%);
  box-shadow: 0 8px 18px rgba(var(--primary-color-rgb), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.review-author-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.review-author-link:hover,
.review-author-link:focus {
  color: var(--hp-accent);
  text-decoration: underline;
}

/* ==========================================================
   Schedule CTA Section (dark band)
   ========================================================== */
.schedule-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 5.5rem 0 6rem;
  color: #fff;
  background:
    radial-gradient(110% 85% at 50% 0%, rgba(var(--primary-color-rgb), 0.22) 0%, rgba(var(--primary-color-rgb), 0) 58%),
    radial-gradient(80% 70% at 8% 95%, rgba(79, 195, 240, 0.14) 0%, rgba(79, 195, 240, 0) 62%),
    linear-gradient(160deg, var(--hp-ink-3) 0%, var(--hp-ink-2) 45%, var(--hp-ink) 100%);
}

.schedule-grid-bg {
  position: absolute;
  inset: 0;
  background-image: var(--hp-grid);
  background-size: var(--hp-grid-size);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 18%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 18%, transparent 80%);
  pointer-events: none;
  z-index: -1;
}

.schedule-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
  z-index: -1;
}

.schedule-glow-1 {
  top: -190px;
  right: -120px;
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.26) 0%, rgba(var(--primary-color-rgb), 0) 68%);
}

.schedule-glow-2 {
  bottom: -180px;
  left: -150px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(79, 195, 240, 0.2) 0%, rgba(79, 195, 240, 0) 70%);
}

.schedule-section .container {
  position: relative;
  z-index: 1;
}

.schedule-call-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  max-width: 54rem;
  margin: 0 auto 3.25rem;
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.72);
}

.schedule-call-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--hp-accent) 0%, var(--hp-accent-deep) 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: 0.3px;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(var(--primary-color-rgb), 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.schedule-call-btn:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 20px 36px rgba(var(--primary-color-rgb), 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Map + weather embeds share one glass frame treatment */
.embed-frame {
  height: 100%;
  padding: 10px;
  border-radius: var(--hp-radius-lg);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.4);
}

.embed-frame-map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: 14px;
}

/* The widget script sets an inline height on its own anchor (~150px,
   then whatever it reports back). Stretching this frame to the map's
   height therefore left the widget floating in an empty bordered
   panel — hug the content instead and let the column top-align. */
.embed-frame-weather {
  height: auto;
  overflow: hidden;
}

.embed-frame-weather > a,
.embed-frame-weather iframe {
  width: 100% !important;
  border-radius: 14px;
  overflow: hidden;
}

/* Placeholder text shown only until the widget script swaps in its
   iframe (it then hides this via text-indent). */
.embed-frame-weather > a {
  display: block;
  padding: 1.1rem 0;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  font-size: 0.9rem;
}

/* Right-hand column: the weather widget is only ~150px tall, so the
   location card below it absorbs the remaining height and squares the
   column off against the map. */
.schedule-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100%;
}

.location-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  padding: 1.6rem 1.5rem;
  border-radius: var(--hp-radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.028) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.location-line {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0;
}

.location-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 11px;
  font-size: 0.92rem;
  color: #fff;
  background: linear-gradient(140deg, var(--hp-accent) 0%, var(--hp-accent-deep) 100%);
  box-shadow: 0 8px 18px rgba(var(--primary-color-rgb), 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.location-body {
  font-size: 0.94rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.location-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.15rem;
}

.location-body a {
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.2px;
  transition: color 0.25s ease;
}

.location-body a:hover {
  color: var(--hp-accent);
}

/* ==========================================================
   Footer
   ========================================================== */
.footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.75);
  padding-top: 4.5rem;
  background:
    radial-gradient(70% 60% at 88% 0%, rgba(var(--primary-color-rgb), 0.14) 0%, rgba(var(--primary-color-rgb), 0) 60%),
    radial-gradient(60% 60% at 5% 100%, rgba(79, 195, 240, 0.1) 0%, rgba(79, 195, 240, 0) 62%),
    linear-gradient(160deg, var(--hp-ink-2) 0%, var(--hp-ink) 100%);
}

/* Blueprint grid + gradient hairline along the top edge */
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--hp-grid);
  background-size: var(--hp-grid-size);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 55%);
  z-index: -1;
}

.footer::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--hp-accent) 0%, rgba(var(--primary-color-rgb), 0.2) 35%, rgba(79, 195, 240, 0.55) 100%);
}

.footer .footer-top {
  padding-bottom: 2.5rem;
}

/* Brand block
   ------------------------------------------------------------------
   logo.png is a 321x125 PNG with no alpha (white ground), so it can't
   sit bare on the dark footer — it gets a light plate instead. The
   <h2> is kept as the heading, with the logo as its content and the
   brand name carried by the img alt. */
.footer-brand .footer-logo {
  display: inline-block;
  margin-bottom: 1.35rem;
}

.footer h2.display-5 {
  margin: 0;
  font-size: 0;
  line-height: 0;
}

.footer h2.display-5 img {
  display: block;
  width: auto;
  height: 62px;
  padding: 10px 16px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.32s ease, box-shadow 0.32s ease;
}

.footer-brand .footer-logo:hover img {
  transform: translateY(-3px);
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.45);
}

.footer .footer-tagline {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.94rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}

/* Horizontal breathing room between the brand block and the Service
   Areas columns. Only at lg+, where the three blocks sit side by side
   — below that the column is full width and padding would just eat
   into the text. */
@media (min-width: 992px) {
  .footer-brand {
    padding-right: 2rem;
  }
}

/* Contact rows — replaces the old <strong>Label:</strong> + <br> run
   with a labelled icon row per detail, matching the location card in
   the homepage CTA band. */
.footer-contact {
  list-style: none;
  padding: 1.3rem 1.1rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
  border-radius: var(--hp-radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.022) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin: 0;
}

.footer-contact-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 10px;
  font-size: 0.85rem;
  color: #fff;
  background: linear-gradient(140deg, var(--hp-accent) 0%, var(--hp-accent-deep) 100%);
  box-shadow: 0 8px 16px rgba(var(--primary-color-rgb), 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.footer-contact-body {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
}

.footer-contact-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  margin-bottom: 0.1rem;
}

.footer-contact-body a {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.2px;
  transition: color 0.25s ease;
}

.footer-contact-body a:hover {
  color: var(--hp-accent);
}

/* .footer-col-title is a visual twin of the h4 used to head the
   second Service Areas sub-column. It is deliberately NOT a heading:
   repeating <h4>Service Areas</h4> would announce a second section
   that doesn't exist, so it's a <p> and aria-hidden. */
.footer h4,
.footer .footer-col-title {
  color: #fff;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  position: relative;
  padding-bottom: 0.7rem;
}

/* As a <p> it would inherit the body font and a 1.5 line-height,
   landing a few pixels below the real h4 beside it. */
.footer .footer-col-title {
  font-family: var(--heading-font);
  line-height: 1.2;
  margin-top: 0;
}

.footer h4::after,
.footer .footer-col-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--hp-accent), var(--hp-ice));
}

.footer .footer-links ul,
.footer .footer-areas ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul li,
.footer .footer-areas ul li {
  margin-bottom: 0.55rem;
}

.footer .footer-links ul li a,
.footer .footer-areas ul li a {
  display: inline-block;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.93rem;
  transition: color 0.25s ease, transform 0.25s ease;
}

.footer .footer-links ul li a:hover,
.footer .footer-areas ul li a:hover {
  color: #fff;
  transform: translateX(4px);
}

.footer-bottom {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1.6rem 0;
  margin-top: 1rem;
}

.footer-bottom p {
  margin-bottom: 0.8rem;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer-bottom p strong {
  color: #fff;
}

.footer-legal-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.6rem;
  padding: 0;
  margin: 0;
}

.footer-legal-links li a {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.88rem;
  transition: color 0.25s ease;
}

.footer-legal-links li a:hover {
  color: var(--hp-accent);
}

/* Scroll-to-top button */
.scroll-top {
  background: linear-gradient(135deg, var(--hp-accent) 0%, var(--hp-accent-deep) 100%) !important;
  border-radius: 50% !important;
  box-shadow: 0 12px 26px rgba(var(--primary-color-rgb), 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.scroll-top:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(var(--primary-color-rgb), 0.5);
}

/* ==========================================================
   Mobile responsiveness
   ========================================================== */
@media (max-width: 991px) {
  #hero.hero-section {
    padding-top: 9.5rem !important;
    padding-bottom: 8rem !important;
  }

  .hero-divider svg {
    height: 80px;
  }

  .credentials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .areas-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .embed-frame-map iframe {
    height: 340px;
  }

  .embed-frame-weather {
    min-height: 0;
  }
}

@media (max-width: 767px) {
  #hero.hero-section {
    padding-top: 9rem !important;
    padding-bottom: 6.5rem !important;
    text-align: center;
  }

  #hero .hero-content h1::before {
    margin-left: auto;
    margin-right: auto;
  }

  #hero .hero-lead {
    margin-left: auto;
    margin-right: auto;
  }

  #hero .hero-checklist {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .hero-btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-hero-cta,
  .btn-hero-call {
    justify-content: center;
    text-align: center;
  }

  .hero-image-col {
    margin-bottom: 3rem;
  }

  .hero-floating-badge {
    left: 50%;
    transform: translateX(-50%);
    bottom: -20px;
    max-width: 92%;
    font-size: 0.8rem;
    padding: 0.7rem 0.95rem;
    text-align: left;
    /* the float keyframes animate transform, which would cancel the
       centering translate — pin it instead on small screens */
    animation: none;
  }

  .hero-divider svg {
    height: 55px;
  }

  .intro-form-section {
    padding-bottom: 4rem !important;
  }

  /* Stays left-aligned: the accent bar runs down the left edge, so
     centred text would read as misaligned against it. */
  .cta-strap {
    padding: 1.5rem 1.25rem 1.5rem 1.7rem;
    text-align: left;
  }

  /* The hours wrap onto their own line here, where a left divider
     would point at nothing. */
  .cta-hours {
    padding-left: 0;
    border-left: 0;
  }

  .intro-checklist {
    justify-content: center;
  }

  .quote-form {
    padding: 1.75rem 1.35rem 1.5rem;
  }

  .services-section,
  .whyus-section,
  .credentials-section,
  .areas-section,
  .testimonials-section,
  .schedule-section {
    padding: 3.5rem 0 4rem;
  }

  .section-head {
    margin-bottom: 2.25rem;
  }

  .credentials-grid {
    grid-template-columns: 1fr;
  }

  .areas-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .primary-area {
    padding: 1rem 1.25rem;
    border-radius: var(--hp-radius-lg);
  }

  .schedule-call-line {
    margin-bottom: 2.25rem;
  }

  .embed-frame-map iframe {
    height: 300px;
  }

  .footer {
    text-align: center;
    padding-top: 3.5rem;
  }

  .footer h4::after,
  .footer .footer-col-title::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer .footer-links ul li a:hover,
  .footer .footer-areas ul li a:hover {
    transform: none;
  }

  /* These <li> are flex containers, so the footer's centred text-align
     never reaches the anchor — it would land at flex-start and sit left
     under a centred heading. */
  .footer .footer-links ul li {
    justify-content: center;
  }

  /* The whole footer centres on phones; centre the contact rows as a
     group but keep each label/value pair reading left-to-right. */
  .footer-contact {
    max-width: 22rem;
    margin: 0 auto;
  }

  .footer-contact li {
    justify-content: flex-start;
  }

  .footer-contact-body {
    text-align: left;
  }
}

/* Below 576px the two Service Areas sub-columns stack, so the second
   title would read as a repeated section mid-list — drop it there. */
@media (max-width: 575px) {
  .footer .footer-col-title {
    display: none;
  }
}

@media (max-width: 575px) {
  #hero.hero-section {
    padding-bottom: 5.5rem !important;
  }

  #hero .hero-lead {
    font-size: 1.02rem;
  }

  .btn-hero-cta {
    width: 100%;
    text-align: center;
    padding: 0.95rem 1rem;
    font-size: 0.98rem;
  }

  .intro-content > p:first-of-type {
    font-size: 1.1rem;
  }

  .cta-strap-phone a {
    font-size: 1.12rem;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero-img-sheen::before,
  .hero-floating-badge {
    animation: none;
  }

  .btn-hero-cta::after,
  .btn-hero-call::after,
  .quote-form button[type="submit"]::after {
    display: none;
  }

  #hero .hero-checklist li,
  .intro-checklist li,
  .service-card,
  .service-card-media img,
  .whyus-card,
  .credentials-grid li,
  .areas-list li a,
  .review-card,
  .schedule-call-btn,
  .cta-call-btn,
  .btn-hero-cta,
  .btn-hero-call,
  .header .btn-getstarted,
  .quote-form button[type="submit"],
  .scroll-top {
    transition: none;
  }
}