/* Garage Door Santa Clara — alternate visual direction.
   Palette and layout only; service information remains from the supplied website. */
:root {
   --pine: #173d3a;
   --pine-deep: #102d2b;
   --pine-light: #24534d;
   --copper: #c77d59;
   --copper-hover: #b66a47;
   --cream: #f6f3ec;
   --paper: #fffcf7;
   --ink: #213330;
   --muted: #687771;
   --line: #dcded5;
   --white: #fff;
   --heading: 'Manrope', sans-serif;
   --body: 'DM Sans', sans-serif;
   --container: 1320px
}

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

html {
   scroll-behavior: smooth;
   scroll-padding-top: 110px
}

body {
   margin: 0;
   background: var(--paper);
   color: var(--ink);
   font-family: var(--body);
   font-size: 15px;
   line-height: 1.8;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased
}

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

a {
   color: inherit;
   text-decoration: none;
   transition: color .25s, background-color .25s, border-color .25s
}

a:hover {
   color: var(--copper-hover)
}

button,
input,
select,
textarea {
   font: inherit
}

button {
   cursor: pointer
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--heading);
   font-weight: 700;
   line-height: 1.2;
   letter-spacing: -.035em;
   margin: 0
}

p {
   margin: 0 0 1.25rem
}

h2 {
   font-size: clamp(30px, 3vw, 44px)
}

h3 {
   font-size: 22px
}

.container {
   max-width: var(--container);
   padding-left: 26px;
   padding-right: 26px
}

.section-pad {
   padding: 112px 0
}

.eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 11px;
   font-size: 11px;
   line-height: 1.5;
   font-weight: 800;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--copper-hover);
   margin-bottom: 22px
}

.eyebrow::before {
   content: '';
   display: block;
   width: 23px;
   height: 1px;
   background: currentColor;
   flex: none
}

.section-heading {
   max-width: 720px
}

.section-heading h2 {
   margin-bottom: 23px
}

.section-heading p {
   color: var(--muted);
   max-width: 660px;
   font-size: 15px;
   line-height: 1.9;
   margin-bottom: 0
}

.section-heading.centered {
   text-align: center;
   margin-left: auto;
   margin-right: auto
}

.centered .eyebrow {
   justify-content: center
}

.centered .section-heading p,
.section-heading.centered p {
   margin-left: auto;
   margin-right: auto
}

.btn-main,
.btn-light,
.btn-outline {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 28px;
   min-height: 58px;
   padding: 16px 25px;
   font-size: 16px;
   font-weight: 800;
   letter-spacing: .025em;
   line-height: 1.3;
   transition: background .25s, color .25s, border-color .25s, transform .25s
}

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

.btn-main:hover {
   background: var(--copper-hover);
   border-color: var(--copper-hover);
   color: #fff;
   transform: translateY(-2px)
}

.btn-light {
   background: var(--paper);
   color: var(--pine);
   border: 1px solid var(--paper)
}

.btn-light:hover {
   background: #e9e4d9;
   color: var(--pine)
}

.btn-outline {
   border: 1px solid rgba(255, 255, 255, .34);
   color: #fff
}

.btn-outline:hover {
   background: #fff;
   color: var(--pine);
   border-color: #fff
}

.btn-main i,
.btn-light i,
.btn-outline i {
   font-size: 13px
}

.text-link {
   display: inline-flex;
   align-items: center;
   gap: 22px;
   color: var(--pine);
   font-size: 12px;
   font-weight: 800;
   white-space: nowrap;
   border-bottom: 1px solid var(--pine);
   padding-bottom: 11px
}

.text-link:hover {
   color: var(--copper-hover);
   border-color: var(--copper-hover)
}

/* Navigation */
.topline {
   background: var(--pine-deep);
   color: #c0d1c9;
   border-bottom: 1px solid rgba(255, 255, 255, .09);
   font-size: 11px;
   letter-spacing: .025em
}

.top-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   min-height: 37px
}

.topline i {
   color: var(--copper);
   margin-right: 8px
}

.topline a:hover {
   color: #fff
}

.site-nav {
   background: var(--pine);
   min-height: 91px;
   z-index: 1030;
   position: relative;
   padding: 0;
   border-bottom: 1px solid rgba(255, 255, 255, .1);
   
}

.nav-inner {
   min-height: 91px;
   gap: 22px;
   
}

.navbar-brand {
   padding: 0;
   margin-right: 24px;
   flex: none
}

.navbar-brand img,
.footer-logo img {
   width: 250px;
   height: auto;
   max-height: 70px;
   object-fit: contain;
}

.site-nav .navbar-nav {
   gap: 1px
}

.site-nav .nav-link {
   font-size: 16px;
   font-weight: 700;
   color: rgba(255, 255, 255, .79);
   padding: 13px 10px !important;
   white-space: nowrap;
   position: relative
}

.site-nav .nav-link:hover,
.site-nav .nav-link.active {
   color: #fff
}

.site-nav .nav-link.active::after {
   content: '';
   position: absolute;
   bottom: 4px;
   left: 10px;
   right: 10px;
   height: 2px;
   background: var(--copper)
}

.site-nav .dropdown-menu {
   background: var(--paper);
   border: 1px solid var(--line);
   border-radius: 0;
   padding: 8px;
   box-shadow: 0 20px 55px rgba(0, 0, 0, .12)
}

.site-nav .dropdown-item {
   padding: 10px 16px;
   font-size: 12px;
   color: var(--ink);
   font-weight: 600
}

.site-nav .dropdown-item:hover {
   background: #e9eee8;
   color: var(--pine)
}

.nav-link.dropdown.active {
   color:var(--copper);
}

.nav-call {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   background: var(--copper);
   color: #fff;
   padding: 13px 17px;
   font-size: 16px;
   font-weight: 800;
   white-space: nowrap;
   margin-left: 18px
}

.nav-call:hover {
   color: #fff;
   background: var(--copper-hover)
}

.nav-call i:last-child {
   font-size: 10px
}

.navbar-toggler {
   border: 1px solid rgba(255, 255, 255, .3);
   border-radius: 0;
   padding: 9px 11px;
   color: #fff
}

.navbar-toggler:focus {
   box-shadow: 0 0 0 3px rgba(199, 125, 89, .3)
}

.navbar-toggler-icon {
   width: 25px;
   height: 22px;
   background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
   background-size: 25px 2px;
   background-position: center 2px, center 10px, center 18px;
   background-repeat: no-repeat;
   filter: none
}

/* Hero — typographic architectural layout, static panoramic image, no floating cards. */
.home-hero {
   background: var(--pine);
   color: #fff;
   position: relative;
   overflow: hidden
}

.hero-pattern {
   position: absolute;
   inset: 0 0 auto;
   pointer-events: none;
   height: 700px;
   opacity: .17;
   background: repeating-linear-gradient(90deg, transparent 0, transparent 119px, rgba(255, 255, 255, .12) 120px, transparent 121px);
   mask-image: linear-gradient(to bottom, #000, transparent)
}

.hero-inner {
   position: relative;
   display: grid;
   grid-template-columns: minmax(0, 1fr) 250px;
   gap: 75px;
   align-items: end;
   padding-top: 92px;
   padding-bottom: 85px
}

.hero-copy {
   max-width: 900px
}

.hero-kicker {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   font-size: 11px;
   letter-spacing: .16em;
   text-transform: uppercase;
   font-weight: 800;
   color: #e7d8ca;
   margin-bottom: 32px
}

.status-dot {
   height: 8px;
   width: 8px;
   border-radius: 50%;
   background: var(--copper)
}

.hero-copy h1 {
   color: #fff;
   font-size: clamp(44px, 5.65vw, 84px);
   line-height: 1.08;
   letter-spacing: -.065em;
   font-weight: 800;
   margin-bottom: 31px
}

.hero-copy h1 span {
   display: block;
   white-space: nowrap
}

.hero-copy h1 em {
   font-style: normal;
   color: var(--copper)
}

.hero-copy>p {
   max-width: 605px;
   color: #c0d1cb;
   font-size: 15px;
   line-height: 1.95;
   margin-bottom: 32px
}

.hero-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px
}

.hero-side {
   border-top: 1px solid rgba(255, 255, 255, .25);
   padding-top: 22px;
   margin-bottom: 7px
}

.side-label {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: .16em;
   color: #b4c6be;
   font-weight: 800;
   margin-bottom: 18px
}

.hero-side>a {
   display: flex;
   align-items: center;
   gap: 13px;
   font-family: var(--heading);
   font-size: 14px;
   font-weight: 700;
   color: #fff;
   padding: 16px 0;
   border-bottom: 1px solid rgba(255, 255, 255, .15)
}

.hero-side>a:hover {
   color: #e5aa8c
}

.hero-side>a span {
   font-size: 10px;
   font-weight: 700;
   color: var(--copper);
   font-family: var(--body)
}

.hero-side>a i {
   margin-left: auto;
   font-size: 11px
}

.side-bottom {
   font-size: 11px;
   line-height: 1.8;
   color: #aebfb7;
   margin-top: 24px
}

.hero-photo-container {
   position: relative
}

.hero-photo {
   height: 340px;
   position: relative;
   overflow: hidden;
   background: #dde0d5
}

.hero-photo>img {
   height: 100%;
   width: 100%;
   object-fit: cover;
   object-position: center 53%
}

.photo-caption {
   position: absolute;
   bottom: 0;
   left: 0;
   background: var(--paper);
   color: var(--pine);
   height: 54px;
   min-width: 355px;
   padding: 0 23px;
   display: flex;
   align-items: center;
   gap: 14px;
   font-size: 10px;
   font-weight: 800;
   letter-spacing: .055em
}

.caption-rule {
   width: 25px;
   height: 1px;
   background: var(--copper)
}

.caption-index {
   margin-left: auto;
   color: var(--muted);
   font-size: 9px
}

.metrics-band {
   background: var(--paper);
   border-bottom: 1px solid var(--line)
}

.metrics-inner {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   padding-top: 32px;
   padding-bottom: 32px
}

.metric {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 22px;
   padding: 5px 30px;
   border-right: 1px solid var(--line)
}

.metric:last-child {
   border-right: 0
}

.metric strong {
   font-family: var(--heading);
   font-size: 34px;
   line-height: 1;
   font-weight: 800;
   letter-spacing: -.055em;
   color: var(--pine)
}

.metric>span {
   font-size: 12px;
   color: var(--muted);
   font-weight: 600;
   line-height: 1.5
}

/* Services */
.services-section {
   background: var(--paper)
}

.services-intro {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 45px;
   margin-bottom: 53px
}

.services-intro .section-heading {
   max-width: 820px
}

.services-intro .section-heading h2 {
   max-width: 760px
}

.section-index {
   font-size: 11px;
   font-weight: 800;
   letter-spacing: .1em;
   color: var(--pine);
   white-space: nowrap;
   margin-bottom: 8px
}

.section-index span {
   color: var(--copper);
   margin: 0 10px
}

.services-list {
   border-top: 1px solid var(--line)
}

.service-row {
   display: grid;
   grid-template-columns: 55px 90px minmax(0, 1fr) 140px;
   align-items: center;
   gap: 30px;
   padding: 34px 0;
   border-bottom: 1px solid var(--line);
   color: var(--ink);
   transition: padding .25s, background .25s
}

.service-row:hover {
   color: var(--ink);
   padding-left: 15px;
   padding-right: 15px;
   background: #eaf0e9
}

.service-number {
   color: var(--copper-hover);
   font-weight: 800;
   font-size: 12px;
   align-self: start;
   padding-top: 16px
}

.service-icon {
   width: 76px;
   height: 76px;
   display: grid;
   place-items: center;
   background: #e8eee7;
   color: var(--pine);
   font-size: 26px
}

.service-description {
   display: flex;
   flex-direction: column;
   gap: 9px
}

.service-description strong {
   font-family: var(--heading);
   font-size: 25px;
   font-weight: 800;
   letter-spacing: -.04em
}

.service-description>span {
   max-width: 600px;
   color: var(--muted);
   font-size: 14px;
   line-height: 1.8
}

.service-link {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 14px;
   font-size: 11px;
   color: var(--pine);
   font-weight: 800;
   white-space: nowrap
}

.service-link i {
   width: 35px;
   height: 35px;
   border: 1px solid var(--line);
   display: grid;
   place-items: center;
   font-size: 11px;
   transition: background .25s, color .25s
}

.service-row:hover .service-link i {
   background: var(--pine);
   color: #fff
}

/* About */
.about-block {
   background: var(--cream)
}

.about-layout {
   display: grid;
   grid-template-columns: minmax(0, .96fr) minmax(0, 1fr);
   align-items: center;
   gap: 100px
}

.about-visual {
   position: relative;
   padding: 0 24px 30px 0
}

.about-visual::before {
   content: '';
   position: absolute;
   left: 35px;
   top: 35px;
   right: 0;
   bottom: 0;
   border: 1px solid #cbd3c9;
   pointer-events: none
}

.about-image {
   width: 100%;
   height: 550px;
   object-fit: cover;
   position: relative
}

.about-photo-label {
   position: absolute;
   bottom: 0;
   left: 0;
   background: var(--pine);
   color: #fff;
   display: flex;
   flex-direction: column;
   gap: 7px;
   padding: 24px 29px;
   font-size: 11px;
   font-weight: 700;
   line-height: 1.5;
   letter-spacing: .03em
}

.about-photo-label span:first-child {
   color: var(--copper);
   font-size: 14px;
}

.about-content .section-heading h2 {
   font-size: clamp(29px, 2.65vw, 40px)
}

.about-checks {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 13px 19px;
   margin: 29px 0 34px
}

.about-check {
   display: flex;
   align-items: center;
   gap: 11px;
   font-size: 12px;
   font-weight: 700;
   color: var(--ink)
}

.about-check i {
   color: var(--copper-hover);
   font-size: 11px
}

/* Repair gallery */
.repair-section {
   background: var(--paper)
}

.split-heading {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   gap: 50px;
   margin-bottom: 52px
}

.split-heading .section-heading {
   max-width: 760px
}

.split-heading .text-link {
   margin-bottom: 8px
}

.repair-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 25px
}

.repair-card {
   border: 1px solid var(--line);
   background: #fff;
   display: grid;
   grid-template-columns: 44% 56%;
   min-height: 260px;
   overflow: hidden
}

.repair-card-1 {
   grid-column: 1 / 3;
   grid-template-columns: 53% 47%;
   min-height: 360px
}

.repair-card-4 {
   grid-column: 1 / 3;
   grid-template-columns: 47% 53%;
   min-height: 290px
}

.repair-card-4 .repair-image {
   order: 2
}

.repair-image {
   position: relative;
   overflow: hidden;
   min-height: 230px;
   background: #e6e9e2
}

.repair-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   position: absolute;
   inset: 0;
   transition: transform .7s ease
}

.repair-card:hover .repair-image img {
   transform: scale(1.045)
}

.repair-number {
   position: absolute;
   top: 17px;
   left: 17px;
   background: var(--paper);
   color: var(--pine);
   padding: 8px 12px;
   font-size: 10px;
   font-weight: 800
}

.repair-content {
   padding: 32px;
   display: flex;
   flex-direction: column;
   justify-content: center
}

.repair-content h3 {
   font-size: 20px;
   margin-bottom: 17px
}

.repair-card-1 .repair-content h3 {
   font-size: 30px
}

.repair-content p {
   font-size: 13px;
   line-height: 1.85;
   color: var(--muted);
   margin: 0
}

/* Coupons */
.coupon-section-new {
   background: var(--cream)
}

.coupon-layout {
   display: grid;
   grid-template-columns: 1fr .9fr;
   gap: 80px;
   align-items: center;
   background: var(--pine);
   padding: 62px 66px;
   position: relative;
   overflow: hidden
}

.coupon-layout::after {
   content: '';
   position: absolute;
   right: -140px;
   bottom: -340px;
   width: 580px;
   height: 580px;
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 50%;
   pointer-events: none
}

.coupon-copy {
   position: relative;
   z-index: 1
}

.coupon-copy .eyebrow {
   color: #deb09a
}

.coupon-copy h2 {
   font-size: clamp(30px, 3.1vw, 43px);
   color: #fff;
   margin-bottom: 24px
}

.coupon-copy p {
   color: #c6d5cd;
   font-size: 14px;
   line-height: 1.9;
   margin-bottom: 29px
}

.coupon-visual {
   display: block;
   position: relative;
   z-index: 1;
   background: #fff;
   padding: 13px;
   color: var(--pine)
}

.coupon-visual img {
   width: 100%;
   max-height: 355px;
   object-fit: contain
}

.coupon-visual>span {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-top: 1px solid var(--line);
   padding: 13px 4px 2px;
   font-size: 11px;
   font-weight: 800
}

.coupon-visual:hover {
   color: var(--copper-hover)
}

/* Installation */
.installation-block {
   background: var(--pine-deep);
   color: #fff
}

.installation-layout {
   display: grid;
   grid-template-columns: .9fr 1.1fr;
   align-items: center;
   gap: 90px
}

.installation-copy .eyebrow {
   color: #daa087
}

.installation-copy h2 {
   color: #fff
}

.installation-copy>p {
   color: #bdcfc6;
   font-size: 14px;
   line-height: 1.95;
   margin-bottom: 18px
}

.installation-copy .btn-light {
   margin-top: 15px
}

.installation-visual {
   position: relative;
   padding-bottom: 27px
}

.installation-visual>img {
   height: 600px;
   width: 100%;
   object-fit: cover
}

.installation-caption {
   position: absolute;
   bottom: 0;
   right: 0;
   background: var(--copper);
   color: #fff;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 35px;
   min-width: 275px;
   padding: 22px 25px;
   font-size: 16px;
   font-weight: 800
}

/* Process */
.process-section {
   background: var(--paper)
}

.process-section .section-heading {
   margin-bottom: 45px
}

.process-tabs {
   display: flex;
   justify-content: center;
   gap: 0;
   border: 1px solid var(--line);
   max-width: 780px;
   margin: 0 auto 54px
}

.process-tab {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 15px;
   flex: 1;
   background: transparent;
   border: 0;
   border-right: 1px solid var(--line);
   padding: 20px 18px;
   color: var(--muted);
   font-size: 12px;
   font-weight: 800;
   transition: background .25s, color .25s
}

.process-tab:last-child {
   border-right: 0
}

.process-tab span {
   font-size: 10px;
   color: var(--copper-hover)
}

.process-tab.is-active {
   background: var(--pine);
   color: #fff
}

.process-tab.is-active span {
   color: #e3ac90
}

.process-panel[hidden] {
   display: none !important
}

.timeline {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 0;
   border-top: 1px solid var(--line)
}

.timeline-step {
   padding: 37px 35px 0 0;
   position: relative
}

.timeline-step:not(:last-child) {
   border-right: 1px solid var(--line);
   margin-right: 35px
}

.timeline-step::before {
   content: '';
   position: absolute;
   width: 9px;
   height: 9px;
   background: var(--copper);
   top: -5px;
   left: 0;
   transform: rotate(45deg)
}

.step-number {
   font-size: 12px;
   color: var(--copper-hover);
   font-weight: 800;
   letter-spacing: .15em;
   display: block;
   margin-bottom: 25px
}

.timeline-step h3 {
   font-size: 22px;
   margin-bottom: 17px
}

.timeline-step p {
   font-size: 14px;
   color: var(--muted);
   line-height: 1.9;
   margin: 0
}

/* Maintenance */
.maintenance-section {
   background: var(--cream)
}

.maintenance-intro {
   display: flex;
   justify-content: space-between;
   align-items: end;
   gap: 40px;
   margin-bottom: 52px
}

.maintenance-intro .section-heading {
   max-width: 790px
}

.maintenance-cta {
   flex: none
}

.maintenance-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   border-top: 1px solid var(--line);
   border-left: 1px solid var(--line)
}

.maintenance-card {
   padding: 34px 27px 32px;
   background: var(--paper);
   border-right: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   position: relative;
   transition: background .25s
}

.maintenance-card:hover {
   background: #e8eee7
}

.maintenance-icon {
   height: 66px;
   width: 66px;
   border: 1px solid #cfd8ce;
   display: grid;
   place-items: center;
   color: var(--pine);
   font-size: 23px;
   margin-bottom: 30px
}

.maintenance-index {
   position: absolute;
   top: 36px;
   right: 28px;
   font-size: 10px;
   color: var(--copper-hover);
   font-weight: 800
}

.maintenance-card h3 {
   font-size: 19px;
   margin-bottom: 14px
}

.maintenance-card p {
   font-size: 13px;
   color: var(--muted);
   line-height: 1.85;
   margin: 0
}

.maintenance-bottom {
   font-size: 14px;
   line-height: 1.9;
   color: var(--muted);
   max-width: 930px;
   margin: 30px 0 0
}

/* Appointment */
.appointment-section {
   background: var(--paper)
}

.appointment-heading {
   display: flex;
   justify-content: space-between;
   align-items: end;
   gap: 40px;
   margin-bottom: 50px
}

.appointment-heading .section-heading h3 {
   margin-bottom: 0;
   color: white;
   font-size: 30px
}

.appointment-heading>p {
   font-size: 12px;
   color: white;
   margin: 0 0 7px
}

.appointment-layout {
   display: grid;
   grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
   gap: 30px;
   align-items: start
}

.appointment-form-card {
   background: var(--cream);
   border: 1px solid var(--line);
   padding: 43px
}

.form-heading {
   border-bottom: 1px solid var(--line);
   padding-bottom: 25px;
   margin-bottom: 29px
}

.form-heading .eyebrow {
   margin-bottom: 13px
}

.form-heading h3 {
   font-size: 26px;
   margin-bottom: 12px
}

.form-heading p {
   font-size: 13px;
   line-height: 1.8;
   color: var(--muted);
   margin: 0
}

.redesign-form fieldset {
   border: 0;
   padding: 0;
   margin: 0;
   min-width: 0
}

.redesign-form fieldset>p {
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 16px;
   row-gap: 6px;
   margin: 0 0 17px
}

.redesign-form .field-label {
   font-size: 11px;
   line-height: 1.5;
   font-weight: 800;
   color: var(--ink);
   margin: 0 0 2px;
   display: block
}

.redesign-form input:not([type=hidden]):not([type=submit]),
.redesign-form select,
.redesign-form textarea {
   display: block;
   width: 100%;
   min-width: 0;
   min-height: 48px;
   padding: 12px 13px;
   border: 1px solid #d5dad1;
   border-radius: 0;
   background: #fff;
   color: var(--ink);
   font-size: 12px;
   outline: none;
   margin: 0 0 8px;
   box-shadow: none
}

.redesign-form input:focus,
.redesign-form select:focus,
.redesign-form textarea:focus {
   border-color: var(--pine);
   box-shadow: 0 0 0 3px rgba(23, 61, 58, .09)
}

.redesign-form textarea {
   resize: vertical;
   min-height: 125px
}

.redesign-form textarea,
.redesign-form textarea+.field-label {
   grid-column: 1/-1
}

.redesign-form input[name=your_name],
.redesign-form input[name=your_address],
.redesign-form input[name=your_state],
.redesign-form select[name=service_date],
.redesign-form input[name=service_year] {
   grid-column: 1
}

.redesign-form input[name=your_phone],
.redesign-form input[name=your_city],
.redesign-form input[name=your_zip],
.redesign-form select[name=service_day],
.redesign-form select[name=service_time] {
   grid-column: 2
}

.redesign-form .field-label[for=field-your_name],
.redesign-form .field-label[for=field-your_address],
.redesign-form .field-label[for=field-your_state],
.redesign-form .field-label[for=service_date],
.redesign-form .field-label[for=service_year] {
   grid-column: 1
}

.redesign-form .field-label[for=field-your_phone],
.redesign-form .field-label[for=field-your_city],
.redesign-form .field-label[for=field-your_zip],
.redesign-form .field-label[for=service_day],
.redesign-form .field-label[for=field-service_time] {
   grid-column: 2
}

.redesign-form .field-label[for=field-service_needed] {
   grid-column: 1/-1
}

.redesign-form input[type=submit] {
   grid-column: 1/-1;
   width: 100%;
   border: 0;
   background: var(--copper);
   color: #fff;
   font-size: 12px;
   font-weight: 800;
   padding: 17px 20px;
   min-height: 55px;
   cursor: pointer;
   transition: background .25s
}

.redesign-form input[type=submit]:hover {
   background: var(--copper-hover)
}

.redesign-form .subject {
   display: none !important
}

.appointment-details {
   border: 1px solid var(--line);
   padding: 39px;
   background:var(--cream);
}

.contact-detail {
   display: flex;
   align-items: flex-start;
   gap: 19px;
   padding-bottom: 25px;
   margin-bottom: 25px;
   border-bottom: 1px solid var(--line)
}

.detail-icon {
   width: 41px;
   height: 41px;
   display: grid;
   place-items: center;
   background: #e8eee7;
   color: var(--pine);
   flex: none;
   font-size: 14px
}

.contact-detail>div>span {
   display: block;
   font-size: 10px;
   text-transform: uppercase;
   font-weight: 800;
   letter-spacing: .1em;
   color: var(--copper-hover);
   margin-bottom: 7px
}

.contact-detail p {
   font-size: 13px;
   line-height: 1.8;
   color: var(--ink);
   margin: 0;
   overflow-wrap: anywhere
}

.contact-detail a:hover {
   color: var(--copper-hover)
}

.map-wrap {
   height: 300px;
   background: #e8eee7;
   overflow: hidden
}

.map-wrap iframe {
   height: 100%;
   width: 100%;
   border: 0;
   display: block
}

/* Original brand assets, displayed as a quiet static gallery */
.brand-section {
   background: var(--cream);
   padding-top: 70px;
   padding-bottom: 78px;
   border-top: 1px solid var(--line)
}

.brand-heading {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px;
   margin-bottom: 27px
}

.brand-heading .eyebrow {
   margin: 0
}

.brand-heading>span:last-child {
   font-size: 11px;
   color: var(--muted)
}

.brand-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 1px;
   background: var(--line);
   border: 1px solid var(--line)
}

.brand-item {
   background: var(--paper);
   height: 104px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 22px
}

.brand-item img {
   height: 50px;
   width: 100%;
   object-fit: contain;
   mix-blend-mode: multiply;
   filter: grayscale(1);
   opacity: .72;
   transition: filter .25s, opacity .25s
}

.brand-item:hover img {
   filter: none;
   opacity: 1
}

/* Closing and footer */
.closing-section {
   background: #e7ede5
}

.closing-layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 220px;
   gap: 75px;
   align-items: center
}

.closing-layout h2 {
   font-size: clamp(31px, 3.2vw, 46px);
   margin-bottom: 23px;
   max-width: 820px
}

.closing-layout p {
   font-size: 14px;
   line-height: 1.9;
   color: var(--muted);
   max-width: 810px;
   margin: 0
}

.closing-action {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   gap: 26px
}

.closing-action .btn-main {
   white-space: nowrap;
   gap: 17px
}

.closing-text-link {
   font-size: 12px;
   font-weight: 800;
   display: flex;
   justify-content: space-between;
   align-items: center;
   border-bottom: 1px solid var(--pine);
   padding-bottom: 12px;
   color: var(--pine)
}

.site-footer {
   background: var(--pine-deep);
   color: #b6c8c0;
   padding: 10px 0 0
}

.footer-top {
   display: grid;
   grid-template-columns: 1.4fr .7fr 1.1fr .8fr;
   gap: 60px;
   padding-bottom: 66px
}

.footer-about p {
   font-size: 13px;
   line-height: 1.9;
   max-width: 320px;
   margin: 26px 0 0
}

.footer-top h4 {
   font-size: 20px;
   color: #fff;
}

.footer-logo {
   display: inline-block
}

.footer-column {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 11px
}

.footer-column h3 {
   font-size: 14px;
   font-weight: 800;
   letter-spacing: 0;
   color: #fff;
   margin-bottom: 16px
}

.footer-column>a,
.footer-column p {
   font-size: 12px;
   line-height: 1.9;
   color: #b6c8c0;
   margin: 0
}

.footer-column>a:hover {
   color: #fff
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .13);
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 25px;
   padding: 27px 0;
   font-size: 11px;
   color: #94aaa0
}

.footer-bottom>div {
   display: flex;
   gap: 13px
}

.footer-bottom a:hover {
   color: #fff
}

.back-top {
   display: inline-flex;
   align-items: center;
   gap: 15px;
   color: #c6d5cd
}

.back-top i {
   color: var(--copper)
}

/* Purposeful entrance motion: no perpetual floating, parallax or tilt effects. */
.reveal {
   opacity: 0;
   transform: translateY(22px);
   transition: opacity .75s ease, transform .75s cubic-bezier(.2, .7, .2, 1)
}

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

.reveal:nth-child(2) {
   transition-delay: .07s
}

.reveal:nth-child(3) {
   transition-delay: .12s
}

.reveal:nth-child(4) {
   transition-delay: .17s
}

:focus-visible {
   outline: 3px solid var(--copper);
   outline-offset: 4px
}

@media(max-width:1399px) {
   .site-nav .nav-link {
      font-size: 11px;
      padding-left: 7px !important;
      padding-right: 7px !important
   }

   .site-nav .nav-link.active::after {
      left: 7px;
      right: 7px
   }

   .nav-call {
      margin-left: 8px
   }

   .navbar-brand img {
      width: 170px
   }

   .hero-inner {
      gap: 45px
   }

   .hero-copy h1 {
      color: #fff;
      font-size: clamp(43px, 5.4vw, 76px)
   }
}

@media(max-width:1199px) {
   .site-nav .navbar-collapse {
      padding: 20px 0 25px;
      border-top: 1px solid rgba(255, 255, 255, .12)
   }

   .site-nav .navbar-nav {
      align-items: stretch !important
   }

   .site-nav .nav-link {
      font-size: 13px;
      padding: 12px 0 !important
   }

   .site-nav .nav-link.active::after {
      display: none
   }

   .nav-call {
      margin: 15px 0 0;
      width: fit-content
   }

   .site-nav .dropdown-menu {
      border: 0;
      box-shadow: none
   }

   .hero-inner {
      grid-template-columns: minmax(0, 1fr) 210px;
      gap: 30px
   }

   .hero-copy h1 {
      color: #fff;
      font-size: clamp(44px, 5.1vw, 67px)
   }

   .about-layout {
      gap: 55px
   }

   .about-image {
      height: 500px
   }

   .installation-layout {
      gap: 50px
   }

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

   .appointment-layout {
      grid-template-columns: 1fr 1fr
   }

   .footer-top {
      gap: 35px
   }
}

@media(max-width:991px) {
   .section-pad {
      padding: 80px 0
   }

   .hero-inner {
      grid-template-columns: 1fr;
      padding-top: 70px;
      padding-bottom: 55px
   }

   .hero-copy h1 {
      color: #fff;
      font-size: clamp(45px, 7.2vw, 72px)
   }

   .hero-side {
      display: none
   }

   .hero-photo {
      height: 300px
   }

   .about-layout,
   .installation-layout {
      grid-template-columns: 1fr;
      gap: 45px
   }

   .about-visual {
      max-width: 680px
   }

   .about-image {
      height: 470px
   }

   .installation-visual>img {
      height: 430px
   }

   .service-row {
      grid-template-columns: 35px 70px 1fr 110px;
      gap: 17px
   }

   .service-icon {
      width: 64px;
      height: 64px
   }

   .service-description strong {
      font-size: 21px
   }

   .repair-grid {
      gap: 18px
   }

   .repair-card,
   .repair-card-1,
   .repair-card-4 {
      grid-template-columns: 1fr;
      min-height: 0
   }

   .repair-card-1 {
      grid-column: 1/3;
      grid-template-columns: 1fr 1fr
   }

   .repair-card-4 {
      grid-column: 1/3;
      grid-template-columns: 1fr 1fr
   }

   .repair-card-4 .repair-image {
      order: 0
   }

   .repair-card .repair-image {
      height: 220px
   }

   .repair-card-1 .repair-image,
   .repair-card-4 .repair-image {
      height: auto;
      min-height: 270px
   }

   .repair-content {
      padding: 27px
   }

   .coupon-layout {
      gap: 35px;
      padding: 45px
   }

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

   .appointment-layout {
      grid-template-columns: 1fr
   }

   .appointment-details {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 30px
   }

   .map-wrap {
      grid-column: 1/-1
   }

   .closing-layout {
      grid-template-columns: 1fr;
      gap: 35px
   }

   .closing-action {
      flex-direction: row;
      align-items: center
   }

   .closing-text-link {
      gap: 30px
   }

   .footer-top {
      grid-template-columns: 1fr 1fr;
      gap: 42px
   }

   .brand-grid {
      grid-template-columns: repeat(5, 1fr)
   }

   .brand-item {
      padding: 14px;
      height: 90px
   }
}

@media(max-width:767px) {
   .container {
      padding-left: 20px;
      padding-right: 20px
   }

   .section-pad {
      padding: 64px 0
   }

   .top-inner {
      min-height: 34px
   }

   .top-inner>span {
      display: none
   }

   .top-inner>a {
      margin-left: auto
   }

   .site-nav,
   .nav-inner {
      min-height: 75px
   }

   .navbar-brand img {
      width: 158px
   }

   .hero-inner {
      padding-top: 58px;
      padding-bottom: 45px
   }

   .hero-kicker {
      margin-bottom: 24px
   }

   .hero-copy h1 {
      color: #fff;
      font-size: clamp(38px, 9.3vw, 62px);
      letter-spacing: -.055em
   }

   .hero-copy h1 span {
      white-space: normal
   }

   .hero-copy h1 span:first-child {
      white-space: nowrap
   }

   .hero-copy>p {
      font-size: 14px
   }

   .hero-actions {
      gap: 10px
   }

   .hero-actions a {
      min-height: 54px
   }

   .hero-photo {
      height: 250px
   }

   .photo-caption {
      min-width: 0;
      width: min(100%, 345px);
      font-size: 9px;
      height: 46px;
      padding: 0 15px
   }

   .metrics-inner {
      padding-top: 26px;
      padding-bottom: 26px;
      gap: 12px
   }

   .metric {
      flex-direction: column;
      gap: 8px;
      padding: 0 12px;
      text-align: center
   }

   .metric strong {
      font-size: 27px
   }

   .metric>span {
      font-size: 10px
   }

   .services-intro,
   .split-heading,
   .appointment-heading {
      display: block;
      margin-bottom: 35px
   }

   .section-index {
      display: none
   }

   .split-heading .text-link {
      margin-top: 24px
   }

   .section-heading h2 {
      font-size: clamp(29px, 7vw, 38px)
   }

   .section-heading p {
      font-size: 14px
   }

   .service-row {
      grid-template-columns: 36px 1fr 42px;
      gap: 13px;
      padding: 25px 0
   }

   .service-number {
      padding-top: 4px
   }

   .service-icon {
      grid-column: 1;
      grid-row: 2;
      width: 36px;
      height: 36px;
      font-size: 15px
   }

   .service-description {
      grid-column: 2;
      grid-row: 1/3
   }

   .service-description strong {
      font-size: 22px
   }

   .service-description>span {
      font-size: 13px
   }

   .service-link {
      grid-column: 3;
      grid-row: 1/3;
      font-size: 0;
      justify-content: flex-end
   }

   .service-link i {
      font-size: 11px
   }

   .about-image {
      height: 390px
   }

   .about-layout {
      gap: 38px
   }

   .about-photo-label {
      padding: 18px 20px
   }

   .about-checks {
      gap: 13px
   }

   .about-check {
      font-size: 11px
   }

   .repair-grid {
      grid-template-columns: 1fr
   }

   .repair-card,
   .repair-card-1,
   .repair-card-4 {
      grid-column: auto;
      display: block
   }

   .repair-card .repair-image {
      height: 250px;
      min-height: 0
   }

   .repair-card-1 .repair-content h3 {
      font-size: 24px
   }

   .repair-content {
      padding: 25px
   }

   .coupon-layout {
      grid-template-columns: 1fr;
      gap: 35px;
      padding: 35px 25px
   }

   .coupon-visual {
      max-width: 490px
   }

   .installation-layout {
      gap: 35px
   }

   .installation-visual>img {
      height: 340px
   }

   .process-tabs {
      margin-bottom: 35px
   }

   .process-tab {
      font-size: 11px;
      padding: 15px 8px;
      gap: 6px;
      flex-direction: column
   }

   .timeline {
      grid-template-columns: 1fr;
      border-top: 0
   }

   .timeline-step {
      padding: 0 0 28px 28px;
      margin: 0 0 27px 0 !important;
      border-right: 0 !important;
      border-left: 1px solid var(--line)
   }

   .timeline-step:last-child {
      border-left: 1px solid var(--line);
      margin-bottom: 0 !important
   }

   .timeline-step::before {
      left: -5px;
      top: 4px
   }

   .step-number {
      margin-bottom: 12px
   }

   .timeline-step h3 {
      font-size: 20px
   }

   .maintenance-grid {
      grid-template-columns: 1fr 1fr
   }

   .maintenance-card {
      padding: 24px 18px
   }

   .maintenance-icon {
      height: 46px;
      width: 46px;
      font-size: 18px;
      margin-bottom: 20px
   }

   .maintenance-index {
      top: 27px;
      right: 17px
   }

   .maintenance-card h3 {
      font-size: 16px
   }

   .maintenance-card p {
      font-size: 12px
   }

   .maintenance-bottom {
      font-size: 13px
   }

   .appointment-heading>p {
      margin-top: 15px
   }

   .appointment-form-card {
      padding: 28px 22px
   }

   .appointment-details {
      padding: 28px 22px;
      grid-template-columns: 1fr
   }

   .contact-detail {
      margin-bottom: 20px;
      padding-bottom: 20px
   }

   .map-wrap {
      height: 270px
   }

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

   .brand-item {
      height: 90px
   }

   .brand-heading>span:last-child {
      display: none
   }

   .closing-action {
      align-items: stretch;
      flex-direction: column;
      max-width: 300px
   }

   .footer-top {
      grid-template-columns: 1fr 1fr;
      gap: 34px 25px
   }

   .footer-about {
      grid-column: 1/-1
   }

   .footer-bottom {
      flex-wrap: wrap;
      gap: 17px
   }

   .footer-bottom>span {
      width: 100%
   }
}

@media(max-width:420px) {
   .hero-copy h1 {
      color: #fff;
      font-size: clamp(36px, 9vw, 42px)
   }

   .hero-actions {
      flex-direction: column;
      align-items: stretch
   }

   .hero-actions a {
      justify-content: space-between
   }

   .metric strong {
      font-size: 23px
   }

   .metric>span {
      font-size: 9px
   }

   .about-checks {
      grid-template-columns: 1fr 1fr;
      gap: 12px 6px
   }

   .about-image {
      height: 300px
   }

   .installation-visual>img {
      height: 280px
   }

   .maintenance-grid {
      grid-template-columns: 1fr
   }

   .maintenance-card {
      padding: 25px
   }

   .redesign-form fieldset>p {
      grid-template-columns: 1fr
   }

   .redesign-form .field-label,
   .redesign-form input:not([type=hidden]):not([type=submit]),
   .redesign-form select,
   .redesign-form textarea {
      grid-column: 1/-1 !important
   }

   .footer-top {
      grid-template-columns: 1fr
   }

   .footer-about {
      grid-column: auto
   }
}

@media(prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }

   .reveal {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important
   }

   *,
   *::before,
   *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important
   }
}

/* form */
.CUS {
  padding: 0;
}

.CUS label {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
  color: #666;
  font-weight: 500;
}

.CUS input,
.CUS select,
.CUS textarea {
  width: 100%;
  padding: 10px 20px;
  border: 1px solid var(--navy-deep);
  border-radius: 15px;
  background: #fff;
  font-size: 15px;
  color: #222;
  transition: .3s ease;
  box-sizing: border-box;
  margin: 2px;
}

.CUS textarea {
  min-height: 140px;
  resize: none;
}

.CUS input::placeholder,
.CUS textarea::placeholder {
  color: #a0a0a0;
}

.CUS input:focus,
.CUS select:focus,
.CUS textarea:focus {
  border-color: #1e88e5;
  box-shadow: 0 10px 25px rgba(30, 136, 229, .12);
  outline: none;
  transform: translateY(-2px);
}

form.CUS,
.CUS fieldset {
  border: none;
  padding: 0;
}

.social-icons {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-icons a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
  transition: 0.3s ease;
}

.social-icons a:hover {
  background: #173d3a;
  border-color: #173d3a;
  color: #fff;
}

.back{
   background:var(--pine);
   padding: 50px;
}

/* ==============================
   Services Dropdown
============================== */

.services-dropdown {
  position: relative;
}

/* Dropdown container */
.services-dropdown > .dropdown-menu {
  min-width: 230px;
  padding: 10px;
  margin: 0;
  background: #fff;
  border: 1px solid rgba(23, 61, 58, 0.12);
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  z-index: 1050;
}

/* Dropdown links */
.services-dropdown .dropdown-item {
  display: block;
  width: 100%;
  padding: 5px 14px;
  color: #173d3a;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 7px;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Hover and focus */
.services-dropdown .dropdown-item:hover,
.services-dropdown .dropdown-item:focus {
  background: #173d3a;
  color: #fff;
}

/* Active link */
.services-dropdown .dropdown-item.active {
  background: #173d3a;
  color: #fff;
}

/* Dropdown arrow */
.services-dropdown > .dropdown-toggle::after {
  margin-left: 6px;
  vertical-align: 3px;
}

/* ==============================
   Desktop: Open on Hover
============================== */

@media (min-width: 1200px) {
  .services-dropdown:hover > .dropdown-menu,
  .services-dropdown:focus-within > .dropdown-menu {
    display: block;
  }

  .services-dropdown > .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
  }
}

/* ==============================
   Mobile
============================== */

@media (max-width: 1199.98px) {
  .services-dropdown > .dropdown-menu {
    position: static;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
    border-radius: 8px;
  }

  .services-dropdown .dropdown-item {
    padding: 3px 14px;
    font-size: 14px;
  }
}


/* ========================================
   CONROE FOOTER - NEW LAYOUT
======================================== */

.cx-footer {
  position: relative;
  overflow: hidden;
  padding: 20px 0 0;
  background: #102f2d;
  color: #fff;
}

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

/* Heading */
.cx-footer .cx-footer-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 45px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.cx-footer .cx-footer-eyebrow,
.cx-footer .cx-footer-label {
  display: block;
  margin-bottom: 18px;
  color: #c49a6c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.cx-footer .cx-footer-heading h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(36px, 5.5vw, 76px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -3px;
}

.cx-footer .cx-footer-heading h2 > span {
  display: block;
  color: #c49a6c;
}

.cx-footer .cx-footer-dot {
  color: #fff;
}

.cx-footer .cx-footer-heading-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #c49a6c;
  font-size: 30px;
}

/* Main Layout */
.cx-footer .cx-footer-layout {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: 70px;
  padding: 60px 0 70px;
}

.cx-footer .cx-footer-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 35px;
}

.cx-footer .cx-footer-section-number {
  padding-top: 3px;
  color: #c49a6c;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.cx-footer .cx-footer-section-heading .cx-footer-label {
  margin-bottom: 8px;
}

.cx-footer .cx-footer-section-heading h3 {
  margin: 0;
  color: #fff;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.8px;
}

/* Service Locations */
.cx-footer .cx-footer-cities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 25px;
}

.cx-footer .cx-footer-cities span {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  line-height: 1.5;
  transition: color 0.25s ease, padding-left 0.25s ease;
}

.cx-footer .cx-footer-cities span:hover {
  padding-left: 6px;
  color: #c49a6c;
}

/* ZIP Codes */
.cx-footer .cx-footer-zips {
  padding-left: 50px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.cx-footer .cx-footer-zip-intro {
  max-width: 360px;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  line-height: 1.8;
}

.cx-footer .cx-footer-zip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cx-footer .cx-footer-zip-grid span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1px;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.cx-footer .cx-footer-zip-grid span:hover {
  background: rgba(196, 154, 108, 0.12);
  border-color: #c49a6c;
}

/* Neighborhoods Band */
.cx-footer .cx-footer-neighborhoods {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  align-items: center;
  gap: 50px;
  padding: 38px 45px;
  background: #c49a6c;
  color: #102f2d;
}

.cx-footer .cx-footer-neighborhoods .cx-footer-label {
  margin-bottom: 10px;
  color: rgba(16, 47, 45, 0.7);
}

.cx-footer .cx-footer-neighborhoods h3 {
  margin: 0;
  color: #102f2d;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.7px;
}

.cx-footer .cx-footer-neighborhoods p {
  margin: 0;
  color: #102f2d;
  font-size: 15px;
  line-height: 1.9;
}

.cx-footer .cx-footer-neighborhoods strong {
  font-weight: 700;
}

/* Footer Bottom */
.cx-footer .cx-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

.cx-footer .cx-footer-back-top {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: color 0.25s ease;
}

.cx-footer .cx-footer-back-top > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.cx-footer .cx-footer-back-top:hover {
  color: #c49a6c;
}

.cx-footer .cx-footer-back-top:hover > span {
  background: #c49a6c;
  border-color: #c49a6c;
  color: #102f2d;
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1199.98px) {
  .cx-footer .cx-footer-layout {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 35px;
  }

  .cx-footer .cx-footer-zips {
    padding-left: 35px;
  }

  .cx-footer .cx-footer-cities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .cx-footer {
    padding-top: 65px;
  }

  .cx-footer .cx-footer-layout {
    grid-template-columns: 1fr;
    gap: 50px;
    padding: 50px 0;
  }

  .cx-footer .cx-footer-zips {
    padding: 0;
    border-left: 0;
  }

  .cx-footer .cx-footer-cities {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cx-footer .cx-footer-zip-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cx-footer .cx-footer-neighborhoods {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 575.98px) {
  .cx-footer {
    padding-top: 50px;
  }

  .cx-footer .cx-footer-heading {
    align-items: flex-start;
    padding-bottom: 35px;
  }

  .cx-footer .cx-footer-heading h2 {
    font-size: clamp(30px, 9vw, 44px);
    letter-spacing: -1.5px;
  }

  .cx-footer .cx-footer-heading-icon {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    font-size: 21px;
  }

  .cx-footer .cx-footer-layout {
    gap: 45px;
    padding: 40px 0;
  }

  .cx-footer .cx-footer-section-heading h3 {
    font-size: 23px;
  }

  .cx-footer .cx-footer-cities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 15px;
  }

  .cx-footer .cx-footer-cities span {
    font-size: 13px;
  }

  .cx-footer .cx-footer-zip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cx-footer .cx-footer-neighborhoods {
    padding: 30px 25px;
  }

  .cx-footer .cx-footer-neighborhoods h3 {
    font-size: 22px;
  }

  .cx-footer .cx-footer-neighborhoods p {
    font-size: 14px;
  }

  .cx-footer .cx-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

/* ========================================
   BEFORE / AFTER SECTION
======================================== */

.cx-ba {
  --ba-ink: #102f2d;
  --ba-copper: #c49a6c;
  --ba-paper: #f3eee6;
  --ba-line: rgba(16, 47, 45, .14);

  background: var(--ba-paper);
  color: var(--ba-ink);
  padding: clamp(10px, 6vw, 50px) 0;
  font-family: 'DM Sans', Arial, sans-serif;
}

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

.cx-ba .cx-ba-wrap {
  width: min(1440px, calc(100% - 48px));
  margin-inline: auto;
}

/* Hidden radio inputs */
.cx-ba .cx-ba-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Main Layout */
.cx-ba .cx-ba-shell {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  min-height: 500px;
}

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

.cx-ba .cx-ba-intro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 4.2vw, 42px);
  background: var(--ba-ink);
  color: #fff;
  overflow: hidden;
}

.cx-ba .cx-ba-intro::after {
  content: '';
  position: absolute;
  width: 245px;
  height: 245px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
  right: -119px;
  bottom: -115px;
  pointer-events: none;
}

.cx-ba .cx-ba-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ba-copper);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.cx-ba .cx-ba-eyebrow::before {
  content: '';
  width: 29px;
  height: 1px;
  background: currentColor;
}

.cx-ba .cx-ba-intro h2 {
  margin: clamp(40px, 5vw, 70px) 0 22px;
  font-size: clamp(47px, 5vw, 82px);
  line-height: .99;
  letter-spacing: -.065em;
  font-weight: 800;
  color: #fff;
}

.cx-ba .cx-ba-intro h2 span {
  display: block;
  color: var(--ba-copper);
}

.cx-ba .cx-ba-copy {
  max-width: 380px;
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(255, 255, 255, .7);
}

.cx-ba .cx-ba-intro-bottom {
  margin-top: auto;
  padding-top: 42px;
  width: 100%;
}

.cx-ba .cx-ba-rule {
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: 22px;
  background: rgba(255, 255, 255, .18);
}

.cx-ba .cx-ba-link {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 310px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s;
}

.cx-ba .cx-ba-link:hover,
.cx-ba .cx-ba-link:focus-visible {
  color: var(--ba-copper);
}

.cx-ba .cx-ba-link span:last-child {
  font-size: 21px;
  font-weight: 400;
}

/* ========================================
   IMAGE VIEWER
======================================== */

.cx-ba .cx-ba-viewer {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #e3ded5;
}

.cx-ba .cx-ba-image-stage {
  position: relative;
  flex: 1;
  min-height: 480px;
  overflow: hidden;
  isolation: isolate;
  background: #d4cdc1;
}

.cx-ba .cx-ba-image-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 50%;
}

.cx-ba .cx-ba-image-after {
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility .45s;
}

/* Photo Labels */
.cx-ba .cx-ba-photo-label {
  position: absolute;
  z-index: 2;
  left: 22px;
  top: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background: var(--ba-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.cx-ba .cx-ba-photo-label::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--ba-copper);
  border-radius: 50%;
}

.cx-ba .cx-ba-photo-label-after {
  display: none;
}

.cx-ba .cx-ba-side-note {
  position: absolute;
  z-index: 2;
  right: 22px;
  top: 22px;
  color: #fff;
  background: rgba(16, 47, 45, .82);
  padding: 12px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

/* ========================================
   BEFORE / AFTER BUTTONS
======================================== */

.cx-ba .cx-ba-switchboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #fff;
  border-bottom: 1px solid var(--ba-line);
}

.cx-ba .cx-ba-option {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
  min-height: 90px;
  padding: 19px clamp(18px, 2.2vw, 32px);
  cursor: pointer;
  color: #80776b;
  background: #fff;
  transition: background .25s, color .25s;
}

.cx-ba .cx-ba-option + .cx-ba-option {
  border-left: 1px solid var(--ba-line);
}

.cx-ba .cx-ba-option .cx-ba-option-num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
}

.cx-ba .cx-ba-option strong {
  display: block;
  color: inherit;
  font-size: 15px;
  letter-spacing: -.02em;
}

.cx-ba .cx-ba-option small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Active Button */
.cx-ba #cx-ba-before:checked ~ .cx-ba-shell .cx-ba-option-before,
.cx-ba #cx-ba-after:checked ~ .cx-ba-shell .cx-ba-option-after {
  background: var(--ba-copper);
  color: var(--ba-ink);
}

/* Show After Image */
.cx-ba #cx-ba-after:checked ~ .cx-ba-shell .cx-ba-image-after {
  opacity: 1;
  visibility: visible;
}

.cx-ba #cx-ba-after:checked ~ .cx-ba-shell .cx-ba-photo-label-before {
  display: none;
}

.cx-ba #cx-ba-after:checked ~ .cx-ba-shell .cx-ba-photo-label-after {
  display: flex;
}

/* Keyboard Focus */
.cx-ba #cx-ba-before:focus-visible ~ .cx-ba-shell .cx-ba-option-before,
.cx-ba #cx-ba-after:focus-visible ~ .cx-ba-shell .cx-ba-option-after {
  outline: 3px solid var(--ba-ink);
  outline-offset: -5px;
}

/* ========================================
   RELATED SERVICES
======================================== */

.cx-ba .cx-ba-related {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  border: 1px solid var(--ba-line);
  border-top: 0;
  background: #fff;
}

.cx-ba .cx-ba-related-title,
.cx-ba .cx-ba-related-item {
  display: flex;
  align-items: center;
  padding: 23px 28px;
  min-height: 80px;
}

.cx-ba .cx-ba-related-title {
  color: #877b6f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.cx-ba .cx-ba-related-item {
  gap: 13px;
  border-left: 1px solid var(--ba-line);
  font-size: 12px;
  font-weight: 700;
}

.cx-ba .cx-ba-related-item span {
  color: #a28364;
  font-size: 10px;
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1100px) {
  .cx-ba .cx-ba-shell {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  }

  .cx-ba .cx-ba-intro {
    padding: 38px;
  }

  .cx-ba .cx-ba-intro h2 {
    font-size: clamp(43px, 5vw, 65px);
  }

  .cx-ba .cx-ba-related {
    grid-template-columns: 1fr 1fr;
  }

  .cx-ba .cx-ba-related-title,
  .cx-ba .cx-ba-related-item {
    border-bottom: 1px solid var(--ba-line);
  }

  .cx-ba .cx-ba-related-item:nth-child(2) {
    border-left: 1px solid var(--ba-line);
  }

  .cx-ba .cx-ba-related-item:nth-child(3) {
    border-left: 0;
    border-bottom: 0;
  }

  .cx-ba .cx-ba-related-item:nth-child(4) {
    border-bottom: 0;
  }
}

@media (max-width: 767.98px) {
  .cx-ba {
    padding: 45px 0;
  }

  .cx-ba .cx-ba-wrap {
    width: min(100% - 28px, 540px);
  }

  .cx-ba .cx-ba-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .cx-ba .cx-ba-intro {
    padding: 32px 26px 34px;
  }

  .cx-ba .cx-ba-intro h2 {
    margin: 32px 0 19px;
    font-size: clamp(46px, 11vw, 65px);
  }

  .cx-ba .cx-ba-copy {
    font-size: 14px;
    line-height: 1.8;
  }

  .cx-ba .cx-ba-intro-bottom {
    padding-top: 28px;
  }

  .cx-ba .cx-ba-image-stage {
    flex: none;
    min-height: 0;
    aspect-ratio: .9;
  }

  .cx-ba .cx-ba-side-note {
    display: none;
  }

  .cx-ba .cx-ba-photo-label {
    top: 14px;
    left: 14px;
    padding: 10px 12px;
    font-size: 10px;
  }

  .cx-ba .cx-ba-option {
    gap: 10px;
    min-height: 78px;
    padding: 15px 12px;
  }

  .cx-ba .cx-ba-option .cx-ba-option-num {
    flex-basis: 27px;
    width: 27px;
    height: 27px;
  }

  .cx-ba .cx-ba-option strong {
    font-size: 14px;
  }

  .cx-ba .cx-ba-option small {
    font-size: 9px;
  }

  .cx-ba .cx-ba-related-title,
  .cx-ba .cx-ba-related-item {
    padding: 17px 15px;
    min-height: 65px;
  }

  .cx-ba .cx-ba-related-item {
    font-size: 11px;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cx-ba .cx-ba-image-after,
  .cx-ba .cx-ba-option,
  .cx-ba .cx-ba-link {
    transition: none;
  }
}

.cx-ba-slider {
  --position: 50%;
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 0;
  background: #ddd;
  user-select: none;
}

.cx-ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* After stays as the full image */
.cx-ba-after {
  z-index: 1;
}

/* Before is clipped based on slider position */
.cx-ba-slider {
  --position: 50%;
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #ddd;
  user-select: none;
}


.cx-ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  min-height: 500px;
}

/* After */
.cx-ba-after {
  z-index: 1;
}

/* Before container */
.cx-ba-before-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  

  
  clip-path: inset(
    0
    calc(100% - var(--position))
    0
    0
  );
}

/* Before */
.cx-ba-before {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Divider */
.cx-ba-handle {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: var(--position);
  width: 3px;
  background: #fff;
  transform: translateX(-50%);
  pointer-events: none;
}

.cx-ba-handle-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  color: #111;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

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

  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
}

/* Labels */
.cx-ba-label {
  position: absolute;
  z-index: 3;
  top: 20px;

  padding: 8px 14px;
  border-radius: 100px;

  background: rgba(0, 0, 0, 0.55);
  color: #fff;

  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
}

.cx-ba-label-before {
  left: 20px;
}

.cx-ba-label-after {
  right: 20px;
}

/* Invisible real range input */
.cx-ba-range {
  position: absolute;
  z-index: 5;
  inset: 0;

  width: 100%;
  height: 100%;

  opacity: 0;
  cursor: ew-resize;
  margin: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .cx-ba-slider {
    aspect-ratio: 4 / 5;
    border-radius: 0;
  }

  .cx-ba-handle-circle {
    width: 44px;
    height: 44px;
    font-size: 21px;
  }
}

/* locations */
.area-card {
  background: #fff;
  padding: 25px 15px;
  text-align: center;
  border-radius: 12px;
  height: 100%;
  transition: .3s;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
}

.area-card:hover {
  transform: translateY(-5px);
}

.area-card i {
  font-size: 32px;
  color: var(--orange);
  margin-bottom: 12px;
  display: block;
}

.area-card h5 {
  margin: 0;
  font-size: 18px;
}

@media (max-width: 991.98px) {
  .site-header .navbar-brand {
    width: auto;
    max-width: calc(100% - 70px);
    margin-right: 15px;
    flex: 0 0 auto;
  }

  .site-header .navbar-brand img {
    width: auto;
    max-width: 220px;
    height: auto;
  }

  .site-header .navbar-toggler {
    margin-left: auto;
    flex: 0 0 auto;
  }

  .site-header .navbar-collapse {
    flex-basis: 100%;
    width: 100%;
  }
}

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

.cx-brands-section {
  position: relative;
  overflow: hidden;
  padding: 105px 0 95px;
  background: #f4f1ea;
}

.cx-brands-section::before {
  content: "BRANDS";
  position: absolute;
  top: 20px;
  right: -15px;
  font-family: "Manrope", sans-serif;
  font-size: clamp(100px, 15vw, 220px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.07em;
  color: rgba(23, 61, 58, 0.035);
  pointer-events: none;
}

.cx-brands-header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 55px;
}

.cx-brands-heading h2 {
  max-width: 700px;
  margin: 16px 0 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(38px, 4vw, 62px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: #173d3a;
}

.cx-brands-heading h2 span {
  display: block;
  color: #a4b7a0;
}

.cx-brands-header > p {
  max-width: 430px;
  margin: 0 0 5px;
  padding-left: 25px;
  border-left: 1px solid rgba(23, 61, 58, 0.25);
  font-size: 15px;
  line-height: 1.8;
  color: #66736f;
}


/* Slider */

.cx-brands-slider {
  position: relative;
  display: flex;
  align-items: stretch;
  border-top: 1px solid rgba(23, 61, 58, 0.16);
  border-bottom: 1px solid rgba(23, 61, 58, 0.16);
}

.brands-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.brands-track {
  display: flex;
  will-change: transform;
}

.brand-item {
  position: relative;
  min-height: 155px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  border-right: 1px solid rgba(23, 61, 58, 0.14);
}

.brand-item img {
  display: block;
  width: auto;
  max-width: 135px;
  max-height: 58px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.62;
  transition:
    transform 0.4s ease,
    filter 0.4s ease,
    opacity 0.4s ease;
}

.brand-item:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.08);
}


/* Arrows */

.brands-arrow {
  flex: 0 0 72px;
  width: 72px;
  min-height: 155px;
  border: 0;
  background: transparent;
  color: #173d3a;
  font-size: 22px;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

.brands-prev {
  border-right: 1px solid rgba(23, 61, 58, 0.16);
}

.brands-next {
  border-left: 1px solid rgba(23, 61, 58, 0.16);
}

.brands-arrow:hover {
  background: #173d3a;
  color: #fff;
}


/* Responsive */

@media (max-width: 991px) {

  .cx-brands-section {
    padding: 80px 0;
  }

  .cx-brands-header {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 40px;
  }

  .cx-brands-header > p {
    max-width: 600px;
  }

  .brands-arrow {
    flex-basis: 58px;
    width: 58px;
  }
}

@media (max-width: 575px) {

  .cx-brands-section {
    padding: 65px 0;
  }

  .cx-brands-heading h2 {
    font-size: 36px;
  }

  .cx-brands-header > p {
    padding-left: 18px;
  }

  .brand-item {
    min-height: 125px;
    padding: 22px 15px;
  }

  .brand-item img {
    max-width: 100px;
    max-height: 45px;
  }

  .brands-arrow {
    flex-basis: 45px;
    width: 45px;
    min-height: 125px;
    font-size: 18px;
  }
}