/* ==========================================================================
   PLUMBER-REDLINE — shared design tokens + components
   Extracted from azpservices.com (captured 2026-09-30: live DOM at 1440 +
   every theme stylesheet). Arizona plumbing, electrical and HVAC contractor.
   Charcoal and crimson, with a tertiary yellow that only ever marks things:
   check marks, list dots, licence-card edges, step numbers, the quote disc.
   The signature is the slant: a crimson gap cut diagonally between two
   charcoal panels, repeated in the hero, the licence band and the areas
   panel, plus white pills welded to crimson icon discs.

   Class names are the source theme's own (AZSVC), so a pattern lifted out of
   this kit keeps the name it carries on the live site. Token names are the
   theme's too: --primary is charcoal, --secondary is crimson.

   Type: Poppins on every heading (self-hosted by the source, free on Google
   Fonts, no substitute needed). Body copy is the system font stack, because
   that is what renders: the theme declares Poppins for body, but Bootstrap's
   `body { font-family: var(--bs-font-sans-serif) }` wins, and 144 of 197
   sampled elements paint in system-ui. Kept as rendered, on Jarrett's call.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
  /* COLOR — brand (theme general/defaults.css, all confirmed painting) */
  --primary: #232323;             /* charcoal: 2,959,716 px² on the homepage */
  --secondary: #c11e33;           /* crimson: 2,063,966 px², 30 text elements */
  --tertiary: #fad804;            /* yellow marker */
  --white: #fff;
  --black: #000;
  --gray: #707070;                /* 19 text elements: card copy, labels */
  --light-gray: #cecece;
  --body-ink: #212529;            /* Bootstrap body colour, as rendered */

  /* COLOR — tints the theme hard-codes, tokenised so palettes can follow */
  --band-grey: #f4f4f4;           /* .intro-sctn ground */
  --accent-tint: #faedef;         /* mission cards: crimson at ~8% */
  --accent-glow: rgba(193, 30, 51, .26);   /* step disc shadow */
  --accent-on-dark: #e65d6e;      /* crimson lifted to 4.6:1 on charcoal: coupon lines (source 2.62:1) */
  --wash: rgba(255, 255, 255, .65);        /* photo wash, theme #ffffffa6 */
  --stars: #ffe600;

  /* TYPE */
  --font-head: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif;

  /* TYPE — the theme's own fluid scale, verbatim */
  --font-size--h1: clamp(24px, 3vw, 48px);
  --font-size--h2: clamp(18px, 1.8vw, 28px);
  --font-size--h3: clamp(23px, 3vw, 36px);
  --font-size--h4: clamp(20px, 2.2vw, 26px);
  --font-size--h5: clamp(18px, 2.2vw, 24px);
  --font-size--h6: clamp(18px, 1.9vw, 21px);
  --font-size--big: clamp(28px, 3.5vw, 62px);

  /* LAYOUT — theme .container max 1250, wide bands 1364 */
  --container: 1250px;
  --container-wide: 1364px;

  /* RADII — extracted census: pills 100px, cards 23/20px, form card 35px,
     licence cards 11px, hero form 12px */
  --radius-pill: 100px;
  --radius-card: 23px;
  --radius-soft: 20px;
  --radius-panel: 35px;
  --radius-tag: 11px;

  /* SHADOW — the theme's four, verbatim */
  --shadow-card: 0 0 30px #0000005e;
  --shadow-soft: 0 0 20px 0 #0000001c;
  --shadow-float: 0 0 40px #00000029;
  --shadow-disc: 0 0 20px 0 #00000061;

  /* RUNTIME — opt into the shared sticky call bar (phone-driven trade) */
  --ds-callbar: 1;
}

/* ==========================================================================
   RESET + BASE
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--white);
  color: var(--body-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--secondary); text-decoration: none; }
p { margin: 0 0 1rem; }
ul { margin-top: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5rem;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: break-word;
}
h1 { font-size: 48px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

.h1-style { font-family: var(--font-head); font-weight: 700; font-size: var(--font-size--h1); }
.h2-style { font-family: var(--font-head); font-weight: 700; font-size: var(--font-size--h2); }
.h3-style { font-family: var(--font-head); font-weight: 700; font-size: var(--font-size--h3); }
.h4-style { font-family: var(--font-head); font-weight: 700; font-size: var(--font-size--h4); }
.h5-style { font-family: var(--font-head); font-weight: 700; font-size: var(--font-size--h5); }
.h6-style { font-family: var(--font-head); font-weight: 700; font-size: var(--font-size--h6); }

/* The homepage runs every .h1-style at 35px (theme `#home-page .h1-style`).
   .page-home sits on the homepage body and on catalog demos cited to /. */
.page-home .maintitle.h1-style,
.page-home .h1-style { font-size: clamp(26px, 2.4vw, 35px); }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 2rem; }
@media (max-width: 800px) { .container { padding: 0 15px; } }

/* Theme section scaffold: every band is a centred flex row. */
.section {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  padding-left: 16px;
  padding-right: 16px;
  background-size: cover;
}
.section-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--container);
}
.inner-col { position: relative; }
.entry p:last-child { margin-bottom: 0; }

/* ==========================================================================
   ICONS — theme sspider/defaults.css: 1em, currentColor
   ========================================================================== */

.icon { display: inline-block; line-height: 1; }
.icon svg { width: 1em; height: 1em; vertical-align: middle; display: inline-block; transform: translateY(-1px); }
.icon svg path { fill: currentColor; }

/* ==========================================================================
   BUTTONS — theme defaults.css. Pills (100px), system font at weight 200,
   6px x 30px. Every hover is a ground/ink swap, transcribed, not invented.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 200;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all .3s ease;
}
.btn-text { display: inline-flex; align-items: center; gap: 8px; }
.btn .icon svg { width: 16px; height: 16px; }

.btn--red { background: var(--secondary); border-color: var(--secondary); color: var(--white); }
.btn--red:hover { background: var(--white); color: var(--secondary); }
.btn--white { background: var(--white); border-color: var(--secondary); color: var(--secondary); }
.btn--white:hover { background: var(--secondary); color: var(--white); }
.btn--black { background: var(--primary); border-color: var(--primary); color: var(--white); }
.btn--black:hover { background: var(--secondary); }
.btn--yellow { background: var(--tertiary); border-color: var(--black); color: var(--black); }
.btn--yellow:hover { background: var(--black); color: var(--tertiary); }

.button-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: center; }
.button-item { display: flex; }

/* ==========================================================================
   BRAND NAV — theme general/header.css + header-megamenu.css.
   White sticky bar: logo left, links + two pill buttons right. "Plumbing"
   opens the source's mega menu (crimson top rule, crimson footer strip).
   House shape: .nav > .container > .brand-mark / .nav-links / .actions.
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
}
.nav > .container {
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 1rem 64px;
}
.nav .brand-mark { display: flex; flex: none; }
.nav .brand-mark img { width: 120px; height: auto; filter: drop-shadow(2px 4px 6px #00000030); }
.nav .nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
}
.nav .nav-links > li { position: relative; }
.nav .nav-links > li > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--primary);
  transition: color .25s ease;
}
.nav .nav-links > li > a:hover { color: var(--secondary); }
.nav .nav-links .has-menu > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin: -4px 0 0 6px;
  opacity: .5;
  transition: transform .25s ease;
}
.nav .nav-links .has-menu:hover > a::after { transform: rotate(225deg); margin-top: 2px; }
.nav .actions { display: flex; gap: 1rem; align-items: center; flex: none; }

.mm {
  position: absolute;
  top: 100%;
  left: 0;
  width: 1100px;
  max-width: calc(100vw - 60px);
  background: var(--white);
  border-top: 4px solid var(--secondary);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .12), 0 4px 10px rgba(0, 0, 0, .06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index: 60;
  overflow: hidden;
}
.has-menu:hover .mm, .mm:hover { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.mm-inner {
  padding: 32px 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px 40px;
}
.mm-col h4 {
  font-family: var(--font-head);   /* theme var(--font-family--body) = Poppins here */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--secondary);
  padding-bottom: 12px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--light-gray);
}
.mm-list { list-style: none; margin: 0; padding: 0; }
.mm-list li { margin-bottom: 4px; }
.mm-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--primary);
  transition: all .15s ease;
}
.mm-list a::before { content: ""; width: 6px; height: 2px; background: var(--secondary); flex-shrink: 0; transition: width .2s ease; }
.mm-list a:hover { color: var(--secondary); transform: translateX(2px); }
.mm-list a:hover::before { width: 14px; }
.mm-footer {
  background: var(--secondary);
  color: var(--white);
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mm-footer__lead { color: var(--white); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 12px; }
.mm-footer__lead:hover { opacity: .85; }
.mm-footer__lead .icon svg { width: 18px; height: 18px; }
.mm-footer__cta {
  background: var(--white);
  color: var(--secondary);
  padding: 8px 24px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: all .2s ease;
}
.mm-footer__cta:hover { background: var(--tertiary); color: var(--primary); transform: translateX(2px); }

@media (max-width: 1300px) {
  .nav > .container { padding: 1rem 32px; gap: 24px; }
  .nav .nav-links { gap: 20px; }
}
@media (max-width: 1100px) {
  .nav .actions .btn { padding: 6px 18px; }
}

/* ==========================================================================
   01 HERO — top-banner (theme heros/home-hero.css)
   Two clipped panels that overlap: a charcoal texture panel cut at 85% on
   the right, and the photo panel cut at 15% on the left, so the slant
   reads as one diagonal seam. The quote card floats on the photo with the
   yellow calculator disc breaking its top edge.
   ========================================================================== */

.section.top-banner { padding: 0; z-index: 2; background: var(--primary); }
.top-banner .section-wrap { max-width: 100%; align-items: stretch; flex-wrap: nowrap; }
.top-banner .title-col {
  width: 55%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--white);
  padding: 10% 5% 6% 72px;
  background-color: var(--primary);
  background-image: url('assets/plumber-redline-brand/photo-hero-texture.jpg');
  background-size: cover;
  background-position: center;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  z-index: 1;
}
.top-banner .title-inn { max-width: 720px; margin-left: auto; }
.top-banner .maintitle { font-size: var(--font-size--big); margin-bottom: 8px; color: var(--white); }
.top-banner .maintitle .sp-main { font-weight: 500; display: block; }
.top-banner .subtitle { font-weight: 400; color: var(--white); }
.top-banner .btn-col { display: flex; gap: 20px; }
.top-banner .btn-col .button-row { margin-top: 15px; justify-content: flex-start; }
.top-banner .btn-col .btn { min-width: 220px; }
.top-banner .form-col {
  position: relative;
  width: 65%;
  margin-left: -20%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 3.5% 12% 3% 0;
  background: var(--primary);
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
}
.top-banner .form-col > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.top-banner .form-inn {
  position: relative;
  z-index: 9;
  background: var(--white);
  color: var(--body-ink);
  box-shadow: 0 0 40px #00000029;
  border-radius: 12px;
  max-width: 400px;
  padding: 24px;
}
.top-banner .title-form { display: flex; gap: 8px; }
.top-banner .title-form .title { color: var(--primary); }
.top-banner .title-form .icon-col {
  min-width: 112px;
  height: 112px;
  background: var(--tertiary);
  color: var(--primary);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--white);
  box-shadow: 0 0 20px 0 #00000070;
  margin-top: -14%;
}
.top-banner .title-form .icon-col svg { width: 45px; height: auto; }

@media (max-width: 1150px) { .top-banner .form-col { padding-right: 32px; padding-left: 20%; } }
@media (max-width: 1024px) {
  .top-banner .title-col { padding: 32px 10% 32px 48px; clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%); }
  .top-banner .btn-col .button-row { flex-wrap: wrap; gap: 8px; }
  .top-banner .form-col { padding-top: 32px; padding-bottom: 32px; }
}
@media (max-width: 800px) {
  .top-banner .section-wrap { flex-wrap: wrap; }
  .top-banner .title-col { width: 100%; clip-path: none; text-align: center; padding: 32px; background-image: none; background-color: #232323f2; }
  .top-banner .title-inn { margin-right: auto; }
  .top-banner .btn-col .button-row { justify-content: space-evenly; max-width: 500px; margin-left: auto; margin-right: auto; }
  .top-banner .form-col { width: 100%; margin: 0; clip-path: none; padding: 56px 32px 32px; justify-content: center; background: var(--white); }
  .top-banner .form-col > img { display: none; }
}
@media (max-width: 505px) {
  .top-banner .btn-col .btn { width: 80%; min-width: 0; }
  .top-banner .title-col { padding-left: 16px; padding-right: 16px; }
  .top-banner .form-col { padding-left: 16px; padding-right: 16px; }
  .top-banner .title-form .icon-col { min-width: 80px; height: 80px; }
  .top-banner .title-form .icon-col svg { width: 35px; }
}

/* ==========================================================================
   02 INTERNAL TITLE BAR — theme heros/internal-hero.css. Crimson band with a
   charcoal block over its middle 80%, so crimson shows as two side bars.
   ========================================================================== */

.internal-title-bar.section { padding: 0; margin-bottom: 30px; background: var(--secondary); }
.internal-title-bar .inner-col {
  background: var(--primary);
  color: var(--white);
  font-size: clamp(18px, 3.5vw, 54px);
  padding: 32px 15%;
  min-height: 200px;
  align-items: center;
  width: 80%;
  text-align: center;
}
.internal-title-bar .title-row { display: flex; justify-content: center; align-items: center; }
.internal-title-bar .maintitle { margin: 20px 0 0; line-height: 1; font-size: 1em; color: var(--white); }
.internal-title-bar .icon-col { line-height: .5; font-size: 75px; margin-right: 15px; color: var(--tertiary); }
.internal-title-bar .icon-col svg path { fill: currentColor; }
@media (max-width: 1024px) {
  .internal-title-bar .inner-col { min-height: 150px; padding: 16px 8%; width: 86%; }
}

/* ==========================================================================
   03 INTRO HEADING — icon-cols / services-sctn (theme flex/icon_columns.css).
   Centred company line, then a second line framed by crimson rules that end
   in a hose nozzle and a plug: plumbing on one end, electrical on the other.
   ========================================================================== */

.section.services-sctn { padding-left: 0; padding-right: 0; }
.icon-cols.services-sctn { margin-top: clamp(32px, 4%, 72px); }
.services-sctn .title-col { width: 100%; max-width: var(--container); padding: 0 16px; margin: 0 auto; }
.services-sctn .maintitle { color: var(--primary); text-align: center; margin-bottom: 8px; }
.services-sctn .maintitle .sp-main { display: flex; align-items: center; }
.services-sctn .sp-main .icon { flex: none; color: var(--primary); }
.services-sctn .sp-main .icon.hose-nozzle svg { width: 49px; height: auto; margin-top: -10px; }
.services-sctn .sp-main .icon.plug svg { width: 40px; height: auto; }
.services-sctn .maintitle .txt { display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 2px; }
.services-sctn .maintitle .txt::before,
.services-sctn .maintitle .txt::after { content: ""; height: 6px; background: var(--secondary); display: block; flex-grow: 1; min-width: 20px; }
.services-sctn .sp-title { text-align: center; color: var(--secondary); margin-bottom: 30px; }
.services-sctn .title-col ul { list-style: none; display: flex; justify-content: center; gap: 20px; margin: 0 0 5%; padding: 0; }
.services-sctn .title-col ul li { display: flex; gap: 4px; }
.services-sctn .title-col ul li .icon svg { width: 51px; height: 51px; color: var(--secondary); }
.services-sctn .title-col ul li .text { color: var(--gray); font-weight: 600; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.2; }
@media (max-width: 800px) {
  .services-sctn .title-col ul { flex-wrap: wrap; }
  .services-sctn .title-col ul li { width: 45%; }
}
@media (max-width: 500px) {
  .services-sctn .sp-main .icon.hose-nozzle svg { width: 29px; margin-top: -8px; }
  .services-sctn .sp-main .icon.plug svg { width: 22px; }
  .services-sctn .maintitle .txt { gap: 2px; }
  .services-sctn .title-col ul li { width: 100%; }
  .services-sctn .title-col ul { max-width: 330px; margin-left: auto; margin-right: auto; }
}

/* ==========================================================================
   04 DIAGONAL SERVICE SPLIT — two-col-diag-gap (theme flex/
   two_column_content_diagonal_gap.css). The section ground is crimson; two
   charcoal gradient panels are clipped at 90% / 10% so the crimson shows as
   a single slanted stripe. Each panel ends in a white half-pill welded to a
   176px crimson icon disc.
   ========================================================================== */

.two-col-diag-gap { background: var(--secondary); }
.services-sctn .service-col.service-1,
.services-sctn .service-col.service-2 { width: 50%; color: var(--white); background-color: var(--black); }
.services-sctn .service-col.service-1 {
  margin-right: auto;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
  background-image: linear-gradient(90deg, #000 0%, var(--primary) 100%);
  padding: 4% 6% 4% 0;
}
.services-sctn .service-col.service-2 {
  margin-left: -10%;
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
  background-image: linear-gradient(270deg, #000 0%, var(--primary) 100%);
  padding: 4% 0 4% 6%;
}
.services-sctn .service-1 .service-inn { max-width: 530px; margin-left: auto; padding-left: 20px; }
.services-sctn .service-2 .service-inn { max-width: 530px; margin-left: 15%; padding-right: 20px; }
.services-sctn .service-col .subtitle { color: var(--white); }
.services-sctn .service-col .sp-sub-1 { display: block; font-size: var(--font-size--h1); }
.services-sctn .service-col ul { list-style: none; padding: 0; margin: 0; }
.services-sctn .service-col ul li { display: flex; gap: 4px; font-size: clamp(16px, 1.3vw, 18px); }
.services-sctn .service-col ul li .icon svg { width: 15px; height: 15px; color: var(--tertiary); }
.services-sctn .muchmore-col {
  background: var(--white);
  color: var(--secondary);
  margin-top: 52px;
  padding: 20px 5% 20px 5%;
  display: flex;
  align-items: center;
  gap: 5%;
  font-size: clamp(13px, 1.2vw, 18px);
  font-weight: 600;
}
.services-sctn .service-1 .muchmore-col { border-radius: 0 100px 100px 0; }
.services-sctn .service-2 .muchmore-col { border-radius: 100px 0 0 100px; flex-direction: row-reverse; }
.services-sctn .muchmore-col .icon-col {
  flex: none;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid var(--white);
  background: var(--secondary);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-disc);
  margin: -56px 0;
}
.services-sctn .muchmore-col .icon svg { width: 80px; height: auto; }
.services-sctn .muchmore-col .icon svg path { fill: currentColor; }
.services-sctn .muchmore-col .p-big { display: block; font-size: 20px; font-weight: 600; }
@media (min-width: 1441px) {
  .services-sctn .muchmore-col .icon-col { width: 176px; height: 176px; }
  .services-sctn .muchmore-col .icon svg { width: 115px; }
}
@media (max-width: 1024px) and (min-width: 801px) {
  .services-sctn .muchmore-col .icon-col { width: 100px; height: 100px; }
  .services-sctn .muchmore-col .icon svg { width: 70px; }
}
@media (max-width: 800px) {
  .services-sctn .service-col.service-1 { width: 96%; margin-bottom: 52px; clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%); padding: 40px 10% 40px 0; }
  .services-sctn .service-col.service-2 { width: 96%; margin-left: auto; clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%); padding: 40px 0 40px 10%; }
  .services-sctn .service-2 .service-inn { margin-left: 0; }
  .services-sctn .muchmore-col .icon-col { width: 100px; height: 100px; }
  .services-sctn .muchmore-col .icon svg { width: 64px; }
}
@media (max-width: 500px) {
  .services-sctn .service-col.service-1 { width: 100%; padding: 40px 32px 72px 0; clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%); margin-bottom: 20px; }
  .services-sctn .service-col.service-2 { width: 100%; padding: 72px 0 40px 32px; clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%); }
}
@media (max-width: 450px) {
  .services-sctn .muchmore-col,
  .services-sctn .service-2 .muchmore-col { flex-direction: column; text-align: center; padding: 20px; }
  .services-sctn .muchmore-col .icon-col { margin-bottom: 0; }
}

/* ==========================================================================
   05 / 06 BLACK ICON CARDS — whyus-sctn (theme flex/black_icon_content_cards
   .css). Charcoal 23px cards, each crowned by a 175px white icon disc that
   hangs 120px above the card. The ground is a photo washed out by a
   white-transparent-white gradient plus a 65% white overlay. The promotions
   variant drops the disc and runs as the Seasonal Specials coupon cards.
   ========================================================================== */

.section.whyus-sctn { padding-top: 4%; padding-bottom: 4%; isolation: isolate; }
.whyus-sctn .gradient-bg { position: absolute; z-index: 1; inset: 0; background-size: cover; background-position: center; }
.whyus-sctn .image-overaly--white { position: absolute; z-index: 2; inset: 0; background: var(--wash); }
.whyus-sctn .section-wrap { justify-content: space-evenly; position: relative; z-index: 9; }
.whyus-sctn .title-col { width: 100%; }
.whyus-sctn .maintitle { color: var(--secondary); text-align: center; }
.whyus-sctn .maintitle .sp-main { display: block; font-weight: 400; font-size: clamp(20px, 2.4vw, 35px); }
.whyus-sctn .whyus-col {
  width: 30%;
  background: var(--primary);
  color: var(--white);
  text-align: center;
  padding: 25px 20px;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 130px;
}
.whyus-sctn .whyus-col .subtitle { color: var(--white); }
.whyus-sctn .whyus-col p { color: var(--white); }
.whyus-sctn .whyus-col a,
.whyus-sctn .whyus-col a:hover { color: var(--white); text-decoration: underline; font-weight: 700; }
.whyus-sctn .icon-col {
  background: var(--white);
  color: #000;
  box-shadow: var(--shadow-card);
  width: 175px;
  height: 175px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -120px 0 20px;
  border-radius: 50%;
}
.whyus-sctn .icon-col svg { width: 120px; height: 100px; }
.whyus-col ul { display: inline-block; text-align: left; list-style: none; padding-left: 2rem; margin: 0 0 1rem; }
.whyus-col li { padding-left: 1.25rem; text-indent: -1.25rem; margin-bottom: 10px; }
.whyus-col ul > li::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--tertiary);
  display: inline-block;
  border-radius: 100px;
  margin-right: 8px;
}
@media (max-width: 992px) {
  .whyus-sctn .whyus-col { width: 45%; }
}
@media (max-width: 500px) {
  .whyus-sctn .whyus-col { width: 100%; margin-top: 90px; }
  .whyus-sctn .icon-col { width: 120px; height: 120px; margin-top: -90px; }
  .whyus-sctn .icon-col svg { width: 60px; height: 80px; }
}

/* promotions (theme flex/promotions.css). The source runs this as a Splide
   slider; the kit lays three cards edge to edge on desktop and degrades to a
   scroll-snap rail on narrow screens. */
.promotions .inner-col { text-align: center; }
.promotions__slider { width: 100%; max-width: 1070px; margin: 0 auto; }   /* source slide track width at 1440 */
.promo-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.promotions .whyus-col.promo__slide { width: auto; margin-top: 10px; box-shadow: none; }
.promotions .deal-subheader { font-size: var(--font-size--h6); color: var(--accent-on-dark); margin: 1rem 0; }
.promotions .start-saving {
  color: var(--accent-on-dark);
  margin-bottom: 5px;
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
}
.promotions .section-wrap > p { max-width: 1100px; margin: 0 auto 10px; color: var(--body-ink); }
@media (max-width: 880px) {
  .promo-list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(340px, 82vw);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 8px;
  }
  .promo-list > * { scroll-snap-align: start; min-width: 0; }
}

/* ==========================================================================
   07 LICENCE BAND — two-col-vert-cards (theme flex/two_column_content_
   vertical_cards.css). Crimson section; a charcoal gradient layer clipped
   95% -> 90% leaves a crimson wedge on the right. Licence numbers sit in
   white 11px cards with a 20px yellow edge.
   ========================================================================== */

.section.licenses-sctn {
  z-index: 3;
  isolation: isolate;
  background: var(--secondary);
  color: var(--white);
  padding: clamp(32px, 6%, 100px) 12% clamp(32px, 6%, 100px) 30px;
}
.two-col-vert-cards__background {
  position: absolute;
  inset: 0;
  background-color: var(--black);
  background-image: linear-gradient(90deg, #000 0%, var(--primary) 100%);
  clip-path: polygon(0 0, 95% 0, 90% 100%, 0 100%);
  z-index: -1;
}
.licenses-sctn .section-wrap { max-width: var(--container-wide); justify-content: space-between; flex-wrap: nowrap; gap: 0; }
.licenses-sctn .text-col { width: 45%; padding-right: 52px; }
.licenses-sctn .maintitle { color: var(--white); }
.licenses-sctn .text-col p { color: var(--white); }
.licenses-sctn .btn-col .button-row { justify-content: flex-start; gap: 12px; }
.licenses-sctn .btn-col .btn { width: 200px; }
.licenses-sctn .list-col { width: 55%; max-width: 670px; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.licenses-sctn .list { position: relative; background: var(--white); color: var(--secondary); border-radius: var(--radius-tag); }
.licenses-sctn .list p { margin: 0; padding: 20px 32px; color: var(--secondary); }
.licenses-sctn .list::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 100%;
  background: var(--tertiary);
  border-radius: 11px 0 0 11px;
}
@media (max-width: 1024px) and (min-width: 801px) {
  .licenses-sctn .btn-col .btn { width: 100%; }
}
@media (max-width: 800px) {
  .two-col-vert-cards__background { clip-path: none; }
  .licenses-sctn .section-wrap { flex-wrap: wrap; justify-content: center; }
  .licenses-sctn .text-col { width: 100%; padding-right: 0; text-align: center; }
  .licenses-sctn .list-col { width: 100%; max-width: 450px; }
  .licenses-sctn .btn-col .button-row { justify-content: space-evenly; margin-bottom: 32px; }
}
@media (max-width: 500px) {
  .section.licenses-sctn { padding: 40px 16px 72px; clip-path: polygon(0 0, 100% 0, 100% 98%, 0 100%); }
  .licenses-sctn .btn-col .btn { width: auto; flex-grow: 1; }
  .licenses-sctn .btn-col .button-item { flex: 1 1 100%; }
}

/* ==========================================================================
   08 ABOUT, FLUSH IMAGE — two-col-flush-img (theme flex/two_column_content_
   edge_flush_image.css). The collage bleeds off the right edge (img-col is
   100% wide with -50% margin) and a charcoal 32px logo tile sits over it.
   ========================================================================== */

.section.about-sctn { padding-top: clamp(32px, 6%, 100px); padding-bottom: 20px; z-index: 1; overflow: hidden; }
.about-sctn .section-wrap { flex-wrap: nowrap; }
.about-sctn .text-col { width: 50%; flex: none; display: flex; flex-direction: column; justify-content: center; }
.about-sctn .maintitle { color: var(--secondary); font-size: var(--font-size--big); margin-bottom: 8px; }
.about-sctn .entry h3 { color: var(--primary); }
.about-sctn .button-row { justify-content: flex-start; }
.about-sctn .btn { width: 250px; }
.about-sctn .img-col { width: 100%; margin-right: -50%; margin-top: -9%; position: relative; }
.about-sctn .logo-col {
  position: absolute;
  bottom: 23%;
  left: 9%;
  max-width: 364px;
  padding: 32px;
  border-radius: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--black);
  background-image: linear-gradient(90deg, #000 0%, var(--primary) 100%);
}
.about-sctn .img-col:not(:has(.about-main-img)) .logo-col { position: relative; inset: auto; margin: 9% auto 0 9%; }
@media (max-width: 1200px) {
  .about-sctn .img-col { width: 60%; margin-right: -10%; margin-top: -5%; }
  .about-sctn .logo-col { max-width: 250px; }
}
@media (max-width: 800px) {
  .about-sctn .section-wrap { flex-wrap: wrap; }
  .about-sctn .text-col { width: 100%; text-align: center; margin-bottom: 32px; }
  .about-sctn .button-row { justify-content: center; }
  .about-sctn .img-col { width: 100%; margin: 0; padding: 30px; }
  .about-sctn .about-main-img { display: none; }
  .about-sctn .logo-col,
  .about-sctn .img-col:not(:has(.about-main-img)) .logo-col { position: relative; inset: auto; width: 100%; margin: 0 auto; }
}
@media (max-width: 400px) { .about-sctn .logo-col { max-width: 200px; padding: 16px; } }

/* ==========================================================================
   09 CALL-TO-ACTION BAND — cta-banner (theme flex/cta.css). Photo under a
   white-to-clear gradient, crimson headline, two large pills.
   ========================================================================== */

.cta-banner.section { padding-top: 5%; padding-bottom: 5%; isolation: isolate; }
.cta-banner .cta-bg { position: absolute; z-index: -1; inset: 0; background-size: cover; background-position: center top; }
.cta-banner .section-wrap { flex-direction: column; align-items: center; }
.cta-banner .maintitle { text-align: center; color: var(--secondary); font-size: clamp(23px, 3.3vw, 64px); }
.cta-banner .btn-col { width: 100%; }
.cta-banner .btn-col .button-row { gap: 14px; }
.cta-banner .btn-col .button-item { width: 100%; max-width: 250px; }
.cta-banner .btn { width: 100%; padding: 20px 48px; font-size: 1.25rem; }
.cta-banner .btn .icon svg { width: 18px; height: 18px; }
/* Homepage CTA runs taller (theme `#home-page .cta-banner.section`, less its overlap). */
@media (min-width: 501px) {
  .page-home .cta-banner.section { padding-top: 6%; padding-bottom: 115px; }
}
@media (max-width: 500px) {
  .cta-banner.section { padding-bottom: 80px; }
  .cta-banner .btn { padding: 16px 32px; font-size: 1.1rem; }
}

/* ==========================================================================
   10 SIGNS BAND — two-col-decor-seperator (theme flex/two_column_content_
   decoration_seperator.css). Charcoal; between copy and list a vertical
   4px crimson rule capped by a plug and a hose nozzle; yellow dot bullets.
   ========================================================================== */

.signs-sctn.section { padding: 70px 40px 125px; background: var(--primary); color: var(--white); }
.signs-sctn .section-wrap { max-width: var(--container-wide); flex-wrap: nowrap; }
.signs-sctn .text-col { width: 42%; }
.signs-sctn .maintitle { font-size: clamp(23px, 3vw, 43px); color: var(--white); }
.signs-sctn .text-col p { margin: 0; color: var(--white); }
.signs-sctn .iconos-col {
  width: 17%;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 0 14px;
  color: var(--white);
}
.signs-sctn .iconos-col::after {
  content: "";
  position: absolute;
  top: 43px;
  left: calc(50% - 2px);
  width: 4px;
  height: calc(100% - 100px);
  background: var(--secondary);
}
.signs-sctn .iconos-col .icon { transform: rotate(-90deg); }
.signs-sctn .iconos-col .icon svg { width: 30px; height: 30px; }
.signs-sctn .iconos-col .icon.hose-nozzle { transform: rotate(-90deg) translate(10px, -5px); }
.signs-sctn .iconos-col .icon.hose-nozzle svg { width: 35px; }
.signs-sctn .list-col {
  width: 41%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 23px;
}
.signs-sctn .list-col > li { display: flex; align-items: center; padding-bottom: 10px; color: var(--white); }
.signs-sctn .list-col > li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--tertiary);
  border-radius: 100px;
  margin-right: 8px;
}
@media (max-width: 1200px) { .signs-sctn .list-col { font-size: 16px; } }
@media (max-width: 800px) {
  .signs-sctn.section { padding: 50px 25px 80px; }
  .signs-sctn .section-wrap { flex-wrap: wrap; justify-content: center; }
  .signs-sctn .text-col { width: 100%; text-align: center; margin-bottom: 20px; }
  .signs-sctn .list-col { width: 100%; max-width: 350px; }
  .signs-sctn .iconos-col { width: 100%; flex-direction: row; margin-bottom: 20px; min-height: 40px; }
  .signs-sctn .iconos-col::after { height: 4px; width: calc(100% - 121px); left: 60px; top: calc(50% - 2px); }
  .signs-sctn .iconos-col .icon { transform: rotate(180deg); }
  .signs-sctn .iconos-col .icon.hose-nozzle { transform: none; }
  .signs-sctn .list-col > li { align-items: flex-start; }
  .signs-sctn .list-col > li::before { margin-top: 7px; }
}

/* ==========================================================================
   11 FAQ ACCORDION — accordion / faq-sctn (theme flex/accordion.css). A
   crimson half-pill title bar anchored left, a white disc with the speech-
   bubble question icon breaking out of it, then hairline-ruled <details>.
   ========================================================================== */

.faq-sctn.section { padding: 4% 0 2%; }
.faq-sctn .section-wrap { max-width: none; }
.faq-sctn .title-col {
  width: 100%;
  max-width: 1200px;
  margin: 40px auto 0 0;
  display: flex;
  align-items: center;
  gap: 20px;
  padding-left: 7%;
  background: var(--secondary);
  border-radius: 0 100px 100px 0;
}
.faq-sctn .title-col .title { color: var(--white); padding: 20px 20px 20px 0; }
.faq-sctn .title-col .maintitle { margin: 0; color: var(--white); }
.faq-sctn .title-col .maintitle .sp-main { display: block; font-weight: 500; }
.faq-sctn .icon-col {
  flex: none;
  width: clamp(96px, 11vw, 150px);
  aspect-ratio: 1 / 1;
  margin: -30px 0;
  padding: 20px;
  background: var(--white);
  color: var(--secondary);
  border: 1px solid var(--secondary);
  border-radius: 1000px;
  box-shadow: 0 0 11px 0 rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq-sctn .icon-col .icon,
.faq-sctn .icon-col .icon svg { width: 100%; height: 100%; }
.faq-sctn .icon-col .icon svg path { fill: none; }
.tggl-col { width: 100%; max-width: var(--container-wide); padding: 70px 20px; margin: 0 auto; }
.faq-sctn details { border-bottom: 1px solid var(--gray); margin-bottom: 10px; padding-bottom: 6px; width: 100%; }
.faq-sctn summary { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-bottom: 5px; cursor: pointer; list-style: none; }
.faq-sctn summary::-webkit-details-marker { display: none; }
.faq-sctn summary::after {
  content: "+";
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  padding-bottom: 5px;
  border: 1px solid var(--gray);
  border-radius: 100px;
  color: var(--secondary);
  font-size: 32px;
  font-weight: 400;
  line-height: 7px;
}
.faq-sctn details[open] > summary::after { content: "-"; }
.tggl-col h4 { margin: 0; font-size: 16px; font-weight: 600; color: var(--gray); }
.faq-sctn .entry p { color: var(--body-ink); }
@media (max-width: 800px) {
  .faq-sctn.section { padding: 15% 0 2%; }
  .faq-sctn .title-col .title { padding: 10px 10px 10px 0; }
}
@media (max-width: 500px) {
  .faq-sctn .title-col { margin-top: 0; border-radius: 0; flex-direction: column; justify-content: center; text-align: center; gap: 5px; padding: 0 14px; }
  .faq-sctn .icon-col { margin: -30px 0 0; }
  .tggl-col { padding: 34px 17px; }
}

/* ==========================================================================
   12 CONTACT FORM CARD — form / contact-sctn (theme flex/form.css). A 35px
   white card floating on a faint photo; copy left, form right. Fields are
   the theme's Gravity Forms skin: 30px pills with a 1px crimson border and
   a black pill submit.
   ========================================================================== */

.contact-sctn.section { padding: 90px 20px; isolation: isolate; }
.contact-sctn .form-bg { position: absolute; z-index: -1; inset: 0; background-size: cover; background-position: center; }
.contact-sctn .container { padding: 0; }
.contact-sctn .section-wrap {
  background: var(--white);
  padding: 40px 6%;
  border-radius: var(--radius-panel);
  box-shadow: 0 0 19px 0 rgba(0, 0, 0, .35);
  max-width: var(--container-wide);
  justify-content: space-between;
  align-items: center;
}
.contact-sctn .text-col { width: 45%; }
.contact-sctn .form-col { width: 50%; }
.contact-sctn .text-col p { margin: 0; }
.contact-sctn .text-col .maintitle { font-size: clamp(24px, 3vw, 40px); line-height: 1.1; margin-bottom: 20px; color: var(--primary); }
.contact-sctn .text-col .maintitle > span { display: block; }
.contact-sctn .text-col .maintitle > .sp-main-1 { font-weight: 800; font-size: 1.4em; }
/* The source paints this line crimson. The kit keeps the whole heading one
   colour (standing rule: no picked-out words) and keeps the size/weight drop
   that makes it read as a second line. Logged in brand-spec.md. */
.contact-sctn .text-col .maintitle > .sp-main-2 { font-weight: 500; font-size: .9em; }
.contact-sctn .button-row { margin-top: 20px; justify-content: flex-start; }
@media (max-width: 1024px) {
  .contact-sctn .section-wrap { padding: 40px 3%; }
  .contact-sctn .form-col { width: 59%; }
  .contact-sctn .text-col { width: 40%; }
}
@media (max-width: 800px) {
  .contact-sctn .text-col { width: 100%; text-align: center; margin-bottom: 20px; }
  .contact-sctn .form-col { width: 100%; }
  .contact-sctn .section-wrap { padding: 40px 20px; }
  .contact-sctn .button-row { justify-content: center; }
}
@media (max-width: 600px) { .contact-sctn.section { padding: 50px 16px; } }

/* The form itself — shared by the hero card and the contact card. */
.kit-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 16px; }
.kit-form .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kit-form .field.full { grid-column: 1 / -1; }
.kit-form .lbl { margin-left: 5px; font-size: 16px; color: var(--gray); font-weight: 400; }
.kit-form .req { color: var(--secondary); font-size: .8em; }
.kit-form input,
.kit-form select,
.kit-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 6px 14px;
  border: 1px solid var(--secondary);
  border-radius: 30px;
  background: var(--white);
  font: inherit;
  font-size: 14px;
  color: var(--body-ink);
}
.kit-form textarea { border-radius: 20px; min-height: 100px; }
.kit-form input::placeholder { color: var(--gray); }
.kit-form .form-foot { grid-column: 1 / -1; }
.kit-submit {
  width: 35%;
  min-width: 140px;
  padding: 10px 20px;
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--primary);
  border-radius: 50px;
  font: inherit;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .25s ease;
}
.kit-submit:hover { background: var(--white); color: var(--secondary); }
@media (max-width: 600px) {
  .kit-form { grid-template-columns: minmax(0, 1fr); }
  .kit-submit { width: 100%; }
}

/* ==========================================================================
   13 RED ICON CARDS — service-sctn (theme flex/red_icon_content_cards.css).
   White cards whose top 75px is cut away by a 150px crimson disc with a
   5px charcoal ring; four per row, last row centred.
   ========================================================================== */

.section.service-sctn { padding-top: 2%; padding-bottom: 2%; }
.service-sctn .section-header h2 { margin-bottom: 35px; text-align: center; font-size: 40px; color: var(--primary); }
.service-sctn .section-wrap { gap: 32px; }
.service-sctn .service-col { width: calc(25% - 26px); display: flex; align-items: center; flex-direction: column; text-align: center; }
.service-sctn .icon-col {
  position: relative;
  z-index: 1;
  width: 150px;
  height: 150px;
  padding: 20px;
  border-radius: 50%;
  border: 5px solid var(--primary);
  background: var(--secondary);
  color: var(--white);
  box-shadow: var(--shadow-soft);
}
.service-sctn .icon-col .icon,
.service-sctn .icon-col .icon svg { width: 100%; height: 100%; }
.service-sctn .icon-col svg,
.service-sctn .icon-col svg * { fill: var(--white); }
.service-sctn .text-col {
  height: 100%;
  margin-top: -75px;
  padding: 100px 20px 32px;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  border-radius: 0 0 20px 20px;
}
.service-sctn .maintitle { margin-bottom: 8px; color: var(--primary); }
.service-sctn .text-col p { margin-bottom: 0; }
@media (max-width: 1024px) { .service-sctn .service-col { width: calc(33% - 26px); } }
@media (max-width: 800px) { .service-sctn .service-col { width: calc(50% - 16px); } }
@media (max-width: 500px) {
  .service-sctn .service-col { width: 100%; }
  .service-sctn .section-header h2 { font-size: 28px; }
}

/* ==========================================================================
   14 TESTIMONIAL CARD — reviews-sctn (theme flex/two_column_content_hanging
   _image.css). White card with a 4px charcoal rule running past its top
   edge, photo left, quote right over a 3px crimson underline.
   ========================================================================== */

.section.reviews-sctn { padding-top: 2%; padding-bottom: 2%; }
.reviews-sctn .container { padding: 0; }
.reviews-sctn .section-wrap {
  position: relative;
  z-index: 9;
  flex-wrap: nowrap;
  max-width: var(--container-wide);
  padding: 4% 5%;
  background: var(--white);
  box-shadow: 0 0 40px #00000029;
  border-radius: 0 0 31px 31px;
}
.reviews-sctn .section-wrap::after { content: ""; position: absolute; top: 0; left: -2.5%; width: 105%; height: 4px; background: var(--primary); }
.reviews-sctn .img-col { width: 40%; flex: none; max-height: 480px; }
.reviews-sctn .img-col img { width: 100%; height: 100%; object-fit: cover; }
.reviews-sctn .text-col { width: 60%; padding: 0 0 20px 32px; border-bottom: 3px solid var(--secondary); }
.reviews-sctn .maintitle { margin-bottom: 8px; color: var(--secondary); }
.reviews-sctn .subtitle { color: var(--gray); }
.reviews-sctn .name { color: var(--secondary); }
/* The source sets #ffe600 stars straight on white (1.27:1). The kit seats them on a
   charcoal pill, the system's own yellow-on-charcoal marker pairing. */
.reviews-sctn .stars { display: inline-block; margin-left: 5%; padding: 2px 6px 2px 11px; border-radius: var(--radius-pill); background: var(--primary); color: var(--stars); letter-spacing: 5px; }
@media (max-width: 700px) {
  .reviews-sctn .section-wrap { flex-wrap: wrap; justify-content: center; padding: 0 24px 32px; margin-bottom: 45px; }
  .reviews-sctn .section-wrap::after { left: 0; width: 100%; }
  .reviews-sctn .img-col { width: 100%; max-width: 350px; max-height: 300px; margin-top: 24px; }
  .reviews-sctn .text-col { width: 100%; padding: 20px 0 0; border-bottom: 0; text-align: center; }
}

/* ==========================================================================
   15 SERVICE CHECKLIST — service-list (theme flex/service_list.css). A 23px
   white card on a washed photo; three columns of crimson check links.
   ========================================================================== */

.service-list { position: relative; padding: 3rem 0; overflow: hidden; isolation: isolate; }
.service-list .gradient-bg { position: absolute; z-index: 1; inset: 0; background-size: cover; background-position: center; }
.service-list .image-overaly--white { position: absolute; z-index: 2; inset: 0; background: var(--wash); }
.service-list .section-wrap { position: relative; z-index: 3; margin: 0 auto; }
.service-list__layout { width: 100%; }
.service-list__left {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 3.5rem;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
.service-list__title { margin: 0 0 .6rem; padding-top: .75rem; color: var(--secondary); font-size: var(--font-size--h3); line-height: 1.15; }
.service-list__intro { margin-bottom: 1.75rem; color: var(--primary); max-width: 92ch; line-height: 1.45; }
.service-list__items { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .95rem 1.15rem; }
.service-list__link,
.service-list__text {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  line-height: 1.25;
  font-size: var(--font-size--h6);
  font-weight: 600;
  color: var(--primary);
}
.service-list__link { transition: color .2s ease, transform .2s ease; }
.service-list__link:hover { color: var(--secondary); transform: translateX(2px); }
.service-list__check { width: 1.6rem; height: 1.6rem; flex-shrink: 0; display: inline-flex; color: var(--secondary); }
.service-list__check .icon,
.service-list__check .icon svg { width: 100%; height: 100%; }
@media (max-width: 991px) {
  .service-list__left { padding: 2rem 2rem 2.25rem; }
  .service-list__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .service-list { padding: 2.25rem 0; }
  .service-list__left { padding: 1.5rem 1.25rem; }
  .service-list__items { grid-template-columns: minmax(0, 1fr); }
  .service-list__check { width: 1.35rem; height: 1.35rem; }
}

/* ==========================================================================
   16 THREE STEPS — steps (theme flex/steps.css). Crimson 4px top rule,
   crimson discs ringed in white with yellow number badges, dashed
   connectors. The source's small uppercase label above the heading is
   omitted (house rule: no kicker devices, even when the source ships one).
   ========================================================================== */

.steps { background: var(--white); padding: clamp(54px, 7vw, 90px) 0; border-top: 4px solid var(--secondary); }
.steps__head { text-align: center; margin-bottom: clamp(44px, 5.5vw, 64px); }
.steps__head h2 { margin: 12px 0; font-size: clamp(26px, 3.4vw, 45px); color: var(--primary); }
.steps__sub { max-width: 580px; margin: 0 auto; color: var(--gray); font-size: 16px; line-height: 1.55; }
.steps__flow { position: relative; z-index: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 34px; }
.steps__step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.steps__step + .steps__step::before {
  content: "";
  position: absolute;
  top: 48px;
  left: calc(-50% - 34px);
  width: calc(100% + 34px);
  border-top: 2px dashed var(--light-gray);
  z-index: -1;
}
.steps__disc {
  position: relative;
  width: 96px;
  height: 96px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--white);
  border: 6px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px #ececec, 0 12px 28px var(--accent-glow);
}
.steps__disc .icon,
.steps__disc .icon svg { display: block; width: 42px; height: 42px; transform: none; }
.steps__disc .icon svg * { fill: currentColor; }
.steps__num {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--tertiary);
  color: var(--primary);
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .28);
}
.steps__step-title { margin: 0 0 10px; font-size: 20px; color: var(--primary); }
.steps__step-content { margin: 0; max-width: 300px; font-size: 15px; line-height: 1.6; color: var(--gray); }
.steps .button-row { margin-top: clamp(40px, 5vw, 58px); }
@media (max-width: 760px) {
  .steps__flow { grid-auto-flow: row; grid-auto-columns: auto; gap: 38px; }
  .steps__step + .steps__step::before { display: none; }
}

/* ==========================================================================
   17 AREAS PANEL — areas-served (theme flex/areas_served.css). Crimson
   section; a charcoal gradient panel cut as a parallelogram (3% slants)
   leaves crimson slivers either side. Three region columns of pinned cities.
   Source's yellow uppercase label above the title omitted, as in 16.
   ========================================================================== */

.areas-served { position: relative; overflow: hidden; background: var(--secondary); padding: 0 clamp(14px, 1.4vw, 26px); }
.areas-served__panel {
  width: 100%;
  padding: clamp(56px, 7vw, 86px) 0 clamp(40px, 5.5vw, 62px);
  background-color: var(--black);
  background-image: linear-gradient(90deg, var(--black) 0%, var(--primary) 100%);
  clip-path: polygon(0 0, 97% 0, 100% 100%, 3% 100%);
}
.areas-served__wrap { display: block; margin: 0 auto; padding-left: clamp(44px, 6%, 96px); }
.areas-served__disc {
  width: 84px;
  height: 84px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--white);
  border: 5px solid var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 22px 0 #00000070;
}
.areas-served__disc .icon,
.areas-served__disc .icon svg { width: 40px; height: 48px; display: block; transform: none; }
.areas-served__head { text-align: center; margin-bottom: clamp(26px, 3.6vw, 40px); }
.areas-served__title { margin: 10px 0 0; font-size: clamp(24px, 3vw, 40px); color: var(--white); }
.areas-served__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 44px; }
.areas-served__region { padding-left: 22px; min-width: 0; }
.areas-served__region-name {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tertiary);
}
.areas-served__city { display: flex; align-items: center; padding: 5px 0; font-size: 14.5px; line-height: 1.25; font-weight: 500; color: var(--white); }
.areas-served__city--linked { transition: color .2s ease; }
.areas-served__city--linked:hover { color: var(--tertiary); }
.areas-served__pin { width: 14px; height: 17px; margin: 0 8px 0 -22px; flex-shrink: 0; display: inline-flex; color: var(--tertiary); }
.areas-served__pin .icon,
.areas-served__pin .icon svg { width: 100%; height: 100%; display: block; transform: none; }
.areas-served__cta { margin-top: clamp(26px, 3.4vw, 38px); }
@media (max-width: 880px) { .areas-served__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .areas-served__cols { grid-template-columns: minmax(0, 1fr); }
  .areas-served__panel { clip-path: none; }
  .areas-served__wrap { padding: 0 16px 0 32px; }
}

/* ==========================================================================
   18 PHOTO + TEXT — basic-content-sctn (theme flex/basic_content.css).
   20px-radius photo at 40%, copy at 60%; a small crimson heading over a
   larger charcoal one. Image side flips with .img-side--right.
   19 TEXT BAND — basic-content intro-sctn: #f4f4f4 band, centred copy.
   ========================================================================== */

.section.basic-content-sctn { padding-top: 32px; padding-bottom: clamp(32px, 4%, 72px); overflow: hidden; }
.basic-content-sctn .section-wrap { flex-wrap: nowrap; }
.basic-content-sctn .img-col { width: 40%; flex: none; display: flex; overflow: hidden; border-radius: var(--radius-soft); }
.basic-content-sctn .img-col img { width: 100%; height: 100%; object-fit: cover; }
.basic-content-sctn .text-col { width: 60%; padding-left: 5%; display: flex; flex-direction: column; justify-content: center; }
.basic-content-sctn.img-side--right .text-col { padding: 0 5% 0 0; }
.basic-content-sctn .maintitle { color: var(--secondary); margin-bottom: 0; }
.basic-content-sctn .subtitle { color: var(--primary); }
.basic-content-sctn .entry h4 { color: var(--primary); font-size: 18px; }
.basic-content-sctn .text-col p { margin: 0; }
.basic-content.text-left .text-col { text-align: left; }
.basic-content.text-center .text-col { text-align: center; }
@media (max-width: 600px) {
  .basic-content-sctn .section-wrap { flex-direction: column; gap: 15px; }
  .basic-content-sctn.img-side--right .section-wrap { flex-direction: column-reverse; }
  .basic-content-sctn .img-col { width: 100%; max-height: 300px; }
  .basic-content-sctn .text-col,
  .basic-content-sctn.img-side--right .text-col { width: 100%; padding: 0; }
  .basic-content.text-left .text-col { text-align: center; }
}

.section.intro-sctn { background: var(--band-grey); padding-top: clamp(32px, 4%, 72px); padding-bottom: clamp(32px, 4%, 72px); text-align: center; }
.intro-sctn .maintitle { color: var(--secondary); margin-bottom: 20px; }
.intro-sctn .entry p { color: var(--body-ink); }

/* ==========================================================================
   20 MISSION CARDS — content-cards / mission-sctn (theme flex/content_cards
   .css). Three crimson-tinted 20px cards under a centred two-line head.
   ========================================================================== */

.section.mission-sctn { padding-top: clamp(32px, 6%, 100px); padding-bottom: clamp(32px, 6%, 100px); }
.mission-sctn .title-col { margin-bottom: 30px; text-align: center; }
.mission-sctn .title-col .maintitle,
.mission-sctn .subtitle { color: var(--primary); margin-bottom: 8px; }
.mission-sctn .section-wrap { justify-content: space-evenly; gap: 32px 0; }
.mission-sctn .text-col { width: calc(33% - 32px); background: var(--accent-tint); padding: 52px 32px; border-radius: var(--radius-soft); text-align: center; }
.mission-sctn .text-col p { margin: 0; }
@media (max-width: 800px) { .mission-sctn .text-col { width: calc(50% - 32px); padding: 32px 20px; } .mission-sctn .section-wrap { gap: 32px; } }
@media (max-width: 500px) { .mission-sctn .text-col { width: 100%; } }

/* ==========================================================================
   21 CITY TILES — location-list (theme flex/icon-list.css). Charcoal tiles
   with a 2px crimson border inside a 3px charcoal outline; a tilted crimson
   pin hangs off the right edge and lifts on hover.
   ========================================================================== */

section.location-list { padding: 50px 0; }
.location-list__title { text-align: center; margin-bottom: 40px; color: var(--primary); }
.location-list__items { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 30px; }
.location-list__item { position: relative; display: flex; flex: 1 0 33%; max-width: 31%; }
.location-list__link {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 60px 15px 20px;
  background: var(--primary);
  border: 2px solid var(--secondary);
  outline: 3px solid var(--primary);
  border-radius: 5px;
  font-family: var(--font-head);   /* theme var(--font-family--body) = Poppins here */
  font-size: 22px;
  font-weight: 600;
  color: var(--white);
  text-align: center;
  transition: all .3s ease;
}
.location-list__link:hover { background: var(--white); color: var(--secondary); outline-color: var(--secondary); }
.location-list__item .icon { position: absolute; z-index: 2; top: 50%; right: 0; transform: translateY(-50%) rotate(10deg); transition: all .3s ease; }
.location-list__link:hover .icon { transform: translateY(-80%) rotate(8deg); }
.location-list__item .icon svg { height: 65px; width: auto; opacity: .8; }
.location-list__item .icon svg path { fill: var(--secondary); stroke: var(--white); stroke-width: 30px; }
@media (max-width: 992px) { .location-list__item { flex: 1 0 45%; max-width: 48%; } }
@media (max-width: 576px) {
  .location-list__item { flex: 0 0 100%; max-width: 100%; }
  .location-list__link { font-size: 18px; }
}

/* ==========================================================================
   22 FOOTER — theme general/footer.css. Charcoal; logo, phone, address and
   hours stacked centre-left; two hairline-ruled link columns right;
   centred copyright line.
   ========================================================================== */

.site-footer { padding: 45px 0 25px; background: var(--primary); color: var(--white); }
.ftr-wrp { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.footer__left { flex: 0 0 40%; max-width: 40%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.footer__left img { width: 125px; height: auto; }
.ftr-contact { display: flex; align-items: center; gap: 10px; color: var(--white); font-weight: 500; text-align: center; }
.ftr-contact:hover { color: var(--tertiary); }
.ftr-contact .icon svg { width: 16px; height: 16px; }
.ftr-contact .icon.location svg { width: 22px; height: 22px; }
.ftr-hours { display: flex; align-items: center; gap: 10px; color: var(--white); font-weight: 500; line-height: 1.8; text-align: center; }
.ftr-hours .icon svg { width: 1em; height: auto; }
.rrsr-lnk { display: flex; gap: 6px; margin-top: 15px; }
.rrsr-lnk a { color: var(--white); }
.rrsr-lnk .icon svg { width: 30px; height: auto; transition: transform .3s ease-in-out; }
.rrsr-lnk a:hover .icon svg { transform: scale(1.1) rotate(2deg); }
.footer__right { flex-grow: 1; }
.ftrcol-3 { display: flex; gap: 50px; justify-content: center; align-items: flex-start; }
.footer-menu h2 { font-size: 22px; font-weight: 500; color: var(--white); margin-bottom: 12px; }
.footer-menu ul { min-width: 150px; padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-menu li { padding-bottom: 10px; border-bottom: 1px solid #fff2; }
.footer-menu li:last-child { padding-bottom: 0; border-bottom: 0; }
.footer-menu a { color: var(--white); font-weight: 500; transition: color .2s ease; }
.footer-menu a:hover { color: var(--tertiary); }
.copyright { margin: 40px 0 10px; padding: 0 15px; text-align: center; color: var(--white); font-weight: 500; }
.copyright a { color: var(--white); }
.copyright a:hover { color: var(--tertiary); }
@media (max-width: 1024px) {
  .ftr-wrp { flex-direction: column; }
  .footer__left, .footer__right { flex: 0 0 100%; max-width: 100%; }
  .ftrcol-3 { flex-direction: column; align-items: center; gap: 10px; margin-top: 20px; }
  .footer-menu { text-align: center; }
  .footer-menu ul { min-width: 200px; align-items: center; }
  .footer-menu h2 { margin: 25px 0 10px; }
}

/* ==========================================================================
   DS CHROME — ds-nav, sx catalog, doc pages
   ========================================================================== */

.ds-nav {
  position: sticky;
  top: 0;
  z-index: 1100;
  background: var(--white);
  border-bottom: 1px solid #e3e3e3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 3vw, 40px);
}
.ds-nav .lockup-text { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--primary); }
.ds-nav .lockup-text small { display: block; font-family: var(--font-body); font-size: .75rem; font-weight: 500; color: var(--gray); }
.ds-nav .tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-nav .tab { padding: 8px 16px; border-radius: var(--radius-pill); font-size: .875rem; font-weight: 600; color: #4a4a4a; }
.ds-nav .tab:hover { background: var(--band-grey); color: var(--primary); }
.ds-nav .tab.active { background: var(--primary); color: var(--white); }

.sx-header, .doc-hero { background: var(--band-grey); padding: clamp(44px, 5vw, 84px) 0; }
.sx-header .display, .doc-hero h1 { font-size: clamp(28px, 3.4vw, 48px); max-width: 24ch; color: var(--primary); }
.sx-header .lede, .doc-hero .lede { margin-top: 18px; max-width: 78ch; color: #4a4a4a; font-size: 1.125rem; }
.sx-header .meta, .doc-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 20px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid var(--light-gray);
}
.sx-header .meta > div, .doc-meta > div { min-width: 0; font-size: .8125rem; font-weight: 600; color: #5a5a5a; }
.sx-header .meta strong, .doc-meta strong { display: block; margin-top: 6px; font-size: .9375rem; color: var(--primary); }

.sx-index { background: var(--white); border-bottom: 1px solid #e3e3e3; padding: 28px clamp(16px, 3vw, 40px); }
.sx-index .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 8px; }
.sx-index .grid > * { min-width: 0; }
.sx-index a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  color: var(--primary);
  font-size: .8125rem;
  font-weight: 600;
}
.sx-index a:hover { border-color: var(--secondary); color: var(--secondary); }
.sx-index .num { color: #6a6a6a; font-variant-numeric: tabular-nums; }

.sx-pattern { padding: clamp(32px, 3.4vw, 56px) clamp(16px, 3vw, 40px); border-bottom: 1px solid #e3e3e3; }
.pattern-meta { display: grid; grid-template-columns: 260px 1fr; gap: 20px; margin-bottom: 24px; align-items: start; }
.pattern-meta > * { min-width: 0; }
.pattern-meta .id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .8125rem; font-weight: 700; color: #5a5a5a; }
.pattern-meta .num { color: #6a6a6a; font-variant-numeric: tabular-nums; }
.pattern-meta .signature { background: var(--secondary); color: var(--white); border-radius: var(--radius-pill); padding: 3px 10px; font-size: .625rem; letter-spacing: .1em; }
.pattern-meta .name { margin: 0; font-weight: 700; color: var(--primary); }
.pattern-meta .purpose { margin: 6px 0 0; color: #4a4a4a; font-size: .9375rem; max-width: 74ch; }
.sx-demo { position: relative; border: 1px solid #e3e3e3; border-radius: 12px; overflow: hidden; }
.sx-demo .demo-label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  background: var(--primary);
  color: var(--white);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-bottom-right-radius: 8px;
}
.sx-demo .nav { position: relative; }
@media (max-width: 880px) { .pattern-meta { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  body .sx-pattern { padding-left: 0; padding-right: 0; }
  body .sx-demo { border-left: 0; border-right: 0; border-radius: 0; }
  body .pattern-meta { padding: 0 16px; }
  body .sx-index { padding-left: 16px; padding-right: 16px; }
}

.doc-section { padding: clamp(40px, 5vw, 72px) 0; }
.doc-section + .doc-section { border-top: 1px solid #e3e3e3; }
.doc-section h2 { color: var(--primary); }
.doc-section .lede { color: #4a4a4a; max-width: 74ch; }
.door-grid, .swatch-grid, .page-grid, .tile-grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}
.door-grid { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.swatch-grid { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.page-grid { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.tile-grid { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.door-grid > *, .swatch-grid > *, .page-grid > *, .tile-grid > * { min-width: 0; }
.door { display: block; padding: clamp(22px, 2.4vw, 32px); border: 1px solid #e3e3e3; border-radius: var(--radius-soft); background: var(--white); color: var(--primary); }
.door:hover { border-color: var(--secondary); }
.door h3 { font-size: 1.25rem; margin-bottom: 10px; }
.door p { color: #4a4a4a; font-size: .9375rem; margin: 0; }
.swatch { border: 1px solid #e3e3e3; border-radius: 12px; overflow: hidden; }
.swatch .chip { height: 96px; }
.swatch .info { padding: 14px 16px; font-size: .8125rem; color: #4a4a4a; }
.swatch .info strong { display: block; color: var(--primary); }
.tile { padding: 22px; border: 1px solid #e3e3e3; border-radius: var(--radius-soft); }
.tile h3 { font-size: 1.125rem; color: var(--primary); }
.tile p { margin: 0; color: #4a4a4a; font-size: .9375rem; }
.spec-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.spec-table th, .spec-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #e3e3e3; vertical-align: top; }
.spec-table th { font-size: .8125rem; color: #5a5a5a; }
.table-scroll { overflow-x: auto; }
.type-row { padding: 16px 0; border-bottom: 1px solid #e3e3e3; }
.type-row .spec { font-size: .8125rem; color: #5a5a5a; margin: 6px 0 0; }
.page-card { border: 1px solid #e3e3e3; border-radius: 12px; overflow: hidden; background: var(--white); }
.page-card .frame { height: 420px; background: var(--band-grey); }
.page-card iframe { width: 100%; height: 100%; border: 0; }
.page-card .body { padding: 18px 20px; display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap; }
.page-card h3 { font-size: 1.125rem; margin: 0; color: var(--primary); }
.file-list { columns: 2 260px; padding-left: 1.2rem; color: #4a4a4a; }
.file-list code { color: var(--primary); }

.kit-note { color: #5a5a5a; font-size: .8125rem; font-style: italic; }

/* ==========================================================================
   RESPONSIVE — the burger comes from the shared mobile-nav.js, which turns
   .nav .nav-links into the drawer. The mega menu stays desktop-only; its
   destinations are all reachable from the burger's top-level links and the
   service checklist. The actions row hides and the sticky call bar
   (--ds-callbar above) carries the phone and the quote button instead.
   ========================================================================== */

@media (max-width: 992px) {
  .nav .mm { display: none; }
}
@media (max-width: 768px) {
  .nav > .container { padding: .75rem 16px; }
  .nav .brand-mark img { width: 84px; }
  .nav .actions { display: none; }
}