/* ============================================================================
   General Remodeler1 — the theme's own declarations.

   SOURCE
   Every rule below is transcribed from two files in the harvest:

     assets/wp-content/themes/general-remodeler1/style.css   (1008 lines)
     assets/wp-content/themes/general-remodeler1/main.css    (2484 lines)

   Declarations are the original's, character for character, in the original's
   order — style.css first, then main.css, which is the order the page links
   them. Where a rule is skipped, the omission is noted with the reason. Where
   anything is changed, it is marked CHANGED with the reason.

   There are five of those in the whole file, and they fall into three groups:

     Three are selectors, not values. The original styles `i.fas.fa-star`, a
     Font Awesome handset, and a `> li > a` that is an <a href="#"> opening a
     menu. This project renders inline SVG and a <button>, so the selector has
     to reach those instead. The declarations are untouched.

     One is a path. The nav-toggler background images are not in the capture.

     One is an accessibility fix, and it is the only change to a declaration:
     the review text's line clamp moves onto a class JavaScript adds, so a page
     with scripting off is not left with three lines and no way to reach the
     rest.

   Prompt 1 shipped hand-rebuilt versions of these rules, because the two
   stylesheets were missing from the capture at that point. They are present
   now, and none of the reconstructions survive: the header proportions, the
   nav bar, the dropdown, the footer and the sticky mobile bar are the
   original's own numbers.

   WHAT IS NOT TRANSCRIBED, AND WHY
   Most of main.css. The theme styles a hero, an accordion, a projects map, a
   gallery, an image-comparison slider, a comparison table, a team grid, blog
   archives and a Formidable Forms integration — none of which this project has
   markup for yet. Copying rules for elements that do not exist would be dead
   weight, and several of them reference images the capture did not save, which
   would be 404s on every page load. Each component brings its rules with it
   when it is built; the harvest is the place to get them.

   Skipped for that reason, in main.css order: .video-hover, .video-embed,
   .map-embed, .btn-hero, .btn-white, .video-button,
   .hero-wrap and everything under it, .home-testimonials, .services-section,
   .about-section, .four-steps, .service-state, .service-area,
   .comparison-table, .custom-form, the legacy .quote-form
   and .quote-form-white blocks, the .with_frm_style and
   .frm_style_formidable-style Formidable overrides, .info-boxes,
   .service-area-grid, .reviews-grid, .videos, .comments-area, #back-to-top,
   .color-options, #masthead.transparent, .technician-list, .team-grid,
   .type-post, .wp-pagenavi, and the whole of style.css from "# Accessibility"
   to "# Footer" except the alignment and caption rules the editor emits.
   ========================================================================== */

/* ============================================================================
   style.css
   ========================================================================== */

/* ---- # Normalize ---------------------------------------------------------

   The theme's normalize block is a 2015-vintage copy that Bootstrap 4's own
   reboot supersedes almost entirely — and Bootstrap loads first, so the parts
   that differ would be undoing reboot rather than adding to it. Kept: the two
   rules that are the theme's own decisions rather than normalize's, plus the
   form-control resets Bootstrap's reboot does not make.
   -------------------------------------------------------------------------- */

body {
  margin: 0;
  -webkit-font-smoothing: auto;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

textarea {
  overflow: auto;
}

/* ---- # Typography -------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  color: #24292e;
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 15px;
}

h1 {
  font-size: 32px;
  padding-bottom: 10px;
}

h2 {
  font-size: 24px;
  padding-bottom: 0.3em;
  line-height: 1.25;
}

h3 {
  font-size: 18px;
  line-height: 25px;
}

h4 {
  font-size: 16px;
  line-height: 20px;
}

h5 {
  font-size: 14px;
  line-height: 17.5px;
}

p {
  margin-bottom: 1.5em;
}

/* ---- # Elements ---------------------------------------------------------- */

body {
  background: #fff;
  /* Fallback for when there is no custom background color defined. */
}

img {
  height: auto;
  /* Make sure images are scaled correctly. */
  max-width: 100%;
  /* Adhere to container width. */
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/* ---- # Navigation -------------------------------------------------------- */

header#masthead {
  margin-bottom: 0;
  background-color: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .1);
  padding: 0;
}

.navbar-brand > a {
  color: rgba(0, 0, 0, 0.9);
  font-size: 1.1rem;
  outline: medium none;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
}

.navbar-brand > a:visited,
.navbar-brand > a:hover {
  text-decoration: none;
}

/* ---- ## Menus ------------------------------------------------------------ */

#masthead nav {
  padding-left: 0;
  padding-right: 0;
}

.navbar-brand {
  height: auto;
}

.dropdown-item {
  line-height: 1.2;
  padding-bottom: 0.313rem;
  padding-top: 0.313rem;
}

.dropdown-menu {
  min-width: 12.500rem;
}

.dropdown-menu .dropdown-item {
  white-space: normal;
  background: transparent;
  line-height: 1.6;
}

.dropdown-menu .dropdown-item:hover {
  background: transparent;
}

@media screen and (max-width: 991px) {
  .navbar-nav .dropdown-menu {
    border: medium none;
    border-left: 1px solid #fff;
    margin-left: 1.250rem;
    padding: 0;
  }

  .dropdown-menu li a {
    padding: 0;
  }

  #masthead .navbar-nav > li > a,
  #masthead .navbar-nav > li > button.nav-link {
    padding-bottom: 0.625rem;
    padding-top: 0.313rem;
  }

  .navbar-light .navbar-toggler {
    border: medium none;
    outline: none;
  }
}

/* ---- # Accessibility -----------------------------------------------------

   The theme's .screen-reader-text, kept because the harvested markup uses it
   and because a later ported page will. .sr-only is Bootstrap's and lives in
   site.css. Do not show the outline on the skip-link target.
   -------------------------------------------------------------------------- */

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 0.313rem;
  line-height: normal;
  padding: 0.938rem 1.438rem 0.875rem;
  text-decoration: none;
  top: 0.313rem;
  width: auto;
  z-index: 100000;
}

#content[tabindex="-1"]:focus {
  outline: 0;
}

/* ---- # Content ----------------------------------------------------------- */

#content.site-content {
  padding-bottom: 3.75rem;
  padding-top: 4.125rem;
}

/* ---- # Footer ------------------------------------------------------------ */

footer#colophon {
  font-size: 85%;
}

.copyright {
  font-size: 0.875rem;
  margin-bottom: 0;
  text-align: center;
}

.copyright a,
footer#colophon a {
  color: inherit;
}

@media screen and (max-width: 767px) {
  #masthead .navbar-nav > li > a,
  #masthead .navbar-nav > li > button.nav-link {
    padding-bottom: 0.938rem;
    padding-top: 0.938rem;
  }
}

/* ============================================================================
   main.css
   ========================================================================== */

::-moz-selection {
  background: var(--accent);
  color: var(--white);
}

::selection {
  background: var(--accent);
  color: var(--white);
}

* {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-size: 17px;
  color: #565656;
  font-family: 'Roboto', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: 'Play', sans-serif;
  font-weight: bold;
  margin-bottom: 0;
}

.h2,
h2 {
  font-size: 2.188rem;
}

h2 span {
  color: var(--primary);
}

h3 {
  font-size: 1.5rem;
}

/* NOTE, not a change — this is verbatim. main.css cancels the padding
   style.css set a few hundred lines above. Both are transcribed rather than
   collapsed into one, so the pair reads the way it does in the harvest and a
   later page that wants the padding back knows where it went. */
#content.site-content {
  padding: 0;
}

a {
  color: var(--primary);
  transition: all .2s ease-in-out;
}

a:hover,
a:focus,
a:active {
  color: var(--primary-alt);
  text-decoration: underline;
}

.rounded {
  border-radius: 0.7rem !important;
}

/* ---- Defaults ------------------------------------------------------------ */

section.block {
  padding: 80px 0;
  overflow: hidden;
}

.border-radius {
  border-radius: 20px !important;
}

.bg-white {
  z-index: 1;
  background: var(--white);
}

.bg-tint {
  z-index: 1;
  background: var(--offwhite);
}

.bg-primary {
  background-color: var(--primary) !important;
}

.bg-secondary {
  background-color: var(--secondary) !important;
}

.bg-black-fade {
  background-color: rgba(0, 0, 0, .5);
}

.txt-white {
  color: var(--white) !important
}

.txt-primary {
  color: var(--primary) !important;
}

.txt-secondary {
  color: var(--secondary) !important;
}

.txt-accent {
  color: var(--accent) !important;
}

.offset-negative {
  margin-top: -100px;
}

.overflow-section {
  overflow: hidden;
}

.card {
  border-radius: 0;
}

.preheading {
  color: var(--primary);
  font-weight: bold;
  margin-bottom: 0;
}

.preheading-center {
  text-align: center;
  font-weight: bold;
  margin-bottom: 0;
}

.preheading::before {
  content: '// ';
}

.anchor {
  position: absolute;
  clear: both;
  width: 100%;
  margin-top: -80px;
}

/*
 * AOS 3-D effects inflate an element's bounding box beyond its own width, which pushes
 * document.scrollWidth past the viewport and produces a horizontal scrollbar. Moving
 * data-aos off the full-bleed <section> onto the inner .container cut the spill from
 * +44px to +8px; clipping the section removes the rest.
 *
 * overflow-x: clip rather than hidden — hidden would make this a scroll container and
 * break `position: sticky` on descendants (the sidebar quote form relies on it).
 */
section.first-cta,
.first-cta {
  overflow-x: clip;
}

/* Same problem, smaller: the sidebar quote form's zoom-out-down spilled 3px at 768. */
.sidebar-quote-form,
.sidebar .sticky-sidebar {
  overflow-x: clip;
}

/* ---- Buttons ------------------------------------------------------------- */

.btn {
  background-color: transparent;
  box-shadow: none !important;
  padding: 10px 30px;
  transition: all .15s ease-in-out;
  border-radius: 6px;
  font-weight: bold;
}

/*
 * Restore a keyboard focus indicator.
 *
 * The `box-shadow: none !important` above beats Bootstrap 4.5.3's
 * `.btn:focus { box-shadow: 0 0 0 .2rem rgba(0,123,255,.25) }`, which left every button
 * and CTA on the site with no visible focus state at all — verified by dispatching real
 * Tab keypresses: `outline: none 0px, box-shadow: none` on "Book An Appointment",
 * "Get Your Free Quote" and every other primary control. WCAG 2.4.7 / 2.4.13.
 *
 * :focus-visible so pointer users never see a ring, and outline rather than box-shadow
 * so the declaration above does not have to be unwound.
 */
.btn:focus-visible,
a.btn:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.navbar-toggler:focus-visible,
.frm_submit button:focus-visible,
input[type="submit"]:focus-visible {
  outline: 3px solid #0b5c86 !important;
  outline-offset: 3px !important;
  border-radius: 6px;
}

/* Same treatment on a dark panel, where the dark ring would disappear. */
.bg-secondary .btn:focus-visible,
.txt-white .btn:focus-visible,
.floating-cta-footer .btn:focus-visible {
  outline-color: #ffffff !important;
}

.btn-small {
  font-size: .9rem;
  padding: 7px 20px;
}

.btn-icon-left i {
  margin-right: 7px;
}

.btn.btn-hero {
  background-color: var(--primary);
  border: 1px solid var(--white);
  color: var(--white);
}

.btn.btn-hero:hover,
.btn.btn-hero:focus,
.btn.btn-hero:active {
  background-color: var(--primary-alt);
  border-color: var(--white);
  color: var(--white);
}

.btn.btn-primary {
  background-color: var(--primary);
  border: 1px solid var(--primary);
  color: var(--white);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active {
  background-color: var(--primary-alt);
  border-color: var(--primary-alt);
  color: var(--white);
}

.btn.btn-secondary {
  background-color: var(--secondary);
  border: 1px solid var(--secondary);
  color: var(--white);
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus,
.btn.btn-secondary:active {
  background-color: var(--secondary-alt);
  border: 1px solid var(--secondary-alt);
  color: var(--white);
}

.btn.btn-white {
  border: 3px solid #fff;
  color: #FFF;
  opacity: 1;
}

.btn.btn-white:hover,
.btn.btn-white:focus,
.btn.btn-white:active {
  opacity: .6;
}

/* ---- Header -------------------------------------------------------------- */

header#masthead {
  width: 100%;
  background-color: #fff;
}

.top-bar {
  display: flex;
  justify-content: flex-end;
}

.icon-box {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 50px;
}

.icon-box .text-box .value {
  font-size: 26px;
  font-weight: bold;
  color: var(--secondary);
  font-family: 'Play', sans-serif;
}

.icon-box .text-box .value a {
  color: var(--secondary);
  text-decoration: none;
}

.header-cta {
  text-transform: capitalize;
}

.header-cta .btn {
  margin-left: 10px;
}

/* ---- ## Menus ------------------------------------------------------------ */

#masthead .navigation-bar {
  background-color: var(--secondary);
  position: relative;
}

.sticky-nav .navigation-bar {
  position: fixed !important;
  top: 0;
  width: 100%;
  z-index: 300;
}

/* CHANGED — selector only, twice below. The original matches `> li > a`,
   because it renders the "Company" dropdown heading as `<a href="#">`. This
   markup renders it as a <button>, since it opens a menu rather than going
   anywhere, so the selector has to reach a button as well. Declarations are the
   original's. */
#masthead .navbar-nav > li > a,
#masthead .navbar-nav > li > button.nav-link {
  color: var(--white);
  padding: 10px 20px;
  font-size: 16px;
  white-space: nowrap;
  opacity: 1;
}

#masthead .navbar-nav > li > a:hover,
#masthead .navbar-nav > li > button.nav-link:hover,
#masthead .navbar-nav > li.current_page_item > a,
#masthead .navbar-nav > li.current_page_item > button.nav-link {
  opacity: .7;
}

.navbar {
  justify-content: flex-end;
}

.site-header .navbar-expand-lg .navbar-collapse {
  align-items: center;
  justify-content: right;
}

.dropdown-item {
  background: var(--secondary);
  font-size: 16px;
  color: var(--white);
  margin: 10px;
}

.dropdown-item:focus,
.dropdown-item:hover {
  color: var(--white);
  opacity: .7;
}

.dropdown-menu {
  left: auto;
  right: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: var(--secondary);
}

.nav-item .dropdown-toggle::after {
  margin-left: 0.6em;
  vertical-align: 0;
  border: none;
  /* font-family: "Font Awesome 5 Free"; */
  font-size: 16px;
  font-weight: bold;
  content: "+";
}

.nav-item.show .dropdown-toggle::after {
  content: "-";
}

/* CHANGED — path only. The original points these at
   ./images/icons/nav-opened.svg and ./images/icons/nav-closed.svg, neither of
   which came back in the capture: of the theme's seven harvested images, four
   are the process-step glyphs, one is the Google mark, one is a guarantee
   check and one is the previous vendor's favicon. The two files here are
   authored to match what the live site renders — a white hamburger, a white
   cross — because the alternative is a pair of 404s on every page.
   Declarations are otherwise the original's. */
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background: url(/static/media/icons/nav-opened.svg);
  background-position: center center;
  background-repeat: no-repeat;
}

.navbar-toggler[aria-expanded="false"] .navbar-toggler-icon {
  background: url(/static/media/icons/nav-closed.svg);
  background-position: center center;
  background-repeat: no-repeat;
}

/* ---- ## Brand ------------------------------------------------------------ */

.navbar-brand {
  padding: 20px;
  position: absolute;
  background: var(--white);
  z-index: 110;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.navbar-brand img {
  max-width: 165px;
  height: auto;
}

#masthead .head-sep {
  border-left: 1px solid rgb(36 41 45 / 10%);
  float: left;
  margin-left: 0;
  display: flex;
}

/* ---- Review slider ------------------------------------------------------- */

.google-logo {
  width: 30px; /* Reduce size for consistency */
  height: auto;
}

.swiper-container {
  overflow: hidden;
  padding: 20px;
}

.swiper-wrapper {
  display: flex;
  flex-wrap: nowrap;
}

.swiper-slide {
  flex-shrink: 0;
  position: relative;
}

.review-card {
  background-color: var(--white);
  border-radius: 10px; /* Softer border-radius */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Lighter shadow */
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Smoother and faster transitions */
  border-top: 4px solid var(--primary);
  z-index: 0;
}

.review-card:hover {
  transform: translateY(-5px); /* Less lift effect */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Slightly stronger shadow on hover */
  z-index: 1;
}

.reviewer-name {
  font-size: 1.1em;
  font-weight: bold; /* Stronger emphasis */
  color: var(--primary-text); /* Text color to match the home page */
  margin-bottom: 10px;
}

.review-date {
  font-size: 0.9em;
  color: var(--secondary-text); /* Subtle text color */
  margin-bottom: 10px;
}

/* CHANGED — selector only. The original targets `.review-stars i.fas.fa-star`,
   a Font Awesome element this project does not render. The colour is the
   original's and moves to the SVG row that replaces those glyphs — onto the
   row, not onto .review-stars itself, because .review-stars inherits the body
   colour in the harvest and putting it there would tint anything else that ever
   goes in the block. */
.review-stars .stars {
  color: var(--accent);
}

/* CHANGED — the -webkit-line-clamp and its box display move to
   .review-text.is-clamped in site.css, so a page with scripting off shows the
   whole review instead of three lines and no way to reach the rest. Every
   other declaration here is the original's. */
.review-text {
  color: var(--primary-text);
  font-size: 1em;
  margin-bottom: 15px;
  line-height: 1.5;
}

.read-more {
  display: none;
  cursor: pointer;
  color: var(--primary); /* Accent color for 'read more' */
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.85em;
}

.custom-card {
  width: 100%;
  padding: 20px;
  margin: 15px 0;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-top: 4px solid var(--primary);
}

.custom-swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
}

.swiper-pagination-bullet {
  background-color: var(--secondary);
  opacity: 1;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  border-radius: 50%;
}

.swiper-pagination-bullet-active {
  background-color: var(--accent); /* Highlight active with accent color */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .swiper-slide {
    width: 100% !important; /* Full viewport width on mobile */
  }
}

/*
 * The harvested review section overrides five of the rules above from an inline
 * <style> on the page itself, which is later in the cascade than main.css and
 * therefore what actually renders. Transcribed here rather than left out,
 * because the page's version is the one the screenshots show.
 */
.card {
  border-radius: 15px;
}

.swiper-wrapper {
  align-items: stretch;
  height: auto !important;
}

.swiper-slide {
  display: flex;
  flex-direction: column;
}

.review-card {
  /* Restated, not a delta. The inline block re-declares .review-card in full
     *after* .card, and the two selectors have equal specificity — so dropping
     the repeated radius here hands the cards .card's 15px instead of their own
     10px. Source order is the whole of the rule. */
  border-radius: 10px;
  flex: 1;
}

.review-stars .stars {
  color: rgb(241, 146, 73);
}

.review-text {
  flex: 1;
}

.read-more {
  margin-top: auto;
}

.swiper-pagination-bullet {
  background-color: #cccccc;
  width: 9px;
  height: 9px;
}

.swiper-pagination-bullet-active {
  background-color: var(--accent);
}

.swiper-backface-hidden .swiper-slide {
  min-height: 295px;
}

/* ---- Hero Homepage ------------------------------------------------------- */

.hero-wrap .hero-content {
  color: #fff;
  background-color: rgb(0 0 0 / 60%);
  padding: 40px;
  border-radius: 20px;
}

.hero-wrap .hero-content .prehead {
  margin-bottom: 5px;
  text-transform: uppercase;
  font-family: 'Play', sans-serif;
  font-weight: 800;
}

/* ---- Homepage services section ------------------------------------------- */

.services-section .card {
  transition: all .2s ease-in-out;
  position: relative;
}

.services-section .card a span.full {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.services-section .card:hover {
  transition: all .2s ease-in-out;
  background: var(--accent);
  color: var(--white);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.services-section .card span.link-arrow {
  color: var(--accent);
}

.services-section .card:hover > img {
  opacity: .6;
}

.services-section .card:hover h3.card-title, .services-section .card:hover a, .services-section .card:hover span.link-arrow {
  color: var(--white);
}

/* ---- Internal pages ------------------------------------------------------ */

.hero-wrap {
  position: relative;
  height: auto;
  overflow: hidden;
  background-size: cover;
}

.hero-wrap.homepage-hero .hero-content {
  margin: 150px 0 200px;
}

.hero-wrap .hero-content {
  margin: 140px 0 100px;
}

.hero-wrap .hero-content h1 {
  font-size: 50px;
  font-weight: 500;
  font-style: normal;
  color: var(--white);
  line-height: 1.2em;
  margin-bottom: 0;
  font-weight: 800;
}

.hero-wrap .hero-content .inner {
  position: relative;
}

.hero-content h1 {
  color: #fff;
  margin: 0;
}

/* ---- Our Process --------------------------------------------------------- */

.four-steps .bg-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 600px;
  height: 100%;
}

.four-steps .single-step {
  background: var(--white);
  display: flex;
  flex-direction: row;
}

.four-steps .single-step .icon {
  float: left;
  margin-right: 20px;
}

.four-steps .single-step .icon img {
  max-width: 50px;
  height: auto;
}

.four-steps .single-step .content {
  float: left;
}

.four-steps .single-step .content .step-no {
  font-family: 'Play', sans-serif;
  font-size: 14px;
  font-weight: bolder;
  color: var(--primary);
  text-transform: uppercase;
}

.four-steps .single-step .content .title {
  margin: 5px 0;
}

.four-steps .single-step .content p {
  margin-bottom: 0;
}

/* ---- Service Area -------------------------------------------------------- */

.service-area .map img {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

/* ---- Service area grid (the city cards on the service hubs) -------------- */

.service-area-grid .card {
  background: var(--white);
  color: var(--primary);
  border: none;
  border-radius: 6px;
  position: relative;
  transition: all .2s ease-in-out;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.service-area-grid .card:hover {
  background: var(--offwhite);
  color: var(--primary-alt);
}

.service-area-grid .card a span {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.service-area-grid .card .card-body {
  display: flex;
}

.service-area-grid .card .icon {
  margin-right: 10px;
}

.service-area-grid .card .card-text {
  text-align: left;
}

/* ============================================================================
   Projects map.

   SOURCE: inc/projects-map/projects-map.css in the harvest, transcribed whole.
   The earlier phase took only the frame — the container, the title, the stage
   with its aspect ratios and the status line — because the stage held a
   placeholder. The map is now real, reading /projects/map.json over our own
   database, so the controls, tooltip, legend and canvas rules come across too.
   The declarations are the original's; only the placeholder rule is ours, and
   it is gone with the placeholder.

   The surface stays dark whatever prefers-color-scheme says. This site has no
   dark mode — the page is white for everyone — and an OS-driven light variant
   made the stage flip while the page around it did not. Only the legend, title
   and caption follow the page, through `color: inherit`.
   ========================================================================== */

.gr-projects-map {
  --gr-pm-bg: #0d1117;
  --gr-pm-land: #1a2029;
  --gr-pm-outline: #3d4552;
  --gr-pm-text: #e6edf3;
  --gr-pm-muted: #9aa4b2;
  --gr-pm-panel: rgba(13, 17, 23, 0.88);

  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  max-width: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: inherit;
}

.gr-pm-stage {
  position: relative;
  width: 100%;
  /* Tall on phones so the state shape stays legible; wider as space allows. */
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: var(--gr-pm-bg);
  border: 1px solid var(--gr-pm-outline);
}

@media (min-width: 640px) {
  .gr-pm-stage { aspect-ratio: 1 / 1; }
}

@media (min-width: 992px) {
  .gr-pm-stage { aspect-ratio: 16 / 10; }
}

.gr-pm-status {
  opacity: 0.7;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.gr-pm-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

.gr-pm-canvas.is-grabbing { cursor: grabbing; }

.gr-pm-canvas:focus-visible {
  outline: 3px solid #0090ff;
  outline-offset: -3px;
}

/* ---- Map controls -------------------------------------------------------- */

.gr-pm-controls {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  z-index: 2;
}

.gr-pm-controls button {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gr-pm-outline);
  border-radius: 8px;
  background: var(--gr-pm-panel);
  color: var(--gr-pm-text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.gr-pm-controls button:hover { background: #1f2630; }
.gr-pm-controls button:focus-visible { outline: 3px solid #0090ff; outline-offset: 2px; }

.gr-pm-reset { font-size: 0.72rem !important; }

/* ---- Map tooltip --------------------------------------------------------- */

.gr-pm-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  max-width: 17rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--gr-pm-outline);
  border-radius: 8px;
  background: var(--gr-pm-panel);
  color: var(--gr-pm-text);
  pointer-events: none;
  font-size: 0.82rem;
  line-height: 1.35;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.gr-pm-tooltip[hidden] { display: none; }
.gr-pm-tooltip strong { display: block; font-weight: 600; }
.gr-pm-tip-sub { display: block; color: var(--gr-pm-muted); margin-top: 0.15rem; }

/* ---- Map legend ---------------------------------------------------------- */

.gr-pm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}

.gr-pm-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.35rem 0.7rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  opacity: 0.5;
}

.gr-pm-legend-item.is-on { opacity: 1; }
.gr-pm-legend-item:focus-visible { outline: 3px solid #0090ff; outline-offset: 2px; }

.gr-pm-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.gr-pm-legend-count {
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}

/* ---- Map states ---------------------------------------------------------- */

/* The visually-hidden live region that announces zoom, reset and legend
   toggles. */
.gr-pm-live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.gr-projects-map.is-loading .gr-pm-stage::after {
  content: "Loading project map‚6";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gr-pm-muted);
  font-size: 0.9rem;
}

.gr-projects-map.has-error .gr-pm-stage { opacity: 0.4; }

/* The map is a canvas with no animation loop when idle, so reduced-motion
   mainly means not animating the zoom. Kept explicit so future transitions
   inherit it. */
@media (prefers-reduced-motion: reduce) {
  .gr-projects-map * { transition: none !important; animation: none !important; }
}

/* ---- Footer -------------------------------------------------------------- */

footer.site-footer {
  color: var(--white);
  font-size: 12px;
}

footer.site-footer .top-footer {
  background-color: var(--darker);
}

footer.site-footer .bottom-footer {
  color: var(--seashell);
  background-color: #000;
}

footer.site-footer img.site-logo {
  max-width: 200px;
}

footer.site-footer a {
  color: var(--white);
}

footer.site-footer .footer-nav a {
  font-size: 14px;
  font-weight: 500;
}

footer.site-footer .footer-nav a:hover {
  text-decoration: none;
}

footer.site-footer ul li {
  display: inline-block;
  margin: 0 12px;
  position: relative;
}

/* SKIPPED — footer.site-footer ul li::after draws a separator dot with Font
   Awesome's \f111 in "Font Awesome 5 Free". Without the icon font that is a
   tofu box after every list item, so the rule is not transcribed and the
   footer's one list carries no separators. The li:last-child:after rule that
   suppresses the final dot goes with it. */

/* ---- social-menu --------------------------------------------------------- */

footer.site-footer .social-menu {
  margin: 0;
}

footer.site-footer .social-menu div {
  list-style-type: none;
  padding: 0;
  display: inline-block;
  margin: 0 1px;
}

footer.site-footer .social-menu div a {
  color: var(--white);
  display: inline-block;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--white);
  width: 30px;
  height: 30px;
  padding: 3px;
  font-size: 14px;
  text-align: center;
  margin: 0 5px 0 0;
  transition: all .3s;
  opacity: 1;
}

footer.site-footer .social-menu div a:hover,
footer.site-footer .social-menu div a:focus,
footer.site-footer .social-menu div a:active {
  opacity: .6;
}

footer.site-footer .social-menu div:last-child a {
  margin: 0;
}

/* ---- # Media Query ------------------------------------------------------- */

@media (min-width: 576px) {
  .container {
    max-width: 720px;
  }
}

/* Large Displays */
@media (min-width: 992px) {
  .container {
    max-width: 1390px;
  }
}

@media (min-width: 992px) and (max-width: 1440px) {
  .container {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media screen and (max-width: 1199px) {
  .icon-box {
    margin-right: 20px;
  }

  .navbar-brand {
    padding: 5px;
    box-shadow: none;
  }

  .icon-box.hours {
    display: none;
  }

  #masthead .navbar-nav > li > a,
  #masthead .navbar-nav > li > button.nav-link {
    padding: 10px 12px;
  }
}

/* ---- ## iPad ------------------------------------------------------------- */

@media only screen and (max-width: 991px) {
  #masthead .navigation-bar {
    padding: 5px 0;
  }

  .anchor {
    margin-top: 0;
  }

  .hero-wrap.homepage-hero .hero-content {
    padding: 30px;
    margin: 100px 0;
  }

  .hero-wrap.homepage-hero .hero-cta {
    margin: 0 0 100px;
  }

  .hero-wrap .hero-content {
    padding: 70px 20px 50px;
  }

  .hero-wrap::after {
    display: none;
  }

  .offset-negative {
    margin-top: 50px;
  }

  header#masthead {
    position: relative;
  }

  header#masthead.hidden {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }

  #masthead .navbar-nav > li > a,
  #masthead .navbar-nav > li > button.nav-link {
    padding: 15px;
    font-size: 16px;
  }

  ul#menu-primary-nav {
    padding: 20px 0;
  }

  .dropdown-item {
    margin: 15px 0 20px 10px;
  }
}

/* ---- ## iPad ------------------------------------------------------------- */

@media only screen and (max-width: 768px) {
  section.block {
    padding: 40px 0;
  }

  .h1,
  h1 {
    font-size: 3rem;
  }

  .h2,
  h2 {
    font-size: 1.8rem;
  }

  .hero-wrap .hero-content h1 {
    font-size: 2rem;
  }

  .hero-wrap .hero-content .subhead {
    font-size: 30px;
  }

  /* Written twice in main.css (70px 0, then 70px 20px 50px); the later rule is
     the one that wins there, so only that pair of declarations matters. Both
     transcribed to keep the file diffable against the original. */
  .hero-wrap .hero-content {
    padding: 70px 0;
  }

  .hero-wrap .hero-content {
    padding: 70px 20px 50px;
  }

  .floating-cta-footer {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    display: block !important;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: #fff;
    padding: 15px;
  }

  /*
   * Nothing compensated for the 70px fixed bar, so at the true bottom of the page it
   * sat on top of real content: elementFromPoint() at the footer "Sitemap" link
   * returned the bar, i.e. the link could not be tapped at all.
   */
  body {
    padding-bottom: 78px;
  }

  /* Keep the bar clear of the iOS home indicator / Android gesture bar. */
  @supports (padding: max(0px)) {
    .floating-cta-footer {
      padding-bottom: max(15px, env(safe-area-inset-bottom));
    }
  }

  .floating-cta-footer .btn-secondary {
    text-transform: none;
    width: 100%;
    font-size: 16px;
    border: none;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .floating-cta-footer .btn-secondary:hover,
  .floating-cta-footer .btn-secondary:focus,
  .floating-cta-footer .btn-secondary:active {
    border: none;
  }

  /* CHANGED — selector only. The original sizes a Font Awesome handset with
     `.floating-cta-footer .btn-secondary .fa`; the same numbers apply to the
     inline SVG that replaces it. */
  .floating-cta-footer .btn-secondary .icon {
    font-size: 22px;
    position: relative;
    top: 2px;
    right: 5px
  }

  .top-bar {
    flex-direction: row-reverse;
    justify-content: space-between;
  }

  .header-cta {
    display: none;
  }

  .icon-box.emergency {
    margin-right: 0;
  }
}

/* ---- ## Small phones ----------------------------------------------------- */

@media only screen and (max-width: 480px) {
  footer.site-footer ul {
    padding-left: 0;
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
  }
}

/* ---- Sticky sidebar ------------------------------------------------------ */

@media (min-width: 991px) {
  .sticky-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 80px
  }

  .overlap {
    margin-top: 0
  }
}

.floating-cta-footer {
  display: none
}

/* iPad Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .hero-wrap.homepage-hero .hero-content {
    padding: 200px 0;
  }

  header#masthead {
    position: relative;
  }

  header#masthead.hidden {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
}

/* =========================================================================
   Quote form section (rebuilt 2026-08-04)

   Replaces the two-column offer-cards-plus-video layout. One centered column,
   canvas background, offer -> form -> reassurance in reading order.

   Transcribed whole, minus .gr-quote__canvas: the canvas is painted by
   quote-canvas.js, a script this project does not port, and an empty absolutely
   positioned canvas over the section is nothing but a way to lose a click. The
   section keeps the solid --secondary the canvas falls back to, which is the
   colour it renders as before the script runs.
   ========================================================================= */

.gr-quote {
  --gr-quote-canvas-base: var(--secondary, #d80022);
  --gr-quote-canvas-tint: var(--secondary-alt, #aa0018);

  position: relative;
  isolation: isolate;              /* keeps the canvas behind without a z-index race */
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1rem;
  background: var(--secondary, #d80022);   /* the canvas's fallback, and its base */
  color: #fff;
}

.gr-quote__inner {
  width: 100%;
  max-width: 640px;                /* a single form column, not a full-width sprawl */
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vw, 2rem);
}

/* ---------------------------------------------------------------- heading */

.gr-quote__head { text-align: center; }

.gr-quote__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  line-height: 1.15;
  color: #fff;
}

.gr-quote__sub {
  margin: 0;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  line-height: 1.45;
  opacity: 0.95;
}

/* ---------------------------------------------------------------- offers */

.gr-quote__offers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gr-quote__offer {
  flex: 1 1 14rem;
  max-width: 20rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 1rem 1.25rem;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  text-align: center;
}

.gr-quote__figure {
  font-size: clamp(2rem, 6vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.gr-quote__unit {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.gr-quote__note {
  margin-top: 0.2rem;
  font-size: 0.82rem;
  line-height: 1.35;
  opacity: 0.9;
}

/* ---------------------------------------------------------------- form card */

.gr-quote__card {
  padding: clamp(1.1rem, 3vw, 1.75rem);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
}

.gr-quote__cta {
  margin: 0 0 1rem;
  text-align: center;
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  line-height: 1.2;
  color: #fff;
}

/* The lead form inherits the dark-panel treatment already defined in lead-form.css
   via .txt-white / .bg-secondary; .gr-quote is a third host, so opt it in here. */
.gr-quote .hiusa-lead {
  --hiusa-muted: #f0d7db;
  --hiusa-line: rgba(255, 255, 255, 0.5);
  --hiusa-accent: #ffffff;
  --hiusa-error: #ffd7d2;
  color: #fff;
}

.gr-quote .hiusa-lead .hiusa-field input,
.gr-quote .hiusa-lead .hiusa-field select,
.gr-quote .hiusa-lead .hiusa-field textarea { color: #1c2128; }

.gr-quote .hiusa-lead .hiusa-next,
.gr-quote .hiusa-lead .hiusa-submit {
  background: #fff;
  color: #a30019;
  border-color: #fff;
}

.gr-quote .hiusa-lead .hiusa-back { color: #fff; }

/* ---------------------------------------------------------------- trust row */

.gr-quote__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  opacity: 0.92;
}

.gr-quote__trust li { display: flex; align-items: center; gap: 0.4rem; }

/* A real check, drawn from two borders of a rotated box. The previous version
   crossed two 45deg gradients, which renders an X — the opposite signal on a row
   of reassurances. */
.gr-quote__trust li::before {
  content: "";
  inline-size: 0.45rem;
  block-size: 0.8rem;
  flex: none;
  margin-block-start: -0.18rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .gr-quote * { transition: none !important; animation: none !important; }
}

/* The lead form's privacy link inherits the site link color (#1b93d2), which sits at
   about 2:1 on the red panel — unreadable. On this section it is white and underlined. */
.gr-quote .hiusa-lead-privacy,
.gr-quote .hiusa-lead-privacy a {
  color: #fff;
}

.gr-quote .hiusa-lead-privacy a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================================
   main.css — transcribed with the replica core pages (2026-08-19)

   The components below arrived with /company/, /gallery/, /reviews/,
   /privacy-policy/, /project-received/ and /sitemap/, so their rules come in
   with them, per the header's rule. Declarations are the original's,
   character for character, in main.css order within each group. One CHANGED
   rule, marked where it happens: the gallery expand glyph.
   ========================================================================== */

/* ---- Breadcrumbs (privacy-policy) ---------------------------------------- */

.breadcrumbs-section {
    color: var(--offwhite);
    background: var(--primary);
    font-size: 14px;
    padding: 15px 0;
}

.breadcrumbs-section ul#breadcrumbs {
    margin-bottom: 0;
    padding-left: 0;
}

#breadcrumbs {
    overflow: hidden;
    width: 100%;
}

#breadcrumbs li {
    display: inline;
    list-style: none;
    margin: 0 0.3em 0 0;
}

#breadcrumbs a {
    color: #fff;
}

/* ---- Review filters and pagination (reviews) -----------------------------
   .review-filters, .pagination-btn's disabled state's markup hooks and
   #page-info are used by the page markup; the original defines
   .custom-select-wrapper and the pagination set in main.css and leaves
   .review-filters itself unstyled — nothing to transcribe for it.
   -------------------------------------------------------------------------- */

.custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: auto;
}

/* Style the dropdown */
.custom-select-wrapper select {
    appearance: none;
    background-color: var(--primary);
    border-radius: 4px;
    color: white;
    padding: 5px 10px;
    border: 1px solid var(--primary);
    font-size: 16px;
    cursor: pointer;
    outline: none;
    width: 100%;
    padding-right: 30px;
}

/* Add the carrot */
.custom-select-wrapper::after {
    content: '▼';
    font-size: 12px;
    color: white;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none; /* Prevent interaction */
}

/* Hover effect */
.custom-select-wrapper select:hover {
    background-color: var(--primary-alt);
}

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

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.pagination-btn {
    padding: 10px 15px;
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 4px;
    margin: 0 5px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
}

.pagination-btn:hover {
    background-color: var(--primary-alt);
}

.pagination-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

#page-info {
    margin: 0 10px;
}

/* ---- Gallery tabs (gallery, project-received) ----------------------------
   The original's selectors are .accordion .nav-pills .nav-link — the tab
   pills sit inside div.accordion on the harvested page — and they apply to
   our <button> pills the same as to the original's <a> pills.
   .accordion .nav-pills .nav-link > img and .active > img are skipped: no
   pill on this site carries an image. .accordion .tab-pane .btn-outline .far
   is skipped: a Font Awesome padding rule for markup no page has.
   -------------------------------------------------------------------------- */

.accordion .nav-pills .nav-link {
    background: var(--offwhite);
    color: var(--primary);
    border-radius: 6px;
    padding: 0;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    transition: all 0.3s ease;
    margin-right: 10px;

}

.accordion .nav-pills .nav-link span {
    padding: 15px 25px;
    display: block;
}

.accordion .nav-pills .nav-link:hover {
    background: var(--white);
}

.accordion .nav-pills .nav-link.active,
.accordion .nav-pills .show>.nav-link {
    background: var(--primary);
    color: var(--white);
}

.accordion ul.nav-pills {
    margin: 0;
}

.accordion ul.nav-pills li {
    margin: 0;
    list-style: none;
}

/* ---- Gallery grid (gallery, project-received) ----------------------------
   .gallery-container img {} is empty in main.css and not carried.
   -------------------------------------------------------------------------- */

.gallery-container .expand-link {
    display: flex;
    align-items: top;
    justify-content: right;
}

/* CHANGED — the glyph, not the geometry. The original writes
       font-family: "Font Awesome 5 Free"; content: "\f0fe";
   an icon-font plus-square. There is no icon font in this project and the
   capture holds none of the six FA webfont binaries (the harvested page
   renders a tofu box here — ORIGINAL-SITE-DEFECTS.md #15), so the same box
   is drawn from our own SVG file at the glyph's 2rem size. Position, margin,
   shadow and pointer-events are the original's. */
.gallery-container .expand-link::after {
    content: "";
    width: 2rem;
    height: 2rem;
    background: url('/static/media/icons/expand.svg') no-repeat center / contain;
    position: absolute;
    z-index: 1;
    margin: 10px 20px;
    filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.24));
    pointer-events: none;
}

.gallery-container .expand-link img {
    transition: all .2s;
    /* Animation */

    opacity: 1;
}

.gallery-container .expand-link:hover img {
    opacity: .7;
}