/*
Theme Name: A1 Mobil
Theme URI: https://a1mobil.com
Author: A1 Mobil
Author URI: https://a1mobil.com
Description: Custom WordPress theme for A1 Mobil — Houston mobile detailing, fleet wash, pressure washing and heavy equipment cleaning company. Converted from static HTML.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: a1-mobil
*/

/* ==========================================================================
   A1 Mobil — Stylesheet
   ========================================================================== */
:root {
  /* Colors */
  --color-primary: #000941;
  --color-accent: #ef3e36;
  --color-text: #00020f;
  --color-white: #ffffff;
  --color-gray: #6e6e6e;
  --color-placeholder: #838383;
  --color-overlay: rgba(0, 9, 65, 0.8);
  --color-overlay-soft: rgba(0, 9, 65, 0.64);

  /* Typography
     Fluid (clamp-based) instead of fixed per-breakpoint jumps, so headings
     and body-lg text scale smoothly at every viewport width rather than
     snapping at exactly 1199px/767px. Each clamp is anchored to hit
     exactly the same values this design was built around at the same two
     reference widths the old breakpoints used — 767px (mobile) and
     1200px (desktop) — so nothing changed except the jump becoming a
     smooth ramp in between. */
  --font-base: "Poppins", sans-serif;
  --fs-h1: clamp(2rem, 0.23rem + 3.7vw, 3rem);           /* 32px @767 → 48px @1200 */
  --fs-h2: clamp(1.5rem, 0.39rem + 2.3vw, 2.125rem);     /* 24px @767 → 34px @1200 */
  --fs-h3: clamp(1.25rem, 1.03rem + 0.46vw, 1.375rem);   /* 20px @767 → 22px @1200 */
  --fs-body-lg: clamp(1rem, 0.78rem + 0.46vw, 1.125rem); /* 16px @767 → 18px @1200 */
  --fs-body: 1rem;      /* 16px */
  --fs-small: 0.875rem; /* 14px */

  /* Layout */
  --container-width: 1176px; /* 1176 − 48px padding = 1128px content, matching the Figma grid used on every page */
  --container-padding: clamp(1.25rem, 0.81rem + 0.92vw, 1.5rem); /* 20px @767 → 24px @1200 */
  --radius-pill: 2.5rem;
  --radius-lg: 0.75rem;
  --radius-md: 0.5rem;

  /* Spacing */
  --section-padding-y: clamp(3.75rem, -2.9rem + 13.9vw, 7.5rem); /* 60px @767 → 120px @1200 */
  --gap-lg: 1.5rem;

  /* Transitions */
  --transition: 0.25s ease;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

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

h1, h2, h3, h4, p {
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* input[type="submit"] (used by Contact Form 7) needs its native chrome
   reset too, but must NOT reset background-color here: this selector's
   specificity (0,1,1) would otherwise beat class rules like .btn--navy
   (0,1,0) and always win regardless of source order. */
input[type="submit"] {
  font-family: inherit;
  cursor: pointer;
  border: none;
  appearance: none;
  -webkit-appearance: none;
}

input, textarea {
  font-family: inherit;
  font-size: var(--fs-body);
  border: none;
  outline: none;
  width: 100%;
}

/* Submit controls (rendered as <button> in this theme's own markup, but as
   <input type="submit"> by Contact Form 7) size to their content via .btn,
   not the full-width text-field default above. */
input[type="submit"] {
  width: auto;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Services page only: specific sections stay at the wider 1480px grid
   instead of the sitewide 1176px default. */
.container--wide {
  max-width: 92.5rem; /* 1480px */
}

.text-accent {
  color: var(--color-accent);
}

.icon { display: block; }
.icon--12 { width: 0.75rem; height: 0.75rem; }
.icon--20 { width: 1.25rem; height: 1.25rem; }
.icon--22 { width: 1.375rem; height: 1.375rem; }
.icon--24 { width: 1.5rem; height: 1.5rem; flex-shrink: 0; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.25rem;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: var(--fs-body);
  white-space: nowrap;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-white);
}

.btn--primary:hover {
  background-color: #d8362e;
}

.btn--white {
  background-color: var(--color-white);
  color: var(--color-primary);
}

.btn--white:hover {
  background-color: #e6e6e6;
}

.btn--navy {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn--navy:hover {
  background-color: #00061f;
}

.btn--outline {
  background-color: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.btn--outline:hover {
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* ==========================================================================
   Section Header (shared)
   ========================================================================== */

.section-header {
  max-width: 46.875rem; /* 750px */
  margin: 0 auto 3.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.section-header h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-primary);
}

.section-header p {
  font-size: var(--fs-body);
  color: var(--color-text);
}

/* ==========================================================================
   Header / Top bar / Navbar
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

.topbar {
  background-color: var(--color-primary);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.625rem; /* 42px */
}

.topbar__contact {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.topbar__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-white);
  font-size: var(--fs-small);
}

.topbar__social {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.topbar__social img {
  transition: opacity var(--transition);
}

.topbar__social a:hover img {
  opacity: 0.75;
}

.navbar {
  background-color: var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 5.5rem; /* 88px */
}

.navbar__logo img {
  height: 2.625rem; /* 42px */
  width: auto;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex: 1;
  justify-content: center;
}

.navbar__links > li > a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-body);
  color: var(--color-text);
  font-weight: 400;
  padding: 0.5rem 0;
  transition: color var(--transition);
}

.navbar__links > li > a.active {
  color: var(--color-primary);
  font-weight: 500;
}

.navbar__links > li > a:hover {
  color: var(--color-accent);
}

.has-dropdown {
  position: relative;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 12rem;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 24px rgba(17, 17, 26, 0.1);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown li a {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  color: var(--color-text);
  white-space: nowrap;
  transition: background-color var(--transition), color var(--transition);
}

.dropdown li a:hover {
  background-color: rgba(239, 62, 54, 0.08);
  color: var(--color-accent);
}

.navbar__cta {
  flex-shrink: 0;
}

.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
}

.navbar__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.navbar__toggle.is-active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.navbar__toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.navbar__toggle.is-active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 50rem; /* 800px */
  overflow: hidden;
  color: var(--color-white);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to right,
    rgba(0, 9, 65, 0.8) 31.75%,
    rgba(0, 9, 65, 0.64) 45.86%,
    rgba(0, 9, 65, 0) 100%
  );
}

.hero__drop {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.hero__drop--1 {
  width: 2.5rem;
  top: 23.8%;
  left: 14%;
}

.hero__drop--2 {
  width: 1.75rem;
  top: 26.4%;
  left: 16.3%;
}

.hero__drop--3 {
  width: 2.5rem;
  top: 59%;
  left: 90%;
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding-block: 7.5rem;
}

/* margin-bottom instead of a uniform gap — see .about__content for the
   full rationale. Here the eyebrow/title/text form one cohesive intro
   (each tight to the next), while the actions keep the larger separation. */
.hero__content > * {
  margin-bottom: 2.5rem;
}

.hero__content > *:last-child {
  margin-bottom: 0;
}

.hero__eyebrow {
  color: var(--color-accent);
  font-weight: 500;
  font-size: var(--fs-body);
  letter-spacing: 0.02em;
  max-width: 40.5rem;
  margin-bottom: 0.75rem;
}

.hero__title {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  max-width: 40.5rem;
  margin-bottom: 1rem;
}

.hero__text {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  letter-spacing: 0.02em;
  max-width: 40.5rem;
}

.hero__actions {
  display: flex;
  gap: 1.5rem;
}

/* ==========================================================================
   Featured Services
   ========================================================================== */

.services {
  padding-block: var(--section-padding-y);
}

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-lg);
}

.service-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 8px rgba(17, 17, 26, 0.1);
  transition: transform var(--transition), box-shadow var(--transition);
}

/* margin-bottom instead of a uniform gap, so the title sits close to its
   own description while the image above and button below keep the
   larger separation — see .about__content for the full rationale. */
.service-card > * {
  margin-bottom: 1.5rem;
}

.service-card > *:last-child {
  margin-bottom: 0;
}

.service-card:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 18px 32px rgba(17, 17, 26, 0.15);
}

.service-card__image {
  height: 12.4375rem; /* 199px */
  border-radius: var(--radius-md);
  overflow: hidden;
}

.service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.service-card:hover .service-card__image img {
  transform: scale(1.05);
}

.service-card h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.service-card p {
  font-size: var(--fs-body);
  color: var(--color-text);
  flex: 1;
}

.services__more {
  display: flex;
  justify-content: center;
  margin-top: 3.75rem;
}

/* Mobile slider (only rendered when the "Featured Services" section is
   passed mobile_slider => true, currently just the home page — see
   template-parts/service-cards-section.php). Both the grid and the
   slider markup exist in the DOM; which one is visible is decided per
   breakpoint below (grid on tablet/desktop, slider under 768px) so no
   JS viewport check is needed. */
.services__slider {
  display: none;
}

/* Combined with .pagination for specificity — otherwise the base
   .pagination { display: flex } rule below wins on equal specificity
   since it comes later in the source. */
.pagination.pagination--services {
  display: none;
  margin-top: 2rem;
}

.services-swiper .swiper-slide {
  height: auto;
  display: flex;
}

.services-swiper .service-card {
  width: 100%;
}

/* ==========================================================================
   About
   ========================================================================== */

.about {
  display: flex;
  background-color: var(--color-primary);
  color: var(--color-white);
}

.about__content {
  flex: 1 1 auto;
  box-sizing: content-box; /* keep the 554px text column independent of the page gutter */
  display: flex;
  flex-direction: column;
  padding: 6rem var(--container-padding) 6rem max(var(--container-padding), calc((100vw - var(--container-width)) / 2));
  max-width: 34.625rem; /* 554px text column */
}

/* margin-bottom instead of a uniform gap: the heading sits close to the
   paragraph right under it, while unrelated blocks below (the checklist,
   the buttons) keep the larger 3rem separation. Using gap here would give
   the heading the same distance to its own text as to the next block
   entirely, which reads oddly on mobile where every gap is stacked
   vertically and close together. */
.about__content > * {
  margin-bottom: 3rem;
}

.about__content > *:last-child {
  margin-bottom: 0;
}

.about__content h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.about__values {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.about__values li {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.about__actions {
  display: flex;
  gap: 1.5rem;
}

.about__image {
  flex: 1;
  overflow: hidden;
}

.about__image img {
  width: 100%;
  height: 100%;
  min-height: 30rem;
  object-fit: cover;
}

/* ==========================================================================
   Gallery
   ========================================================================== */

.gallery {
  padding-block: var(--section-padding-y);
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-lg);
  margin-bottom: 3.75rem;
}

.gallery__item {
  position: relative;
  height: 22.5rem; /* 360px */
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* Red overlay revealed on hover (matches the 1st card's styling in Figma) */
.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(239, 62, 54, 0.4);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.gallery__item:hover img {
  transform: scale(1.05);
}

.gallery__item:hover::after {
  opacity: 1;
}

.gallery__tag {
  position: absolute;
  z-index: 2;
  left: 2rem;    /* 32px */
  right: 2rem;   /* 32px */
  bottom: 2rem;  /* 32px */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  background-color: var(--color-primary);
  color: var(--color-accent);
  padding: 0.9375rem 1rem; /* 15px 16px */
  border-radius: var(--radius-md);
  font-size: var(--fs-body-lg);
  font-weight: 600;
  text-align: left;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.gallery__tag-divider {
  width: 2.0625rem; /* 33px */
  height: 0.125rem;
  background-color: var(--color-accent);
}

.gallery__item:hover .gallery__tag {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile "peek" slider (only rendered on the home page — see front-page.php).
   Grid vs. slider visibility is decided per breakpoint below, same pattern
   as the Featured Services slider. */
.gallery__slider {
  display: none;
}

/* Combined with .pagination for specificity — otherwise the base
   .pagination { display: flex } rule below wins on equal specificity
   since it comes later in the source. */
.pagination.pagination--gallery {
  display: none;
}


.gallery-swiper .gallery__item {
  width: 100%;
}

/* Tag is hover-only on the desktop grid (no hover on touch devices), so
   force it visible whenever the item is inside the mobile slider. */
.gallery-swiper .gallery__tag {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   Promo / Stats
   ========================================================================== */

.promo {
  position: relative;
}

.promo__banner {
  position: relative;
  overflow: hidden;
  color: var(--color-white);
}

.promo__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.promo__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-overlay);
}

.promo__inner {
  display: flex;
  align-items: center;
  gap: 7.5rem;

}

.promo__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-bottom: 9rem; /* clearance for the overlapping stats card */
}

/* margin-bottom instead of a uniform gap — see .about__content for the
   full rationale. */
.promo__content > * {
  margin-bottom: 2rem;
}

.promo__content > *:last-child {
  margin-bottom: 0;
}

.promo__content h2 {
  font-size: clamp(1.75rem, 0.42rem + 2.77vw, 2.5rem); /* 28px @767 → 40px @1200 */
  font-weight: 600;
  margin-bottom: 1rem;
}

.promo__content p {
  font-size: var(--fs-body);
}

/* Keep the CTA at its natural width even when the banner stacks (≤1199px),
   otherwise the flex column stretches it edge-to-edge. */
.promo__content .btn {
  align-self: flex-start;
}

.promo__image {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.promo__image img {
  width: 500px;
  height: auto;
  max-height: none;
  object-fit: contain;
  margin-bottom: -90px;
}

.stats-card {
  width: 100%;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 15px 12.5px rgba(0, 0, 0, 0.15), 0 5px 5px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 2.5rem 3.5rem;
  margin-top: -5.25rem; /* overlap up into the banner */
  position: relative;
  z-index: 2;
}

.stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  text-align: center;
}

.stat__icon {
  width: 4.25rem; /* 68px */
  height: 4.25rem;
  object-fit: contain; /* source icons aren't all square — preserve their aspect ratio */
}

.stat__number {
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.1;
}

.stat__label {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-gray);
}

.stat__divider {
  width: 1px;
  height: 6.5rem;
  background-color: #e5e5e5;
  flex-shrink: 0;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonials {
  padding-block: var(--section-padding-y);
}

.testimonials__slider {
  /* Clip horizontally so off-screen slides are hidden, but let the cards'
     vertical drop-shadows (and the scaled-up featured card) overflow freely
     — overflow-y: visible is what actually does that; overflow-x: clip is
     the only x value that legally pairs with a visible y axis (the
     shorthand `overflow: clip` would clip both axes and cut off the top/
     bottom of the active card). overflow-clip-margin extends the
     horizontal clip outward so the side cards' shadows are visible. The
     edge cards are non-active, so their blur is 40px (2.5rem); the clip
     margin matches that, and the slide gap (spaceBetween: 48px in main.js)
     is larger than this margin so the next slide's body still stays
     hidden. */
  overflow-x: clip;
  overflow-y: visible;
  overflow-clip-margin: 1.5rem;
  padding-block: 2rem 5rem;
}
.testimonials__slider {
    overflow-clip-margin: 1.5rem;
    padding-block: 2rem 4rem;
    overflow: clip;
}

.testimonial-swiper {
  overflow: visible; /* shadows show; the wrapper above handles horizontal clipping */
}

.testimonial-swiper .swiper-wrapper {
  align-items: center; /* centre cards so the active card sits raised above the rest */
}

.testimonial-swiper .swiper-slide {
  height: auto;
  display: flex;
}

.testimonial-card {
  width: 100%;
  min-height: 25.75rem; /* 412px, matches Figma's inactive card */
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 40px rgba(17, 17, 26, 0.1); /* Figma: 0px 24px 40px rgba(17,17,26,0.1) */
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem; /* 24px, between the header group and the quote paragraph */
  text-align: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.testimonial-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem; /* 16px, matches Figma's inner "Frame" group */
  width: 100%;
}

/* The centred (active) slide pops via a transform (not a height/font-size
   change), so it visually matches the Figma design's bigger avatar/name/
   quote/copy without changing any element's box size — a size change here
   would make the slide's own layout height change on every transition,
   which reflows the .testimonials__slider box and visibly shifts the
   pagination controls below it. transform is compositor-only and never
   triggers that reflow.
   Scale is capped at 1.12 (not Figma's ~1.28 height ratio) because a
   uniform scale grows the card horizontally too, and slides only have
   48px of clearance between them (main.js: spaceBetween: 48) — anything
   much larger and the enlarged card visually collides with its neighbours
   on the left/right. */
.testimonial-swiper .swiper-slide-active .testimonial-card {
  position: relative;
  z-index: 2;
  transform: scale(1.12);
  box-shadow: 0 30px 60px rgba(17, 17, 26, 0.15);
}

.testimonial-card__avatar {
  width: 4.75rem; /* 76px */
  height: 4.75rem;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-card h3 {
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--color-primary);
}

.testimonial-card__role {
  font-size: var(--fs-small);
  color: var(--color-accent);
}

.testimonial-card__quote {
  width: 1.375rem;
  height: 1.375rem;
}

.testimonial-card p {
  font-size: var(--fs-body);
  line-height: 1.625;
  color: var(--color-text);
}

/* Pagination */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 3.75rem;
}

.pagination__arrow {
  width: 1rem;
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition);
  padding: 0;
}

.pagination__arrow:hover {
  transform: scale(1.2);
}

.pagination__dots {
  /* !important overrides Swiper's .swiper-pagination-bullets.swiper-pagination-horizontal
     { width:100% } (higher specificity), which stretches this container and pushes
     the arrows out to the section edges. */
  position: static;
  width: auto !important;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.pagination__arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pagination__dot {
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #d9d9d9;
  cursor: pointer;
  transition: background-color var(--transition), width var(--transition);
}

.pagination__dot--active {
  background-color: var(--color-accent);
  width: 1.5rem;
  border-radius: 0.25rem;
}

/* ==========================================================================
   Our Values
   ========================================================================== */

.values {
  position: relative;
  padding-block: 6.25rem;
}

.values__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.values__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.values::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-overlay);
}

.values__inner {
  display: flex;
  align-items: center;
  gap: 7.5rem;
}

.values__image {
  flex: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  align-self: stretch;
}

.values__image img {
  width: 100%;
  height: 100%;
  min-height: 30rem;
  object-fit: cover;
}

.values__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: var(--color-white);
}

/* margin-bottom instead of a uniform gap — see .about__content for the
   full rationale. (Previously this container used gap AND the h2 had its
   own margin-bottom, which stacked additively into an even bigger gap
   after the heading than everywhere else — the opposite of intended.) */
.values__content > * {
  margin-bottom: 3rem;
}

.values__content > *:last-child {
  margin-bottom: 0;
}

.values__content > p {
  font-size: var(--fs-body);
}

.values__content h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.values__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-lg);
}

.value-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
  transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.value-card:hover {
  transform: translateY(-0.5rem);
  background-color: var(--color-accent);
  box-shadow: 0 18px 32px rgba(239, 62, 54, 0.25);
}

.value-card:hover h3 {
  color: var(--color-white);
}

.value-card:hover img {
  filter: brightness(0) invert(1);
}

.value-card img {
  width: 3rem;
  height: 3rem;
  object-fit: contain; /* source icons aren't all square — preserve their aspect ratio */
  transition: filter var(--transition);
}

.value-card h3 {
  font-size: var(--fs-body-lg);
  font-weight: 500;
  color: var(--color-primary);
  transition: color var(--transition);
}

.value-card--accent {
  background-color: var(--color-accent);
}

.value-card--accent h3 {
  color: var(--color-white);
}

.value-card--accent img {
  filter: brightness(0) invert(1); /* icon is red-filled by default — invert to white so it isn't invisible on the red card */
}

/* ==========================================================================
   Get Free Quote
   ========================================================================== */

.quote {
  position: relative;
  padding-block: 10rem;
}

.quote__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-accent);
  overflow: hidden;
}

.quote__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}

.quote__inner {
  max-width: 55.5rem; /* 888px */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--color-white);
}

/* margin-bottom instead of a uniform gap, so the heading sits close to its
   own intro line while the form below keeps a larger, more deliberate
   separation — see .about__content for the full rationale. */
.quote__inner > * {
  margin-bottom: 2.5rem;
}

.quote__inner > *:last-child {
  margin-bottom: 0;
}

.quote__inner h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.quote__inner > p {
  font-size: var(--fs-body);
}

.quote-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-lg);
}

/* CF7's own JS inserts <span class="wpcf7-spinner"> right after the
   submit button on every page load (not just while submitting) — see
   contact-form-7/includes/js/index.js. It's visibility:hidden but still
   display:inline-block, so inside this flex column it becomes its own
   invisible row plus a `gap` before it, padding the bottom of the form.
   position:absolute pulls it out of the flex flow entirely. */
.quote-form .wpcf7-spinner {
  position: absolute;
}

.quote-form__row {
  display: flex;
  gap: var(--gap-lg);
}

.quote-form input:not([type="submit"]),
.quote-form textarea {
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  color: var(--color-text);
  flex: 1;
}

.quote-form input:not([type="submit"]) {
  height: 4.625rem; /* 74px */
}

.quote-form input::placeholder,
.quote-form textarea::placeholder {
  color: var(--color-placeholder);
}

.quote-form textarea {
  resize: vertical;
  min-height: 8rem;
}

.quote-form button,
.quote-form input[type="submit"] {
  align-self: center;
}

/* Input field wrapper with a trailing icon button — used by any form
   (quote-form--icons, contact-form, etc.), not just the quote banner. */
.input-group {
  position: relative;
  flex: 1;
  display: flex;
}

.input-group input {
  padding-right: 5.5rem; /* clearance for the icon button */
}

.input-group__icon {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  width: 4rem;        /* 64px */
  height: 3.625rem;   /* 58px */
  border-radius: var(--radius-md);
  background-color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.input-group__icon img {
  width: 1.5rem;
  height: 1.5rem;
  filter: brightness(0) invert(1); /* force any brand icon to white on the red chip */
}

/* Decorative water drops on the quote banner */
.quote__drop {
  position: absolute;
  z-index: 1;
  width: 2.5rem;
  pointer-events: none;
}

.quote__drop--1 { top: 16%; left: 11%; }
.quote__drop--2 { top: 68%; right: 12%; }

/* ==========================================================================
   Page Hero (inner page title banner)
   ========================================================================== */

.page-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 26rem; /* 416px */
  overflow: hidden;
  color: var(--color-white);
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(2deg, rgba(0, 9, 65, 0.85) 6%, rgba(0, 9, 65, 0.45) 100%);
}

.page-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.page-hero__content h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.page-hero__subtitle {
  max-width: 51.625rem; /* 826px */
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.page-hero__crumbs {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-white);
}

.page-hero__crumbs img {
  width: 0.75rem;
  height: 0.75rem;
  filter: brightness(0) invert(1);
}

.page-hero__crumbs a {
  transition: color var(--transition);
}

.page-hero__crumbs a:hover {
  color: var(--color-accent);
}

.page-hero__drop {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.page-hero__drop--1 { width: 2.5rem; top: 60%; left: 12%; }
.page-hero__drop--2 { width: 1.75rem; top: 72%; left: 14%; }
.page-hero__drop--3 { width: 2.5rem; top: 54%; left: 83%; }

/* ==========================================================================
   Service Detail — Text + Image split row (intro / environmental)
   ========================================================================== */

.service-split {
  padding-block: var(--section-padding-y);
}

.service-split__inner {
  display: flex;
  align-items: center;
  gap: 4.5rem;
}

.service-split__content {
  flex: 1.2;
  display: flex;
  flex-direction: column;
}

/* margin-bottom instead of a uniform gap — see .about__content for the
   full rationale. */
.service-split__content > * {
  margin-bottom: 1.5rem;
}

.service-split__content > *:last-child {
  margin-bottom: 0;
}

.service-split__content h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.service-split__content p {
  color: var(--color-text);
}

.service-split__content .btn {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.service-split__image {
  flex: 1;
  align-self: stretch;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 26rem;
}

.service-split__image img {
  width: 100%;
  height: 100%;
  min-height: 26rem;
  object-fit: cover;
}

/* ==========================================================================
   Comprehensive Fleet Care — accordion + image
   ========================================================================== */

.fleet-care {
  padding-block: var(--section-padding-y);
  background-color: #f6f7fa;
}

.fleet-care__content {
  display: flex;
  align-items: flex-start;
  gap: 4.5rem;
  margin-top: 3.75rem;
}

.accordion {
  flex: 1.1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.accordion__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: #e8eaf0;
  border-radius: var(--radius-md);
  padding: 1rem 1.5rem;
  text-align: left;
  transition: background-color 0.3s ease;
}

.accordion__header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-primary);
  transition: color var(--transition);
}

.accordion__chevron {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  transform: rotate(-90deg);
  transition: transform var(--transition), filter var(--transition);
}

.accordion__item.is-open .accordion__header {
  background-color: var(--color-accent);
}

.accordion__item.is-open .accordion__header h3 {
  color: var(--color-white);
}

.accordion__item.is-open .accordion__chevron {
  transform: rotate(0deg);
  filter: brightness(0) invert(1);
}

/* Height + visibility are driven entirely by jQuery slideUp/slideDown.
   The is-open class must NOT control display, otherwise removing it would
   hide the body instantly and the collapse animation would be skipped. */
.accordion__body {
  display: none;
  overflow: hidden;
}

.accordion__body p {
  padding: 1rem 1.5rem 0.25rem;
  color: var(--color-text);
}

.fleet-care__image {
  flex: 0.95;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 29rem;
}

.fleet-care__image img {
  width: 100%;
  height: 100%;
  min-height: 29rem;
  object-fit: cover;
}

/* ==========================================================================
   How do we do it — numbered process cards
   ========================================================================== */

.how {
  padding-block: var(--section-padding-y);
  background-color: #fff5f4;
}

.how__title {
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 3.75rem;
}

.how__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.how-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
  padding: 2rem 1.25rem;
  border-radius: var(--radius-lg);
  background-color: transparent;
  box-shadow: 0 0 0 rgba(17, 17, 26, 0);
  transition: transform var(--transition), background-color var(--transition), box-shadow var(--transition);
}

.how-card:hover {
  transform: translateY(-0.5rem);
  background-color: var(--color-white);
  box-shadow: 0 18px 40px rgba(17, 17, 26, 0.1);
}

.how-card__badge {
  width: 4.5rem;
  height: 4.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: rgba(239, 62, 54, 0.12);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 600;
}

.how-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-primary);
}

.how-card p {
  font-size: var(--fs-body);
  color: var(--color-text);
}

/* ==========================================================================
   Moving Billboards — dark CTA banner
   ========================================================================== */

.billboard {
  position: relative;
  overflow: hidden;
  color: var(--color-white);
}

.billboard__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.billboard__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.billboard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(0, 9, 65, 0.85);
}

.billboard__inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  min-height: 31.5rem; /* 504px */
}

.billboard__content {
  flex: 1;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  padding-block: 3rem;
  position: relative;
  z-index: 1;
}

/* margin-bottom instead of a uniform gap — see .about__content for the
   full rationale. */
.billboard__content > * {
  margin-bottom: 2rem;
}

.billboard__content > *:last-child {
  margin-bottom: 0;
}

.billboard__content h2 {
  font-size: clamp(1.75rem, 1.09rem + 1.39vw, 2.125rem); /* 28px @767 → 34px @1200 */
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 1rem;
}

.billboard__content p {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.billboard__content .btn {
  align-self: flex-start;
}

/* Truck bleeds to the far-right edge of the viewport, breaking out of the
   centred container. Absolute positioning resolves to the full-width
   .billboard section (the container itself is not positioned). */
.billboard__image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 56%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  padding-block: 35px 64px;
}

.billboard__image img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: right center;
}

/* Accent-coloured heading variant for the split row (e.g. Power Washing intro) */
.service-split--accent .service-split__content h2 {
  color: var(--color-accent);
}

/* ==========================================================================
   Detailing page — media proportions
   ========================================================================== */

/* Near-square media cards (applies at every width, incl. stacked mobile) */
.service-split--media .service-split__image,
.service-split--media .service-split__image img {
  min-height: 0;
}

.service-split--media .service-split__image {
  aspect-ratio: 454 / 422;
}

.fleet-care--media .fleet-care__image,
.fleet-care--media .fleet-care__image img {
  min-height: 0;
}

.fleet-care--media .fleet-care__image {
  aspect-ratio: 456 / 478;
}

/* Side-by-side column proportions — only while the rows are not stacked.
   (flex-basis would otherwise size the height once the inner becomes a column.) */
@media (min-width: 1200px) {
  /* Intro row: text 622 / image 454 with a 52px gap (Figma proportions) */
  .service-split--media .service-split__inner {
    gap: 3.25rem;
    align-items: flex-start;
  }

  .service-split--media .service-split__content {
    flex: 1 1 auto;
  }

  .service-split--media .service-split__image {
    flex: 0 0 40.25%;          /* 454 / 1128 */
  }

  /* Comprehensive row: accordion 620 / image 456 with a 52px gap */
  .fleet-care--media .fleet-care__content {
    gap: 3.25rem;
  }

  .fleet-care--media .accordion {
    flex: 1 1 auto;
  }

  .fleet-care--media .fleet-care__image {
    flex: 0 0 40.4%;           /* 456 / 1128 */
  }
}

/* ==========================================================================
   Scheduled Cleaning — dark CTA banner with worker cut-out (Detailing)
   ========================================================================== */

.schedule-cta {
  position: relative;
  overflow: hidden;
  color: var(--color-white);
}

.schedule-cta__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.schedule-cta__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.schedule-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(0, 9, 65, 0.8);
}

.schedule-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  min-height: 35.875rem;      /* 574px — height of the full-body worker photo, matching Figma (node 3042:5364) */
}

.schedule-cta__content {

  display: flex;
  flex-direction: column;
}

/* margin-bottom instead of a uniform gap — see .about__content for the
   full rationale. Figma's autolayout gap for this column is 40px. */
.schedule-cta__content > * {
  margin-bottom: 2.5rem;
}

.schedule-cta__content > *:last-child {
  margin-bottom: 0;
}

.schedule-cta__content h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.schedule-cta__content p {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.schedule-cta__content .btn {
  align-self: flex-start;
}

/* Full body + pressure washer visible (uncropped), matching Figma (node 3042:5365) */
.schedule-cta__worker {
  flex: none;
  width: 31.4375rem;          /* 503px */
  height: 35.875rem;          /* 574px */
  position: relative;
  overflow: hidden;
  pointer-events: none;
}



/* Decorative water-drop flourishes floating between the copy and the worker
   photo, matching Figma (nodes 3042:5366 / 3042:5367). Same pattern as
   .hero__drop / .page-hero__drop elsewhere on the site. */
.schedule-cta__drop {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.schedule-cta__drop--1 {
  width: 2.625rem; /* 42px */
  top: 44%;
  left: 51%;
}

.schedule-cta__drop--2 {
  width: 1.8125rem; /* 29px */
  top: 53%;
  left: 54%;
}

/* ==========================================================================
   Our Services are Available for — vehicle type icons row (Detailing)
   ========================================================================== */

.vehicle-types {
  background-color: var(--color-white);
  padding-block: 6.25rem;     /* 100px */
  box-shadow: 0 15px 12.5px rgba(0, 0, 0, 0.05), 0 5px 5px rgba(0, 0, 0, 0.03);
}

.vehicle-types__title {
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 2.5rem;
}

.vehicle-types__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 2.5rem 4rem;
}

.vehicle-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 9rem;
  text-align: center;
}

.vehicle-type__icon {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
}

.vehicle-type span {
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.55;
}

/* ==========================================================================
   Comprehensive Services — two accordion columns
   ========================================================================== */

.comprehensive {
  padding-block: var(--section-padding-y);
}

.comprehensive__columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}

.comprehensive__col {
  display: flex;
  flex-direction: column;
}

/* margin-bottom instead of a uniform gap — see .about__content for the
   full rationale. */
.comprehensive__col > * {
  margin-bottom: 1.25rem;
}

.comprehensive__col > *:last-child {
  margin-bottom: 0;
}

.comprehensive__subtitle {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   Centered dark CTA banner (Schedule Services)
   ========================================================================== */

.cta-banner {
  position: relative;
  overflow: hidden;
  color: var(--color-white);
}

.cta-banner__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

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

.cta-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-overlay);
}

.cta-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: var(--section-padding-y);
}

/* margin-bottom instead of a uniform gap — see .about__content for the
   full rationale. */
.cta-banner__inner > * {
  margin-bottom: 1.5rem;
}

.cta-banner__inner > *:last-child {
  margin-bottom: 0;
}

.cta-banner__inner h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.cta-banner__inner p {
  max-width: 50rem;
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.cta-banner__inner .btn {
  margin-top: 0.5rem;
}

/* ==========================================================================
   Personalized & Professional — text + overlapping worker cut-out
   ========================================================================== */

.personalized {
  position: relative;
  margin-top: -7.75rem;       /* overlap the worker up into the CTA banner above */
  z-index: 1;
}

.personalized__inner {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
}

.personalized__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 13.25rem;      /* push the copy below the overlapping banner */
}

/* margin-bottom instead of a uniform gap — see .about__content for the
   full rationale. */
.personalized__content > * {
  margin-bottom: 1.5rem;
}

.personalized__content > *:last-child {
  margin-bottom: 0;
}

.personalized__content h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  margin-bottom: 1rem;
  line-height: 1.3;
  color: var(--color-primary);
}

.personalized__content p {
  color: var(--color-text);
  line-height: 1.625;
  letter-spacing: 0.02em;
}

.personalized__media {
  flex: none;
  width: 33rem;               /* 532px */
  height: 37.875rem;          /* 606px */
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

/* The worker cut-out is scaled to crop the machine + lower legs, matching Figma */
.personalized__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* ==========================================================================
   Types of Equipment We Clean — chip list (Heavy Equipment)
   ========================================================================== */

.equipment-types {
  padding-block: var(--section-padding-y);
  background-color: rgba(0, 9, 65, 0.05);
  text-align: center;
}

.equipment-types .section-header {
  margin-bottom: 2.5rem;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9375rem 1.5rem; /* 15px 24px */
  margin-bottom: 2.5rem;
}

.chip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 16.5rem; /* 264px */
  max-width: 16.5rem;
  height: 3.75rem; /* 60px */
  padding-inline: 1.5rem;
  border-radius: var(--radius-lg);
  background-color: rgba(0, 9, 65, 0.1);
  color: var(--color-primary);
  font-weight: 600;
  font-size: var(--fs-body-lg);
  transition: background-color var(--transition), color var(--transition);
}

.chip:hover {
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* ==========================================================================
   Benefits of Cleaning — icon badge cards (Heavy Equipment)
   ========================================================================== */

.benefits {
  padding-block: var(--section-padding-y);
}

.benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.benefit-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
  padding: 2rem 0.625rem;
  border-radius: var(--radius-md);
  background-color: #fff5f4;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05), 0 15px 25px rgba(0, 0, 0, 0.15);
}

.benefit-card__icon {
  width: 3.75rem;
  height: 3.75rem;
}

.benefit-card h3 {
  font-size: var(--fs-body-lg);
  font-weight: 600;
  color: var(--color-accent);
}

.benefit-card p {
  font-size: var(--fs-body);
  color: #1c1c1a;
  line-height: 1.625;
}

/* ==========================================================================
   Contact page — info cards, quote form + note panel, map
   ========================================================================== */

.info-cards {
  padding-top: var(--section-padding-y);
  padding-bottom: 2.5rem;
}

.info-cards__row {
  display: flex;
  background-color: var(--color-accent);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.info-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2.1875rem 3rem; /* 35px 48px */
  text-align: center;
  color: var(--color-white);
}

.info-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--color-white);
}

.info-card__icon {
  width: 1.875rem; /* 30px */
  height: 1.875rem;
}

.info-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

.info-card p {
  font-size: var(--fs-body);
}

.contact-quote {
  padding-block: var(--section-padding-y);
}

.contact-quote__inner {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
}

.contact-quote__col {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* margin-bottom instead of a uniform gap — see .about__content for the
   full rationale. */
.contact-quote__col > * {
  margin-bottom: 1.5rem;
}

.contact-quote__col > *:last-child {
  margin-bottom: 0;
}

.contact-quote__col h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Same fix as .quote-form .wpcf7-spinner above — see that comment. */
.contact-form .wpcf7-spinner {
  position: absolute;
}

.contact-form__row {
  display: flex;
  gap: 1rem;
}

.contact-form input:not([type="submit"]),
.contact-form textarea {
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
  padding-block: 0.5rem;
  padding-left: 1rem;
  padding-right: 0.5rem;
  color: var(--color-text);
  flex: 1;
}

.contact-form input:not([type="submit"]) {
  height: 4.625rem; /* 74px */
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--color-placeholder);
}

.contact-form textarea {
  resize: vertical;
  min-height: 7rem;
}

/* .input-group input needs its own right padding back for icon clearance —
   the shared .contact-form input rule above would otherwise win on source
   order and collapse it, pushing typed text under the icon button. */
.contact-form .input-group input {
  padding-right: 5.5rem;
}

.contact-form__submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 3.25rem;
  border-radius: var(--radius-md);
  background-color: var(--color-accent);
  color: var(--color-white);
  font-size: 1.125rem;
  font-weight: 600;
  transition: background-color var(--transition);
}

.contact-form__submit:hover {
  background-color: #d8362e;
}

.contact-note {
  flex: 1;
  background-color: #f8e7e9;
  padding: 1.875rem; /* 30px */
  display: flex;
  flex-direction: column;
  align-self: flex-start;
}

/* margin-bottom instead of a uniform gap — see .about__content for the
   full rationale. */
.contact-note > * {
  margin-bottom: 1rem;
}

.contact-note > *:last-child {
  margin-bottom: 0;
}

.contact-note h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  line-height: 1.375;
  color: var(--color-accent);
}

.contact-note p {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: #1c1c1a;
}

.contact-note a {
  text-decoration: underline;
}

.contact-map {
  padding-bottom: var(--section-padding-y);
}

.contact-map__frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 33.5rem; /* 537px */
}

.contact-map__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ==========================================================================
   About page — mission/vision split
   ========================================================================== */

.mission {
  padding-block: 5rem;
}

.mission__inner {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.mission__col {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.mission__block {
  display: flex;
  flex-direction: column;
}

/* margin-bottom instead of a uniform gap — see .about__content for the
   full rationale. */
.mission__block > * {
  margin-bottom: 1.5rem;
}

.mission__block > *:last-child {
  margin-bottom: 0;
}

.mission__block h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.mission__block p {
  color: var(--color-text);
  line-height: 1.55;
  font-size: var(--fs-body-lg);
}

.mission__block .btn {
  align-self: flex-start;
}

.mission__image {
  flex: 0 0 40.4%; /* 456 / 1128 */
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 456 / 562;
}

.mission__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Careers — job listing grid + application modal
   ========================================================================== */

.job-listings {
  padding-block: var(--section-padding-y);
}

.job-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.job-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: box-shadow var(--transition);
}

.job-card:hover {
  box-shadow: 0 18px 32px rgba(17, 17, 26, 0.1);
}

.job-card__header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  background-color: #f2f3f5;
  transition: background-color var(--transition);
}

.job-card:hover .job-card__header {
  background-color: #fbf1f2;
}

.job-card__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-primary);
  transition: color var(--transition);
}

.job-card:hover .job-card__title {
  color: #be1422;
}

.job-card__meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: #4e4e4d;
}

.job-card__meta img {
  flex-shrink: 0;
}

.job-card__body {
  padding: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #1c1c1a;
}

/* Modal */
.job-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: rgba(0, 9, 65, 0.7);
  padding: 4rem 1.5rem;
  overflow-y: auto;
}

.job-modal-overlay.is-open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.job-modal {
  width: 100%;
  max-width: 62.5rem; /* 1000px */
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 2.5rem 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.job-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.job-modal__title-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.job-modal__title-group img {
  flex-shrink: 0;
}

.job-modal__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--color-accent);
}

.job-modal__close {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.job-modal__section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.job-modal__section h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-accent);
}

.job-modal__section p {
  font-size: var(--fs-body);
  line-height: 1.625;
  color: #3a3a37;
}

.job-info-grid {
  display: flex;
  gap: 2.5rem;
}

.job-info-grid dl {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
}

.job-info-grid dt {
  font-size: var(--fs-body);
  color: #1c1c1a;
}

.job-info-grid dd {
  margin: 0;
  font-size: var(--fs-body);
  color: #1c1c1a;
}

.job-modal__requirements {
  list-style: disc;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.job-modal__requirements li {
  font-size: var(--fs-body);
  line-height: 1.625;
  color: #3a3a37;
}

.job-modal__apply {
  align-self: center;
  border-radius: var(--radius-md);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding: 7.5rem 0 2.5rem;
}

.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 3.75rem;
  margin-bottom: 3.75rem;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 24rem;
}

.footer__logo {
  font-size: 2.5rem;
  font-weight: 700;
}

.footer__brand > p {
  font-size: var(--fs-body-lg);
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer__contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--fs-body);
}

.footer__social {
  display: flex;
  gap: 1rem;
}

.footer__social a {
  transition: opacity var(--transition);
}

.footer__social a:hover {
  opacity: 0.75;
}

.footer__links {
  display: flex;
  gap: 4.5rem;
}

.footer__col h3 {
  font-size: var(--fs-body-lg);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 1.25rem;
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.footer__col a {
  font-size: var(--fs-body);
  transition: color var(--transition);
}

.footer__col a:hover {
  color: var(--color-accent);
}

.footer__col--areas {
  max-width: 17rem;
}

.footer__col--areas p {
  font-size: var(--fs-body);
  line-height: 1.625;
}

.footer__divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 2rem;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-body);
  flex-wrap: wrap;
  gap: 1rem;
}

.footer__bottom a {
  transition: color var(--transition);
}

.footer__bottom a:hover {
  color: var(--color-accent);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1199px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .footer__links {
    flex-wrap: wrap;
    gap: 2.5rem;
  }

  .how__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .comprehensive__columns {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .vehicle-types__grid {
    gap: 2.5rem 2.5rem;
  }

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

  .info-cards__row {
    flex-wrap: wrap;
  }

  .info-card {
    flex: 1 1 50%;
    padding: 1.75rem 1.5rem;
  }

  .info-card:nth-child(2)::after {
    display: none;
  }

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

@media (max-width: 991px) {
  .topbar__contact {
    gap: 1.25rem;
  }

  .topbar__item span {
    display: none;
  }

  /* Left/right split sections stack to a single column here instead of at
     1199px (moved down from the old @media (max-width: 1199px) breakpoint). */
  .about {
    flex-direction: column;
  }

  .about__content {
    box-sizing: border-box;
    max-width: 100%;
    padding: 3.75rem var(--container-padding);
  }

  .about__image img {
    min-height: 22rem;
  }

  .promo__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 2.5rem;
    padding-top: 5rem;
  }

  .promo__content {
    padding-bottom: 0;
  }

  .promo__image {
    justify-content: center;
  }

  .promo__image img {
    width: auto;
    max-height: 24rem;
    margin-bottom: 0;
  }

  .values__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }

  .values__image img {
    min-height: 18rem;
  }

  .footer__top {
    flex-direction: column;
    gap: 2.5rem;
  }

  .service-split__inner {
    flex-direction: column;
    gap: 2.5rem;
  }

  .service-split__content,
  .service-split__image {
    width: 100%;
  }

  .fleet-care__content {
    flex-direction: column;
    align-items: stretch;
    gap: 2.5rem;
  }

  .fleet-care__image {
    min-height: 22rem;
    order: -1; /* show the image above the accordion when stacked */
  }

  .billboard__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: 0;
    padding-block: 3rem 0;
  }

  .billboard__content {
    max-width: 100%;
    padding-bottom: 1rem;
  }

  .billboard__image {
    position: static;
    width: 100%;
    height: auto;
    justify-content: center;
  }

  .billboard__image img {
    height: auto;
    max-width: 32rem;
  }

  /* Worker drops below the copy and stops overlapping the CTA when stacked */
  .personalized {
    margin-top: 0;
    padding: 60px 0 0 0;
  }
.quote{
  padding: 60px 0;
}
  .personalized__inner {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .personalized__content {
    width: 100%;
    padding-top: 0;
  }

  .personalized__media {
    width: 100%;
    max-width: 28rem;
    height: 30rem;
  }

  .contact-quote__inner {
    flex-direction: column;
  }

  .mission__inner {
    flex-direction: column;
  }

  .mission__image {
    flex: none;
    width: 100%;
    aspect-ratio: auto;
  }

  .navbar__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0 var(--container-padding);
    box-shadow: 0 12px 24px rgba(17, 17, 26, 0.08);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }

  .navbar__links.is-open {
    max-height: 28rem;
    padding-block: 1rem;
  }

  .navbar__links > li {
    width: 100%;
  }

  .navbar__links > li > a {
    width: 100%;
    padding: 0.875rem 0;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
  }

  .has-dropdown .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    display: none;
    padding-left: 1rem;
  }

  .has-dropdown.is-open .dropdown {
    display: block;
  }

  .navbar__cta {
    display: none;
  }

  .navbar__toggle {
    display: flex;
  }
}

@media (max-width: 767px) {
  /* Site-wide mobile spacing spec: every section's vertical padding
     (--section-padding-y, used by padding-block on ~15 different
     <section> rules) and every .container's horizontal padding
     (--container-padding, the near-universal side-gutter wrapper) pin to
     a fixed 60px / 16px on mobile instead of the fluid clamp() used
     above 767px. Redefining the custom properties here cascades to every
     section/container automatically, without touching each rule. */
  :root {
    --section-padding-y: 60px;
    --container-padding: 16px;
  }

  /* Fixed mobile H1/H2 spec (site-wide), matching the design's mobile
     styles exactly rather than the fluid desktop scale used above 767px.
     !important is deliberate here: dozens of component-specific rules
     (e.g. .about__content h2, .service-split__content h2) set their own
     font-size/margin-bottom with higher specificity than a bare `h2`
     selector, and the point of this block is to unconditionally win over
     all of them on mobile, everywhere, without hunting down every one. */
  h1 {
    font-family: var(--font-base) !important;
    font-size: 2.125rem !important; /* 34px */
    font-weight: 800 !important;
    line-height: normal !important;
    letter-spacing: 0.0425rem !important; /* 0.68px */
    text-align: center !important;
    color: var(--color-white) !important;
  }
.section-header{
  gap: 0;
}
  h2 {
    font-family: var(--font-base) !important;
    font-size: 1.375rem !important; /* 22px */
    font-weight: 600 !important;
    line-height: 1.7rem !important;
    margin-bottom: 0.75rem !important; /* 12px, not the larger desktop gap */
    color: var(--color-primary) !important;
  }

  .footer__col--areas{
    max-width: 100% !important;
  }
  .values {
    padding-block: 4.25rem;
  }

  /* No prior mobile override existed for these two — both use a fixed
     desktop padding-block instead of var(--section-padding-y), so they
     fell through to their desktop value on mobile instead of the
     site-wide 60px. */
  .vehicle-types {
    padding-block: 60px;
  }

  .mission {
    padding-block: 60px;
  }

  .accordion__header h3 {
    font-size: 1.125rem; /* 18px */
  }

  .comprehensive__subtitle {
    font-size: 1.2rem;
  }

  /* These H2s are either on a dark/coloured background (navy text would
     be unreadable) or intentionally use the accent colour as a design
     choice unrelated to this mobile reset — keep their existing colour. */
  .about__content h2,
  .promo__content h2,
  .values__content h2,
  .quote__inner h2,
  .billboard__content h2,
  .schedule-cta__content h2,
  .cta-banner__inner h2 {
    color: var(--color-white) !important;
  }

  .service-split--accent .service-split__content h2,
  .contact-quote__col h2,
  .contact-note h2,
  .mission__block h2 {
    color: var(--color-accent) !important;
  }

  /* .section-header already spaces its h2 from the paragraph beneath it
     via flex `gap` (see .section-header rule above) — the bare `h2`
     margin-bottom above would stack on top of that gap and double the
     visible space. Zero it out here so gap is the only spacing source,
     matching desktop. */
  .section-header h2 {
    margin-bottom: 0 !important;
  }

  /* Trim button padding so paired CTAs (hero, about) sit side-by-side
     in a single row instead of wrapping onto separate lines. */
  .btn {
    padding: 0.875rem 1.5rem;
  }

  .hero {
    min-height: 38rem;
  }

  .quote {
    padding-block: 4rem;
  }

  .page-hero {
    min-height: 15rem;
  }

  .hero__actions,
  .about__actions {
    flex-wrap: nowrap;
    gap: 1rem;
  }

  .hero__actions .btn,
  .about__actions .btn {
    flex: 1;
    min-width: 0;
  }

  .value-card {
    padding: 1.5rem 1rem;
    gap: 1rem;
  }

  .value-card img {
    width: 2.5rem;
    height: 2.5rem;
  }

  .hero__content {
    padding-block: 5rem;
  }

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

  .services__grid--has-slider {
    display: none;
  }

  .services__slider {
    display: block;
  }

  .pagination.pagination--services {
    display: flex;
  }

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

  /* Scheduled Cleaning: worker drops below the copy and centres */
  .schedule-cta__inner {
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    min-height: 0;
    padding-block: 60px 0px 0px 0px;
  }

  .schedule-cta__content {
    max-width: 100%;
    align-items: center;
    text-align: center;
  }



  .schedule-cta__content > * {
    margin-bottom: 1.5rem;
  }

  .schedule-cta__content .btn {
    align-self: center;
  }

  .schedule-cta__worker {
    width: 18rem;
    height: 20.5rem;
  }

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

  .gallery__item {
    height: 16rem;
  }

  .gallery__grid--has-slider {
    display: none;
  }

  .gallery__slider {
    display: block;
    /* Full-bleed breakout so neighbouring slides peek in at the true
       screen edges, matching the mobile design — the heading/pagination/
       button above and below stay within .container. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  .pagination.pagination--gallery {
    display: flex;
  }

  /* 2x2 grid (matches the mobile design) instead of the desktop's single
     row + vertical dividers. The .stat__divider spans are `<span>` and
     the .stat cards are `<div>`, so `nth-of-type` on .stat only counts
     among the divs, unaffected by the (hidden) divider spans interleaved
     between them in the markup — that lets the left column get a
     divider without needing to touch the PHP markup. */
  .stats-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 2rem;
    column-gap: 1rem;
    padding: 2rem 1.5rem;
    margin-top: -3rem;
  }

  .stat {
    min-width: 0;
  }

  .stat:nth-of-type(odd) {
    position: relative;
  }

  .stat:nth-of-type(odd)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -0.5rem; /* half of column-gap, centres the line in the gutter */
    width: 1px;
    background-color: #e5e5e5;
  }

  .stat__icon {
    width: 3rem; /* 48px */
    height: 3rem;
  }

  .stat__number {
    font-size: 1.25rem; /* 20px */
  }

  .stat__label {
    font-family: var(--font-base);
    font-size: 0.875rem; /* 14px */
    color: var(--color-accent); /* #EF3E36 */
    text-align: center;
  }

  .stat__divider {
    display: none;
  }

  /* Value cards are compact (icon + one-word label) so they stay 2-up
     on mobile rather than wasting vertical space in a single column. */
  .values__grid {
    gap: 1rem;
  }

  .quote-form__row {
    flex-direction: column;
  }

  .quote-form input:not([type="submit"]) {
    height: auto;
  }

  /* White field with a visible border on mobile — same white fill as
     desktop, plus a border so each field reads clearly against the page. */
  .quote-form input:not([type="submit"]),
  .quote-form textarea {
    border: 1px solid rgba(0, 0, 0, 0.2);
  }

  /* Shrink the trailing icon buttons on every icon-variant form
     (quote-form--icons and contact-form) so they don't crowd narrow inputs. */
  .input-group__icon {
    width: 3.5rem;   /* 56px */
    height: 3.25rem; /* 52px */
  }

  .input-group input,
  .contact-form .input-group input {
    padding-right: 4.5rem;
  }

  .footer__links {
    flex-direction: column;
    gap: 2.5rem;
  }

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

  .chip {
    max-width: 100%;
  }

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

  .info-card {
    flex: 1 1 100%;
  }

  .info-card::after,
  .info-card:nth-child(2)::after {
    display: none;
  }

  .info-card:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  .contact-form__row {
    flex-direction: column;
  }

  .contact-form input:not([type="submit"]) {
    height: 70px;
  }

  /* Match .quote-form's mobile look (white field + visible border) so
     every form on the site is consistent on mobile. */
  .contact-form input:not([type="submit"]),
  .contact-form textarea {
    background-color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.2);
  }

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

  .job-modal {
    padding: 2rem 1.25rem;
    gap: 1.5rem;
  }

  .job-modal__title-group {
    gap: 1rem;
  }

  .job-modal__title {
    font-size: 1.5rem;
  }

  .job-info-grid {
    flex-direction: column;
    gap: 1.5rem;
  }

  .job-modal-overlay {
    padding: 2rem 1rem;
  }
  .page-hero{
    min-height: 18rem !important;
  }
}

@media (max-width: 480px) {
  .navbar__logo img {
    height: 2.25rem;
  }

  .hero__drop {
    display: none;
  }

  /* Smallest phones: trim CTA padding so the paired buttons still fit one row. */
  .hero__actions .btn,
  .about__actions .btn {
    padding: 0.75rem 1.25rem;
    font-size: var(--fs-small);
  }
}

/* ==========================================================================
   Contact Form 7 integration
   CF7 wraps every form in <div class="wpcf7"> and every text-type field in
   <span class="wpcf7-form-control-wrap">. Neither wrapper carries visual
   styling on its own, but their presence would break this theme's flex
   layouts (.quote__inner, .contact-quote__col, .input-group) since the
   actual <form>/<input> element would no longer be the direct flex child.
   display:contents removes each wrapper from the box model while keeping
   its children in place, so .quote-form, .contact-form, .input-group input
   etc. keep matching and laying out exactly as if CF7 weren't there.
   ========================================================================== */

.wpcf7 {
  display: contents;
}

.wpcf7-form-control-wrap {
  display: contents;
}

/* ==========================================================================
   Scroll Reveal (see initScrollReveal in main.js)
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

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