/* BugNix Property Care - public site stylesheet.
   Ported verbatim from the approved design package at
   Theme/bugnix-html-layout/assets/css/style.css - only the image url()
   paths were rewritten to match this project's wwwroot layout
   (assets/images/* -> ../img/bugnix/*). Keep this file in sync with the
   source package when the design is updated. */
:root {
   --navy: #052b55;
   --navy2: #0a3768;
   --green: #169b2f;
   --blue: #0f5bd8;
   --light: #f6f9fc;
   --text: #0d2a4a;
   --muted: #5c6c7b;
   --red: #e03131;
   --amber: #b5721b;
   --line: #dfe7ef;
   --shadow: 0 18px 45px rgba(3, 37, 70, .12);
   --font-title: 'Poppins', Arial, Helvetica, sans-serif;
   --font-subtitle: 'Poppins', Arial, Helvetica, sans-serif;
   --font-body: 'Inter', Arial, Helvetica, sans-serif
}

* {
   box-sizing: border-box
}

/* The `hidden` attribute is toggled via JS (el.hidden = true/false) all over the quote wizards
   (e.g. .review-detail-row/.quiz-price-note for the Carpet Cleaning summary card's extras/stains
   rows and minimum-charge note) to show/hide elements - but any class rule below that sets its own
   `display` (e.g. `.review-detail-row { display: flex }`) has the same specificity as the
   browser's built-in `[hidden] { display: none }` UA rule and, being later in source order, wins,
   silently keeping the element visible regardless of the `hidden` property/attribute. This reset
   needs `!important` (not just higher specificity) since some already-`!important` component rules
   exist further down the file. Always debug a "still showing" element like this against computed
   style, not just el.hidden. */
[hidden] {
   display: none !important
}

html {
   scroll-behavior: smooth
}

body {
   margin: 0;
   font-family: var(--font-body);
   color: var(--text);
   background: #fff;
   line-height: 1.55
}

a {
   text-decoration: none;
   color: inherit
}

img {
   max-width: 100%;
   display: block
}

.container {
   width: min(1180px, 92%);
   margin: auto
}

.topbar {
   background: var(--navy);
   color: #fff;
   font-size: 14px
}

.topbar .container {
   display: flex;
   justify-content: flex-end;
   gap: 28px;
   align-items: center;
   min-height: 42px
}

.topbar a {
   opacity: .96
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 13px 22px;
   border-radius: 7px;
   font-weight: 800;
   border: 1px solid transparent;
   transition: .2s
}

.btn:hover {
   transform: translateY(-1px)
}

.btn:disabled {
   opacity: .5;
   cursor: not-allowed;
   transform: none
}

.btn-green {
   background: var(--green);
   color: #fff
}

.btn-outline {
   border-color: #8ca1b5;
   background: #fff;
   color: var(--navy)
}

.btn-blue {
   background: var(--blue);
   color: #fff
}

.site-header {
   background: #fff;
   position: sticky;
   top: 0;
   z-index: 20;
   border-bottom: 1px solid #edf1f5
}

.nav-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px;
   min-height: 82px
}

.logo {
   flex-shrink: 0
}

.logo img {
   width: 220px;
   height: 58px;
   object-fit: contain;
   object-position: left center
}

.menu {
   display: flex;
   gap: 20px;
   align-items: center;
   font-weight: 700
}

.menu a {
   padding: 29px 0 23px;
   position: relative;
   white-space: nowrap;
   flex-shrink: 0
}

.menu a.active:after,
.menu a:hover:after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 16px;
   height: 2px;
   background: var(--green)
}

.menu .quote {
   padding: 11px 18px;
   color: #fff;
   animation: quote-wobble 4s ease-in-out infinite
}

.menu .quote:after {
   display: none
}

@keyframes quote-wobble {
   0%, 82%, 100% {
      transform: rotate(0)
   }
   84% {
      transform: rotate(-6deg)
   }
   87% {
      transform: rotate(5deg)
   }
   90% {
      transform: rotate(-4deg)
   }
   93% {
      transform: rotate(3deg)
   }
   96% {
      transform: rotate(-1deg)
   }
}

@media (prefers-reduced-motion: reduce) {
   .menu .quote {
      animation: none
   }
}

.hero {
   position: relative;
   overflow: hidden;
   min-height: 565px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   align-content: center
}

.hero-inner {
   flex: 0 0 100%;
   width: 100%
}

.hero > .about-hero-grid {
   flex: 0 0 100%;
   max-width: min(1180px, 92%);
   margin-left: auto;
   margin-right: auto
}

.hero:before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, #fff 0 18%, rgba(255, 255, 255, .82) 30%, rgba(255, 255, 255, 0) 52%);
   z-index: 1
}

/* Old side-by-side text/image layouts rely on the left-fade overlay above to keep
   left-aligned text readable over the photo - a full-bleed banner with centered text
   (see .hero-content-center) doesn't need it and it would otherwise wash out the left
   half of the image. */
.hero-full-bleed:before {
   display: none
}

.hero-full-bleed:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom, transparent 60%, #fff 100%);
   z-index: 1
}

/* UpholsteryCleaning-hero.webp is a taller crop than the other full-bleed banners, so the
   shared 60%-100% fade leaves too much of the photo showing above the content below -
   start the fade earlier for a smoother blend into the page background. */
.upholstery-hero.hero-full-bleed:after {
   background: linear-gradient(to bottom, transparent 40%, #fff 100%)
}

/* @media (min-width:1301px) below repositions .hero-slides into a right-aligned 75%-width
   column for the old side-by-side text/image layout, and @media (max-width:1300px) further
   down takes it out of absolute positioning entirely so the image stacks above the text as
   a separate in-flow block on small screens - two-class specificity overrides both
   regardless of breakpoint so a full-bleed banner stays as one absolutely-positioned
   background layer, edge-to-edge, at every width. */
.hero-full-bleed .hero-slides {
   position: absolute;
   inset: 0;
   left: 0;
   right: 0;
   width: 100%;
   height: 100%;
   aspect-ratio: auto;
   order: 0
}

.hero.hero-full-bleed {
   overflow: hidden;
   min-height: 565px;
   display: flex;
   flex-direction: row;
   align-items: flex-start
}

@media (max-width: 780px) {
   .hero.hero-full-bleed {
      min-height: 0
   }

   .hero-content-center {
      padding-top: 20px;
      padding-bottom: 20px
   }

   /* FreeQuote/Index's hero content reads as sitting too high once .lead-sub is hidden and
      the divider's gap is tightened (see the .quote-intro-hero rules further down) - push it
      down a bit so it isn't hugging the top of the hero band. */
   .quote-intro-hero .hero-content-center {
      padding-top: 44px
   }

   /* Tighten further than the shared 20px .hero-content-center bottom padding above plus
      .contact-hero's own bottom padding - on small screens that stack still read as an
      oversized gap before "Contact Details". */
   .contact-hero {
      padding-bottom: 4px
   }

   .contact-hero .hero-content-center {
      padding-bottom: 4px
   }
}

.hero-slides {
   position: absolute;
   inset: 0;
   z-index: 0
}

.hero-slide {
   position: absolute;
   inset: 0;
   width: 100%;
   width: max-content;
   height: 100%;
   object-fit: cover;
   object-position: center;
   opacity: 0;
   transition: opacity 1.4s ease
}

.hero-slide.active {
   opacity: 1
}

/* Plain full-bleed hero image for a single static banner (no crossfade) - unlike
   .hero-slide, which relies on width:max-content (sized to the image's own intrinsic
   width) so multiple stacked slides can crossfade via opacity, this one just fills its
   container with no gaps and no responsive object-position tweaks to fight. */
.hero-banner-img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center
}

.hero-dots {
   position: absolute;
   left: 50%;
   bottom: 22px;
   transform: translateX(-50%);
   z-index: 2;
   display: flex;
   gap: 10px
}

.hero-dot {
   width: 10px;
   height: 10px;
   padding: 0;
   border: 2px solid rgba(255, 255, 255, .8);
   border-radius: 50%;
   background: rgba(255, 255, 255, .35);
   cursor: pointer;
   transition: background .2s ease, transform .2s ease
}

.hero-dot:hover {
   background: rgba(255, 255, 255, .7)
}

.hero-dot.active {
   background: var(--green);
   border-color: var(--green);
   transform: scale(1.15)
}

.hero-content {
   position: relative;
   z-index: 2;
   width: 48%;
   padding: 64px 40px 64px 0;
   background: linear-gradient(to right, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, 0) 100%)
}

.hero-content-center {
   width: 100%;
   padding: 50px 20px 64px;
   background: none;
   text-align: center
}

.hero-content-center .eyebrow {
   font-size: 20px;
   font-weight: 800
}

.hero-content-center .fade-line {
   margin-left: auto;
   margin-right: auto;
   background: linear-gradient(90deg, rgba(22, 155, 47, 0), var(--green), rgba(22, 155, 47, 0))
}

.hero-content-center .fade-line.blue {
   background: linear-gradient(90deg, rgba(15, 91, 216, 0), var(--blue), rgba(15, 91, 216, 0))
}

.hero-badges-row {
   text-align: center;
   margin: 0 0 28px
}

.hero-badges-row .mini-badge-row {
   justify-content: center;
   background: rgba(255, 255, 255, .85);
   border-radius: 12px;
   padding: 14px 20px;
   border-top: none;
   border-bottom: none;
   width: max-content;
   max-width: 100%;
   margin-left: auto;
   margin-right: auto
}

.eyebrow {
   font-size: 16px;
   font-weight: 600;
   letter-spacing: .06em;
   color: var(--green);
   text-transform: uppercase
}

.eyebrow.blue {
   color: var(--blue)
}

.about-hero-heading .eyebrow {
   font-weight: 800
}

#services .eyebrow {
   font-size: 18px;
   font-weight: 700
}

.fade-line {
   display: block;
   width: 128px;
   height: 3px;
   margin: 12px 0 18px;
   border-radius: 2px;
   background: linear-gradient(90deg, var(--green), rgba(22, 155, 47, 0))
}

.hero h1,
.page-hero h1 {
   font-size: 56px;
   line-height: 1.03;
   margin: 12px 0 20px;
   letter-spacing: -.04em
}

.hero h1 .blue {
   color: #0a5bbb
}

.hero h1 .green,
.page-hero h1 .green,
.contact-hero h1 .green {
   color: var(--green)
}

.lead {
   font-size: 20px;
   font-weight: 800;
   max-width: 530px
}

.sublead {
   color: #334f6a;
   max-width: 520px;
   font-size: 17px
}

.hero-actions {
   display: flex;
   gap: 16px;
   margin: 28px 0
}

.trust-row {
   display: flex;
   gap: 28px;
   flex-wrap: wrap;
   font-weight: 700;
   font-size: 14px
}

.trust-item {
   display: flex;
   gap: 9px;
   align-items: center;
   opacity: 0;
   animation: trust-item-in .6s ease-out forwards
}

.trust-item:nth-child(1) {
   animation-delay: .15s
}

.trust-item:nth-child(2) {
   animation-delay: .35s
}

.trust-item:nth-child(3) {
   animation-delay: .55s
}

@keyframes trust-item-in {
   from {
      opacity: 0;
      transform: translateX(-24px)
   }

   to {
      opacity: 1;
      transform: translateX(0)
   }
}

@media (prefers-reduced-motion: reduce) {
   .trust-item {
      opacity: 1;
      animation: none
   }
}

.fade-slide-top {
   opacity: 0;
   transform: translateY(-24px);
   transition: opacity .6s ease-out, transform .6s ease-out
}

.fade-slide-top.in-view {
   opacity: 1;
   transform: translateY(0)
}

@media (prefers-reduced-motion: reduce) {
   .fade-slide-top {
      opacity: 1;
      transform: none;
      transition: none
   }
}

.fade-slide-bottom {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity .6s ease-out, transform .6s ease-out
}

.fade-slide-bottom.in-view {
   opacity: 1;
   transform: translateY(0)
}

@media (prefers-reduced-motion: reduce) {
   .fade-slide-bottom {
      opacity: 1;
      transform: none;
      transition: none
   }
}

.fade-slide-in-left {
   opacity: 0;
   transform: translateX(-24px);
   transition: opacity .6s ease-out, transform .6s ease-out
}

.fade-slide-in-left.in-view {
   opacity: 1;
   transform: translateX(0)
}

@media (prefers-reduced-motion: reduce) {
   .fade-slide-in-left {
      opacity: 1;
      transform: none;
      transition: none
   }
}

.fade-slide-in-right {
   opacity: 0;
   transform: translateX(24px);
   transition: opacity .6s ease-out, transform .6s ease-out
}

.fade-slide-in-right.in-view {
   opacity: 1;
   transform: translateX(0)
}

@media (prefers-reduced-motion: reduce) {
   .fade-slide-in-right {
      opacity: 1;
      transform: none;
      transition: none
   }
}

.icon-circle {
   width: 30px;
   height: 30px;
   border: 2px solid var(--green);
   border-radius: 50%;
   display: grid;
   place-items: center;
   color: var(--green);
   font-weight: 900
}

/* Same idea as .icon-circle (theme-green icon glyph) but with no circular border/background -
   used where the badge itself already carries enough framing (e.g. mini-badge-row). */
.icon-plain {
   display: inline-grid;
   place-items: center;
   color: var(--green);
   font-weight: 900;
   flex-shrink: 0
}

.section {
   padding: 40px 0
}

/* Pulls the quote-card row up so it overlaps the bottom ~30% of the hero above it -
   .quote-card is roughly 460px tall (220px image + body), so -140px approximates a 30%
   overlap; position/z-index keeps the cards' own shadow/background layered above the
   hero's fade-to-white overlay instead of being hidden behind it. */
.section-overlap-hero {
   position: relative;
   z-index: 2;
   margin-top: -155px;
   padding-top: 0
}

@media (min-width: 781px) {
   .section-overlap-hero {
      margin-top: -165px
   }
}

@media (max-width: 780px) {
   /* The hero shrinks to fit its (now much shorter) text content on small screens
      (see .hero.hero-full-bleed's min-height:0 override), so the fixed -140px overlap
      tuned for the desktop hero would eat into the hero text instead of just the image -
      scale it down to a more modest overlap that still floats the cards up. */
   .section-overlap-hero {
      margin-top: -50px
   }

   /* FreeQuote/Index's plain-text hero (no image to overlap, just the "Choose a Service
      Category" divider right underneath) reads as too cramped with the shared -50px pull-up
      other pages use for their image hero - open it back out to a real gap instead. Scoped to
      the .section.section-overlap-hero combo (no "-tight"), unique to this page. */
   .section.section-overlap-hero {
      margin-top: 4px
   }
}

.section-overlap-hero + .section-tight {
   padding-top: 10px
}

/* ContactUs: a plain text hero (.contact-hero, no image to overlap) directly followed by the
   Contact Form section-tight - without an image hero there's no .section-overlap-hero pull-up
   to merge the two, so the stock 40px-bottom + 40px-top stacked padding reads as an oversized
   gap between the hero paragraph and "Contact Details". Tighten both the hero's own bottom
   padding (shared .section default is 40px) and this section-tight's top padding rather than
   introducing a negative margin (nothing to overlap here). */
.contact-hero {
   padding-bottom: 16px
}

.contact-hero + .section-tight {
   padding-top: 0
}

/* Unlike FreeQuote's plain-text hero (.quote-intro-hero), .contact-hero isn't a .hero/.page-hero,
   so its h1 never picks up their font-size/margin rules and instead falls back to the browser's
   default h1 top margin (~0.67em) - reads as an oversized gap under the green/blue eyebrow. */
.contact-hero h1 {
   margin: 8px 0 16px
}

/* The Contact Details / form columns (.cert-grid) share the site-wide 50px gap used for the much
   taller AboutUs certification cards - on this page's shorter, text-only left column that reads
   like a bigger gap than it should; tighten it for this page only. The form column is much
   taller than the Contact Details column, and .cert-grid's shared align-items:center (tuned for
   AboutUs's evenly-tall cards) vertically centers the short column against it instead of
   anchoring it to the top - override to start, scoped to this page only. */
.contact-hero + .section-tight .cert-grid {
   gap: 28px;
   align-items: start
}

/* Unlike Carpet Cleaning/Pest Control (whose mini-badge-row sits in its own section below the
   hero), Upholstery drops its badges straight into .hero-content-center (see
   .upholstery-hero .mini-badge-row above), which makes its hero content noticeably taller. The
   shared -155px/-165px pull-up was tuned for the shorter heroes, so applied here it rides up
   past the hero's own fade-to-white and over the badges/text instead of just the empty photo
   below them - scale it back to a lighter overlap. */
.upholstery-hero + .section-overlap-hero {
   margin-top: -60px
}

@media (min-width: 781px) {
   .upholstery-hero + .section-overlap-hero {
      margin-top: -70px
   }
}

@media (max-width: 780px) {
   .upholstery-hero + .section-overlap-hero {
      margin-top: -20px
   }
}

/* .hero is position:relative with no z-index of its own (z-index:auto), which still puts it
   ahead of any later PLAIN static sibling in paint order (positioned elements always paint
   above non-positioned in-flow content within the same stacking context, regardless of source
   order) - so the price-list form section right after Upholstery's step-dots was rendering
   underneath the tail end of the hero image/fade wherever the two visually overlap. Promote it
   into its own stacking context above the hero, same z-index as the step-dots strip itself. */
.upholstery-hero + .section-overlap-hero + .section-tight {
   position: relative;
   z-index: 2
}

.section-tight {
   padding: 40px 0
}

/* Service Areas page only: tighten the gap below the closing CTA, before the footer */
.page-service-areas .section-tight#contact {
   padding-bottom: 16px
}

/* On mobile, the Carpet Cleaning quote wizard's own trailing whitespace before the footer
   (40px section padding, on top of whatever's already below the last visible step's content)
   reads as an oversized gap - scoped to this form specifically so Upholstery/PestControl's own
   section-tight spacing elsewhere is untouched. */
@media (max-width: 780px) {
   .section-tight:has(form[data-carpet-quote-form]) {
      padding-bottom: 16px
   }
}

/* Badges/step-dots strip directly under the hero on PestControl - pull it closer to the
   hero image instead of leaving the full .section-tight top padding underneath it, and
   ride further up into the hero than the shared .section-overlap-hero overlap so the strip
   sits over the bottom of the hero image rather than just below it. */
.section-tight:has(> .container > .hero-badges-row) {
   padding-top: 10px;
   margin-top: -165px;
   position: relative;
   z-index: 2
}

@media (max-width: 780px) {
   .section-tight:has(> .container > .hero-badges-row) {
      margin-top: -55px
   }
}
/* CarpetCleaning/PestControl on small screens: fade the badge strip's top edge into the hero
   image above it instead of starting with a hard white edge. */
@media (max-width: 560px) {
   .carpet-cleaning-hero + .section-overlap-hero .hero-badges-row .mini-badge-row,
   .pest-control-hero + .section-overlap-hero .hero-badges-row .mini-badge-row {
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .85) 45%)
   }
}

/* PestControl's badges/step-dots strip and the pricing-panel form right after it both need
   to ride up into the hero like .section-overlap-hero already does for Index's service-card
   row - .section-tight's own padding-top (defined below) would otherwise win the cascade
   over .section-overlap-hero's padding-top:0, so restate it here after both. */
.section-tight.section-overlap-hero {
   padding-top: 0
}

.section-tight:has(+ .section-tight) {
   padding-bottom: 0
}

.section-tight + .section-tight {
   padding-top: 0
}

.section-head {
   text-align: center;
   max-width: 760px;
   margin: 0 auto 36px
}

#services {
   padding-bottom: 16px
}

#why {
   padding-top: 16px;
   padding-bottom: 16px
}

#contact {
   padding-top: 16px
}

.section-head h2 {
   font-size: 40px;
   line-height: 1.08;
   margin: 8px 0
}

.section-head p {
   color: var(--muted)
}

.service-grid {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 28px
}

.service-card {
   border: 1px solid var(--line);
   border-radius: 16px;
   background: #fff;
   box-shadow: var(--shadow);
   overflow: hidden
}

.service-image {
   height: 300px;
   object-fit: cover;
   width: 100%
}

.service-body {
   padding: 28px
}

.service-title-row {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 8px
}

.service-card h3 {
   font-size: 30px;
   margin: 0;
   color: var(--blue)
}

.service-card.pest h3 {
   color: var(--green)
}

.launch {
   display: inline-block;
   border: 1px solid #ff6969;
   color: var(--red);
   background: #fff5f5;
   border-radius: 5px;
   padding: 2px 7px;
   font-weight: 900;
   font-size: 9px
}

.checklist {
   list-style: none;
   padding: 0;
   margin: 18px 0 24px;
   display: grid;
   grid-template-columns: 1fr;
   gap: 6px
}

.checklist li {
   display: flex;
   align-items: flex-start;
   min-height: 24px
}

.checklist li:before {
   content: "✓";
   display: inline-grid;
   place-items: center;
   flex-shrink: 0;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   margin-right: 8px;
   background: var(--green);
   color: #fff;
   font-size: 12px;
   font-weight: 900
}

.pest .checklist li:before,
.service-detail-copy.blue .checklist li:before {
   background: var(--blue)
}

.tabs {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 12px;
   margin: 0 auto 26px
}

.tab-btn {
   border: 1px solid var(--line);
   background: #fff;
   padding: 10px 16px;
   border-radius: 999px;
   font-weight: 800;
   text-transform: uppercase;
   cursor: pointer
}

.tab-btn.active {
   background: var(--navy);
   color: #fff
}

.why {
   background: linear-gradient(110deg, #03284d, #073d72);
   color: #fff;
   border-radius: 18px;
   padding: 34px
}

.why h3 {
   text-align: center;
   color: #8bd323;
   margin-top: 0;
   font-size: 20px;
   letter-spacing: 1px
}

.why-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr)
}

.why-item {
   padding: 8px 28px;
   text-align: center;
   border-right: 1px solid rgba(255, 255, 255, .25)
}

.why-item:last-child {
   border: 0
}

.why-icon {
   font-size: 32px;
   margin-bottom: 9px
}

.why-item h4 {
   margin: 3px 0;
   letter-spacing: 1px
}

.why-item p {
   font-size: 14px;
   color: #e4edf6
}

.local-grid {
   display: grid;
   grid-template-columns: 1.1fr 1fr;
   gap: 44px;
   align-items: center
}

.local-grid img {
   border-radius: 14px;
   box-shadow: var(--shadow);
   width: 100%;
   height: 330px;
   object-fit: cover
}

.local-grid h2 {
   font-size: 40px;
   line-height: 1.05;
   margin: 6px 0 18px
}

.local-copy p {
   text-align: justify
}

.cta-strip {
   background: #eef6fb;
   border: 1px solid #e2ebf2;
   border-radius: 14px;
   padding: 24px 28px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px
}

.cta-strip h3 {
   font-size: 24px;
   margin: 0
}

.cta-strip p {
   margin: 2px 0 0
}

.cta-actions {
   display: flex;
   gap: 14px;
   flex-wrap: wrap
}

.cta-actions .btn {
   min-width: 220px
}

.footer {
   background: linear-gradient(110deg, #03284d, #052f5b);
   color: #fff;
   padding: 45px 0 18px
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
   gap: 38px
}

.footer-logo {
   width: 210px;
   background: #fff;
   border-radius: 8px;
   padding: 6px
}

.footer h4 {
   margin: 0 0 12px
}

.footer p,
.footer a {
   color: #e6eef5;
   font-size: 14px
}

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

.footer li {
   margin: 7px 0
}

.copyright {
   border-top: 1px solid rgba(255, 255, 255, .16);
   margin-top: 28px;
   padding-top: 15px;
   font-size: 12px;
   color: #d5e0e8;
   text-align: center
}

.page-hero {
   background: linear-gradient(90deg, #fff 0 36%, rgba(255, 255, 255, .92) 47%, rgba(255, 255, 255, 0) 66%), url('../img/bugnix/hero-auckland-van.webp') center right/cover no-repeat;
   min-height: 485px;
   display: flex;
   align-items: center
}

.page-hero .content {
   width: 48%
}

.story-grid {
   display: grid;
   grid-template-columns: 1fr 1.2fr;
   gap: 50px;
   align-items: center
}

.story-images {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px
}

.story-images img {
   height: 370px;
   width: 100%;
   object-fit: cover;
   border-radius: 14px
}

.story-copy h2 {
   font-size: 40px;
   margin: 6px 0 18px
}

.values-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 22px
}

.value-card {
   border: 1px solid var(--line);
   border-radius: 14px;
   padding: 28px;
   text-align: center;
   background: #fff
}

.value-card .big {
   font-size: 36px
}

.value-card h3 {
   margin: 10px 0 5px
}

.value-card p {
   color: var(--muted);
   font-size: 14px
}

.notice {
   border: 1px solid #86aef8;
   background: #f5f8ff;
   border-radius: 12px;
   padding: 20px;
   text-align: center;
   margin-top: 24px
}

.notice strong {
   color: var(--blue)
}

.about-hero {
   padding: 36px 0;
   overflow-x: hidden
}

.about-hero-grid {
   position: relative;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   min-height: 480px
}

.about-hero-copy {
   position: relative;
   z-index: 1;
   max-width: 56%;
   padding: 40px 40px 40px 0;
   background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .92) 85%, rgba(255, 255, 255, 0) 100%)
}

@media (min-width: 1367px) {
   .about-hero-copy {
      max-width: 620px
   }
}

@media (min-width: 1181px) {
   .hero-slides {
      left: auto;
      right: calc((100% - min(1180px, 92%)) / 2);
      width: calc(min(1180px, 92%) * 0.75)
   }

   .hero-slide {
      inset: auto;
      top: 50%;
      right: 0;
      left: auto;
      bottom: auto;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      transform: translateY(-50%) scale(1.3);
      object-fit: contain;
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 25%);
      mask-image: linear-gradient(90deg, transparent 0, #000 25%)
   }

   /* Service Areas page only: the shared 1.3x zoom above crops in too tight on
      service-areas-hero.webp's framing - back it off slightly, and anchor to the top of
      the hero instead of the shared rule's vertical centering. */
   .page-service-areas .hero-slide {
      top: 0;
      transform: scale(1.15)
   }
}

.about-hero-copy h1 {
   font-size: 46px;
   line-height: 1.08;
   margin: 10px 0 18px;
   letter-spacing: -.02em
}

.about-hero-copy p {
   color: var(--text);
   font-weight: 500;
   line-height: 1.6;
   margin: 14px 0;
   text-align: justify;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale
}

.about-hero-image {
   position: absolute;
   top: 0;
   left: 50%;
   width: 100vw;
   height: 100%;
   transform: translateX(-50%)
}

.about-hero-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: right center
}

@media (max-width: 1300px) {
   .about-hero-grid {
      min-height: 360px
   }

   .hero {
      min-height: 400px
   }

   .hero-slide {
      object-position: 15% center
   }
}

/* Must come after the unconditional base .about-hero-image/.about-hero-image img rules above
   (same specificity, so source order decides) - otherwise those base rules (position:absolute,
   full-bleed overlay behind .about-hero-copy) silently win at every width regardless of whether
   this media query matches, which is exactly what happened before this block was moved down here.
   Picks up immediately where the mobile stacked layout (max-width:1180px, further below) ends, so
   there's no gap where neither rule applies. Above this breakpoint .about-hero-image is a genuine
   flex sibling of .about-hero-copy in .about-hero-grid instead of an absolute overlay, naturally
   filling whatever width is left over after the text column. */
@media (min-width: 1181px) {
   .about-hero-grid {
      flex-wrap: nowrap
   }

   .about-hero-copy p {
      margin-right: 110px
   }

   /* Extends this flex item's own box further left than its allocated flex space, in under
      .about-hero-copy, instead of stopping right at that boundary - a narrower box here forced
      the cover crop below to trim into the actual illustration, not just the white margin.
      .about-hero-copy stays visible on top since it's position:relative with z-index:1 (a
      positioned, z-indexed element always stacks above a plain static one, regardless of DOM
      order), so the overlapped part sits harmlessly behind the text panel's own background. */
   /* Fixed height (not align-self:stretch) on purpose - stretch ties this to .about-hero-grid's
      row height, which grows whenever .about-hero-copy's text wraps onto more lines (e.g. the
      margin-right above narrowing the paragraphs), and object-fit:cover on a taller box scales
      the image up further to still cover it, reading as an unwanted zoom. A fixed height keeps
      the image's own size constant regardless of how tall the text column gets; align-items on
      .about-hero-grid still centers it vertically within whatever the row height ends up being. */
   .about-hero-image {
      position: static;
      top: auto;
      left: auto;
      transform: none;
      width: auto;
      height: 420px;
      flex: 1 1 0%;
      margin-left: -220px;
      min-width: 0
   }

   /* aboutusbanner.webp's left ~40% (x 0-442 of 1111px) is a solid white margin baked into the
      file - only x 442-1104 (~662x450, ratio ~1.47) is the actual illustration. cover + the right
      anchor crop that margin away instead of showing it. */
   .about-hero-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: right center
   }
}

.feature-strip {
   background: var(--light);
   padding: 46px 0
}

.feature-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr)
}

.value-prop-box .feature-grid {
   grid-template-columns: 1fr 1fr 1.35fr 1fr
}

/* The unconditional column/nowrap tweaks above out-specify the general responsive
   .feature-grid/.feature-item rules elsewhere in this file (2 classes beats 1, regardless
   of media query), which otherwise collapse the 4-column row to 2 then 1 column on small
   screens - without these matching overrides the row stays forced to 4 columns with
   non-wrapping headings and overflows the viewport. */
@media (max-width: 1180px) {
   .value-prop-box .feature-grid {
      grid-template-columns: 1fr 1fr
   }

   .value-prop-box .feature-item:nth-child(2n) {
      border-right: 0
   }

   .value-prop-box .feature-item {
      margin-bottom: 20px
   }
}

@media (max-width: 560px) {
   .value-prop-box .feature-grid {
      grid-template-columns: 1fr
   }

   .value-prop-box .feature-item {
      border-right: 0
   }

   .value-prop-box .feature-text h3 {
      white-space: normal
   }
}

.feature-item {
   padding: 0 26px;
   text-align: center;
   border-right: 1px solid var(--line)
}

.feature-item:last-child {
   border-right: 0
}

.feature-icon {
   width: 56px;
   height: 56px;
   margin: 0 auto 14px;
   border-radius: 50%;
   background: #fff;
   box-shadow: var(--shadow);
   display: grid;
   place-items: center;
   font-size: 22px;
   color: var(--green)
}

/* AboutUs's "3 Specialised Services" badge - the same Carpet Cleaning/Upholstery
   Cleaning/Pest Control SVGs used on the Quotation page's service cards, shown side by side
   in place of a single glyph so the icon itself represents the three services named below it. */
.feature-icon-services {
   position: relative
}

.feature-icon-badge {
   position: absolute;
   right: -4px;
   bottom: -4px;
   background: var(--green);
   color: #fff;
   font-size: 10px;
   font-weight: 800;
   line-height: 1;
   padding: 3px 5px;
   border-radius: 999px;
   box-shadow: var(--shadow)
}

.feature-item h3 {
   font-size: 17px;
   margin: 0 0 8px
}

.feature-item p {
   color: var(--muted);
   font-size: 14px;
   margin: 0
}

/* Separate each card's title from its description with a short divider, scoped to AboutUs's
   feature strip specifically since .feature-item/.feature-grid are shared with other pages'
   why-grid/values-grid sections that don't want this. */
.about-feature-strip .feature-item p {
   margin-top: 10px;
   padding-top: 10px;
   border-top: 1px solid var(--line)
}

/* AboutUs feature strip only: each card's h3 zooms in and back on a loop, one after another,
   with a pause between. All four items share one 4s cycle so the per-child animation-delay
   offsets where in that cycle each item's pulse (the first 15%) falls, spacing them 1s apart
   before the whole sequence repeats. */
.about-feature-strip .feature-item h3 {
   animation: feature-title-zoom 4s ease-in-out infinite
}

.about-feature-strip .feature-item:nth-child(1) h3 {
   animation-delay: 0s
}

.about-feature-strip .feature-item:nth-child(2) h3 {
   animation-delay: 1s
}

.about-feature-strip .feature-item:nth-child(3) h3 {
   animation-delay: 2s
}

.about-feature-strip .feature-item:nth-child(4) h3 {
   animation-delay: 3s
}

@keyframes feature-title-zoom {
   0%, 100% {
      transform: scale(1)
   }
   7.5% {
      transform: scale(1.18)
   }
   15% {
      transform: scale(1)
   }
}

@media (prefers-reduced-motion: reduce) {
   .about-feature-strip .feature-item h3 {
      animation: none
   }
}

.value-prop-box .feature-item {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 0 12px;
   text-align: left;
   border-right: 1px solid var(--line)
}

.value-prop-box .feature-text h3 {
   white-space: nowrap
}

.value-prop-box .feature-item:last-child {
   border-right: 0
}

.value-prop-box .feature-icon {
   flex-shrink: 0;
   margin: 0;
   background: none;
   box-shadow: none;
   border-radius: 0;
   color: var(--navy)
}

.value-prop-box .feature-icon.green {
   color: var(--green)
}

.value-prop-box .feature-icon.blue {
   color: var(--blue)
}

.value-prop-box .feature-icon svg {
   width: 38px;
   height: 38px
}

.value-prop-box .feature-text h3 {
   margin: 0 0 2px
}

.value-prop-box .feature-text p {
   line-height: 1.3
}

.cert-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 50px;
   align-items: center
}

.cert-grid.reverse .cert-visual {
   order: 2
}

.cert-visual {
   border-radius: 16px;
   border: 1px solid var(--line);
   background: var(--light);
   box-shadow: var(--shadow);
   padding: 40px;
   text-align: center
}

.cert-badge {
   width: 88px;
   height: 88px;
   margin: 0 auto 18px;
   border-radius: 50%;
   background: #fff;
   box-shadow: var(--shadow);
   display: grid;
   place-items: center;
   font-weight: 900;
   font-size: 15px;
   color: var(--navy)
}

.cert-visual strong {
   display: block;
   font-size: 16px;
   color: var(--navy)
}

.cert-visual span {
   display: block;
   color: var(--muted);
   font-size: 13px;
   margin-top: 8px
}

.icon-circle-lg {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: var(--navy);
   color: #fff;
   display: grid;
   place-items: center;
   font-size: 18px;
   font-weight: 900;
   margin-bottom: 14px
}

.icon-circle-lg.green {
   background: var(--green)
}

.cert-heading {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 14px
}

.cert-heading .icon-circle-lg {
   flex-shrink: 0;
   margin-bottom: 0
}

/* .cert-copy .cert-heading h2/h3 (2 classes + element) outranks .cert-copy h2 below (1 class +
   element) so this margin reset actually wins regardless of source order - align-items:center on
   .cert-heading centers the heading's flex-item box against the icon circle, not the visible
   text, and .cert-copy h2's own margin would otherwise leave the box taller on one side than the
   other, shifting the text off the icon's true center. */
.cert-copy .cert-heading h2,
.cert-copy .cert-heading h3 {
   margin: 0
}

.cert-copy h2 {
   font-size: 30px;
   font-weight: 700;
   margin: 0 0 14px
}

/* Separates the Pest Control Qualification section from the IICRC Certification section right
   above it - both are plain, unboxed .cert-grid rows with no other visual break between them. */
.pest-cert-section {
   border-top: 1px solid var(--line);
   padding-top: 40px
}

.cert-copy p {
   color: var(--muted);
   margin: 0 0 12px
}

.commitment-band {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 22px;
   align-items: center;
   background: var(--light);
   border-radius: 16px;
   padding: 20px 24px
}

.commitment-band img {
   width: 130px;
   height: 86px;
   object-fit: cover;
   border-radius: 12px
}

.commitment-band h3 {
   color: var(--green);
   margin: 0 0 6px;
   font-size: 18px;
   font-weight: 800
}

.commitment-band p {
   color: var(--muted);
   margin: 0
}

.commitment-band strong {
   color: var(--text)
}

.cta-dark {
   background: linear-gradient(110deg, #03284d, #052f5b);
   color: #fff;
   border-radius: 14px;
   padding: 28px 34px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   flex-wrap: wrap
}

.cta-dark h3 {
   font-size: 22px;
   margin: 0;
   color: #8bd323
}

.cta-dark p {
   margin: 4px 0 0;
   color: #d5e0e8
}

.cta-dark .btn-outline {
   background: transparent;
   border-color: rgba(255, 255, 255, .5);
   color: #fff
}

.cta-actions {
   display: flex;
   gap: 14px;
   flex-wrap: wrap
}

.mobile-toggle {
   display: none;
   background: none;
   border: 0;
   font-size: 28px
}

.hidden {
   display: none !important
}

.whatsapp-fab {
   position: fixed;
   right: 20px;
   bottom: 20px;
   z-index: 60;
   display: flex;
   align-items: center;
   gap: 10px;
   background: #25d366;
   color: #fff;
   font-weight: 800;
   font-size: 15px;
   padding: 14px 20px;
   border-radius: 999px;
   box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
   transition: .2s
}

.whatsapp-fab:hover {
   transform: translateY(-2px);
   box-shadow: 0 16px 34px rgba(0, 0, 0, .32)
}

.whatsapp-fab-icon {
   flex-shrink: 0
}

@media(max-width:1180px) {
   .topbar .container {
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      padding: 8px 0
   }

   .mobile-toggle {
      display: block
   }

   .menu {
      position: absolute;
      left: 0;
      right: 0;
      top: 82px;
      background: #fff;
      display: none;
      flex-direction: column;
      gap: 0;
      padding: 10px 5%;
      box-shadow: var(--shadow)
   }

   .menu.open {
      display: flex
   }

   .menu a {
      width: 100%;
      padding: 14px 0
   }

   .menu a.active:after,
   .menu a:hover:after {
      bottom: 4px
   }

   .hero {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      min-height: 0;
      overflow: visible
   }

   .hero:before {
      display: none
   }

   .hero-slides {
      position: relative;
      inset: auto;
      width: 100%;
      aspect-ratio: 611 / 450;
      order: -1
   }

   .hero-slide {
      object-fit: cover;
      object-position: 80% center
   }

   .hero-banner-img {
      object-position: left center
   }

   .hero-dots {
      position: static;
      transform: none;
      justify-content: center;
      margin: 12px 0 0
   }

   .page-hero {
      background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9)), url('../img/bugnix/hero-auckland-van.webp') center/cover
   }

   .hero-content,
   .page-hero .content {
      width: 100%;
      padding: 24px 0
   }

   .hero h1,
   .page-hero h1 {
      font-size: 46px
   }

   .hero .hero-content-center .eyebrow,
   .hero-content-center h1,
   .hero-content-center .lead-sub {
      text-shadow: 0 1px 4px #fff, 0 0 12px #fff, 0 0 24px rgba(255, 255, 255, .9), 0 0 40px rgba(255, 255, 255, .7);
      color: var(--navy);
      font-weight: 700
   }

   .service-grid,
   .local-grid,
   .story-grid,
   .cert-grid,
   .cert-grid.reverse .cert-visual {
      grid-template-columns: 1fr
   }

   .cert-grid.reverse .cert-visual {
      order: 0
   }

   /* AboutUs's IICRC section has .cert-visual (the badge card) before .cert-copy in source order
      (unlike the Pest Control section right below it, which already lists .cert-copy first) - on
      the single-column mobile layout that puts the badge above the heading/copy; push it after
      instead. Harmless on ContactUs's plain .cert-grid too, since its .cert-visual (the form) is
      already last in source order there. */
   .cert-grid:not(.reverse) .cert-visual {
      order: 1
   }

   .about-hero-grid {
      display: flex;
      flex-direction: column;
      min-height: 0
   }

   .about-hero-image {
      position: relative;
      top: auto;
      left: auto;
      width: 100%;
      height: auto;
      /* aboutusbanner.webp is 1111x450 but its left ~40% (x 0-442) is a solid white margin baked
         into the file - only x 442-1104 (~662x450, ratio ~1.47) is the actual illustration. Sizing
         the box to that content ratio, not the full file ratio, lets cover (below) crop the white
         margin away instead of either shrinking the whole file to fit (contain) or cropping an
         arbitrary window that could land back on the white area. */
      aspect-ratio: 662 / 450;
      transform: none;
      order: -1
   }

   .about-hero-image img {
      width: 100%;
      height: 100%;
      margin: 0;
      object-fit: cover;
      object-position: right center
   }

   .about-hero-copy {
      max-width: 100%;
      padding: 24px 0;
      background: none
   }

   .why-grid,
   .values-grid,
   .feature-grid {
      grid-template-columns: 1fr 1fr
   }

   .why-item:nth-child(2) {
      border-right: 0
   }

   .feature-item:nth-child(2) {
      border-right: 0
   }

   .feature-item {
      margin-bottom: 24px
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr
   }

   .story-images img {
      height: 300px
   }

   .cta-strip,
   .cta-dark {
      flex-direction: column;
      align-items: flex-start
   }

   .commitment-band {
      grid-template-columns: 1fr;
      text-align: center
   }

   .commitment-band img {
      width: 100%;
      height: 180px;
      margin: 0 auto
   }

   .checklist {
      grid-template-columns: 1fr
   }
}

@media(max-width:560px) {
   .logo img {
      width: 200px
   }

   .hero h1,
   .page-hero h1 {
      font-size: 39px
   }

   /* Tighten further on mobile, where the section's own reduced padding makes the 8px/16px
      desktop margin (see .contact-hero h1 above) read as relatively more whitespace. */
   .contact-hero h1 {
      margin: 4px 0 12px
   }

   /* FreeQuote/Index's intro hero is a plain text block (no hero image content competing for
      space), so even the shared 39px h1 above reads a touch large next to its shorter
      supporting copy - trim it and its immediate supporting text slightly further, scoped to
      this page only via the .quote-intro-hero class added to its <section>. */
   .quote-intro-hero h1 {
      font-size: 34px
   }

   .quote-intro-hero .hero-content-center .eyebrow {
      font-size: 17px
   }

   .quote-intro-hero .lead-sub {
      display: none
   }

   .carpet-cleaning-hero .lead-sub {
      display: none
   }

   .upholstery-hero .lead-sub {
      display: none
   }

   .pest-control-hero .lead-sub {
      display: none
   }

   /* UpholsteryCleaning-hero.webp is a very wide (~3:1) photo, so object-fit:cover inside
      the narrow, tall mobile hero crops it hard. Shortening the image layer brings its box
      closer to the photo's aspect ratio (= zoomed out); the mask fades its now-shorter
      bottom edge into the page instead of leaving a hard line. */
   .upholstery-hero .hero-banner-img {
      height: 82%;
      -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
      mask-image: linear-gradient(to bottom, #000 65%, transparent 100%)
   }

   /* Pull Upholstery's hero badges up closer to the heading (.lead-sub is hidden here). */
   .upholstery-hero .mini-badge-row {
      margin-top: 0;
      padding-top: 6px
   }
   /* With .lead-sub hidden on mobile, h1's own margin-bottom plus the divider's default
      top margin left an oversized gap before "Choose a Service Category" - close it up. */
   .quote-intro-hero .category-divider {
      margin-top: 10px;
      margin-bottom: 16px
   }

   .quote-intro-hero .category-divider-label {
      font-size: 15px
   }

   .section-head h2,
   .local-grid h2,
   .story-copy h2 {
      font-size: 33px
   }

   .why-grid,
   .values-grid,
   .feature-grid {
      grid-template-columns: 1fr
   }

   .why-item {
      border-right: 0;
      border-bottom: 1px solid rgba(255, 255, 255, .25)
   }

   .feature-item {
      border-right: 0
   }

   .about-hero-copy h1 {
      font-size: 34px
   }

   .about-hero-copy {
      padding: 16px 0
   }

   .service-image {
      height: 230px
   }

   .hero-content {
      display: flex;
      flex-direction: column
   }

   .hero-actions {
      order: 1;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center
   }

   .trust-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 12px
   }

   .story-images {
      grid-template-columns: 1fr
   }

   .story-images img {
      height: 250px
   }

   .whatsapp-fab {
      right: 16px;
      bottom: 40px;
      padding: 0;
      width: 56px;
      height: 56px;
      justify-content: center
   }

   .whatsapp-fab-text {
      display: none
   }

   .powered-by {
      display: block;
      margin-top: 4px
   }
}

/* Service Areas page: lift the intro paragraph off the hero photo behind it with a
   soft white glow, matching the readability treatment used elsewhere for hero text
   over a photo background (see the .hero-content-center text-shadow further up). */
.page-service-areas .hero-content p {
   text-shadow: 0 1px 4px #fff, 0 0 12px #fff
}

/* Service Areas page - lives inside .hero-content now, directly under the intro
   paragraph, so it just follows normal flow instead of needing a negative margin to
   pull it up into the hero. position:relative + z-index keeps it above .hero:before's
   fade overlay (z-index:1). */
.areas-service-icons {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 12px;
   margin-top: 12px;
   padding: 0;
   position: relative;
   z-index: 2
}

/* .hero's shared min-height:565px (sized for the other pages that reuse it) leaves a
   large dead band below this page's now-shorter text+icons column before the next
   section starts - hug the content instead. */
.page-service-areas .hero {
   min-height: 0
}

@media (min-width: 1367px) {
   .areas-service-icons {
      max-width: 560px
   }
}

.areas-service-item {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 14px;
   font-weight: 700;
   font-size: 13px;
   text-align: left
}

.areas-service-item .icon-circle-lg {
   margin-bottom: 0
}

.areas-service-item .icon-circle-lg.blue {
   background: var(--blue)
}

.map-container {
   position: relative;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: var(--shadow);
   margin-top: 8px
}

.map-container img {
   width: 100%;
   height: auto
}

/* Free Quote page */
.quote-badge-row {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 18px;
   flex-wrap: wrap;
   padding: 14px 0;
   background: var(--light);
   border-bottom: 1px solid var(--line)
}

.quote-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-weight: 700;
   font-size: 14px;
   color: var(--navy)
}

.quote-badge svg {
   color: var(--green);
   flex-shrink: 0
}

.quote-badge-break {
   display: none
}

.quote-phone-pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--navy);
   color: #fff;
   padding: 9px 20px;
   border-radius: 999px;
   font-weight: 800;
   font-size: 14px;
   transition: .2s
}

.quote-phone-pill:hover {
   background: var(--navy2)
}

.page-hero {
   padding: 56px 0 16px;
   text-align: center
}

.page-hero .eyebrow,
.hero .hero-content > .eyebrow {
   display: block;
   margin-bottom: 8px
}

.page-hero h1 {
   margin: 0 0 14px
}

.page-hero .lead-sub,
.hero .lead-sub {
   max-width: 640px;
   margin: 0 auto;
   color: var(--muted);
   font-size: 17px
}

.category-divider {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px;
   margin: 34px 0 30px;
   color: var(--green);
   font-weight: 800;
   letter-spacing: .06em;
   font-size: 13px;
   text-transform: uppercase
}

.category-divider svg {
   color: var(--green)
}

.category-divider-label {
   color: var(--navy);
   font-size: 17px
}

.divider-fade {
   flex: 1;
   max-width: 90px;
   height: 1px
}

.divider-fade-left {
   background: linear-gradient(to left, var(--line), transparent)
}

.divider-fade-right {
   background: linear-gradient(to right, var(--line), transparent)
}

.quote-card {
   position: relative;
   border: 10px solid #fff;
   border-radius: 16px;
   background: #fff;
   box-shadow: var(--shadow);
   text-align: center;
   transition: transform .2s, box-shadow .2s
}

.quote-card.blue {
   z-index: 1
}

.quote-card.blue:after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: -16px;
   height: 3px;
   background: linear-gradient(to right, transparent, rgba(15, 91, 216, .65) 50%, transparent);
   filter: blur(3px);
   z-index: -1
}

.quote-card.green {
   z-index: 1
}

.quote-card.green:after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: -16px;
   height: 3px;
   background: linear-gradient(to right, transparent, rgba(22, 155, 47, .65) 50%, transparent);
   filter: blur(3px);
   z-index: -1
}

.quote-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 24px 55px rgba(3, 37, 70, .18)
}

.quote-card-image-wrap {
   position: relative
}

.quote-card-image-wrap img {
   height: 220px;
   object-fit: cover;
   width: 100%;
   border-radius: 16px 16px 0 0;
   display: block
}

.quote-card-icon {
   position: absolute;
   left: 50%;
   bottom: 0;
   transform: translate(-50%, 50%);
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: var(--navy);
   color: #fff;
   display: grid;
   place-items: center;
   box-shadow: var(--shadow);
   border: 4px solid #fff
}

.quote-card.accent .quote-card-icon {
   background: var(--green)
}

.quote-card-icon.green {
   background: var(--green)
}

.quote-card-icon.blue {
   background: var(--blue)
}

.quote-card.accent .quote-card-icon.blue {
   background: var(--blue)
}

.quote-card-body {
   padding: 44px 26px 30px
}

.quote-card-body h3 {
   font-size: 22px;
   margin: 0 0 10px
}

.quote-card-body p {
   color: var(--muted);
   font-size: 14px;
   margin: 0 0 22px;
   min-height: 60px
}

.quote-card-body .btn {
   width: 100%
}

.value-prop-box {
   background: var(--light);
   border-radius: 16px;
   padding: 22px 26px
}

.brand-banner {
   background: linear-gradient(110deg, #03284d, #052f5b);
   color: #fff;
   padding: 26px 0
}

.brand-banner .container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   flex-wrap: wrap
}

.brand-banner-item {
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 700;
   font-size: 15px
}

.brand-banner-item svg {
   color: #8bd323;
   flex-shrink: 0
}

.brand-banner-item.right {
   justify-content: flex-end
}

.text-green {
   color: #8bd323
}

.container-narrow {
   max-width: 760px
}

.form-card {
   border: 1px solid var(--line);
   border-radius: 16px;
   background: #fff;
   box-shadow: var(--shadow);
   padding: 36px
}

.lead-modal-overlay {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(5, 43, 85, .55);
   align-items: center;
   justify-content: center;
   z-index: 100;
   padding: 20px
}

.lead-modal-overlay.open {
   display: flex
}

.lead-modal {
   position: relative;
   width: min(480px, 100%);
   max-height: 90vh;
   overflow-y: auto;
   background: #fff;
   border-radius: 16px;
   box-shadow: var(--shadow);
   padding: 32px
}

.lead-modal-close {
   position: absolute;
   top: 16px;
   right: 16px;
   display: grid;
   place-items: center;
   width: 32px;
   height: 32px;
   border: 0;
   border-radius: 50%;
   background: var(--light);
   color: var(--muted);
   cursor: pointer;
   transition: .2s
}

.lead-modal-close:hover {
   background: var(--line);
   color: var(--navy)
}

.lead-modal h2 {
   text-align: center;
   margin: 0 0 10px
}

.lead-modal-next {
   width: 100%
}

.lead-modal-sub {
   text-align: center;
   color: var(--muted);
   font-size: 14px;
   margin: 0 0 24px
}

.lead-modal-break {
   display: none
}

@media (max-width: 560px) {
   .lead-modal-break {
      display: block
   }
}

.lead-modal-note {
   color: var(--muted);
   font-size: 13px;
   margin: 4px 0 24px
}

.lead-modal .form-group {
   margin-bottom: 18px
}

.form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin-bottom: 18px
}

.form-group {
   display: flex;
   flex-direction: column;
   gap: 8px
}

.form-group[hidden] {
   display: none
}

.property-type-toggle {
   display: flex;
   gap: 10px
}

.property-type-btn {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   border: 1.5px solid var(--line);
   border-radius: 10px;
   background: #fff;
   padding: 12px 14px;
   font-weight: 700;
   font-size: 14px;
   color: var(--navy);
   cursor: pointer;
   transition: .15s
}

.property-type-btn svg {
   flex-shrink: 0
}

.property-type-btn:hover {
   border-color: var(--blue)
}

.property-type-btn.selected {
   border-color: var(--blue);
   background: #eef6fb;
   color: var(--blue)
}

.form-group.full {
   grid-column: 1 / -1
}

.form-group label {
   font-weight: 700;
   font-size: 14px;
   color: var(--navy)
}

.form-group input,
.form-group select,
.form-group textarea {
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 12px 14px;
   font-family: var(--font-body);
   font-size: 15px;
   color: var(--text)
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
   outline: 2px solid var(--blue);
   outline-offset: 1px
}

.form-group textarea {
   resize: vertical;
   min-height: 120px
}

.field-error {
   color: var(--red);
   font-size: 13px
}

.terms-agree-row {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   margin: 4px 0
}

.terms-agree-row input[type="checkbox"] {
   width: 18px;
   height: 18px;
   flex: none;
   margin-top: 2px;
   accent-color: var(--blue);
   cursor: pointer
}

.terms-agree-row label {
   font-size: 14px;
   font-weight: 400;
   color: var(--text);
   cursor: pointer
}

.terms-link {
   border: none;
   background: none;
   padding: 0;
   font: inherit;
   font-weight: 700;
   color: var(--blue);
   text-decoration: underline;
   cursor: pointer
}

.terms-link:hover {
   color: var(--green)
}

.faq-modal.terms-modal {
   width: min(1100px, 95vw);
   padding: 24px
}

.terms-modal h2 {
   margin: 0 0 16px;
   padding-right: 40px;
   font-size: 20px
}

.terms-pdf-frame {
   height: 70vh;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 10px;
   overflow: hidden
}

.terms-pdf-frame iframe {
   width: 100%;
   height: 100%;
   border: 0
}

.pest-question-invalid {
   border: 1px solid var(--red);
   box-shadow: 0 0 0 3px rgba(220, 38, 38, .08)
}

.address-lookup {
   position: relative
}

.address-suggestions {
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   z-index: 20;
   margin-top: 4px;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 8px;
   box-shadow: var(--shadow);
   max-height: 220px;
   overflow-y: auto
}

.address-suggestion {
   display: block;
   width: 100%;
   text-align: left;
   border: none;
   background: none;
   padding: 10px 14px;
   font-size: 14px;
   color: var(--text);
   cursor: pointer
}

.address-suggestion:hover {
   background: var(--light)
}

.form-alert {
   border-radius: 10px;
   padding: 14px 18px;
   margin-bottom: 24px;
   font-weight: 700
}

.form-alert.success {
   background: #eafbee;
   border: 1px solid #b7ecc3;
   color: #0f7a26
}

.form-alert.error {
   background: none;
   border: none;
   padding: 0;
   color: var(--red)
}

.step-dots {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   margin: 0 auto 36px
}

/* CarpetCleaning/PestControl: the same 1px rule .mini-badge-row uses (see Upholstery's hero
   badges), drawn above the step-dots strip instead of under the badges. */
.carpet-cleaning-hero + .section-overlap-hero .step-dots,
.pest-control-hero + .section-overlap-hero .step-dots {
   border-top: 1px solid var(--line);
   padding-top: 16px
}

.carpet-cleaning-hero + .section-overlap-hero .hero-badges-row,
.pest-control-hero + .section-overlap-hero .hero-badges-row {
   margin-bottom: 10px
}

.step-dot {
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 700;
   font-size: 13px;
   color: var(--muted);
   white-space: nowrap
}

.step-dot span {
   width: 30px;
   height: 30px;
   flex-shrink: 0;
   border-radius: 50%;
   border: 2px solid var(--line);
   display: grid;
   place-items: center;
   color: var(--muted)
}

.step-dot.active {
   color: var(--navy)
}

.step-dot.active span {
   border-color: var(--green);
   background: var(--green);
   color: #fff
}

.step-dots.blue .step-dot.active span {
   border-color: var(--blue);
   background: var(--blue)
}

.step-dot-sep {
   width: 40px;
   height: 2px;
   background: var(--line)
}

.form-step {
   display: none
}

.form-step.active {
   display: block
}

.service-pill-row {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 24px
}

.service-pill {
   position: relative;
   border: 1px solid var(--line);
   border-radius: 999px;
   padding: 10px 18px;
   font-weight: 700;
   font-size: 14px;
   cursor: pointer;
   background: #fff;
   color: var(--navy)
}

.service-pill input {
   position: absolute;
   opacity: 0;
   pointer-events: none
}

.service-pill.checked {
   background: var(--navy);
   border-color: var(--navy);
   color: #fff
}

.step-actions {
   display: flex;
   justify-content: space-between;
   gap: 14px;
   margin-top: 30px
}

@media (max-width: 1180px) {
   .brand-banner .container {
      justify-content: center;
      text-align: center
   }

   .brand-banner-item.right {
      justify-content: center
   }
}

@media (max-width: 560px) {
   .brand-banner-item {
      align-items: flex-start
   }
}

@media (max-width: 560px) {
   .quote-badge-row {
      gap: 10px 8px;
      padding: 14px 12px
   }

   /* Badge takes its own line; the two phone pills share the row below */
   .quote-badge {
      flex-basis: 100%;
      justify-content: center;
      text-align: center
   }

   .quote-phone-pill {
      padding: 8px 12px;
      font-size: 13px;
      gap: 6px;
      white-space: nowrap
   }

   .quote-badge-sep {
      display: none
   }

   .quote-badge-break {
      display: block
   }

   .quote-card-body p {
      min-height: 0
   }

   .form-row {
      grid-template-columns: 1fr
   }
}

/* Our Services page */
.service-detail {
   padding: 46px 0
}

.service-detail:nth-child(even) {
   background: var(--light)
}

.service-detail-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 50px;
   align-items: center
}

.service-detail-grid.reverse .service-detail-image {
   order: -1
}

.service-detail-image img {
   width: 100%;
   height: 380px;
   object-fit: cover;
   box-shadow: var(--shadow)
}

.service-detail-copy .icon-circle-lg.blue {
   background: var(--blue)
}

.service-detail-head {
   display: flex;
   align-items: center;
   gap: 16px
}

.service-detail-head .icon-circle-lg {
   margin-bottom: 0;
   flex-shrink: 0
}

.service-detail-copy h2 {
   font-size: 28px;
   margin: 0 0 4px
}

.service-detail-copy .service-subtitle {
   display: block;
   color: var(--green);
   font-weight: 700;
   margin-bottom: 14px
}

.service-detail-copy.blue .service-subtitle {
   color: var(--blue)
}

.service-detail-copy p {
   color: var(--muted);
   margin: 0 0 12px
}

.mini-badge-row {
   display: flex;
   flex-wrap: wrap;
   gap: 22px;
   border-bottom: 1px solid var(--line);
   margin: 18px 0;
   padding: 16px 0
}

.mini-badge {
   display: flex;
   align-items: center;
   gap: 8px;
   font-weight: 700;
   font-size: 13px;
   color: var(--navy)
}

.mini-badge .icon-circle {
   width: 26px;
   height: 26px;
   font-size: 12px;
   flex-shrink: 0
}

.service-detail-copy.blue .mini-badge .icon-circle {
   border-color: var(--blue);
   color: var(--blue)
}

/* CarpetCleaning/PestControl wrap .mini-badge-row in .hero-badges-row (already centered
   elsewhere in this file) - Upholstery's hero drops it straight into .hero-content-center
   instead, so it needs its own centering here to match. */
.upholstery-hero .mini-badge-row {
   justify-content: center
}

.what-we-do {
   color: var(--green);
   font-weight: 800;
   font-size: 13px;
   letter-spacing: .04em;
   text-transform: uppercase;
   display: block;
   margin-top: 20px;
   padding-top: 16px;
   border-top: 1px solid var(--line);
   margin-bottom: 8px
}

.service-detail-copy.blue .what-we-do {
   color: var(--blue)
}

/* Carpet Cleaning's .mini-badge-row already ends in its own border-bottom/padding - .what-we-do's
   own separator right after it would double up as two lines close together, so drop it here. */
.mini-badge-row + .what-we-do {
   margin-top: 0;
   padding-top: 0;
   border-top: none
}

.checklist-2col {
   grid-template-columns: 1fr 1fr
}

.service-detail + .section-tight {
   padding-top: 0
}

.cta-green {
   background: var(--green);
   color: #fff;
   border-radius: 14px;
   padding: 26px 34px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   flex-wrap: wrap
}

.cta-green-copy {
   display: flex;
   align-items: center;
   gap: 16px
}

.cta-green-copy img {
   width: 48px;
   height: 48px
}

.cta-green h3 {
   font-size: 20px;
   margin: 0;
   color: #fff
}

.cta-green p {
   margin: 4px 0 0;
   color: #e4f5e7
}

.cta-green .btn-outline {
   background: transparent;
   border-color: rgba(255, 255, 255, .6);
   color: #fff
}

.btn-white {
   background: #fff;
   color: var(--green)
}

@media (max-width: 1180px) {
   .service-detail-grid,
   .service-detail-grid.reverse .service-detail-image {
      order: 0
   }

   .service-detail-grid {
      grid-template-columns: 1fr;
      gap: 26px
   }

   .service-detail-image img {
      height: 280px
   }
}

@media (max-width: 560px) {
   .checklist-2col {
      grid-template-columns: 1fr
   }

   .mini-badge-row {
      gap: 14px
   }

   .cta-green {
      text-align: center;
      justify-content: center
   }

   .cta-green-copy {
      flex-direction: column
   }
}

/* Upholstery Cleaning quote page */
.feature-grid-3 {
   grid-template-columns: repeat(3, 1fr)
}

.feature-icon.solid {
   background: var(--green);
   box-shadow: none;
   color: #fff
}

.feature-icon.solid.navy {
   background: var(--navy)
}

/* Upholstery's feature strip uses the page's blue accent (see .fade-line.blue in the hero)
   instead of the shared .feature-icon.solid green, matching how .price-table's total-cell
   already goes blue here (.total-cell.blue). The middle card's .navy variant stays as-is -
   :not(.navy) outweighs .feature-icon.solid.navy's own 3-class specificity so this can't
   accidentally win the background over it regardless of source order. */
.upholstery-feature-strip .feature-icon.solid:not(.navy) {
   background: var(--blue)
}

.step-badge {
   display: inline-block;
   vertical-align: middle;
   background: var(--blue);
   color: #fff;
   font-weight: 800;
   font-size: 11px;
   letter-spacing: .04em;
   text-transform: uppercase;
   padding: 5px 12px;
   border-radius: 6px;
   margin-right: 10px
}

.pricing-panel {
   border: 1px solid var(--line);
   border-radius: 16px;
   background: #fff;
   box-shadow: var(--shadow);
   padding: 28px;
   margin-bottom: 24px
}

.pricing-panel-head {
   margin-bottom: 18px
}

.pricing-panel-head h2 {
   font-size: 22px;
   margin: 0 0 4px
}

.pricing-panel-head span {
   color: var(--muted);
   font-size: 13px
}

.price-table-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px
}

.price-table {
   width: 100%;
   border-collapse: collapse
}

.price-table th {
   text-align: left;
   font-size: 11px;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--muted);
   border-bottom: 2px solid var(--line);
   padding: 0 8px 10px
}

.price-table td {
   padding: 10px 8px;
   border-bottom: 1px solid var(--line);
   font-size: 14px;
   vertical-align: middle
}

.price-table td.price-cell,
.price-table th.price-cell {
   text-align: right;
   white-space: nowrap
}

.price-table td.total-cell {
   font-weight: 700;
   color: var(--green);
   white-space: nowrap
}

.qty-stepper {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   border: 1px solid var(--line);
   border-radius: 999px;
   padding: 2px
}

.qty-btn {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   border: none;
   background: var(--light);
   color: var(--navy);
   font-weight: 800;
   font-size: 15px;
   cursor: pointer;
   display: grid;
   place-items: center
}

.qty-btn:hover {
   background: var(--line)
}

.qty-value {
   min-width: 18px;
   text-align: center;
   font-weight: 700;
   font-size: 14px
}

.price-table-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
   background: var(--light);
   border-radius: 10px;
   padding: 14px 18px;
   margin-top: 20px
}

.price-table-foot .note {
   color: var(--muted);
   font-size: 13px
}

.price-table-foot .total {
   font-weight: 800;
   font-size: 18px;
   color: var(--navy)
}

.price-table-foot .total span {
   color: var(--green)
}

.addon-teaser {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   flex-wrap: wrap;
   background: var(--light);
   border-radius: 12px;
   padding: 20px 24px
}

/* Lets a price-table scroll horizontally instead of overflowing the page when its
   columns (name/price/qty-stepper/total) don't fit the viewport - see the
   min-width override in the 560px query below, which is what actually triggers
   the scroll on narrow screens. */
.price-table-scroll {
   position: relative;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch
}

/* Visual hint that there's more of the table to the right - without this a table wider
   than its scroll container gives no indication the Quantity/Total columns are reachable
   by swiping, on the narrow screens where the 560px query below kicks in the horizontal
   scroll in the first place. */
.price-table-scroll::after {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 28px;
   background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 85%);
   pointer-events: none
}

.addon-teaser-copy {
   display: flex;
   align-items: center;
   gap: 16px
}

.addon-teaser-icon {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: #fff;
   box-shadow: var(--shadow);
   display: grid;
   place-items: center;
   color: var(--blue);
   flex-shrink: 0
}

.addon-teaser h3 {
   font-size: 16px;
   margin: 0 0 4px
}

.addon-teaser p {
   color: var(--muted);
   font-size: 13px;
   margin: 0
}

.cta-band {
   background: linear-gradient(110deg, #03284d, #052f5b);
   border-radius: 16px;
   padding: 34px;
   display: grid;
   grid-template-columns: 1.1fr 1fr auto;
   align-items: center;
   gap: 24px;
   color: #fff;
   overflow: hidden
}

.cta-band h3 {
   font-size: 26px;
   margin: 0 0 6px;
   color: #fff
}

.cta-band h3 .accent {
   color: var(--blue)
}

.cta-band p {
   color: #cfe0ec;
   margin: 0
}

.cta-band-badges {
   display: flex;
   flex-direction: column;
   gap: 14px
}

.cta-band-badge {
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 700;
   font-size: 14px
}

.cta-band-badge .icon-circle-lg {
   width: 34px;
   height: 34px;
   font-size: 14px;
   margin-bottom: 0;
   background: var(--blue)
}

.cta-band-image {
   width: 100%;
   height: 100%;
   min-height: 160px;
   border-radius: 12px;
   overflow: hidden
}

.cta-band-image img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

@media (max-width: 1180px) {
   .price-table-grid {
      grid-template-columns: 1fr
   }
}

/* Our Services page */
.service-detail {
   padding: 46px 0
}

.service-detail:nth-child(even) {
   background: var(--light)
}

.service-detail-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 50px;
   align-items: center
}

.service-detail-grid.reverse .service-detail-image {
   order: -1
}

.service-detail-image img {
   width: 100%;
   height: 380px;
   object-fit: cover;
   box-shadow: var(--shadow)
}

.service-detail-copy .icon-circle-lg.blue {
   background: var(--blue)
}

.service-detail-copy h2 {
   font-size: 28px;
   margin: 0 0 4px
}

.service-detail-copy .service-subtitle {
   display: block;
   color: var(--green);
   font-weight: 700;
   margin-bottom: 14px
}

.service-detail-copy.blue .service-subtitle {
   color: var(--blue)
}

.service-detail-copy p {
   color: var(--muted);
   margin: 0 0 12px
}

.mini-badge-row {
   display: flex;
   flex-wrap: wrap;
   gap: 22px;
   border-bottom: 1px solid var(--line);
   margin: 18px 0;
   padding: 16px 0
}

.mini-badge {
   display: flex;
   align-items: center;
   gap: 8px;
   font-weight: 700;
   font-size: 13px;
   color: var(--navy)
}

.mini-badge .icon-circle {
   width: 26px;
   height: 26px;
   font-size: 12px;
   flex-shrink: 0
}

.service-detail-copy.blue .mini-badge .icon-circle {
   border-color: var(--blue);
   color: var(--blue)
}

/* CarpetCleaning/PestControl wrap .mini-badge-row in .hero-badges-row (already centered
   elsewhere in this file) - Upholstery's hero drops it straight into .hero-content-center
   instead, so it needs its own centering here to match. */
.upholstery-hero .mini-badge-row {
   justify-content: center
}

.what-we-do {
   color: var(--green);
   font-weight: 800;
   font-size: 13px;
   letter-spacing: .04em;
   text-transform: uppercase;
   display: block;
   margin-top: 20px;
   padding-top: 16px;
   border-top: 1px solid var(--line);
   margin-bottom: 8px
}

.service-detail-copy.blue .what-we-do {
   color: var(--blue)
}

/* Carpet Cleaning's .mini-badge-row already ends in its own border-bottom/padding - .what-we-do's
   own separator right after it would double up as two lines close together, so drop it here. */
.mini-badge-row + .what-we-do {
   margin-top: 0;
   padding-top: 0;
   border-top: none
}

.checklist-2col {
   grid-template-columns: 1fr 1fr
}

.service-detail + .section-tight {
   padding-top: 0
}

.cta-green {
   background: var(--green);
   color: #fff;
   border-radius: 14px;
   padding: 26px 34px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   flex-wrap: wrap
}

.cta-green-copy {
   display: flex;
   align-items: center;
   gap: 16px
}

.cta-green-copy img {
   width: 48px;
   height: 48px
}

.cta-green h3 {
   font-size: 20px;
   margin: 0;
   color: #fff
}

.cta-green p {
   margin: 4px 0 0;
   color: #e4f5e7
}

.cta-green .btn-outline {
   background: transparent;
   border-color: rgba(255, 255, 255, .6);
   color: #fff
}

.btn-white {
   background: #fff;
   color: var(--green)
}

@media (max-width: 1180px) {
   .service-detail-grid,
   .service-detail-grid.reverse .service-detail-image {
      order: 0
   }

   .service-detail-grid {
      grid-template-columns: 1fr;
      gap: 26px
   }

   .service-detail-image img {
      height: 280px
   }
}

@media (max-width: 560px) {
   .checklist-2col {
      grid-template-columns: 1fr
   }

   .mini-badge-row {
      gap: 14px
   }

   .cta-green {
      text-align: center;
      justify-content: center
   }

   .cta-green-copy {
      flex-direction: column
   }
}

/* Upholstery Cleaning quote page */
.feature-grid-3 {
   grid-template-columns: repeat(3, 1fr)
}

.feature-icon.solid {
   background: var(--green);
   box-shadow: none;
   color: #fff
}

.feature-icon.solid.navy {
   background: var(--navy)
}

/* Upholstery's feature strip uses the page's blue accent (see .fade-line.blue in the hero)
   instead of the shared .feature-icon.solid green, matching how .price-table's total-cell
   already goes blue here (.total-cell.blue). The middle card's .navy variant stays as-is -
   :not(.navy) outweighs .feature-icon.solid.navy's own 3-class specificity so this can't
   accidentally win the background over it regardless of source order. */
.upholstery-feature-strip .feature-icon.solid:not(.navy) {
   background: var(--blue)
}

.step-badge {
   display: inline-block;
   vertical-align: middle;
   background: var(--blue);
   color: #fff;
   font-weight: 800;
   font-size: 11px;
   letter-spacing: .04em;
   text-transform: uppercase;
   padding: 5px 12px;
   border-radius: 6px;
   margin-right: 10px
}

.pricing-panel {
   border: 1px solid var(--line);
   border-radius: 16px;
   background: #fff;
   box-shadow: var(--shadow);
   padding: 28px;
   margin-bottom: 24px
}

.pricing-panel-head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 16px;
   margin-bottom: 18px
}

.pricing-panel-head h2 {
   font-size: 22px;
   margin: 0 0 4px
}

.pricing-panel-head span {
   color: var(--muted);
   font-size: 13px
}

.btn-faq {
   flex: none;
   padding: 10px 18px;
   font-size: 13px;
   white-space: nowrap
}

.faq-modal-overlay {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(5, 43, 85, .55);
   align-items: center;
   justify-content: center;
   z-index: 100;
   padding: 20px
}

.faq-modal-overlay.open {
   display: flex
}

.faq-modal {
   position: relative;
   width: min(640px, 100%);
   max-height: 85vh;
   overflow-y: auto;
   background: #fff;
   border-radius: 16px;
   box-shadow: var(--shadow);
   padding: 36px
}

.faq-modal h2 {
   margin: 0 0 20px;
   font-size: 22px
}

.faq-modal-close {
   position: absolute;
   top: 16px;
   right: 16px;
   width: 32px;
   height: 32px;
   border: none;
   background: var(--light);
   border-radius: 50%;
   font-size: 20px;
   line-height: 1;
   color: var(--muted);
   cursor: pointer
}

.faq-modal-close:hover {
   background: var(--line)
}

.faq-list {
   display: flex;
   flex-direction: column
}

.faq-item {
   border-bottom: 1px solid var(--line)
}

.faq-item:first-child {
   border-top: 1px solid var(--line)
}

.faq-question {
   width: 100%;
   display: flex;
   align-items: flex-start;
   gap: 14px;
   padding: 16px 8px;
   background: none;
   border: none;
   text-align: left;
   cursor: pointer;
   font-family: inherit
}

.faq-number {
   flex: none;
   width: 26px;
   height: 26px;
   border-radius: 50%;
   background: var(--blue);
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center
}

.faq-question-text {
   flex: 1;
   font-weight: 700;
   color: var(--navy);
   font-size: 15px
}

.faq-chevron {
   flex: none;
   margin-top: 3px;
   transition: transform .2s ease;
   color: var(--blue)
}

.faq-item.open .faq-chevron {
   transform: rotate(180deg)
}

.faq-answer {
   display: none;
   padding: 0 8px 18px 54px;
   color: var(--muted);
   font-size: 14px
}

.faq-item.open .faq-answer {
   display: block
}

.price-table-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 24px
}

.price-table {
   width: 100%;
   border-collapse: collapse
}

.price-table th {
   text-align: left;
   font-size: 11px;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--muted);
   border-bottom: 2px solid var(--line);
   padding: 0 8px 10px
}

.price-table td {
   padding: 10px 8px;
   border-bottom: 1px solid var(--line);
   font-size: 14px;
   vertical-align: middle
}

.price-table td.price-cell,
.price-table th.price-cell {
   text-align: right;
   white-space: nowrap;
   /* Extra left padding pulls width away from the auto-sized Service column. */
   padding-left: 20px
}

.price-table th.total-cell,
.price-table td.total-cell {
   text-align: right;
   min-width: 9ch;
   /* .price-table-scroll::after overlays a 28px fade-to-white hint on the right edge to signal
      there's more to scroll to - without this extra padding, the Total column's own right-
      aligned text sits flush against that edge and gets visually clipped by the fade. */
   padding-right: 28px
}

.price-table td.total-cell {
   font-weight: 700;
   color: var(--green);
   white-space: nowrap
}

/* Upholstery's price list uses the page's blue accent (see .fade-line.blue in the hero)
   instead of the site-default green used by the other quote pages' totals. */
.price-table td.total-cell.blue {
   color: var(--blue)
}

.qty-stepper {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   border: 1px solid var(--line);
   border-radius: 999px;
   padding: 2px
}

.qty-btn {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   border: none;
   background: var(--light);
   color: var(--navy);
   font-weight: 800;
   font-size: 15px;
   cursor: pointer;
   display: grid;
   place-items: center
}

.qty-btn:hover {
   background: var(--line)
}

.qty-value {
   min-width: 18px;
   text-align: center;
   font-weight: 700;
   font-size: 14px
}

.price-table-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
   background: var(--light);
   border-radius: 10px;
   padding: 14px 18px;
   margin-top: 20px
}

.price-table-foot .note {
   color: var(--muted);
   font-size: 13px
}

.price-table-foot .total {
   font-weight: 800;
   font-size: 18px;
   color: var(--navy);
   text-align: right;
   margin-left: auto
}

.price-table-foot .total span {
   color: var(--green)
}

.price-table-foot-breakdown {
   align-items: flex-start;
   justify-content: flex-end
}

.total-breakdown {
   display: flex;
   flex-direction: column;
   gap: 4px;
   min-width: 220px
}

.total-breakdown-row {
   display: flex;
   justify-content: space-between;
   gap: 20px;
   font-size: 13px;
   color: var(--muted)
}

.total-breakdown-row span:last-child {
   font-weight: 700;
   color: var(--navy)
}

.total-breakdown-grand {
   margin-top: 4px;
   padding-top: 8px;
   border-top: 1px solid var(--line);
   font-size: 18px;
   font-weight: 800;
   color: var(--navy)
}

.total-breakdown-grand span:last-child {
   color: var(--green)
}

/* Puts the spot-treatment note and the Estimated Total bar side by side on wide screens (note
   flexes to fill the leftover space, the total bar keeps its natural content width) and stacks
   them on narrow ones, where side-by-side would leave too little room for either. */
.step1-summary-row {
   display: flex;
   align-items: stretch;
   gap: 16px;
   margin: 12px 0
}

.step1-summary-row .note-info {
   flex: 1;
   margin: 0
}

.step1-summary-row .price-table-foot {
   flex: 0 0 auto;
   margin-top: 0
}

@media (max-width: 780px) {
   .step1-summary-row {
      flex-direction: column
   }
}

/* Bleeds out to the edges of the parent .price-table-foot box (negative margin matches its
   14px/18px padding) so this pale-green bar fills the whole footer instead of nesting inside
   its default light-gray background - only relevant when .total-bar is a separate element
   nested inside .price-table-foot (e.g. Step 2's breakdown); see the override directly below
   for the merged case where both classes land on the same element (Step 1's breakdown), which
   needs no bleed since there's no separate padded parent to bleed out of. */
.total-bar {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   gap: 10px;
   width: 100%;
   background: #eafbee;
   border: 1px solid #d5f2dc;
   border-radius: 10px;
   margin: -14px -18px;
   padding: 14px 20px
}

/* Step 1's breakdown has no separate wrapper - .total-bar is applied straight onto
   .price-table-foot, so the bleed-margin trick above (meant to escape a *different* padded
   parent) would instead shove this box out of its own flex row. Cancel it back to flush.
   width:auto is the real fix here: .total-bar's width:100% (needed when it's a nested child
   filling a separate parent, e.g. Step 2) becomes this flex item's *flex-basis* per spec when
   merged directly onto .price-table-foot - i.e. "100% of .step1-summary-row" - which forced
   this box to claim the whole row and squeezed the note box down to single-word-per-line. */
.price-table-foot.total-bar {
   margin: 0;
   width: auto
}

.total-bar-note {
   font-size: 13px;
   font-weight: 700;
   color: var(--green);
   text-align: left
}

.total-bar-hint {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: var(--text);
   text-align: left
}

.total-bar-hint svg {
   flex-shrink: 0;
   color: var(--green)
}

.carpet-total-bar .total-bar-hint svg {
   color: var(--blue)
}

.total-bar-estimate {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 14px;
   align-self: stretch
}

.total-bar-estimate-label {
   font-size: 15px;
   font-weight: 800;
   color: var(--navy);
   white-space: nowrap
}

.total-bar-pill small {
   font-size: 12px;
   font-weight: 600;
   opacity: .85;
   margin-left: 2px
}

.total-bar-pill {
   background: var(--green);
   color: #fff;
   font-weight: 800;
   font-size: 17px;
   border-radius: 999px;
   padding: 8px 26px;
   white-space: nowrap
}

/* Carpet Cleaning's and Upholstery's Estimated Total bar use blue instead of the shared
   .total-bar green - scoped to .carpet-total-bar/.upholstery-total-bar so PestControl's own
   total bar (same shared markup) stays green. */
.carpet-total-bar,
.upholstery-total-bar {
   background: #eaf1fc;
   border-color: #d3e3f8
}

.carpet-total-bar .total-bar-note,
.upholstery-total-bar .total-bar-note {
   color: var(--blue)
}

.carpet-total-bar .total-bar-pill,
.upholstery-total-bar .total-bar-pill {
   background: var(--blue)
}

.addon-teaser {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   flex-wrap: wrap;
   background: var(--light);
   border-radius: 12px;
   padding: 20px 24px
}

/* Lets a price-table scroll horizontally instead of overflowing the page when its
   columns (name/price/qty-stepper/total) don't fit the viewport - see the
   min-width override in the 560px query below, which is what actually triggers
   the scroll on narrow screens. */
.price-table-scroll {
   position: relative;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch
}

/* Visual hint that there's more of the table to the right - without this a table wider
   than its scroll container gives no indication the Quantity/Total columns are reachable
   by swiping, on the narrow screens where the 560px query below kicks in the horizontal
   scroll in the first place. */
.price-table-scroll::after {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 28px;
   background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 85%);
   pointer-events: none
}

.addon-teaser-copy {
   display: flex;
   align-items: center;
   gap: 16px
}

.addon-teaser-icon {
   width: 46px;
   height: 46px;
   border-radius: 50%;
   background: #fff;
   box-shadow: var(--shadow);
   display: grid;
   place-items: center;
   color: var(--blue);
   flex-shrink: 0
}

.addon-teaser h3 {
   font-size: 16px;
   margin: 0 0 4px
}

.addon-teaser p {
   color: var(--muted);
   font-size: 13px;
   margin: 0
}

.addon-select-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 16px
}

.addon-card {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 4px;
   border: 1px solid var(--line);
   border-radius: 12px;
   background: #fff;
   padding: 16px 14px;
   cursor: pointer;
   transition: .15s
}

.addon-card:hover {
   border-color: var(--blue);
   box-shadow: var(--shadow)
}

.addon-card.selected {
   border-color: var(--blue);
   box-shadow: 0 0 0 2px var(--blue) inset;
   background: #f3f8ff
}

.addon-card input {
   position: absolute;
   opacity: 0;
   pointer-events: none
}

.addon-card-check {
   position: absolute;
   top: 12px;
   right: 12px;
   width: 18px;
   height: 18px;
   border-radius: 4px;
   border: 1.5px solid #c3cedb;
   background: #fff;
   color: #fff;
   display: grid;
   place-items: center
}

.addon-card.selected .addon-card-check {
   background: var(--blue);
   border-color: var(--blue)
}

.addon-card-icon {
   width: 34px;
   height: 34px;
   display: grid;
   place-items: center;
   color: var(--blue);
   font-size: 20px
}

.addon-card-body {
   display: flex;
   flex-direction: column;
   gap: 4px;
   flex: 1;
   width: 100%;
   min-width: 0
}

.addon-card h3 {
   font-size: 14px;
   margin: 2px 0 0;
   color: var(--navy);
   padding-right: 20px
}

.addon-card-description {
   font-size: 12px;
   color: var(--amber);
   padding-right: 20px
}

.addon-price-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   gap: 8px;
   margin-top: 4px
}

.addon-card .addon-price {
   color: var(--blue);
   font-weight: 700;
   font-size: 13px;
   margin: 0
}

/* Carpet fiber question - compact single-select pill (radio circle + label), unlike the taller
   icon/price addon-card above - see CarpetCleaning.cshtml's "What's your carpet fiber?" step. */
.fiber-option-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 12px
}

.fiber-option-card {
   position: relative;
   display: flex;
   align-items: center;
   gap: 10px;
   border: 1.5px solid var(--line);
   border-radius: 10px;
   background: #fff;
   padding: 12px 16px;
   cursor: pointer;
   transition: .15s
}

.fiber-option-card:hover {
   border-color: var(--blue)
}

.fiber-option-card.selected {
   border-color: var(--blue)
}

.fiber-option-card input {
   position: absolute;
   opacity: 0;
   pointer-events: none
}

.fiber-option-radio {
   flex-shrink: 0;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   border: 2.5px solid #c3cedb;
   display: grid;
   place-items: center;
   transition: .15s
}

.fiber-option-radio:before {
   content: "";
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--blue);
   transform: scale(0);
   transition: .15s
}

.fiber-option-card.selected .fiber-option-radio {
   border-color: var(--blue)
}

.fiber-option-card.selected .fiber-option-radio:before {
   transform: scale(1)
}

.fiber-option-card h3 {
   font-size: 14px;
   font-weight: 700;
   color: var(--navy);
   margin: 0
}

.cta-band {
   background: linear-gradient(110deg, #03284d, #052f5b);
   border-radius: 16px;
   padding: 34px;
   display: grid;
   grid-template-columns: 1.1fr 1fr 200px;
   align-items: center;
   gap: 24px;
   color: #fff;
   overflow: hidden
}

.cta-band h3 {
   font-size: 26px;
   margin: 0 0 6px;
   color: #fff
}

.cta-band h3 .accent {
   color: var(--blue)
}

.cta-band p {
   color: #cfe0ec;
   margin: 0
}

.cta-band-badges {
   display: flex;
   flex-direction: column;
   gap: 14px
}

.cta-band-badge {
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 700;
   font-size: 14px
}

.cta-band-badge .icon-circle-lg {
   width: 34px;
   height: 34px;
   font-size: 14px;
   margin-bottom: 0;
   background: var(--blue)
}

.cta-band-image {
   width: 200px;
   height: 160px;
   border-radius: 12px;
   overflow: hidden
}

.cta-band-image img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

@media (max-width: 1180px) {
   .price-table-grid {
      grid-template-columns: 1fr
   }

   .cta-band {
      grid-template-columns: 1fr;
      text-align: center
   }

   .cta-band-badges {
      align-items: center
   }

   .cta-band-image {
      width: 100%;
      height: 200px;
      justify-self: center
   }
}

@media (max-width: 560px) {
   .feature-grid-3 {
      grid-template-columns: 1fr
   }

   .upholstery-feature-strip {
      display: none
   }

   /* With the feature strip hidden, the CTA section's 40px top padding stacks on the previous
      section-tight's 40px bottom padding - drop it so the gap isn't doubled. */
   .upholstery-feature-strip + .section-tight {
      padding-top: 0
   }

   .section-tight:has(+ .upholstery-feature-strip) {
      padding-bottom: 12px
   }

   .pricing-panel {
      padding: 20px
   }

   .price-table th,
   .price-table td {
      font-size: 13px;
      padding: 8px 4px
   }

   .addon-teaser {
      flex-direction: column;
      align-items: flex-start
   }

   /* Side-by-side pill pair, shrunk to fit one row - the fixed WhatsApp fab (bottom:40px,
      right:16px) can otherwise end up sitting directly over the right-aligned Next Step/
      Confirm button at some scroll positions, so keep an eye on that overlap if this
      changes again. */
   .step-actions {
      gap: 10px
   }

   /* CarpetCleaning: bolder "Auckland Wide Service" on phones (size comes from the shared
      .selection-footer .note rule). */
   .carpet-cleaning-hero ~ .section-tight .selection-footer .note {
      font-weight: 800
   }

   /* ...and tighten the wrapped gap to the "Fast response" hint below it, darkening the hint
      a touch from --muted so it holds up next to the bolder note. */
   .carpet-cleaning-hero ~ .section-tight .selection-footer-copy {
      row-gap: 6px
   }

   .carpet-cleaning-hero ~ .section-tight .selection-footer .hint {
      color: #3f4f5e
   }

   /* CarpetCleaning: tighten the gap between the summary card and the Back/Next buttons. */
   .carpet-cleaning-hero ~ .section-tight .step-actions {
      margin-top: 12px
   }

   .step-actions .btn {
      flex: 1;
      padding: 11px 10px;
      font-size: 13px;
      gap: 4px;
      justify-content: center
   }

   .step-dots {
      justify-content: center;
      gap: 6px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: 6px
   }

   .step-dots::-webkit-scrollbar {
      display: none
   }

   .step-dot,
   .step-dot-sep {
      flex-shrink: 0
   }

   /* Five full labels can't fit on any phone width - collapse each step-dot to just
      its numbered circle (font-size:0 hides the raw label text node, which can't be
      targeted directly since it isn't wrapped in its own element) and shrink the
      separators, so the row fits in one line without needing the overflow-x scroll
      above (kept as a fallback for very narrow devices). */
   .step-dot {
      font-size: 0;
      gap: 0
   }

   .step-dot span {
      font-size: 13px
   }

   .step-dot-sep {
      width: 14px
   }

   /* Below 560px, the 4-column layout (name/price/qty-stepper/total) is reflowed into a
      2-line-per-item card instead of a horizontally-scrolling table: name+total share the top
      line, price+qty-stepper share the line below. .price-table-scroll no longer needs to
      scroll once rows stack like this, so its overflow-x/scroll-hint fade (still used at wider
      widths - see .review-col-main .price-table above) are switched off here. */
   .price-table-scroll {
      overflow-x: visible
   }

   .price-table-scroll::after {
      display: none
   }

   .price-table {
      min-width: 0
   }

   .price-table thead {
      display: none
   }

   .price-table,
   .price-table tbody,
   .price-table tr {
      display: block;
      width: 100%
   }

   /* 3 columns - col1 (1fr) holds Name/Price so both stay left-aligned and can grow with the
      row's available width; col2 (auto, sized to the qty-stepper's own width) sits immediately
      to its right so the stepper reads as "right after the price" instead of drifting to the
      far right of the row; col3 (auto, sized to Total's own width) is only used on the name/
      total line, which is what pushes Total to the right edge. */
   .price-table tr[data-price-row] {
      display: grid;
      grid-template-columns: 1fr auto auto;
      grid-template-areas:
         "name  .    total"
         "price qty  .";
      column-gap: 12px;
      row-gap: 4px;
      padding: 12px 0;
      border-bottom: 1px solid var(--line)
   }

   .price-table tr[data-price-row] td {
      display: block;
      padding: 0;
      border: none;
      font-size: 14px
   }

   /* Column order in the markup is Service/Price/Quantity/Total - map those 4 cells onto the
      named grid areas above by position (:nth-child) rather than adding layout-only classes to
      each <td>. */
   .price-table tr[data-price-row] td:nth-child(1) {
      grid-area: name;
      font-weight: 600;
      color: var(--navy)
   }

   .price-table tr[data-price-row] td:nth-child(2) {
      grid-area: price;
      text-align: left;
      color: var(--muted);
      font-size: 13px
   }

   .price-table tr[data-price-row] td:nth-child(3) {
      grid-area: qty;
      text-align: left
   }

   .price-table tr[data-price-row] td:nth-child(4) {
      grid-area: total;
      text-align: right;
      padding-right: 0
   }
}

/* Pest Control quote page */
.selector-head {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 20px
}

.selector-head .icon-circle-lg {
   background: var(--blue);
   margin-bottom: 0;
   flex-shrink: 0;
   overflow: hidden
}

/* Per-pest photo fills the circle edge-to-edge via object-fit:cover below, which otherwise
   hides the green circle background entirely - a stroke keeps the "green circle" framing
   visible around the photo instead of just looking like a plain round crop. */
.selector-head .icon-circle-lg:has(img) {
   box-sizing: border-box;
   border: 2px solid var(--green)
}

.selector-head .icon-circle-lg img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.selector-head h2 {
   font-size: 20px;
   margin: 0
}

.selector-head span:not(.icon-circle-lg) {
   display: block;
   color: var(--muted);
   font-size: 13px;
   margin-top: 2px
}

.pest-select-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 16px
}

.pest-card {
   position: relative;
   border: 1px solid var(--line);
   border-radius: 12px;
   background: #fff;
   padding: 20px 14px;
   text-align: center;
   cursor: pointer;
   transition: .15s
}

.pest-card:hover {
   border-color: var(--green);
   box-shadow: var(--shadow)
}

.pest-card.selected {
   border-color: var(--green);
   box-shadow: 0 0 0 2px var(--green) inset
}

.pest-card input {
   position: absolute;
   opacity: 0;
   pointer-events: none
}

.pest-card-check {
   position: absolute;
   top: 10px;
   right: 10px;
   width: 18px;
   height: 18px;
   border-radius: 4px;
   border: 1.5px solid #c3cedb;
   background: #fff;
   color: #fff;
   display: grid;
   place-items: center
}

.pest-card.selected .pest-card-check {
   background: var(--green);
   border-color: var(--green)
}

.pest-card-icon {
   width: 64px;
   height: 64px;
   margin: 0 auto 12px;
   border-radius: 50%;
   background: var(--light);
   color: var(--navy);
   display: grid;
   place-items: center;
   overflow: hidden
}

.pest-card-icon img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.pest-card h3 {
   font-size: 15px;
   margin: 0 0 4px
}

.pest-card p {
   color: var(--muted);
   font-size: 12px;
   margin: 0
}

.selection-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   flex-wrap: wrap;
   background: var(--light);
   border-radius: 10px;
   padding: 14px 18px;
   margin-top: 20px
}

.selection-footer-copy {
   display: flex;
   align-items: center;
   gap: 20px;
   flex-wrap: wrap
}

.selection-footer .note {
   display: flex;
   align-items: center;
   gap: 8px;
   font-weight: 700;
   color: var(--green);
   font-size: 14px
}

.selection-footer.blue .note {
   color: var(--blue)
}

.selection-footer .hint {
   display: flex;
   align-items: center;
   gap: 8px;
   color: var(--muted);
   font-size: 13px
}

/* Quote pages (Carpet Cleaning + Pest Control): larger "Auckland Wide Service" / "Fast response"
   lines that slide in when the step shows, then keep an idle motion on their icons (shield
   pulse, truck driving through its lane). */
.selection-footer .note {
   font-size: 17px;
   opacity: 0;
   animation: trust-item-in .6s ease-out .1s forwards
}

.selection-footer .hint {
   font-size: 15px;
   opacity: 0;
   animation: trust-item-in .6s ease-out .3s forwards
}

.selection-footer .note svg,
.selection-footer .hint svg {
   width: 20px;
   height: 20px;
   flex: 0 0 auto
}

.selection-footer .note svg {
   animation: footer-shield-pulse 2.4s ease-in-out .9s infinite
}

/* The truck drives out of its clipped lane on the right and re-enters from the left. */
.selection-footer .truck-lane {
   display: inline-flex;
   flex: 0 0 auto;
   width: 26px;
   overflow: hidden
}

.selection-footer .hint svg {
   animation: footer-truck-drive 3s ease-in-out 1.1s infinite
}

@keyframes footer-shield-pulse {
   0%, 100% {
      transform: scale(1)
   }

   50% {
      transform: scale(1.18)
   }
}

@keyframes footer-truck-drive {
   0% {
      transform: translateX(-22px)
   }

   30%, 60% {
      transform: translateX(3px)
   }

   100% {
      transform: translateX(28px)
   }
}

@media (prefers-reduced-motion: reduce) {
   .selection-footer .note,
   .selection-footer .hint,
   .selection-footer .note svg,
   .selection-footer .hint svg {
      opacity: 1;
      animation: none
   }
}

/* Per-pest detail step (quiz questions + "Your selection so far" sidebar) */
.step-intro {
   color: var(--muted);
   font-size: 14px;
   margin: -8px 0 20px
}

.quiz-question-head {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 16px
}

.quiz-question-number {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background: var(--green);
   color: #fff;
   font-weight: 700;
   flex-shrink: 0;
   display: grid;
   place-items: center
}

.quiz-question-head h3 {
   font-size: 16px;
   margin: 0
}

.quiz-question-hint {
   display: block;
   color: var(--muted);
   font-size: 13px;
   margin-top: 2px
}

.quiz-options-placeholder {
   border: 1px dashed var(--line);
   border-radius: 10px;
   padding: 14px 16px;
   color: var(--muted);
   font-size: 13px
}

.property-size-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 12px
}

.property-size-card {
   position: relative;
   border: 1px solid var(--line);
   border-radius: 10px;
   background: #fff;
   padding: 14px 8px;
   text-align: center;
   cursor: pointer;
   font-size: 12px;
   font-weight: 700;
   color: var(--navy);
   transition: .15s
}

.property-size-card:hover {
   border-color: var(--blue)
}

.property-size-card input {
   position: absolute;
   opacity: 0;
   pointer-events: none
}

.property-size-card svg {
   display: block;
   margin: 0 auto 8px;
   color: var(--muted)
}

.property-size-card.selected {
   border-color: var(--green);
   box-shadow: 0 0 0 2px var(--green) inset
}

.property-size-card.selected svg {
   color: var(--green)
}

.quiz-radio-list {
   display: flex;
   flex-direction: column;
   gap: 12px
}

.quiz-radio-option {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 14px;
   color: var(--text);
   cursor: pointer
}

.quiz-summary-service {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 16px
}

.quiz-summary-service .icon-circle-lg {
   background: var(--blue);
   margin-bottom: 0;
   flex-shrink: 0;
   overflow: hidden
}

.quiz-summary-service .icon-circle-lg img {
   width: 100%;
   height: 100%;
   object-fit: cover
}

.quiz-summary-label {
   display: block;
   color: var(--muted);
   font-size: 12px
}

.quiz-summary-service strong {
   color: var(--navy);
   font-size: 15px
}

.quiz-price-box {
   border-top: 1px solid var(--light);
   margin-top: 12px;
   padding-top: 16px
}

.quiz-price-label {
   display: block;
   color: var(--muted);
   font-size: 12px;
   text-align: right
}

.quiz-price-value {
   display: block;
   color: var(--green);
   font-size: 22px;
   margin: 2px 0;
   text-align: right
}

.quiz-price-value small {
   font-size: 12px;
   font-weight: 600;
   opacity: .85;
   margin-left: 2px
}

.quiz-price-note {
   display: block;
   color: var(--muted);
   font-size: 12px
}

.back-to-selection-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: var(--green);
   font-weight: 700;
   font-size: 13px;
   background: none;
   border: none;
   padding: 0;
   margin-bottom: 16px;
   cursor: pointer
}

.back-to-selection-link:hover {
   text-decoration: underline
}

@media (max-width: 780px) {
   .property-size-grid {
      grid-template-columns: repeat(3, 1fr)
   }
}

@media (max-width: 560px) {
   .property-size-grid {
      grid-template-columns: 1fr 1fr
   }
}

@media (max-width: 1180px) {
   .pest-select-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .addon-select-grid {
      grid-template-columns: repeat(3, 1fr)
   }

   .fiber-option-grid {
      grid-template-columns: repeat(3, 1fr)
   }
}

@media (max-width: 560px) {
   .pest-select-grid {
      grid-template-columns: 1fr 1fr;
      gap: 10px
   }

   .addon-select-grid {
      grid-template-columns: 1fr 1fr;
      gap: 10px
   }

   .fiber-option-grid {
      grid-template-columns: 1fr;
      gap: 10px
   }

   .selection-footer {
      flex-direction: column;
      align-items: flex-start
   }

   /* .selection-footer's flex-direction:column above left-aligns everything by default
      (align-items:flex-start) - keep the Next Step button pinned to the right regardless. */
   .selection-footer [data-step-next] {
      align-self: flex-end
   }
}

/* Typography: main titles, subtitles, body content - applies site-wide */
h1,
h2 {
   font-family: var(--font-title)
}

/* Service Areas page only: all h2 headings use the theme dark blue */
.page-service-areas h2 {
   color: var(--navy)
}

h3,
h4,
h5,
h6,
.eyebrow {
   font-family: var(--font-subtitle);
   font-weight: 500
}

/* Select Date & Time step (Upholstery quote wizard) */
.datetime-grid {
   display: grid;
   grid-template-columns: 1.15fr 1fr;
   gap: 24px;
   margin-bottom: 18px
}

.calendar-card,
.timeslot-card {
   border: 1px solid var(--line);
   border-radius: 14px;
   padding: 18px 18px 60px;
   background: #fff
}

.calendar-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 14px
}

.cal-month-label {
   font-weight: 700;
   font-size: 15px;
   color: var(--navy)
}

.cal-nav {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   border: 1px solid var(--line);
   background: #fff;
   color: var(--navy);
   font-size: 17px;
   line-height: 1;
   cursor: pointer;
   display: grid;
   place-items: center
}

.cal-nav:disabled {
   opacity: .35;
   cursor: not-allowed
}

.calendar-weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   text-align: center;
   font-size: 12px;
   font-weight: 700;
   color: var(--muted);
   margin-bottom: 5px
}

.calendar-days {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 20px
}

.cal-day {
   aspect-ratio: 1;
   max-width: 46px;
   margin: 0 auto;
   border: none;
   background: none;
   border-radius: 50%;
   font-size: 13px;
   font-weight: 600;
   color: var(--text);
   cursor: pointer;
   display: grid;
   place-items: center
}

.cal-day-unavailable {
   color: var(--line);
   cursor: not-allowed
}

.cal-day-available:hover {
   background: #eafbee
}

.cal-day-selected {
   background: var(--blue);
   color: #fff
}

/* A public holiday still gets this amber treatment even when it's also unavailable
   (.cal-day-unavailable) or picked (.cal-day-selected) - declared after both so it wins the cascade
   and the day stays visibly flagged as a holiday no matter its other state. */
.cal-day-holiday {
   background: #fdf1e0;
   color: var(--amber);
   font-weight: 800
}

.cal-day-holiday.cal-day-unavailable {
   background: #fdf1e0;
   color: var(--amber);
   opacity: .6
}

.cal-day-holiday.cal-day-selected {
   background: var(--amber);
   color: #fff
}

.calendar-legend {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   margin-top: 14px;
   padding-top: 12px;
   border-top: 1px solid var(--line);
   font-size: 13px;
   color: var(--muted)
}

.legend-item {
   display: inline-flex;
   align-items: center;
   gap: 6px
}

.legend-dot {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   display: inline-block
}

.legend-available {
   background: var(--green)
}

.legend-unavailable {
   background: var(--line)
}

.legend-holiday {
   background: var(--amber)
}

.legend-selected {
   background: var(--blue);
   box-shadow: 0 0 0 3px rgba(15, 91, 216, .2)
}

.timeslot-card h3 {
   margin: 0 0 4px;
   color: var(--navy)
}

.timeslot-subtitle {
   font-size: 13px;
   color: var(--muted);
   margin: 0 0 16px
}

.timeslot-list {
   display: flex;
   flex-direction: column;
   gap: 10px
}

.timeslot-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   border: 1px solid var(--line);
   border-radius: 10px;
   padding: 12px 16px;
   font-weight: 700;
   font-size: 14px;
   color: var(--navy);
   cursor: pointer
}

.timeslot-row.checked {
   border-color: var(--green);
   background: #eafbee
}

.timeslot-radio {
   position: relative;
   width: 18px;
   height: 18px
}

.timeslot-radio input {
   position: absolute;
   opacity: 0;
   inset: 0;
   margin: 0;
   cursor: pointer
}

.timeslot-radio-dot {
   position: absolute;
   inset: 0;
   border: 2px solid var(--line);
   border-radius: 50%
}

.timeslot-row.checked .timeslot-radio-dot {
   border-color: var(--green)
}

.timeslot-row.checked .timeslot-radio-dot::after {
   content: '';
   position: absolute;
   inset: 3px;
   border-radius: 50%;
   background: var(--green)
}

.timeslot-note {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   margin-top: 16px;
   padding: 12px 14px;
   border-radius: 10px;
   background: #eafbee;
   color: #0f7a26;
   font-size: 13px
}

.timeslot-note svg {
   flex-shrink: 0;
   margin-top: 1px
}

@media (max-width: 780px) {
   .datetime-grid {
      grid-template-columns: 1fr
   }
}

/* Review & Quote step (Upholstery quote wizard) */
.review-grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr;
   gap: 24px;
   align-items: start
}

/* Carpet Cleaning's wizard steps reuse the shared .addon-select-grid/.fiber-option-grid card
   grids inside .review-col-main (alongside the _CarpetSelectionSummaryCard sidebar), which is
   narrower than the full-width layout those grids' own column counts (5/4) were designed for -
   drop to fewer columns here specifically. Scoped to min-width:781px (.review-grid's own
   collapse-to-1-column breakpoint, right below) so this never fights the narrower global
   .addon-select-grid/.fiber-option-grid breakpoints below that - a plain, unconditional
   two-class override would out-specificity those regardless of which media query "wins" by
   source order, forcing extra columns back on at phone widths and pushing cards off-screen. */
@media (min-width: 781px) {
   .review-col-main .addon-select-grid {
      grid-template-columns: repeat(3, 1fr)
   }

   .review-col-main .fiber-option-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   /* Below 560px, .price-table already falls back to its own horizontal-scroll treatment
      (min-width:480px inside .price-table-scroll, see the max-width:560px query) because its
      4 columns (name/price/qty-stepper/total) don't fit a phone screen. That same squeeze
      happens again here at any width >=781px once .review-grid goes two-column and
      .review-col-main is left with only ~60% of the panel to itself, next to the summary-card
      sidebar - reuse the identical scroll fallback rather than letting the columns cram/wrap. */
   .review-col-main .price-table {
      min-width: 480px
   }
}

.review-full-row {
   grid-column: 1 / -1
}

/* Upholstery's spot-treatment note under the price table/summary card. */
.review-grid > .note.review-full-row {
   margin-top: 16px
}

/* Once .review-grid stacks to one column the grid's own 24px gap already separates the note
   from the summary card above it - pull the note up so the total gap is 12px, not 40px. */
@media (max-width: 780px) {
   .review-grid > .note.review-full-row {
      margin-top: -12px
   }
}

.review-card {
   border: 1px solid var(--line);
   border-radius: 14px;
   padding: 22px;
   background: #fff;
   margin-bottom: 20px
}

.review-card h3 {
   margin: 0 0 16px;
   color: var(--navy);
   display: flex;
   align-items: center;
   gap: 8px
}

.review-detail-list {
   margin: 0
}

.review-detail-row {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 16px;
   padding: 10px 0;
   border-bottom: 1px solid var(--light)
}

.review-detail-row:last-child {
   border-bottom: none
}

.review-detail-row dt {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   font-weight: 700;
   color: var(--muted);
   flex-shrink: 0
}

.review-detail-row dt svg {
   flex-shrink: 0;
   color: var(--muted)
}

.review-detail-row dd {
   margin: 0;
   text-align: right;
   font-weight: 700;
   font-size: 14px;
   color: #3d4a58
}

/* For rows whose value can be a long, comma-joined list (e.g. the pest quiz's Details summary
   of every selected option label) - stack the value on its own full-width line below the label
   instead of squeezing it into the right-aligned column next to it. */
.review-detail-row-stacked {
   flex-direction: column;
   align-items: flex-start
}

.review-detail-row-stacked dd {
   text-align: left;
   width: 100%
}

/* On narrow phones, drop every .review-detail-row (not just the already-stacked ones) to the
   label-above-value layout - a short label ("Cleaning level") sitting next to a longer value
   ("Not selected yet"/a level name) has too little room to stay on one line at this width. */
@media (max-width: 560px) {
   .review-detail-row {
      flex-direction: column;
      align-items: flex-start
   }

   .review-detail-row dd {
      text-align: left;
      width: 100%
   }
}

.review-bullet-list {
   margin: 4px 0 0;
   padding-left: 18px
}

.review-bullet-list li {
   font-size: 14px;
   font-weight: 700;
   color: var(--text)
}

/* PestControl's Review & Quote step only: the selected pest/service name (dt) stays bold and
   dark like the rest of the app, but its service-extra/quiz-answer bullets (dd > li) are
   de-emphasized to a lighter, regular-weight gray so the selected service reads as the primary
   line and the extras read as supporting detail underneath it. */
[data-pest-review-list] .review-detail-row dt {
   color: var(--text)
}

[data-pest-review-list] .review-bullet-list li {
   font-weight: 400;
   color: #48555f
}

.zone-badge {
   display: inline-block;
   background: #eafbee;
   color: #0f7a26;
   border-radius: 999px;
   padding: 2px 10px;
   font-size: 12px;
   font-weight: 700
}

.review-notes-group {
   margin-top: 16px
}

.review-notes-group label {
   display: flex;
   align-items: center;
   gap: 6px
}

.review-notes-group textarea {
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 10px 12px;
   font-family: var(--font-body);
   font-size: 14px;
   color: var(--text);
   resize: vertical;
   min-height: 60px
}

.review-price-lines {
   margin-bottom: 8px
}

.review-price-row {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 12px;
   padding: 8px 0;
   font-size: 14px;
   color: var(--text)
}

.review-price-row span:first-child {
   flex: 1;
   min-width: 0;
   word-break: break-word
}

.review-price-row span:last-child {
   flex-shrink: 0;
   white-space: nowrap
}

.review-price-bold {
   font-weight: 700;
   max-width: 340px;
   margin-left: auto
}

.review-price-grand {
   border-top: 2px solid var(--line);
   border-bottom: 2px solid var(--line);
   margin-top: 8px;
   padding-top: 14px;
   padding-bottom: 14px;
   font-weight: 700;
   font-size: 16px;
   color: var(--navy);
   max-width: 340px;
   margin-left: auto
}

.review-price-grand span:last-child {
   color: var(--green)
}

.review-travel-row span:first-child {
   color: var(--muted)
}

.review-travel-row span:first-child svg {
   vertical-align: middle;
   margin-right: 6px
}

.travel-fee-value {
   color: var(--green);
   font-weight: 700
}

.review-info-box {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   width: 100%;
   margin-top: 14px;
   padding: 12px 14px;
   border-radius: 10px;
   background: var(--light);
   color: var(--muted);
   font-size: 13px;
   text-align: left
}

.review-info-box svg {
   flex-shrink: 0;
   margin-top: 1px
}

.btn-confirm {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   line-height: 1.2
}

.btn-confirm small {
   font-weight: 500;
   font-size: 11px;
   opacity: .85
}

.travel-fee-card {
   text-align: center
}

.travel-fee-card h3 {
   justify-content: center;
   font-size: 15px
}

.travel-fee-card h3 span {
   font-weight: 400;
   font-size: 12px;
   color: var(--muted)
}

.travel-fee-icon {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: #eafbee;
   color: var(--green);
   display: grid;
   place-items: center;
   margin: 0 auto 12px
}

.travel-fee-postcode,
.travel-fee-zone-line {
   margin: 0 0 6px;
   font-size: 13px;
   color: var(--muted)
}

.travel-fee-amount {
   margin: 12px 0 0;
   font-size: 22px;
   font-weight: 700;
   color: var(--green)
}

.zone-guide-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 10px
}

.zone-guide-list li {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 13px
}

.zone-guide-dot {
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: var(--green);
   flex-shrink: 0
}

.zone-guide-name {
   flex: 1;
   color: var(--text)
}

.zone-guide-fee {
   font-weight: 700;
   color: var(--navy)
}

.why-choose-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px 24px
}

.why-choose-list li {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 14px;
   color: var(--text);
   font-weight: 600
}

.why-choose-list svg {
   color: var(--green);
   flex-shrink: 0
}

.thank-you-panel {
   text-align: center;
   padding: 64px 28px
}

@media (max-width: 560px) {
   /* .section-tight + .section-tight (the step-dots section immediately followed by the
      form section) is scoped to CarpetCleaning/Upholstery's two-section quote wizard
      layout, whose top padding was already trimmed to 0 for desktop - this panel needs
      its own breathing room back on small screens without undoing that. PestControl also
      has two .section-tight sections so this selector matches there too, but its own
      -165px/-55px compensation below already covers it. */
   .section-tight + .section-tight .thank-you-panel {
      margin-top: 24px
   }

   .thank-you-panel {
      padding-bottom: 4px
   }
}

/* PestControl's badges/step-dots section rides up into the hero via a -165px/-55px
   margin-top (see .section-tight:has(> .container > .hero-badges-row) above), and the
   pricing-panel form right after it relies on that section's real content height (~165px)
   to cancel the overlap back out, landing at the hero's natural bottom edge. The thank-you
   panel replaces the step-dots section AND the form (both get [hidden]), so that real
   height disappears entirely and the panel jumps up to overlap the hero image unless it
   restores the same offset itself. */
.section-overlap-hero + .section-tight .thank-you-panel {
   margin-top: 165px
}

@media (max-width: 780px) {
   .section-overlap-hero + .section-tight .thank-you-panel {
      margin-top: 55px
   }
}

/* Carpet Cleaning wants its thank-you panel to ride up and overlap the hero on reveal, same
   as its step-dots/badges row above (.section-overlap-hero) - cancel the generic flush-landing
   compensation above (same selector specificity, later in source, so no !important needed), then
   pull it up a further -80px/-40px on top of that natural overlap. */
.section-overlap-hero + .section-tight .carpet-thank-you-panel {
   position: relative;
   z-index: 2;
   margin-top: -80px
}

@media (max-width: 780px) {
   .section-overlap-hero + .section-tight .carpet-thank-you-panel {
      margin-top: -40px
   }
}

/* Upholstery wants the same reveal-and-overlap treatment as Carpet Cleaning's thank-you panel
   above, but its own step-dots strip only ever pulls -70px/-20px into the hero (see
   .upholstery-hero + .section-overlap-hero - its hero has no separate badges row, so it's
   naturally shorter than Carpet/Pest's combined badges+dots strip), not the shared -165px/-55px
   the generic compensation above assumes - reusing Carpet's -80px/-40px pull here would ride up
   too far past where the hero image actually ends. Cancel the generic compensation and reapply
   the same, smaller pull the step-dots strip itself uses instead. */
.section-overlap-hero + .section-tight .upholstery-thank-you-panel {
   position: relative;
   z-index: 2;
   margin-top: -70px
}

@media (max-width: 780px) {
   .section-overlap-hero + .section-tight .upholstery-thank-you-panel {
      margin-top: -20px
   }
}

/* Pest Control wants the same reveal-and-overlap treatment as Carpet Cleaning's thank-you
   panel above - its badges/step-dots strip is the same combined badges+dots height (see the
   -165px/-55px generic compensation's comment above), so it reuses Carpet's exact -80px/-40px
   pull rather than Upholstery's smaller one. */
.section-overlap-hero + .section-tight .pest-thank-you-panel {
   position: relative;
   z-index: 2;
   margin-top: -80px
}

@media (max-width: 780px) {
   .section-overlap-hero + .section-tight .pest-thank-you-panel {
      margin-top: -40px
   }
}

.thank-you-panel .icon-circle-lg {
   width: 64px;
   height: 64px;
   margin: 0 auto 18px;
   background: var(--green)
}

.thank-you-panel h2 {
   font-size: 26px;
   margin: 0 0 10px
}

.thank-you-panel p {
   color: var(--muted);
   font-size: 15px;
   max-width: 480px;
   margin: 0 auto
}

.thank-you-panel .green {
   color: var(--green)
}

.thank-you-panel .thank-you-script {
   font-family: var(--font-title, inherit);
   font-style: italic;
   font-weight: 700;
   font-size: 32px;
   color: var(--navy);
   margin: 4px 0 18px;
   padding-bottom: 8px;
   border-bottom: 3px solid var(--green);
   display: inline-block
}

.thank-you-panel .thank-you-closing {
   max-width: none;
   margin: 22px 0 0;
   font-weight: 600;
   color: var(--navy)
}

/* Carpet Cleaning's and Upholstery's thank-you panels use the theme blue instead of green for
   their accents, overriding the shared .thank-you-panel styling that PestControl still uses
   green for - must come after the general .thank-you-panel rules above since both sides match
   with equal specificity (two classes) and the cascade falls back to source order. */
.carpet-thank-you-panel .icon-circle-lg,
.upholstery-thank-you-panel .icon-circle-lg {
   background: var(--blue)
}

.carpet-thank-you-panel .green,
.upholstery-thank-you-panel .green {
   color: var(--blue)
}

.carpet-thank-you-panel .thank-you-script,
.upholstery-thank-you-panel .thank-you-script {
   border-bottom-color: var(--blue)
}

.carpet-thank-you-panel .next-step-check,
.upholstery-thank-you-panel .next-step-check {
   background: var(--blue)
}

.carpet-thank-you-panel .next-steps-card h3,
.upholstery-thank-you-panel .next-steps-card h3 {
   color: var(--blue)
}

.next-steps-card {
   background: var(--light);
   border-radius: 14px;
   padding: 26px 22px;
   margin: 28px 0 0
}

.next-steps-card h3 {
   font-size: 16px;
   font-weight: 700;
   color: var(--navy);
   margin: 0 0 20px
}

.next-steps-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px
}

.next-step-item {
   position: relative;
   padding: 0 10px
}

.next-step-item:not(:last-child)::after {
   content: '';
   position: absolute;
   top: 8px;
   right: 0;
   bottom: 34px;
   width: 1px;
   background: var(--line)
}

.next-step-icon {
   position: relative;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: #fff;
   display: grid;
   place-items: center;
   color: var(--navy);
   margin: 0 auto 10px;
   box-shadow: var(--shadow)
}

.next-step-check {
   position: absolute;
   bottom: -2px;
   right: -2px;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: var(--green);
   color: #fff;
   display: grid;
   place-items: center
}

.next-step-item p {
   font-size: 12.5px;
   color: var(--muted);
   margin: 0;
   max-width: none
}

@media (max-width: 560px) {
   .next-steps-grid {
      grid-template-columns: 1fr;
      gap: 22px
   }

   .next-step-item:not(:last-child)::after {
      display: none
   }
}

.note {
   display: block;
   color: var(--muted);
   font-size: 13px;
   margin: 12px 0
}

/* Shaded-box variant of .note - reuses the same light-blue tone as .cta-strip so blue "heads
   up" callouts stay visually consistent across the site instead of introducing a new tint. */
.note-info {
   display: flex;
   align-items: center;
   gap: 10px;
   background: #eef6fb;
   border: 1px solid #e2ebf2;
   border-radius: 10px;
   padding: 10px 14px;
   color: var(--blue);
   font-weight: 700;
   text-align: left
}

.note-info-icon {
   flex: 0 0 auto
}

/* Carpet Cleaning's "optional extras/stains" notes drop the shaded-box .note-info treatment -
   plain text with just the info icon, not a pill. */
.carpet-note-info {
   background: none;
   border: none;
   padding: 0;
   font-weight: 400;
   color: var(--muted)
}

.note-info-text {
   flex: 1
}

.note-info.note-success {
   background: #eafbee;
   border-color: #d3f3da;
   color: var(--green)
}

/* Carpet Cleaning quote page */
.badge-pill {
   display: inline-block;
   background: #eafbee;
   color: var(--green);
   border-radius: 999px;
   padding: 4px 14px;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: .04em;
   text-transform: uppercase
}

.cleaning-type-row {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 16px
}

.cleaning-type-card {
   position: relative;
   display: flex;
   align-items: center;
   gap: 12px;
   border: 1.5px solid var(--line);
   border-radius: 12px;
   background: #fff;
   padding: 14px 44px 14px 16px;
   min-width: 220px;
   font-weight: 700;
   color: var(--navy)
}

.cleaning-type-card.checked {
   border-color: var(--blue);
   box-shadow: 0 0 0 1px var(--blue) inset
}

.cleaning-type-icon {
   width: 40px;
   height: 40px;
   border-radius: 10px;
   background: var(--light);
   color: var(--blue);
   display: grid;
   place-items: center;
   flex-shrink: 0
}

.cleaning-type-check {
   position: absolute;
   right: 14px;
   top: 50%;
   transform: translateY(-50%);
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--blue);
   color: #fff;
   display: grid;
   place-items: center
}

.level-compare-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin-top: 20px
}

.level-card {
   position: relative;
   border: 2px solid var(--line);
   border-radius: 16px;
   background: #fff;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transition: box-shadow .2s
}

.level-card-check {
   position: absolute;
   top: 14px;
   right: 14px;
   z-index: 1;
   width: 22px;
   height: 22px;
   border-radius: 6px;
   border: 1.5px solid #c3cedb;
   background: #fff;
   color: #fff;
   display: grid;
   place-items: center;
   cursor: pointer
}

.level-card.selected .level-card-check {
   background: var(--blue);
   border-color: var(--blue)
}

.level-card.standard.selected .level-card-check {
   background: var(--blue);
   border-color: var(--blue)
}

.level-card.standard.selected {
   border-color: var(--blue)
}

.level-card.premium.selected {
   border-color: var(--blue)
}

.level-card.selected {
   box-shadow: 0 10px 30px rgba(3, 37, 70, .15)
}

.level-card.premium.selected {
   box-shadow: 0 14px 34px rgba(15, 91, 216, .35)
}

.level-card-header {
   text-align: center;
   padding: 16px 16px 0
}

.level-card-name {
   font-weight: 800;
   font-size: 18px;
   letter-spacing: .04em;
   text-transform: uppercase
}

.level-card-name-part {
   display: inline-block
}

@media (max-width: 560px) {
   .level-card-name-part {
      display: block
   }
}

.level-card.standard .level-card-name {
   color: var(--blue)
}

.level-card.premium .level-card-name {
   color: var(--blue)
}

.level-card-rooms {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   color: var(--muted);
   font-size: 14px;
   margin-top: 4px
}

.level-card-image {
   margin: 14px 16px 0;
   border-radius: 10px;
   overflow: hidden
}

.level-card-image img {
   width: 100%;
   height: 150px;
   object-fit: cover;
   display: block
}

.level-card-body {
   padding: 16px;
   text-align: center;
   flex: 1;
   display: flex;
   flex-direction: column
}

.level-card-price {
   font-size: 20px;
   font-weight: 800;
   margin: 4px 0
}

.level-card.standard .level-card-price {
   color: var(--blue)
}

.level-card.premium .level-card-price {
   color: var(--blue)
}

.level-card-price small {
   font-size: 13px;
   font-weight: 700
}

.level-card-min-charge {
   color: var(--muted);
   font-size: 12px;
   font-weight: 600;
   margin: 0 0 4px
}

.level-card-title {
   font-weight: 700;
   font-size: 16px;
   margin: 4px 0;
   text-align: left
}

.level-card-desc {
   color: var(--muted);
   font-size: 15px;
   margin: 0 0 12px;
   text-align: left
}

.level-card-features {
   list-style: none;
   margin: 0 0 14px;
   padding: 0;
   text-align: left;
   display: flex;
   flex-direction: column;
   gap: 8px
}

.level-card-features li {
   display: flex;
   align-items: flex-start;
   gap: 8px;
   font-size: 14px;
   color: var(--navy)
}

.level-card-feature-text {
   font-weight: 600
}

.level-card-features svg {
   flex-shrink: 0;
   margin-top: 2px;
   color: var(--blue)
}

.level-card-bestfor {
   margin-top: auto;
   font-size: 14px;
   color: var(--muted);
   text-align: left;
   padding-top: 12px
}

.level-card-bestfor strong {
   color: var(--navy)
}

.level-card .btn {
   width: 100%;
   margin-top: 14px
}

.area-input-card {
   border: 1.5px solid var(--line);
   border-radius: 16px;
   background: var(--light);
   padding: 20px;
   margin-top: 26px
}

.area-input-flex {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: flex-end;
   gap: 20px;
   margin-top: 16px
}

.area-input-row {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
   gap: 20px
}

.area-input-row label {
   display: block;
   font-weight: 700;
   font-size: 14px;
   color: var(--navy);
   margin-bottom: 8px
}

.area-input-row input {
   width: 220px;
   max-width: 100%;
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 12px 14px;
   font-family: var(--font-body);
   font-size: 15px;
   color: var(--text)
}

.area-input-row input:focus {
   outline: 2px solid var(--blue);
   outline-offset: 1px
}

.area-estimate-box {
   display: flex;
   flex-direction: column;
   gap: 2px;
   background: #fff;
   border: 1px solid var(--line);
   border-radius: 10px;
   padding: 10px 18px
}

.area-estimate-label {
   font-size: 12px;
   color: var(--muted);
   font-weight: 600
}

.area-estimate-amount {
   font-size: 24px;
   font-weight: 800;
   color: var(--blue);
   text-align: right
}

.area-estimate-amount small {
   font-size: 12px;
   font-weight: 600;
   opacity: .85;
   margin-left: 2px
}

.area-estimate-min {
   font-size: 12px;
   color: var(--muted)
}

@media (max-width: 780px) {
   .review-grid {
      grid-template-columns: 1fr
   }

   .why-choose-list {
      grid-template-columns: 1fr 1fr
   }

   .level-compare-grid {
      grid-template-columns: 1fr
   }
}

@media (max-width: 480px) {
   .why-choose-list {
      grid-template-columns: 1fr
   }
}

/* Contact Us page */
.contact-hero p {
   max-width: 640px;
   margin: 16px auto 0;
   color: var(--muted);
   font-size: 17px;
   text-align: center
}

/* Phone/email/address stand out from the muted .cert-copy p intro line - denser weight and the
   body text color instead of --muted, since these are the actionable details on the page. */
.contact-detail-item {
   color: var(--text);
   font-weight: 600
}

/* Indent this page's cert-copy paragraphs to line up under the heading text rather than the
   icon circle - 46px icon width + the .cert-heading 14px gap. */
.contact-hero + .section-tight .cert-copy p {
   padding-left: 60px
}

.contact-form-card {
   text-align: left
}

.contact-success-panel {
   text-align: center
}

.contact-success-panel .icon-circle-lg {
   margin: 0 auto 14px
}

@media (max-width: 900px) {
   .contact-form-card {
      order: -1
   }
}