/* =========================================================
   PEARLAND GARAGE DOORS
   RESPONSIVE NAVBAR + HERO + COUPON
   BOOTSTRAP 5 BREAKPOINTS
========================================================= */

:root {
  --color-green: #123122;
  --color-green-dark: #0f2b1e;
  --color-green-soft: #36473b;

  --color-cream: #e9e3d7;
  --color-cream-light: #f3eee5;

  --color-beige: #aea28c;
  --color-beige-light: #d4ccbe;
  --color-taupe: #bdb5a7;

  --color-black: #171717;
  --color-text: #36473b;
  --color-gray: #62604f;
  --color-gray-dark: #878070;

  --border-green: rgba(18, 49, 34, 0.22);
  --border-light: rgba(18, 49, 34, 0.10);

  --bg-main: #aea28c;
  --bg-section: #e9e3d7;
  --bg-card: #f3eee5;
  --bg-accent: #123122;

  --transition: 250ms ease;
}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  background: var(--bg-main);
  color: var(--color-green-dark);
  font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   NAVBAR
========================================================= */

.site-header {
  position: relative;
  z-index: 1000;
}

.pearland-navbar {
  min-height: 94px;
  padding: 0;
  background: var(--color-cream-light);
  border-bottom: 1px solid var(--border-green);
}

.nav-container {
  width: 100%;
  max-width: 1540px;
  min-height: 94px;
  margin: 0 auto;
  padding: 0 30px;

  display: flex;
  align-items: center;
}


/* =========================================================
   NAV LINKS
========================================================= */

.pearland-navbar .nav-link {
  position: relative;

  padding: 11px 4px !important;

  color: var(--color-green-dark) !important;

  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.02em;

  text-transform: uppercase;

  transition:
    color var(--transition);
}

.pearland-navbar .nav-link::before {
  content: "";

  position: absolute;

  left: 4px;
  right: 4px;
  bottom: 1px;

  height: 2px;

  background: var(--color-green-dark);

  transform: scaleX(0);
  transform-origin: right;

  transition: transform var(--transition);
}

.pearland-navbar .nav-link:hover,
.pearland-navbar .nav-link.active {
  color: var(--color-green);
}

.pearland-navbar .nav-link:hover::before,
.pearland-navbar .nav-link.active::before {
  transform: scaleX(1);
  transform-origin: left;
}



/* =========================================================
   DESKTOP NAV
========================================================= */
/* =========================================================
   MOBILE TOGGLER - CENTERED
========================================================= */

@media (max-width: 1199.98px) {

  .nav-container {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 94px;

    padding: 0 20px;
  }

  

  .custom-toggler {
    width: 48px;
    height: 44px;

    margin: 0 auto;

    padding: 8px 10px;

    border: 2px solid var(--color-green-dark);
    border-radius: 8px;

    background: transparent;

    box-shadow: none !important;
  }


  .custom-toggler span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 5px 0;

    background: var(--color-green-dark);
  }


  /* Dropdown menu opens below the centered toggle */
  .pearland-navbar .navbar-collapse {
    flex-basis: 100%;
    width: 100%;

    margin-top: 10px;
  }
}

@media (min-width: 1200px) {

  .pearland-navbar .navbar-collapse {
    display: flex !important;
    align-items: center;
    justify-content: center;

    min-height: 94px;
  }

  .pearland-navbar .navbar-nav {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: clamp(16px, 1.7vw, 30px);

    margin: 0 auto;
    padding: 0;
  }

}


/* =========================================================
   DROPDOWN
========================================================= */

.services-dropdown {
  position: relative;
}

.services-dropdown::before {
  content: "";

  position: absolute;

  top: 100%;
  left: -15px;

  width: calc(100% + 30px);
  height: 20px;
}

.pearland-dropdown {
  min-width: 260px;

  margin-top: 8px !important;
  padding: 8px;

  border: 1px solid var(--border-green);
  border-radius: 0;

  background: var(--color-cream-light);

  box-shadow:
    0 20px 45px rgba(15, 43, 30, 0.13);
}

.pearland-dropdown .dropdown-item {
  padding: 14px 17px;

  color: var(--color-green-dark);

  border-bottom: 1px solid var(--border-light);

  font-size: 16px;
  font-weight: 700;

  transition:
    background var(--transition),
    color var(--transition),
    padding-left var(--transition);
}

.pearland-dropdown li:last-child .dropdown-item {
  border-bottom: 0;
}

.pearland-dropdown .dropdown-item:hover,
.pearland-dropdown .dropdown-item:focus {
  padding-left: 23px;

  color: var(--color-cream-light) !important;

  background: var(--color-green) !important;
}


/* DESKTOP HOVER DROPDOWN */

@media (min-width: 1200px) {

  .services-dropdown .pearland-dropdown {
    display: block;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transform: translateY(8px);

    transition:
      opacity var(--transition),
      visibility var(--transition),
      transform var(--transition);
  }

  .services-dropdown:hover .pearland-dropdown,
  .services-dropdown:focus-within .pearland-dropdown,
  .services-dropdown .pearland-dropdown.show {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;

    transform: translateY(0);
  }

}


/* =========================================================
   MOBILE TOGGLER
========================================================= */

.custom-toggler {
  width: 48px;
  height: 44px;

  padding: 8px 10px;

  border: 2px solid var(--color-green-dark);
  border-radius: 8px;

  box-shadow: none !important;
}

.custom-toggler span {
  display: block;

  width: 100%;
  height: 2px;

  margin: 5px 0;

  background: var(--color-green-dark);
}


/* =========================================================
   HERO SECTION
========================================================= */

.pearland-hero {
  position: relative;

  width: 100%;

  padding:
    clamp(30px, 4vw, 65px) clamp(12px, 2vw, 25px) clamp(45px, 5vw, 85px);

  background: var(--bg-main);
}


/* =========================================================
   HERO CONTAINER
========================================================= */

.hero-container {
  width: 100%;
  max-width: 1600px;

  margin: 0 auto;
  padding: 0 12px;
}


/* =========================================================
   HERO CARD
========================================================= */

.hero-card {
  position: relative;

  width: 100%;

  min-height: 820px;

  overflow: hidden;

  background: var(--color-cream-light);

  box-shadow:
    0 25px 55px rgba(15, 43, 30, 0.14);

  isolation: isolate;
}


/* =========================================================
   GRID
========================================================= */

.hero-grid {
  position: absolute;
  inset: 0;

  z-index: 0;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(18, 49, 34, 0.06) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(18, 49, 34, 0.06) 1px,
      transparent 1px);

  background-size: 52px 52px;
}


/* =========================================================
   FRAME
========================================================= */

.hero-frame {
  position: absolute;

  top: 55px;
  right: 55px;
  bottom: 55px;
  left: 55px;

  z-index: 50;

  pointer-events: none;

  border: 4px solid var(--color-green-dark);
  border-radius: 23px;
}


/* =========================================================
   TOP LOGO
========================================================= */

.hero-top-brand {
  position: absolute;

  top: 15px;
  left: 50%;

  transform: translateX(-50%);

  z-index: 70;

  display: flex;
  align-items: center;
  justify-content: center;

  width: auto;
  max-width: 390px;

  padding: 6px 18px;

  background: var(--color-cream-light);
}

.hero-brand-logo-link {
  display: flex;
  align-items: center;

  line-height: 0;

  text-decoration: none;
}

.hero-brand-logo {
  display: block;

  width: auto;
  max-width: 100%;
  height: clamp(58px, 5vw, 82px);

  object-fit: contain;
}


/* =========================================================
   LEFT HERO CONTENT
========================================================= */

.hero-content {
  position: absolute;

  top: 0;
  left: 7%;

  z-index: 25;

  width: 47%;
  max-width: 650px;

  padding-top: 1rem;
}


/* =========================================================
   BADGE
========================================================= */

.hero-luxury-badge {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 100px;
  margin-bottom: 0.75rem;

  padding: 6px 15px;

  background:
    rgba(18, 49, 34, 0.06);

  border:
    1px solid rgba(18, 49, 34, 0.18);

  border-radius: 50px;

  color: var(--color-green-dark);

  font-size:
    clamp(.68rem, .8vw, .85rem);

  font-weight: 700;

  letter-spacing: .12em;

  text-transform: uppercase;
}

.badge-dot {
  width: 7px;
  height: 7px;

  flex: 0 0 7px;

  border-radius: 50%;

  background: #c5a059;

  box-shadow:
    0 0 8px rgba(197, 160, 89, .8);
}


/* =========================================================
   HERO TITLE
========================================================= */

.hero-title {
  margin: 0 0 1rem;

  line-height: 1.02;
}

.title-serif {
  display: block;

  color: var(--color-green-dark);

  font-family:
    "Cinzel",
    Georgia,
    serif;

  font-size:
    clamp(2.4rem,
      4.5vw,
      4.5rem);

  font-weight: 800;

  line-height: .98;

  letter-spacing: .06em;

  text-transform: uppercase;
}

.title-gold-gradient {
  display: block;

  font-family:
    "Cinzel",
    Georgia,
    serif;

  font-size:
    clamp(2.2rem,
      4.15vw,
      4.15rem);

  font-weight: 900;

  line-height: 1.02;

  letter-spacing: .04em;

  text-transform: uppercase;

  background:
    linear-gradient(135deg,
      #123122 0%,
      #1f4e37 40%,
      #c5a059 75%,
      #8e6d2f 100%);

  background-clip: text;
  -webkit-background-clip: text;

  color: transparent;

  -webkit-text-fill-color: transparent;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.hero-description {
  max-width: 580px;

  margin:
    0 0 1.25rem;

  color: var(--color-green-dark);

  font-size:
    clamp(.88rem,
      1vw,
      1.05rem);

  line-height: 1.55;

  opacity: .86;
}


/* =========================================================
   CTA BUTTONS
========================================================= */

.hero-cta-buttons {
  position: relative;

  z-index: 10;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: .4rem;
}


/* CALL */

.btn-hero-call {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 9px;

  min-height: 50px;

  padding:
    12px 22px;

  border-radius: 6px;

  background: var(--color-green-dark);

  color: var(--color-cream-light);

  font-size:
    clamp(.9rem,
      1vw,
      1.05rem);

  font-weight: 700;

  text-decoration: none;

  transition:
    transform .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.btn-hero-call svg {
  flex: 0 0 auto;
}

.btn-hero-call:hover {
  color: #fff;

  background: #1a4430;

  transform: translateY(-2px);

  box-shadow:
    0 6px 20px rgba(18, 49, 34, .25);
}


/* ESTIMATE */

.btn-hero-estimate {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 50px;

  padding:
    11px 22px;

  border:
    2px solid var(--color-green-dark);

  border-radius: 6px;

  background: transparent;

  color: var(--color-green-dark);

  font-size:
    clamp(.9rem,
      1vw,
      1.05rem);

  font-weight: 700;

  text-decoration: none;

  transition:
    background .3s ease,
    color .3s ease,
    transform .3s ease;
}

.btn-hero-estimate:hover {
  color: var(--color-cream-light);

  background: var(--color-green-dark);

  transform: translateY(-2px);
}


/* =========================================================
   COUPON
========================================================= */

.hero-offer-card {
  position: relative;

  display: flex;
  flex-direction: column;

  justify-content: space-between;

  gap: 15px;

  width: 100%;
  max-width: 520px;

  min-height: 205px;

  margin-top: 2rem;

  padding:
    24px 24px 18px;

  overflow: hidden;

  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, .96),
      rgba(243, 238, 229, .94));

  border:
    2px dashed rgba(18, 49, 34, .32);

  border-radius: 16px;

  box-shadow:
    0 10px 30px rgba(18, 49, 34, .10);
}


/* TOP */

.offer-card-top {
  display: flex;

  align-items: center;

  gap: 20px;
}


/* BADGE */

.offer-badge {
  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  min-width: 125px;

  padding:
    17px 14px;

  flex-shrink: 0;

  border-radius: 12px;

  background: var(--color-green-dark);

  color: var(--color-cream-light);
}

.offer-amount {
  color: #c5a059;

  font-family:
    "Arial Black",
    Arial,
    sans-serif;

  font-size:
    clamp(2rem,
      2.7vw,
      2.7rem);

  font-weight: 900;

  line-height: .95;
}

.offer-off {
  margin-top: 5px;

  color: var(--color-cream-light);

  font-size: .8rem;

  font-weight: 900;

  letter-spacing: .18em;
}


/* DETAILS */

.offer-details {
  min-width: 0;
}

.offer-tag {
  display: inline-block;

  margin-bottom: 4px;

  color: #8e6d2f;

  font-size: .72rem;

  font-weight: 800;

  letter-spacing: .11em;

  text-transform: uppercase;
}

.offer-title {
  margin: 0;

  color: var(--color-green-dark);

  font-size:
    clamp(1.05rem,
      1.2vw,
      1.25rem);

  font-weight: 900;

  line-height: 1.2;
}

.offer-subtext {
  margin:
    6px 0 0;

  color: #555;

  font-size: .78rem;

  font-weight: 500;

  line-height: 1.4;
}


/* FEATURE BAR */

.offer-footer-features {
  display: flex;

  align-items: center;
  justify-content: space-between;

  flex-wrap: wrap;

  gap: 8px;

  padding-top: 12px;

  border-top:
    1px dashed rgba(18, 49, 34, .20);
}

.footer-feature-item {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  color: var(--color-green-dark);

  font-size: .76rem;

  font-weight: 800;
}

.footer-feature-item svg {
  width: 15px;
  height: 15px;

  flex: 0 0 15px;
}

.feature-bullet {
  color: #c5a059;

  font-size: .9rem;
}


/* NOTCH */

.coupon-notch {
  position: absolute;

  left: 158px;

  width: 18px;
  height: 18px;

  border:
    2px solid rgba(18, 49, 34, .32);

  border-radius: 50%;

  background: var(--color-cream-light);
}

.notch-top {
  top: -10px;
}

.notch-bottom {
  bottom: -10px;
}


/* =========================================================
   RIGHT MAIN IMAGE
========================================================= */

.hero-image-main {
  position: absolute;

  top: 9%;
  right: 5.5%;

  z-index: 8;

  width: 34%;
  height: 71%;

  overflow: hidden;

  background: var(--color-beige-light);
}

.hero-image-main img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;
}


/* =========================================================
   DETAIL IMAGE
========================================================= */

.hero-image-detail {
  position: absolute;

  top: 54%;
  right: 28%;

  z-index: 15;

  width: 24%;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: var(--color-green-soft);

  border:
    3px solid var(--color-cream-light);
}

.hero-image-detail img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =========================================================
   TRIANGLES
========================================================= */

.hero-triangles {
  position: absolute;

  top: 13%;
  right: 4.1%;

  z-index: 65;

  display: flex;
  flex-direction: column;

  gap: 8px;
}

.hero-triangles span {
  width: 0;
  height: 0;

  border-top:
    13px solid transparent;

  border-bottom:
    13px solid transparent;

  border-right:
    22px solid var(--color-green);
}

.hero-triangles span:nth-child(2) {
  border-right-color: var(--color-beige-light);
}

.hero-triangles span:nth-child(3) {
  border-right-color: var(--color-green-dark);
}


/* =========================================================
   CONTACT
========================================================= */

.hero-contact {
  position: absolute;

  right: 7%;
  bottom: 77px;

  z-index: 60;

  display: flex;
  flex-direction: column;

  align-items: flex-end;

  gap: 4px;
}

.hero-contact a {
  color: var(--color-green-dark);

  font-size:
    clamp(17px,
      1.5vw,
      24px);

  font-weight: 900;

  text-decoration: none;
}

.hero-contact span {
  color: var(--color-black);

  font-size:
    clamp(10px,
      1vw,
      15px);
}


/* =========================================================
   XL / LARGE LAPTOP
   1200 - 1399
========================================================= */

@media (max-width: 1399.98px) {

  .hero-card {
    min-height: 790px;
  }

  .hero-content {
    left: 6.5%;

    width: 48%;
  }

  .hero-image-main {
    right: 5.5%;

    width: 35%;
  }

  .hero-image-detail {
    right: 29%;

    width: 23%;
  }

  .hero-offer-card {
    max-width: 480px;

    margin-top: 1.5rem;
  }

  .footer-feature-item {
    font-size: .72rem;
  }

}


/* =========================================================
   LG / TABLET LANDSCAPE
   BELOW 1200
========================================================= */

@media (max-width: 1199.98px) {

  /* NAV */

  .pearland-navbar {
    min-height: 82px;
  }

  .nav-container {
    min-height: 82px;

    padding:
      0 20px;
  }

  .pearland-navbar .navbar-collapse {
    position: absolute;

    top: 100%;
    left: 18px;
    right: 18px;

    padding: 16px;

    background: var(--color-cream-light);

    border: 1px solid var(--border-green);

    box-shadow:
      0 20px 45px rgba(15, 43, 30, .13);
  }

  .pearland-navbar .nav-link {
    padding:
      13px 10px !important;

    border-bottom:
      1px solid var(--border-light);

    font-size: 16px;
  }

  .pearland-dropdown {
    width: 100%;
    min-width: 100%;

    margin: 0 !important;

    box-shadow: none;
  }


  /* HERO */

  .hero-card {
    min-height: 760px;
  }

  .hero-frame {
    top: 45px;
    right: 40px;
    bottom: 45px;
    left: 40px;

    border-width: 3px;
  }

  .hero-content {
    left: 6%;

    width: 50%;
  }

  .hero-luxury-badge {
    margin-top: 90px;
  }

  .title-serif {
    font-size:
      clamp(2.25rem,
        4.7vw,
        3.8rem);
  }

  .title-gold-gradient {
    font-size:
      clamp(2.05rem,
        4.3vw,
        3.5rem);
  }

  .hero-description {
    max-width: 480px;

    font-size: .9rem;
  }

  .hero-image-main {
    top: 10%;

    right: 5%;

    width: 35%;
    height: 66%;
  }

  .hero-image-detail {
    top: 56%;

    right: 29%;

    width: 23%;
  }

  .hero-offer-card {
    max-width: 445px;

    min-height: 190px;

    margin-top: 1.25rem;

    padding: 20px;
  }

  .offer-badge {
    min-width: 110px;

    padding:
      14px 12px;
  }

  .offer-amount {
    font-size: 2rem;
  }

  .footer-feature-item {
    font-size: .66rem;
  }

  .coupon-notch {
    left: 140px;
  }

}


/* =========================================================
   MD
   768 - 991
   SWITCH HERO TO NORMAL FLOW
========================================================= */

@media (max-width: 991.98px) {

  .pearland-hero {
    padding:
      30px 15px 45px;
  }

  .hero-container {
    padding: 0;
  }

  .hero-card {
    display: flex;
    flex-direction: column;

    min-height: auto;

    padding:
      100px 55px 65px;

    overflow: hidden;
  }


  /* FRAME */

  .hero-frame {
    top: 30px;
    right: 25px;
    bottom: 30px;
    left: 25px;

    border-width: 2.5px;

    border-radius: 18px;
  }


  /* LOGO */

  .hero-top-brand {
    top: 11px;

    max-width: 320px;
  }

  .hero-brand-logo {
    height: 65px;
  }


  /* CONTENT */

  .hero-content {
    position: relative;

    top: auto;
    left: auto;

    order: 1;

    width: 100%;
    max-width: 100%;

    padding: 0;

    text-align: center;
  }

  .hero-luxury-badge {
    margin-top: 0;
  }

  .title-serif,
  .title-gold-gradient {
    text-align: center;
  }

  .hero-description {
    max-width: 650px;

    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta-buttons {
    justify-content: center;
  }


  /* COUPON */

  .hero-offer-card {
    max-width: 600px;

    margin:
      28px auto 0;

    text-align: left;
  }


  /* IMAGE MAIN */

  .hero-image-main {
    position: relative;

    top: auto;
    right: auto;

    order: 2;

    width: 82%;
    height: auto;

    aspect-ratio: 16 / 9;

    margin:
      45px auto 0;
  }


  /* DETAIL IMAGE */

  .hero-image-detail {
    position: relative;

    top: auto;
    right: auto;

    order: 3;

    width: 48%;

    margin:
      -90px auto 0 8%;

    aspect-ratio: 1 / 1;
  }


  /* TRIANGLES */

  .hero-triangles {
    top: auto;

    right: 37px;
    bottom: 215px;
  }


  /* CONTACT */

  .hero-contact {
    position: relative;

    right: auto;
    bottom: auto;

    order: 4;

    align-items: center;

    margin-top: 35px;

    text-align: center;
  }

}


/* =========================================================
   SM / MOBILE
   BELOW 768
========================================================= */

@media (max-width: 767.98px) {

  .pearland-hero {
    padding:
      20px 10px 35px;
  }

  .hero-card {
    padding:
      85px 35px 50px;
  }

  .hero-frame {
    top: 24px;
    right: 15px;
    bottom: 24px;
    left: 15px;

    border-width: 2px;

    border-radius: 15px;
  }


  /* LOGO */

  .hero-top-brand {
    top: 8px;

    max-width: 245px;

    padding:
      4px 10px;
  }

  .hero-brand-logo {
    height: 52px;
  }


  /* BADGE */

  .hero-luxury-badge {
    padding:
      5px 11px;

    font-size: .63rem;

    letter-spacing: .09em;
  }


  /* TITLES */

  .title-serif {
    font-size:
      clamp(2rem,
        10vw,
        3rem);

    letter-spacing: .03em;
  }

  .title-gold-gradient {
    font-size:
      clamp(1.8rem,
        9vw,
        2.8rem);

    letter-spacing: .025em;
  }


  /* DESCRIPTION */

  .hero-description {
    font-size: .9rem;

    line-height: 1.55;
  }


  /* BUTTONS */

  .hero-cta-buttons {
    flex-direction: column;

    align-items: stretch;

    width: 100%;
  }

  .btn-hero-call,
  .btn-hero-estimate {
    width: 100%;

    min-height: 48px;

    padding:
      11px 16px;

    font-size: .95rem;
  }


  /* COUPON */

  .hero-offer-card {
    width: 100%;

    max-width: 100%;

    min-height: auto;

    padding:
      18px 16px;

    border-radius: 13px;
  }

  .offer-card-top {
    align-items: stretch;

    flex-direction: column;

    gap: 14px;
  }

  .offer-badge {
    width: 100%;

    min-width: 0;

    flex-direction: row;

    gap: 8px;

    padding:
      13px 15px;
  }

  .offer-amount {
    font-size: 2rem;
  }

  .offer-off {
    margin: 0;
  }

  .offer-details {
    text-align: center;
  }

  .offer-title {
    font-size: 1rem;
  }

  .offer-subtext {
    font-size: .75rem;
  }

  .offer-footer-features {
    justify-content: center;

    gap:
      7px 12px;
  }

  .feature-bullet {
    display: none;
  }

  .footer-feature-item {
    font-size: .7rem;
  }

  .coupon-notch {
    display: none;
  }


  /* IMAGES */

  .hero-image-main {
    width: 100%;

    margin-top: 35px;

    aspect-ratio: 4 / 3;
  }

  .hero-image-detail {
    width: 65%;

    margin:
      -55px auto 0 4%;
  }

  .hero-triangles {
    display: none;
  }

  .hero-contact {
    margin-top: 28px;
  }

  .hero-contact a {
    font-size: 18px;
  }

  .hero-contact span {
    font-size: 11px;
  }

}


/* =========================================================
   XS / SMALL MOBILE
   BELOW 576
========================================================= */

@media (max-width: 575.98px) {

  .nav-container {
    padding:
      0 14px;
  }

  .pearland-navbar {
    min-height: 70px;
  }

  .nav-container {
    min-height: 70px;
  }


  .hero-card {
    padding:
      76px 26px 45px;
  }

  .hero-frame {
    left: 11px;
    right: 11px;
  }

  .hero-top-brand {
    max-width: 210px;
  }

  .hero-brand-logo {
    height: 46px;
  }

  .title-serif {
    font-size:
      clamp(1.8rem,
        10.5vw,
        2.6rem);
  }

  .title-gold-gradient {
    font-size:
      clamp(1.65rem,
        9.7vw,
        2.4rem);
  }

  .hero-description {
    font-size: .84rem;
  }

  .hero-image-detail {
    width: 72%;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

  .hero-card {
    padding:
      70px 21px 42px;
  }

  .hero-brand-logo {
    height: 42px;
  }

  .hero-luxury-badge {
    font-size: .58rem;
  }

  .btn-phone-num {
    font-size: .88rem;
  }

  .offer-footer-features {
    flex-direction: column;
  }

  .hero-image-detail {
    width: 76%;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important;
  }

}


/* =========================================================
   CENTER NAVBAR TOGGLER ON SMALL SCREENS
========================================================= */

@media (max-width: 767.98px) {

  .nav-container {
    position: relative;
    justify-content: center;
  }

  .custom-toggler {
    position: absolute;

    top: 50%;
    left: 50%;

    margin: 0 !important;

    transform: translate(-50%, -50%);

    z-index: 1001;
  }

}

/* =========================================================
   FINAL HERO BUTTON SIZE OVERRIDE
   KEEP THIS AT THE VERY END OF CSS
========================================================= */

body .hero-content .hero-cta-buttons .btn-hero-call,
body .hero-content .hero-cta-buttons .btn-hero-estimate {
  font-size: 22px !important;
  font-weight: 800 !important;

  min-height: 58px !important;

  padding:
    14px 30px !important;
}


/* Phone number has its own font-size rule in your CSS */
body .hero-content .hero-cta-buttons .btn-hero-call .btn-phone-num {
  font-size: 22px !important;
  font-weight: 800 !important;
}


/* Call icon */
body .hero-content .btn-hero-call svg {
  width: 24px !important;
  height: 24px !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  body .hero-content .hero-cta-buttons .btn-hero-call,
  body .hero-content .hero-cta-buttons .btn-hero-estimate {
    font-size: 21px !important;

    min-height: 58px !important;

    padding:
      14px 25px !important;
  }


  body .hero-content .hero-cta-buttons .btn-hero-call .btn-phone-num {
    font-size: 21px !important;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

  body .hero-content .hero-cta-buttons .btn-hero-call,
  body .hero-content .hero-cta-buttons .btn-hero-estimate {
    font-size: 19px !important;

    font-weight: 800 !important;

    min-height: 56px !important;

    padding:
      13px 18px !important;
  }


  body .hero-content .hero-cta-buttons .btn-hero-call .btn-phone-num {
    font-size: 19px !important;
  }


  body .hero-content .btn-hero-call svg {
    width: 21px !important;
    height: 21px !important;
  }

}

/* 0000000000000000000000000000000000000000000000000000000000000000 */

/* =========================================================
   PEARLAND GARAGE DOORS
   LUXURY OFFERS SECTION
========================================================= */


/* =========================================================
   SECTION
========================================================= */

#offers {
  position: relative;

  width: 100%;

  padding:
    50px 20px;

  overflow: hidden;

  background:
    var(--color-cream-light);
}


/* =========================================================
   CONTAINER
========================================================= */

#offers .overview-container {
  width: 100%;

  max-width: 1350px;

  margin: 0 auto;

  padding: 0;
}


/* =========================================================
   MAIN CARD
========================================================= */

#offers .overview-card {
  position: relative;

  width: 100%;

  aspect-ratio:
    228 / 142;

  overflow: hidden;

  background:
    var(--color-cream-light);

  isolation: isolate;
}


/* =========================================================
   GRID BACKGROUND
========================================================= */

#offers .overview-grid {
  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(18, 49, 34, 0.04) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(18, 49, 34, 0.04) 1px,
      transparent 1px);

  background-size:
    34px 34px;
}


/* =========================================================
   ARCHITECTURAL FRAME
========================================================= */

#offers .overview-frame {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 96%;

  z-index: 2;

  pointer-events: none;
}


#offers .overview-frame path {
  fill: none;

  stroke:
    var(--color-green-dark);

  stroke-width:
    2.2;

  vector-effect:
    non-scaling-stroke;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/* =========================================================
   LEFT COLUMN
========================================================= */

#offers .overview-left {
  position: absolute;

  top: 5%;
  left: 3%;

  width: 46%;
  height: 91%;

  z-index: 5;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  overflow: hidden;
}


/* =========================================================
   TITLE ROW
========================================================= */

#offers .overview-heading-row {
  display: flex;

  align-items: center;

  width: 100%;

  gap: 15px;

  flex:
    0 0 auto;
}


/* =========================================================
   TITLE
========================================================= */

#offers .overview-title {
  margin: 0;

  flex-shrink: 0;

  color:
    var(--color-green-dark);

  font-family:
    "Arial Black",
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    clamp(60px,
      6.4vw,
      90px);

  font-weight: 900;

  line-height:
    0.88;

  letter-spacing:
    -0.055em;

  text-transform:
    uppercase;

  opacity: 0;

  transform:
    translateX(-35px);

  animation:
    offersTitleIn 0.8s cubic-bezier(.16, 1, .3, 1) 0.1s forwards;
}


/* =========================================================
   TITLE LINE
========================================================= */

#offers .overview-title-line {
  display: block;

  flex: 1;

  max-width:
    55px;

  height:
    3px;

  margin-top:
    7px;

  background:
    var(--color-green-dark);

  border-radius:
    10px;

  transform:
    scaleX(0);

  transform-origin:
    left;

  animation:
    offersLineIn 0.8s ease 0.55s forwards;
}


/* =========================================================
   DESCRIPTION
========================================================= */

#offers .overview-description {
  width:
    88%;

  max-width:
    560px;

  margin:
    10px 0 0;

  color:
    var(--color-black);

  font-size:
    17px;

  font-weight:
    400;

  line-height:
    1.42;

  flex:
    0 0 auto;

  opacity: 0;

  transform:
    translateY(18px);

  animation:
    offersFadeUp 0.75s ease 0.35s forwards;
  padding: 3% 0;
}


/* =========================================================
   PHONE CALL BUTTON
========================================================= */

#offers .offers-call-btn {
  position: relative;

  display:
    inline-flex;

  align-items:
    center;

  flex:
    0 0 auto;

  gap:
    14px;

  width:
    auto;

  min-width:
    340px;

  min-height:
    64px;

  margin-top:
    10px;

  padding:
    7px 12px 7px 8px;

  overflow:
    hidden;

  background:
    var(--color-green-dark);

  border:
    2px solid var(--color-green-dark);

  border-radius:
    50px;

  color:
    var(--color-cream-light);

  text-decoration:
    none;

  white-space:
    nowrap;

  box-shadow:
    0 10px 25px rgba(15, 43, 30, 0.20);

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;

  animation:
    offersPhonePulse 2.5s ease-in-out infinite;
}


/* SHINE */

#offers .offers-call-btn::before {
  content: "";

  position: absolute;

  top: 0;
  left: -130%;

  width:
    65%;

  height:
    100%;

  pointer-events:
    none;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.20),
      transparent);

  transform:
    skewX(-20deg);

  animation:
    offersButtonShine 4s ease-in-out infinite;
}


/* =========================================================
   PHONE ICON
========================================================= */

#offers .offers-call-icon {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  width:
    48px;

  height:
    48px;

  min-width:
    48px;

  flex:
    0 0 48px;

  border-radius:
    50%;

  background:
    var(--color-cream-light);

  color:
    var(--color-green-dark);

  font-size:
    20px;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.12);

  animation:
    offersPhoneRing 2s ease-in-out infinite;
}


/* =========================================================
   PHONE TEXT
========================================================= */

#offers .offers-call-content {
  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  justify-content: center;

  min-width: 0;
}


#offers .offers-call-content small {
  display: block;

  margin-bottom:
    3px;

  color:
    var(--color-beige-light);

  font-size:
    11px;

  font-weight:
    800;

  line-height:
    1.1;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}


#offers .offers-call-content strong {
  display: block;

  color:
    var(--color-cream-light);

  font-size:
    21px;

  font-weight:
    900;

  line-height:
    1.05;
}


/* =========================================================
   PHONE ARROW
========================================================= */

#offers .offers-call-arrow {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  width:
    40px;

  height:
    40px;

  min-width:
    40px;

  flex:
    0 0 40px;

  margin-left:
    auto;

  border:
    1px solid rgba(243, 238, 229, 0.28);

  border-radius:
    50%;

  background:
    rgba(243, 238, 229, 0.16);

  color:
    var(--color-cream-light);

  font-size:
    17px;

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}


/* PHONE HOVER */

#offers .offers-call-btn:hover {
  color:
    var(--color-cream-light);

  background:
    var(--color-green);

  transform:
    translateY(-3px);

  box-shadow:
    0 15px 32px rgba(15, 43, 30, 0.28);
}


#offers .offers-call-btn:hover .offers-call-arrow {
  background:
    var(--color-cream-light);

  color:
    var(--color-green-dark);

  transform:
    rotate(45deg);
}


/* =========================================================
   DECORATIVE DOWN ARROWS
========================================================= */

#offers .overview-down-arrows {
  display: flex;

  align-items: center;

  gap:
    12px;

  margin:
    10px 0 5px 15px;

  flex:
    0 0 auto;

  opacity: 0;

  animation:
    offersFadeIn 0.5s ease 0.75s forwards;
}


#offers .overview-down-arrows span {
  width: 0;
  height: 0;

  border-left:
    14px solid transparent;

  border-right:
    14px solid transparent;

  border-top:
    21px solid var(--color-green-dark);

  animation:
    offerArrowBounce 1.8s ease-in-out infinite;
}


#offers .overview-down-arrows span:nth-child(2) {
  border-top-color:
    var(--color-beige);

  animation-delay:
    0.15s;
}


#offers .overview-down-arrows span:nth-child(3) {
  border-top-color:
    #557367;

  animation-delay:
    0.3s;
}


/* =========================================================
   COUPON IMAGE
========================================================= */

#offers .overview-image {
  position: relative;

  flex:
    0 0 auto;

  width:
    100%;

  max-width:
    100%;

  aspect-ratio:
    16 / 9;

  margin-top:
    20px;

  overflow:
    hidden;

  border-radius:
    20px;

  background:
    transparent;

  z-index: 3;

  opacity: 0;

  transform:
    translateY(25px) scale(.98);

  animation:
    offerImageReveal .9s cubic-bezier(.16, 1, .3, 1) .55s forwards;

  transition:
    box-shadow .35s ease;
}


#offers .overview-image img {
  display: block;

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  object-position:
    center;

  border-radius:
    20px;
}


#offers .overview-image:hover {
  box-shadow:
    0 14px 32px rgba(15, 43, 30, .16);
}


/* =========================================================
   RIGHT COLUMN
========================================================= */

#offers .overview-right {
  position: absolute;

  top:
    23%;

  right:
    3.5%;

  width:
    44%;

  z-index: 5;
}


/* =========================================================
   LUXURY OFFER CARDS
========================================================= */

#offers .overview-item {
  position: relative;

  display: grid;

  grid-template-columns:
    38px minmax(0, 1fr);

  column-gap:
    18px;

  padding:
    22px 24px 22px 20px;

  margin-bottom:
    18px;

  overflow:
    hidden;

  border:
    1px solid rgba(18, 49, 34, 0.15);

  border-radius:
    20px;

  background:
    linear-gradient(135deg,
      rgba(243, 238, 229, 0.98) 0%,
      rgba(233, 227, 215, 0.96) 55%,
      rgba(212, 204, 190, 0.90) 100%);

  box-shadow:
    0 12px 28px rgba(15, 43, 30, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);

  opacity: 0;

  transform:
    translateX(40px);

  animation:
    offerItemIn .8s cubic-bezier(.16, 1, .3, 1) forwards;

  transition:
    transform .35s cubic-bezier(.16, 1, .3, 1),
    box-shadow .35s ease,
    border-color .35s ease;
}


/* stagger */

#offers .overview-item:nth-child(1) {
  animation-delay:
    .25s;
}

#offers .overview-item:nth-child(2) {
  animation-delay:
    .45s;
}

#offers .overview-item:nth-child(3) {
  animation-delay:
    .65s;
}


/* =========================================================
   LUXURY CARD LIGHT
========================================================= */

#offers .overview-item::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height:
    45%;

  pointer-events:
    none;

  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.34),
      rgba(255, 255, 255, 0));
}


/* =========================================================
   DARK GREEN SIDE ACCENT
========================================================= */

#offers .overview-item::after {
  content: "";

  position: absolute;

  top:
    15px;

  bottom:
    15px;

  left: 0;

  width:
    5px;

  border-radius:
    0 8px 8px 0;

  background:
    linear-gradient(180deg,
      var(--color-green-dark),
      var(--color-green-soft));
}


/* LAST ITEM */

#offers .overview-item-last {
  margin-bottom:
    0;
}


/* =========================================================
   RIGHT OFFER ARROW
========================================================= */

#offers .overview-item-arrow {
  position: relative;

  z-index: 2;

  width:
    0;

  height:
    0;

  margin-top:
    10px;

  border-top:
    12px solid transparent;

  border-bottom:
    12px solid transparent;

  border-left:
    20px solid var(--color-green-dark);

  transition:
    transform .3s ease,
    border-left-color .3s ease;
}


/* =========================================================
   OFFER CONTENT
========================================================= */

#offers .overview-item-content {
  position: relative;

  z-index: 2;

  min-width: 0;
}


/* =========================================================
   OFFER LABEL
========================================================= */

#offers .overview-item-label {
  display:
    inline-flex;

  align-items:
    center;

  width:
    fit-content;

  margin-bottom:
    8px;

  padding:
    6px 12px;

  background:
    rgba(18, 49, 34, 0.08);

  border:
    1px solid rgba(18, 49, 34, 0.12);

  border-radius:
    50px;

  color:
    var(--color-green-soft);

  font-size:
    11px;

  font-weight:
    900;

  line-height:
    1.1;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;

  transition:
    background .3s ease,
    color .3s ease,
    border-color .3s ease;
}


/* =========================================================
   OFFER PRICE
========================================================= */

#offers .overview-item h3 {
  margin:
    0 0 6px;

  color:
    var(--color-green-dark);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    44px;

  font-weight:
    700;

  line-height:
    .95;

  letter-spacing:
    -.035em;

  transition:
    transform .3s ease;
}


/* =========================================================
   OFFER DESCRIPTION
========================================================= */

#offers .overview-item p {
  max-width:
    430px;

  margin:
    0;

  color:
    var(--color-black);

  font-size:
    15px;

  font-weight:
    500;

  line-height:
    1.5;
}


/* =========================================================
   OFFER CARD HOVER
========================================================= */

#offers .overview-item:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(18, 49, 34, 0.28);

  box-shadow:
    0 18px 38px rgba(15, 43, 30, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}


#offers .overview-item:hover .overview-item-arrow {
  transform:
    translateX(6px);

  border-left-color:
    var(--color-green);
}


#offers .overview-item:hover .overview-item-label {
  background:
    var(--color-green-dark);

  border-color:
    var(--color-green-dark);

  color:
    var(--color-cream-light);
}


#offers .overview-item:hover h3 {
  transform:
    translateX(4px);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes offersTitleIn {

  from {
    opacity: 0;

    transform:
      translateX(-35px);
  }

  to {
    opacity: 1;

    transform:
      translateX(0);
  }

}


@keyframes offersLineIn {

  from {
    transform:
      scaleX(0);
  }

  to {
    transform:
      scaleX(1);
  }

}


@keyframes offersFadeUp {

  from {
    opacity: 0;

    transform:
      translateY(18px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}


@keyframes offersFadeIn {

  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }

}


@keyframes offerItemIn {

  from {
    opacity:
      0;

    transform:
      translateX(40px);
  }

  to {
    opacity:
      1;

    transform:
      translateX(0);
  }

}


@keyframes offerImageReveal {

  from {
    opacity:
      0;

    transform:
      translateY(25px) scale(.98);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0) scale(1);
  }

}


@keyframes offerArrowBounce {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(5px);
  }

}


@keyframes offersPhonePulse {

  0%,
  100% {
    box-shadow:
      0 10px 25px rgba(15, 43, 30, .20),
      0 0 0 0 rgba(18, 49, 34, .20);
  }

  50% {
    box-shadow:
      0 10px 25px rgba(15, 43, 30, .20),
      0 0 0 10px rgba(18, 49, 34, 0);
  }

}


@keyframes offersPhoneRing {

  0%,
  100% {
    transform:
      rotate(0);
  }

  10% {
    transform:
      rotate(-10deg);
  }

  20% {
    transform:
      rotate(10deg);
  }

  30% {
    transform:
      rotate(-8deg);
  }

  40% {
    transform:
      rotate(8deg);
  }

  50% {
    transform:
      rotate(0);
  }

}


@keyframes offersButtonShine {

  0%,
  25% {
    left:
      -130%;
  }

  50%,
  100% {
    left:
      160%;
  }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {

  #offers .overview-container {
    max-width:
      1450px;
  }

  #offers .overview-title {
    font-size:
      94px;
  }

  #offers .overview-description {
    font-size:
      18px;
  }

  #offers .overview-item {
    padding:
      25px 28px 25px 22px;
  }

  #offers .overview-item h3 {
    font-size:
      50px;
  }

  #offers .overview-item p {
    font-size:
      16px;
  }

}


/* =========================================================
   LAPTOP
   992px - 1199px
========================================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {

  #offers .overview-left {
    top:
      4%;

    height:
      92%;
  }


  #offers .overview-title {
    font-size:
      clamp(46px,
        5vw,
        60px);
  }


  #offers .overview-description {
    width:
      94%;

    font-size:
      13px;
  }


  #offers .offers-call-btn {
    min-width:
      300px;

    min-height:
      52px;
  }


  #offers .offers-call-icon {
    width:
      40px;

    height:
      40px;

    min-width:
      40px;

    flex-basis:
      40px;
  }


  #offers .offers-call-content small {
    font-size:
      8px;
  }


  #offers .offers-call-content strong {
    font-size:
      17px;
  }


  #offers .offers-call-arrow {
    width:
      34px;

    height:
      34px;

    min-width:
      34px;

    flex-basis:
      34px;
  }


  #offers .overview-image {
    margin-top:
      12px;
  }


  #offers .overview-right {
    top:
      20%;

    width:
      43%;
  }


  #offers .overview-item {
    grid-template-columns:
      30px minmax(0, 1fr);

    gap:
      12px;

    padding:
      15px 16px;

    margin-bottom:
      12px;

    border-radius:
      15px;
  }


  #offers .overview-item-arrow {
    border-top-width:
      9px;

    border-bottom-width:
      9px;

    border-left-width:
      15px;
  }


  #offers .overview-item-label {
    font-size:
      9px;

    padding:
      4px 8px;
  }


  #offers .overview-item h3 {
    font-size:
      32px;
  }


  #offers .overview-item p {
    font-size:
      12px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  #offers {
    padding:
      40px 15px;
  }


  #offers .overview-card {
    aspect-ratio:
      auto;

    overflow:
      visible;
  }


  #offers .overview-frame {
    display:
      none;
  }


  #offers .overview-left,
  #offers .overview-right {
    position:
      relative;

    top:
      auto;

    left:
      auto;

    right:
      auto;

    width:
      100%;

    height:
      auto;
  }


  #offers .overview-left {
    padding:
      45px 35px 30px;

    overflow:
      visible;
  }


  #offers .overview-description {
    width:
      100%;

    max-width:
      700px;
  }


  #offers .overview-image {
    width:
      100%;

    max-width:
      700px;

    margin-top:
      20px;
  }


  #offers .overview-right {
    padding:
      25px 35px 55px;
  }


  #offers .overview-item {
    grid-template-columns:
      38px minmax(0, 1fr);

    padding:
      25px;

    margin-bottom:
      20px;
  }


  #offers .overview-item h3 {
    font-size:
      40px;
  }


  #offers .overview-item p {
    max-width:
      650px;

    font-size:
      16px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

  #offers {
    padding:
      25px 10px;
  }


  #offers .overview-left {
    padding:
      35px 22px 25px;
  }


  #offers .overview-title {
    font-size:
      clamp(44px,
        14vw,
        64px);
  }


  #offers .overview-title-line {
    display:
      none;
  }


  #offers .overview-description {
    font-size:
      15px;
  }


  /* PHONE */

  #offers .offers-call-btn {
    width:
      100%;

    min-width:
      0;

    min-height:
      60px;

    margin-top:
      16px;

    gap:
      10px;
  }


  #offers .offers-call-icon {
    width:
      44px;

    height:
      44px;

    min-width:
      44px;

    flex-basis:
      44px;
  }


  #offers .offers-call-content small {
    font-size:
      9px;
  }


  #offers .offers-call-content strong {
    font-size:
      18px;
  }


  #offers .offers-call-arrow {
    width:
      36px;

    height:
      36px;

    min-width:
      36px;

    flex-basis:
      36px;
  }


  /* DOWN ARROWS */

  #offers .overview-down-arrows {
    margin:
      10px 0 8px 8px;
  }


  #offers .overview-down-arrows span {
    border-left-width:
      10px;

    border-right-width:
      10px;

    border-top-width:
      16px;
  }


  /* IMAGE */

  #offers .overview-image {
    width:
      100%;

    max-width:
      100%;

    margin-top:
      15px;

    border-radius:
      14px;
  }


  #offers .overview-image img {
    border-radius:
      14px;
  }


  /* OFFER CARDS */

  #offers .overview-right {
    padding:
      25px 22px 40px;
  }


  #offers .overview-item {
    grid-template-columns:
      28px minmax(0, 1fr);

    column-gap:
      10px;

    padding:
      20px 18px;

    margin-bottom:
      16px;

    border-radius:
      16px;
  }


  #offers .overview-item::after {
    top:
      12px;

    bottom:
      12px;

    width:
      4px;
  }


  #offers .overview-item-arrow {
    margin-top:
      8px;

    border-top-width:
      8px;

    border-bottom-width:
      8px;

    border-left-width:
      13px;
  }


  #offers .overview-item-label {
    font-size:
      9px;

    padding:
      5px 9px;
  }


  #offers .overview-item h3 {
    font-size:
      35px;
  }


  #offers .overview-item p {
    font-size:
      14px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

  #offers .overview-left {
    padding:
      30px 17px 22px;
  }


  #offers .overview-right {
    padding:
      20px 17px 35px;
  }


  #offers .overview-title {
    font-size:
      42px;
  }


  #offers .overview-description {
    font-size:
      14px;
  }


  #offers .offers-call-content strong {
    font-size:
      16px;
  }


  #offers .offers-call-content small {
    font-size:
      8px;
  }


  #offers .overview-item {
    padding:
      17px 15px;
  }


  #offers .overview-item h3 {
    font-size:
      31px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  #offers .overview-title,
  #offers .overview-title-line,
  #offers .overview-description,
  #offers .overview-down-arrows,
  #offers .overview-down-arrows span,
  #offers .overview-image,
  #offers .overview-item,
  #offers .offers-call-btn,
  #offers .offers-call-btn::before,
  #offers .offers-call-icon {
    opacity:
      1;

    transform:
      none;

    animation:
      none !important;

    transition:
      none !important;
  }

}

/* 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */

/* =========================================================
   LUXURY BRANDS V2 - 11 BRANDS GRID LAYOUT
========================================================= */

.luxury-brands-v2 {
  position: relative;
  width: 100%;
  padding: 90px 0;
  background-color: #AEA28C;
  /* Preserved Exact Background */
  overflow: hidden;
}

/* Subtle Geometric Grid Overlay */
.luxury-brands-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;
  background-image:
    linear-gradient(rgba(18, 49, 34, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 49, 34, 0.08) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* PRETITLE */
.v2-pretitle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: #123122;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.v2-pretitle-line {
  display: block;
  width: 36px;
  height: 2px;
  background: #c5a059;
  /* Metallic Gold Accent */
}

/* EDITORIAL TITLE */
.v2-brands-title {
  margin: 0;
  line-height: 0.98 !important;
}

.v2-title-serif {
  display: block;
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 800;
  color: #123122;
  letter-spacing: 0.04em;
}

.v2-title-gold {
  display: block;
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  background: linear-gradient(135deg, #123122 0%, #22573d 50%, #c5a059 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* RIGHT TRUST BADGE */
.v2-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(243, 238, 229, 0.85);
  border: 1px solid rgba(18, 49, 34, 0.15);
  border-radius: 50px;
  color: #123122;
  font-size: 0.85rem;
  font-weight: 800;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.v2-badge-star {
  color: #c5a059;
  font-size: 1rem;
}

/* BRAND CARD (GLASSMORPHISM EMBOSSED) */
.v2-brand-card {
  display: block;
  position: relative;
  text-decoration: none;
  height: 100%;
}

.v2-card-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 14px;
  height: 135px;

  /* Cream Glassmorphism Surface */
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(243, 238, 229, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 2px solid rgba(18, 49, 34, 0.15);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(18, 49, 34, 0.06);

  backdrop-filter: blur(8px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Logo Image Styling */
.v2-card-inner img {
  max-width: 125px;
  max-height: 48px;
  object-fit: contain;

  /* Conversions to brand emerald green tone */
  filter: brightness(0) saturate(100%) invert(15%) sepia(24%) saturate(1117%) hue-rotate(101deg) brightness(88%) contrast(94%);
  opacity: 0.85;
  transition: all 0.35s ease;
}

.v2-brand-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #123122;
  opacity: 0.65;
  transition: all 0.35s ease;
}

/* Hover Interaction */
.v2-brand-card:hover .v2-card-inner {
  transform: translateY(-6px);
  background: #ffffff;
  border-color: #c5a059;
  box-shadow: 0 16px 32px rgba(18, 49, 34, 0.15);
}

.v2-brand-card:hover img {
  transform: scale(1.08);
  opacity: 1;
}

.v2-brand-card:hover .v2-brand-label {
  color: #8e6d2f;
  opacity: 1;
}

/* BOTTOM TICKER STRIP */
.v2-ticker-wrapper {
  margin-top: 1rem;
  padding: 16px 24px;
  background: #123122;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(18, 49, 34, 0.15);
}

.v2-ticker-content {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 12px;
  color: #f3eee5;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ticker-dot {
  color: #c5a059;
  font-weight: 900;
}

/* RESPONSIVE DESIGN */
@media (max-width: 767.98px) {
  .luxury-brands-v2 {
    padding: 60px 0;
  }

  .v2-card-inner {
    height: 115px;
    padding: 16px 10px;
  }

  .v2-card-inner img {
    max-width: 100px;
    max-height: 38px;
  }

  .v2-ticker-content {
    justify-content: center;
    font-size: 0.75rem;
  }
}

/* =========================================================
   ANIMATED CAPSULE PHONE BUTTON UNDER TITLE
========================================================= */

.hero-phone-cta-wrapper {
  margin-top: 1rem;
  margin-bottom: 1.4rem;
  display: flex;
}

.animated-phone-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 8px 10px 8px 10px;

  /* Deep Dark Green Pill Surface */
  background: var(--color-green-dark, #0f2b1e);
  border-radius: 60px;
  text-decoration: none;

  /* Glass Shadow & Smooth Transition */
  box-shadow: 0 10px 25px rgba(15, 43, 30, 0.25);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  /* Infinite Pulse Animation */
  animation: phonePillPulse 2.8s ease-in-out infinite;
}

/* Left Cream Phone Circle */
.phone-icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-cream-light, #f3eee5);
  color: var(--color-green-dark, #0f2b1e);
  flex-shrink: 0;
  transition: transform 0.35s ease;
}

.phone-icon-circle svg {
  transform: rotate(0deg);
  transition: transform 0.35s ease;
}

/* Middle Text Stack */
.phone-text-stack {
  display: flex;
  flex-direction: column;
  padding-right: 4px;
}

.phone-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--color-cream, #e9e3d7);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
  line-height: 1.1;
}

.phone-number {
  font-family: 'Arial Black', Gadget, sans-serif;
  font-size: 1.55rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-top: 2px;
}

/* Right Translucent Arrow Circle */
.phone-arrow-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #ffffff;
  flex-shrink: 0;
  transition: all 0.35s ease;
}

/* Hover Interactivity */
.animated-phone-btn:hover {
  transform: translateY(-3px) scale(1.02);
  background: #153c2a;
  box-shadow: 0 14px 35px rgba(15, 43, 30, 0.38);
}

.animated-phone-btn:hover .phone-icon-circle {
  transform: scale(1.06);
}

.animated-phone-btn:hover .phone-icon-circle svg {
  transform: rotate(12deg);
}

.animated-phone-btn:hover .phone-arrow-circle {
  background: #c5a059;
  /* Switches to gold accent on hover */
  border-color: #c5a059;
  color: #123122;
  transform: translateX(3px) translateY(-3px);
}

/* Soft Glow Keyframe Animation */
@keyframes phonePillPulse {

  0%,
  100% {
    box-shadow: 0 10px 25px rgba(15, 43, 30, 0.25);
  }

  50% {
    box-shadow: 0 12px 32px rgba(15, 43, 30, 0.45), 0 0 0 10px rgba(18, 49, 34, 0.08);
  }
}

/* Mobile Adjustment */
@media (max-width: 575.98px) {
  .animated-phone-btn {
    gap: 10px;
    padding: 6px 8px;
  }

  .phone-icon-circle {
    width: 42px;
    height: 42px;
  }

  .phone-number {
    font-size: 1.25rem;
  }

  .phone-label {
    font-size: 0.6rem;
  }

  .phone-arrow-circle {
    width: 36px;
    height: 36px;
  }
}

/* 000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */

/* =========================================================
   PEARLAND GARAGE DOORS
   OBJECTIVES SECTION (MAGNIFIED TEXT & LARGER IMAGE)
========================================================= */
/* =========================================================
   OBJECTIVES SECTION
   BOOTSTRAP 5 RESPONSIVE VERSION
========================================================= */
.objectives-section {
  position: relative;
  width: 100%;
  padding: 80px 20px;
  overflow: hidden;
  background: var(--color-cream-light);
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

/* =========================================================
   CONTAINER
========================================================= */
.objectives-container {
  width: 100%;
  max-width: 1460px;
  margin: 0 auto;
  padding: 0;
}

/* =========================================================
   MAIN CARD (Luxury Backdrop & Depth)
========================================================= */
.objectives-card {
  position: relative;
  width: 100%;
  min-height: 920px;
  padding-bottom: 75px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, var(--color-cream-light) 100%);
  border: 1px solid rgba(174, 162, 140, 0.25);
  box-shadow: 0 30px 60px rgba(18, 49, 34, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  isolation: isolate;
}

/* =========================================================
   BACKGROUND GRID
========================================================= */
.objectives-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(18, 49, 34, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 49, 34, 0.025) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* =========================================================
   CONTINUOUS FRAME
========================================================= */
.objectives-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 7;
  pointer-events: none;
}

.objectives-frame path {
  fill: none;
  stroke: var(--color-green-dark);
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 4px rgba(18, 49, 34, 0.15));
}

/* =========================================================
   MAIN BOOTSTRAP ROW
========================================================= */
.objectives-row {
  position: relative;
  z-index: 5;
  width: 100%;
  min-height: 845px;
  margin: 0;
  align-items: stretch;
}

/* =========================================================
   BOTH BOOTSTRAP COLUMNS
========================================================= */
.objectives-left,
.objectives-right {
  position: relative;
  min-width: 0;
}

/* =========================================================
   LEFT COLUMN
========================================================= */
.objectives-left {
  display: flex;
  align-items: stretch;
  padding: 55px 20px 65px 80px;
}

/* =========================================================
   LEFT MEDIA
========================================================= */
.objectives-media {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

/* =========================================================
   LOCATION LABEL
========================================================= */
.objectives-image-label {
  width: fit-content;
  margin: 0 0 8px;
  color: var(--color-green-dark);
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* =========================================================
   DECORATIVE TRIANGLES
========================================================= */
.objectives-image-arrows {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 0 0 12px 4px;
}

.objectives-image-arrows span {
  display: block;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 16px solid var(--color-green-dark);
  animation: objectiveArrowMove 1.5s ease-in-out infinite;
  filter: drop-shadow(0 2px 3px rgba(18, 49, 34, 0.2));
}

.objectives-image-arrows span:nth-child(2) {
  border-top-color: var(--color-beige);
  animation-delay: 0.18s;
}

.objectives-image-arrows span:nth-child(3) {
  border-top-color: #557367;
  animation-delay: 0.36s;
}

@keyframes objectiveArrowMove {

  0%,
  100% {
    transform: translateY(0);
    opacity: 0.65;
  }

  50% {
    transform: translateY(7px);
    opacity: 1;
  }
}

/* =========================================================
   IMAGE CONTAINER
========================================================= */
.objectives-image {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 600px;
  overflow: hidden;
  background: var(--color-beige-light);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(18, 49, 34, 0.12), 0 0 0 1px rgba(174, 162, 140, 0.3);
  z-index: 5;
}

/* =========================================================
   IMAGE
========================================================= */
.objectives-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.objectives-image:hover img {
  transform: scale(1.035);
}

/* =========================================================
   RIGHT COLUMN
========================================================= */
.objectives-right {
  padding: 55px 65px 70px 35px;
  overflow: hidden;
}

/* =========================================================
   HEADING
========================================================= */
.objectives-heading-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin: 0 0 28px;
}

/* =========================================================
   MAIN TITLE (Luxury Editorial Serif Applied Here)
========================================================= */
.objectives-title {
  margin: 0;
  color: var(--color-green-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(38px, 3.4vw, 52px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(18, 49, 34, 0.05);
}

/* =========================================================
   TITLE SUBTEXT
========================================================= */
.objectives-subtitle {
  margin: 14px 0 0;
  color: var(--color-green-dark);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  opacity: 0.9;
}

.objectives-subtitle a,
.objective-content a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.objectives-subtitle a:hover,
.objective-content a:hover {
  opacity: 0.7;
}

/* =========================================================
   OBJECTIVE ITEM
========================================================= */
.objective-item {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 18px;
  width: 100%;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(174, 162, 140, 0.4);
}

.objective-item-last {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* =========================================================
   ITEM ARROW
========================================================= */
.objective-arrow {
  width: 0;
  height: 0;
  margin-top: 10px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid var(--color-green-dark);
  filter: drop-shadow(0 1px 2px rgba(18, 49, 34, 0.15));
}

/* =========================================================
   LABEL
========================================================= */
.objective-label {
  display: inline-block;
  width: fit-content;
  margin: 0 0 8px;
  padding: 5px 12px;
  background: rgba(85, 115, 103, 0.08);
  border: 1px solid rgba(85, 115, 103, 0.15);
  border-radius: 4px;
  color: #3b554b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* =========================================================
   ITEM HEADING (Luxury Editorial Serif Applied Here)
========================================================= */
.objective-content h3 {
  margin: 0 0 10px;
  color: var(--color-green-dark);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
}

/* =========================================================
   ITEM PARAGRAPH
========================================================= */
.objective-content p {
  width: 100%;
  max-width: 620px;
  margin: 0;
  color: var(--color-black);
  font-size: 17px;
  line-height: 1.75;
  opacity: 0.88;
}

/* =========================================================
   BOTTOM BAR
========================================================= */
.objectives-bottom-bar {
  position: absolute;
  left: 45%;
  right: 6%;
  bottom: 25px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--color-green-dark);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.objectives-bottom-line {
  flex: 1;
  min-width: 25px;
  height: 2px;
  background: var(--color-beige);
}

.objectives-bottom-bar a {
  color: var(--color-green-dark);
  text-decoration: none;
  white-space: nowrap;
}

/* =========================================================
   RESPONSIVE MEDIA QUERIES
========================================================= */
@media (min-width: 1400px) {
  .objectives-container {
    max-width: 1460px;
  }

  .objectives-card {
    min-height: 940px;
  }

  .objectives-row {
    min-height: 865px;
  }

  .objectives-left {
    padding: 55px 25px 65px 90px;
  }

  .objectives-right {
    padding: 55px 75px 70px 40px;
  }

  .objectives-title {
    font-size: 40px;
  }

  .objective-content h3 {
    font-size: 30px;
  }

  .objective-content p {
    font-size: 17.5px;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .objectives-card {
    min-height: 920px;
  }

  .objectives-left {
    padding: 50px 18px 65px 65px;
  }

  .objectives-right {
    padding: 50px 50px 70px 25px;
  }

  .objectives-image {
    min-height: 590px;
  }

  .objectives-title {
    font-size: clamp(36px, 3.2vw, 45px);
  }

  .objective-content h3 {
    font-size: 26px;
  }

  .objective-content p {
    font-size: 16.5px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .objectives-section {
    padding: 45px 15px;
  }

  .objectives-card {
    min-height: 930px;
    padding-bottom: 70px;
  }

  .objectives-row {
    min-height: 860px;
  }

  .objectives-left {
    padding: 50px 15px 65px 48px;
  }

  .objectives-right {
    padding: 50px 35px 70px 22px;
  }

  .objectives-image-label {
    font-size: 11px;
  }

  .objectives-image {
    min-height: 570px;
    border-radius: 18px;
  }

  .objectives-title {
    font-size: clamp(32px, 3.2vw, 38px);
    line-height: 1;
  }

  .objectives-subtitle {
    font-size: 15px;
  }

  .objective-item {
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 13px;
    padding-bottom: 17px;
    margin-bottom: 17px;
  }

  .objective-arrow {
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 11px;
  }

  .objective-label {
    font-size: 10px;
  }

  .objective-content h3 {
    font-size: 23px;
  }

  .objective-content p {
    font-size: 15px;
    line-height: 1.6;
  }

  .objectives-bottom-bar {
    font-size: 10px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .objectives-section {
    padding: 40px 15px;
  }

  .objectives-card {
    min-height: 0;
    padding-bottom: 0;
    overflow: visible;
  }

  .objectives-frame {
    display: none;
  }

  .objectives-row {
    min-height: 0;
    height: auto;
  }

  .objectives-left {
    display: block;
    padding: 45px 45px 25px;
  }

  .objectives-media {
    width: 100%;
  }

  .objectives-image {
    width: 100%;
    min-height: 0;
    aspect-ratio: 16 / 10;
    border-radius: 18px;
  }

  .objectives-right {
    padding: 35px 45px 50px;
    overflow: visible;
  }

  .objectives-title {
    font-size: clamp(36px, 6vw, 46px);
  }

  .objectives-subtitle {
    font-size: 16px;
  }

  .objective-item {
    padding-bottom: 26px;
    margin-bottom: 26px;
  }

  .objective-content h3 {
    font-size: 26px;
  }

  .objective-content p {
    max-width: 700px;
    font-size: 17px;
  }

  .objectives-bottom-bar {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 0 45px 35px;
    font-size: 11px;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .objectives-section {
    padding: 35px 12px;
  }

  .objectives-card {
    min-height: 0;
    padding-bottom: 0;
    overflow: visible;
  }

  .objectives-frame {
    display: none;
  }

  .objectives-row {
    min-height: 0;
  }

  .objectives-left {
    display: block;
    padding: 35px 30px 25px;
  }

  .objectives-image {
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }

  .objectives-right {
    padding: 30px 30px 45px;
    overflow: visible;
  }

  .objectives-title {
    font-size: clamp(32px, 7vw, 40px);
  }

  .objectives-subtitle {
    font-size: 15px;
  }

  .objective-item {
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 14px;
    padding-bottom: 24px;
    margin-bottom: 24px;
  }

  .objective-label {
    font-size: 10.5px;
  }

  .objective-content h3 {
    font-size: 23px;
  }

  .objective-content p {
    font-size: 16px;
    line-height: 1.65;
  }

  .objectives-bottom-bar {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 0 30px 30px;
    font-size: 10px;
  }
}

@media (max-width: 575.98px) {
  .objectives-section {
    padding: 25px 10px;
  }

  .objectives-card {
    min-height: 0;
    padding-bottom: 0;
    overflow: visible;
  }

  .objectives-frame {
    display: none;
  }

  .objectives-row {
    min-height: 0;
    height: auto;
  }

  .objectives-left {
    display: block;
    padding: 30px 20px 20px;
  }

  .objectives-media {
    width: 100%;
  }

  .objectives-image-label {
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  .objectives-image-arrows {
    gap: 7px;
    margin-bottom: 10px;
  }

  .objectives-image-arrows span {
    border-left-width: 7px;
    border-right-width: 7px;
    border-top-width: 11px;
  }

  .objectives-image {
    min-height: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
  }

  .objectives-right {
    padding: 28px 20px 38px;
    overflow: visible;
  }

  .objectives-heading-row {
    margin-bottom: 22px;
  }

  .objectives-title {
    font-size: clamp(27px, 8vw, 36px);
    line-height: 1;
  }

  .objectives-subtitle {
    margin-top: 10px;
    font-size: 14px;
  }

  .objective-item {
    grid-template-columns: 20px minmax(0, 1fr);
    column-gap: 11px;
    padding-bottom: 22px;
    margin-bottom: 22px;
  }

  .objective-arrow {
    margin-top: 8px;
    border-top-width: 6px;
    border-bottom-width: 6px;
    border-left-width: 9px;
  }

  .objective-label {
    padding: 4px 7px;
    font-size: 9.5px;
    letter-spacing: 0.06em;
  }

  .objective-content h3 {
    margin-bottom: 8px;
    font-size: 21px;
    line-height: 1.2;
  }

  .objective-content p {
    max-width: none;
    font-size: 15px;
    line-height: 1.65;
  }

  .objectives-bottom-bar {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    gap: 10px;
    padding: 0 20px 25px;
    flex-wrap: wrap;
    font-size: 9px;
    line-height: 1.4;
  }

  .objectives-bottom-line {
    min-width: 30px;
  }
}

@media (max-width: 390px) {
  .objectives-section {
    padding: 20px 8px;
  }

  .objectives-left {
    padding: 25px 15px 18px;
  }

  .objectives-right {
    padding: 25px 15px 35px;
  }

  .objectives-title {
    font-size: clamp(25px, 8.5vw, 32px);
  }

  .objectives-subtitle {
    font-size: 13px;
  }

  .objective-item {
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 9px;
  }

  .objective-content h3 {
    font-size: 19px;
  }

  .objective-content p {
    font-size: 14px;
  }

  .objective-label {
    font-size: 8.5px;
  }

  .objectives-bottom-bar {
    padding: 0 15px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .objectives-image-arrows span,
  .objectives-image img {
    animation: none;
    transition: none;
  }
}

@media (min-width: 992px) {
  .objectives-card {
    min-height: 940px;
    padding-bottom: 100px;
  }

  .objectives-row {
    min-height: 820px;
  }

  .objectives-left {
    padding-bottom: 95px;
  }

  .objectives-right {
    padding-bottom: 105px;
  }

  .objectives-bottom-bar {
    position: absolute;
    left: 48%;
    right: 7%;
    bottom: 48px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0;
    color: var(--color-green-dark);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .objectives-bottom-line {
    flex: 1;
    min-width: 50px;
    height: 1.5px;
    background: var(--color-beige);
  }

  .objectives-bottom-bar a {
    color: var(--color-green-dark);
    text-decoration: none;
    white-space: nowrap;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .objectives-bottom-bar {
    left: 49%;
    right: 6%;
    bottom: 45px;
    font-size: 10.5px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .objectives-card {
    min-height: 930px;
  }

  .objectives-bottom-bar {
    left: 50%;
    right: 5%;
    bottom: 42px;
    gap: 10px;
    font-size: 9px;
  }

  .objectives-bottom-line {
    min-width: 25px;
  }
}

@media (max-width: 991.98px) {
  .objectives-card {
    min-height: 0;
    padding-bottom: 0;
  }

  .objectives-bottom-bar {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    margin-top: 10px;
    padding: 0 35px 35px;
    display: flex;
    align-items: center;
    gap: 14px;
  }
}

@media (max-width: 575.98px) {
  .objectives-bottom-bar {
    padding: 0 20px 25px;
    gap: 9px;
    flex-wrap: wrap;
    font-size: 9px;
    line-height: 1.4;
  }

  .objectives-bottom-line {
    flex: 1;
    min-width: 30px;
  }
}

/* 000000000000000000000000000000000000000000000000000000000000 */

/* =========================================================
   PEARLAND GARAGE DOORS
   MODERN OUR SERVICES SECTION
========================================================= */

.toc-section {
  --toc-green: #0F2B1E;
  --toc-green-main: #123122;
  --toc-green-soft: #36473b;
  --toc-yellow: #F1CF6D;
  --toc-cream: #E9E3D7;
  --toc-cream-light: #F3EEE5;
  --toc-beige: #AEA28C;
  --toc-beige-light: #D4CCBE;
  --toc-black: #171717;

  position: relative;
  width: 100%;
  padding: 80px 22px;
  overflow: hidden;
  background: var(--toc-beige-light);
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
}


/* =========================================================
   CONTAINER
========================================================= */

.toc-container {
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding: 0;
}


/* =========================================================
   MAIN SECTION CARD
========================================================= */

.toc-card {
  position: relative;
  width: 100%;
  padding: 80px 70px 55px;
  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(243, 238, 229, 0.98),
      rgba(233, 227, 215, 0.98)
    );

  border: 1px solid rgba(15, 43, 30, 0.16);
  border-radius: 34px;

  box-shadow:
    0 35px 80px rgba(15, 43, 30, 0.12),
    inset 0 1px 0 rgba(255,255,255,.6);

  isolation: isolate;
}


/* =========================================================
   SUBTLE GRID
========================================================= */

.toc-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(15, 43, 30, 0.04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(15, 43, 30, 0.04) 1px,
      transparent 1px
    );

  background-size: 42px 42px;
}


/* =========================================================
   DECORATIVE GLOWS
========================================================= */

.toc-glow {
  position: absolute;
  z-index: -2;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(10px);
}


.toc-glow-one {
  top: -180px;
  right: -160px;
  width: 430px;
  height: 430px;
  background: rgba(241, 207, 109, 0.15);
}


.toc-glow-two {
  bottom: -220px;
  left: -170px;
  width: 460px;
  height: 460px;
  background: rgba(18, 49, 34, 0.08);
}


/* =========================================================
   HEADER
========================================================= */

.toc-header {
  position: relative;
  z-index: 3;
  margin-bottom: 52px;
}


/* =========================================================
   BRAND LINE
========================================================= */

.toc-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
}


.toc-brand-name {
  color: var(--toc-green);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}


.toc-brand-line {
  width: 54px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--toc-yellow);
}


/* =========================================================
   HEADING ROW
========================================================= */

.toc-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}


.toc-heading-copy {
  flex: 1 1 auto;
}


.toc-eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--toc-green-soft);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}


/* =========================================================
   TITLE
========================================================= */

.toc-title {
  margin: 0;
  color: var(--toc-green);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(52px, 6vw, 92px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}


/* =========================================================
   HEADER NUMBER
========================================================= */

.toc-heading-side {
  display: flex;
  align-items: center;
  gap: 15px;
  flex: 0 0 auto;
  padding-bottom: 4px;
}


.toc-heading-number {
  color: var(--toc-yellow);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 70px;
  font-weight: 900;
  line-height: .8;
  -webkit-text-stroke: 1px var(--toc-green);
  text-shadow: 2px 2px 0 var(--toc-green);
}


.toc-heading-caption {
  color: var(--toc-green);
  font-size: 11px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: .12em;
}


/* =========================================================
   SERVICES GRID
========================================================= */

.toc-items {
  position: relative;
  z-index: 3;
  width: 100%;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.toc-item {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 285px;
  height: 100%;
  padding: 25px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(243, 238, 229, 0.93),
      rgba(233, 227, 215, 0.78)
    );

  border: 1px solid rgba(15, 43, 30, 0.13);
  border-radius: 24px;

  box-shadow:
    0 12px 30px rgba(15, 43, 30, 0.07),
    inset 0 1px 0 rgba(255,255,255,.7);

  transition:
    transform 350ms cubic-bezier(.16,1,.3,1),
    border-color 350ms ease,
    box-shadow 350ms ease,
    background 350ms ease;
}


/* top accent */

.toc-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25px;
  right: 25px;
  height: 3px;

  background: linear-gradient(
    90deg,
    var(--toc-green),
    var(--toc-yellow)
  );

  transform: scaleX(.25);
  transform-origin: left;
  transition: transform 350ms ease;
}


/* subtle corner */

.toc-item::after {
  content: "";
  position: absolute;
  right: -35px;
  bottom: -35px;

  width: 100px;
  height: 100px;

  border-radius: 50%;

  background: rgba(18,49,34,.05);

  transition:
    transform 350ms ease,
    background 350ms ease;
}


/* =========================================================
   CARD HOVER
========================================================= */

.toc-item:hover {
  transform: translateY(-8px);

  border-color: rgba(15, 43, 30, 0.32);

  background:
    linear-gradient(
      145deg,
      rgba(243,238,229,1),
      rgba(233,227,215,.92)
    );

  box-shadow:
    0 22px 45px rgba(15,43,30,.14),
    inset 0 1px 0 rgba(255,255,255,.8);
}


.toc-item:hover::before {
  transform: scaleX(1);
}


.toc-item:hover::after {
  transform: scale(1.6);
  background: rgba(241,207,109,.11);
}


/* =========================================================
   CARD TOP
========================================================= */

.toc-item-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 26px;
}


/* =========================================================
   NUMBER
========================================================= */

.toc-item-number {
  color: rgba(15, 43, 30, .36);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}


/* =========================================================
   ICON
========================================================= */

.toc-icon-wrapper {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 72px;
  height: 72px;

  flex: 0 0 72px;

  border-radius: 20px;

  color: var(--toc-yellow);

  background: var(--toc-green);

  box-shadow:
    0 10px 22px rgba(15,43,30,.20);

  transform: rotate(0deg);

  transition:
    transform 350ms cubic-bezier(.16,1,.3,1),
    border-radius 350ms ease,
    box-shadow 350ms ease;
}


.toc-icon-wrapper::after {
  content: "";
  position: absolute;
  inset: 7px;

  border: 1px solid rgba(241,207,109,.35);
  border-radius: 14px;

  pointer-events: none;
}


.toc-service-icon {
  width: 31px;
  height: 31px;
  position: relative;
  z-index: 2;

  stroke: currentColor;

  transition: transform 350ms ease;
}


.toc-item:hover .toc-icon-wrapper {
  transform: rotate(-4deg) translateY(-3px);
  border-radius: 50%;
  box-shadow:
    0 14px 30px rgba(15,43,30,.28);
}


.toc-item:hover .toc-service-icon {
  transform: scale(1.1);
}


/* =========================================================
   CARD BODY
========================================================= */

.toc-item-body {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;

  display: flex;
  align-items: flex-end;
}


/* =========================================================
   LABEL
========================================================= */

.toc-label {
  display: block;
  max-width: 290px;

  color: var(--toc-green);

  font-size: 19px;
  font-weight: 900;
  line-height: 1.28;

  letter-spacing: .035em;
  text-transform: uppercase;
}


/* =========================================================
   FOOTER
========================================================= */

.toc-item-footer {
  position: relative;
  z-index: 2;
  margin-top: 25px;
  padding-top: 18px;

  border-top: 1px solid rgba(15,43,30,.12);
}


/* =========================================================
   BUTTON
========================================================= */

.toc-service-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;

  color: var(--toc-green);

  font-size: 12px;
  font-weight: 900;
  line-height: 1;

  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;

  transition:
    color 250ms ease;
}


.toc-btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  border-radius: 50%;

  color: var(--toc-yellow);
  background: var(--toc-green);

  font-size: 19px;
  line-height: 1;

  transition:
    color 300ms ease,
    background 300ms ease,
    transform 300ms ease;
}


.toc-service-btn:hover {
  color: var(--toc-green);
  text-decoration: none;
}


.toc-service-btn:hover .toc-btn-arrow {
  color: var(--toc-green);
  background: var(--toc-yellow);
  transform: rotate(45deg);
}


.toc-service-btn:focus-visible {
  outline: 3px solid rgba(241,207,109,.55);
  outline-offset: 6px;
  border-radius: 5px;
}


/* =========================================================
   BOTTOM DETAILS
========================================================= */

.toc-bottom-detail {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;

  margin-top: 48px;
  padding: 22px 26px;

  border-radius: 18px;

  color: var(--toc-cream-light);

  background: var(--toc-green);

  box-shadow:
    0 16px 35px rgba(15,43,30,.18);
}


.toc-location {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .14em;
}


.toc-location-dot {
  width: 9px;
  height: 9px;

  flex: 0 0 9px;

  border-radius: 50%;

  background: var(--toc-yellow);

  box-shadow:
    0 0 0 5px rgba(241,207,109,.12);
}


.toc-bottom-line {
  flex: 1 1 auto;
  height: 1px;

  margin: 0 24px;

  background: rgba(243,238,229,.22);
}


.toc-bottom-detail > a {
  display: flex;
  align-items: center;
  gap: 15px;

  color: var(--toc-cream-light);
  text-decoration: none;
}


.toc-phone-label {
  color: var(--toc-yellow);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}


.toc-bottom-detail strong {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .02em;
}


.toc-bottom-detail > a:hover strong {
  color: var(--toc-yellow);
}


/* =========================================================
   LARGE SCREEN
========================================================= */

@media (min-width: 1500px) {

  .toc-container {
    max-width: 1640px;
  }

  .toc-card {
    padding:
      90px
      85px
      60px;
  }

  .toc-item {
    min-height: 305px;
    padding: 29px;
  }

  .toc-label {
    font-size: 20px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .toc-section {
    padding: 50px 16px;
  }

  .toc-card {
    padding: 60px 40px 45px;
    border-radius: 28px;
  }

  .toc-header {
    margin-bottom: 38px;
  }

  .toc-heading-row {
    align-items: center;
  }

  .toc-heading-side {
    display: none;
  }

  .toc-title {
    font-size: clamp(48px, 8vw, 70px);
  }

  .toc-item {
    min-height: 255px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

  .toc-section {
    padding: 35px 12px;
  }

  .toc-card {
    padding: 48px 25px 35px;
    border-radius: 24px;
  }

  .toc-brand {
    gap: 10px;
    margin-bottom: 22px;
  }

  .toc-brand-line {
    width: 30px;
  }

  .toc-brand-name {
    font-size: 10px;
    letter-spacing: .15em;
  }

  .toc-eyebrow {
    font-size: 10px;
    letter-spacing: .12em;
  }

  .toc-title {
    font-size: clamp(42px, 13vw, 60px);
  }

  .toc-item {
    min-height: 245px;
  }

  .toc-bottom-detail {
    flex-direction: column;
    align-items: flex-start;
    gap: 17px;

    padding: 22px;
  }

  .toc-bottom-line {
    width: 100%;
    flex: 0 0 1px;
    margin: 0;
  }

  .toc-bottom-detail > a {
    width: 100%;
    justify-content: space-between;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

  .toc-card {
    padding: 42px 18px 28px;
  }

  .toc-brand {
    justify-content: center;
  }

  .toc-heading-copy {
    width: 100%;
    text-align: center;
  }

  .toc-title {
    font-size: clamp(38px, 13vw, 52px);
  }

  .toc-item {
    min-height: 230px;
    padding: 22px;
  }

  .toc-icon-wrapper {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }

  .toc-service-icon {
    width: 28px;
    height: 28px;
  }

  .toc-label {
    max-width: 100%;
    font-size: 17px;
  }

  .toc-phone-label {
    display: none;
  }

  .toc-bottom-detail strong {
    font-size: 17px;
  }

}


/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 390px) {

  .toc-card {
    padding:
      38px
      14px
      24px;
  }

  .toc-title {
    font-size: 38px;
  }

  .toc-item {
    min-height: 215px;
    padding: 18px;
  }

  .toc-label {
    font-size: 16px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .toc-item,
  .toc-item::before,
  .toc-item::after,
  .toc-icon-wrapper,
  .toc-service-icon,
  .toc-service-btn,
  .toc-btn-arrow {
    transition: none;
  }

}

/* 0000000000000000000000000000000000000000000000000000000000000000 */
/* =========================================================
   PEARLAND GARAGE DOORS - WHY CHOOSE US SECTION
========================================================= */
/* =========================================================
   PEARLAND GARAGE DOORS
   AUDIENCE SECTION (MAXIMIZED TEXT & IMAGE SIZE)
========================================================= */

.audience-section {
  position: relative;
  width: 100%;
  padding: 75px 20px;
  background: var(--color-cream-light, #f3eee5);
  overflow: hidden;
  font-family: "Montserrat", Arial, sans-serif;
}

.audience-container {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0;
}

.audience-card {
  position: relative;
  width: 100%;
  min-height: 840px;
  overflow: hidden;
  background: var(--color-cream-light, #f3eee5);
  isolation: isolate;
  border-radius: 24px;
}

/* Background Grid Overlay */
.audience-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(18, 49, 34, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 49, 34, 0.04) 1px, transparent 1px);
  background-size: 38px 38px;
}

/* TOP HERO ROW */
.audience-top-row {
  position: relative;
  z-index: 5;
  min-height: 520px;
  padding: 60px 60px 45px;
}

/* EXPANDED IMAGE COLUMN (7-COL for a larger image) */
.audience-image-column {
  position: relative;
  display: flex;
  align-items: center;
}

.audience-image-wrap {
  position: relative;
  width: 99%;
  margin: 0 auto;
}

.audience-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9.2;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 16px 36px rgba(18, 49, 34, 0.16);
  background: var(--color-beige-light, #e9e3d7);
}

.audience-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 600ms ease;
}

.audience-image:hover img {
  transform: scale(1.03);
}

.audience-image-caption {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  color: var(--color-green-dark, #123122);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.caption-line {
  display: block;
  width: 48px;
  height: 2px;
  background: var(--color-green-dark, #123122);
}

/* RIGHT HEADING COLUMN (5-COL) */
.audience-heading-column {
  position: relative;
  display: flex;
  align-items: center;
}

.audience-heading-content {
  position: relative;
  width: 100%;
  padding: 10px 10px 10px 50px;
}

.audience-top-arrows {
  position: absolute;
  top: -18px;
  right: 10px;
  display: flex;
  gap: 9px;
}

.audience-top-arrows span {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 16px solid var(--color-green-dark, #123122);
}

.audience-top-arrows span:nth-child(2) {
  border-top-color: #aea28c;
}

.audience-top-arrows span:nth-child(3) {
  border-top-color: #557367;
}

/* REFINED LUXURY TITLE - EVEN LARGER */
.audience-title {
  margin: 0 0 24px;
  color: var(--color-green-dark, #123122);
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.audience-title span {
  display: block;
}

.audience-title .title-accent {
  color: #8e6d2f;
}

.audience-intro {
  max-width: 660px;
  margin: 0;
  color: #202b23;
  font-size: 1.35rem;
  line-height: 1.75;
}

/* ANIMATED CALL BUTTON - EVEN BIGGER TEXT & PADDING */
.audience-call-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  padding: 12px 24px 12px 14px;
  overflow: hidden;
  color: var(--color-cream-light, #f3eee5);
  background: var(--color-green-dark, #123122);
  border: 2px solid var(--color-green-dark, #123122);
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(18, 49, 34, 0.18);
  transition: transform 300ms ease, box-shadow 300ms ease, color 300ms ease;
}

.audience-call-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #D4CCBE;
  transform: translateX(-102%);
  transition: transform 450ms cubic-bezier(0.65, 0, 0.35, 1);
}

.audience-call-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  color: var(--color-green-dark, #123122);
  background: #D4CCBE;
  border-radius: 50%;
  animation: audiencePhonePulse 1.8s ease-in-out infinite;
}

.audience-call-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.audience-call-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.audience-call-text small {
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0.85;
}

.audience-call-text strong {
  color: inherit;
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1;
}

.audience-call-arrow {
  display: inline-block;
  margin-left: 8px;
  font-size: 22px;
  animation: audienceCallArrow 1.3s ease-in-out infinite;
}

.audience-call-btn:hover {
  color: var(--color-green-dark, #123122);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(18, 49, 34, 0.25);
}

.audience-call-btn:hover::before {
  transform: translateX(0);
}

.audience-call-btn:hover .audience-call-icon {
  background: var(--color-green-dark, #123122);
  color: #D4CCBE;
}

.audience-call-btn:hover .audience-call-arrow {
  animation: none;
  transform: translateX(6px);
}

/* MAIN DIVIDER */
.audience-main-divider {
  position: relative;
  z-index: 5;
  width: calc(100% - 120px);
  height: 2px;
  margin: 0 auto;
  background: rgba(18, 49, 34, 0.2);
}

/* 3 CARDS ROW */
.audience-items-row {
  position: relative;
  z-index: 5;
  padding: 45px 60px 60px;
  align-items: stretch;
}

.audience-items-row>[class*="col-"] {
  display: flex;
}

.audience-item {
  width: 100%;
  min-height: 350px;
  height: 100%;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 18px;
  padding: 10px 35px 20px 0;
  margin-right: 35px;
  border-right: 1px solid rgba(174, 162, 140, 0.72);
}

.audience-items-row .col-md-4:last-child .audience-item {
  margin-right: 0;
  border-right: 0;
}

.audience-item-arrow {
  width: 0;
  height: 0;
  margin-top: 12px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid var(--color-green-dark, #123122);
}

.audience-item-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}

.audience-item-number {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 12px;
  color: #123122;
  background: rgba(85, 115, 103, 0.15);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
  border-radius: 6px;
}

.audience-item h3 {
  min-height: 70px;
  margin: 0 0 14px;
  color: var(--color-green-dark, #123122);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.18;
}

.audience-item p {
  max-width: 380px;
  margin: 0;
  color: #242424;
  font-size: 1.18rem;
  line-height: 1.75;
}

/* ANIMATED ICONS */
.audience-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  color: var(--color-green-dark, #123122);
  border: 2px solid var(--color-green-dark, #123122);
  border-radius: 50%;
}

.audience-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.audience-icon::before {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(18, 49, 34, 0.24);
  border-radius: 50%;
  animation: audienceIconPulse 2.2s ease-in-out infinite;
}

.audience-icon-1 {
  animation: audienceIconFloat 2.4s ease-in-out infinite;
}

.audience-icon-2 svg {
  animation: audienceIconRotate 3.2s ease-in-out infinite;
}

.audience-icon-3 {
  animation: audienceIconScale 2s ease-in-out infinite;
}

/* =========================================================
   DARK GREEN BOTTOM INFORMATION STRIP - EXTRA LARGE TEXT
========================================================= */

.audience-info-strip {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 20px 32px;
  padding: 32px 50px;
  background: var(--color-green-dark, #123122);
  border-top: 2px solid #c5a059;
}

.info-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #f3eee5;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.info-strip-item svg {
  width: 28px;
  height: 28px;
  color: #c5a059;
  flex-shrink: 0;
}

/* KEYFRAME ANIMATIONS */
@keyframes audiencePhonePulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

@keyframes audienceCallArrow {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(5px);
  }
}

@keyframes audienceIconFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes audienceIconRotate {

  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(8deg);
  }
}

@keyframes audienceIconScale {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

@keyframes audienceIconPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }

  50% {
    transform: scale(1.12);
    opacity: 0.75;
  }
}

/* RESPONSIVE DESIGN */
@media (max-width: 991.98px) {
  .audience-top-row {
    padding: 35px 25px 25px;
  }

  .audience-heading-content {
    padding: 20px 0 0 0;
  }

  .audience-items-row {
    padding: 30px 25px 35px;
  }

  .audience-item {
    min-height: 280px;
    margin-right: 15px;
    padding-right: 15px;
  }

  .audience-info-strip {
    justify-content: flex-start;
    padding: 24px 25px;
  }
}

@media (max-width: 767.98px) {
  .audience-items-row>[class*="col-"] {
    display: block;
  }

  .audience-item {
    height: auto;
    margin: 0;
    padding: 26px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(174, 162, 140, 0.72);
  }

  .audience-items-row .col-md-4:last-child .audience-item {
    border-bottom: 0;
  }

  .audience-item h3 {
    min-height: 0;
  }

  .audience-info-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* 0000000000000000000000000000000000000000000000000000000 */
/* =========================================================
   PEARLAND GARAGE DOORS - SMART SOLUTIONS SECTION
========================================================= */

/* =========================================================
   PEARLAND GARAGE DOORS
   SMART GARAGE SOLUTIONS SECTION

   COLORS
   Dark Green: #0F2B1E
   Gold:       #c5a059
   Cream:      #f3eee5
   Beige:      #D4CCBE
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.swot-section {
  position: relative;
  width: 100%;
  padding: 70px 20px;
  overflow: hidden;

  background: #f3eee5;

  font-family: "Montserrat", Arial, sans-serif;
}


/* =========================================================
   CONTAINER
========================================================= */

.swot-container {
  width: 100%;
  max-width: 1480px;

  margin: 0 auto;
  padding: 0;
}


/* =========================================================
   MAIN CARD
========================================================= */

.swot-card {
  position: relative;

  width: 100%;
  min-height: 1220px;

  overflow: hidden;

  background: #f3eee5;

  border-radius: 22px;

  isolation: isolate;
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.swot-grid {
  position: absolute;
  inset: 0;

  z-index: 0;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(15, 43, 30, 0.04) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(15, 43, 30, 0.04) 1px,
      transparent 1px);

  background-size: 38px 38px;
}


/* =========================================================
   ARCHITECTURAL OUTLINE FRAME
========================================================= */

.swot-frame {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 2;

  pointer-events: none;
}


.swot-frame path {
  fill: none;

  stroke: #0F2B1E;
  stroke-width: 2.2;

  vector-effect: non-scaling-stroke;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   MAIN CONTENT WRAPPER
========================================================= */

.swot-frame-content {
  position: absolute;

  top: 115px;
  right: 60px;
  bottom: 85px;
  left: 60px;

  z-index: 5;

  display: grid;

  grid-template-columns:
    minmax(0, 49%) minmax(0, 51%);

  column-gap: 0;

  width: auto;
  height: auto;
}


/* =========================================================
   LEFT COLUMN
========================================================= */

.swot-left {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;

  min-width: 0;

  padding-right: 36px;
  padding-bottom: 45px;
}


/* =========================================================
   RIGHT COLUMN
========================================================= */

.swot-right {
  position: relative;

  width: 100%;
  height: 100%;

  min-width: 0;

  /* Space from center outline */
  padding-left: 24px;

  /* Move image slightly down */
  padding-top: 24px;

  /* Matching bottom space */
  padding-bottom: 24px;
}


/* =========================================================
   MAIN TITLE
========================================================= */

.swot-title {
  width: 100%;
  max-width: 560px;

  margin: 0 0 16px;

  color: #0F2B1E;

  font-family:
    "Cinzel",
    Georgia,
    "Times New Roman",
    serif;

  /* Smaller title */
  font-size: clamp(30px, 2.2vw, 40px);

  font-weight: 900;

  line-height: 1.02;

  letter-spacing: 0.02em;

  text-align: left;

  text-transform: uppercase;

  flex-shrink: 0;
}


/* =========================================================
   CTA WRAPPER
========================================================= */

.swot-cta-wrap {
  margin: 0 0 18px;

  flex-shrink: 0;
}


/* =========================================================
   FREE ESTIMATE BUTTON
========================================================= */

.swot-estimate-btn {
  position: relative;

  z-index: 1;

  display: inline-flex;

  align-items: center;

  gap: 14px;

  padding: 8px 18px 8px 10px;

  overflow: hidden;

  background: #0F2B1E;

  border: 1.5px solid #0F2B1E;

  border-radius: 50px;

  text-decoration: none;

  box-shadow:
    0 8px 20px rgba(15, 43, 30, 0.16);

  animation:
    swotBtnGlow 2.8s ease-in-out infinite;

  transition:
    transform 350ms ease,
    box-shadow 350ms ease,
    color 350ms ease;
}


/* Sliding Fill */

.swot-estimate-btn::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  background: #D4CCBE;

  border-radius: inherit;

  transform: translateX(-102%);

  transition:
    transform 420ms cubic-bezier(0.65, 0, 0.35, 1);
}


/* =========================================================
   STAR ICON
========================================================= */

.estimate-icon-circle {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  flex-shrink: 0;

  border-radius: 50%;

  background: #c5a059;

  color: #0F2B1E;

  transition:
    transform 350ms ease;
}


.estimate-icon-circle svg {
  width: 20px;
  height: 20px;
}


/* =========================================================
   CTA TEXT
========================================================= */

.estimate-text-stack {
  display: flex;

  flex-direction: column;

  line-height: 1.15;
}


.estimate-text-stack small {
  color: #c5a059;

  font-size: 9.5px;
  font-weight: 800;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  transition:
    color 350ms ease;
}


.estimate-text-stack strong {
  color: #ffffff;

  font-size: 15px;
  font-weight: 900;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  transition:
    color 350ms ease;
}


/* =========================================================
   CTA ARROW
========================================================= */

.estimate-arrow-circle {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  flex-shrink: 0;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.12);

  color: #ffffff;

  transition:
    all 350ms ease;
}


.estimate-arrow-circle svg {
  width: 17px;
  height: 17px;
}


/* =========================================================
   CTA HOVER
========================================================= */

.swot-estimate-btn:hover {
  transform:
    translateY(-3px) scale(1.02);

  box-shadow:
    0 12px 28px rgba(15, 43, 30, 0.28);
}


.swot-estimate-btn:hover::before {
  transform: translateX(0);
}


.swot-estimate-btn:hover .estimate-text-stack strong {
  color: #0F2B1E;
}


.swot-estimate-btn:hover .estimate-text-stack small {
  color: #8e6d2f;
}


.swot-estimate-btn:hover .estimate-icon-circle {
  transform:
    scale(1.08) rotate(15deg);
}


.swot-estimate-btn:hover .estimate-arrow-circle {
  background: #0F2B1E;

  color: #c5a059;

  transform: translateX(4px);
}


/* =========================================================
   CTA GLOW
========================================================= */

@keyframes swotBtnGlow {

  0%,
  100% {
    box-shadow:
      0 8px 20px rgba(15, 43, 30, 0.16);
  }

  50% {
    box-shadow:
      0 10px 28px rgba(15, 43, 30, 0.35),
      0 0 0 6px rgba(15, 43, 30, 0.08);
  }

}


/* =========================================================
   ARTICLE ITEMS
   ALL TEXT ON LEFT SIDE
========================================================= */

.swot-item {
  position: relative;

  display: flex;

  align-items: flex-start;

  gap: 16px;

  width: 100%;

  margin: 0;

  padding: 16px 0 18px;

  border-bottom:
    1.5px solid rgba(174, 162, 140, 0.75);

  flex-shrink: 0;
}


/* First item closer to CTA */

.swot-strengths {
  padding-top: 10px;
}


/* Last item */

.swot-threats {
  padding-bottom: 35px;

  border-bottom: 0;
}


/* Remove old absolute separators */

.swot-strengths::after,
.swot-opportunities::after {
  display: none;

  content: none;
}


/* =========================================================
   ARTICLE CONTENT
========================================================= */

.swot-item-content {
  flex: 1;

  min-width: 0;
}


/* =========================================================
   ICON BADGES
========================================================= */

.swot-icon-wrapper {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 50px;
  height: 50px;

  flex: 0 0 50px;

  margin-top: 2px;

  border-radius: 50%;

  background:
    linear-gradient(135deg,
      rgba(15, 43, 30, 0.10),
      rgba(15, 43, 30, 0.03));

  border:
    1.5px solid #0F2B1E;

  box-shadow:
    0 4px 12px rgba(15, 43, 30, 0.08);

  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.4s ease;
}


.swot-icon-wrapper::after {
  content: "";

  position: absolute;

  inset: -3px;

  border-radius: 50%;

  border:
    1px dashed #c5a059;

  opacity: 0.5;

  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}


.swot-icon {
  width: 23px;
  height: 23px;

  color: #0F2B1E;

  transition:
    color 0.4s ease,
    transform 0.4s ease;
}


/* =========================================================
   ICON HOVER
========================================================= */

.swot-item:hover .swot-icon-wrapper {
  transform:
    translateY(-3px) scale(1.05);

  background: #0F2B1E;
}


.swot-item:hover .swot-icon-wrapper::after {
  opacity: 1;

  transform:
    rotate(45deg);
}


.swot-item:hover .swot-icon {
  color: #c5a059;

  transform:
    scale(1.1);
}


/* =========================================================
   LABEL
========================================================= */

.swot-label {
  display: inline-block;

  margin-bottom: 4px;

  padding: 4px 10px;

  background:
    rgba(85, 115, 103, 0.16);

  color: #0F2B1E;

  font-size: 11.5px;

  font-weight: 800;

  line-height: 1.2;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  border-radius: 4px;
}


/* =========================================================
   ARTICLE HEADINGS
========================================================= */

.swot-item h3 {
  margin: 0 0 5px;

  color: #0F2B1E;

  font-size: 1.35rem;

  font-weight: 900;

  line-height: 1.15;
}


/* =========================================================
   ARTICLE PARAGRAPHS
========================================================= */

.swot-item p {
  width: 100%;

  max-width: 100%;

  margin: 0;

  color: #243028;

  font-size: 1.02rem;

  /* Reduced vertical space */
  line-height: 1.42;
}


/* =========================================================
   RIGHT IMAGE BOX
========================================================= */

.swot-image-box {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 100%;

  margin: 0;

  z-index: 5;
}


/* =========================================================
   IMAGE CONTAINER
========================================================= */

.swot-image-inner {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 100%;

  overflow: hidden;

  border-radius: 20px;

  border:
    1.5px solid rgba(197, 160, 89, 0.5);

  background: #D4CCBE;

  box-shadow:
    0 16px 36px rgba(15, 43, 30, 0.18);

  isolation: isolate;
}


/* =========================================================
   FULL HEIGHT BACKGROUND IMAGE
   Fills empty top/bottom area
========================================================= */

.swot-image-inner::before {
  content: "";

  position: absolute;

  inset: -20px;

  z-index: 0;

  /*
     If your CSS file is inside /css/,
     ../img/ is correct.
  */
  background-image:
    url("../img/smart-commercial-garage-repair.webp");

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  filter: blur(16px);

  transform: scale(1.08);

  opacity: 0.40;

  pointer-events: none;
}


/* Soft Beige Layer */

.swot-image-inner::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  background:
    rgba(212, 204, 190, 0.12);

  pointer-events: none;
}


/* =========================================================
   MAIN IMAGE
   COMPLETE IMAGE - NO CROPPING
========================================================= */

.swot-image-inner img,
.swot-image-main {
  position: relative;

  z-index: 2;

  display: block;

  width: 100%;
  height: 100%;

  max-width: 100%;

  object-fit: contain;

  object-position: center;

  aspect-ratio: auto;

  transition:
    transform 500ms ease;
}


/* Image Hover */

.swot-image-inner:hover img,
.swot-image-inner:hover .swot-image-main {
  transform: scale(1.01);
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px) {

  .swot-card {
    min-height: 1220px;
  }


  .swot-frame-content {
    top: 115px;
    right: 60px;
    bottom: 85px;
    left: 60px;
  }


  .swot-left {
    padding-right: 36px;
    padding-bottom: 45px;
  }


  /*
     Image:
     space from center outline
     and moved slightly down
  */

  .swot-right {
    padding-left: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
  }


  .swot-image-box {
    width: 100%;
    height: 100%;

    min-height: 100%;

    margin: 0;
  }


  .swot-image-inner {
    width: 100%;
    height: 100%;

    min-height: 100%;
  }


  .swot-image-inner img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .swot-section {
    padding: 40px 15px;
  }


  .swot-card {
    min-height: auto;

    padding: 35px 20px;
  }


  /* Hide architectural outline */

  .swot-frame {
    display: none;
  }


  /* Return to normal document flow */

  .swot-frame-content {
    position: relative;

    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    display: block;

    width: 100%;
    height: auto;
  }


  .swot-left,
  .swot-right {
    position: relative;

    display: block;

    width: 100%;
    height: auto;

    padding: 0;
  }


  /* Title */

  .swot-title {
    width: 100%;
    max-width: 650px;

    margin-bottom: 18px;

    font-size:
      clamp(30px, 5.5vw, 42px);

    text-align: left;
  }


  /* Articles */

  .swot-item {
    position: relative;

    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    width: 100%;

    margin: 0;

    padding: 18px 0 20px;

    border-bottom:
      1.5px solid rgba(174, 162, 140, 0.75);
  }


  .swot-threats {
    border-bottom: 0;
  }


  /* Image */

  .swot-image-box {
    position: relative;

    width: 100%;
    height: auto;

    min-height: 0;

    margin-top: 24px;

    aspect-ratio: 1 / 1;
  }


  .swot-image-inner {
    width: 100%;
    height: 100%;

    min-height: 0;

    aspect-ratio: 1 / 1;
  }


  /* Square image fits normally */

  .swot-image-inner img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
  }


  /* No background blur needed */

  .swot-image-inner::before,
  .swot-image-inner::after {
    display: none;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

  .swot-section {
    padding: 25px 10px;
  }


  .swot-card {
    padding: 25px 15px;
  }


  /* Title */

  .swot-title {
    font-size:
      clamp(24px, 7.5vw, 34px);

    line-height: 1.05;
  }


  /* CTA */

  .swot-estimate-btn {
    gap: 9px;

    padding:
      6px 12px 6px 6px;
  }


  .estimate-icon-circle {
    width: 34px;
    height: 34px;
  }


  .estimate-icon-circle svg {
    width: 17px;
    height: 17px;
  }


  .estimate-text-stack small {
    font-size: 8px;
  }


  .estimate-text-stack strong {
    font-size: 12.5px;
  }


  .estimate-arrow-circle {
    width: 30px;
    height: 30px;
  }


  .estimate-arrow-circle svg {
    width: 15px;
    height: 15px;
  }


  /* Items */

  .swot-item {
    gap: 12px;

    padding:
      16px 0 18px;
  }


  /* Icons */

  .swot-icon-wrapper {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;
  }


  .swot-icon {
    width: 18px;
    height: 18px;
  }


  /* Labels */

  .swot-label {
    padding:
      3px 7px;

    font-size: 9.5px;
  }


  /* Headings */

  .swot-item h3 {
    font-size: 1.15rem;

    line-height: 1.2;
  }


  /* Paragraphs */

  .swot-item p {
    font-size: 0.95rem;

    line-height: 1.45;
  }


  /* Image */

  .swot-image-box,
  .swot-image-inner {
    border-radius: 16px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .swot-estimate-btn {
    gap: 7px;

    padding-right: 9px;
  }


  .estimate-text-stack strong {
    font-size: 11px;
  }


  .estimate-text-stack small {
    font-size: 7px;

    letter-spacing: 0.08em;
  }


  .swot-item {
    gap: 10px;
  }


  .swot-item h3 {
    font-size: 1.05rem;
  }


  .swot-item p {
    font-size: 0.9rem;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .swot-estimate-btn,
  .swot-icon-wrapper,
  .swot-icon-wrapper::after,
  .swot-icon,
  .swot-image-inner img {

    animation: none;

    transition: none;

    transform: none;
  }

}

/* =========================================================
   RIGHT COLUMN
========================================================= */

.swot-right {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;

  /* Space between image and center outline */
  padding-left: 24px;

  /* Move image down slightly */
  padding-top: 24px;

  /* Bottom spacing */
  padding-bottom: 24px;

  box-sizing: border-box;
}


/* =========================================================
   IMAGE BOX
========================================================= */

.swot-image-box {
  position: relative;

  width: 100%;
  height: 100%;

  margin: 0;

  overflow: hidden;

  z-index: 5;
}


/* =========================================================
   IMAGE CONTAINER
========================================================= */

.swot-image-inner {
  position: relative;

  width: 100%;
  height: 100%;

  overflow: hidden;

  border-radius: 20px;

  border: 1.5px solid rgba(197, 160, 89, 0.5);

  background: #D4CCBE;

  box-shadow:
    0 16px 36px rgba(15, 43, 30, 0.18);
}


/* REMOVE OLD BACKGROUND EFFECTS */

.swot-image-inner::before,
.swot-image-inner::after {
  display: none !important;
  content: none !important;
}


/* =========================================================
   MAIN IMAGE
   FILLS ENTIRE RIGHT SIDE
========================================================= */

.swot-image-inner img {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;

  /*
     Keep technician and garage mechanism visible.
     Adjust this percentage slightly if needed.
  */
  object-position: 58% center;

  opacity: 1;
  visibility: visible;

  z-index: 2;

  transform: none;
}


/* Hover */

.swot-image-inner:hover img {
  transform: scale(1.015);

  transition:
    transform 500ms ease;
}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px) {

  .swot-right {
    padding-left: 40px;
    /* more space from outline frame */
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .swot-image-box,
  .swot-image-inner {
    width: 100%;
    height: 100%;
  }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media (max-width: 991.98px) {

  .swot-right {
    width: 100%;
    height: auto;

    padding: 0;
  }

  .swot-image-box {
    width: 100%;
    height: auto;

    margin-top: 24px;

    aspect-ratio: 1 / 1;
  }

  .swot-image-inner {
    width: 100%;
    height: 100%;

    aspect-ratio: 1 / 1;
  }

  .swot-image-inner img {
    position: absolute;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
  }

}

/* =========================================================
   FORCE SPACE BETWEEN FRAME AND IMAGE
========================================================= */

@media (min-width: 992px) {

  .swot-right {
    padding-left: 0 !important;
  }

  .swot-image-box {
    margin-left: 35px !important;
    width: calc(100% - 35px) !important;
  }

}

/* 000000000000000000000000000000000000000000000000 */
/* =========================================================
   PEARLAND GARAGE DOORS
   CTA SECTION (LUXURY REFINEMENT)
========================================================= */

:root {
  --color-green: #123122;
  --color-green-dark: #0f2b1e;
  --color-green-soft: #36473b;

  --color-cream: #e9e3d7;
  --color-cream-light: #f3eee5;

  --color-beige: #aea28c;
  --color-beige-light: #d4ccbe;
  --color-taupe: #bdb5a7;

  --color-black: #171717;
  --color-text: #36473b;
  --color-gray: #62604f;
  --color-gray-dark: #878070;

  --border-green: rgba(18, 49, 34, 0.22);
  --border-light: rgba(18, 49, 34, 0.10);

  --bg-main: #aea28c;
  --bg-section: #e9e3d7;
  --bg-card: #f3eee5;
  --bg-accent: #123122;

  --green-soft: rgba(18, 49, 34, 0.10);
  --green-medium: rgba(18, 49, 34, 0.18);
  --beige-soft: rgba(174, 162, 140, 0.20);
}


/* =========================================================
   SECTION
========================================================= */

.pg-cta-section {
  position: relative;

  width: 100%;

  padding: 80px 25px;

  overflow: hidden;

  background: #D4CCBE;

  font-family:
    "Montserrat",
    Arial,
    Helvetica,
    sans-serif;
}


/* =========================================================
   CONTAINER
========================================================= */

.pg-cta-container {
  width: 100%;
  max-width: 1400px;

  margin: 0 auto;

  padding: 0;
}


/* =========================================================
   CARD
========================================================= */

.pg-cta-card {
  position: relative;

  width: 100%;

  min-height: 520px;

  padding: 80px;

  overflow: hidden;

  background: linear-gradient(135deg, #f7f4ee 0%, #efe9dc 100%);

  box-shadow: 0 20px 50px rgba(15, 43, 30, 0.08);

  isolation: isolate;
}


/* =========================================================
   NO GRID / NO SQUARE PATTERN
========================================================= */

.pg-cta-grid {
  display: none;
}


/* =========================================================
   ARCHITECTURAL FRAME
========================================================= */

.pg-cta-frame {
  position: absolute;

  top: 24px;
  right: 24px;
  bottom: 24px;
  left: 24px;

  z-index: 1;

  border:
    1.5px solid var(--color-green-dark);

  border-radius:
    0 40px 0 40px;

  pointer-events: none;
}


/* =========================================================
   ROW
========================================================= */

.pg-cta-row {
  position: relative;

  z-index: 5;

  min-height: 380px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.pg-cta-content {
  max-width: 740px;

  padding-right: 40px;
}


/* =========================================================
   PRETITLE
========================================================= */

.pg-cta-pretitle {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 22px;

  color: var(--color-green-dark);

  font-size: 10.5px;

  font-weight: 800;

  line-height: 1;

  letter-spacing: 0.22em;

  text-transform: uppercase;
}


.pg-cta-pretitle-line {
  display: block;

  width: 48px;
  height: 2px;

  background: var(--color-green-dark);
}


/* =========================================================
   TITLE
========================================================= */

.pg-cta-title {
  max-width: 710px;

  margin: 0 0 26px;

  color: var(--color-green-dark);

  font-size:
    clamp(40px, 4.4vw, 68px);

  font-weight: 900;

  line-height: 0.95;

  letter-spacing: -0.035em;

  text-transform: uppercase;
}


.pg-cta-title span {
  display: block;

  color: var(--color-green-soft);

  margin-top: 6px;

  font-size: 0.88em;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.pg-cta-text {
  max-width: 660px;

  margin: 0 0 36px;

  color: #333333;

  font-size: 15.5px;

  line-height: 1.8;

  font-weight: 400;
}


/* =========================================================
   ACTIONS
========================================================= */

.pg-cta-actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 16px;
}


/* =========================================================
   CALL BUTTON
========================================================= */

.pg-cta-call {
  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 14px;

  padding:
    8px 18px 8px 8px;

  color: var(--color-cream-light);

  background: var(--color-green-dark);

  border:
    2px solid var(--color-green-dark);

  border-radius: 60px;

  text-decoration: none;

  box-shadow: 0 8px 20px rgba(15, 43, 30, 0.12);

  transition:
    transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* Phone icon */

.pg-cta-call-icon {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 52px;
  height: 52px;

  flex: 0 0 52px;

  color: var(--color-green-dark);

  background: #D4CCBE;

  border-radius: 50%;

  animation:
    pgPhonePulse 2s ease-in-out infinite;
}


.pg-cta-call-icon svg {
  width: 22px;
  height: 22px;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;
}


/* Pulse ring */

.pg-cta-call-icon::after {
  content: "";

  position: absolute;

  inset: -5px;

  border:
    1px solid rgba(212, 204, 190, 0.5);

  border-radius: 50%;

  animation:
    pgPhoneRing 2s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}


/* Call content */

.pg-cta-call-content {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 3px;
}


.pg-cta-call-content small {
  color: rgba(243, 238, 229, 0.75);

  font-size: 8.5px;

  font-weight: 800;

  line-height: 1;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}


.pg-cta-call-content strong {
  color: var(--color-cream-light);

  font-size: 20px;

  font-weight: 900;

  line-height: 1;

  letter-spacing: -0.01em;
}


/* Call arrow */

.pg-cta-call-arrow {
  display: inline-block;

  margin-left: 6px;

  color: var(--color-cream-light);

  font-size: 18px;

  transition:
    transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}


.pg-cta-call:hover {
  color: var(--color-cream-light);

  transform:
    translateY(-3px);

  box-shadow:
    0 14px 28px rgba(15, 43, 30, 0.22);

  text-decoration: none;
}


.pg-cta-call:hover .pg-cta-call-arrow {
  transform:
    translateX(6px);
}


/* =========================================================
   FREE ESTIMATE BUTTON
========================================================= */

.pg-cta-estimate {
  position: relative;

  z-index: 1;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 14px;

  min-height: 68px;

  padding:
    15px 28px;

  overflow: hidden;

  color: var(--color-green-dark);

  background: transparent;

  border:
    2px solid var(--color-green-dark);

  border-radius: 60px;

  font-size: 11px;

  font-weight: 800;

  line-height: 1;

  letter-spacing: 0.1em;

  text-decoration: none;

  text-transform: uppercase;

  transition:
    color 350ms ease,
    transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 350ms ease;
}


/* Sliding dark background */

.pg-cta-estimate::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background: var(--color-green-dark);

  transform: translateX(-102%);

  transition:
    transform 450ms cubic-bezier(0.65, 0, 0.35, 1);
}


.pg-cta-estimate:hover {
  color: var(--color-cream-light);

  transform:
    translateY(-3px);

  box-shadow: 0 10px 24px rgba(15, 43, 30, 0.15);

  text-decoration: none;
}


.pg-cta-estimate:hover::before {
  transform:
    translateX(0);
}


.pg-cta-estimate-arrow {
  font-size: 16px;

  transition:
    transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}


.pg-cta-estimate:hover .pg-cta-estimate-arrow {
  transform:
    translate(4px, -4px);
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.pg-cta-side {
  position: relative;

  padding:
    20px 0 20px 60px;

  border-left:
    1px solid rgba(18, 49, 34, 0.15);
}


/* =========================================================
   DECORATIVE ARROWS
========================================================= */

.pg-cta-arrows {
  display: flex;

  gap: 9px;

  margin-bottom: 35px;
}


.pg-cta-arrows span {
  width: 0;
  height: 0;

  border-left:
    7px solid transparent;

  border-right:
    7px solid transparent;

  border-top:
    12px solid var(--color-green-dark);

  animation:
    pgCtaArrow 1.8s ease-in-out infinite;
}


.pg-cta-arrows span:nth-child(2) {
  border-top-color: var(--color-beige);

  animation-delay: 0.2s;
}


.pg-cta-arrows span:nth-child(3) {
  border-top-color: var(--color-green-soft);

  animation-delay: 0.4s;
}


/* =========================================================
   FEATURES
========================================================= */

.pg-cta-feature {
  display: grid;

  grid-template-columns:
    48px minmax(0, 1fr);

  align-items: center;

  gap: 18px;

  padding:
    22px 0;

  border-bottom:
    1px solid rgba(18, 49, 34, 0.1);
}


.pg-cta-feature-last {
  border-bottom: 0;
}


/* Number */

.pg-cta-feature-number {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 44px;
  height: 44px;

  color: var(--color-cream-light);

  background: var(--color-green-dark);

  font-size: 12px;

  font-weight: 900;

  border-radius: 50%;

  box-shadow: 0 4px 10px rgba(15, 43, 30, 0.1);
}


/* Feature heading */

.pg-cta-feature strong {
  display: block;

  margin-bottom: 5px;

  color: var(--color-green-dark);

  font-size: 17px;

  font-weight: 800;

  line-height: 1.2;

  letter-spacing: -0.01em;
}


/* Feature description */

.pg-cta-feature small {
  display: block;

  color: var(--color-gray);

  font-size: 12.5px;

  line-height: 1.5;

  font-weight: 500;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes pgPhonePulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }

}


@keyframes pgPhoneRing {

  0% {
    transform: scale(0.92);

    opacity: 0.6;
  }

  100% {
    transform: scale(1.4);

    opacity: 0;
  }

}


@keyframes pgCtaArrow {

  0%,
  100% {
    transform: translateY(0);

    opacity: 0.4;
  }

  50% {
    transform: translateY(5px);

    opacity: 1;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .pg-cta-section {
    padding:
      50px 20px;
  }


  .pg-cta-card {
    min-height: auto;

    padding:
      60px 40px;
  }


  .pg-cta-content {
    max-width: 100%;

    padding-right: 0;

    margin-bottom: 45px;
  }


  .pg-cta-title {
    font-size:
      clamp(36px, 7vw, 58px);
  }


  .pg-cta-side {
    padding:
      35px 0 0;

    border-left: 0;

    border-top:
      1px solid rgba(18, 49, 34, 0.18);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

  .pg-cta-section {
    padding:
      30px 15px;
  }


  .pg-cta-card {
    padding:
      50px 24px;
  }


  .pg-cta-frame {
    top: 15px;
    right: 15px;
    bottom: 15px;
    left: 15px;

    border-radius:
      0 24px 0 24px;
  }


  .pg-cta-title {
    font-size:
      clamp(32px, 10vw, 44px);
  }


  .pg-cta-text {
    font-size: 14px;

    line-height: 1.7;
  }


  .pg-cta-actions {
    align-items: stretch;

    flex-direction: column;
  }


  .pg-cta-call,
  .pg-cta-estimate {
    width: 100%;
  }


  .pg-cta-call {
    justify-content: flex-start;
  }


  .pg-cta-estimate {
    justify-content: center;
  }


  .pg-cta-call-content strong {
    font-size: 18px;
  }


  .pg-cta-feature strong {
    font-size: 16px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .pg-cta-call,
  .pg-cta-call-icon,
  .pg-cta-call-icon::after,
  .pg-cta-call-arrow,
  .pg-cta-estimate,
  .pg-cta-estimate::before,
  .pg-cta-estimate-arrow,
  .pg-cta-arrows span {
    animation: none;

    transition: none;
  }

}

/* 000000000000000000000000000000000000000000000000000000000000 */

/* =========================================================
   PEARLAND GARAGE DOORS
   TESTIMONIAL SECTION (LUXURY REFINEMENT)
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.testimonial-section {
  position: relative;

  width: 100%;

  padding:
    60px 20px;

  overflow: hidden;

  background:
    var(--color-cream-light);
}


/* =========================================================
   CONTAINER
========================================================= */

.testimonial-container {
  width: 100%;

  max-width: 1400px;

  margin: 0 auto;

  padding: 0;
}


/* =========================================================
   MAIN CARD
========================================================= */

.testimonial-card {
  position: relative;

  width: 100%;

  aspect-ratio:
    228 / 142;

  min-height: 680px;

  overflow: hidden;

  background:
    linear-gradient(135deg, #f7f4ee 0%, #efe9dc 100%);

  box-shadow: 0 20px 50px rgba(15, 43, 30, 0.06);

  isolation: isolate;
}


/* =========================================================
   GRID BACKGROUND
========================================================= */

.testimonial-grid {
  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background-image:

    linear-gradient(rgba(18, 49, 34, 0.035) 1px,
      transparent 1px),

    linear-gradient(90deg,
      rgba(18, 49, 34, 0.035) 1px,
      transparent 1px);

  background-size:
    34px 34px;
}


/* =========================================================
   CUSTOM FRAME
========================================================= */

.testimonial-frame {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 2;

  pointer-events: none;
}


.testimonial-frame path {
  fill: none;

  stroke:
    var(--color-green-dark);

  stroke-width:
    1.8;

  vector-effect:
    non-scaling-stroke;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/* =========================================================
   HEADING
========================================================= */

.testimonial-heading {
  position: absolute;

  top: 6.5%;
  left: 4%;

  z-index: 5;

  display: flex;

  align-items: center;

  gap: 20px;
}


.testimonial-title {
  margin: 0;

  color:
    var(--color-green-dark);

  font-family:
    "Arial Black",
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    clamp(60px,
      5.8vw,
      88px);

  font-weight:
    900;

  line-height:
    0.9;

  letter-spacing:
    -0.045em;

  text-transform:
    uppercase;
}


.testimonial-title-line {
  width: 60px;
  height: 2.5px;

  background:
    var(--color-green-dark);

  border-radius:
    10px;
}


/* =========================================================
   TESTIMONIAL CONTENT
========================================================= */

.testimonial-content {
  position: absolute;

  top: 26%;
  left: 6.5%;
  right: 6.5%;
  bottom: 14%;

  z-index: 5;
}


/* =========================================================
   TESTIMONIAL ITEM
========================================================= */

.testimonial-item {
  position: relative;

  min-height: 185px;

  display: grid;

  grid-template-columns:
    72px minmax(0, 1fr);

  column-gap:
    22px;

  padding:
    12px 42px 28px 0;

  margin:
    0 32px 24px 0;

  border-bottom:
    1.5px solid rgba(174, 162, 140, 0.4);
}


/* Remove divider from lower row */

.testimonial-content .col-md-6:nth-child(n + 3) .testimonial-item {
  border-bottom:
    0;
}


/* =========================================================
   AVATAR
========================================================= */

.testimonial-avatar {
  width: 66px;
  height: 66px;

  overflow: hidden;

  border-radius:
    50%;

  background:
    var(--color-beige-light);

  border:
    2px solid var(--color-green-dark);

  box-shadow: 0 6px 15px rgba(15, 43, 30, 0.1);
}


.testimonial-avatar img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  transition: transform 400ms ease;
}

.testimonial-item:hover .testimonial-avatar img {
  transform: scale(1.06);
}


/* =========================================================
   STARS
========================================================= */

.testimonial-stars {
  margin-bottom:
    8px;

  color:
    #274c37;

  font-size:
    18px;

  line-height:
    1;

  letter-spacing:
    0.1em;
}


/* =========================================================
   REVIEW TITLE
========================================================= */

.testimonial-body h3 {
  margin:
    0 0 8px;

  color:
    var(--color-green-dark);

  font-size:
    22px;

  font-weight:
    900;

  line-height:
    1.18;
}


/* =========================================================
   REVIEW COPY
========================================================= */

.testimonial-body p {
  max-width:
    450px;

  margin:
    0 0 10px;

  color:
    #333333;

  font-size:
    15px;

  line-height:
    1.7;
}


/* =========================================================
   CUSTOMER NAME
========================================================= */

.testimonial-name {
  display: inline-block;

  color:
    #36473b;

  font-size:
    11.5px;

  font-weight:
    900;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


/* =========================================================
   BOTTOM INFORMATION
========================================================= */

.testimonial-bottom {
  position: absolute;

  right: 6.5%;
  bottom: 5.5%;

  z-index: 5;

  display: flex;

  align-items: center;

  gap: 16px;

  color:
    var(--color-green-dark);

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.testimonial-bottom-line {
  width:
    80px;

  height:
    2px;

  background:
    var(--color-beige);
}


.testimonial-bottom a {
  color:
    var(--color-green-dark);

  text-decoration:
    none;

  transition: opacity 250ms ease;
}

.testimonial-bottom a:hover {
  opacity: 0.75;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

  .testimonial-title {
    font-size:
      88px;
  }


  .testimonial-avatar {
    width:
      72px;

    height:
      72px;
  }


  .testimonial-stars {
    font-size:
      19px;
  }


  .testimonial-body h3 {
    font-size:
      24px;
  }


  .testimonial-body p {
    font-size:
      16px;
  }


  .testimonial-name {
    font-size:
      12.5px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .testimonial-card {
    aspect-ratio:
      auto;

    min-height:
      auto;

    padding:
      60px 40px;
  }


  .testimonial-frame {
    display:
      none;
  }


  .testimonial-heading {
    position:
      relative;

    top:
      auto;

    left:
      auto;

    margin-bottom:
      45px;
  }


  .testimonial-title {
    font-size:
      clamp(50px,
        8.5vw,
        74px);
  }


  .testimonial-content {
    position:
      relative;

    top:
      auto;

    left:
      auto;

    right:
      auto;

    bottom:
      auto;
  }


  .testimonial-item {
    min-height:
      190px;
  }


  .testimonial-bottom {
    position:
      relative;

    right:
      auto;

    bottom:
      auto;

    justify-content:
      flex-end;

    margin-top:
      35px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

  .testimonial-section {
    padding:
      30px 12px;
  }


  .testimonial-card {
    padding:
      45px 24px;
  }


  .testimonial-title {
    font-size:
      clamp(40px,
        11vw,
        58px);
  }


  .testimonial-title-line {
    display:
      none;
  }


  .testimonial-item {
    min-height:
      auto;

    grid-template-columns:
      58px minmax(0, 1fr);

    column-gap:
      15px;

    margin:
      0 0 22px;

    padding:
      20px 0 24px;

    border-bottom:
      1.5px solid rgba(174, 162, 140, 0.4);
  }


  .testimonial-content .col-md-6:nth-child(3) .testimonial-item {
    border-bottom:
      1.5px solid rgba(174, 162, 140, 0.4);
  }


  .testimonial-avatar {
    width:
      54px;

    height:
      54px;
  }


  .testimonial-stars {
    font-size:
      16px;
  }


  .testimonial-body h3 {
    font-size:
      20px;
  }


  .testimonial-body p {
    font-size:
      14.5px;
  }


  .testimonial-bottom {
    align-items:
      flex-end;

    flex-direction:
      column;

    gap:
      8px;
  }


  .testimonial-bottom-line {
    display:
      none;
  }

}


/* =========================================================
   TESTIMONIALS — BIGGER TEXT REFINEMENT
========================================================= */

.testimonial-title {
  font-size: clamp(60px, 6vw, 88px);
}

.testimonial-stars {
  font-size: 19px;
  margin-bottom: 8px;
}

.testimonial-body h3 {
  font-size: 24px;
  line-height: 1.18;
  margin-bottom: 8px;
}

.testimonial-body p {
  max-width: 480px;
  font-size: 15.5px;
  line-height: 1.7;
  margin-bottom: 12px;
}

.testimonial-name {
  font-size: 12px;
  font-weight: 900;
}

.testimonial-bottom {
  font-size: 11px;
}

/* 0000000000000000000000000000000000000000000000000000000000000000000 */
/* =========================================================
   PEARLAND GARAGE DOORS
   COMMERCIAL GARAGE DOOR INSTALLATION SOLUTIONS (LARGER FONT)
========================================================= */

/* SECTION BASE */
.commercial-section {
  position: relative;
  width: 100%;
  padding: 75px 20px;
  overflow: hidden;
  background: #E5DFD3;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

/* CONTAINER */
.commercial-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
}

/* MAIN CARD */
.commercial-card {
  position: relative;
  width: 100%;
  padding: 75px;
  overflow: hidden;
  background: linear-gradient(135deg, #f7f4ee 0%, #efe9dc 100%);
  border: 1.5px solid rgba(15, 43, 30, 0.22);
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(15, 43, 30, 0.08);
  isolation: isolate;
}

/* BACKGROUND GRID */
.commercial-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 43, 30, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 43, 30, 0.04) 1px, transparent 1px);
  background-size: 38px 38px;
}

/* OUTER FRAME */
.commercial-frame {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 30px;
  z-index: 2;
  border: 1.5px solid rgba(15, 43, 30, 0.15);
  border-radius: 16px;
  pointer-events: none;
}

/* CONTENT GRID (TWO COLUMNS) */
.commercial-content-grid {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 55px;
}

/* LEFT TEXT COLUMN */
.commercial-text-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

/* TOP BRAND */
.commercial-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.commercial-brand-name {
  color: #0F2B1E;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.commercial-brand-line {
  display: block;
  width: 32px;
  height: 2px;
  background: #0F2B1E;
}

/* HEADING */
.commercial-heading-wrap {
  margin-bottom: 26px;
}

.commercial-title {
  color: #0F2B1E;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}

.commercial-title .title-accent {
  color: #8e6d2f;
  display: block;
}

/* BODY PARAGRAPHS - LARGER FONT */
.commercial-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 35px;
}

.commercial-body p {
  color: #243028;
  font-size: 1.15rem;
  line-height: 1.8;
  margin: 0;
}

.commercial-body strong {
  color: #0F2B1E;
  font-weight: 800;
}

/* CTA BUTTON */
.commercial-cta-wrap {
  margin-top: 5px;
}

.commercial-cta-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 36px;
  overflow: hidden;
  color: #F1CF6D;
  background: #0F2B1E;
  border: 1.5px solid #0F2B1E;
  border-radius: 50px;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(15, 43, 30, 0.22);
  transition: color 350ms ease, background 350ms ease, transform 350ms ease, box-shadow 350ms ease;
}

.commercial-cta-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 110%;
  height: 100%;
  z-index: -1;
  background: #F1CF6D;
  border-radius: inherit;
  transition: left 420ms cubic-bezier(0.65, 0, 0.35, 1);
}

.commercial-btn-arrow {
  position: relative;
  z-index: 2;
  display: inline-block;
  color: inherit;
  font-size: 20px;
  line-height: 0.8;
  animation: commercialArrowMove 1.3s ease-in-out infinite;
}

@keyframes commercialArrowMove {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(5px);
  }
}

.commercial-cta-btn:hover {
  color: #0F2B1E;
  background: #0F2B1E;
  border-color: #0F2B1E;
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(15, 43, 30, 0.28);
}

.commercial-cta-btn:hover::before {
  left: 0;
}

.commercial-cta-btn:hover .commercial-btn-arrow {
  animation: none;
  transform: translateX(7px);
}

/* RIGHT IMAGE COLUMN */
.commercial-image-column {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
}

.commercial-image-wrap {
  position: relative;
  width: 100%;
  min-height: 500px;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
  border: 1.5px solid rgba(197, 160, 89, 0.5);
  background: #D4CCBE;
  box-shadow: 0 16px 36px rgba(15, 43, 30, 0.18);
}

.commercial-image-bg {
  position: absolute;
  inset: -20px;
  z-index: 0;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  object-position: center;
  filter: blur(18px);
  transform: scale(1.06);
  opacity: 0.36;
  pointer-events: none;
}

.commercial-image-main {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.commercial-image-wrap:hover .commercial-image-main {
  transform: scale(1.015);
}

/* RESPONSIVE DESIGN */
@media (max-width: 991.98px) {
  .commercial-section {
    padding: 50px 15px;
  }

  .commercial-card {
    padding: 45px 30px;
  }

  .commercial-frame {
    top: 20px;
    right: 15px;
    bottom: 20px;
    left: 15px;
  }

  .commercial-content-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .commercial-body p {
    font-size: 1.05rem;
  }

  .commercial-image-wrap {
    min-height: 380px;
  }
}

@media (max-width: 575.98px) {
  .commercial-card {
    padding: 35px 18px;
  }

  .commercial-frame {
    top: 12px;
    right: 10px;
    bottom: 12px;
    left: 10px;
  }

  .commercial-brand-name {
    font-size: 10px;
  }

  .commercial-body p {
    font-size: 0.98rem;
  }

  .commercial-cta-btn {
    width: 100%;
    padding: 16px 24px;
    font-size: 12.5px;
  }

  .commercial-image-wrap {
    min-height: 280px;
  }
}

/* 00000000000000000000000000000000000000000000000000000000000000 */
/* =========================================================
   PEARLAND GARAGE DOORS - INVENTORY & WINTER DESIGN
   Palette:
   Dark Green: #0F2B1E
   Gold/Yellow: #F1CF6D
   Cream/Beige: #E5DFD3 / #f7f4ee
   Text Sizes: Large
========================================================= */

/* =========================================================
   SECTION BASE
========================================================= */
.inventory-section {
  position: relative;
  width: 100%;
  padding: 75px 20px;
  overflow: hidden;
  background: #E5DFD3;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
}

/* =========================================================
   CONTAINER
========================================================= */
.inventory-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
}

/* =========================================================
   MAIN CARD
========================================================= */
.inventory-card {
  position: relative;
  width: 100%;
  padding: 65px;
  overflow: hidden;
  background: linear-gradient(135deg, #f7f4ee 0%, #efe9dc 100%);
  border: 1.5px solid rgba(15, 43, 30, 0.22);
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(15, 43, 30, 0.08);
  isolation: isolate;
}

/* =========================================================
   BACKGROUND GRID PATTERN
========================================================= */
.inventory-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 43, 30, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 43, 30, 0.04) 1px, transparent 1px);
  background-size: 38px 38px;
}

/* =========================================================
   BOUNDING FRAME
========================================================= */
.inventory-frame {
  position: absolute;
  top: 28px;
  right: 28px;
  bottom: 28px;
  left: 28px;
  z-index: 2;
  border: 1.5px solid rgba(15, 43, 30, 0.15);
  border-radius: 16px;
  pointer-events: none;
}

/* =========================================================
   CONTENT WRAPPER
========================================================= */
.inventory-content-wrap {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* =========================================================
   TOP HEADER BLOCK
========================================================= */
.inventory-header-block {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.inventory-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}

.inventory-brand-name {
  color: #0F2B1E;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.inventory-brand-line {
  display: block;
  width: 32px;
  height: 2px;
  background: #0F2B1E;
}

.inventory-title {
  color: #0F2B1E;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}

.inventory-title .title-accent {
  color: #8e6d2f;
}

/* =========================================================
   SPLIT GRID (IMAGE LEFT / TEXT RIGHT)
========================================================= */
.inventory-split-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: stretch;
  gap: 55px;
}

/* =========================================================
   IMAGE BOX STYLING
========================================================= */
.inventory-image-box {
  position: relative;
  width: 100%;
  display: flex;
}

.inventory-image-inner {
  position: relative;
  width: 100%;
  min-height: 480px;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
  border: 1.5px solid rgba(197, 160, 89, 0.5);
  background: #D4CCBE;
  box-shadow: 0 16px 36px rgba(15, 43, 30, 0.18);
}

.inventory-image-bg {
  position: absolute;
  inset: -20px;
  z-index: 0;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  object-position: center;
  filter: blur(18px);
  transform: scale(1.06);
  opacity: 0.36;
  pointer-events: none;
}

.inventory-image-main {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.inventory-image-inner:hover .inventory-image-main {
  transform: scale(1.015);
}

/* =========================================================
   TEXT BOX STYLING
========================================================= */
.inventory-text-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 25px;
  text-align: left;
}

.inventory-info-block {
  padding: 24px 28px;
  background: rgba(15, 43, 30, 0.03);
  border: 1px solid rgba(15, 43, 30, 0.08);
  border-radius: 16px;
}

.info-block-tag {
  display: inline-block;
  color: #8e6d2f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.inventory-info-block p {
  color: #243028;
  font-size: 1.12rem;
  line-height: 1.8;
  margin: 0;
}

.inventory-info-block strong {
  color: #0F2B1E;
  font-weight: 800;
}

/* Highlighted Block */
.inventory-info-highlight {
  background: #0F2B1E;
  border-color: #0F2B1E;
}

.inventory-info-highlight p {
  color: #f7f4ee;
  font-weight: 700;
}

/* =========================================================
   BOTTOM FOOTER BLOCK
========================================================= */
.inventory-footer-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 25px;
  padding-top: 35px;
  border-top: 1.5px solid rgba(174, 162, 140, 0.5);
}

.inventory-footer-text {
  color: #243028;
  font-size: 1.15rem;
  text-align: left;
  max-width: 750px;
}

.inventory-footer-text strong {
  color: #0F2B1E;
  font-weight: 900;
}

/* =========================================================
   CTA BUTTON
========================================================= */
.inventory-cta-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 36px;
  overflow: hidden;
  color: #F1CF6D;
  background: #0F2B1E;
  border: 1.5px solid #0F2B1E;
  border-radius: 50px;
  font-family: "Montserrat", Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(15, 43, 30, 0.22);
  transition: color 350ms ease, background 350ms ease, transform 350ms ease, box-shadow 350ms ease;
  flex-shrink: 0;
}

.inventory-cta-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -110%;
  width: 110%;
  height: 100%;
  z-index: -1;
  background: #F1CF6D;
  border-radius: inherit;
  transition: left 420ms cubic-bezier(0.65, 0, 0.35, 1);
}

.inventory-btn-arrow {
  position: relative;
  z-index: 2;
  display: inline-block;
  color: inherit;
  font-size: 20px;
  line-height: 0.8;
  animation: inventoryArrowMove 1.3s ease-in-out infinite;
}

@keyframes inventoryArrowMove {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(5px);
  }
}

.inventory-cta-btn:hover {
  color: #0F2B1E;
  background: #0F2B1E;
  border-color: #0F2B1E;
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(15, 43, 30, 0.28);
}

.inventory-cta-btn:hover::before {
  left: 0;
}

.inventory-cta-btn:hover .inventory-btn-arrow {
  animation: none;
  transform: translateX(7px);
}

/* =========================================================
   RESPONSIVE DESIGN
========================================================= */

/* TABLET (Laptops/Large Tablets) */
@media (max-width: 991.98px) {
  .inventory-section {
    padding: 50px 15px;
  }

  .inventory-card {
    padding: 35px;
  }

  .inventory-frame {
    top: 18px;
    right: 18px;
    bottom: 18px;
    left: 18px;
  }

  .inventory-content-wrap {
    gap: 30px;
  }

  .inventory-brand-name {
    font-size: 11px;
    letter-spacing: 0.2em;
  }

  .inventory-title {
    font-size: clamp(28px, 5vw, 40px);
  }

  .inventory-split-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .inventory-image-inner {
    min-height: 360px;
  }

  .inventory-text-box {
    gap: 20px;
  }

  .inventory-info-block {
    padding: 20px 22px;
    border-radius: 14px;
  }

  .info-block-tag {
    font-size: 10px;
    margin-bottom: 8px;
  }

  .inventory-info-block p {
    font-size: 1.05rem;
    line-height: 1.7;
  }

  .inventory-footer-block {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding-top: 25px;
  }

  .inventory-footer-text {
    text-align: center;
    font-size: 1.05rem;
    max-width: 100%;
  }

  .inventory-cta-btn {
    width: 100%;
    padding: 16px 24px;
  }
}

/* MOBILE (Smartphones) */
@media (max-width: 575.98px) {
  .inventory-section {
    padding: 30px 10px;
  }

  .inventory-card {
    padding: 25px 18px;
    border-radius: 18px;
  }

  .inventory-frame {
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    border-radius: 12px;
  }

  .inventory-content-wrap {
    gap: 25px;
  }

  .inventory-brand {
    margin-bottom: 12px;
  }

  .inventory-brand-name {
    font-size: 10px;
    letter-spacing: 0.15em;
  }

  .inventory-title {
    font-size: clamp(24px, 7vw, 32px);
  }

  .inventory-image-inner {
    min-height: 260px;
    border-radius: 14px;
  }

  .inventory-info-block {
    padding: 18px 20px;
    border-radius: 12px;
    gap: 15px;
  }

  .info-block-tag {
    font-size: 10px;
  }

  .inventory-info-block p {
    font-size: 0.98rem;
    line-height: 1.6;
  }

  .inventory-footer-block {
    padding-top: 20px;
  }

  .inventory-footer-text {
    font-size: 0.98rem;
  }

  .inventory-cta-btn {
    padding: 14px 20px;
    font-size: 12.5px;
    gap: 10px;
  }

  .inventory-btn-arrow {
    font-size: 18px;
  }
}

/* ACCESSIBILITY - REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {

  .inventory-cta-btn,
  .inventory-image-main {
    animation: none;
    transition: none;
    transform: none;
  }
}


/* =========================================================
   INVENTORY SECTION IMAGE FIXES
========================================================= */

.inventory-image-box {
  position: relative;
  width: 100%;
  display: flex;
}

.inventory-image-inner {
  position: relative;
  width: 100%;
  min-height: 480px;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
  border: 1.5px solid rgba(197, 160, 89, 0.5);
  background: #D4CCBE;
  box-shadow: 0 16px 36px rgba(15, 43, 30, 0.18);
}

.inventory-image-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(12px);
  transform: scale(1.1);
  opacity: 0.4;
  pointer-events: none;
}

.inventory-image-main {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Prevents stretching and blurring */
  object-position: center;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.inventory-image-inner:hover .inventory-image-main {
  transform: scale(1.015);
}

/* =========================================================
   INVENTORY SECTION IMAGE FIXES
========================================================= */

.inventory-image-box {
  position: relative;
  width: 100%;
  display: flex;
}

.inventory-image-inner {
  position: relative;
  width: 100%;
  min-height: 480px;
  height: 100%;
  overflow: hidden;
  border-radius: 18px;
  border: 1.5px solid rgba(197, 160, 89, 0.5);
  background: #D4CCBE;
  box-shadow: 0 16px 36px rgba(15, 43, 30, 0.18);
}

.inventory-image-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(12px);
  transform: scale(1.1);
  opacity: 0.4;
  pointer-events: none;
}

.inventory-image-main {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Prevents stretching and blurring */
  object-position: center;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.inventory-image-inner:hover .inventory-image-main {
  transform: scale(1.015);
}

/* 000000000000000000000000000000000000000000000000000000000 */



/* =========================================================
   PEARLAND GARAGE DOORS
   SERVICE STATISTICS
   UNIQUE pg-metrics-* CLASS NAMES
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.pg-metrics-section {
  position: relative;

  width: 100%;

  padding: 45px 20px;

  overflow: hidden;

  background:
    var(--color-cream-light);

  font-family:
    "Montserrat",
    Arial,
    Helvetica,
    sans-serif;
}


/* =========================================================
   CONTAINER
========================================================= */

.pg-metrics-container {
  width: 100%;

  max-width: 1350px;

  margin: 0 auto;

  padding: 0;
}


/* =========================================================
   MAIN CARD
========================================================= */

.pg-metrics-card {
  position: relative;

  width: 100%;

  height: 840px;
  min-height: 840px;

  overflow: hidden;

  background:
    var(--color-cream-light);

  isolation: isolate;
}


/* =========================================================
   GRID BACKGROUND
========================================================= */

.pg-metrics-grid {
  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background-image:

    linear-gradient(rgba(18, 49, 34, 0.035) 1px,
      transparent 1px),

    linear-gradient(90deg,
      rgba(18, 49, 34, 0.035) 1px,
      transparent 1px);

  background-size:
    34px 34px;
}


/* =========================================================
   ARCHITECTURAL FRAME
========================================================= */

.pg-metrics-frame {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 2;

  pointer-events: none;
}


.pg-metrics-frame path {
  fill: none;

  stroke:
    var(--color-green-dark);

  stroke-width:
    2.2;

  vector-effect:
    non-scaling-stroke;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.pg-metrics-left {
  position: absolute;

  top: 4%;
  left: 4%;

  width: 43%;

  z-index: 5;
}


/* =========================================================
   TITLE
========================================================= */

.pg-metrics-title {
  margin:
    0 0 22px;

  color:
    var(--color-green-dark);

  font-family:
    "Montserrat",
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    clamp(62px, 6vw, 88px);

  font-weight:
    900;

  line-height:
    0.9;

  letter-spacing:
    -0.05em;

  text-transform:
    uppercase;
}


/* =========================================================
   LEFT INTRO TEXT
========================================================= */

.pg-metrics-intro {
  width: 92%;

  max-width: 530px;

  margin: 0;

  color:
    var(--color-black);

  font-size: 19px;

  line-height: 1.75;
}


.pg-metrics-intro strong {
  color:
    var(--color-green-dark);

  font-weight:
    800;
}


/* =========================================================
   ANIMATED ARROWS
========================================================= */

.pg-metrics-arrows {
  display: flex;

  align-items: center;

  gap: 8px;

  margin:
    24px 0 14px 8px;
}


.pg-metrics-arrows span {
  width: 0;
  height: 0;

  border-left:
    9px solid transparent;

  border-right:
    9px solid transparent;

  border-top:
    14px solid var(--color-green-dark);

  animation:
    pgMetricsArrowDown 1.5s ease-in-out infinite;
}


.pg-metrics-arrows span:nth-child(2) {
  border-top-color:
    var(--color-beige);

  animation-delay:
    0.18s;
}


.pg-metrics-arrows span:nth-child(3) {
  border-top-color:
    #557367;

  animation-delay:
    0.36s;
}


/* =========================================================
   CALL BUTTON
========================================================= */

.pg-metrics-call {
  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 14px;

  width: 100%;

  max-width: 440px;

  min-height: 70px;

  margin: 0;

  padding:
    9px 18px 9px 9px;

  color:
    var(--color-cream-light);

  background:
    var(--color-green-dark);

  border:
    2px solid var(--color-green-dark);

  border-radius:
    60px;

  text-decoration: none;

  transition:
    transform 300ms ease,
    box-shadow 300ms ease;
}


.pg-metrics-call:hover {
  color:
    var(--color-cream-light);

  text-decoration: none;

  transform:
    translateY(-3px);

  box-shadow:
    0 10px 25px rgba(15, 43, 30, 0.17);
}


/* =========================================================
   PHONE ICON
========================================================= */

.pg-metrics-call-icon {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 52px;
  height: 52px;

  flex:
    0 0 52px;

  color:
    var(--color-green-dark);

  background:
    var(--color-beige-light);

  border-radius:
    50%;

  animation:
    pgMetricsPhonePulse 1.8s ease-in-out infinite;
}


.pg-metrics-call-icon svg {
  width: 23px;
  height: 23px;

  fill: none;

  stroke:
    currentColor;

  stroke-width:
    1.8;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.pg-metrics-call-icon::after {
  content: "";

  position: absolute;

  inset: -4px;

  border:
    1px solid rgba(212, 204, 190, 0.65);

  border-radius:
    50%;

  animation:
    pgMetricsPhoneRing 1.8s ease-out infinite;
}


/* =========================================================
   CALL COPY
========================================================= */

.pg-metrics-call-copy {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 4px;

  min-width: 0;
}


.pg-metrics-call-copy small {
  color:
    rgba(243, 238, 229, 0.82);

  font-size: 10px;

  font-weight: 800;

  line-height: 1;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;
}


.pg-metrics-call-copy strong {
  color:
    var(--color-cream-light);

  font-size: 26px;

  font-weight: 900;

  line-height: 1;

  white-space: nowrap;
}


/* =========================================================
   BUTTON ARROW
========================================================= */

.pg-metrics-call-arrow {
  display: inline-block;

  margin-left: auto;

  padding-right: 4px;

  color:
    var(--color-cream-light);

  font-size: 22px;

  line-height: 1;

  animation:
    pgMetricsCallArrow 1.4s ease-in-out infinite;
}


.pg-metrics-call:hover .pg-metrics-call-arrow {
  animation: none;

  transform:
    translateX(7px);
}


/* =========================================================
   LOCATION
========================================================= */

.pg-metrics-location {
  display: flex;

  align-items: center;

  gap: 11px;

  margin-top: 25px;

  color:
    var(--color-green-dark);

  font-size: 10px;

  font-weight: 900;

  line-height: 1;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.pg-metrics-location-line {
  display: block;

  width: 36px;
  height: 2px;

  background:
    var(--color-green-dark);
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.pg-metrics-right {
  position: absolute;

  top: 12%;
  left: 51.5%;

  width: 44%;

  z-index: 5;
}


/* =========================================================
   METRICS GRID
========================================================= */

.pg-metrics-list {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  column-gap:
    24px;

  row-gap:
    28px;

  width: 100%;
}


/* =========================================================
   ITEM
========================================================= */

.pg-metrics-item {
  position: relative;

  min-width: 0;
}


.pg-metrics-item:nth-child(3),
.pg-metrics-item:nth-child(4) {
  padding-bottom: 25px;
}


/* =========================================================
   CIRCLE CHARTS
========================================================= */

.pg-metrics-chart {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 108px;
  height: 108px;

  margin-bottom: 16px;

  border-radius: 50%;
}


/* =========================================================
   HALF CIRCLE
========================================================= */

.pg-metrics-half-chart {
  background:
    conic-gradient(var(--color-green-dark) 0deg 180deg,
      rgba(18, 49, 34, 0.12) 180deg 360deg);
}


/* =========================================================
   FULL CIRCLE
========================================================= */

.pg-metrics-full-chart {
  background:
    conic-gradient(var(--color-green-dark) 0deg 350deg,
      rgba(18, 49, 34, 0.12) 350deg 360deg);
}


/* =========================================================
   INNER CIRCLE
========================================================= */

.pg-metrics-chart-inner {
  position: absolute;

  inset: 10px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background:
    var(--color-cream-light);

  border-radius: 50%;
}


.pg-metrics-chart-inner strong {
  color:
    var(--color-green-dark);

  font-size: 30px;

  font-weight: 900;

  line-height: 1;
}


.pg-metrics-chart-inner small {
  margin-top: 4px;

  color:
    var(--color-green-soft);

  font-size: 8px;

  font-weight: 900;

  line-height: 1;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;
}


/* =========================================================
   BRANDS GRAPH
========================================================= */

.pg-metrics-brands-chart {
  border:
    2px solid rgba(18, 49, 34, 0.18);
}


.pg-metrics-brand-dot {
  position: absolute;

  width: 12px;
  height: 12px;

  background:
    var(--color-green-dark);

  border:
    3px solid var(--color-cream-light);

  border-radius: 50%;

  animation:
    pgMetricsBrandPulse 2s ease-in-out infinite;
}


.pg-brand-dot-1 {
  top: -4px;
  left: 50%;

  transform:
    translateX(-50%);
}


.pg-brand-dot-2 {
  top: 50%;
  right: -4px;

  transform:
    translateY(-50%);

  animation-delay:
    0.2s;
}


.pg-brand-dot-3 {
  bottom: -4px;
  left: 50%;

  transform:
    translateX(-50%);

  animation-delay:
    0.4s;
}


.pg-brand-dot-4 {
  top: 50%;
  left: -4px;

  transform:
    translateY(-50%);

  animation-delay:
    0.6s;
}


/* =========================================================
   METRIC NUMBER
========================================================= */

.pg-metrics-number {
  display: inline-block;

  margin-bottom: 8px;

  padding:
    4px 7px;

  color:
    var(--color-green-soft);

  background:
    rgba(85, 115, 103, 0.13);

  font-size: 9px;

  font-weight: 900;

  line-height: 1;

  letter-spacing:
    0.08em;
}


/* =========================================================
   ITEM TITLE
========================================================= */

.pg-metrics-item h3 {
  max-width: 240px;

  margin:
    0 0 9px;

  color:
    var(--color-green-dark);

  font-size: 22px;

  font-weight: 900;

  line-height: 1.16;
}


/* =========================================================
   ITEM TEXT
========================================================= */

.pg-metrics-item p {
  max-width: 245px;

  margin: 0;

  color:
    var(--color-black);

  font-size: 14px;

  line-height: 1.6;
}


/* =========================================================
   FIRE-RATED RANGE
========================================================= */

.pg-metrics-range {
  width: 100%;

  max-width: 230px;

  margin:
    10px 0 20px;
}


.pg-metrics-range-values {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 10px;

  color:
    var(--color-green-dark);
}


.pg-metrics-range-values strong {
  font-size: 14px;

  font-weight: 900;

  line-height: 1;
}


.pg-metrics-range-values>span {
  flex: 1;

  height: 1px;

  margin:
    0 8px;

  background:
    var(--color-beige);
}


/* =========================================================
   RANGE TRACK
========================================================= */

.pg-metrics-range-track {
  position: relative;

  width: 100%;

  height: 8px;

  background:
    rgba(18, 49, 34, 0.11);

  border-radius: 20px;
}


.pg-metrics-range-progress {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background:
    linear-gradient(90deg,
      var(--color-green-soft),
      var(--color-green-dark));

  border-radius:
    inherit;

  transform-origin:
    left;

  animation:
    pgMetricsRangeGrow 2.2s ease-in-out infinite alternate;
}


/* =========================================================
   RANGE POINTS
========================================================= */

.pg-metrics-range-start,
.pg-metrics-range-end {
  position: absolute;

  top: 50%;

  width: 14px;
  height: 14px;

  z-index: 2;

  background:
    var(--color-green-dark);

  border:
    3px solid var(--color-cream-light);

  border-radius: 50%;

  transform:
    translateY(-50%);
}


.pg-metrics-range-start {
  left: -3px;
}


.pg-metrics-range-end {
  right: -3px;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes pgMetricsArrowDown {

  0%,
  100% {
    transform:
      translateY(0);

    opacity:
      0.45;
  }

  50% {
    transform:
      translateY(7px);

    opacity:
      1;
  }

}


@keyframes pgMetricsCallArrow {

  0%,
  100% {
    transform:
      translateX(0);
  }

  50% {
    transform:
      translateX(6px);
  }

}


@keyframes pgMetricsPhonePulse {

  0%,
  100% {
    transform:
      scale(1);
  }

  50% {
    transform:
      scale(1.07);
  }

}


@keyframes pgMetricsPhoneRing {

  0% {
    transform:
      scale(0.9);

    opacity:
      0.7;
  }

  100% {
    transform:
      scale(1.35);

    opacity:
      0;
  }

}


@keyframes pgMetricsBrandPulse {

  0%,
  100% {
    opacity:
      0.65;
  }

  50% {
    opacity:
      1;
  }

}


@keyframes pgMetricsRangeGrow {

  0% {
    transform:
      scaleX(0.72);
  }

  100% {
    transform:
      scaleX(1);
  }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

  .pg-metrics-title {
    font-size:
      88px;
  }


  .pg-metrics-intro {
    font-size:
      19px;
  }


  .pg-metrics-call-copy strong {
    font-size:
      26px;
  }


  .pg-metrics-item h3 {
    font-size:
      22px;
  }


  .pg-metrics-item p {
    font-size:
      14px;
  }

}


/* =========================================================
   EXTRA LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {

  .pg-metrics-container {
    max-width:
      1450px;
  }


  .pg-metrics-title {
    font-size:
      92px;
  }


  .pg-metrics-intro {
    font-size:
      20px;
  }


  .pg-metrics-call {
    max-width:
      470px;
  }


  .pg-metrics-call-copy strong {
    font-size:
      27px;
  }


  .pg-metrics-item h3 {
    font-size:
      23px;
  }

}


/* =========================================================
   TABLET
   < 992px
========================================================= */

@media (max-width: 991.98px) {

  .pg-metrics-section {
    padding:
      40px 15px;
  }


  .pg-metrics-card {
    height: auto;

    min-height: 0;

    padding:
      55px 35px;

    overflow: visible;
  }


  /* Frame hidden when stacked */
  .pg-metrics-frame {
    display:
      none;
  }


  .pg-metrics-left,
  .pg-metrics-right {
    position:
      relative;

    top:
      auto;

    left:
      auto;

    width:
      100%;
  }


  .pg-metrics-left {
    margin-bottom:
      60px;
  }


  .pg-metrics-title {
    font-size:
      clamp(54px, 10vw, 78px);
  }


  .pg-metrics-intro {
    width:
      100%;

    max-width:
      700px;

    font-size:
      17px;
  }


  .pg-metrics-call {
    max-width:
      440px;
  }


  .pg-metrics-right {
    max-width:
      760px;
  }


  .pg-metrics-list {
    column-gap:
      35px;

    row-gap:
      40px;
  }


  .pg-metrics-item p {
    max-width:
      300px;

    font-size:
      14px;
  }

}


/* =========================================================
   MOBILE
   < 576px
========================================================= */

@media (max-width: 575.98px) {

  .pg-metrics-section {
    padding:
      25px 10px;
  }


  .pg-metrics-card {
    padding:
      40px 22px;
  }


  .pg-metrics-title {
    font-size:
      clamp(44px, 14vw, 62px);
  }


  .pg-metrics-intro {
    font-size:
      15px;

    line-height:
      1.7;
  }


  .pg-metrics-arrows {
    margin-top:
      20px;
  }


  /* CALL BUTTON */
  .pg-metrics-call {
    width:
      100%;

    max-width:
      none;

    min-height:
      64px;

    gap:
      10px;

    padding:
      8px 14px 8px 8px;
  }


  .pg-metrics-call-icon {
    width:
      46px;

    height:
      46px;

    flex-basis:
      46px;
  }


  .pg-metrics-call-icon svg {
    width:
      20px;

    height:
      20px;
  }


  .pg-metrics-call-copy small {
    font-size:
      8px;
  }


  .pg-metrics-call-copy strong {
    font-size:
      19px;
  }


  .pg-metrics-call-arrow {
    font-size:
      18px;
  }


  .pg-metrics-location {
    font-size:
      9px;
  }


  /* ONE METRIC PER ROW */
  .pg-metrics-list {
    grid-template-columns:
      1fr;

    gap:
      38px;
  }


  .pg-metrics-item {
    display: grid;

    grid-template-columns:
      100px minmax(0, 1fr);

    column-gap:
      18px;

    align-items:
      center;

    padding-bottom:
      0 !important;
  }


  .pg-metrics-chart {
    width:
      96px;

    height:
      96px;

    margin:
      0;
  }


  .pg-metrics-chart-inner {
    inset:
      9px;
  }


  .pg-metrics-chart-inner strong {
    font-size:
      26px;
  }


  .pg-metrics-item h3 {
    max-width:
      none;

    font-size:
      20px;
  }


  .pg-metrics-item p {
    max-width:
      none;

    font-size:
      13px;
  }


  /* FIRE RANGE */
  .pg-metrics-range-item {
    display:
      block;
  }


  .pg-metrics-range {
    max-width:
      100%;

    margin:
      0 0 20px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .pg-metrics-arrows span,
  .pg-metrics-call,
  .pg-metrics-call-icon,
  .pg-metrics-call-icon::after,
  .pg-metrics-call-arrow,
  .pg-metrics-brand-dot,
  .pg-metrics-range-progress {
    animation:
      none;

    transition:
      none;
  }

}

/* =========================================================
   PG METRICS
   FINAL CONTENT POSITION FIX
   - LEFT CONTENT LOWER
   - RIGHT CONTENT RIGHT + LOWER
   - MORE SPACE FROM FRAME
========================================================= */

@media (min-width: 992px) {

  /* =======================================================
     LEFT CONTENT — MOVE DOWN
  ======================================================= */

  .pg-metrics-left {
    top: 9% !important;
    left: 4.5% !important;

    width: 40.5% !important;
  }


  .pg-metrics-title {
    margin-bottom: 24px !important;
  }


  .pg-metrics-intro {
    width: 92% !important;

    max-width: 510px !important;
  }


  /* Slightly more breathing room before arrows */
  .pg-metrics-arrows {
    margin:
      28px 0 16px 8px !important;
  }


  /* Location spacing */
  .pg-metrics-location {
    margin-top: 28px !important;
  }


  /* =======================================================
     RIGHT CONTENT
     MOVE RIGHT + DOWN
  ======================================================= */

  .pg-metrics-right {
    /*
      Previous:
      top: 12%;
      left: 51.5%;

      New position gives much more space
      from the vertical and top frame lines.
    */
    top: 18% !important;
    left: 54% !important;

    width: 40% !important;
  }


  /* =======================================================
     RIGHT GRID SPACING
  ======================================================= */

  .pg-metrics-list {
    column-gap: 40px !important;
    row-gap: 38px !important;
  }


  /* =======================================================
     GRAPHICS
     KEEP THEM BELOW TOP FRAME
  ======================================================= */

  .pg-metrics-chart {
    width: 106px !important;
    height: 106px !important;

    margin-bottom: 18px !important;
  }


  /* =======================================================
     RIGHT TEXT
     MORE CONTROLLED WIDTH
  ======================================================= */

  .pg-metrics-item h3 {
    max-width: 215px !important;

    margin-bottom: 10px !important;

    font-size: 21px !important;

    line-height: 1.17 !important;
  }


  .pg-metrics-item p {
    max-width: 220px !important;

    font-size: 13.5px !important;

    line-height: 1.62 !important;
  }


  /* =======================================================
     LOWER ROW
     EXTRA SPACE FROM MIDDLE / BOTTOM AREA
  ======================================================= */

  .pg-metrics-item:nth-child(3),
  .pg-metrics-item:nth-child(4) {
    margin-top: 4px !important;

    padding-bottom: 20px !important;
  }


  /* Fire-rating graph */
  .pg-metrics-range {
    max-width: 215px !important;

    margin:
      12px 0 22px !important;
  }

}

/* 0000000000000000000000000000000000000000000000000000000000000000000000000 */
/* =========================================================
   GARAGE DOOR SAFETY + WINTER PREP
========================================================= */

.winter-safety-section {
  position: relative;

  width: 100%;

  padding: 60px 20px;

  overflow: hidden;

  background: #D4CCBE;

  font-family:
    "Montserrat",
    Arial,
    Helvetica,
    sans-serif;
}


/* =========================================================
   CONTAINER
========================================================= */

.winter-safety-container {
  width: 100%;

  max-width: 1400px;

  margin: 0 auto;

  padding: 0;
}


/* =========================================================
   CARD
========================================================= */

.winter-safety-card {
  position: relative;

  width: 100%;

  overflow: hidden;

  background: #D4CCBE;

  border:
    2px solid var(--color-green-dark);

  border-radius:
    0 42px 0 42px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.winter-safety-content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

  padding:
    75px 65px;
}


/* =========================================================
   ANIMATED ARROWS
========================================================= */

.winter-safety-arrows {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 24px;
}


.winter-safety-arrows span {
  width: 0;
  height: 0;

  border-left:
    9px solid transparent;

  border-right:
    9px solid transparent;

  border-top:
    14px solid var(--color-green-dark);

  animation:
    winterSafetyArrow 1.5s ease-in-out infinite;
}


.winter-safety-arrows span:nth-child(2) {
  border-top-color:
    var(--color-beige);

  animation-delay:
    0.18s;
}


.winter-safety-arrows span:nth-child(3) {
  border-top-color:
    var(--color-green-soft);

  animation-delay:
    0.36s;
}


/* =========================================================
   TITLE
========================================================= */

.winter-safety-title {
  max-width: 650px;

  margin:
    0 0 30px;

  color:
    var(--color-green-dark);

  font-size: clamp(36px, 4vw, 56px);

  font-weight: 900;

  line-height: 0.94;

  letter-spacing:
    -0.05em;

  text-transform:
    uppercase;
}


.winter-safety-title span {
  display: block;

  color:
    var(--color-green-soft);
}


/* =========================================================
   TEXT
========================================================= */

.winter-safety-text {
  max-width: 650px;

  margin: 0;

  color:
    var(--color-black);

  font-size: 18px;

  line-height: 1.8;
}


.winter-safety-text strong {
  color:
    var(--color-green-dark);

  font-weight: 800;
}


/* =========================================================
   IMAGE
========================================================= */

.winter-safety-image {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 620px;

  overflow: hidden;

  background:
    var(--color-beige-light);
}


.winter-safety-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  transition:
    transform 650ms ease;
}


.winter-safety-image:hover img {
  transform:
    scale(1.035);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.winter-safety-image::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(to top,
      rgba(15, 43, 30, 0.50) 0%,
      rgba(15, 43, 30, 0.05) 45%,
      transparent 70%);
}


/* =========================================================
   IMAGE LABEL
========================================================= */

.winter-safety-image-label {
  position: absolute;

  left: 24px;
  bottom: 24px;

  z-index: 3;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding:
    11px 15px;

  color:
    var(--color-cream-light);

  background:
    var(--color-green-dark);

  font-size: 10px;

  font-weight: 900;

  line-height: 1;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;
}


.winter-safety-image-dot {
  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  background:
    var(--color-beige-light);

  border-radius: 50%;

  animation:
    winterSafetyDot 1.6s ease-in-out infinite;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes winterSafetyArrow {

  0%,
  100% {
    transform:
      translateY(0);

    opacity: 0.5;
  }

  50% {
    transform:
      translateY(7px);

    opacity: 1;
  }

}


@keyframes winterSafetyDot {

  0%,
  100% {
    transform:
      scale(1);

    opacity: 0.55;
  }

  50% {
    transform:
      scale(1.45);

    opacity: 1;
  }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1200px) {

  .winter-safety-title {
    font-size: clamp(36px, 4vw, 56px);
  }


  .winter-safety-text {
    font-size: 19px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .winter-safety-section {
    padding:
      40px 15px;
  }


  .winter-safety-content {
    padding:
      65px 45px;
  }


  .winter-safety-title {
    font-size:
      clamp(45px, 8vw, 64px);
  }


  .winter-safety-image {
    min-height: 500px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

  .winter-safety-section {
    padding:
      25px 10px;
  }


  .winter-safety-card {
    border-radius:
      0 26px 0 26px;
  }


  .winter-safety-content {
    padding:
      50px 25px;
  }


  .winter-safety-title {
    font-size:
      clamp(37px, 11vw, 49px);
  }


  .winter-safety-text {
    font-size: 16px;

    line-height: 1.72;
  }


  .winter-safety-image {
    min-height: 340px;
  }


  .winter-safety-image-label {
    left: 14px;
    bottom: 14px;

    padding:
      9px 11px;

    font-size: 8px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .winter-safety-arrows span,
  .winter-safety-image-dot,
  .winter-safety-image img {
    animation: none;

    transition: none;
  }

}


/* 00000000000000000000000000000000000000000000000000000000000000000000000 */
/* =========================================================
   EXPERT SUPPORT STATISTICS SECTION
========================================================= */

/* =========================================================
   EXPERT GARAGE DOOR SUPPORT
========================================================= */

:root {
  --color-green: #123122;
  --color-green-dark: #0f2b1e;
  --color-green-soft: #36473b;

  --color-cream: #e9e3d7;
  --color-cream-light: #f3eee5;

  --color-beige: #aea28c;
  --color-beige-light: #d4ccbe;
  --color-taupe: #bdb5a7;

  --color-black: #171717;
  --color-text: #36473b;

  --border-green: rgba(18, 49, 34, 0.22);
}


/* =========================================================
   SECTION
========================================================= */

.expert-support-section {
  position: relative;

  width: 100%;

  padding: 50px 20px;

  overflow: hidden;

  background: var(--color-cream-light);

  font-family:
    "Montserrat",
    Arial,
    Helvetica,
    sans-serif;
}


/* =========================================================
   CONTAINER
========================================================= */

.expert-support-section .statistics-container {
  width: 100%;
  max-width: 1300px;

  margin: 0 auto;
  padding: 0;
}


/* =========================================================
   MAIN CARD
========================================================= */

.expert-support-section .statistics-card {
  position: relative;

  width: 100%;
  height: 1000px;
  min-height: 820px;

  overflow: hidden;

  background: var(--color-cream-light);

  isolation: isolate;
}


/* =========================================================
   GRID BACKGROUND
========================================================= */

.expert-support-section .statistics-grid {
  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(18, 49, 34, 0.035) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(18, 49, 34, 0.035) 1px,
      transparent 1px);

  background-size: 34px 34px;
}


/* =========================================================
   ARCHITECTURAL FRAME
========================================================= */

.expert-support-section .statistics-frame {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  z-index: 2;

  pointer-events: none;
}


.expert-support-section .statistics-frame path {
  fill: none;

  stroke: var(--color-green-dark);

  stroke-width: 2.2;

  vector-effect: non-scaling-stroke;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   INNER LAYOUT

   50 / 50 is intentional:
   SVG center frame is x = 114 of 228 = exactly 50%.
========================================================= */

.expert-support-section .statistics-inner {
  position: absolute;

  inset: 0;

  z-index: 5;

  display: grid !important;

  grid-template-columns:
    50% 50%;

  width: 100%;
  height: 100%;

  margin: 0 !important;
}


/* Override Bootstrap column widths */

.expert-support-section .statistics-inner>[class*="col-"] {
  position: relative;

  width: 100% !important;
  max-width: none !important;

  padding: 0;

  flex: none;
}


/* =========================================================
   LEFT COLUMN
========================================================= */

.expert-support-left-column {
  position: relative;

  width: 100%;
  height: 100%;
}


/* =========================================================
   LEFT IMAGE

   Positioned completely inside the left architectural frame
========================================================= */

.expert-support-image {
  position: absolute;

  /*
     Frame begins near 3.5%.
     This gives additional breathing room.
  */
  top: 9%;
  right: 4%;
  bottom: 10%;
  left: 13%;

  width: auto;
  height: auto;

  margin: 0;

  overflow: hidden;

  background: var(--color-beige-light);

  box-shadow:
    0 14px 30px rgba(15, 43, 30, 0.10);
}


/* Image */

.expert-support-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transition:
    transform 650ms ease;
}


.expert-support-image:hover img {
  transform: scale(1.035);
}


/* Image Overlay */

.expert-support-image::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(to top,
      rgba(15, 43, 30, 0.48) 0%,
      rgba(15, 43, 30, 0.05) 48%,
      transparent 72%);
}


/* =========================================================
   IMAGE LABEL
========================================================= */

.expert-support-image-label {
  position: absolute;

  left: 22px;
  bottom: 22px;

  z-index: 3;

  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding:
    10px 13px;

  color: var(--color-cream-light);

  background: var(--color-green-dark);

  font-size: 10px;

  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


/* Label Dot */

.expert-support-image-dot {
  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  background: var(--color-beige-light);

  border-radius: 50%;

  animation:
    expertSupportDot 1.6s ease-in-out infinite;
}


/* =========================================================
   RIGHT COLUMN
========================================================= */

.expert-support-right-column {
  position: relative;

  width: 100%;
  height: 100%;
}


/* =========================================================
   RIGHT CONTENT

   Everything remains safely:
   - right of middle frame
   - below upper frame
   - above bottom frame
========================================================= */

.expert-support-section .statistics-right,
.expert-support-content {
  position: relative !important;

  top: auto !important;
  left: auto !important;

  display: flex;

  flex-direction: column;

  align-items: flex-start;
  justify-content: flex-start;

  width: 100% !important;
  height: 100%;

  /*
     Safe inner spacing:
     top | right | bottom | left
  */
  padding:
    75px 60px 90px 72px;

  box-sizing: border-box;

  overflow: hidden;

  transform: none !important;
}


/* =========================================================
   ANIMATED TRIANGLES
========================================================= */

.expert-support-section .statistics-triangles {
  display: flex;

  align-items: center;

  gap: 8px;

  margin:
    0 0 16px;

  flex-shrink: 0;
}


.expert-support-section .statistics-triangles span {
  width: 0;
  height: 0;

  border-left:
    7px solid transparent;

  border-right:
    7px solid transparent;

  border-top:
    11px solid var(--color-green-dark);

  animation:
    expertSupportArrow 1.5s ease-in-out infinite;
}


.expert-support-section .statistics-triangles span:nth-child(2) {
  border-top-color:
    var(--color-beige);

  animation-delay:
    0.18s;
}


.expert-support-section .statistics-triangles span:nth-child(3) {
  border-top-color:
    var(--color-green-soft);

  animation-delay:
    0.36s;
}


/* =========================================================
   TITLE
   SMALLER THAN CURRENT VERSION
========================================================= */

.expert-support-section .statistics-title,
.expert-support-title {
  width: 100%;
  max-width: 500px;

  margin:
    0 0 24px;

  color:
    var(--color-green-dark);

  font-family:
    "Montserrat",
    "Arial Black",
    Arial,
    sans-serif;

  /*
     Smaller desktop title
  */
  font-size:
    clamp(38px, 3.3vw, 52px);

  font-weight: 900;

  line-height: 0.94;

  letter-spacing:
    -0.04em;

  text-transform: uppercase;

  flex-shrink: 0;
}


/* =========================================================
   BODY COPY
========================================================= */

.expert-support-copy {
  width: 100%;
  max-width: 520px;

  flex-shrink: 0;
}


.expert-support-copy p {
  margin:
    0 0 17px;

  color:
    var(--color-black);

  font-size: 16.5px;

  line-height: 1.62;
}


.expert-support-copy p:last-child {
  margin-bottom: 0;
}


.expert-support-copy strong {
  color:
    var(--color-green-dark);

  font-weight: 800;
}


/* =========================================================
   CALL BUTTON
========================================================= */

.expert-support-call {
  position: relative;

  z-index: 6;

  display: inline-flex;

  align-items: center;

  gap: 13px;

  width: 100%;
  max-width: 400px;

  min-height: 64px;

  margin-top: 25px;

  padding:
    7px 17px 7px 7px;

  flex-shrink: 0;

  color:
    var(--color-cream-light);

  background:
    var(--color-green-dark);

  border:
    2px solid var(--color-green-dark);

  border-radius: 60px;

  text-decoration: none;

  transition:
    transform 300ms ease,
    box-shadow 300ms ease;
}


.expert-support-call:hover {
  color:
    var(--color-cream-light);

  text-decoration: none;

  transform:
    translateY(-3px);

  box-shadow:
    0 10px 25px rgba(15, 43, 30, 0.18);
}


/* =========================================================
   CALL PHONE ICON
========================================================= */

.expert-support-call-icon {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  flex:
    0 0 48px;

  color:
    var(--color-green-dark);

  background:
    var(--color-beige-light);

  border-radius: 50%;

  animation:
    expertSupportPhone 1.8s ease-in-out infinite;
}


.expert-support-call-icon::after {
  content: "";

  position: absolute;

  inset: -4px;

  border:
    1px solid rgba(212, 204, 190, 0.62);

  border-radius: 50%;

  animation:
    expertSupportPhoneRing 1.8s ease-out infinite;
}


.expert-support-call-icon svg {
  width: 21px;
  height: 21px;

  fill: none;

  stroke:
    currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   CALL TEXT
========================================================= */

.expert-support-call-text {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 4px;
}


.expert-support-call-text small {
  color:
    rgba(243, 238, 229, 0.80);

  font-size: 9px;

  font-weight: 800;

  line-height: 1;

  letter-spacing:
    0.10em;

  text-transform: uppercase;
}


.expert-support-call-text strong {
  color:
    var(--color-cream-light);

  font-size: 22px;

  font-weight: 900;

  line-height: 1;

  white-space: nowrap;
}


/* =========================================================
   CALL ARROW
========================================================= */

.expert-support-call-arrow {
  display: inline-block;

  margin-left: auto;

  color:
    var(--color-cream-light);

  font-size: 20px;

  line-height: 1;

  animation:
    expertSupportCallArrow 1.4s ease-in-out infinite;
}


.expert-support-call:hover .expert-support-call-arrow {
  animation: none;

  transform:
    translateX(7px);
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes expertSupportArrow {

  0%,
  100% {
    transform:
      translateY(0);

    opacity: 0.45;
  }

  50% {
    transform:
      translateY(6px);

    opacity: 1;
  }

}


@keyframes expertSupportDot {

  0%,
  100% {
    transform:
      scale(1);

    opacity: 0.55;
  }

  50% {
    transform:
      scale(1.45);

    opacity: 1;
  }

}


@keyframes expertSupportPhone {

  0%,
  100% {
    transform:
      scale(1);
  }

  50% {
    transform:
      scale(1.07);
  }

}


@keyframes expertSupportPhoneRing {

  0% {
    transform:
      scale(0.9);

    opacity: 0.7;
  }

  100% {
    transform:
      scale(1.35);

    opacity: 0;
  }

}


@keyframes expertSupportCallArrow {

  0%,
  100% {
    transform:
      translateX(0);
  }

  50% {
    transform:
      translateX(6px);
  }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

  .expert-support-section .statistics-card {
    height: 840px;
    min-height: 840px;
  }


  .expert-support-section .statistics-title,
  .expert-support-title {
    font-size:
      52px;
  }


  .expert-support-copy p {
    font-size: 17px;
  }


  .expert-support-call-text strong {
    font-size: 23px;
  }

}

/* =========================================================
   EXPERT SUPPORT SECTION
   RESPONSIVE FIX: 992px - 1199.98px
========================================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {

  /* SECTION */
  #garage-door-material-guidance {
    padding: 45px 15px;
  }


  /* CONTAINER */
  #garage-door-material-guidance .statistics-container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
  }


  /* MAIN CARD */
  #garage-door-material-guidance .statistics-card {
    position: relative;
    width: 100%;
    min-height: 620px;
    overflow: hidden;
  }


  /* ROW */
  #garage-door-material-guidance .statistics-inner {
    min-height: 620px;
    align-items: stretch !important;
  }


  /* =======================================================
     LEFT IMAGE COLUMN
  ======================================================= */

  #garage-door-material-guidance .expert-support-left-column {
    width: 42%;
    flex: 0 0 42%;
    max-width: 42%;
  }


  #garage-door-material-guidance .expert-support-image {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 620px;
    overflow: hidden;
  }


  #garage-door-material-guidance .expert-support-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 620px;

    object-fit: cover;
    object-position: center;

    border-radius: 0;
  }


  /* IMAGE LABEL */
  #garage-door-material-guidance .expert-support-image-label {
    position: absolute;

    left: 22px;
    bottom: 24px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 8px 12px;

    font-size: 10px;
    letter-spacing: 0.12em;

    white-space: nowrap;
  }


  /* =======================================================
     RIGHT CONTENT COLUMN
  ======================================================= */

  #garage-door-material-guidance .expert-support-right-column {
    width: 58%;
    flex: 0 0 58%;
    max-width: 58%;
  }


  #garage-door-material-guidance .statistics-right,
  #garage-door-material-guidance .expert-support-content {
    width: 100%;
    height: 100%;

    padding:
      55px 42px 45px;

    display: flex;
    flex-direction: column;
    justify-content: center;
  }


  /* =======================================================
     TRIANGLES
  ======================================================= */

  #garage-door-material-guidance .statistics-triangles {
    margin-bottom: 15px;
  }


  #garage-door-material-guidance .statistics-triangles span {
    transform: scale(0.85);
    transform-origin: left center;
  }


  /* =======================================================
     TITLE
  ======================================================= */

  #garage-door-material-guidance .statistics-title,
  #garage-door-material-guidance .expert-support-title {
    max-width: 100%;

    margin:
      0 0 22px;

    font-size: clamp(38px,
        4.2vw,
        54px);

    line-height: 0.98;

    letter-spacing: -0.045em;
  }


  /* =======================================================
     COPY
  ======================================================= */

  #garage-door-material-guidance .expert-support-copy {
    width: 100%;
    max-width: 100%;
  }


  #garage-door-material-guidance .expert-support-copy p {
    margin:
      0 0 16px;

    font-size: 14px;
    line-height: 1.55;
  }


  #garage-door-material-guidance .expert-support-copy p:last-child {
    margin-bottom: 0;
  }


  /* =======================================================
     CALL BUTTON
  ======================================================= */

  #garage-door-material-guidance .expert-support-call {
    display: inline-flex;
    align-items: center;

    width: fit-content;
    max-width: 100%;

    min-height: 58px;

    margin-top: 22px;

    padding:
      7px 13px 7px 8px;

    gap: 11px;

    white-space: nowrap;
  }


  /* PHONE ICON */
  #garage-door-material-guidance .expert-support-call-icon {
    width: 43px;
    height: 43px;

    min-width: 43px;
    flex: 0 0 43px;
  }


  #garage-door-material-guidance .expert-support-call-icon svg {
    width: 21px;
    height: 21px;
  }


  /* BUTTON TEXT */
  #garage-door-material-guidance .expert-support-call-text small {
    font-size: 8px;
    line-height: 1.1;
    letter-spacing: 0.09em;
  }


  #garage-door-material-guidance .expert-support-call-text strong {
    font-size: 18px;
    line-height: 1.1;
  }


  /* BUTTON ARROW */
  #garage-door-material-guidance .expert-support-call-arrow {
    width: 35px;
    height: 35px;

    min-width: 35px;

    margin-left: 3px;

    font-size: 17px;
  }


  /* =======================================================
     ARCHITECTURAL FRAME
  ======================================================= */

  #garage-door-material-guidance .statistics-frame {
    width: 100%;
    height: 100%;
  }

}


/* =========================================================
   TABLET
   STACK BELOW BOOTSTRAP LG BREAKPOINT
========================================================= */

@media (max-width: 991.98px) {

  #garage-door-material-guidance {
    padding: 40px 15px;
  }


  #garage-door-material-guidance .statistics-card {
    min-height: 0;
    overflow: hidden;
  }


  #garage-door-material-guidance .statistics-frame {
    display: none;
  }


  #garage-door-material-guidance .statistics-inner {
    display: flex;
    flex-direction: column;
  }


  #garage-door-material-guidance .expert-support-left-column,
  #garage-door-material-guidance .expert-support-right-column {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }


  /* IMAGE */
  #garage-door-material-guidance .expert-support-image {
    width: 100%;
    height: auto;

    aspect-ratio: 16 / 10;

    min-height: 0;
  }


  #garage-door-material-guidance .expert-support-image img {
    width: 100%;
    height: 100%;

    min-height: 0;

    object-fit: cover;
    object-position: center;
  }


  /* CONTENT */
  #garage-door-material-guidance .statistics-right,
  #garage-door-material-guidance .expert-support-content {
    height: auto;

    padding:
      45px 35px 50px;
  }


  #garage-door-material-guidance .statistics-title,
  #garage-door-material-guidance .expert-support-title {
    font-size: clamp(38px,
        7vw,
        58px);

    margin-bottom: 22px;
  }


  #garage-door-material-guidance .expert-support-copy p {
    font-size: 16px;
    line-height: 1.6;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

  #garage-door-material-guidance {
    padding:
      25px 10px;
  }


  #garage-door-material-guidance .expert-support-image {
    aspect-ratio: 4 / 5;
  }


  #garage-door-material-guidance .expert-support-image-label {
    left: 15px;
    bottom: 15px;

    padding:
      7px 10px;

    font-size: 9px;
  }


  #garage-door-material-guidance .statistics-right,
  #garage-door-material-guidance .expert-support-content {
    padding:
      35px 22px 40px;
  }


  #garage-door-material-guidance .statistics-title,
  #garage-door-material-guidance .expert-support-title {
    font-size: clamp(34px,
        11vw,
        48px);

    line-height: 1;

    margin-bottom: 18px;
  }


  #garage-door-material-guidance .expert-support-copy p {
    font-size: 14px;
    line-height: 1.55;
  }


  /* CALL BUTTON */
  #garage-door-material-guidance .expert-support-call {
    width: 100%;

    min-height: 60px;

    margin-top: 22px;

    padding:
      7px 10px 7px 7px;

    gap: 10px;
  }


  #garage-door-material-guidance .expert-support-call-icon {
    width: 44px;
    height: 44px;

    min-width: 44px;

    flex-basis: 44px;
  }


  #garage-door-material-guidance .expert-support-call-text {
    min-width: 0;
  }


  #garage-door-material-guidance .expert-support-call-text small {
    font-size: 8px;
  }


  #garage-door-material-guidance .expert-support-call-text strong {
    font-size: 17px;
  }


  #garage-door-material-guidance .expert-support-call-arrow {
    width: 35px;
    height: 35px;

    min-width: 35px;

    margin-left: auto;
  }

}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .expert-support-section {
    padding:
      40px 15px;
  }


  .expert-support-section .statistics-card {
    height: auto;
    min-height: 0;

    padding:
      35px 30px;

    overflow: visible;
  }


  /*
     Remove architectural frame after columns stack
  */
  .expert-support-section .statistics-frame {
    display: none;
  }


  .expert-support-section .statistics-inner {
    position: relative;

    inset: auto;

    display: block !important;

    width: 100%;
    height: auto;
  }


  .expert-support-image {
    position: relative;

    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    width: 100%;
    height: 500px;

    margin:
      0 0 45px;
  }


  .expert-support-section .statistics-right,
  .expert-support-content {
    width: 100% !important;
    height: auto;

    padding:
      10px 10px 30px;

    overflow: visible;
  }


  .expert-support-section .statistics-title,
  .expert-support-title {
    max-width: 600px;

    font-size:
      clamp(36px, 6vw, 48px);

    line-height: 0.98;
  }


  .expert-support-copy {
    max-width: 750px;
  }


  .expert-support-copy p {
    font-size: 17px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

  .expert-support-section {
    padding:
      25px 10px;
  }


  .expert-support-section .statistics-card {
    padding:
      25px 18px;
  }


  .expert-support-image {
    height: 340px;

    margin-bottom: 35px;
  }


  .expert-support-image-label {
    left: 13px;
    bottom: 13px;

    padding:
      8px 10px;

    font-size: 8px;
  }


  .expert-support-content {
    padding:
      5px 0 20px !important;
  }


  .expert-support-section .statistics-title,
  .expert-support-title {
    max-width: 100%;

    margin-bottom: 20px;

    font-size:
      clamp(30px, 9vw, 40px);

    line-height: 1;
  }


  .expert-support-copy p {
    font-size: 15px;

    line-height: 1.65;
  }


  .expert-support-call {
    max-width: none;

    min-height: 62px;

    margin-top: 24px;

    gap: 10px;
  }


  .expert-support-call-icon {
    width: 44px;
    height: 44px;

    flex-basis: 44px;
  }


  .expert-support-call-icon svg {
    width: 19px;
    height: 19px;
  }


  .expert-support-call-text small {
    font-size: 8px;
  }


  .expert-support-call-text strong {
    font-size: 18px;
  }


  .expert-support-call-arrow {
    font-size: 18px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .expert-support-call {
    padding-right: 12px;
  }


  .expert-support-call-text strong {
    font-size: 16px;
  }


  .expert-support-section .statistics-title,
  .expert-support-title {
    font-size:
      clamp(28px, 8.8vw, 36px);
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .expert-support-section .statistics-triangles span,

  .expert-support-image img,

  .expert-support-image-dot,

  .expert-support-call,

  .expert-support-call-icon,

  .expert-support-call-icon::after,

  .expert-support-call-arrow {

    animation: none;

    transition: none;
  }

}

/* =========================================================
   EXPERT SUPPORT - SLIGHTLY SMALLER TYPOGRAPHY
   ADD AT VERY BOTTOM OF CSS
========================================================= */

@media (min-width: 992px) {

  .expert-support-section .statistics-title,
  .expert-support-section .expert-support-title {
    font-size: clamp(42px, 3.2vw, 54px) !important;
    line-height: 0.95 !important;
  }

  .expert-support-section .expert-support-copy p {
    font-size: 18px !important;
    line-height: 1.64 !important;
  }

  .expert-support-section .expert-support-image-label {
    font-size: 10px !important;
  }

  .expert-support-section .expert-support-call-text small {
    font-size: 9px !important;
  }

  .expert-support-section .expert-support-call-text strong {
    font-size: 23px !important;
  }

  .expert-support-section .expert-support-call-arrow {
    font-size: 21px !important;
  }
}


/* LARGE DESKTOP */
@media (min-width: 1400px) {

  .expert-support-section .statistics-title,
  .expert-support-section .expert-support-title {
    font-size: 56px !important;
  }

  .expert-support-section .expert-support-copy p {
    font-size: 19px !important;
  }

  .expert-support-section .expert-support-call-text strong {
    font-size: 25px !important;
  }
}


/* TABLET */
@media (max-width: 991.98px) {

  .expert-support-section .statistics-title,
  .expert-support-section .expert-support-title {
    font-size: clamp(38px, 6.5vw, 50px) !important;
  }

  .expert-support-section .expert-support-copy p {
    font-size: 17px !important;
    line-height: 1.66 !important;
  }

  .expert-support-section .expert-support-call-text strong {
    font-size: 21px !important;
  }
}


/* MOBILE */
@media (max-width: 575.98px) {

  .expert-support-section .statistics-title,
  .expert-support-section .expert-support-title {
    font-size: clamp(32px, 9vw, 40px) !important;
  }

  .expert-support-section .expert-support-copy p {
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  .expert-support-section .expert-support-call-text strong {
    font-size: 19px !important;
  }
}

/* 0000000000000000000000000000000000000000000000000000000000000000000 */

/* =========================================================
   PEARLAND GARAGE DOORS
   FULL WIDTH FAQ TIMELINE
========================================================= */


/* =========================================================
   SECTION
========================================================= */

/* =========================================================
   PEARLAND GARAGE DOORS - FULL-WIDTH LUXURY FAQ TIMELINE
========================================================= */

:root {
  /* Main Dark Green */
  --color-green: #123122;
  --color-green-dark: #0f2b1e;
  --color-green-soft: #36473b;

  /* Cream / Off White */
  --color-cream: #e9e3d7;
  --color-cream-light: #f3eee5;

  /* Beige / Taupe */
  --color-beige: #aea28c;
  --color-beige-light: #d4ccbe;
  --color-taupe: #bdb5a7;

  /* Neutral Text */
  --color-black: #171717;
  --color-text: #36473b;
  --color-gray: #62604f;
  --color-gray-dark: #878070;

  /* Borders */
  --border-green: rgba(18, 49, 34, 0.22);
  --border-light: rgba(18, 49, 34, 0.10);

  /* Backgrounds */
  --bg-main: #aea28c;
  --bg-section: #e9e3d7;
  --bg-card: #f3eee5;
  --bg-accent: #123122;

  /* Optional Transparent Versions */
  --green-soft: rgba(18, 49, 34, 0.10);
  --green-medium: rgba(18, 49, 34, 0.18);
  --beige-soft: rgba(174, 162, 140, 0.20);

  --transition: 250ms ease;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-main);
  font-family: 'Plus Jakarta Sans', Arial, Helvetica, sans-serif;
  color: var(--color-green-dark);
  -webkit-font-smoothing: antialiased;
}

/* =========================================================
   SECTION & FULL-WIDTH CONTAINER OVERRIDES
========================================================= */

/* =========================================================
   PEARLAND GARAGE DOORS
   FAQ TIMELINE
   BOOTSTRAP 5 RESPONSIVE VERSION
========================================================= */


/* =========================================================
   FAQ TIMELINE
   FULL RESPONSIVE BOOTSTRAP 5 VERSION
========================================================= */

.faq-timeline-section {
  position: relative;

  width: 100%;

  margin: 0;

  padding: 60px 0;

  overflow: hidden;

  background:
    var(--bg-section, #e9e3d7);

  font-family:
    "Montserrat",
    Arial,
    Helvetica,
    sans-serif;
}


/* =========================================================
   CONTAINER
========================================================= */

.faq-timeline-container {
  width: 100% !important;
  max-width: 100% !important;

  margin: 0 auto !important;
  padding: 0 !important;
}


/* =========================================================
   MAIN CARD
========================================================= */

.faq-timeline-card {
  position: relative;

  width: 100%;

  min-height: 1120px;

  margin: 0;
  padding: 0;

  overflow: hidden;

  background:
    var(--bg-section, #e9e3d7);

  isolation: isolate;

  border-top:
    1px solid var(--border-green, rgba(18, 49, 34, 0.22));

  border-bottom:
    1px solid var(--border-green, rgba(18, 49, 34, 0.22));

  box-shadow:
    inset 0 15px 40px rgba(15, 43, 30, 0.04);
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.faq-timeline-grid {
  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(18, 49, 34, 0.045) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(18, 49, 34, 0.045) 1px,
      transparent 1px);

  background-size:
    42px 42px;
}


/* =========================================================
   HEADER
========================================================= */

.faq-timeline-header {
  position: absolute;

  top: 65px;
  left: 50%;

  z-index: 10;

  display: grid;

  grid-template-columns:
    minmax(0, 38%) minmax(0, 62%);

  align-items: start;

  column-gap: 65px;

  width: 90%;
  max-width: 1240px;

  transform:
    translateX(-50%);
}


/* =========================================================
   HEADER LEFT
========================================================= */

.faq-timeline-heading {
  position: relative;

  width: 100%;

  text-align: left;
}


/* =========================================================
   MAIN TITLE
========================================================= */

.faq-timeline-title {
  margin: 0;

  color:
    var(--color-green-dark, #0f2b1e);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-style: italic;

  font-size:
    clamp(60px, 5.8vw, 92px);

  font-weight: 900;

  line-height: 0.88;

  letter-spacing:
    -0.03em;

  text-transform:
    uppercase;
}


/* =========================================================
   TITLE ARROWS
========================================================= */

.faq-title-arrows {
  display: flex;

  align-items: center;

  gap: 8px;

  width: fit-content;

  margin:
    18px 0 0 6px;
}


.faq-title-arrows span {
  display: block;

  width: 0;
  height: 0;

  border-left:
    7px solid transparent;

  border-right:
    7px solid transparent;

  border-top:
    11px solid var(--color-green-dark, #0f2b1e);

  animation:
    faqArrowMove 1.5s ease-in-out infinite;
}


.faq-title-arrows span:nth-child(2) {
  border-top-color:
    var(--color-beige, #aea28c);

  animation-delay:
    0.18s;
}


.faq-title-arrows span:nth-child(3) {
  border-top-color:
    var(--color-green-soft, #36473b);

  animation-delay:
    0.36s;
}


/* =========================================================
   HEADER RIGHT
========================================================= */

.faq-timeline-intro {
  position: relative;

  width: 100%;
  max-width: 680px;

  padding-top: 4px;
}


/* =========================================================
   INTRO LABEL
========================================================= */

.faq-intro-label {
  display: inline-block;

  width: fit-content;

  margin:
    0 0 12px;

  padding:
    6px 14px;

  color:
    var(--color-green-dark, #0f2b1e);

  background:
    var(--bg-card, #f3eee5);

  border-left:
    2px solid var(--color-green-dark, #0f2b1e);

  font-family:
    "Cinzel",
    Georgia,
    serif;

  font-size: 12px;

  font-weight: 900;

  line-height: 1.2;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


/* =========================================================
   INTRO PARAGRAPH
========================================================= */

.faq-timeline-intro p {
  width: 100%;

  max-width: 680px;

  margin: 0;

  color:
    var(--color-gray, #62604f);

  font-size: 18px;

  font-weight: 500;

  line-height: 1.7;
}


/* =========================================================
   DESKTOP TIMELINE STAGE
========================================================= */

.faq-timeline-stage {
  --line-clearance: 90px;

  position: absolute;

  top: 275px;
  right: 4.5%;
  bottom: 70px;
  left: 4.5%;

  z-index: 5;
}


/* =========================================================
   MAIN HORIZONTAL LINE
========================================================= */

.faq-main-line {
  position: absolute;

  top: 50%;
  left: 0;

  width: 100%;
  height: 2px;

  z-index: 2;

  background:
    var(--color-green-dark, #0f2b1e);

  transform:
    translateY(-50%);
}


/* START DOT */

.faq-line-start {
  position: absolute;

  top: 50%;
  left: 0;

  width: 9px;
  height: 9px;

  border-radius: 50%;

  background:
    var(--color-green-dark, #0f2b1e);

  transform:
    translate(-50%, -50%);

  box-shadow:
    0 0 0 3px var(--bg-section, #e9e3d7);
}


/* END ARROW */

.faq-line-end {
  position: absolute;

  top: 50%;
  right: -1px;

  width: 0;
  height: 0;

  transform:
    translateY(-50%);

  border-top:
    5px solid transparent;

  border-bottom:
    5px solid transparent;

  border-left:
    10px solid var(--color-green-dark, #0f2b1e);
}


/* =========================================================
   FAQ ITEM
========================================================= */

.faq-timeline-item {
  position: absolute;

  width: 23.5%;

  margin: 0;

  color:
    var(--color-black, #171717);

  z-index: 4;
}


/* =========================================================
   TOP ITEMS
========================================================= */

.faq-item-01 {
  left: 3%;

  bottom:
    calc(50% + var(--line-clearance));
}


.faq-item-02 {
  left: 37%;

  bottom:
    calc(50% + var(--line-clearance));
}


.faq-item-03 {
  left: 70.5%;

  bottom:
    calc(50% + var(--line-clearance));
}


/* =========================================================
   BOTTOM ITEMS
========================================================= */

.faq-item-04 {
  left: 10%;

  top:
    calc(50% + var(--line-clearance));
}


.faq-item-05 {
  left: 43%;

  top:
    calc(50% + var(--line-clearance));
}


.faq-item-06 {
  left: 74%;

  top:
    calc(50% + var(--line-clearance));
}


/* =========================================================
   ITEM VERTICAL LINE
========================================================= */

.faq-timeline-item::after {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: 20px;

  width: 2px;

  z-index: 1;

  background:
    var(--color-green-dark, #0f2b1e);

  opacity: 0.9;
}


/* =========================================================
   ITEM EDGE DOTS
========================================================= */

.faq-item-01::before,
.faq-item-02::before,
.faq-item-03::before {
  content: "";

  position: absolute;

  top: -3px;
  left: 16.5px;

  width: 8px;
  height: 8px;

  z-index: 5;

  border-radius: 50%;

  background:
    var(--color-green-dark, #0f2b1e);

  box-shadow:
    0 0 0 3px var(--bg-section, #e9e3d7);
}


.faq-item-04::before,
.faq-item-05::before,
.faq-item-06::before {
  content: "";

  position: absolute;

  bottom: -3px;
  left: 16.5px;

  width: 8px;
  height: 8px;

  z-index: 5;

  border-radius: 50%;

  background:
    var(--color-green-dark, #0f2b1e);

  box-shadow:
    0 0 0 3px var(--bg-section, #e9e3d7);
}


/* =========================================================
   FAQ CONTENT CARD
========================================================= */

.faq-content {
  position: relative;

  z-index: 3;

  width:
    calc(100% - 36px);

  margin-left:
    36px;

  padding:
    18px 20px;

  background:
    var(--bg-card, #f3eee5);

  border:
    1px solid var(--border-light, rgba(18, 49, 34, 0.10));

  border-radius:
    4px;

  box-sizing:
    border-box;

  transition:
    transform 300ms ease,
    box-shadow 300ms ease,
    border-color 300ms ease;
}


.faq-content:hover {
  transform:
    translateY(-4px);

  border-color:
    var(--border-green, rgba(18, 49, 34, 0.22));

  box-shadow:
    0 12px 28px rgba(15, 43, 30, 0.08);
}


/* =========================================================
   CATEGORY LABEL
========================================================= */

.faq-small-label {
  display: inline-block;

  width: fit-content;

  max-width: 100%;

  margin:
    0 0 10px;

  padding:
    5px 10px;

  color:
    var(--color-green-dark, #0f2b1e);

  background:
    var(--bg-section, #e9e3d7);

  font-family:
    "Cinzel",
    Georgia,
    serif;

  font-size: 10px;

  font-weight: 900;

  line-height: 1.1;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;
}


/* =========================================================
   QUESTION
========================================================= */

.faq-content h3 {
  width: 100%;

  margin:
    0 0 10px;

  color:
    var(--color-green-dark, #0f2b1e);

  font-size:
    clamp(18px, 1.35vw, 22px);

  font-weight: 900;

  line-height: 1.22;

  letter-spacing:
    -0.01em;

  overflow-wrap:
    anywhere;

  text-transform:
    uppercase;
}


/* =========================================================
   ANSWER
========================================================= */

.faq-content p {
  width: 100%;

  margin: 0;

  color:
    var(--color-gray, #62604f);

  font-size:
    clamp(13px, 0.95vw, 15px);

  font-weight: 500;

  line-height: 1.65;

  overflow-wrap:
    anywhere;
}


/* =========================================================
   NUMBER / DOT ANCHOR
========================================================= */

.faq-anchor {
  position: absolute;

  left: -12px;

  z-index: 8;

  display: flex;

  align-items: center;

  gap: 5px;

  white-space: nowrap;
}


.faq-item-01 .faq-anchor,
.faq-item-02 .faq-anchor,
.faq-item-03 .faq-anchor {
  bottom: -5px;
}


.faq-item-04 .faq-anchor,
.faq-item-05 .faq-anchor,
.faq-item-06 .faq-anchor {
  top: -5px;
}


.faq-number {
  display: block;

  width: 26px;

  color:
    var(--color-green-dark, #0f2b1e);

  font-family:
    "Cinzel",
    Georgia,
    serif;

  font-size: 14px;

  font-weight: 900;

  line-height: 1;

  letter-spacing:
    0.05em;

  text-align: right;
}


.faq-dot {
  display: block;

  width: 8px;
  height: 8px;

  flex:
    0 0 8px;

  border-radius: 50%;

  background:
    var(--color-green-dark, #0f2b1e);

  box-shadow:
    0 0 0 2.5px var(--bg-section, #e9e3d7);
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes faqArrowMove {

  0%,
  100% {
    transform:
      translateY(0);

    opacity: 0.5;
  }

  50% {
    transform:
      translateY(6px);

    opacity: 1;
  }
}


/* =========================================================
   XXL FIX
   1400px - 1599px
   Prevent sudden layout jump
========================================================= */

@media (min-width: 1400px) and (max-width: 1599.98px) {

  .faq-timeline-section {
    padding: 55px 0;
  }


  .faq-timeline-card {
    min-height: 1140px;
  }


  /* =====================================================
     HEADER
  ===================================================== */

  .faq-timeline-header {
    top: 65px;

    left: 50%;

    width: 90%;

    max-width: 1260px;

    grid-template-columns:
      minmax(0, 36%) minmax(0, 64%);

    column-gap: 55px;

    transform: translateX(-50%);
  }


  .faq-timeline-title {
    font-size:
      clamp(68px, 5.2vw, 84px);

    line-height: 0.9;
  }


  .faq-timeline-intro {
    max-width: 680px;
  }


  .faq-timeline-intro p {
    max-width: 680px;

    font-size: 17px;

    line-height: 1.65;
  }


  /* =====================================================
     TIMELINE STAGE
  ===================================================== */

  .faq-timeline-stage {
    --line-clearance: 88px;

    top: 280px;

    left: 50%;

    right: auto;

    bottom: 70px;

    width: 92%;

    max-width: 1340px;

    transform:
      translateX(-50%);
  }


  /* =====================================================
     FAQ CARDS
  ===================================================== */

  .faq-timeline-item {
    width: 24%;
  }


  /* TOP */

  .faq-item-01 {
    left: 1.5%;
  }

  .faq-item-02 {
    left: 34.5%;
  }

  .faq-item-03 {
    left: 67.5%;
  }


  /* BOTTOM */

  .faq-item-04 {
    left: 8.5%;
  }

  .faq-item-05 {
    left: 41%;
  }

  .faq-item-06 {
    left: 71.5%;
  }


  /* =====================================================
     CARD CONTENT
  ===================================================== */

  .faq-content {
    padding: 18px 19px;
  }


  .faq-content h3 {
    font-size: 20px;

    line-height: 1.22;
  }


  .faq-content p {
    font-size: 13.5px;

    line-height: 1.65;
  }

}


/* =========================================================
   LARGE XXL
   1600px - 1799px
========================================================= */

@media (min-width: 1600px) and (max-width: 1799.98px) {

  .faq-timeline-card {
    min-height: 1160px;
  }


  .faq-timeline-header {
    top: 65px;

    left: 50%;

    width: 88%;

    max-width: 1360px;

    grid-template-columns:
      minmax(0, 36%) minmax(0, 64%);

    column-gap: 65px;

    transform:
      translateX(-50%);
  }


  .faq-timeline-title {
    font-size:
      clamp(76px, 5.4vw, 90px);
  }


  .faq-timeline-intro {
    max-width: 720px;
  }


  .faq-timeline-intro p {
    max-width: 720px;

    font-size: 18px;
  }


  .faq-timeline-stage {
    --line-clearance: 92px;

    top: 285px;

    left: 50%;

    right: auto;

    bottom: 70px;

    width: 90%;

    max-width: 1450px;

    transform:
      translateX(-50%);
  }


  .faq-timeline-item {
    width: 23%;
  }


  .faq-item-01 {
    left: 2%;
  }

  .faq-item-02 {
    left: 35%;
  }

  .faq-item-03 {
    left: 68%;
  }


  .faq-item-04 {
    left: 9%;
  }

  .faq-item-05 {
    left: 41.5%;
  }

  .faq-item-06 {
    left: 72%;
  }


  .faq-content h3 {
    font-size: 21px;
  }


  .faq-content p {
    font-size: 14px;
  }

}


/* =========================================================
   EXTRA LARGE SCREEN
   >= 1800px
========================================================= */

@media (min-width: 1800px) {

  .faq-timeline-card {
    min-height: 1180px;
  }


  /* Keep layout centered instead of stretching infinitely */

  .faq-timeline-header {
    top: 70px;

    left: 50%;

    width: 88%;

    max-width: 1450px;

    grid-template-columns:
      minmax(0, 36%) minmax(0, 64%);

    column-gap: 75px;

    transform:
      translateX(-50%);
  }


  .faq-timeline-title {
    font-size: 92px;

    line-height: 0.9;
  }


  .faq-timeline-intro {
    max-width: 760px;
  }


  .faq-timeline-intro p {
    max-width: 760px;

    font-size: 19px;
  }


  /* =====================================================
     TIMELINE
  ===================================================== */

  .faq-timeline-stage {
    --line-clearance: 95px;

    top: 295px;

    left: 50%;

    right: auto;

    bottom: 75px;

    width: 90%;

    max-width: 1550px;

    transform:
      translateX(-50%);
  }


  .faq-timeline-item {
    width: 22.5%;
  }


  .faq-item-01 {
    left: 2%;
  }

  .faq-item-02 {
    left: 35%;
  }

  .faq-item-03 {
    left: 68%;
  }


  .faq-item-04 {
    left: 9%;
  }

  .faq-item-05 {
    left: 42%;
  }

  .faq-item-06 {
    left: 73%;
  }


  .faq-content {
    padding: 20px 22px;
  }


  .faq-content h3 {
    font-size: 22px;
  }


  .faq-content p {
    font-size: 15px;
  }

}

/* =========================================================
   XL
   1200px - 1399px
========================================================= */

@media (min-width: 1200px) and (max-width: 1399.98px) {

  .faq-timeline-card {
    min-height:
      1120px;
  }


  .faq-timeline-header {
    width:
      91%;

    max-width:
      1180px;

    grid-template-columns:
      37% 63%;

    column-gap:
      45px;
  }


  .faq-timeline-title {
    font-size:
      clamp(62px, 5.6vw, 82px);
  }


  .faq-timeline-intro p {
    font-size:
      17px;
  }


  .faq-timeline-stage {
    --line-clearance:
      88px;

    top:
      270px;

    left:
      3.5%;

    right:
      3.5%;
  }


  .faq-timeline-item {
    width:
      24%;
  }


  .faq-item-01 {
    left:
      2%;
  }


  .faq-item-02 {
    left:
      35%;
  }


  .faq-item-03 {
    left:
      68%;
  }


  .faq-item-04 {
    left:
      9%;
  }


  .faq-item-05 {
    left:
      41.5%;
  }


  .faq-item-06 {
    left:
      72%;
  }


  .faq-content {
    padding:
      17px 18px;
  }


  .faq-content h3 {
    font-size:
      19px;
  }


  .faq-content p {
    font-size:
      13px;
  }

}


/* =========================================================
   <= 1199px
   CHANGE HORIZONTAL TIMELINE TO VERTICAL
========================================================= */

@media (max-width: 1199.98px) {

  .faq-timeline-section {
    padding:
      50px 0;
  }


  .faq-timeline-card {
    min-height:
      0;

    height:
      auto;

    padding:
      55px 45px;

    overflow:
      hidden;
  }


  /* HEADER */

  .faq-timeline-header {
    position:
      relative;

    top:
      auto;

    left:
      auto;

    width:
      100%;

    max-width:
      1000px;

    margin:
      0 auto 55px;

    transform:
      none;
  }


  /* TIMELINE */

  .faq-timeline-stage {
    position:
      relative;

    top:
      auto;

    right:
      auto;

    bottom:
      auto;

    left:
      auto;

    width:
      100%;

    max-width:
      1000px;

    margin:
      0 auto;

    padding-left:
      55px;

    box-sizing:
      border-box;
  }


  /* Vertical center line */

  .faq-main-line {
    top:
      0;

    left:
      10px;

    width:
      2px;

    height:
      100%;

    transform:
      none;
  }


  .faq-line-start,
  .faq-line-end {
    display:
      none;
  }


  /* All cards become normal document flow */

  .faq-timeline-item {
    position:
      relative;

    top:
      auto !important;

    right:
      auto !important;

    bottom:
      auto !important;

    left:
      auto !important;

    width:
      100%;

    margin:
      0 0 32px;
  }


  .faq-timeline-item:last-child {
    margin-bottom:
      0;
  }


  /* Remove old desktop vertical item lines */

  .faq-timeline-item::before,
  .faq-timeline-item::after {
    display:
      none;
  }


  .faq-content {
    width:
      100%;

    max-width:
      none;

    margin-left:
      20px;

    box-sizing:
      border-box;
  }


  /* All timeline numbers move to same side */

  .faq-item-01 .faq-anchor,
  .faq-item-02 .faq-anchor,
  .faq-item-03 .faq-anchor,
  .faq-item-04 .faq-anchor,
  .faq-item-05 .faq-anchor,
  .faq-item-06 .faq-anchor {
    top:
      7px !important;

    bottom:
      auto !important;

    left:
      -48px !important;
  }

}


/* =========================================================
   LG
   992px - 1199px
========================================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {

  .faq-timeline-header {
    grid-template-columns:
      minmax(0, 38%) minmax(0, 62%);

    column-gap:
      40px;
  }


  .faq-timeline-title {
    font-size:
      clamp(58px, 7vw, 76px);
  }


  .faq-timeline-intro p {
    font-size:
      16px;
  }


  .faq-content {
    padding:
      22px 26px;
  }


  .faq-content h3 {
    font-size:
      22px;
  }


  .faq-content p {
    font-size:
      15px;
  }

}


/* =========================================================
   MD
   768px - 991px
========================================================= */

@media (min-width: 768px) and (max-width: 991.98px) {

  .faq-timeline-section {
    padding:
      40px 0;
  }


  .faq-timeline-card {
    padding:
      50px 35px;
  }


  /* Stack header */

  .faq-timeline-header {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    gap:
      24px;

    max-width:
      700px;

    margin-bottom:
      50px;

    text-align:
      center;
  }


  .faq-timeline-heading {
    text-align:
      center;
  }


  .faq-timeline-title {
    font-size:
      clamp(54px, 9vw, 74px);

    text-align:
      center;
  }


  .faq-title-arrows {
    justify-content:
      center;

    margin:
      16px auto 0;
  }


  .faq-timeline-intro {
    max-width:
      650px;

    margin:
      0 auto;

    padding:
      0;

    text-align:
      center;
  }


  .faq-intro-label {
    margin:
      0 auto 12px;
  }


  .faq-timeline-intro p {
    max-width:
      650px;

    margin:
      0 auto;

    font-size:
      16px;

    text-align:
      center;
  }


  .faq-timeline-stage {
    padding-left:
      48px;
  }


  .faq-main-line {
    left:
      8px;
  }


  .faq-content {
    margin-left:
      17px;

    padding:
      20px 22px;
  }


  .faq-content h3 {
    font-size:
      21px;
  }


  .faq-content p {
    font-size:
      15px;
  }


  .faq-item-01 .faq-anchor,
  .faq-item-02 .faq-anchor,
  .faq-item-03 .faq-anchor,
  .faq-item-04 .faq-anchor,
  .faq-item-05 .faq-anchor,
  .faq-item-06 .faq-anchor {
    left:
      -41px !important;
  }

}


/* =========================================================
   SM
   576px - 767px
========================================================= */

@media (min-width: 576px) and (max-width: 767.98px) {

  .faq-timeline-section {
    padding:
      35px 0;
  }


  .faq-timeline-card {
    padding:
      42px 25px;
  }


  .faq-timeline-header {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    gap:
      20px;

    margin-bottom:
      45px;

    text-align:
      center;
  }


  .faq-timeline-heading {
    text-align:
      center;
  }


  .faq-timeline-title {
    font-size:
      clamp(48px, 10vw, 66px);

    text-align:
      center;
  }


  .faq-title-arrows {
    justify-content:
      center;

    margin:
      15px auto 0;
  }


  .faq-timeline-intro {
    margin:
      0 auto;

    text-align:
      center;
  }


  .faq-intro-label {
    margin:
      0 auto 12px;
  }


  .faq-timeline-intro p {
    margin:
      0 auto;

    font-size:
      15.5px;

    text-align:
      center;
  }


  .faq-timeline-stage {
    padding-left:
      40px;
  }


  .faq-main-line {
    left:
      7px;
  }


  .faq-timeline-item {
    margin-bottom:
      30px;
  }


  .faq-content {
    margin-left:
      14px;

    padding:
      18px 18px;
  }


  .faq-content h3 {
    font-size:
      19px;
  }


  .faq-content p {
    font-size:
      14px;
  }


  .faq-small-label {
    font-size:
      9px;
  }


  .faq-item-01 .faq-anchor,
  .faq-item-02 .faq-anchor,
  .faq-item-03 .faq-anchor,
  .faq-item-04 .faq-anchor,
  .faq-item-05 .faq-anchor,
  .faq-item-06 .faq-anchor {
    left:
      -35px !important;
  }

}


/* =========================================================
   XS
   <= 575px
========================================================= */

@media (max-width: 575.98px) {

  .faq-timeline-section {
    padding:
      26px 0;
  }


  .faq-timeline-card {
    padding:
      36px 15px;
  }


  .faq-timeline-header {
    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    gap:
      18px;

    width:
      100%;

    margin:
      0 auto 38px;

    text-align:
      center;
  }


  .faq-timeline-heading {
    width:
      100%;

    text-align:
      center;
  }


  .faq-timeline-title {
    font-size:
      clamp(38px, 12vw, 54px);

    line-height:
      0.94;

    text-align:
      center;
  }


  .faq-title-arrows {
    justify-content:
      center;

    margin:
      13px auto 0;
  }


  .faq-title-arrows span {
    border-left-width:
      6px;

    border-right-width:
      6px;

    border-top-width:
      9px;
  }


  .faq-timeline-intro {
    width:
      100%;

    margin:
      0 auto;

    padding:
      0;

    text-align:
      center;
  }


  .faq-intro-label {
    max-width:
      100%;

    margin:
      0 auto 11px;

    padding:
      6px 9px;

    font-size:
      8.5px;

    letter-spacing:
      0.1em;

    white-space:
      normal;
  }


  .faq-timeline-intro p {
    width:
      100%;

    margin:
      0 auto;

    font-size:
      14px;

    line-height:
      1.65;

    text-align:
      center;
  }


  /* Timeline */

  .faq-timeline-stage {
    width:
      100%;

    padding-left:
      28px;
  }


  .faq-main-line {
    left:
      4px;
  }


  .faq-timeline-item {
    margin-bottom:
      25px;
  }


  .faq-content {
    width:
      100%;

    margin-left:
      9px;

    padding:
      15px 13px;

    border-radius:
      3px;
  }


  .faq-small-label {
    margin-bottom:
      8px;

    padding:
      5px 7px;

    font-size:
      8px;

    letter-spacing:
      0.08em;
  }


  .faq-content h3 {
    margin-bottom:
      9px;

    font-size:
      clamp(16px, 4.8vw, 19px);

    line-height:
      1.25;
  }


  .faq-content p {
    font-size:
      clamp(12.5px, 3.6vw, 14px);

    line-height:
      1.65;
  }


  .faq-number {
    width:
      20px;

    font-size:
      11px;
  }


  .faq-dot {
    width:
      7px;

    height:
      7px;

    flex-basis:
      7px;
  }


  .faq-item-01 .faq-anchor,
  .faq-item-02 .faq-anchor,
  .faq-item-03 .faq-anchor,
  .faq-item-04 .faq-anchor,
  .faq-item-05 .faq-anchor,
  .faq-item-06 .faq-anchor {
    top:
      4px !important;

    left:
      -27px !important;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   <= 399px
========================================================= */

@media (max-width: 399.98px) {

  .faq-timeline-card {
    padding:
      32px 10px;
  }


  .faq-timeline-title {
    font-size:
      clamp(34px, 12vw, 46px);
  }


  .faq-timeline-intro p {
    font-size:
      13.5px;
  }


  .faq-timeline-stage {
    padding-left:
      24px;
  }


  .faq-main-line {
    left:
      3px;
  }


  .faq-content {
    margin-left:
      8px;

    padding:
      13px 11px;
  }


  .faq-content h3 {
    font-size:
      16px;
  }


  .faq-content p {
    font-size:
      12.5px;
  }


  .faq-item-01 .faq-anchor,
  .faq-item-02 .faq-anchor,
  .faq-item-03 .faq-anchor,
  .faq-item-04 .faq-anchor,
  .faq-item-05 .faq-anchor,
  .faq-item-06 .faq-anchor {
    left:
      -24px !important;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .faq-title-arrows span {
    animation:
      none;
  }


  .faq-content {
    transition:
      none;
  }


  .faq-content:hover {
    transform:
      none;
  }

}


/* =========================================================
   FAQ LARGE SCREEN BOTTOM TEXT FIX
   KEEP AT ABSOLUTE BOTTOM OF FAQ CSS
========================================================= */


/* =========================================================
   1200px - 1399px
========================================================= */

@media (min-width: 1200px) and (max-width: 1399.98px) {

  .faq-timeline-card {
    min-height: 1240px !important;
    overflow: hidden !important;
  }

  .faq-timeline-stage {
    top: 270px !important;
    bottom: 85px !important;

    --line-clearance: 82px;
  }

}


/* =========================================================
   1400px - 1599px
========================================================= */

@media (min-width: 1400px) and (max-width: 1599.98px) {

  .faq-timeline-card {
    min-height: 1260px !important;
    overflow: hidden !important;
  }

  .faq-timeline-stage {
    top: 280px !important;
    bottom: 90px !important;

    --line-clearance: 84px;
  }

}


/* =========================================================
   1600px - 1799px
========================================================= */

@media (min-width: 1600px) and (max-width: 1799.98px) {

  .faq-timeline-card {
    min-height: 1280px !important;
    overflow: hidden !important;
  }

  .faq-timeline-stage {
    top: 285px !important;
    bottom: 95px !important;

    --line-clearance: 88px;
  }

}


/* =========================================================
   1800px AND ABOVE
========================================================= */

@media (min-width: 1800px) {

  .faq-timeline-card {
    min-height: 1300px !important;
    overflow: hidden !important;
  }

  .faq-timeline-stage {
    top: 295px !important;
    bottom: 100px !important;

    --line-clearance: 90px;
  }

}


/* =========================================================
   IMPORTANT:
   LET LOWER FAQ CARDS USE THEIR NATURAL CONTENT HEIGHT
========================================================= */

@media (min-width: 1200px) {

  .faq-item-04,
  .faq-item-05,
  .faq-item-06 {
    height: auto !important;
    min-height: 0 !important;
  }

  .faq-item-04 .faq-content,
  .faq-item-05 .faq-content,
  .faq-item-06 .faq-content {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

}



/* 000000000000000000000000000000000000000000000000 */


:root {
  /* Main Dark Green */
  --color-green: #123122;
  --color-green-dark: #0f2b1e;
  --color-green-soft: #36473b;

  /* Cream / Off White */
  --color-cream: #e9e3d7;
  --color-cream-light: #f3eee5;

  /* Beige / Taupe */
  --color-beige: #aea28c;
  --color-beige-light: #d4ccbe;
  --color-taupe: #bdb5a7;

  /* Neutral Text */
  --color-black: #171717;
  --color-text: #36473b;
  --color-gray: #62604f;
  --color-gray-dark: #878070;

  /* Borders */
  --border-green: rgba(18, 49, 34, 0.22);
  --border-light: rgba(18, 49, 34, 0.10);

  /* Backgrounds */
  --bg-main: #aea28c;
  --bg-section: #e9e3d7;
  --bg-card: #f3eee5;
  --bg-accent: #123122;

  /* Optional Transparent Versions */
  --green-soft: rgba(18, 49, 34, 0.10);
  --green-medium: rgba(18, 49, 34, 0.18);
  --beige-soft: rgba(174, 162, 140, 0.20);

  --transition: 250ms ease;
}

.contact-hero-section {
  background: var(--bg-main);
  padding: 48px 18px;
}

.contact-hero-box {
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
  background: var(--bg-section);
  border-radius: 22px;
  padding: 72px 48px 60px;
  overflow: hidden;
  min-height: 760px;

  background-image:
    linear-gradient(rgba(18, 49, 34, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 49, 34, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Decorative frame corners */
.frame-top-left,
.frame-top-right,
.frame-bottom-left,
.frame-bottom-right {
  position: absolute;
  pointer-events: none;
}

.frame-top-left {
  top: 22px;
  left: 22px;
  width: 220px;
  height: 52px;
  border-top: 2.2px solid var(--color-green-dark);
  border-left: 2.2px solid var(--color-green-dark);
  border-top-left-radius: 16px;
}

.frame-top-right {
  top: 22px;
  right: 22px;
  width: 220px;
  height: 52px;
  border-top: 2.2px solid var(--color-green-dark);
  border-right: 2.2px solid var(--color-green-dark);
  border-top-right-radius: 16px;
}

.frame-bottom-left {
  bottom: 22px;
  left: 22px;
  width: 300px;
  height: 58px;
  border-bottom: 2.2px solid var(--color-green-dark);
  border-left: 2.2px solid var(--color-green-dark);
  border-bottom-left-radius: 16px;
}

.frame-bottom-right {
  bottom: 22px;
  right: 22px;
  width: 300px;
  height: 58px;
  border-bottom: 2.2px solid var(--color-green-dark);
  border-right: 2.2px solid var(--color-green-dark);
  border-bottom-right-radius: 16px;
}

/* Brand */
.contact-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 40px;
}

.brand-line {
  width: 120px;
  height: 2px;
  background: var(--color-green-dark);
  opacity: 0.85;
}

.brand-text {
  color: var(--color-green-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Titles */
.contact-title-filled {
  margin: 0;
  color: var(--color-green-dark);
  font-size: clamp(56px, 8vw, 90px);
  line-height: 0.88;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.contact-title-outline {
  margin: 18px 0 0;
  color: transparent;
  -webkit-text-stroke: 1.8px var(--color-green-soft);
  font-size: clamp(38px, 5vw, 64px);
  line-height: 0.96;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.contact-mini-label {
  display: inline-block;
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 7px 12px;
  background: var(--bg-accent);
  color: var(--color-cream-light);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.contact-description {
  max-width: 560px;
  margin-bottom: 26px;
  color: var(--color-gray);
  font-size: 17px;
  line-height: 1.8;
}

/* Left info card */
.contact-details-card {
  background: rgba(243, 238, 229, 0.75);
  border: 1px solid var(--border-green);
  border-radius: 18px;
  padding: 28px 26px;
  box-shadow: 0 12px 32px rgba(18, 49, 34, 0.06);
}

.contact-info-heading {
  margin-bottom: 18px;
  color: var(--color-green-dark);
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.contact-info-list li {
  padding: 11px 0;
  border-bottom: 1px solid var(--border-light);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.7;
}

.contact-info-list li:last-child {
  border-bottom: none;
}

.info-label {
  display: block;
  color: var(--color-green-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.contact-info-list a {
  color: var(--color-text);
  text-decoration: none;
  transition: var(--transition);
}

.contact-info-list a:hover {
  color: var(--color-green-dark);
}

/* Right form card */
.contact-form-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-green);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 18px 36px rgba(18, 49, 34, 0.08);
}

.form-card-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 11px;
  background: rgba(85, 115, 103, 0.12);
  color: #46675c;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.form-card-heading h4 {
  margin-bottom: 10px;
  color: var(--color-green-dark);
  font-size: 34px;
  line-height: 1.05;
  font-weight: 900;
  text-transform: uppercase;
}

.form-card-heading p {
  margin-bottom: 24px;
  color: var(--color-gray);
  font-size: 16px;
  line-height: 1.7;
}

.form-label {
  color: var(--color-green-dark);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.custom-input {
  background: #fffdf8;
  border: 1px solid var(--border-green);
  border-radius: 12px;
  min-height: 54px;
  padding: 14px 16px;
  color: var(--color-text);
  box-shadow: none !important;
  transition: var(--transition);
}

.custom-input:focus {
  border-color: var(--color-green-dark);
  background: #fffefb;
}

.custom-textarea {
  min-height: 160px;
  resize: none;
}

.contact-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 14px 26px;
  border: none;
  border-radius: 12px;
  background: var(--color-green-dark);
  color: var(--color-cream-light);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: var(--transition);
}

.contact-submit-btn:hover {
  background: var(--color-green);
  color: var(--color-cream-light);
  transform: translateY(-2px);
}

/* Footer */
.contact-footer-meta {
  position: absolute;
  right: 46px;
  bottom: 34px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-footer-meta span:first-child {
  color: var(--color-green-dark);
  font-size: 15px;
  font-weight: 900;
}

.contact-footer-meta span:last-child {
  color: var(--color-gray-dark);
  font-size: 12px;
}

/* Responsive */
@media (max-width: 1199.98px) {
  .contact-hero-box {
    padding: 64px 34px 70px;
  }

  .brand-line {
    width: 90px;
  }
}

@media (max-width: 991.98px) {
  .contact-hero-box {
    min-height: auto;
    padding: 56px 24px 80px;
  }

  .contact-brand {
    margin-bottom: 26px;
  }

  .brand-line {
    width: 60px;
  }

  .contact-description {
    max-width: 100%;
  }

  .contact-footer-meta {
    position: static;
    margin-top: 28px;
    text-align: left;
  }
}

@media (max-width: 767.98px) {
  .contact-hero-section {
    padding: 18px 10px;
  }

  .contact-hero-box {
    border-radius: 18px;
    padding: 42px 18px 42px;
  }

  .frame-top-left,
  .frame-top-right,
  .frame-bottom-left,
  .frame-bottom-right {
    display: none;
  }

  .contact-title-outline {
    margin-top: 12px;
  }

  .form-card-heading h4 {
    font-size: 28px;
  }

  .contact-details-card,
  .contact-form-card {
    padding: 22px 18px;
  }
}

/* =========================================================
   BOOKING FORM
========================================================= */

.booking-form {
  position: relative;
  width: 100%;
}


/* =========================================================
   FIELD
========================================================= */

.booking-field {
  position: relative;
  width: 100%;
}


/* =========================================================
   INPUT / SELECT / TEXTAREA
========================================================= */

.booking-field__control {
  width: 100%;

  min-height: 58px;

  padding:
    21px 48px 8px 16px;

  border:
    1px solid var(--border-green);

  border-radius: 11px;

  background:
    rgba(255, 253, 248, 0.82);

  color:
    var(--color-green-dark);

  font-size: 15px;

  font-weight: 600;

  box-shadow: none !important;

  transition:
    border-color var(--transition),
    background var(--transition);
}


.booking-field__control:focus {
  border-color:
    var(--color-green-dark);

  background:
    #fffdf8;

  outline: 0;

  box-shadow:
    0 0 0 3px rgba(18, 49, 34, 0.08) !important;
}


/* =========================================================
   LABEL
========================================================= */

.booking-field label {
  position: absolute;

  top: 50%;
  left: 16px;

  z-index: 3;

  margin: 0;

  color:
    var(--color-gray);

  font-size: 14px;

  font-weight: 700;

  pointer-events: none;

  transform:
    translateY(-50%);

  transform-origin:
    left center;

  transition:
    all var(--transition);
}


/* Floating label */

.booking-field__control:focus~label,
.booking-field__control:not(:placeholder-shown)~label,
.booking-field select:valid~label {
  top: 8px;

  color:
    var(--color-green-dark);

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  transform: none;
}


/* =========================================================
   ICON
========================================================= */

.booking-field__icon {
  position: absolute;

  top: 50%;
  right: 16px;

  z-index: 3;

  color:
    var(--color-green-dark);

  font-size: 17px;

  pointer-events: none;

  transform:
    translateY(-50%);
}


/* =========================================================
   TEXTAREA
========================================================= */

.booking-field--textarea .booking-field__control {
  min-height: 130px;

  padding-top: 27px;

  resize: vertical;
}


.booking-field--textarea label {
  top: 24px;

  transform: none;
}


.booking-field--textarea .booking-field__control:focus~label,
.booking-field--textarea .booking-field__control:not(:placeholder-shown)~label {
  top: 8px;
}


.booking-field--textarea .booking-field__icon {
  top: 22px;

  transform: none;
}


/* =========================================================
   SELECT
========================================================= */

.booking-field--select .booking-field__control {
  padding-top: 19px;
  padding-right: 38px;
}


.booking-field--select label {
  top: 7px;

  color:
    var(--color-green-dark);

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  transform: none;
}


/* =========================================================
   DATE HEADING
========================================================= */

.booking-date-heading {
  margin-bottom: 10px;

  color:
    var(--color-green-dark);

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}


/* =========================================================
   SUBMIT BUTTON
========================================================= */

.booking-form__submit {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 11px;

  width: 100%;

  min-height: 58px;

  padding:
    14px 24px;

  border: 0;

  border-radius: 11px;

  background:
    var(--color-green-dark);

  color:
    var(--color-cream-light);

  font-size: 14px;

  font-weight: 900;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  cursor: pointer;

  transition:
    background var(--transition),
    transform var(--transition);
}


.booking-form__submit:hover {
  background:
    var(--color-green);

  transform:
    translateY(-2px);
}


.booking-form__submit-icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;
}


.booking-form__submit-arrow {
  transition:
    transform var(--transition);
}


.booking-form__submit:hover .booking-form__submit-arrow {
  transform:
    translateX(5px);
}


/* =========================================================
   NOTE
========================================================= */

.booking-form__note {
  margin:
    14px 0 0;

  color:
    var(--color-gray-dark);

  font-size: 11px;

  line-height: 1.5;

  text-align: center;
}


/* =========================================================
   MOBILE DATE FIELDS
========================================================= */

@media (max-width: 575.98px) {

  .booking-form .row.g-4 {
    --bs-gutter-y: 1rem;
  }

  .booking-field__control {
    min-height: 55px;
  }

}


/* 0000000000000000000000000000000000000000000000 */

/* =========================================================
   PEARLAND GARAGE DOORS
   SOLID COLOR FOOTER
========================================================= */

.pearland-footer {
  position: relative;

  width: 100%;

  margin: 0;

  padding: 0;

  background: #0F2B1E;

  color: #f3eee5;

  overflow: hidden;
}


/* =========================================================
   INNER
   NO CARD / NO SQUARE BACKGROUND
========================================================= */

.pearland-footer-inner {
  width: 100%;

  max-width: none;

  margin: 0;

  padding:
    65px 25px 0;

  background: transparent;

  text-align: center;
}


/* =========================================================
   LOGO AREA
========================================================= */

.footer-logo-area {
  width: 100%;

  margin: 0;

  padding: 0;

  background: transparent;

  text-align: center;
}


.footer-logo-link {
  display: inline-block;

  margin: 0;

  padding: 0;

  border: 0;

  background: transparent;

  text-decoration: none;
}


/* =========================================================
   LOGO
========================================================= */

.footer-logo {
  display: block;

  width: auto;

  max-width: 350px;

  height: auto;

  margin:
    0 auto;

  padding: 0;

  border: 0;

  background: transparent;

  box-shadow: none;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.footer-description {
  width: 100%;

  max-width: 1050px;

  margin:
    30px auto 0;

  padding: 0;

  color:
    rgba(243, 238, 229, 0.78);

  font-size: 17px;

  font-weight: 400;

  line-height: 1.85;

  text-align: center;
}


.footer-description strong {
  color: #f3eee5;

  font-weight: 800;
}


/* =========================================================
   PHONE AREA
   NO BOX / NO BACKGROUND
========================================================= */

.footer-phone-area {
  width: 100%;

  margin-top: 38px;

  padding: 0;

  background: transparent;

  text-align: center;
}


/* SMALL LABEL */

.footer-phone-label {
  display: block;

  margin-bottom: 11px;

  color: #d4ccbe;

  font-size: 11px;

  font-weight: 900;

  line-height: 1.2;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}


/* =========================================================
   PHONE NUMBER
========================================================= */

.footer-phone {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 11px;

  margin: 0;

  padding: 0;

  border: 0;

  background: transparent;

  color: #f3eee5;

  font-size:
    clamp(25px,
      3vw,
      36px);

  font-weight: 900;

  line-height: 1.2;

  text-decoration: none;

  transition:
    color 250ms ease,
    transform 250ms ease;
}


.footer-phone i {
  color: #d4ccbe;

  font-size: 22px;
}


.footer-phone:hover {
  color: #ffffff;

  transform:
    translateY(-2px);
}


/* =========================================================
   MAP
   SMALLER + CENTERED
========================================================= */

.footer-map-wrap {
  position: relative;

  width:
    calc(100% - 40px);

  max-width: 700px;

  height: 220px;

  margin:
    40px auto 0;

  padding: 0;

  overflow: hidden;

  border: 0;

  border-radius: 0;

  background: transparent;

  box-shadow: none;
}


.footer-map-wrap iframe {
  display: block;

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

  border: 0;

  border-radius: 0;

  box-shadow: none;
}


/* =========================================================
   SOCIAL AREA
   NO BOX
========================================================= */

.footer-social-area {
  width: 100%;

  margin-top: 45px;

  padding: 0;

  border: 0;

  background: transparent;

  text-align: center;
}


/* =========================================================
   SOCIAL HEADING
========================================================= */

.footer-social-title {
  display: block;

  margin-bottom: 22px;

  color: #d4ccbe;

  font-size: 11px;

  font-weight: 900;

  line-height: 1.2;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}


/* =========================================================
   SOCIAL LINKS
========================================================= */

.footer-social-links {
  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap:
    18px 34px;

  width: 100%;

  margin: 0;

  padding: 0;

  background: transparent;
}


/* =========================================================
   INDIVIDUAL SOCIAL LINK
   COMPLETELY REMOVE SQUARE BACKGROUND
========================================================= */

.footer-social-links a {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  margin: 0;

  padding: 0;

  border: 0 !important;

  border-radius: 0 !important;

  outline: 0;

  background: transparent !important;

  box-shadow: none !important;

  color:
    rgba(243, 238, 229, 0.76);

  font-size: 14px;

  font-weight: 700;

  line-height: 1.2;

  text-decoration: none;

  transition:
    color 250ms ease,
    transform 250ms ease;
}


.footer-social-links a i {
  color: #d4ccbe;

  font-size: 19px;

  transition:
    color 250ms ease;
}


.footer-social-links a:hover {
  border: 0;

  background: transparent !important;

  color: #ffffff;

  transform:
    translateY(-3px);
}


.footer-social-links a:hover i {
  color: #ffffff;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.footer-copyright {
  width: 100%;

  margin-top: 42px;

  padding:
    22px 20px;

  border-top:
    1px solid rgba(233, 227, 215, 0.12);

  background: transparent;

  text-align: center;
}


.footer-copyright p {
  margin: 0;

  padding: 0;

  color:
    rgba(243, 238, 229, 0.55);

  font-size: 13px;

  font-weight: 400;

  line-height: 1.6;

  text-align: center;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .pearland-footer-inner {
    padding:
      55px 20px 0;
  }


  .footer-description {
    max-width: 850px;

    font-size: 16px;
  }


  .footer-map-wrap {
    max-width: 620px;

    height: 205px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

  .pearland-footer-inner {
    padding:
      45px 16px 0;
  }


  .footer-logo {
    max-width: 285px;
  }


  .footer-description {
    margin-top: 24px;

    font-size: 15px;

    line-height: 1.75;
  }


  .footer-phone-area {
    margin-top: 30px;
  }


  .footer-phone {
    font-size: 25px;
  }


  .footer-phone i {
    font-size: 19px;
  }


  .footer-map-wrap {
    width: 100%;

    max-width: 520px;

    height: 185px;

    margin-top: 32px;
  }


  .footer-social-area {
    margin-top: 35px;
  }


  .footer-social-links {
    gap:
      17px 24px;
  }


  .footer-copyright {
    margin-top: 34px;

    padding:
      20px 10px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .footer-logo {
    max-width: 250px;
  }


  .footer-map-wrap {
    height: 170px;
  }


  .footer-social-links {
    flex-direction: column;

    gap: 16px;
  }

}


/* before and after */

/* =========================================================
   BEFORE & AFTER SECTION
========================================================= */

.before-after-section {
  position: relative;
  width: 100%;
  padding: 70px 0;

  background:
    var(--bg-section, #e9e3d7);

  font-family:
    "Montserrat",
    Arial,
    sans-serif;
}


/* =========================================================
   CONTAINER
========================================================= */

.before-after-container {
  width: 100%;
  max-width: 100%;

  padding: 0 4%;
}


/* =========================================================
   MAIN CARD
========================================================= */

.before-after-card {
  position: relative;

  width: 100%;

  padding: 70px;

  overflow: hidden;

  background:
    var(--color-cream-light, #f3eee5);

  border:
    1px solid rgba(18, 49, 34, 0.12);

  isolation: isolate;
}


/* =========================================================
   GRID
========================================================= */

.before-after-grid {
  position: absolute;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(18, 49, 34, 0.04) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(18, 49, 34, 0.04) 1px,
      transparent 1px);

  background-size:
    42px 42px;
}


/* =========================================================
   HEADER
========================================================= */

.before-after-header {
  max-width: 950px;

  margin:
    0 auto 55px;

  text-align:
    center;
}


/* Brand */

.before-after-brand {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 15px;

  margin-bottom:
    20px;

  color:
    #0f2b1e;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


.before-after-brand-line {
  width: 55px;
  height: 1px;

  background:
    #aea28c;
}


/* Title */

.before-after-title {
  margin:
    0 0 20px;

  color:
    #0f2b1e;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(44px, 5vw, 76px);

  font-weight:
    900;

  line-height:
    0.95;

  letter-spacing:
    -0.035em;

  text-transform:
    uppercase;
}


.before-after-title span {
  display: block;

  color:
    #aea28c;

  font-style:
    italic;
}


/* Intro */

.before-after-intro {
  max-width:
    720px;

  margin:
    0 auto;

  color:
    #62604f;

  font-size:
    17px;

  line-height:
    1.7;
}


/* =========================================================
   IMAGE CARD
========================================================= */

.before-after-item {
  height:
    100%;

  background:
    #e9e3d7;

  border:
    1px solid rgba(18, 49, 34, 0.12);

  transition:
    transform 300ms ease,
    box-shadow 300ms ease;
}


.before-after-item:hover {
  transform:
    translateY(-6px);

  box-shadow:
    0 18px 40px rgba(15, 43, 30, 0.10);
}


/* =========================================================
   IMAGE
========================================================= */

.before-after-image-wrap {
  position:
    relative;

  width:
    100%;

  aspect-ratio:
    1 / 1;

  overflow:
    hidden;

  background:
    #d4ccbe;
}


.before-after-image-wrap img {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform 600ms ease;
}


.before-after-item:hover .before-after-image-wrap img {
  transform:
    scale(1.035);
}


/* =========================================================
   BEFORE / AFTER LABEL
========================================================= */

.before-after-label {
  position:
    absolute;

  top:
    22px;

  left:
    22px;

  z-index:
    3;

  min-width:
    100px;

  padding:
    11px 18px;

  text-align:
    center;

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.12);
}


.before-label {
  color:
    #f3eee5;

  background:
    #36473b;
}


.after-label {
  color:
    #f3eee5;

  background:
    #0f2b1e;
}


/* =========================================================
   CONTENT
========================================================= */

.before-after-content {
  display:
    flex;

  align-items:
    flex-start;

  gap:
    20px;

  padding:
    28px 30px 32px;
}


.before-after-number {
  flex:
    0 0 auto;

  color:
    #aea28c;

  font-family:
    "Cinzel",
    Georgia,
    serif;

  font-size:
    18px;

  font-weight:
    900;
}


.before-after-content h3 {
  margin:
    0 0 10px;

  color:
    #0f2b1e;

  font-size:
    21px;

  font-weight:
    900;

  line-height:
    1.25;

  text-transform:
    uppercase;
}


.before-after-content p {
  margin:
    0;

  color:
    #62604f;

  font-size:
    15px;

  line-height:
    1.7;
}


/* =========================================================
   FOOTER CTA
========================================================= */

.before-after-footer {
  display:
    flex;

  align-items:
    center;

  gap:
    18px;

  margin-top:
    45px;

  color:
    #0f2b1e;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.before-after-footer-line {
  flex:
    1;

  height:
    1px;

  background:
    #aea28c;
}


.before-after-footer a {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  color:
    #f3eee5;

  padding:
    14px 20px;

  background:
    #0f2b1e;

  text-decoration:
    none;

  transition:
    transform 250ms ease,
    background 250ms ease;
}


.before-after-footer a:hover {
  color:
    #f3eee5;

  background:
    #123122;

  transform:
    translateY(-2px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .before-after-section {
    padding:
      50px 0;
  }


  .before-after-container {
    padding:
      0 25px;
  }


  .before-after-card {
    padding:
      55px 35px;
  }


  .before-after-header {
    margin-bottom:
      40px;
  }


  .before-after-row {
    --bs-gutter-y:
      28px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

  .before-after-section {
    padding:
      30px 0;
  }


  .before-after-container {
    padding:
      0 14px;
  }


  .before-after-card {
    padding:
      38px 16px;
  }


  .before-after-brand {
    gap:
      9px;

    font-size:
      9px;

    letter-spacing:
      0.12em;
  }


  .before-after-brand-line {
    width:
      25px;
  }


  .before-after-title {
    font-size:
      clamp(36px, 11vw, 50px);
  }


  .before-after-intro {
    font-size:
      14px;
  }


  .before-after-label {
    top:
      14px;

    left:
      14px;

    min-width:
      80px;

    padding:
      9px 13px;

    font-size:
      9px;
  }


  .before-after-content {
    gap:
      14px;

    padding:
      22px 18px 24px;
  }


  .before-after-content h3 {
    font-size:
      18px;
  }


  .before-after-content p {
    font-size:
      14px;
  }


  .before-after-footer {
    flex-wrap:
      wrap;

    margin-top:
      32px;
  }


  .before-after-footer-line {
    min-width:
      40px;
  }


  .before-after-footer a {
    width:
      100%;

    justify-content:
      center;
  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .before-after-item,
  .before-after-image-wrap img,
  .before-after-footer a {
    transition:
      none;
  }

}

/* 000000000000000000000000000000000000000000000000 */

/* =========================================================
   PEARLAND GARAGE DOORS
   SERVICE LOCATIONS SECTION
========================================================= */

.service-locations-section {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 70px 0;
  overflow: hidden;

  background:
    var(--bg-section, #e9e3d7);

  font-family:
    "Montserrat",
    Arial,
    Helvetica,
    sans-serif;
}


/* =========================================================
   CONTAINER
========================================================= */

.service-locations-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 4% !important;
}


/* =========================================================
   MAIN CARD
========================================================= */

.service-locations-card {
  position: relative;
  width: 100%;
  max-width: 1550px;
  margin: 0 auto;

  padding:
    70px 6% 58px;

  overflow: hidden;

  background:
    var(--bg-card, #f3eee5);

  border:
    1px solid var(--border-green, rgba(18, 49, 34, 0.22));

  box-shadow:
    0 18px 50px rgba(15, 43, 30, 0.05);

  isolation: isolate;
}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.service-locations-grid {
  position: absolute;
  inset: 0;
  z-index: -1;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(18, 49, 34, 0.04) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(18, 49, 34, 0.04) 1px,
      transparent 1px);

  background-size:
    42px 42px;
}


/* =========================================================
   HEADER
========================================================= */

.service-locations-header {
  display: grid;

  grid-template-columns:
    minmax(0, 47%) minmax(0, 53%);

  align-items: end;

  gap: 70px;

  width: 100%;
  max-width: 1320px;

  margin:
    0 auto 55px;
}


/* =========================================================
   LEFT HEADING AREA
========================================================= */

.service-locations-heading {
  position: relative;
  width: 100%;
}


/* =========================================================
   BRAND
========================================================= */

.service-locations-brand {
  display: flex;
  align-items: center;
  gap: 14px;

  width: fit-content;

  margin-bottom: 16px;

  color:
    var(--color-green-dark, #0f2b1e);

  font-family:
    "Cinzel",
    Georgia,
    serif;

  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;

  letter-spacing: 0.18em;
  text-transform: uppercase;
}


.service-locations-brand-line {
  display: block;

  width: 45px;
  height: 1px;

  flex: 0 0 45px;

  background:
    var(--color-beige, #aea28c);
}


/* =========================================================
   TITLE
========================================================= */

.service-locations-title {
  margin: 0;

  color:
    var(--color-green-dark, #0f2b1e);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(52px, 5vw, 78px);

  font-weight: 900;
  line-height: 0.92;

  letter-spacing: -0.035em;

  text-transform: uppercase;
}


.service-locations-title span {
  display: block;

  color:
    var(--color-beige, #aea28c);

  font-style: italic;
}


/* =========================================================
   RIGHT INTRO
========================================================= */

.service-locations-intro {
  display: flex;
  align-items: flex-start;
  gap: 20px;

  width: 100%;

  padding-bottom: 4px;
}


.service-locations-intro-line {
  display: block;

  width: 55px;
  height: 2px;

  flex: 0 0 55px;

  margin-top: 12px;

  background:
    var(--color-green-dark, #0f2b1e);
}


.service-locations-intro-content {
  width: 100%;
  max-width: 620px;
}


.service-locations-intro-content p {
  width: 100%;
  max-width: 600px;

  margin: 0;

  color:
    var(--color-gray, #62604f);

  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
}


/* =========================================================
   CTA BUTTON WRAPPER
========================================================= */

.service-locations-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 12px;

  margin-top: 24px;
}


/* =========================================================
   ANIMATED CALL BUTTON
========================================================= */

.service-locations-call {
  position: relative;

  display: inline-flex;
  align-items: center;

  gap: 13px;

  min-height: 58px;

  padding:
    8px 16px 8px 9px;

  overflow: hidden;

  color:
    var(--color-cream-light, #f3eee5);

  background:
    var(--color-green-dark, #0f2b1e);

  border:
    1px solid var(--color-green-dark, #0f2b1e);

  text-decoration: none;

  box-shadow:
    0 10px 24px rgba(15, 43, 30, 0.10);

  transition:
    transform 250ms ease,
    background 250ms ease,
    border-color 250ms ease,
    box-shadow 250ms ease;
}


/* animated shine */

.service-locations-call::before {
  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 70%;
  height: 100%;

  pointer-events: none;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(243, 238, 229, 0.16),
      transparent);

  transform:
    skewX(-20deg);

  animation:
    locationsCallSweep 3.2s ease-in-out infinite;
}


@keyframes locationsCallSweep {

  0%,
  55% {
    left: -120%;
  }

  80%,
  100% {
    left: 140%;
  }
}


.service-locations-call:hover {
  color:
    var(--color-cream-light, #f3eee5);

  background:
    var(--color-green, #123122);

  border-color:
    var(--color-green, #123122);

  transform:
    translateY(-3px);

  box-shadow:
    0 16px 32px rgba(15, 43, 30, 0.16);
}


/* =========================================================
   CALL ICON
========================================================= */

.service-locations-call-icon {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  color:
    var(--color-green-dark, #0f2b1e);

  background:
    var(--color-beige-light, #d4ccbe);

  border-radius: 50%;

  animation:
    locationsPhonePulse 2s ease-in-out infinite;
}


.service-locations-call-icon svg {
  width: 18px;
  height: 18px;
}


@keyframes locationsPhonePulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}


/* =========================================================
   CALL TEXT
========================================================= */

.service-locations-call-copy {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;

  line-height: 1.1;
}


.service-locations-call-copy small {
  display: block;

  margin-bottom: 4px;

  color:
    var(--color-beige-light, #d4ccbe);

  font-size: 8px;
  font-weight: 800;

  line-height: 1;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


.service-locations-call-copy strong {
  display: block;

  color:
    var(--color-cream-light, #f3eee5);

  font-size: 17px;
  font-weight: 900;

  line-height: 1.1;

  white-space: nowrap;
}


/* =========================================================
   CALL ARROW
========================================================= */

.service-locations-call-arrow {
  position: relative;
  z-index: 2;

  margin-left: 7px;

  color:
    var(--color-cream-light, #f3eee5);

  font-size: 19px;
  line-height: 1;

  transition:
    transform 250ms ease;
}


.service-locations-call:hover .service-locations-call-arrow {
  transform:
    translateX(5px);
}


/* =========================================================
   FREE ESTIMATE BUTTON
========================================================= */

.service-locations-estimate {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 11px;

  min-height: 58px;

  padding:
    0 20px;

  overflow: hidden;

  color:
    var(--color-green-dark, #0f2b1e);

  background:
    var(--color-beige-light, #d4ccbe);

  border:
    1px solid var(--border-green, rgba(18, 49, 34, 0.22));

  font-size: 11px;
  font-weight: 900;

  line-height: 1.2;

  letter-spacing: 0.10em;

  text-transform: uppercase;

  text-decoration: none;

  transition:
    color 250ms ease,
    background 250ms ease,
    transform 250ms ease,
    box-shadow 250ms ease;
}


.service-locations-estimate:hover {
  color:
    var(--color-cream-light, #f3eee5);

  background:
    var(--color-green-dark, #0f2b1e);

  transform:
    translateY(-3px);

  box-shadow:
    0 14px 28px rgba(15, 43, 30, 0.13);
}


.service-locations-estimate-arrow {
  font-size: 17px;
  line-height: 1;

  transition:
    transform 250ms ease;
}


.service-locations-estimate:hover .service-locations-estimate-arrow {
  transform:
    translate(3px, -3px);
}


/* =========================================================
   LOCATION GRID
========================================================= */

.service-locations-list {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 14px;

  width: 100%;
  max-width: 1320px;

  margin: 0 auto;
}


/* =========================================================
   LOCATION ITEM
========================================================= */

.service-location-item {
  position: relative;

  display: grid;

  grid-template-columns:
    42px minmax(0, 1fr) 38px;

  align-items: center;

  gap: 13px;

  min-height: 78px;

  padding:
    13px 14px;

  overflow: hidden;

  color:
    var(--color-green-dark, #0f2b1e);

  background:
    var(--color-cream, #e9e3d7);

  border:
    1px solid var(--border-light, rgba(18, 49, 34, 0.10));

  text-decoration: none;

  box-shadow:
    0 6px 18px rgba(15, 43, 30, 0.025);

  transition:
    color 280ms ease,
    background 280ms ease,
    border-color 280ms ease,
    transform 280ms ease,
    box-shadow 280ms ease;
}


/* left animated accent */

.service-location-item::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: 3px;

  background:
    var(--color-beige-light, #d4ccbe);

  transform:
    scaleY(0);

  transform-origin:
    bottom;

  transition:
    transform 280ms ease;
}


.service-location-item:hover {
  color:
    var(--color-cream-light, #f3eee5);

  background:
    var(--color-green-dark, #0f2b1e);

  border-color:
    var(--color-green-dark, #0f2b1e);

  transform:
    translateY(-4px);

  box-shadow:
    0 15px 30px rgba(15, 43, 30, 0.12);
}


.service-location-item:hover::before {
  transform:
    scaleY(1);
}


/* =========================================================
   LOCATION NUMBER
========================================================= */

.service-location-number {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  color:
    var(--color-green-dark, #0f2b1e);

  background:
    var(--color-beige-light, #d4ccbe);

  border-radius: 50%;

  font-family:
    "Cinzel",
    Georgia,
    serif;

  font-size: 10px;
  font-weight: 900;

  line-height: 1;

  transition:
    background 280ms ease,
    transform 280ms ease;
}


.service-location-item:hover .service-location-number {
  background:
    var(--color-cream, #e9e3d7);

  transform:
    scale(1.08);
}


/* =========================================================
   LOCATION NAME
========================================================= */

.service-location-name {
  display: block;

  min-width: 0;

  color: inherit;

  font-size:
    clamp(15px, 1.2vw, 18px);

  font-weight: 900;

  line-height: 1.2;

  letter-spacing: -0.01em;

  text-transform: uppercase;

  overflow-wrap: anywhere;
}


/* =========================================================
   LOCATION ARROW
========================================================= */

.service-location-arrow {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  margin-left: auto;

  color:
    inherit;

  border:
    1px solid var(--border-green, rgba(18, 49, 34, 0.22));

  border-radius: 50%;

  font-size: 16px;
  line-height: 1;

  transition:
    color 280ms ease,
    background 280ms ease,
    border-color 280ms ease,
    transform 280ms ease;
}


.service-location-item:hover .service-location-arrow {
  color:
    var(--color-green-dark, #0f2b1e);

  background:
    var(--color-beige-light, #d4ccbe);

  border-color:
    var(--color-beige-light, #d4ccbe);

  transform:
    rotate(45deg);
}


/* =========================================================
   BOTTOM FOOTER
========================================================= */

.service-locations-footer {
  display: flex;

  align-items: center;

  gap: 18px;

  width: 100%;
  max-width: 1320px;

  margin:
    45px auto 0;

  color:
    var(--color-green-dark, #0f2b1e);

  font-size: 10px;
  font-weight: 900;

  line-height: 1.2;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}


.service-locations-footer-line {
  flex: 1;

  min-width: 40px;

  height: 1px;

  background:
    var(--color-beige, #aea28c);
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.service-locations-cta {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  padding:
    14px 19px;

  color:
    var(--color-cream-light, #f3eee5);

  background:
    var(--color-green-dark, #0f2b1e);

  border:
    1px solid var(--color-green-dark, #0f2b1e);

  text-decoration: none;

  white-space: nowrap;

  transition:
    background 250ms ease,
    transform 250ms ease,
    box-shadow 250ms ease;
}


.service-locations-cta:hover {
  color:
    var(--color-cream-light, #f3eee5);

  background:
    var(--color-green, #123122);

  transform:
    translateY(-2px);

  box-shadow:
    0 12px 25px rgba(15, 43, 30, 0.14);
}


/* =========================================================
   FOCUS ACCESSIBILITY
========================================================= */

.service-location-item:focus-visible,
.service-locations-call:focus-visible,
.service-locations-estimate:focus-visible,
.service-locations-cta:focus-visible {
  outline:
    3px solid var(--color-beige, #aea28c);

  outline-offset: 4px;
}


/* =========================================================
   XXL
   1600PX AND ABOVE
========================================================= */

@media (min-width: 1600px) {

  .service-locations-section {
    padding:
      80px 0;
  }


  .service-locations-card {
    max-width:
      1650px;

    padding:
      80px 7% 65px;
  }


  .service-locations-header,
  .service-locations-list,
  .service-locations-footer {
    max-width:
      1400px;
  }


  .service-locations-header {
    gap:
      85px;
  }


  .service-locations-title {
    font-size:
      clamp(62px, 4.7vw, 84px);
  }


  .service-locations-intro-content p {
    font-size:
      17px;
  }


  .service-location-item {
    min-height:
      84px;

    padding:
      15px 16px;
  }


  .service-location-name {
    font-size:
      18px;
  }

}


/* =========================================================
   XL
   1200PX - 1599PX
========================================================= */

@media (min-width: 1200px) and (max-width: 1599.98px) {

  .service-locations-section {
    padding:
      60px 0;
  }


  .service-locations-container {
    padding:
      0 3.5% !important;
  }


  .service-locations-card {
    padding:
      65px 5% 55px;
  }


  .service-locations-header {
    gap:
      55px;

    margin-bottom:
      48px;
  }


  .service-locations-title {
    font-size:
      clamp(52px, 4.8vw, 72px);
  }


  .service-locations-intro-content p {
    font-size:
      15.5px;
  }


  .service-locations-list {
    gap:
      13px;
  }

}


/* =========================================================
   LG
   992PX - 1199PX
========================================================= */

@media (min-width: 992px) and (max-width: 1199.98px) {

  .service-locations-section {
    padding:
      55px 0;
  }


  .service-locations-container {
    padding:
      0 30px !important;
  }


  .service-locations-card {
    padding:
      55px 40px 50px;
  }


  .service-locations-header {
    grid-template-columns:
      minmax(0, 44%) minmax(0, 56%);

    gap:
      38px;

    margin-bottom:
      42px;
  }


  .service-locations-title {
    font-size:
      clamp(48px, 5.4vw, 64px);
  }


  .service-locations-intro-line {
    width:
      42px;

    flex-basis:
      42px;
  }


  .service-locations-intro-content p {
    font-size:
      14.5px;
  }


  .service-locations-actions {
    gap:
      10px;

    margin-top:
      20px;
  }


  .service-locations-call {
    min-height:
      54px;
  }


  .service-locations-estimate {
    min-height:
      54px;

    padding:
      0 15px;

    font-size:
      9.5px;
  }


  .service-locations-list {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));

    gap:
      12px;
  }


  .service-location-item {
    grid-template-columns:
      36px minmax(0, 1fr) 30px;

    gap:
      8px;

    min-height:
      72px;

    padding:
      11px 10px;
  }


  .service-location-number {
    width:
      33px;

    height:
      33px;
  }


  .service-location-name {
    font-size:
      14px;
  }


  .service-location-arrow {
    width:
      29px;

    height:
      29px;

    font-size:
      14px;
  }

}


/* =========================================================
   MD
   768PX - 991PX
========================================================= */

@media (min-width: 768px) and (max-width: 991.98px) {

  .service-locations-section {
    padding:
      45px 0;
  }


  .service-locations-container {
    padding:
      0 25px !important;
  }


  .service-locations-card {
    padding:
      50px 30px;
  }


  .service-locations-header {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap:
      24px;

    margin-bottom:
      40px;

    text-align: center;
  }


  .service-locations-heading {
    text-align: center;
  }


  .service-locations-brand {
    justify-content: center;

    margin:
      0 auto 15px;
  }


  .service-locations-title {
    font-size:
      clamp(48px, 8vw, 66px);

    text-align: center;
  }


  .service-locations-intro {
    justify-content: center;

    max-width:
      680px;

    margin:
      0 auto;
  }


  .service-locations-intro-line {
    display:
      none;
  }


  .service-locations-intro-content {
    max-width:
      660px;

    margin:
      0 auto;
  }


  .service-locations-intro-content p {
    max-width:
      620px;

    margin:
      0 auto;

    font-size:
      15px;

    text-align: center;
  }


  .service-locations-actions {
    justify-content: center;
  }


  .service-locations-list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      13px;
  }


  .service-location-item {
    min-height:
      72px;
  }


  .service-locations-footer {
    margin-top:
      38px;
  }

}


/* =========================================================
   SM
   576PX - 767PX
========================================================= */

@media (min-width: 576px) and (max-width: 767.98px) {

  .service-locations-section {
    padding:
      38px 0;
  }


  .service-locations-container {
    padding:
      0 18px !important;
  }


  .service-locations-card {
    padding:
      44px 22px 40px;
  }


  .service-locations-header {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap:
      20px;

    margin-bottom:
      35px;

    text-align: center;
  }


  .service-locations-heading {
    text-align: center;
  }


  .service-locations-brand {
    justify-content: center;

    margin:
      0 auto 14px;

    font-size:
      8.5px;
  }


  .service-locations-title {
    font-size:
      clamp(42px, 9vw, 58px);

    text-align: center;
  }


  .service-locations-intro {
    justify-content:
      center;
  }


  .service-locations-intro-line {
    display:
      none;
  }


  .service-locations-intro-content {
    max-width:
      560px;

    margin:
      0 auto;
  }


  .service-locations-intro-content p {
    margin:
      0 auto;

    font-size:
      14px;

    text-align:
      center;
  }


  .service-locations-actions {
    justify-content:
      center;

    margin-top:
      18px;
  }


  .service-locations-call {
    min-height:
      54px;
  }


  .service-locations-call-icon {
    width:
      36px;

    height:
      36px;

    flex-basis:
      36px;
  }


  .service-locations-call-copy strong {
    font-size:
      15px;
  }


  .service-locations-estimate {
    min-height:
      54px;

    font-size:
      9.5px;
  }


  .service-locations-list {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      11px;
  }


  .service-location-item {
    grid-template-columns:
      33px minmax(0, 1fr) 28px;

    gap:
      8px;

    min-height:
      66px;

    padding:
      10px;
  }


  .service-location-number {
    width:
      30px;

    height:
      30px;

    font-size:
      8.5px;
  }


  .service-location-name {
    font-size:
      13.5px;
  }


  .service-location-arrow {
    width:
      27px;

    height:
      27px;

    font-size:
      13px;
  }


  .service-locations-footer {
    margin-top:
      32px;

    font-size:
      9px;
  }

}


/* =========================================================
   XS
   0PX - 575PX
========================================================= */

@media (max-width: 575.98px) {

  .service-locations-section {
    padding:
      28px 0;
  }


  .service-locations-container {
    padding:
      0 13px !important;
  }


  .service-locations-card {
    padding:
      38px 15px 34px;
  }


  .service-locations-header {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap:
      18px;

    margin-bottom:
      30px;

    text-align: center;
  }


  .service-locations-heading {
    width: 100%;

    text-align: center;
  }


  .service-locations-brand {
    justify-content: center;

    gap:
      8px;

    margin:
      0 auto 12px;

    font-size:
      8px;

    letter-spacing:
      0.11em;
  }


  .service-locations-brand-line {
    width:
      25px;

    flex-basis:
      25px;
  }


  .service-locations-title {
    font-size:
      clamp(35px, 10vw, 48px);

    line-height:
      0.95;

    text-align: center;
  }


  .service-locations-intro {
    display: block;

    width: 100%;
  }


  .service-locations-intro-line {
    display:
      none;
  }


  .service-locations-intro-content {
    width:
      100%;

    max-width:
      100%;

    margin:
      0 auto;
  }


  .service-locations-intro-content p {
    max-width:
      100%;

    margin:
      0 auto;

    font-size:
      13.5px;

    line-height:
      1.65;

    text-align:
      center;
  }


  /* ===============================================
     MOBILE CTA STACK
  ================================================ */

  .service-locations-actions {
    display: grid;

    grid-template-columns:
      1fr;

    width:
      100%;

    gap:
      10px;

    margin-top:
      20px;
  }


  .service-locations-call,
  .service-locations-estimate {
    width:
      100%;
  }


  .service-locations-call {
    justify-content:
      flex-start;

    min-height:
      56px;

    padding:
      8px 13px 8px 8px;
  }


  .service-locations-call-icon {
    width:
      38px;

    height:
      38px;

    flex:
      0 0 38px;
  }


  .service-locations-call-copy small {
    font-size:
      7px;
  }


  .service-locations-call-copy strong {
    font-size:
      15px;
  }


  .service-locations-call-arrow {
    margin-left:
      auto;
  }


  .service-locations-estimate {
    min-height:
      52px;

    justify-content:
      center;

    font-size:
      10px;
  }


  /* ===============================================
     LOCATION LIST
  ================================================ */

  .service-locations-list {
    grid-template-columns:
      1fr;

    gap:
      10px;
  }


  .service-location-item {
    grid-template-columns:
      38px minmax(0, 1fr) 32px;

    gap:
      10px;

    min-height:
      62px;

    padding:
      10px 11px;
  }


  .service-location-number {
    width:
      34px;

    height:
      34px;

    font-size:
      9px;
  }


  .service-location-name {
    font-size:
      14.5px;
  }


  .service-location-arrow {
    width:
      30px;

    height:
      30px;

    font-size:
      14px;
  }


  /* ===============================================
     FOOTER
  ================================================ */

  .service-locations-footer {
    flex-wrap:
      wrap;

    gap:
      12px;

    margin-top:
      30px;

    font-size:
      8.5px;
  }


  .service-locations-footer-line {
    min-width:
      35px;
  }


  .service-locations-cta {
    width:
      100%;

    justify-content:
      center;

    padding:
      13px 16px;
  }

}


/* =========================================================
   VERY SMALL MOBILE
   <= 380PX
========================================================= */

@media (max-width: 380px) {

  .service-locations-section {
    padding:
      24px 0;
  }


  .service-locations-container {
    padding:
      0 9px !important;
  }


  .service-locations-card {
    padding:
      32px 10px 30px;
  }


  .service-locations-brand {
    font-size:
      7.5px;
  }


  .service-locations-title {
    font-size:
      clamp(32px, 10vw, 42px);
  }


  .service-locations-intro-content p {
    font-size:
      13px;
  }


  .service-locations-call {
    gap:
      9px;
  }


  .service-locations-call-icon {
    width:
      34px;

    height:
      34px;

    flex-basis:
      34px;
  }


  .service-locations-call-copy strong {
    font-size:
      14px;
  }


  .service-location-item {
    grid-template-columns:
      33px minmax(0, 1fr) 27px;

    gap:
      7px;

    min-height:
      58px;

    padding:
      9px;
  }


  .service-location-number {
    width:
      30px;

    height:
      30px;

    font-size:
      8px;
  }


  .service-location-name {
    font-size:
      13.5px;
  }


  .service-location-arrow {
    width:
      26px;

    height:
      26px;

    font-size:
      12px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .service-locations-call::before,
  .service-locations-call-icon {
    animation:
      none !important;
  }


  .service-location-item,
  .service-location-item::before,
  .service-location-number,
  .service-location-arrow,
  .service-locations-call,
  .service-locations-call-arrow,
  .service-locations-estimate,
  .service-locations-estimate-arrow,
  .service-locations-cta {
    transition:
      none !important;
  }


  .service-location-item:hover,
  .service-locations-call:hover,
  .service-locations-estimate:hover,
  .service-locations-cta:hover {
    transform:
      none !important;
  }

}

/* =========================================================
   SERVICE LOCATIONS
   SMALLER TITLE + BIGGER CTA BUTTONS
========================================================= */

/* Smaller section title */
.service-locations-title {
  font-size: clamp(42px, 4vw, 64px) !important;
  line-height: 0.96 !important;
}


/* Bigger Call button */
.service-locations-call {
  min-height: 68px !important;
  padding: 10px 22px 10px 11px !important;
  gap: 15px !important;
}


/* Bigger phone icon */
.service-locations-call-icon {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
}

.service-locations-call-icon svg {
  width: 21px !important;
  height: 21px !important;
}


/* Bigger Call text */
.service-locations-call-copy small {
  font-size: 9px !important;
}

.service-locations-call-copy strong {
  font-size: 20px !important;
}


/* Bigger Call arrow */
.service-locations-call-arrow {
  font-size: 22px !important;
  margin-left: 10px !important;
}


/* Bigger Free Estimate button */
.service-locations-estimate {
  min-height: 68px !important;
  padding: 0 28px !important;

  font-size: 13px !important;
  font-weight: 900 !important;

  letter-spacing: 0.11em !important;
}


/* Bigger Free Estimate arrow */
.service-locations-estimate-arrow {
  font-size: 20px !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

  .service-locations-title {
    font-size: clamp(40px, 7vw, 56px) !important;
  }

  .service-locations-call,
  .service-locations-estimate {
    min-height: 64px !important;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575.98px) {

  .service-locations-title {
    font-size: clamp(32px, 9vw, 42px) !important;
  }


  .service-locations-call {
    min-height: 64px !important;
    padding: 9px 16px 9px 9px !important;
  }


  .service-locations-call-icon {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }


  .service-locations-call-copy strong {
    font-size: 18px !important;
  }


  .service-locations-estimate {
    min-height: 60px !important;
    padding: 0 20px !important;
    font-size: 12px !important;
  }

}

.pearland-navbar .nav-link .active {
  background-color: #0F2B1E !important;
  color: white !important;
}


/* =========================================================
   CURRENT PAGE - ALWAYS SOLID DARK GREEN
========================================================= */

.pearland-navbar .navbar-nav .nav-item.current-page {
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}


/* KEEP IT NORMAL WHEN NAV / DROPDOWN IS HOVERED */
.pearland-navbar .navbar-nav:hover .nav-item.current-page,
.pearland-navbar .navbar-nav .nav-item.current-page:hover,
.pearland-navbar .navbar-nav:has(.dropdown:hover) .nav-item.current-page,
.pearland-navbar .navbar-nav:has(.dropdown-menu.show) .nav-item.current-page {
  opacity: 1 !important;
  filter: none !important;
}


/* ACTIVE LINK */
.pearland-navbar .navbar-nav .nav-item.current-page > .nav-link,
.pearland-navbar .navbar-nav .nav-item.current-page > .nav-link:hover,
.pearland-navbar .navbar-nav .nav-item.current-page > .nav-link:focus,
.pearland-navbar .navbar-nav .nav-item.current-page > .nav-link:active {
  background: #0F2B1E !important;
  background-color: #0F2B1E !important;
  background-image: none !important;

  color: #ffffff !important;

  opacity: 1 !important;
  filter: none !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  box-shadow: none !important;

  border-radius: 8px;
}


/* REMOVE EFFECTS FROM ACTIVE LINK */
.pearland-navbar .navbar-nav .nav-item.current-page::before,
.pearland-navbar .navbar-nav .nav-item.current-page::after,
.pearland-navbar .navbar-nav .nav-item.current-page > .nav-link::before,
.pearland-navbar .navbar-nav .nav-item.current-page > .nav-link::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  filter: none !important;
  background: transparent !important;
}


/* =========================================================
   IF YOU DIM OTHER NAV ITEMS ON HOVER
========================================================= */

.pearland-navbar .navbar-nav:hover > .nav-item:not(.current-page) 
  /* keep your normal hover effect here if wanted */



/* NEVER DIM CURRENT PAGE */
.pearland-navbar .navbar-nav:hover > .nav-item.current-page {
  opacity: 1 !important;
  filter: none !important;
}