/* ============================================
   HLM Landing Page Template - Styles
   Brand colors are loaded from CLIENT_CONFIG at runtime.
   ============================================ */

/* --- CSS Variables --- */
:root {
  --color-primary-0: 233,233,227;
  --color-primary-1: 182,182,163;
  --color-primary-2: 109,109,71;   /* dark olive green - nav/testimonial bg */
  --color-primary-3: 55,55,36;
  --color-primary-4: 16,16,11;
  --color-secondary-0: 255,255,255; /* white */
  --color-secondary-1: 249,249,249;
  --color-secondary-2: 243,243,243; /* light gray bg */
  --color-secondary-3: 146,146,146;
  --color-secondary-4: 49,49,49;
  --color-tertiary-0: 225,227,230;
  --color-tertiary-1: 155,163,173;
  --color-tertiary-2: 55,70,90;     /* dark blue-gray text */
  --color-tertiary-3: 28,35,45;
  --color-tertiary-4: 8,11,14;
  --headlines-font-family: "Open Sans", Arial, sans-serif;
  --paragraphs-font-family: "Open Sans", Arial, sans-serif;

  /* Brand colors — overridden at runtime by analytics.js from CLIENT_CONFIG */
  --brand-primary: #cccccc;       /* CTA buttons, accents (gray fallback if CLIENT_CONFIG missing) */
  --brand-primary-light: #f0f0f0; /* Soft tint of brand-primary */
  --brand-link: #103ffa;          /* Hyperlinks, phone numbers */
  --brand-footer-text: #253150;   /* Footer text dark */
  --brand-secondary: #cccccc;     /* Nav bar + testimonial section dark band */
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, b, u, i, img, form, label, table, caption, tbody, tfoot, thead,
tr, th, td, article, aside, figure, figcaption, footer, header, nav, section {
  border: 0;
  font-size: 100%;
  font: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

html, body {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--paragraphs-font-family);
  line-height: 1;
  color: rgb(var(--color-tertiary-2));
  background: #fff;
}

b, strong { font-weight: bold; }
em, i { font-style: italic; }
u { text-decoration: underline; }
a { color: inherit; }

/* --- Section/Container System --- */
.section {
  position: relative;
  width: 100%;
}

.section .container {
  margin: 0 auto;
  position: relative;
  width: 960px;
  font-size: 0.875rem;
  font-family: var(--paragraphs-font-family);
}

/* ============================================
   SECTION 1: HEADER BAR
   ============================================ */
.section-header {
  background-color: rgb(var(--color-secondary-0));
}
.section-header .container {
  height: 93px;
}
.header-logo {
  position: absolute;
  top: 6px;
  left: 400px;
  width: 159px;
  height: 81px;
  object-fit: contain;       /* preserve aspect ratio for any logo shape */
  object-position: center;
}
.header-call-label {
  position: absolute;
  top: 11px;
  left: 745px;
  width: 158px;
  font-size: 1.6875rem;
  font-weight: 400;
  line-height: 1.3;
  color: #585858;
  text-align: center;
}
.header-phone {
  position: absolute;
  top: 46px;
  left: 705px;
  width: 239px;
  font-size: 1.6875rem;
  line-height: 1.3;
  text-align: center;
}

/* ============================================
   SECTION 2: NAVIGATION BAR
   ============================================ */
.section-nav {
  background-color: var(--brand-secondary);
}
.section-nav .container {
  height: 27px;
}
.nav-links {
  position: absolute;
  top: 3px;
  left: 255px;
  width: 487px;
  font-size: 0.9375rem;
  font-weight: normal;
  line-height: 1.3;
  text-align: center;
  color: #000;
}

/* ============================================
   SECTION 3: HERO SECTION
   ============================================ */
.section-hero {
  background-color: rgba(var(--color-secondary-2), 1);
}
.section-hero .container {
  min-height: 850px;
  height: auto;
  padding-bottom: 20px;
}

.hero-heading {
  position: absolute;
  top: 16px;
  left: 10px;
  width: 517px;
  font-family: var(--headlines-font-family);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: #2c2b2b;
  z-index: 10;
  text-align: center;
}

.hero-image {
  position: absolute;
  top: 86px;
  left: 26px;
  width: 469px;
  height: 320px;
  z-index: 5;
  object-fit: cover;        /* preserve aspect ratio; fill slot, crop excess */
  object-position: center;
}

.hero-subheading {
  position: absolute;
  top: 418px;
  left: 19px;
  width: 462px;
  font-family: var(--headlines-font-family);
  font-size: 1.625rem;
  font-weight: 400;
  line-height: 1.2;
  color: rgb(var(--color-tertiary-2));
  z-index: 6;
  text-align: center;
}

.badges-row {
  position: absolute;
  top: 455px;
  left: 0;
  width: 481px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 70px;
  z-index: 7;
}
.badge-google {
  width: 150px;
  height: 63px;
}
.badge-yelp {
  width: 118px;
  height: 80px;
}
.rating-score {
  position: absolute;
  top: 555px;
  left: 0;
  width: 481px;
  text-align: center;
  font-size: 1.625rem;
  line-height: 1.3;
  z-index: 8;
}
.rating-text {
  position: absolute;
  top: 595px;
  left: 0;
  width: 481px;
  font-size: 1.125rem;
  line-height: 1.3;
  text-align: center;
  z-index: 8;
}

.hero-body {
  position: absolute;
  top: 640px;
  left: 10px;
  width: 481px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgb(var(--color-tertiary-2));
  z-index: 6;
}

/* Flow Form Wrapper - primary CTA, top of right column */
.flow-form-wrapper {
  position: absolute;
  top: 30px;
  left: 520px;
  width: 420px;
  z-index: 9;
}

.flow-form-heading {
  text-align: center;
  margin-bottom: 16px;
  font-family: var(--headlines-font-family);
}
.flow-form-heading h2 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.5;
  color: rgb(var(--color-tertiary-2));
}
.orange-text {
  color: var(--brand-primary);
}

/* Hero testimonial snippet */
.hero-testimonial-stars {
  position: absolute;
  top: 590px;
  left: 549px;
  width: 356px;
  z-index: 8;
  display: flex;
  justify-content: center;
  gap: 0;
}
.hero-testimonial-stars .fa-star {
  color: #f87c00;
  font-size: 2.1875rem;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
.hero-testimonial-box {
  position: absolute;
  top: 590px;
  left: 549px;
  width: 356px;
  height: 233px;
  background-color: rgb(var(--color-secondary-0));
  border: 2px solid #f2f2f2;
  z-index: 7;
}
.hero-testimonial-text {
  position: absolute;
  top: 642px;
  left: 562px;
  width: 336px;
  font-size: 1rem;
  line-height: 1.3;
  color: rgb(var(--color-tertiary-2));
  text-align: center;
  z-index: 8;
}
.hero-testimonial-author {
  position: absolute;
  top: 799px;
  left: 559px;
  width: 336px;
  font-size: 1rem;
  line-height: 1.3;
  color: rgb(var(--color-tertiary-2));
  text-align: center;
  z-index: 8;
}

.hero-back-to-top {
  position: absolute;
  top: 830px;
  left: 806px;
  width: 147px;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
  z-index: 10;
}

/* ============================================
   SECTION 4: ABOUT US
   ============================================ */
.section-about {
  background-color: rgb(var(--color-secondary-0));
}
.section-about .container {
  height: 448px;
}
.about-heading {
  position: absolute;
  top: 27px;
  left: 18px;
  width: 920px;
  font-family: var(--headlines-font-family);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
}
.about-image {
  position: absolute;
  top: 91px;
  left: 18px;
  width: 204px;
  height: 275px;
  object-fit: cover;        /* preserve aspect ratio; fill slot, crop excess */
  object-position: center;
}
.about-body {
  position: absolute;
  top: 45px;
  left: 247px;
  width: 668px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: rgb(var(--color-tertiary-2));
}
.about-back-to-top {
  position: absolute;
  top: 422px;
  left: 813px;
  width: 147px;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
}

/* ============================================
   SECTION 5: OUR SERVICES
   ============================================ */
.section-services {
  background-color: rgba(var(--color-secondary-2), 1);
}
.section-services .container {
  height: 261px;
}
.services-heading {
  position: absolute;
  top: 21px;
  left: 11px;
  width: 949px;
  font-family: var(--headlines-font-family);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
}
.services-col-left {
  position: absolute;
  top: 78px;
  left: 35px;
  width: 410px;
  font-size: 1.6875rem;
  font-weight: 700;
  line-height: 1.3;
  color: rgb(var(--color-tertiary-2));
}
.services-col-right {
  position: absolute;
  top: 83px;
  left: 480px;
  width: 410px;
  font-size: 1.6875rem;
  font-weight: 700;
  line-height: 1.3;
  color: rgb(var(--color-tertiary-2));
}
.services-back-to-top {
  position: absolute;
  top: 235px;
  left: 813px;
  width: 147px;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
}

/* ============================================
   SECTION 6 & 8: TESTIMONIALS
   ============================================ */
.section-testimonials1,
.section-testimonials2 {
  background-color: var(--brand-secondary);
}
.section-testimonials1 .container {
  height: 420px;
}
.section-testimonials2 .container {
  height: 420px;
}

.testimonials1-heading,
.testimonials2-heading {
  position: absolute;
  top: 10px;
  left: 11px;
  width: 949px;
  font-family: var(--headlines-font-family);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  color: rgba(var(--color-secondary-2), 1);
}

/* Testimonial Cards */
.testimonial-card {
  position: absolute;
  background-color: rgb(var(--color-secondary-0));
  border: 2px solid #f2f2f2;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* All testimonial cards: uniform size */
.card-1, .card-2, .card-3,
.card-4, .card-5, .card-6 { top: 80px; width: 293px; height: 290px; z-index: 6; }
.card-1, .card-4 { left: 12px; }
.card-2, .card-5 { left: 332px; }
.card-3, .card-6 { left: 651px; }

.quote-icon {
  position: absolute;
  top: 0;
  left: 126px;
  font-size: 1.875rem;
  color: rgb(var(--color-tertiary-2));
  width: 43px;
  height: 43px;
  text-align: center;
  line-height: 43px;
  z-index: 7;
}

.testimonial-card-text {
  position: absolute;
  top: 43px;
  bottom: 40px;
  left: 0;
  right: 0;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1.4;
  text-align: center;
  color: rgb(var(--color-tertiary-2));
}

.testimonial-card-author {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
  color: rgb(var(--color-tertiary-2));
}

.testimonials1-back-to-top,
.testimonials2-back-to-top {
  position: absolute;
  bottom: 16px;
  right: 0;
  width: 147px;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
}

/* ============================================
   SECTION 7: BOTTOM CTA + FORM
   ============================================ */
.section-bottom-cta {
  background-color: rgb(var(--color-secondary-0));
}
.section-bottom-cta .container {
  height: 669px;
}

.bottom-logo {
  position: absolute;
  top: 16px;
  left: 140px;
  width: 200px;
  height: 101px;
  z-index: 5;
  object-fit: contain;       /* preserve aspect ratio for any logo shape */
  object-position: center;
}

.bottom-form-box {
  position: absolute;
  top: 16px;
  left: 507px;
  width: 422px;
  height: 553px;
  background-color: rgb(var(--color-secondary-0));
  border: 2px solid #f2f2f2;
  z-index: 5;
}

.bottom-call-label {
  position: absolute;
  top: 42px;
  left: 536px;
  width: 369px;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.3;
  color: rgb(var(--color-tertiary-2));
  z-index: 6;
}

.bottom-call-info {
  position: absolute;
  top: 125px;
  left: 55px;
  width: 369px;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  color: rgb(var(--color-tertiary-2));
  text-align: center;
  z-index: 6;
}

.bottom-tagline {
  position: absolute;
  top: 213px;
  left: 54px;
  width: 372px;
  font-size: 1.6875rem;
  font-weight: 700;
  line-height: 1;
  color: rgb(var(--color-tertiary-2));
  text-align: center;
  z-index: 6;
}

.bottom-image {
  position: absolute;
  top: 315px;
  left: 80px;
  width: 320px;
  height: 319px;
  z-index: 6;
  object-fit: cover;        /* preserve aspect ratio; fill slot, crop excess */
  object-position: center;
}

.bottom-form {
  position: absolute;
  top: 119px;
  left: 523px;
  width: 353px;
  padding: 20px;
  z-index: 8;
}

.bottom-form .form-field {
  margin-bottom: 10px;
}
.bottom-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: bold;
  color: rgb(var(--color-tertiary-2));
  margin-bottom: 5px;
  font-family: var(--paragraphs-font-family);
}
.bottom-form input[type="text"],
.bottom-form input[type="email"],
.bottom-form input[type="tel"] {
  width: 100%;
  height: 41px;
  border: 1px solid #d6d4d4;
  padding: 0 5px;
  font-size: 0.875rem;
  font-family: var(--paragraphs-font-family);
  color: #161616;
  outline: none;
}
.bottom-form textarea {
  width: 100%;
  height: 70px;
  border: 1px solid #d6d4d4;
  padding: 10px 5px;
  font-size: 0.875rem;
  font-family: var(--paragraphs-font-family);
  color: #161616;
  resize: none;
  outline: none;
}
.bottom-form .form-submit {
  text-align: center;
}
.bottom-form button[type="submit"] {
  background-color: #ee1d2d;
  color: #f2f9ff;
  border: none;
  border-radius: 5px;
  padding: 10px 5px;
  font-size: 1.25rem;
  font-weight: bold;
  font-family: var(--paragraphs-font-family);
  width: 282px;
  height: 42px;
  cursor: pointer;
  margin-top: 4px;
}
.bottom-form button[type="submit"]:hover {
  opacity: 0.9;
}

.bottom-back-to-top {
  position: absolute;
  top: 641px;
  left: 813px;
  width: 147px;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
}

/* ============================================
   SECTION 9: FOOTER
   ============================================ */
.section-footer {
  background-color: rgba(var(--color-secondary-1), 1);
}
.section-footer .container {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-text {
  font-size: 0.875rem;
  line-height: 1.3;
  text-align: center;
}

/* ============================================
   FLOW FORM STYLES
   ============================================ */
.flow-form {
  background: #fff;
  border-radius: 12px;
  padding: 0;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border: 1px solid #e0e0e0;
}

/* Progress Bar */
.ff-progress-bar {
  width: 100%;
  height: 8px;
  background: #e0e0e0;
  border-radius: 0;
}
.ff-progress-bar-fill {
  height: 100%;
  background: var(--brand-primary);
  border-radius: 0;
  transition: width 0.4s ease;
}

/* Step Container */
.ff-step {
  padding: 20px 24px 24px;
  display: none;
}
.ff-step.active {
  display: block;
  animation: ffFadeIn 0.3s ease;
}
@keyframes ffFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ff-step-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.ff-step-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgb(var(--color-tertiary-2));
  margin-bottom: 16px;
  line-height: 1.3;
}

/* Image Cards */
.ff-cards-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ff-cards-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ff-card {
  border: 2px solid #ddd;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
}
/* Only apply hover styles on devices with a real cursor.
   Without this guard, touch devices keep :hover after a tap, making the
   element at the same screen position on the next step appear pre-selected. */
@media (hover: hover) and (pointer: fine) {
  .ff-card:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 2px 8px rgba(232,149,29,0.15);
  }
}
.ff-card.selected {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px var(--brand-primary);
}
.ff-card-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}
.ff-card-label {
  padding: 8px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgb(var(--color-tertiary-2));
  background: var(--brand-primary-light);
}

/* Icon Cards */
.ff-card-image-number {
  object-fit: contain !important;
  height: 100px !important;
}

/* Date picker styling */
.ff-date-picker {
  position: relative;
  height: 48px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
}
.ff-date-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  border-right: 1px solid #ccc;
  font-size: 1.2rem;
  pointer-events: none;
  z-index: 1;
}
.ff-input-group .ff-date-picker input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  padding-left: 62px;
  padding-right: 12px;
  font-size: 1rem;
  color: #999;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.ff-date-picker input[type="date"]:focus {
  outline: none;
  color: #333;
}

.ff-icon-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.ff-icon-card {
  border: 2px solid #ddd;
  border-radius: 10px;
  cursor: pointer;
  padding: 16px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .ff-icon-card:hover {
    border-color: var(--brand-primary);
  }
}
.ff-icon-card.selected {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px var(--brand-primary);
}
.ff-icon-card .ff-icon {
  font-size: 2rem;
  margin-bottom: 6px;
  display: block;
}
.ff-icon-card .ff-icon-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgb(var(--color-tertiary-2));
}

/* Text Inputs */
.ff-input-group {
  margin-bottom: 14px;
}
.ff-input-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgb(var(--color-tertiary-2));
  margin-bottom: 4px;
}
.ff-input-group input[type="text"],
.ff-input-group input[type="email"],
.ff-input-group input[type="tel"],
.ff-input-group input[type="date"] {
  width: 100%;
  height: 40px;
  border: 1px solid #d6d4d4;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 0.875rem;
  font-family: var(--paragraphs-font-family);
  color: #161616;
  outline: none;
  transition: border-color 0.2s;
}
.ff-input-group input:focus {
  border-color: var(--brand-primary);
}

/* Checkbox — full-row tap target (entire group is a <label>) so taps anywhere
   register the toggle. Sized 22x22 to clear the 44x44 mobile touch target with
   the 8px padding around it. */
.ff-checkbox-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 8px 4px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #555;
}
.ff-checkbox-group input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--brand-primary);
  cursor: pointer;
}
.ff-checkbox-group .ff-checkbox-text {
  flex: 1;
}
.ff-checkbox-group a {
  color: var(--brand-primary);
  text-decoration: underline;
}

/* Buttons */
.ff-btn-continue {
  display: block;
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--paragraphs-font-family);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 8px;
  background: #222;
  color: #fff;
}
.ff-btn-continue:hover { opacity: 0.85; }

.ff-btn-submit {
  display: block;
  width: 100%;
  padding: 14px;
  font-size: 1.1rem;
  font-weight: 700;
  font-family: var(--paragraphs-font-family);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 8px;
  background: var(--brand-primary);
  color: #fff;
}
.ff-btn-submit:hover { opacity: 0.85; }

/* Back link */
.ff-back {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.75rem;
  color: #888;
  cursor: pointer;
  text-decoration: underline;
}
.ff-back:hover { color: #555; }

/* Confirmation */
.ff-confirmation {
  text-align: center;
  padding: 30px 20px;
}
.ff-confirmation .ff-check-icon {
  font-size: 3rem;
  color: #27ae60;
  margin-bottom: 12px;
}
.ff-confirmation h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: rgb(var(--color-tertiary-2));
  margin-bottom: 8px;
  line-height: 1.3;
}
.ff-confirmation p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #666;
}

/* ============================================
   FLOATING CALL NOW BUTTON (MOBILE)
   ============================================ */
@media (min-width: 768px) {
  .call-now-btn { display: none !important; }
}
@media (max-width: 767px) {
  .call-now-btn {
    position: fixed;
    bottom: calc(15px + env(safe-area-inset-bottom, 0));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 280px;
    height: 55px;
    padding: 0 18px;
    background: #2D74FF;
    color: #fff;
    font-family: var(--paragraphs-font-family);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    border-radius: 32px;
    box-shadow: 0 6px 14px rgba(0,0,0,.25);
    transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
  }
  .call-now-btn:hover {
    transform: translateX(-50%) scale(1.03);
  }
  .call-now-btn:active {
    transform: translateX(-50%) scale(0.98);
    box-shadow: 0 3px 8px rgba(0,0,0,.25);
  }
  .call-now-btn .label {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
  }
}

/* ============================================
   TABLET RESPONSIVE (764px - 959px)
   ============================================ */
@media only screen and (min-width: 764px) and (max-width: 959px) {
  .section .container {
    width: 764px;
  }

  /* Header */
  .section-header .container { height: 93px; }
  .header-logo { left: 302px; }
  .header-call-label { left: 606px; }
  .header-phone { left: 525px; }

  /* Nav */
  .nav-links { left: 157px; font-size: 0.75rem; }

  /* Hero — stack vertically at narrow desktop width, same as mobile.
     Avoids the fragile 2-column absolute layout that collides at this width. */
  .section-hero .container {
    min-height: auto;
    height: auto;
    padding: 16px 0 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .section-hero .container > * {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }
  .hero-heading { width: 100%; max-width: 640px; font-size: 1.875rem; text-align: center; order: 1; margin-bottom: 12px; }
  .hero-image    { width: 100%; max-width: 640px; height: auto; order: 2; margin-bottom: 16px; }
  .flow-form-wrapper { width: 100%; max-width: 640px; order: 3; margin-bottom: 24px; }
  .hero-subheading { width: 100%; max-width: 640px; text-align: center; order: 4; margin-bottom: 12px; }
  .badges-row { width: 100%; max-width: 640px; justify-content: center; order: 5; margin-bottom: 8px; }
  .rating-score { width: 100%; max-width: 640px; text-align: center; order: 6; margin-bottom: 4px; }
  .rating-text  { width: 100%; max-width: 640px; text-align: center; order: 7; margin-bottom: 16px; }
  .hero-body    { width: 100%; max-width: 640px; order: 8; padding: 0 16px; }
  .hero-testimonial-box,
  .hero-testimonial-stars,
  .hero-testimonial-text,
  .hero-testimonial-author,
  .hero-back-to-top { display: none !important; }

  /* About */
  /* Roomier than desktop on purpose: the column is narrower here, so the same
     copy runs taller. Raise this per page if the text still runs out. */
  .section-about .container { min-height: 530px; height: auto; padding-bottom: 20px; }
  .about-body { left: 237px; width: 520px; }

  /* These boxes are sized for the 960px desktop layout - a 920px heading and
     949px headings sit inside a 764px container, which is what pushed the whole
     page sideways at tablet widths. The text inside them is short; only the box
     is oversized. Pin them to the container instead of a fixed width. */
  .about-heading,
  .services-heading,
  .testimonials1-heading,
  .testimonials2-heading {
    right: 0;
    width: auto;
  }
  .services-back-to-top,
  .testimonials2-back-to-top {
    left: auto;
    right: 0;
  }
  /* The About link was parked at a fixed distance down, which is above where
     the text ends at this width. Sit it at the bottom of the block instead. */
  .about-back-to-top {
    left: auto;
    right: 0;
    top: auto;
    bottom: 0;
  }

  /* Services: the two columns are 410px each and were overlapping, printing one
     list on top of the other. Narrow them to fit side by side inside 764px,
     with type sized to match. */
  .services-col-left  { left: 12px;  width: 366px; font-size: 1.25rem; }
  .services-col-right { left: 386px; width: 366px; font-size: 1.25rem; top: 78px; }

  /* Testimonials */
  .card-1, .card-4 { left: 0; width: 244px; }
  .card-2, .card-5 { left: 260px; width: 244px; }
  .card-3, .card-6 { left: 520px; width: 240px; }

  /* Bottom CTA */
  .section-bottom-cta .container { height: 669px; }
  .bottom-logo { left: 91px; }
  .bottom-form-box { left: 338px; }
  .bottom-call-label { left: 389px; }
  /* Left column was running past the white form box on its right, so the
     tagline text crossed the box border and the box clipped the photo.
     Keep everything on the left inside 0-322; the box starts at 338. */
  .bottom-call-info { left: 0; width: 322px; }
  .bottom-tagline { left: 0; width: 322px; }
  .bottom-image { left: 1px; width: 320px; }
  .bottom-form { left: 371px; width: 340px; }
  .bottom-back-to-top { left: 617px; }
}

/* ============================================
   MOBILE RESPONSIVE (max-width: 763px)
   ============================================ */
@media only screen and (max-width: 763px) {
  body {
    padding-bottom: 80px;
  }
  .section .container {
    width: 90%;
    max-width: 420px;
  }

  /* Header - flexbox flow */
  .section-header .container {
    height: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0 10px;
  }
  .header-logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 150px;
    height: auto;
    margin-bottom: 8px;
  }
  .header-call-label {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto;
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 2px;
  }
  .header-phone {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: auto;
    font-size: 1.5rem;
    text-align: center;
  }

  /* Nav - flexbox flow */
  .section-nav .container {
    height: auto !important;
    padding: 10px 0;
  }
  .nav-links {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    font-size: 0.8rem;
    text-align: center;
  }

  /* Hero - Mobile: use normal document flow so elements stack without overlap */
  .section-hero .container {
    height: auto !important;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .section-hero .container > * {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
  }

  .hero-heading {
    width: 100%;
    font-size: 1.75rem;
    text-align: center;
    order: 1;
    margin-bottom: 12px;
    padding-top: 16px;
  }

  .hero-image {
    width: 100%;
    height: auto;
    order: 2;
    margin-bottom: 16px;
  }

  /* Flow form right after hero image */
  .flow-form-wrapper {
    width: 100%;
    order: 3;
    margin-bottom: 24px;
  }

  .hero-subheading {
    width: 100%;
    font-size: 1.2rem;
    text-align: center;
    order: 4;
    margin-bottom: 12px;
  }

  .badges-row {
    width: 100%;
    justify-content: center;
    align-items: flex-end;
    gap: 30px;
    order: 5;
    margin-bottom: 10px;
  }
  .badge-google {
    width: 120px;
    height: 50px;
  }
  .badge-yelp {
    width: 100px;
    height: 68px;
  }
  .rating-score {
    width: 100%;
    text-align: center;
    order: 5;
    margin-bottom: 5px;
    font-size: 1.25rem;
  }
  .rating-text {
    width: 100%;
    order: 5;
    margin-bottom: 16px;
    text-align: center;
  }

  .hero-body {
    width: 100%;
    text-align: center;
    font-size: 0.95rem;
    order: 6;
    margin-bottom: 20px;
    padding: 0 10px;
  }


  /* Testimonial snippet */
  .hero-testimonial-box {
    display: none;
  }
  .hero-testimonial-stars {
    width: 100%;
    justify-content: center;
    order: 11;
    background: #fff;
    border: 2px solid #f2f2f2;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 20px 10px 10px;
    margin-bottom: 0;
  }
  .hero-testimonial-text {
    width: 100%;
    order: 12;
    text-align: center;
    background: #fff;
    border: 2px solid #f2f2f2;
    border-top: none;
    border-bottom: none;
    padding: 0 15px 10px;
    margin-bottom: 0;
  }
  .hero-testimonial-author {
    width: 100%;
    order: 13;
    text-align: center;
    background: #fff;
    border: 2px solid #f2f2f2;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 0 15px 20px;
    margin-bottom: 10px;
  }
  .hero-back-to-top {
    order: 14;
    margin-bottom: 10px;
  }

  /* About - flexbox flow */
  .section-about .container {
    height: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0 30px;
  }
  .about-heading {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: 16px;
  }
  .about-image {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 200px;
    height: auto;
    margin-bottom: 20px;
  }
  .about-body {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    text-align: center;
    padding: 0 10px;
    margin-bottom: 20px;
  }
  .about-back-to-top {
    position: relative !important;
    top: auto !important;
    left: auto !important;
  }

  /* Services - flexbox flow */
  .section-services .container {
    height: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0 30px;
  }
  .services-heading {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: 16px;
  }
  .services-col-left {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    font-size: 1.05rem;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 8px;
  }
  .services-col-right {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    font-size: 1.05rem;
    line-height: 1.6;
    text-align: center;
    margin-bottom: 16px;
  }
  .services-back-to-top {
    position: relative !important;
    top: auto !important;
    left: auto !important;
  }

  /* Testimonials - flexbox stack */
  .section-testimonials1 .container,
  .section-testimonials2 .container {
    height: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0 30px;
  }

  .testimonials1-heading,
  .testimonials2-heading {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    font-size: 1.75rem;
    text-align: center;
    margin-bottom: 16px;
  }

  .testimonial-card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 180px;
    margin-bottom: 16px;
  }

  .quote-icon {
    left: 50%;
    transform: translateX(-50%);
  }

  .testimonial-card-text {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 44px 16px 10px;
  }

  .testimonial-card-author {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 8px 16px 16px;
  }

  .testimonials1-back-to-top,
  .testimonials2-back-to-top {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    left: auto !important;
  }

  /* Bottom CTA - flexbox flow */
  .section-bottom-cta .container {
    height: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0 30px;
  }
  .bottom-logo {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 160px;
    height: auto;
    margin-bottom: 16px;
  }
  .bottom-form-box {
    display: none;
  }
  .bottom-call-label {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 12px;
  }
  .bottom-call-info {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 12px;
  }
  .bottom-tagline {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 20px;
  }
  .bottom-image {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 80%;
    max-width: 280px;
    height: auto;
    margin-bottom: 24px;
  }
  .bottom-form {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100%;
    padding: 20px;
    background: #fff;
    border: 2px solid #f2f2f2;
    border-radius: 8px;
    margin-bottom: 20px;
  }
  .bottom-form button[type="submit"] {
    width: 100%;
  }
  .bottom-back-to-top {
    position: relative !important;
    top: auto !important;
    left: auto !important;
  }

  /* Footer */
  .section-footer .container {
    height: auto !important;
    padding: 14px 0;
  }
  .footer-text {
    font-size: 0.75rem;
  }

  /* Flow form mobile */
  .flow-form-heading h2 {
    font-size: 1.5rem;
  }
  .ff-card-image {
    height: 100px;
    object-fit: cover;
  }
  .ff-card-label {
    font-size: 0.75rem;
    padding: 6px;
  }
  .ff-step {
    padding: 14px 16px 18px;
  }
}

/* ============================================
   BACK TO TOP LINK SHARED STYLES
   ============================================ */
.back-to-top {
  font-size: 0.75rem;
  z-index: 20;
}
.back-to-top a {
  text-decoration: underline;
}

/* ---- All American only (2026-11-06): their gold (#d0bf00) is too light for
   white text or for text on a white background. Gold stays as the fill color;
   text on gold is black, and gold words on white get the dark charcoal. ---- */
.ff-btn-submit, .ff-btn, .call-now-btn, .call-now-btn .label,
.form-submit button { color: #000 !important; }
.call-now-btn, .form-submit button { background: #d0bf00 !important; }
.call-now-btn svg { fill: #000 !important; }
.orange-text, .ff-step-label { color: #24292d !important; }
.orange-text { background: linear-gradient(transparent 60%, #d0bf00 60%); }

/* All American (2026-11-06): no Yelp badge here, so the Google badge sat right
   under the subheading. Moved down so the space above and below it is even.
   The Chris Winch quote is short, so the stars, quote and name moved together
   to sit in the middle of the white box. Desktop only; phones and tablets stack these instead. */
@media (min-width: 960px) {
  .badges-row { top: 470px; }
  .hero-testimonial-stars { top: 617px; }
  .hero-testimonial-text { top: 679px; }
  .hero-testimonial-author { top: 774px; }
}