/* =========================================================
   LAWRENCE GARAGE DOOR PRO
   FULL CSS — HEADER + NAVBAR + HERO
========================================================= */


/* =========================================================
   01. COLORS
========================================================= */
/* =========================================================
   ROOT
========================================================= */

:root {
  --navy: #172435;
  --navy-dark: #0d1724;
  --navy-soft: #223247;

  --orange: #ff8f1f;
  --orange-dark: #e8780d;
  --orange-light: #ffa142;

  --white: #ffffff;
  --light: #f5f5f5;

  --text: #20282f;
  --gray: #6f757b;

  --border: rgba(23, 36, 53, 0.12);

  --lr-left-orange-width: 320px;

  --transition:
    350ms cubic-bezier(0.22, 1, 0.36, 1);
}


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

.lr-site-header {
  position: relative;

  z-index: 1000;

  width: 100%;
}


/* =========================================================
   TOP BAR
========================================================= */

.lr-topbar {
  position: relative;

  min-height: 42px;

  overflow: hidden;

  background:
    var(--navy-dark);
}


/* LEFT ORANGE SHAPE */

.lr-topbar::before {
  content: "";

  position: absolute;

  z-index: 1;

  top: 0;
  left: 0;

  width:
    var(--lr-left-orange-width);

  height: 100%;

  background:
    white;

  clip-path:
    polygon(0 0,
      100% 0,
      calc(100% - 46px) 100%,
      0 100%);
}


/* RIGHT ORANGE SHAPE */

.lr-topbar::after {
  content: "";

  position: absolute;

  z-index: 1;

  top: 0;
  right: 0;

  width: 245px;

  height: 100%;

  background:
    var(--orange);

  clip-path:
    polygon(44px 0,
      100% 0,
      100% 100%,
      0 100%);
}


/* =========================================================
   TOP BAR INNER
========================================================= */

.lr-topbar-container {
  position: relative;

  z-index: 3;

  padding:
    0 22px;
}


.lr-topbar-inner {
  display: grid;

  grid-template-columns:
    var(--lr-left-orange-width) minmax(0, 1fr) 220px;

  align-items: center;

  min-height: 42px;
}


/* =========================================================
   TOPBAR LEFT
========================================================= */

.lr-topbar-left {
  position: relative;

  z-index: 5;
}


.lr-topbar-status {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color:
    var(--navy-dark);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.66rem;

  font-weight: 900;

  letter-spacing: 0.055em;

  white-space: nowrap;
}


.lr-topbar-status-dot {
  position: relative;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background:
    var(--white);
}


.lr-topbar-status-dot::before {
  content: "";

  position: absolute;

  inset: -4px;

  border:
    1px solid rgba(255, 255, 255, 0.60);

  border-radius: 50%;

  animation:
    lrStatusPulse 2s ease-out infinite;
}


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

.lr-topbar-contact {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 16px;

  min-width: 0;
}


.lr-topbar-contact a {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color:
    rgba(255, 255, 255, 0.84);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.75rem;

  font-weight: 600;

  white-space: nowrap;

  text-decoration: none;

  transition:
    color var(--transition);
}


.lr-topbar-contact a:hover {
  color:
    var(--orange-light);
}


.lr-topbar-contact i {
  color:
    var(--orange);
}


.lr-topbar-contact strong {
  color:
    var(--white);

  font-weight: 900;
}


.lr-topbar-divider {
  width: 1px;

  height: 16px;

  background:
    rgba(255, 255, 255, 0.16);
}


/* =========================================================
   TOPBAR SOCIALS
========================================================= */

.lr-topbar-social {
  position: relative;

  z-index: 5;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 9px;

  padding-right: 5px;
}


.lr-topbar-social a {
  display: grid;

  place-items: center;

  width: 26px;

  height: 26px;

  border-radius: 50%;

  color:
    var(--navy-dark);

  font-size: 0.7rem;

  text-decoration: none;

  transition:
    background var(--transition),
    color var(--transition),
    transform var(--transition);
}


.lr-topbar-social a:hover {
  background:
    var(--navy-dark);

  color:
    var(--white);

  transform:
    translateY(-2px);
}


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

.lr-navbar {
  position: relative;

  z-index: 30;

  min-height: 92px;

  padding: 0;

  background:
    var(--white);

  box-shadow:
    0 7px 24px rgba(13, 23, 36, 0.09);
}


.lr-navbar-inner {
  display: grid;

  grid-template-columns:
    var(--lr-left-orange-width) minmax(0, 1fr) 180px;

  align-items: center;

  min-height: 92px;

  padding:
    0 22px 0 0;
}


/* =========================================================
   LOGO ORANGE AREA
========================================================= */

.lr-navbar-brand {
  position: relative;

  z-index: 5;

  display: flex;

  align-items: center;

  width:
    var(--lr-left-orange-width);

  height: 92px;

  padding:
    7px 70px 7px 20px;

  overflow: hidden;
}


.lr-navbar-brand-bg {
  position: absolute;

  z-index: -1;

  inset: 0;

  background:
    var(--orange);

  clip-path:
    polygon(0 0,
      calc(100% - 42px) 0,
      calc(100% - 92px) 100%,
      0 100%);
}


.lr-navbar-logo {
  display: block;

  width: 190px;

  max-width: 100%;

  height: auto;

  object-fit: contain;
}


/* =========================================================
   NAV MENU
========================================================= */

.lr-navbar-menu {
  display: flex;

  align-items: center;

  justify-content: center;

  min-width: 0;

  height: 100%;
}


.lr-navbar-nav {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0;

  margin: 0;

  padding: 0;

  list-style: none;
}


.lr-navbar-nav>li {
  position: relative;
}


/* NAV ITEMS */

.lr-navbar-nav>li>a,
.lr-services-toggle {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

  min-height: 92px;

  padding:
    0 7px;

  border: 0;

  background: transparent;

  color:
    var(--navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.84rem;

  font-weight: 900;

  letter-spacing: 0.012em;

  white-space: nowrap;

  text-decoration: none;

  cursor: pointer;

  transition:
    color var(--transition);
}


/* ORANGE UNDERLINE */

.lr-navbar-nav>li>a::after,
.lr-services-toggle::after {
  content: "";

  position: absolute;

  left: 50%;

  bottom: 20px;

  width: 0;

  height: 3px;

  border-radius: 4px;

  background:
    var(--orange);

  transform:
    translateX(-50%);

  transition:
    width var(--transition);
}


.lr-navbar-nav>li>a:hover,
.lr-navbar-nav>li>a.active,
.lr-services-toggle:hover,
.lr-services-dropdown.services-open .lr-services-toggle {
  color:
    var(--orange);
}


.lr-navbar-nav>li>a:hover::after,
.lr-navbar-nav>li>a.active::after,
.lr-services-toggle:hover::after,
.lr-services-dropdown.services-open .lr-services-toggle::after {
  width: 28px;
}


.lr-services-toggle>i {
  font-size: 0.62rem;

  transition:
    transform var(--transition);
}


.lr-services-dropdown.services-open .lr-services-toggle>i {
  transform:
    rotate(180deg);
}


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

.lr-services-dropdown {
  position: relative;
}


.lr-services-menu {
  position: absolute;

  z-index: 1300;

  top:
    calc(100% - 1px);

  left: 50%;

  display: none;

  width: 295px;

  margin: 0;

  padding: 9px;

  border: 0;

  border-top:
    4px solid var(--orange);

  border-radius:
    0 0 17px 17px;

  background:
    var(--navy-dark);

  list-style: none;

  box-shadow:
    0 23px 50px rgba(0, 0, 0, 0.25);

  transform:
    translateX(-50%);
}


.lr-services-dropdown.services-open .lr-services-menu {
  display: block;

  animation:
    lrDropdownIn 240ms ease;
}


.lr-services-menu a {
  display: flex;

  align-items: center;

  gap: 11px;

  padding: 11px;

  border-radius: 11px;

  color:
    var(--white);

  text-decoration: none;

  transition:
    background var(--transition),
    transform var(--transition);
}


.lr-services-menu a:hover {
  background:
    rgba(255, 143, 31, 0.12);

  transform:
    translateX(4px);
}


.lr-services-menu a>span {
  display: grid;

  flex: 0 0 39px;

  place-items: center;

  width: 39px;

  height: 39px;

  border-radius: 11px;

  background:
    rgba(255, 143, 31, 0.12);

  color:
    var(--orange);
}


.lr-services-menu a:hover>span {
  background:
    var(--orange);

  color:
    var(--white);
}


.lr-services-menu a>div {
  display: flex;

  flex-direction: column;
}


.lr-services-menu strong {
  color:
    var(--white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.86rem;

  font-weight: 900;
}


.lr-services-menu small {
  margin-top: 2px;

  color:
    rgba(255, 255, 255, 0.47);

  font-size: 0.65rem;
}


/* =========================================================
   NAV ESTIMATE CTA
========================================================= */

.lr-navbar-action {
  display: flex;

  justify-content: flex-end;
}


.lr-navbar-estimate {
  display: flex;

  align-items: center;

  gap: 9px;

  padding:
    7px 13px 7px 7px;

  border-radius: 50px;

  background:
    var(--navy);

  color:
    var(--white);

  text-decoration: none;

  box-shadow:
    0 10px 23px rgba(23, 36, 53, 0.15);

  transition:
    background var(--transition),
    transform var(--transition);
}


.lr-navbar-estimate:hover {
  background:
    var(--navy-dark);

  color:
    var(--white);

  transform:
    translateY(-3px);
}


.lr-navbar-estimate-icon {
  display: grid;

  place-items: center;

  width: 39px;

  height: 39px;

  border-radius: 50%;

  background:
    var(--orange);

  color:
    var(--white);
}


.lr-navbar-estimate>span:last-child {
  display: flex;

  flex-direction: column;
}


.lr-navbar-estimate small {
  color:
    rgba(255, 255, 255, 0.47);

  font-size: 0.48rem;

  font-weight: 700;
}


.lr-navbar-estimate strong {
  margin-top: 2px;

  color:
    var(--white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.69rem;

  font-weight: 900;

  white-space: nowrap;
}


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

.lr-navbar-toggler {
  position: relative;

  display: none;

  width: 48px;

  height: 48px;

  margin-left: auto;

  padding: 0;

  border:
    2px solid var(--navy);

  border-radius: 13px;

  background:
    var(--white);

  cursor: pointer;
}


.lr-navbar-toggler span {
  position: absolute;

  left: 50%;

  display: block;

  width: 23px;

  height: 3px;

  border-radius: 3px;

  background:
    var(--navy);

  transform:
    translateX(-50%);

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


.lr-navbar-toggler span:nth-child(1) {
  top: 14px;
}


.lr-navbar-toggler span:nth-child(2) {
  top: 22px;
}


.lr-navbar-toggler span:nth-child(3) {
  top: 30px;
}


.lr-site-header.nav-open .lr-navbar-toggler span:nth-child(1) {
  top: 22px;

  transform:
    translateX(-50%) rotate(45deg);
}


.lr-site-header.nav-open .lr-navbar-toggler span:nth-child(2) {
  opacity: 0;
}


.lr-site-header.nav-open .lr-navbar-toggler span:nth-child(3) {
  top: 22px;

  transform:
    translateX(-50%) rotate(-45deg);
}


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

.lr-hero {
  position: relative;

  display: flex;

  align-items: center;

  min-height: 760px;

  padding:
    75px 0;

  overflow: hidden;

  isolation: isolate;

  background-image:
    url("../img/hero-img.webp");

  background-size: cover;

  background-position:
    center;

  background-repeat: no-repeat;
}


/* =========================================================
   HERO OVERLAY
========================================================= */

.lr-hero-overlay {
  position: absolute;

  z-index: 0;

  inset: 0;

  background:
    linear-gradient(90deg,
      rgba(13, 23, 36, 0.98) 0%,
      rgba(13, 23, 36, 0.95) 34%,
      rgba(23, 36, 53, 0.76) 58%,
      rgba(23, 36, 53, 0.25) 100%);
}


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

.lr-hero-grid {
  position: absolute;

  z-index: 1;

  inset: 0;

  opacity: 0.045;

  pointer-events: none;

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

  background-size:
    60px 60px;
}


/* =========================================================
   HERO BACKGROUND TOOLS
========================================================= */

.lr-hero-tools {
  position: absolute;

  z-index: 1;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


.lr-hero-tools i {
  position: absolute;

  opacity: 0.06;
}


.lr-hero-tool-wrench {
  top: 9%;

  left: 2%;

  color:
    var(--orange);

  font-size: 7rem;

  animation:
    lrHeroWrench 8s ease-in-out infinite;
}


.lr-hero-tool-gear {
  right: -50px;

  bottom: 5%;

  color:
    var(--white);

  font-size: 11rem;

  animation:
    lrHeroGear 22s linear infinite;
}


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

.lr-hero-container {
  position: relative;

  z-index: 5;

  max-width: 1380px;
}


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

.lr-hero-content {
  max-width: 750px;
}


/* =========================================================
   PRETITLE
========================================================= */

.lr-hero-pretitle {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 9px;

  margin-bottom: 18px;

  color:
    var(--white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.71rem;

  font-weight: 800;

  letter-spacing: 0.075em;
}


.lr-hero-pretitle-icon {
  display: grid;

  place-items: center;

  width: 36px;

  height: 36px;

  border:
    1px solid rgba(255, 143, 31, 0.35);

  border-radius: 11px;

  background:
    rgba(255, 143, 31, 0.10);

  color:
    var(--orange);
}


/* SAME DAY PILL */

.lr-hero-live {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding:
    6px 10px;

  border:
    1px solid rgba(255, 255, 255, 0.12);

  border-radius: 50px;

  background:
    rgba(255, 255, 255, 0.055);

  color:
    rgba(255, 255, 255, 0.72);

  font-size: 0.56rem;
}


.lr-hero-live>span {
  position: relative;

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background:
    var(--orange);
}


.lr-hero-live>span::before {
  content: "";

  position: absolute;

  inset: -4px;

  border:
    1px solid rgba(255, 143, 31, 0.5);

  border-radius: 50%;

  animation:
    lrHeroLivePulse 2s ease-out infinite;
}


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

.lr-hero-title {
  max-width: 760px;

  margin: 0;

  color:
    var(--white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

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

  font-weight: 900;

  line-height: 0.91;

  letter-spacing: -0.045em;
}


.lr-hero-title span {
  display: block;

  margin-top: 8px;

  color:
    var(--orange);
}


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

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

  margin:
    25px 0 0;

  color:
    rgba(255, 255, 255, 0.76);

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

  font-size: 1rem;

  line-height: 1.82;
}


/* =========================================================
   HERO TRUST
========================================================= */

.lr-hero-trust {
  display: flex;

  flex-wrap: wrap;

  gap:
    11px 20px;

  margin-top: 20px;
}


.lr-hero-trust span {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color:
    rgba(255, 255, 255, 0.76);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.8rem;

  font-weight: 700;
}


.lr-hero-trust i {
  color:
    var(--orange);
}


/* =========================================================
   HERO ACTIONS
========================================================= */

.lr-hero-actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 30px;
}


/* =========================================================
   HERO PHONE
========================================================= */

.lr-hero-phone {
  display: flex;

  align-items: center;

  gap: 11px;

  min-height: 64px;

  padding:
    7px 13px 7px 7px;

  border:
    1px solid rgba(255, 255, 255, 0.15);

  border-radius: 50px;

  background:
    rgba(255, 255, 255, 0.075);

  color:
    var(--white);

  text-decoration: none;

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  transition:
    border-color var(--transition),
    background var(--transition),
    transform var(--transition);
}


.lr-hero-phone:hover {
  border-color:
    rgba(255, 143, 31, 0.48);

  background:
    rgba(255, 143, 31, 0.10);

  color:
    var(--white);

  transform:
    translateY(-4px);
}


/* PHONE ICON */

.lr-hero-phone-icon {
  position: relative;

  display: grid;

  flex: 0 0 49px;

  place-items: center;

  width: 49px;

  height: 49px;

  border-radius: 50%;

  background:
    var(--orange);

  color:
    var(--white);

  box-shadow:
    0 10px 24px rgba(255, 143, 31, 0.27);
}


.lr-hero-phone-icon::before {
  content: "";

  position: absolute;

  inset: -6px;

  border:
    2px solid rgba(255, 143, 31, 0.35);

  border-radius: 50%;

  animation:
    lrHeroPhoneRing 2s ease-out infinite;
}


.lr-hero-phone-icon i {
  animation:
    lrHeroPhoneShake 2.7s ease-in-out infinite;
}


.lr-hero-phone-text {
  display: flex;

  flex-direction: column;
}


.lr-hero-phone-text small {
  color:
    rgba(255, 255, 255, 0.47);

  font-size: 0.55rem;

  font-weight: 700;

  letter-spacing: 0.05em;
}


.lr-hero-phone-text strong {
  margin-top: 2px;

  color:
    var(--white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1.13rem;

  font-weight: 900;
}


.lr-hero-phone-arrow {
  display: grid;

  place-items: center;

  width: 35px;

  height: 35px;

  margin-left: 3px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.07);

  color:
    var(--orange);

  transition:
    background var(--transition),
    color var(--transition),
    transform var(--transition);
}


.lr-hero-phone:hover .lr-hero-phone-arrow {
  background:
    var(--orange);

  color:
    var(--white);

  transform:
    translate(3px, -3px);
}


/* =========================================================
   HERO ESTIMATE
========================================================= */

.lr-hero-estimate {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 11px;

  min-height: 64px;

  padding:
    0 28px;

  overflow: hidden;

  border:
    2px solid var(--orange);

  border-radius:
    50px 13px 50px 13px;

  background:
    var(--orange);

  color:
    var(--white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.91rem;

  font-weight: 900;

  letter-spacing: 0.03em;

  text-decoration: none;

  box-shadow:
    0 14px 30px rgba(255, 143, 31, 0.27);

  transition:
    background var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
}


.lr-hero-estimate::before {
  content: "";

  position: absolute;

  top: -30%;

  left: -55%;

  width: 30%;

  height: 160%;

  background:
    linear-gradient(110deg,
      transparent,
      rgba(255, 255, 255, 0.45),
      transparent);

  transform:
    skewX(-20deg);

  animation:
    lrHeroButtonShine 3.5s ease-in-out infinite;
}


.lr-hero-estimate:hover {
  background:
    var(--orange-dark);

  color:
    var(--white);

  transform:
    translateY(-4px);

  box-shadow:
    0 20px 38px rgba(255, 143, 31, 0.35);
}


/* =========================================================
   MINI SERVICE STRIP
========================================================= */

.lr-hero-mini-services {
  display: inline-flex;

  align-items: center;

  gap: 17px;

  margin-top: 32px;

  padding:
    14px 17px;

  border:
    1px solid rgba(255, 255, 255, 0.10);

  border-radius: 15px;

  background:
    rgba(13, 23, 36, 0.45);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


.lr-hero-mini-services>div {
  display: flex;

  align-items: center;

  gap: 9px;
}


.lr-hero-mini-services>div>i {
  color:
    var(--orange);

  font-size: 1rem;
}


.lr-hero-mini-services>div>span {
  display: flex;

  flex-direction: column;
}


.lr-hero-mini-services small {
  color:
    rgba(255, 255, 255, 0.40);

  font-size: 0.48rem;

  font-weight: 700;

  letter-spacing: 0.07em;
}


.lr-hero-mini-services strong {
  margin-top: 2px;

  color:
    var(--white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.75rem;

  font-weight: 800;
}


.lr-hero-mini-divider {
  width: 1px;

  height: 30px;

  background:
    rgba(255, 255, 255, 0.11);
}


/* =========================================================
   RIGHT HERO VISUAL
========================================================= */

.lr-hero-visual {
  position: relative;

  width: 100%;

  max-width: 535px;

  min-height: 635px;

  margin-left: auto;

  padding:
    0 13px 65px 18px;
}


/* =========================================================
   LARGE IMAGE ARCH
========================================================= */

.lr-hero-arch {
  position: relative;

  width: 100%;

  height: 610px;

  padding: 0;

  overflow: hidden;

  border:
    2px solid rgba(255, 143, 31, 0.78);

  border-radius:
    270px 270px 38px 38px;

  background:
    var(--navy-dark);

  box-shadow:
    0 32px 72px rgba(0, 0, 0, 0.34);
}


/* INNER ARCH */

.lr-hero-arch::before {
  content: "";

  position: absolute;

  z-index: 6;

  inset: 11px;

  border:
    1px solid rgba(255, 143, 31, 0.34);

  border-radius:
    255px 255px 29px 29px;

  pointer-events: none;
}


/* =========================================================
   ARCH IMAGE
========================================================= */

.lr-hero-arch-image {
  position: absolute;

  z-index: 1;

  inset: 0;

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transition:
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}


.lr-hero-arch:hover .lr-hero-arch-image {
  transform:
    scale(1.055);
}


/* =========================================================
   ARCH IMAGE OVERLAY
========================================================= */

.lr-hero-arch-overlay {
  position: absolute;

  z-index: 2;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(180deg,
      rgba(13, 23, 36, 0.15) 0%,
      rgba(13, 23, 36, 0.02) 37%,
      rgba(13, 23, 36, 0.25) 61%,
      rgba(13, 23, 36, 0.96) 100%);
}


/* =========================================================
   ARCH TOP LABEL
========================================================= */

.lr-hero-arch-top {
  position: absolute;

  z-index: 8;

  top: 39px;

  left: 50%;

  display: flex;

  align-items: center;

  gap: 10px;

  padding:
    8px 15px 8px 8px;

  border:
    1px solid rgba(255, 255, 255, 0.16);

  border-radius: 50px;

  background:
    rgba(13, 23, 36, 0.82);

  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.18);

  backdrop-filter:
    blur(9px);

  -webkit-backdrop-filter:
    blur(9px);

  transform:
    translateX(-50%);

  white-space: nowrap;
}


.lr-hero-arch-top>span {
  display: grid;

  flex: 0 0 38px;

  place-items: center;

  width: 38px;

  height: 38px;

  border-radius: 50%;

  background:
    rgba(255, 143, 31, 0.15);

  color:
    var(--orange);
}


.lr-hero-arch-top>div {
  display: flex;

  flex-direction: column;
}


.lr-hero-arch-top small {
  color:
    rgba(255, 255, 255, 0.50);

  font-size: 0.49rem;

  font-weight: 700;
}


.lr-hero-arch-top strong {
  margin-top: 2px;

  color:
    var(--white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.79rem;

  font-weight: 900;
}


/* =========================================================
   IMAGE COPY
========================================================= */

.lr-hero-image-copy {
  position: absolute;

  z-index: 8;

  left: 38px;

  right: 38px;

  bottom: 110px;

  padding-left: 16px;

  border-left:
    4px solid var(--orange);
}


.lr-hero-image-copy small {
  display: block;

  color:
    var(--orange-light);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.57rem;

  font-weight: 900;

  letter-spacing: 0.08em;
}


.lr-hero-image-copy strong {
  display: block;

  margin-top: 5px;

  color:
    var(--white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1.7rem;

  font-weight: 900;

  line-height: 1.05;
}


.lr-hero-image-copy p {
  margin:
    7px 0 0;

  color:
    rgba(255, 255, 255, 0.70);

  font-size: 0.72rem;
}


/* =========================================================
   ARCH BOTTOM STATUS
========================================================= */

.lr-hero-arch-bottom {
  position: absolute;

  z-index: 8;

  left: 28px;

  right: 28px;

  bottom: 28px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding:
    11px 13px;

  border:
    1px solid rgba(255, 255, 255, 0.13);

  border-radius: 14px;

  background:
    rgba(13, 23, 36, 0.80);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


.lr-hero-arch-bottom>div {
  display: flex;

  flex-direction: column;
}


.lr-hero-arch-bottom small {
  color:
    rgba(255, 255, 255, 0.48);

  font-size: 0.48rem;

  font-weight: 700;
}


.lr-hero-arch-bottom strong {
  margin-top: 2px;

  color:
    var(--white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.84rem;

  font-weight: 900;
}


.lr-hero-arch-check {
  display: grid;

  flex: 0 0 38px;

  place-items: center;

  width: 38px;

  height: 38px;

  border-radius: 50%;

  background:
    var(--orange);

  color:
    var(--white);
}


/* =========================================================
   FREE ESTIMATE BADGE
========================================================= */

.lr-hero-offer {
  position: absolute;

  z-index: 10;

  right: -22px;

  bottom: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 155px;

  height: 155px;

  border:
    7px solid var(--white);

  border-radius: 50%;

  background:
    var(--orange);

  color:
    var(--white);

  text-align: center;

  box-shadow:
    0 21px 46px rgba(255, 143, 31, 0.34);

  animation:
    lrHeroOfferFloat 3.2s ease-in-out infinite;
}


.lr-hero-offer::before {
  content: "";

  position: absolute;

  inset: -14px;

  border:
    2px solid rgba(255, 143, 31, 0.34);

  border-radius: 50%;

  animation:
    lrHeroOfferRing 2.4s ease-out infinite;
}


.lr-hero-offer small,
.lr-hero-offer span {
  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.53rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}


.lr-hero-offer strong {
  color:
    var(--white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1.38rem;

  font-weight: 900;

  line-height: 0.93;
}


/* =========================================================
   FLOATING SAME DAY PILL
========================================================= */

.lr-hero-floating-pill {
  position: absolute;

  z-index: 10;

  left: -28px;

  bottom: 82px;

  display: flex;

  align-items: center;

  gap: 10px;

  padding:
    10px 16px 10px 9px;

  border:
    1px solid rgba(23, 36, 53, 0.08);

  border-radius: 50px;

  background:
    var(--white);

  box-shadow:
    0 16px 35px rgba(0, 0, 0, 0.19);

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


.lr-hero-floating-pill>span {
  display: grid;

  place-items: center;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background:
    rgba(255, 143, 31, 0.12);

  color:
    var(--orange);
}


.lr-hero-floating-pill>div {
  display: flex;

  flex-direction: column;
}


.lr-hero-floating-pill small {
  color:
    var(--gray);

  font-size: 0.47rem;

  font-weight: 700;
}


.lr-hero-floating-pill strong {
  margin-top: 2px;

  color:
    var(--navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.79rem;

  font-weight: 900;
}


/* =========================================================
   BOTTOM ORANGE ACCENT
========================================================= */

.lr-hero-bottom-accent {
  position: absolute;

  z-index: 8;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 5px;

  background:
    linear-gradient(90deg,
      var(--orange-dark),
      var(--orange-light),
      var(--orange-dark));

  background-size:
    200% 100%;

  animation:
    lrHeroBottomLine 4s linear infinite;
}


/* =========================================================
   DESKTOP SERVICES HOVER
========================================================= */

@media (min-width: 1200px) {

  .lr-services-dropdown:hover .lr-services-menu {
    display: block;
  }


  .lr-services-dropdown:hover .lr-services-toggle {
    color:
      var(--orange);
  }


  .lr-services-dropdown:hover .lr-services-toggle::after {
    width: 28px;
  }


  .lr-services-dropdown:hover .lr-services-toggle>i {
    transform:
      rotate(180deg);
  }

}


/* =========================================================
   1200 - 1399
========================================================= */

@media (min-width: 1200px) and (max-width: 1399.98px) {

  :root {
    --lr-left-orange-width: 255px;
  }


  .lr-topbar::after {
    width: 220px;
  }


  .lr-topbar-inner {
    grid-template-columns:
      var(--lr-left-orange-width) minmax(0, 1fr) 195px;
  }


  .lr-navbar-inner {
    grid-template-columns:
      var(--lr-left-orange-width) minmax(0, 1fr) 0;
  }


  .lr-navbar-brand {
    padding-right: 57px;
  }


  .lr-navbar-logo {
    width: 168px;
  }


  .lr-navbar-action {
    display: none;
  }


  .lr-navbar-nav>li>a,
  .lr-services-toggle {
    padding:
      0 5px;

    font-size: 0.78rem;
  }


  .lr-hero-visual {
    max-width: 475px;

    min-height: 585px;
  }


  .lr-hero-arch {
    height: 560px;

    border-radius:
      240px 240px 34px 34px;
  }


  .lr-hero-arch::before {
    border-radius:
      225px 225px 25px 25px;
  }


  .lr-hero-offer {
    width: 140px;

    height: 140px;
  }

}


/* =========================================================
   MOBILE NAV BELOW 1200
========================================================= */

@media (max-width: 1199.98px) {

  .lr-topbar::before,
  .lr-topbar::after {
    display: none;
  }


  .lr-topbar-inner {
    display: flex;

    justify-content: center;

    min-height: 44px;
  }


  .lr-topbar-left,
  .lr-topbar-social {
    display: none;
  }


  .lr-navbar,
  .lr-navbar-inner {
    min-height: 82px;
  }


  .lr-navbar-inner {
    display: flex;

    padding-right: 18px;
  }


  .lr-navbar-brand {
    width: 270px;

    height: 82px;

    padding:
      7px 50px 7px 20px;
  }


  .lr-navbar-brand-bg {
    clip-path:
      polygon(0 0,
        calc(100% - 35px) 0,
        calc(100% - 70px) 100%,
        0 100%);
  }


  .lr-navbar-logo {
    width: 200px;
  }


  .lr-navbar-action {
    display: none;
  }


  .lr-navbar-toggler {
    display: block;
  }


  .lr-navbar-menu {
    position: absolute;

    z-index: 1400;

    top: 100%;

    left: 0;
    right: 0;

    display: none;

    width: 100%;

    height: auto;

    padding:
      15px 22px 24px;

    background:
      var(--white);

    box-shadow:
      0 20px 40px rgba(13, 23, 36, 0.15);
  }


  .lr-site-header.nav-open .lr-navbar-menu {
    display: block;
  }


  .lr-navbar-nav {
    flex-direction: column;

    align-items: stretch;

    width: 100%;
  }


  .lr-navbar-nav>li {
    width: 100%;
  }


  .lr-navbar-nav>li>a,
  .lr-services-toggle {
    justify-content: flex-start;

    width: 100%;

    min-height: auto;

    padding:
      14px 6px;

    border-bottom:
      1px solid rgba(23, 36, 53, 0.075);

    font-size: 1rem;
  }


  .lr-navbar-nav>li>a::after,
  .lr-services-toggle::after {
    left: 6px;

    bottom: 5px;

    transform: none;
  }


  .lr-services-toggle>i {
    margin-left: auto;
  }


  .lr-services-menu {
    position: static;

    width: 100%;

    margin:
      5px 0 8px;

    transform: none;

    border-radius: 13px;
  }


  .lr-services-dropdown.services-open .lr-services-menu {
    animation: none;
  }

}


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

@media (max-width: 991.98px) {

  .lr-hero {
    min-height: 650px;

    padding:
      85px 0;

    background-position:
      62% center;
  }


  .lr-hero-overlay {
    background:
      linear-gradient(90deg,
        rgba(13, 23, 36, 0.98),
        rgba(23, 36, 53, 0.88));
  }


  .lr-hero-content {
    max-width: 730px;
  }


  .lr-hero-title {
    font-size:
      clamp(3.1rem,
        8vw,
        5rem);
  }

}


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

@media (max-width: 767.98px) {

  .lr-topbar {
    padding:
      7px 0;
  }


  .lr-topbar-container {
    padding:
      0 15px;
  }


  .lr-topbar-contact {
    gap: 11px;
  }


  .lr-topbar-contact a {
    font-size: 0.7rem;
  }


  .lr-navbar,
  .lr-navbar-inner {
    min-height: 76px;
  }


  .lr-navbar-brand {
    width: 235px;

    height: 76px;

    padding:
      7px 44px 7px 15px;
  }


  .lr-navbar-logo {
    width: 175px;
  }


  .lr-hero {
    min-height: 620px;

    padding:
      72px 0;

    background-position:
      63% center;
  }


  .lr-hero-content {
    max-width: 100%;

    text-align: center;
  }


  .lr-hero-pretitle {
    justify-content: center;
  }


  .lr-hero-title {
    font-size:
      clamp(2.8rem,
        11vw,
        4.2rem);

    line-height: 0.94;
  }


  .lr-hero-description {
    margin-right: auto;

    margin-left: auto;

    font-size: 0.94rem;
  }


  .lr-hero-trust {
    justify-content: center;
  }


  .lr-hero-actions {
    justify-content: center;
  }


  .lr-hero-mini-services {
    margin-right: auto;

    margin-left: auto;
  }

}


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

@media (max-width: 575.98px) {

  .lr-topbar-contact {
    flex-direction: column;

    gap: 5px;
  }


  .lr-topbar-divider {
    display: none;
  }


  .lr-topbar-contact a {
    justify-content: center;

    width: 100%;

    font-size: 0.67rem;
  }


  .lr-navbar,
  .lr-navbar-inner {
    min-height: 70px;
  }


  .lr-navbar-inner {
    padding-right: 12px;
  }


  .lr-navbar-brand {
    width: 205px;

    height: 70px;

    padding:
      6px 38px 6px 12px;
  }


  .lr-navbar-logo {
    width: 154px;
  }


  .lr-navbar-toggler {
    width: 44px;

    height: 44px;
  }


  .lr-hero {
    min-height: 610px;

    padding:
      64px 0;
  }


  .lr-hero-pretitle {
    justify-content: center;

    gap: 7px;

    font-size: 0.62rem;
  }


  .lr-hero-title {
    font-size:
      clamp(2.5rem,
        12vw,
        3.55rem);
  }


  .lr-hero-description {
    font-size: 0.88rem;

    line-height: 1.72;
  }


  .lr-hero-actions {
    flex-direction: column;

    align-items: stretch;

    gap: 13px;
  }


  .lr-hero-phone,
  .lr-hero-estimate {
    width: 100%;
  }


  .lr-hero-phone {
    justify-content: flex-start;
  }


  .lr-hero-estimate {
    min-height: 58px;
  }


  .lr-hero-mini-services {
    display: grid;

    grid-template-columns: 1fr;

    width: 100%;

    gap: 10px;

    margin-top: 25px;

    text-align: left;
  }


  .lr-hero-mini-divider {
    width: 100%;

    height: 1px;
  }

}


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

@media (max-width: 380px) {

  .lr-navbar-brand {
    width: 185px;

    padding-right: 34px;
  }


  .lr-navbar-logo {
    width: 140px;
  }


  .lr-hero-title {
    font-size: 2.35rem;
  }


  .lr-hero-description {
    font-size: 0.84rem;
  }

}


/* =========================================================
   FOCUS
========================================================= */

.lr-navbar-nav a:focus-visible,
.lr-services-toggle:focus-visible,
.lr-navbar-estimate:focus-visible,
.lr-navbar-toggler:focus-visible,
.lr-hero-phone:focus-visible,
.lr-hero-estimate:focus-visible {
  outline:
    3px solid var(--orange);

  outline-offset: 3px;
}


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

@keyframes lrStatusPulse {

  0% {
    opacity: 0.7;

    transform:
      scale(0.8);
  }

  100% {
    opacity: 0;

    transform:
      scale(1.7);
  }

}


@keyframes lrDropdownIn {

  from {
    opacity: 0;

    transform:
      translateX(-50%) translateY(8px);
  }

  to {
    opacity: 1;

    transform:
      translateX(-50%) translateY(0);
  }

}


@keyframes lrHeroWrench {

  0%,
  100% {
    transform:
      translateY(0) rotate(-20deg);
  }

  50% {
    transform:
      translateY(-20px) rotate(-8deg);
  }

}


@keyframes lrHeroGear {

  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(360deg);
  }

}


@keyframes lrHeroLivePulse {

  0% {
    opacity: 0.7;

    transform:
      scale(0.8);
  }

  100% {
    opacity: 0;

    transform:
      scale(1.7);
  }

}


@keyframes lrHeroPhoneRing {

  0% {
    opacity: 0.75;

    transform:
      scale(0.9);
  }

  100% {
    opacity: 0;

    transform:
      scale(1.42);
  }

}


@keyframes lrHeroPhoneShake {

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

  83% {
    transform:
      rotate(-11deg);
  }

  87% {
    transform:
      rotate(11deg);
  }

  92% {
    transform:
      rotate(-6deg);
  }

}


@keyframes lrHeroButtonShine {

  0%,
  65% {
    left: -55%;
  }

  100% {
    left: 145%;
  }

}


@keyframes lrHeroOfferFloat {

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

  50% {
    transform:
      translateY(-8px);
  }

}


@keyframes lrHeroOfferRing {

  0% {
    opacity: 0.7;

    transform:
      scale(0.90);
  }

  100% {
    opacity: 0;

    transform:
      scale(1.24);
  }

}


@keyframes lrHeroPillFloat {

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

  50% {
    transform:
      translateY(-6px);
  }

}


@keyframes lrHeroBottomLine {

  from {
    background-position:
      200% 0;
  }

  to {
    background-position:
      -200% 0;
  }

}


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

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

  .lr-topbar-status-dot::before,
  .lr-hero-tools i,
  .lr-hero-live>span::before,
  .lr-hero-phone-icon::before,
  .lr-hero-phone-icon i,
  .lr-hero-estimate::before,
  .lr-hero-offer,
  .lr-hero-offer::before,
  .lr-hero-floating-pill,
  .lr-hero-bottom-accent {
    animation:
      none !important;
  }


  .lr-navbar-nav a,
  .lr-services-toggle,
  .lr-services-toggle i,
  .lr-services-menu a,
  .lr-navbar-estimate,
  .lr-navbar-toggler span,
  .lr-hero-phone,
  .lr-hero-phone-arrow,
  .lr-hero-estimate,
  .lr-hero-arch-image {
    transition:
      none !important;
  }


  .lr-hero-arch:hover .lr-hero-arch-image,
  .lr-hero-phone:hover,
  .lr-hero-estimate:hover {
    transform:
      none;
  }

}

/* 000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */
/* =========================================================
   PREMIUM QUICK FEATURES VARIABLES
========================================================= */
/* =========================================================
   SERVICE ADVANTAGES
========================================================= */

.lr-advantages-section {
  --adv-navy: #172435;
  --adv-navy-dark: #0d1724;
  --adv-navy-soft: #223247;

  --adv-orange: #ff8f1f;
  --adv-orange-dark: #e8780d;
  --adv-orange-light: #ffa142;

  --adv-white: #ffffff;
  --adv-light: #f5f5f5;

  --adv-text: #20282f;
  --adv-gray: #6f757b;

  --adv-transition:
    420ms cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;

  padding: 105px 0;

  overflow: hidden;

  isolation: isolate;

  background:
    linear-gradient(145deg,
      #f6f7f9 0%,
      #ffffff 52%,
      #f3f5f7 100%);
}


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

.lr-advantages-section::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -4;

  opacity: 0.45;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(23, 36, 53, 0.025) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(23, 36, 53, 0.025) 1px,
      transparent 1px);

  background-size: 55px 55px;
}


/* =========================================================
   ORANGE AMBIENT GLOW
========================================================= */

.lr-advantages-section::after {
  content: "";

  position: absolute;

  z-index: -3;

  top: -280px;

  left: 50%;

  width: 800px;

  height: 620px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(circle,
      rgba(255, 143, 31, 0.13),
      rgba(255, 143, 31, 0.035) 44%,
      transparent 72%);

  transform: translateX(-50%);

  animation:
    lrAdvGlow 6s ease-in-out infinite;
}


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

.lr-advantages-section .container {
  position: relative;

  z-index: 3;

  max-width: 1240px;
}


/* =========================================================
   PALE REPAIR TOOLS
========================================================= */

.lr-advantages-tools {
  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;
}


.lr-advantages-tools>i {
  position: absolute;

  pointer-events: none;

  opacity: 0.09;
}


/* WRENCH */

.lr-adv-tool-wrench {
  top: 10%;

  left: 2%;

  color: var(--adv-orange);

  font-size: 7rem;

  animation:
    lrAdvWrench 8s ease-in-out infinite;
}


/* GEAR */

.lr-adv-tool-gear {
  right: -55px;

  bottom: 7%;

  color: var(--adv-navy);

  font-size: 11rem;

  animation:
    lrAdvGear 22s linear infinite;
}


/* TOOLS */

.lr-adv-tool-tools {
  top: 31%;

  right: 4%;

  color: var(--adv-orange);

  font-size: 5rem;

  animation:
    lrAdvTools 8s ease-in-out infinite;
}


/* NUT */

.lr-adv-tool-nut {
  left: 5%;

  bottom: 8%;

  color: var(--adv-navy);

  font-size: 5rem;

  animation:
    lrAdvNut 7s ease-in-out infinite;
}


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

.lr-advantages-header {
  position: relative;

  z-index: 4;

  margin-bottom: 50px;
}


/* =========================================================
   PRETITLE
========================================================= */

.lr-advantages-pretitle {
  display: flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 13px;

  color: var(--adv-orange-dark);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.74rem;

  font-weight: 900;

  letter-spacing: 0.12em;
}


.lr-advantages-pretitle>span {
  display: block;

  width: 40px;

  height: 3px;

  background: var(--adv-orange);

  animation:
    lrAdvLine 3s ease-in-out infinite;
}


.lr-advantages-pretitle i {
  color: var(--adv-orange);

  animation:
    lrAdvStar 3s ease-in-out infinite;
}


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

.lr-advantages-header h2 {
  max-width: 700px;

  margin: 0;

  color: var(--adv-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

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

  font-weight: 900;

  line-height: 0.97;

  letter-spacing: -0.04em;
}


.lr-advantages-header h2 span {
  display: block;

  margin-top: 5px;

  color: var(--adv-orange);
}


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

.lr-advantages-header-right {
  max-width: 485px;

  margin-left: auto;
}


.lr-advantages-header-right>p {
  margin: 0;

  color: var(--adv-gray);

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

  font-size: 1rem;

  line-height: 1.75;
}


/* =========================================================
   PHONE CTA
========================================================= */

.lr-advantages-phone {
  position: relative;

  display: flex;

  align-items: center;

  gap: 11px;

  width: fit-content;

  min-width: 315px;

  margin-top: 21px;

  padding:
    7px 13px 7px 7px;

  border-radius: 50px;

  background: var(--adv-navy);

  color: var(--adv-white);

  text-decoration: none;

  box-shadow:
    0 14px 31px rgba(23, 36, 53, 0.17);

  transition:
    background var(--adv-transition),
    transform var(--adv-transition),
    box-shadow var(--adv-transition);
}


.lr-advantages-phone:hover {
  background: var(--adv-navy-dark);

  color: var(--adv-white);

  transform: translateY(-4px);

  box-shadow:
    0 20px 40px rgba(23, 36, 53, 0.24);
}


/* PHONE ICON */

.lr-advantages-phone-icon {
  position: relative;

  display: grid;

  flex: 0 0 50px;

  place-items: center;

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background:
    linear-gradient(135deg,
      var(--adv-orange-light),
      var(--adv-orange-dark));

  color: var(--adv-white);
}


.lr-advantages-phone-icon::before {
  content: "";

  position: absolute;

  inset: -5px;

  border:
    2px solid rgba(255, 143, 31, 0.35);

  border-radius: 50%;

  animation:
    lrAdvPhoneRing 2s ease-out infinite;
}


.lr-advantages-phone-icon i {
  animation:
    lrAdvPhoneShake 2.7s ease-in-out infinite;
}


/* PHONE TEXT */

.lr-advantages-phone>span:nth-child(2) {
  display: flex;

  flex: 1;

  flex-direction: column;
}


.lr-advantages-phone small {
  color:
    rgba(255, 255, 255, 0.48);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.56rem;

  font-weight: 800;

  letter-spacing: 0.06em;
}


.lr-advantages-phone strong {
  margin-top: 2px;

  color: var(--adv-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1.14rem;

  font-weight: 900;
}


/* PHONE ARROW */

.lr-advantages-phone-arrow {
  display: grid;

  place-items: center;

  width: 37px;

  height: 37px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.06);

  color: var(--adv-orange);

  transition:
    background var(--adv-transition),
    color var(--adv-transition),
    transform var(--adv-transition);
}


.lr-advantages-phone:hover .lr-advantages-phone-arrow {
  background: var(--adv-orange);

  color: var(--adv-white);

  transform:
    translate(3px, -3px);
}


/* =========================================================
   MAIN ADVANTAGE CONSOLE
========================================================= */

.lr-advantages-console {
  position: relative;

  z-index: 4;

  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, 0.07);

  border-radius:
    38px 14px 38px 14px;

  background:
    linear-gradient(135deg,
      var(--adv-navy) 0%,
      var(--adv-navy-dark) 100%);

  box-shadow:
    0 28px 65px rgba(23, 36, 53, 0.20);

  isolation: isolate;
}


/* TOP ORANGE LINE */

.lr-advantages-console::before {
  content: "";

  position: absolute;

  z-index: 8;

  top: 0;

  left: 0;

  width: 100%;

  height: 5px;

  background:
    linear-gradient(90deg,
      var(--adv-orange-dark),
      var(--adv-orange-light),
      var(--adv-orange-dark));

  background-size: 200% 100%;

  animation:
    lrAdvTopLine 4s linear infinite;
}


/* TECHNICAL GRID */

.lr-advantages-console::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -2;

  opacity: 0.16;

  pointer-events: none;

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

  background-size: 35px 35px;
}


/* =========================================================
   CONSOLE LIGHT
========================================================= */

.lr-console-light {
  position: absolute;

  z-index: -1;

  border-radius: 50%;

  pointer-events: none;
}


.lr-console-light-one {
  top: -180px;

  left: 20%;

  width: 420px;

  height: 420px;

  background:
    radial-gradient(circle,
      rgba(255, 143, 31, 0.14),
      transparent 70%);
}


.lr-console-light-two {
  right: -130px;

  bottom: -180px;

  width: 400px;

  height: 400px;

  background:
    radial-gradient(circle,
      rgba(255, 255, 255, 0.06),
      transparent 70%);
}


/* =========================================================
   ADVANTAGE ITEM
========================================================= */

.lr-advantage-item {
  position: relative;

  display: flex;

  flex-direction: column;

  min-height: 430px;

  height: 100%;

  padding:
    39px 36px 32px;

  overflow: hidden;

  transition:
    background var(--adv-transition),
    transform var(--adv-transition);
}


/* SEPARATORS */

.lr-advantages-console .col-md-4:not(:first-child) .lr-advantage-item {
  border-left:
    1px solid rgba(255, 255, 255, 0.08);
}


.lr-advantage-item:hover {
  background:
    rgba(255, 255, 255, 0.035);
}


/* =========================================================
   FEATURED CENTER
========================================================= */

.lr-advantage-featured {
  background:
    linear-gradient(180deg,
      rgba(255, 143, 31, 0.09),
      rgba(255, 143, 31, 0.015));
}


.lr-advantage-featured::before {
  content: "";

  position: absolute;

  top: 0;

  left: 50%;

  width: 62%;

  height: 4px;

  background: var(--adv-orange);

  transform: translateX(-50%);
}


/* FEATURE TAG */

.lr-advantage-featured-tag {
  position: absolute;

  top: 18px;

  right: 18px;

  padding:
    6px 10px;

  border:
    1px solid rgba(255, 143, 31, 0.34);

  border-radius: 50px;

  background:
    rgba(255, 143, 31, 0.08);

  color: var(--adv-orange-light);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.54rem;

  font-weight: 900;

  letter-spacing: 0.08em;
}


/* =========================================================
   ITEM TOP
========================================================= */

.lr-advantage-top {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;
}


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

.lr-advantage-number {
  display: grid;

  place-items: center;

  width: 50px;

  height: 50px;

  border:
    1px solid rgba(255, 143, 31, 0.28);

  border-radius: 50%;

  background:
    rgba(255, 143, 31, 0.08);

  color: var(--adv-orange-light);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.76rem;

  font-weight: 900;

  transition:
    background var(--adv-transition),
    color var(--adv-transition),
    transform var(--adv-transition);
}


.lr-advantage-item:hover .lr-advantage-number {
  background: var(--adv-orange);

  color: var(--adv-white);

  transform:
    rotate(-8deg) scale(1.07);
}


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

.lr-advantage-label {
  color:
    rgba(255, 255, 255, 0.43);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.59rem;

  font-weight: 800;

  letter-spacing: 0.10em;
}


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

.lr-advantage-icon {
  position: relative;

  display: grid;

  place-items: center;

  width: 105px;

  height: 105px;

  margin-top: 37px;

  border:
    1px solid rgba(255, 255, 255, 0.08);

  border-radius:
    30px 30px 30px 9px;

  background:
    rgba(255, 255, 255, 0.035);

  color: var(--adv-orange);

  font-size: 3rem;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  transition:
    background var(--adv-transition),
    color var(--adv-transition),
    border-radius var(--adv-transition),
    transform var(--adv-transition);
}


.lr-advantage-icon::before {
  content: "";

  position: absolute;

  inset: 10px;

  border:
    1px dashed rgba(255, 143, 31, 0.20);

  border-radius:
    23px 23px 23px 7px;

  transition:
    border-color var(--adv-transition),
    transform 600ms ease;
}


.lr-advantage-item:hover .lr-advantage-icon {
  border-radius:
    9px 30px 30px 30px;

  background: var(--adv-orange);

  color: var(--adv-white);

  transform:
    translateY(-6px) rotate(-3deg);
}


.lr-advantage-item:hover .lr-advantage-icon::before {
  border-color:
    rgba(255, 255, 255, 0.42);

  transform:
    rotate(12deg);
}


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

.lr-advantage-content {
  margin-top: 25px;
}


.lr-advantage-content h3 {
  margin:
    0 0 12px;

  color: var(--adv-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

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

  font-weight: 900;

  line-height: 1.08;

  letter-spacing: -0.02em;
}


.lr-advantage-content p {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.61);

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

  font-size: 0.9rem;

  line-height: 1.7;
}


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

.lr-advantage-footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  margin-top: auto;

  padding-top: 25px;

  border-top:
    1px solid rgba(255, 255, 255, 0.075);
}


.lr-advantage-footer>span {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color:
    rgba(255, 255, 255, 0.75);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.75rem;

  font-weight: 700;
}


.lr-advantage-footer>span i {
  color: var(--adv-orange);
}


.lr-advantage-footer>i {
  display: grid;

  place-items: center;

  width: 38px;

  height: 38px;

  border:
    1px solid rgba(255, 255, 255, 0.11);

  border-radius: 50%;

  color: var(--adv-orange);

  transition:
    background var(--adv-transition),
    color var(--adv-transition),
    transform var(--adv-transition);
}


.lr-advantage-item:hover .lr-advantage-footer>i {
  background: var(--adv-orange);

  color: var(--adv-white);

  transform: rotate(45deg);
}


/* =========================================================
   BOTTOM STRIP
========================================================= */

.lr-advantages-bottom {
  position: relative;

  z-index: 4;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

  max-width: 1080px;

  margin:
    27px auto 0;

  padding:
    14px 16px;

  border:
    1px solid rgba(23, 36, 53, 0.09);

  border-radius: 50px;

  background:
    rgba(255, 255, 255, 0.92);

  box-shadow:
    0 14px 35px rgba(23, 36, 53, 0.09);

  backdrop-filter: blur(9px);

  -webkit-backdrop-filter: blur(9px);
}


/* =========================================================
   BOTTOM LEFT
========================================================= */

.lr-advantages-bottom-left {
  display: flex;

  align-items: center;

  gap: 12px;
}


.lr-advantages-bottom-icon {
  display: grid;

  flex: 0 0 46px;

  place-items: center;

  width: 46px;

  height: 46px;

  border-radius: 50%;

  background:
    rgba(255, 143, 31, 0.11);

  color: var(--adv-orange);
}


.lr-advantages-bottom-left>div {
  display: flex;

  flex-direction: column;
}


.lr-advantages-bottom-left small {
  color: var(--adv-gray);

  font-size: 0.52rem;

  font-weight: 800;

  letter-spacing: 0.07em;
}


.lr-advantages-bottom-left strong {
  margin-top: 2px;

  color: var(--adv-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.87rem;

  font-weight: 900;
}


/* =========================================================
   FREE ESTIMATE BUTTON
========================================================= */

.lr-advantages-estimate {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  min-height: 48px;

  padding:
    0 19px;

  overflow: hidden;

  border-radius:
    50px 12px 50px 12px;

  background: var(--adv-orange);

  color: var(--adv-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.8rem;

  font-weight: 900;

  text-decoration: none;

  box-shadow:
    0 10px 23px rgba(255, 143, 31, 0.24);

  transition:
    background var(--adv-transition),
    transform var(--adv-transition),
    box-shadow var(--adv-transition);
}


.lr-advantages-estimate::before {
  content: "";

  position: absolute;

  top: -30%;

  left: -55%;

  width: 28%;

  height: 160%;

  background:
    linear-gradient(110deg,
      transparent,
      rgba(255, 255, 255, 0.45),
      transparent);

  transform:
    skewX(-20deg);

  animation:
    lrAdvButtonShine 3.4s ease-in-out infinite;
}


.lr-advantages-estimate:hover {
  background: var(--adv-orange-dark);

  color: var(--adv-white);

  transform: translateY(-3px);

  box-shadow:
    0 15px 29px rgba(255, 143, 31, 0.31);
}


.lr-advantages-estimate i {
  transition:
    transform var(--adv-transition);
}


.lr-advantages-estimate:hover i {
  transform:
    translate(3px, -3px);
}


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

@keyframes lrAdvGlow {

  0%,
  100% {
    opacity: 0.65;

    transform:
      translateX(-50%) scale(0.95);
  }

  50% {
    opacity: 1;

    transform:
      translateX(-50%) scale(1.08);
  }

}


@keyframes lrAdvWrench {

  0%,
  100% {
    transform:
      translateY(0) rotate(-20deg);
  }

  50% {
    transform:
      translateY(-18px) rotate(-8deg);
  }

}


@keyframes lrAdvGear {

  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }

}


@keyframes lrAdvTools {

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

  50% {
    transform:
      translateY(-18px) rotate(0deg);
  }

}


@keyframes lrAdvNut {

  0%,
  100% {
    transform:
      translateY(0) rotate(-8deg);
  }

  50% {
    transform:
      translateY(-16px) rotate(5deg);
  }

}


@keyframes lrAdvLine {

  0%,
  100% {
    width: 40px;
  }

  50% {
    width: 57px;
  }

}


@keyframes lrAdvStar {

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

  50% {
    transform:
      rotate(18deg) scale(1.17);
  }

}


@keyframes lrAdvPhoneRing {

  0% {
    opacity: 0.75;

    transform: scale(0.9);
  }

  100% {
    opacity: 0;

    transform: scale(1.42);
  }

}


@keyframes lrAdvPhoneShake {

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

  83% {
    transform: rotate(-11deg);
  }

  87% {
    transform: rotate(11deg);
  }

  92% {
    transform: rotate(-6deg);
  }

}


@keyframes lrAdvTopLine {

  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }

}


@keyframes lrAdvButtonShine {

  0%,
  65% {
    left: -55%;
  }

  100% {
    left: 145%;
  }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

  .lr-advantages-section {
    padding: 90px 0;
  }


  .lr-advantage-item {
    min-height: 420px;

    padding:
      35px 27px 29px;
  }


  .lr-advantage-icon {
    width: 94px;

    height: 94px;

    font-size: 2.7rem;
  }


  .lr-advantage-content h3 {
    font-size: 1.65rem;
  }

}


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

@media (max-width: 991.98px) {

  .lr-advantages-section {
    padding: 78px 0;
  }


  .lr-advantages-header {
    margin-bottom: 42px;
  }


  .lr-advantages-header-right {
    max-width: none;

    margin-left: 0;
  }


  .lr-advantages-phone {
    min-width: 300px;
  }


  .lr-advantage-item {
    padding:
      30px 22px 26px;
  }


  .lr-advantage-icon {
    width: 85px;

    height: 85px;

    margin-top: 32px;

    font-size: 2.4rem;
  }


  .lr-advantage-content p {
    font-size: 0.84rem;
  }

}


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

@media (max-width: 767.98px) {

  .lr-advantages-section {
    padding: 65px 0;
  }


  .lr-advantages-header h2 {
    font-size: clamp(2rem, 2.8vw, 2.9rem);
  }


  .lr-advantages-header-right>p {
    font-size: 0.94rem;
  }


  .lr-advantages-phone {
    width: 100%;

    min-width: 0;

    max-width: 390px;
  }


  .lr-advantages-console {
    max-width: 520px;

    margin: 0 auto;

    border-radius:
      28px 12px 28px 12px;
  }


  .lr-advantages-console .col-md-4:not(:first-child) .lr-advantage-item {
    border-left: 0;

    border-top:
      1px solid rgba(255, 255, 255, 0.08);
  }


  .lr-advantage-item {
    min-height: auto;

    padding:
      31px 26px;
  }


  .lr-advantage-icon {
    margin-top: 27px;
  }


  .lr-advantage-content {
    margin-top: 21px;
  }


  .lr-advantage-footer {
    margin-top: 25px;
  }


  .lr-advantages-bottom {
    flex-direction: column;

    align-items: stretch;

    max-width: 520px;

    border-radius: 24px;
  }


  .lr-advantages-estimate {
    width: 100%;
  }

}


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

@media (max-width: 575.98px) {

  .lr-advantages-section {
    padding: 56px 0;
  }


  .lr-advantages-pretitle {
    font-size: 0.65rem;
  }


  .lr-advantages-pretitle>span {
    width: 28px;
  }


  .lr-advantages-header h2 {
    font-size: 2.25rem;
  }


  .lr-advantages-phone {
    max-width: none;
  }


  .lr-advantages-phone strong {
    font-size: 1.05rem;
  }


  .lr-advantage-item {
    padding:
      28px 21px;
  }


  .lr-advantage-icon {
    width: 78px;

    height: 78px;

    border-radius:
      22px 22px 22px 7px;

    font-size: 2.1rem;
  }


  .lr-advantage-content h3 {
    font-size: 1.5rem;
  }


  .lr-advantage-content p {
    font-size: 0.86rem;
  }


  .lr-advantages-bottom-left strong {
    font-size: 0.78rem;
  }

}


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

@media (max-width: 390px) {

  .lr-advantages-header h2 {
    font-size: 2.05rem;
  }


  .lr-advantages-phone {
    padding-right: 9px;
  }


  .lr-advantages-phone-arrow {
    display: none;
  }


  .lr-advantage-item {
    padding:
      27px 18px;
  }


  .lr-advantages-bottom {
    padding:
      14px;
  }

}


/* =========================================================
   FOCUS
========================================================= */

.lr-advantages-phone:focus-visible,
.lr-advantages-estimate:focus-visible {
  outline:
    3px solid var(--adv-orange);

  outline-offset: 4px;
}


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

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

  .lr-advantages-section::after,
  .lr-advantages-tools>i,
  .lr-advantages-pretitle>span,
  .lr-advantages-pretitle i,
  .lr-advantages-phone-icon::before,
  .lr-advantages-phone-icon i,
  .lr-advantages-console::before,
  .lr-advantages-estimate::before {
    animation: none !important;
  }


  .lr-advantages-phone,
  .lr-advantages-phone-arrow,
  .lr-advantage-item,
  .lr-advantage-number,
  .lr-advantage-icon,
  .lr-advantage-icon::before,
  .lr-advantage-footer>i,
  .lr-advantages-estimate,
  .lr-advantages-estimate i {
    transition: none !important;
  }


  .lr-advantages-phone:hover,
  .lr-advantages-phone:hover .lr-advantages-phone-arrow,
  .lr-advantage-item:hover .lr-advantage-number,
  .lr-advantage-item:hover .lr-advantage-icon,
  .lr-advantage-item:hover .lr-advantage-footer>i,
  .lr-advantages-estimate:hover,
  .lr-advantages-estimate:hover i {
    transform: none !important;
  }

}

/* 00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */
/* =========================================================
   OFFER SECTION
========================================================= */

.offer-section {
  position: relative;
  padding: 80px 0;
  background:
    linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%);
  overflow: hidden;
}


/* subtle background effect */
.offer-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(255, 143, 31, 0.12), transparent 28%),
    radial-gradient(circle at bottom left, rgba(255, 255, 255, 0.05), transparent 22%);
  pointer-events: none;
}


.offer-box {
  position: relative;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.24);
  overflow: hidden;
}


/* =========================================================
   IMAGE SIDE
========================================================= */

.offer-image-wrap {
  position: relative;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
}


.offer-image {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}


/* =========================================================
   CONTENT SIDE
========================================================= */

.offer-content {
  padding: 48px 42px;
}


.offer-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 8px 14px;
  background: rgba(255, 143, 31, 0.12);
  border: 1px solid rgba(255, 143, 31, 0.25);
  color: var(--orange);
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.offer-title {
  margin: 0 0 18px;
  color: var(--white);
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
}


.offer-title span {
  display: block;
  margin-bottom: 8px;
  color: var(--orange);
  font-size: clamp(2.3rem, 4.8vw, 4.4rem);
  line-height: 0.95;
}


.offer-text {
  max-width: 620px;
  margin: 0 0 28px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.97rem;
  line-height: 1.8;
}


/* =========================================================
   BIG ANIMATED BUTTON
========================================================= */

.offer-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 62px;
  padding: 0 34px;
  border: 2px solid var(--orange);
  background: var(--orange);
  color: var(--white);
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease;
  animation: offerBtnPulse 2.8s ease-in-out infinite;
}


.offer-btn::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -80%;
  width: 45%;
  height: 150%;
  background:
    linear-gradient(110deg,
      transparent,
      rgba(255, 255, 255, 0.38),
      transparent);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
}


.offer-btn:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  color: var(--white);
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(255, 143, 31, 0.32);
}


.offer-btn:hover::before {
  left: 135%;
}


.offer-btn i {
  font-size: 1rem;
  transition: transform 0.3s ease;
}


.offer-btn:hover i {
  transform: translateX(5px);
}


.offer-btn:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: 4px;
}


@keyframes offerBtnPulse {

  0%,
  100% {
    box-shadow: 0 8px 20px rgba(255, 143, 31, 0.18);
  }

  50% {
    box-shadow: 0 10px 30px rgba(255, 143, 31, 0.38);
  }
}


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

@media (max-width: 991.98px) {
  .offer-content {
    padding: 40px 30px;
    text-align: center;
  }

  .offer-text {
    margin-right: auto;
    margin-left: auto;
  }

  .offer-image-wrap,
  .offer-image {
    min-height: 280px;
  }
}


@media (max-width: 575.98px) {
  .offer-section {
    padding: 60px 0;
  }

  .offer-content {
    padding: 32px 22px;
  }

  .offer-btn {
    width: 100%;
    min-height: 58px;
    font-size: 1rem;
  }

  .offer-image-wrap,
  .offer-image {
    min-height: 230px;
  }
}


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

  .offer-btn,
  .offer-btn::before,
  .offer-btn i {
    animation: none;
    transition: none;
  }

  .offer-btn:hover {
    transform: none;
  }
}











/* 000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */


/* =========================================================
   BEFORE / AFTER GARAGE DOOR SECTION
========================================================= */
/* =========================================================
   ABOUT SECTION
========================================================= */

.lr-about-section {
  --about-navy: #172435;
  --about-navy-dark: #0d1724;
  --about-navy-soft: #223247;

  --about-orange: #ff8f1f;
  --about-orange-dark: #e8780d;
  --about-orange-light: #ffa142;

  --about-white: #ffffff;
  --about-light: #f5f5f5;

  --about-text: #20282f;
  --about-gray: #6f757b;

  --about-transition:
    420ms cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;

  padding:
    105px 0;

  overflow: hidden;

  isolation: isolate;

  background:
    linear-gradient(145deg,
      #ffffff 0%,
      #f7f8fa 52%,
      #f2f4f6 100%);
}


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

.lr-about-section::before {
  content: "";

  position: absolute;

  z-index: -3;

  inset: 0;

  opacity: 0.42;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(23, 36, 53, 0.025) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(23, 36, 53, 0.025) 1px,
      transparent 1px);

  background-size:
    55px 55px;
}


/* =========================================================
   SOFT ORANGE GLOW
========================================================= */

.lr-about-section::after {
  content: "";

  position: absolute;

  z-index: -2;

  top: -260px;

  right: -180px;

  width: 700px;

  height: 700px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(255, 143, 31, 0.13),
      rgba(255, 143, 31, 0.035) 45%,
      transparent 72%);

  pointer-events: none;

  animation:
    lrAboutGlow 7s ease-in-out infinite;
}


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

.lr-about-section .container {
  position: relative;

  z-index: 3;

  max-width: 1280px;
}


/* =========================================================
   BACKGROUND TOOLS
========================================================= */

.lr-about-tools {
  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;
}


.lr-about-tools i {
  position: absolute;

  opacity: 0.075;

  pointer-events: none;
}


.lr-about-tool-wrench {
  top: 9%;

  left: 2%;

  color:
    var(--about-orange);

  font-size:
    7rem;

  animation:
    lrAboutWrench 8s ease-in-out infinite;
}


.lr-about-tool-gear {
  right: -55px;

  bottom: 5%;

  color:
    var(--about-navy);

  font-size:
    11rem;

  animation:
    lrAboutGear 23s linear infinite;
}


.lr-about-tool-tools {
  left: 5%;

  bottom: 8%;

  color:
    var(--about-navy);

  font-size:
    5.5rem;

  animation:
    lrAboutTools 8s ease-in-out infinite;
}


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

.lr-about-content {
  position: relative;

  max-width:
    610px;
}


/* =========================================================
   PRETITLE
========================================================= */

.lr-about-pretitle {
  display: flex;

  align-items: center;

  gap: 9px;

  margin-bottom:
    15px;

  color:
    var(--about-orange-dark);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    0.72rem;

  font-weight:
    900;

  letter-spacing:
    0.105em;
}


.lr-about-pretitle-line {
  display: block;

  width:
    38px;

  height:
    3px;

  background:
    var(--about-orange);

  animation:
    lrAboutLine 3s ease-in-out infinite;
}


.lr-about-pretitle-icon {
  display: grid;

  place-items: center;

  width:
    31px;

  height:
    31px;

  border-radius:
    50%;

  background:
    rgba(255, 143, 31, 0.10);

  color:
    var(--about-orange);
}


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

.lr-about-title {
  max-width:
    610px;

  margin:
    0;

  color:
    var(--about-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

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

  font-weight:
    900;

  line-height:
    0.98;

  letter-spacing:
    -0.04em;
}


.lr-about-title span {
  display:
    block;

  margin-top:
    5px;

  color:
    var(--about-orange);
}


/* =========================================================
   LEAD
========================================================= */

.lr-about-lead {
  max-width:
    590px;

  margin:
    23px 0 0;

  color:
    var(--about-gray);

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

  font-size:
    1rem;

  line-height:
    1.78;
}


.lr-about-lead strong {
  color:
    var(--about-navy);

  font-weight:
    700;
}


/* =========================================================
   SERVICE LINE
========================================================= */

.lr-about-service-line {
  display: flex;

  align-items: center;

  gap:
    12px;

  margin-top:
    27px;

  padding:
    13px 15px;

  border-left:
    4px solid var(--about-orange);

  background:
    linear-gradient(90deg,
      rgba(255, 143, 31, 0.08),
      rgba(255, 143, 31, 0.015));
}


.lr-about-service-line-icon {
  display:
    grid;

  flex:
    0 0 44px;

  place-items:
    center;

  width:
    44px;

  height:
    44px;

  border-radius:
    14px;

  background:
    var(--about-navy);

  color:
    var(--about-orange);
}


.lr-about-service-line>div {
  display:
    flex;

  flex-direction:
    column;
}


.lr-about-service-line small {
  color:
    var(--about-orange-dark);

  font-size:
    0.54rem;

  font-weight:
    800;

  letter-spacing:
    0.08em;
}


.lr-about-service-line strong {
  margin-top:
    3px;

  color:
    var(--about-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    0.9rem;

  font-weight:
    900;
}


/* =========================================================
   BENEFITS
========================================================= */

.lr-about-benefits {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    0 28px;

  margin-top:
    31px;

  border-top:
    1px solid rgba(23, 36, 53, 0.10);

  border-bottom:
    1px solid rgba(23, 36, 53, 0.10);
}


/* =========================================================
   BENEFIT ROW
========================================================= */

.lr-about-benefit {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    28px 43px 1fr;

  align-items:
    center;

  gap:
    11px;

  min-height:
    105px;

  padding:
    18px 0;

  border-bottom:
    1px solid rgba(23, 36, 53, 0.08);

  transition:
    transform var(--about-transition);
}


/* remove bottom border on last two */

.lr-about-benefit:nth-child(3),
.lr-about-benefit:nth-child(4) {
  border-bottom:
    0;
}


.lr-about-benefit:hover {
  transform:
    translateX(5px);
}


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

.lr-about-benefit-number {
  color:
    rgba(23, 36, 53, 0.28);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    0.65rem;

  font-weight:
    900;
}


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

.lr-about-benefit-icon {
  display:
    grid;

  place-items:
    center;

  width:
    43px;

  height:
    43px;

  border:
    1px solid rgba(255, 143, 31, 0.18);

  border-radius:
    14px;

  background:
    rgba(255, 143, 31, 0.07);

  color:
    var(--about-orange);

  transition:
    background var(--about-transition),
    color var(--about-transition),
    transform var(--about-transition);
}


.lr-about-benefit:hover .lr-about-benefit-icon {
  background:
    var(--about-orange);

  color:
    var(--about-white);

  transform:
    rotate(-5deg) scale(1.06);
}


/* =========================================================
   BENEFIT TEXT
========================================================= */

.lr-about-benefit h3 {
  margin:
    0;

  color:
    var(--about-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    1rem;

  font-weight:
    900;

  line-height:
    1.2;
}


.lr-about-benefit p {
  margin:
    5px 0 0;

  color:
    var(--about-gray);

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

  font-size:
    0.76rem;

  line-height:
    1.55;
}


/* =========================================================
   ACTIONS
========================================================= */

.lr-about-actions {
  display:
    flex;

  align-items:
    center;

  flex-wrap:
    wrap;

  gap:
    13px;

  margin-top:
    31px;
}


/* =========================================================
   PRIMARY CTA
========================================================= */

.lr-about-primary-btn {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  min-height:
    55px;

  padding:
    0 23px;

  overflow:
    hidden;

  border-radius:
    50px 13px 50px 13px;

  background:
    var(--about-orange);

  color:
    var(--about-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    0.85rem;

  font-weight:
    900;

  text-decoration:
    none;

  box-shadow:
    0 12px 26px rgba(255, 143, 31, 0.25);

  transition:
    background var(--about-transition),
    transform var(--about-transition),
    box-shadow var(--about-transition);
}


/* shine */

.lr-about-primary-btn::before {
  content:
    "";

  position:
    absolute;

  top:
    -30%;

  left:
    -55%;

  width:
    28%;

  height:
    160%;

  background:
    linear-gradient(110deg,
      transparent,
      rgba(255, 255, 255, 0.44),
      transparent);

  transform:
    skewX(-20deg);

  animation:
    lrAboutButtonShine 3.5s ease-in-out infinite;
}


.lr-about-primary-btn:hover {
  background:
    var(--about-orange-dark);

  color:
    var(--about-white);

  transform:
    translateY(-4px);

  box-shadow:
    0 17px 33px rgba(255, 143, 31, 0.32);
}


.lr-about-primary-btn i {
  transition:
    transform var(--about-transition);
}


.lr-about-primary-btn:hover i {
  transform:
    translate(3px, -3px);
}


/* =========================================================
   PHONE CTA
========================================================= */

.lr-about-phone {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  min-height:
    55px;

  padding:
    6px 16px 6px 7px;

  border:
    1px solid rgba(23, 36, 53, 0.10);

  border-radius:
    50px;

  background:
    var(--about-white);

  color:
    var(--about-navy);

  text-decoration:
    none;

  box-shadow:
    0 10px 25px rgba(23, 36, 53, 0.08);

  transition:
    transform var(--about-transition),
    box-shadow var(--about-transition);
}


.lr-about-phone:hover {
  color:
    var(--about-navy);

  transform:
    translateY(-4px);

  box-shadow:
    0 16px 32px rgba(23, 36, 53, 0.14);
}


.lr-about-phone-icon {
  position:
    relative;

  display:
    grid;

  flex:
    0 0 43px;

  place-items:
    center;

  width:
    43px;

  height:
    43px;

  border-radius:
    50%;

  background:
    var(--about-navy);

  color:
    var(--about-orange);
}


.lr-about-phone-icon::before {
  content:
    "";

  position:
    absolute;

  inset:
    -5px;

  border:
    2px solid rgba(255, 143, 31, 0.32);

  border-radius:
    50%;

  animation:
    lrAboutPhoneRing 2s ease-out infinite;
}


.lr-about-phone>span:last-child {
  display:
    flex;

  flex-direction:
    column;
}


.lr-about-phone small {
  color:
    var(--about-gray);

  font-size:
    0.52rem;

  font-weight:
    700;
}


.lr-about-phone strong {
  margin-top:
    2px;

  color:
    var(--about-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    1rem;

  font-weight:
    900;
}


/* =========================================================
   VISUAL
========================================================= */

.lr-about-visual {
  position:
    relative;

  width:
    100%;

  max-width:
    610px;

  min-height:
    670px;

  margin:
    0 auto;
}


/* =========================================================
   ORANGE VERTICAL LINE
========================================================= */

.lr-about-visual-line {
  position:
    absolute;

  z-index:
    0;

  top:
    90px;

  right:
    -13px;

  width:
    8px;

  height:
    410px;

  background:
    var(--about-orange);
}


.lr-about-visual-line::before {
  content:
    "";

  position:
    absolute;

  top:
    -34px;

  left:
    0;

  width:
    8px;

  height:
    34px;

  background:
    var(--about-orange);

  clip-path:
    polygon(0 100%,
      100% 0,
      100% 100%);
}


/* =========================================================
   MAIN ARCH IMAGE
========================================================= */

.lr-about-main-image {
  position:
    absolute;

  z-index:
    2;

  top:
    0;

  right:
    0;

  width:
    78%;

  height:
    610px;

  overflow:
    hidden;

  border:
    7px solid var(--about-white);

  border-radius:
    250px 250px 30px 30px;

  background:
    var(--about-navy);

  box-shadow:
    0 28px 60px rgba(13, 23, 36, 0.18);
}


.lr-about-main-image::before {
  content:
    "";

  position:
    absolute;

  z-index:
    6;

  inset:
    10px;

  border:
    1px solid rgba(255, 143, 31, 0.46);

  border-radius:
    235px 235px 22px 22px;

  pointer-events:
    none;
}


/* IMAGE */

.lr-about-main-image>img {
  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

  transition:
    transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}


.lr-about-main-image:hover>img {
  transform:
    scale(1.055);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.lr-about-main-overlay {
  position:
    absolute;

  z-index:
    2;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(180deg,
      rgba(13, 23, 36, 0.08) 20%,
      rgba(13, 23, 36, 0.03) 45%,
      rgba(13, 23, 36, 0.85) 100%);
}


/* =========================================================
   IMAGE TOP LABEL
========================================================= */

.lr-about-image-label {
  position:
    absolute;

  z-index:
    8;

  top:
    31px;

  left:
    50%;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    7px 13px 7px 7px;

  border:
    1px solid rgba(255, 255, 255, 0.14);

  border-radius:
    50px;

  background:
    rgba(13, 23, 36, 0.82);

  transform:
    translateX(-50%);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  white-space:
    nowrap;
}


.lr-about-image-label>span {
  display:
    grid;

  place-items:
    center;

  width:
    33px;

  height:
    33px;

  border-radius:
    50%;

  background:
    var(--about-orange);

  color:
    var(--about-white);

  font-size:
    0.75rem;
}


.lr-about-image-label>div {
  display:
    flex;

  flex-direction:
    column;
}


.lr-about-image-label small {
  color:
    rgba(255, 255, 255, 0.46);

  font-size:
    0.44rem;

  font-weight:
    700;
}


.lr-about-image-label strong {
  margin-top:
    1px;

  color:
    var(--about-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    0.73rem;

  font-weight:
    900;
}


/* =========================================================
   IMAGE BOTTOM COPY
========================================================= */

.lr-about-image-copy {
  position:
    absolute;

  z-index:
    8;

  left:
    35px;

  right:
    35px;

  bottom:
    35px;

  padding-left:
    15px;

  border-left:
    4px solid var(--about-orange);
}


.lr-about-image-copy small {
  color:
    var(--about-orange-light);

  font-size:
    0.52rem;

  font-weight:
    900;

  letter-spacing:
    0.08em;
}


.lr-about-image-copy strong {
  display:
    block;

  margin-top:
    5px;

  color:
    var(--about-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    1.45rem;

  font-weight:
    900;
}


/* =========================================================
   SECOND IMAGE
========================================================= */

.lr-about-second-image {
  position:
    absolute;

  z-index:
    7;

  left:
    0;

  bottom:
    25px;

  width:
    45%;

  aspect-ratio:
    1 / 1;

  overflow:
    hidden;

  border:
    7px solid var(--about-white);

  border-radius:
    24px 24px 70px 24px;

  background:
    var(--about-white);

  box-shadow:
    0 22px 46px rgba(13, 23, 36, 0.18);
}


.lr-about-second-image img {
  position:
    absolute;

  inset:
    0;

  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

  transition:
    transform var(--about-transition);
}


.lr-about-second-image:hover img {
  transform:
    scale(1.06);
}


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

.lr-about-before-label {
  position:
    absolute;

  z-index:
    3;

  top:
    15px;

  left:
    15px;

  padding:
    7px 11px;

  border-radius:
    50px;

  background:
    var(--about-orange);

  color:
    var(--about-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    0.55rem;

  font-weight:
    900;

  letter-spacing:
    0.07em;
}


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

.lr-about-experience {
  position:
    absolute;

  z-index:
    9;

  top:
    165px;

  left:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  width:
    215px;

  padding:
    12px;

  border:
    1px solid rgba(23, 36, 53, 0.08);

  border-radius:
    50px 15px 50px 15px;

  background:
    var(--about-white);

  box-shadow:
    0 18px 40px rgba(13, 23, 36, 0.15);

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


/* RING */

.lr-about-experience-ring {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    center;

  width:
    67px;

  height:
    67px;

  padding-top:
    13px;

  border-radius:
    50%;

  background:
    var(--about-orange);

  color:
    var(--about-white);

  box-shadow:
    0 10px 23px rgba(255, 143, 31, 0.28);
}


.lr-about-experience-ring strong {
  color:
    var(--about-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    2rem;

  font-weight:
    900;

  line-height:
    1;
}


.lr-about-experience-ring span {
  margin-left:
    2px;

  color:
    var(--about-white);

  font-size:
    0.9rem;

  font-weight:
    900;
}


.lr-about-experience>div:last-child {
  display:
    flex;

  flex:
    1;

  flex-direction:
    column;
}


.lr-about-experience>div:last-child small {
  color:
    var(--about-gray);

  font-size:
    0.48rem;

  font-weight:
    800;

  letter-spacing:
    0.07em;
}


.lr-about-experience>div:last-child strong {
  max-width:
    100px;

  margin-top:
    2px;

  color:
    var(--about-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    0.77rem;

  font-weight:
    900;

  line-height:
    1.18;
}


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

.lr-about-trust-badge {
  position:
    absolute;

  z-index:
    9;

  top:
    75px;

  right:
    -20px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  padding:
    8px 13px 8px 8px;

  border:
    1px solid rgba(23, 36, 53, 0.08);

  border-radius:
    50px;

  background:
    var(--about-white);

  box-shadow:
    0 15px 34px rgba(13, 23, 36, 0.13);

  animation:
    lrAboutTrustFloat 4.8s ease-in-out infinite;
}


.lr-about-trust-badge>span {
  display:
    grid;

  place-items:
    center;

  width:
    39px;

  height:
    39px;

  border-radius:
    50%;

  background:
    var(--about-navy);

  color:
    var(--about-orange);
}


.lr-about-trust-badge>div {
  display:
    flex;

  flex-direction:
    column;
}


.lr-about-trust-badge small {
  color:
    var(--about-gray);

  font-size:
    0.46rem;

  font-weight:
    700;
}


.lr-about-trust-badge strong {
  margin-top:
    2px;

  color:
    var(--about-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    0.73rem;

  font-weight:
    900;
}


/* =========================================================
   DECORATIVE DOTS
========================================================= */

.lr-about-dots {
  position:
    absolute;

  z-index:
    0;

  left:
    55px;

  top:
    40px;

  display:
    grid;

  grid-template-columns:
    repeat(4, 6px);

  gap:
    10px;
}


.lr-about-dots span {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    rgba(255, 143, 31, 0.38);
}


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

@keyframes lrAboutGlow {

  0%,
  100% {
    opacity:
      0.65;

    transform:
      scale(0.96);
  }

  50% {
    opacity:
      1;

    transform:
      scale(1.08);
  }

}


@keyframes lrAboutWrench {

  0%,
  100% {
    transform:
      translateY(0) rotate(-20deg);
  }

  50% {
    transform:
      translateY(-18px) rotate(-8deg);
  }

}


@keyframes lrAboutGear {

  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(360deg);
  }

}


@keyframes lrAboutTools {

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

  50% {
    transform:
      translateY(-18px) rotate(-2deg);
  }

}


@keyframes lrAboutLine {

  0%,
  100% {
    width:
      38px;
  }

  50% {
    width:
      55px;
  }

}


@keyframes lrAboutPhoneRing {

  0% {
    opacity:
      0.75;

    transform:
      scale(0.9);
  }

  100% {
    opacity:
      0;

    transform:
      scale(1.42);
  }

}


@keyframes lrAboutButtonShine {

  0%,
  65% {
    left:
      -55%;
  }

  100% {
    left:
      145%;
  }

}


@keyframes lrAboutBadgeFloat {

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

  50% {
    transform:
      translateY(-8px);
  }

}


@keyframes lrAboutTrustFloat {

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

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

}


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

@media (min-width: 1400px) {

  .lr-about-section .container {
    max-width:
      1320px;
  }


  .lr-about-visual {
    max-width:
      640px;

    min-height:
      700px;
  }


  .lr-about-main-image {
    height:
      640px;
  }


  .lr-about-experience {
    top:
      185px;
  }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

  .lr-about-section {
    padding:
      90px 0;
  }


  .lr-about-title {
    font-size: clamp(2rem, 2.8vw, 2.9rem);
  }


  .lr-about-benefits {
    gap:
      0 17px;
  }


  .lr-about-benefit {
    grid-template-columns:
      23px 40px 1fr;

    gap:
      8px;
  }


  .lr-about-benefit-icon {
    width:
      40px;

    height:
      40px;
  }


  .lr-about-visual {
    max-width:
      560px;

    min-height:
      620px;
  }


  .lr-about-main-image {
    height:
      560px;

    border-radius:
      225px 225px 28px 28px;
  }


  .lr-about-main-image::before {
    border-radius:
      212px 212px 20px 20px;
  }


  .lr-about-experience {
    width:
      195px;

    top:
      150px;
  }


  .lr-about-second-image {
    width:
      44%;
  }


  .lr-about-trust-badge {
    right:
      -5px;
  }

}


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

@media (max-width: 991.98px) {

  .lr-about-section {
    padding:
      78px 0;
  }


  .lr-about-content {
    max-width:
      700px;

    margin:
      0 auto;
  }


  .lr-about-title {
    max-width:
      680px;
  }


  .lr-about-lead {
    max-width:
      670px;
  }


  .lr-about-benefits {
    max-width:
      680px;
  }


  .lr-about-visual {
    max-width:
      650px;

    min-height:
      700px;

    margin-top:
      15px;
  }


  .lr-about-main-image {
    width:
      76%;

    height:
      640px;
  }


  .lr-about-second-image {
    width:
      43%;
  }


  .lr-about-experience {
    top:
      190px;
  }

}


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

@media (max-width: 767.98px) {

  .lr-about-section {
    padding:
      65px 0;
  }


  .lr-about-content {
    text-align:
      center;
  }


  .lr-about-pretitle {
    justify-content:
      center;
  }


  .lr-about-title {
    margin-left:
      auto;

    margin-right:
      auto;

    font-size:
      clamp(2.35rem,
        9vw,
        3.3rem);
  }


  .lr-about-lead {
    margin-left:
      auto;

    margin-right:
      auto;

    font-size:
      0.95rem;
  }


  .lr-about-service-line {
    max-width:
      520px;

    margin-left:
      auto;

    margin-right:
      auto;

    text-align:
      left;
  }


  .lr-about-benefits {
    grid-template-columns:
      1fr;

    max-width:
      520px;

    margin-left:
      auto;

    margin-right:
      auto;

    text-align:
      left;
  }


  .lr-about-benefit {
    grid-template-columns:
      28px 43px 1fr;

    min-height:
      94px;

    border-bottom:
      1px solid rgba(23, 36, 53, 0.08) !important;
  }


  .lr-about-benefit:last-child {
    border-bottom:
      0 !important;
  }


  .lr-about-actions {
    justify-content:
      center;
  }


  /* VISUAL */

  .lr-about-visual {
    max-width:
      560px;

    min-height:
      630px;

    margin-top:
      10px;
  }


  .lr-about-main-image {
    position:
      absolute;

    right:
      0;

    width:
      82%;

    height:
      560px;

    border-radius:
      220px 220px 27px 27px;
  }


  .lr-about-main-image::before {
    border-radius:
      207px 207px 19px 19px;
  }


  .lr-about-second-image {
    width:
      43%;

    bottom:
      10px;
  }


  .lr-about-experience {
    top:
      170px;

    width:
      190px;
  }


  .lr-about-trust-badge {
    right:
      0;
  }


  .lr-about-visual-line {
    display:
      none;
  }

}


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

@media (max-width: 575.98px) {

  .lr-about-section {
    padding:
      56px 0;
  }


  .lr-about-pretitle {
    font-size:
      0.64rem;
  }


  .lr-about-pretitle-line {
    width:
      27px;
  }


  .lr-about-title {
    font-size:
      2.25rem;
  }


  .lr-about-lead {
    font-size:
      0.9rem;

    line-height:
      1.7;
  }


  .lr-about-service-line {
    padding:
      12px;
  }


  .lr-about-service-line strong {
    font-size:
      0.8rem;
  }


  .lr-about-actions {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .lr-about-primary-btn,
  .lr-about-phone {
    width:
      100%;
  }


  .lr-about-phone {
    justify-content:
      center;
  }


  /* IMAGE */

  .lr-about-visual {
    max-width:
      430px;

    min-height:
      550px;
  }


  .lr-about-main-image {
    width:
      86%;

    height:
      500px;

    border-width:
      5px;

    border-radius:
      205px 205px 25px 25px;
  }


  .lr-about-main-image::before {
    inset:
      8px;

    border-radius:
      193px 193px 18px 18px;
  }


  .lr-about-second-image {
    width:
      47%;

    border-width:
      5px;

    border-radius:
      19px 19px 55px 19px;
  }


  .lr-about-experience {
    top:
      150px;

    width:
      175px;

    padding:
      9px;
  }


  .lr-about-experience-ring {
    width:
      58px;

    height:
      58px;

    padding-top:
      12px;
  }


  .lr-about-experience-ring strong {
    font-size:
      1.7rem;
  }


  .lr-about-trust-badge {
    top:
      70px;

    right:
      0;

    padding-right:
      10px;
  }


  .lr-about-image-copy {
    left:
      25px;

    right:
      25px;

    bottom:
      27px;
  }


  .lr-about-image-copy strong {
    font-size:
      1.2rem;
  }

}


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

@media (max-width: 400px) {

  .lr-about-title {
    font-size:
      2.05rem;
  }


  .lr-about-benefit {
    grid-template-columns:
      22px 39px 1fr;
  }


  .lr-about-benefit-icon {
    width:
      39px;

    height:
      39px;
  }


  .lr-about-visual {
    min-height:
      500px;
  }


  .lr-about-main-image {
    height:
      455px;
  }


  .lr-about-experience {
    top:
      145px;

    width:
      165px;
  }


  .lr-about-trust-badge {
    transform:
      scale(0.9);

    transform-origin:
      right top;
  }

}


/* =========================================================
   FOCUS
========================================================= */

.lr-about-primary-btn:focus-visible,
.lr-about-phone:focus-visible {
  outline:
    3px solid var(--about-orange);

  outline-offset:
    4px;
}


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

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

  .lr-about-section::after,
  .lr-about-tools i,
  .lr-about-pretitle-line,
  .lr-about-primary-btn::before,
  .lr-about-phone-icon::before,
  .lr-about-experience,
  .lr-about-trust-badge {
    animation:
      none !important;
  }


  .lr-about-benefit,
  .lr-about-benefit-icon,
  .lr-about-primary-btn,
  .lr-about-primary-btn i,
  .lr-about-phone,
  .lr-about-main-image>img,
  .lr-about-second-image img {
    transition:
      none !important;
  }


  .lr-about-benefit:hover,
  .lr-about-benefit:hover .lr-about-benefit-icon,
  .lr-about-primary-btn:hover,
  .lr-about-primary-btn:hover i,
  .lr-about-phone:hover,
  .lr-about-main-image:hover>img,
  .lr-about-second-image:hover img {
    transform:
      none !important;
  }

}

/* 00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */


/* =========================================================
   GARAGE DOOR STATS SECTION
   FULL CSS
========================================================= */

:root {
  --navy: #172435;
  --navy-dark: #0d1724;
  --navy-soft: #223247;

  --orange: #ff8f1f;
  --orange-dark: #e8780d;
  --orange-light: #ffa142;

  --white: #ffffff;
  --gray: #98a0aa;

  --transition: 250ms ease;
}


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

.gd-stats-section {
  position: relative;

  padding: 42px 0;

  overflow: hidden;

  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.018) 25%,
      transparent 25%) 0 0 / 26px 26px,

    linear-gradient(315deg,
      rgba(255, 255, 255, 0.018) 25%,
      transparent 25%) 0 0 / 26px 26px,

    var(--navy-dark);
}


/* =========================================================
   SUBTLE BACKGROUND LINES
========================================================= */

.gd-stats-section::before {
  content: "";

  position: absolute;

  inset: 0;

  opacity: 0.23;

  pointer-events: none;

  background:
    repeating-linear-gradient(25deg,
      transparent 0,
      transparent 20px,
      rgba(255, 255, 255, 0.04) 21px,
      transparent 22px);
}


/* soft orange glow */

.gd-stats-section::after {
  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  width: 70%;

  height: 180px;

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

  pointer-events: none;

  background:
    radial-gradient(ellipse,
      rgba(255, 143, 31, 0.05),
      transparent 68%);
}


.gd-stats-section .container {
  position: relative;

  z-index: 2;
}


/* =========================================================
   STAT ITEM
========================================================= */

.gd-stat-item {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  width: 100%;

  min-height: 100px;

  padding: 14px 18px;

  transition:
    transform var(--transition);
}


.gd-stat-item:hover {
  transform: translateY(-5px);
}


/* =========================================================
   DIVIDER
========================================================= */

.gd-stat-item::after {
  content: "";

  position: absolute;

  right: 0;

  top: 14%;

  width: 1px;

  height: 72%;

  background:
    rgba(255, 255, 255, 0.09);
}


.gd-stats-section .col-md-3:last-child .gd-stat-item::after {
  display: none;
}


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

.gd-stat-icon {
  display: grid;

  place-items: center;

  flex: 0 0 auto;

  width: 68px;

  height: 68px;

  color: var(--orange);

  font-size: 2.6rem;

  line-height: 1;

  transition:
    transform var(--transition),
    color var(--transition),
    filter var(--transition);
}


.gd-stat-icon i {
  line-height: 1;
}


.gd-stat-item:hover .gd-stat-icon {
  color: var(--orange-light);

  transform:
    scale(1.12) rotate(-5deg);

  filter:
    drop-shadow(0 6px 14px rgba(255, 143, 31, 0.3));
}


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

.gd-stat-content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  min-width: 0;

  line-height: 1;
}


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

.gd-stat-content strong {
  margin: 0;

  color: var(--white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 2.4rem;

  font-weight: 800;

  line-height: 0.95;

  letter-spacing: -0.025em;

  white-space: nowrap;
}


.gd-stat-content strong span {
  position: relative;

  top: -2px;

  margin-left: 1px;

  color: var(--white);

  font-size: 1.45rem;

  font-weight: 800;
}


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

.gd-stat-content small {
  margin-top: 8px;

  color:
    rgba(255, 255, 255, 0.58);

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

  font-size: 0.84rem;

  font-weight: 500;

  line-height: 1.3;

  white-space: nowrap;
}


/* =========================================================
   OPTIONAL HOVER GLOW
========================================================= */

.gd-stat-item::before {
  content: "";

  position: absolute;

  z-index: -1;

  inset: 10px;

  border-radius: 8px;

  opacity: 0;

  background:
    linear-gradient(135deg,
      rgba(255, 143, 31, 0.06),
      rgba(255, 255, 255, 0.01));

  transition:
    opacity var(--transition);
}


.gd-stat-item:hover::before {
  opacity: 1;
}


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

@media (min-width: 1400px) {

  .gd-stats-section {
    padding: 46px 0;
  }


  .gd-stat-item {
    min-height: 110px;

    gap: 20px;
  }


  .gd-stat-icon {
    width: 74px;

    height: 74px;

    font-size: 2.85rem;
  }


  .gd-stat-content strong {
    font-size: 2.6rem;
  }


  .gd-stat-content strong span {
    font-size: 1.55rem;
  }


  .gd-stat-content small {
    font-size: 0.88rem;
  }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

  .gd-stats-section {
    padding: 38px 0;
  }


  .gd-stat-item {
    gap: 15px;

    padding:
      12px 10px;
  }


  .gd-stat-icon {
    width: 60px;

    height: 60px;

    font-size: 2.25rem;
  }


  .gd-stat-content strong {
    font-size: 2.05rem;
  }


  .gd-stat-content strong span {
    font-size: 1.25rem;
  }


  .gd-stat-content small {
    font-size: 0.74rem;
  }

}


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

@media (max-width: 991.98px) {

  .gd-stats-section {
    padding: 32px 0;
  }


  .gd-stat-item {
    min-height: 92px;

    gap: 13px;
  }


  .gd-stat-icon {
    width: 55px;

    height: 55px;

    font-size: 2.05rem;
  }


  .gd-stat-content strong {
    font-size: 1.9rem;
  }


  .gd-stat-content strong span {
    font-size: 1.15rem;
  }


  .gd-stat-content small {
    font-size: 0.7rem;

    white-space: normal;
  }

}


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

@media (max-width: 767.98px) {

  .gd-stats-section {
    padding: 28px 0;
  }


  .gd-stat-item {
    justify-content: flex-start;

    min-height: 92px;

    gap: 14px;

    padding:
      12px 10px;
  }


  .gd-stat-item::after {
    display: none;
  }


  .gd-stat-icon {
    width: 52px;

    height: 52px;

    font-size: 1.95rem;
  }


  .gd-stat-content strong {
    font-size: 1.75rem;
  }


  .gd-stat-content strong span {
    font-size: 1.05rem;
  }


  .gd-stat-content small {
    margin-top: 6px;

    font-size: 0.7rem;

    white-space: normal;
  }

}


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

@media (max-width: 575.98px) {

  .gd-stats-section {
    padding: 24px 0;
  }


  .gd-stat-item {
    min-height: 84px;

    gap: 10px;

    padding:
      9px 5px;
  }


  .gd-stat-icon {
    width: 46px;

    height: 46px;

    font-size: 1.7rem;
  }


  .gd-stat-content strong {
    font-size: 1.5rem;
  }


  .gd-stat-content strong span {
    font-size: 0.92rem;
  }


  .gd-stat-content small {
    font-size: 0.64rem;

    line-height: 1.25;
  }

}


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

@media (max-width: 390px) {

  .gd-stat-item {
    gap: 7px;

    padding:
      8px 2px;
  }


  .gd-stat-icon {
    width: 40px;

    height: 40px;

    font-size: 1.5rem;
  }


  .gd-stat-content strong {
    font-size: 1.35rem;
  }


  .gd-stat-content strong span {
    font-size: 0.82rem;
  }


  .gd-stat-content small {
    font-size: 0.58rem;
  }

}


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

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

  .gd-stat-item,
  .gd-stat-icon {
    transition: none;
  }


  .gd-stat-item:hover {
    transform: none;
  }


  .gd-stat-item:hover .gd-stat-icon {
    transform: none;
  }

}

/* 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */
/* =========================================================
   VARIABLES
========================================================= */
/* =========================================================
   LUXURY SERVICES GALLERY
========================================================= */

.lr-service-gallery {
  --sg-navy: #172435;
  --sg-navy-dark: #0d1724;
  --sg-navy-soft: #223247;

  --sg-orange: #ff8f1f;
  --sg-orange-dark: #e8780d;
  --sg-orange-light: #ffa142;

  --sg-white: #ffffff;
  --sg-light: #f5f5f5;

  --sg-text: #20282f;
  --sg-gray: #6f757b;

  --sg-transition:
    420ms cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;

  padding: 105px 0;

  overflow: hidden;

  isolation: isolate;

  background:
    linear-gradient(145deg,
      #ffffff 0%,
      #f5f7f9 55%,
      #ffffff 100%);
}


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

.lr-service-gallery::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -4;

  opacity: 0.34;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(23, 36, 53, 0.025) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(23, 36, 53, 0.025) 1px,
      transparent 1px);

  background-size: 52px 52px;
}


/* =========================================================
   BACKGROUND GLOW
========================================================= */

.lr-service-gallery::after {
  content: "";

  position: absolute;

  top: -320px;
  right: -180px;

  z-index: -3;

  width: 750px;
  height: 750px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(255, 143, 31, 0.12),
      rgba(255, 143, 31, 0.025) 48%,
      transparent 72%);

  pointer-events: none;

  animation:
    lrSgGlow 7s ease-in-out infinite;
}


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

.lr-service-gallery .container {
  position: relative;

  z-index: 3;

  max-width: 1280px;
}


/* =========================================================
   PALE BACKGROUND TOOLS
========================================================= */

.lr-sg-tools {
  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;
}


.lr-sg-tools i {
  position: absolute;

  opacity: 0.07;

  pointer-events: none;
}


.lr-sg-tool-wrench {
  top: 8%;
  left: 2%;

  color: var(--sg-orange);

  font-size: 7rem;

  animation:
    lrSgWrench 8s ease-in-out infinite;
}


.lr-sg-tool-gear {
  right: -55px;
  bottom: 5%;

  color: var(--sg-navy);

  font-size: 11rem;

  animation:
    lrSgGear 22s linear infinite;
}


.lr-sg-tool-tools {
  top: 34%;
  right: 3%;

  color: var(--sg-orange);

  font-size: 5rem;

  animation:
    lrSgTools 8s ease-in-out infinite;
}


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

.lr-sg-header {
  position: relative;

  z-index: 4;

  margin-bottom: 52px;
}


/* =========================================================
   PRETITLE
========================================================= */

.lr-sg-pretitle {
  display: flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 13px;

  color: var(--sg-orange-dark);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.72rem;

  font-weight: 900;

  letter-spacing: 0.11em;
}


.lr-sg-pretitle>span {
  width: 40px;

  height: 3px;

  background: var(--sg-orange);

  animation:
    lrSgHeaderLine 3s ease-in-out infinite;
}


.lr-sg-pretitle i {
  color: var(--sg-orange);
}


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

.lr-sg-title {
  max-width: 700px;

  margin: 0;

  color: var(--sg-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

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

  font-weight: 900;

  line-height: 0.97;

  letter-spacing: -0.04em;
}


.lr-sg-title span {
  display: block;

  margin-top: 5px;

  color: var(--sg-orange);
}


/* =========================================================
   INTRO
========================================================= */

.lr-sg-intro {
  max-width: 620px;

  margin: 19px 0 0;

  color: var(--sg-gray);

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

  font-size: 0.98rem;

  line-height: 1.75;
}


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

.lr-sg-header-actions {
  display: flex;

  align-items: center;

  justify-content: flex-end;

  flex-wrap: wrap;

  gap: 12px;
}


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

.lr-sg-phone {
  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 305px;

  min-height: 62px;

  padding:
    7px 13px 7px 7px;

  border-radius: 50px;

  background: var(--sg-navy);

  color: var(--sg-white);

  text-decoration: none;

  box-shadow:
    0 14px 30px rgba(23, 36, 53, 0.18);

  transition:
    background var(--sg-transition),
    transform var(--sg-transition);
}


.lr-sg-phone:hover {
  background: var(--sg-navy-dark);

  color: var(--sg-white);

  transform: translateY(-4px);
}


/* PHONE ICON */

.lr-sg-phone-icon {
  position: relative;

  display: grid;

  flex: 0 0 48px;

  place-items: center;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: var(--sg-orange);

  color: var(--sg-white);
}


.lr-sg-phone-icon::before {
  content: "";

  position: absolute;

  inset: -5px;

  border:
    2px solid rgba(255, 143, 31, 0.32);

  border-radius: 50%;

  animation:
    lrSgPhoneRing 2s ease-out infinite;
}


.lr-sg-phone>span:nth-child(2) {
  display: flex;

  flex: 1;

  flex-direction: column;
}


.lr-sg-phone small {
  color:
    rgba(255, 255, 255, 0.48);

  font-size: 0.52rem;

  font-weight: 700;

  letter-spacing: 0.06em;
}


.lr-sg-phone strong {
  margin-top: 2px;

  color: var(--sg-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1.08rem;

  font-weight: 900;
}


.lr-sg-phone-arrow {
  display: grid;

  place-items: center;

  width: 35px;

  height: 35px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.07);

  color: var(--sg-orange);

  transition:
    background var(--sg-transition),
    color var(--sg-transition),
    transform var(--sg-transition);
}


.lr-sg-phone:hover .lr-sg-phone-arrow {
  background: var(--sg-orange);

  color: var(--sg-white);

  transform:
    translate(3px, -3px);
}


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

.lr-sg-estimate {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  min-height: 56px;

  padding:
    0 19px;

  border-radius:
    50px 11px 50px 11px;

  background: var(--sg-orange);

  color: var(--sg-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.79rem;

  font-weight: 900;

  text-decoration: none;

  box-shadow:
    0 11px 25px rgba(255, 143, 31, 0.24);

  transition:
    background var(--sg-transition),
    transform var(--sg-transition);
}


.lr-sg-estimate:hover {
  background: var(--sg-orange-dark);

  color: var(--sg-white);

  transform: translateY(-4px);
}


/* =========================================================
   SLIDER
========================================================= */

.lr-sg-slider {
  position: relative;

  z-index: 4;

  padding:
    0 45px;
}


/* =========================================================
   VIEWPORT
========================================================= */

.lr-sg-viewport {
  width: 100%;

  overflow: hidden;
}


/* =========================================================
   TRACK
========================================================= */

.lr-sg-track {
  display: flex;

  gap: 22px;

  width: 100%;

  padding:
    8px 2px 30px;

  overflow-x: auto;

  overflow-y: hidden;

  scroll-snap-type: x mandatory;

  scroll-behavior: smooth;

  scrollbar-width: none;

  overscroll-behavior-x: contain;

  -webkit-overflow-scrolling: touch;
}


.lr-sg-track::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   SLIDE - 3 DESKTOP
========================================================= */

.lr-sg-slide {
  display: flex;

  flex:
    0 0 calc((100% - 44px) / 3);

  min-width: 0;

  scroll-snap-align: start;
}


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

.lr-sg-card {
  position: relative;

  width: 100%;

  min-height: 555px;

  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, 0.12);

  border-radius:
    155px 155px 28px 28px;

  background: var(--sg-navy-dark);

  box-shadow:
    0 23px 50px rgba(13, 23, 36, 0.18);

  transition:
    transform var(--sg-transition),
    box-shadow var(--sg-transition),
    border-color var(--sg-transition);
}


.lr-sg-card:hover {
  transform:
    translateY(-10px);

  box-shadow:
    0 31px 62px rgba(13, 23, 36, 0.25);
}


/* INNER BORDER */

.lr-sg-card::before {
  content: "";

  position: absolute;

  z-index: 6;

  inset: 10px;

  border:
    1px solid rgba(255, 255, 255, 0.12);

  border-radius:
    145px 145px 20px 20px;

  pointer-events: none;

  transition:
    border-color var(--sg-transition);
}


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

.lr-sg-card>img {
  position: absolute;

  inset: 0;

  z-index: 1;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transition:
    transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}


.lr-sg-card:hover>img {
  transform:
    scale(1.07);
}


/* =========================================================
   OVERLAY
========================================================= */

.lr-sg-card-overlay {
  position: absolute;

  inset: 0;

  z-index: 2;

  background:
    linear-gradient(180deg,
      rgba(13, 23, 36, 0.15) 0%,
      rgba(13, 23, 36, 0.06) 30%,
      rgba(13, 23, 36, 0.36) 54%,
      rgba(13, 23, 36, 0.97) 100%);
}


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

.lr-sg-number {
  position: absolute;

  z-index: 7;

  top: 28px;

  right: 27px;

  color:
    rgba(255, 255, 255, 0.25);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 2.8rem;

  font-weight: 900;

  line-height: 1;

  transition:
    color var(--sg-transition);
}


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

.lr-sg-icon {
  position: absolute;

  z-index: 8;

  top: 28px;

  left: 28px;

  display: grid;

  place-items: center;

  width: 56px;

  height: 56px;

  border:
    1px solid rgba(255, 255, 255, 0.18);

  border-radius: 50%;

  background:
    rgba(13, 23, 36, 0.70);

  color: var(--sg-orange);

  font-size: 1.35rem;

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);

  transition:
    background var(--sg-transition),
    color var(--sg-transition),
    transform var(--sg-transition);
}


.lr-sg-card:hover .lr-sg-icon {
  background: var(--sg-orange);

  color: var(--sg-white);

  transform:
    rotate(-7deg) scale(1.07);
}


/* =========================================================
   CATEGORY
========================================================= */

.lr-sg-category {
  position: absolute;

  z-index: 7;

  left: 28px;

  bottom: 190px;

  padding:
    6px 10px;

  border:
    1px solid rgba(255, 143, 31, 0.38);

  border-radius: 50px;

  background:
    rgba(13, 23, 36, 0.70);

  color:
    var(--sg-orange-light);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.55rem;

  font-weight: 900;

  letter-spacing: 0.09em;

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);
}


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

.lr-sg-card-content {
  position: absolute;

  z-index: 7;

  left: 28px;

  right: 28px;

  bottom: 28px;
}


.lr-sg-card-content h3 {
  margin: 0;

  color: var(--sg-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

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

  font-weight: 900;

  line-height: 1.05;

  letter-spacing: -0.02em;
}


.lr-sg-card-content p {
  margin:
    11px 0 0;

  color:
    rgba(255, 255, 255, 0.67);

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

  font-size: 0.82rem;

  line-height: 1.62;
}


/* =========================================================
   EXPLORE LINK
========================================================= */

.lr-sg-card-content a {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 18px;

  padding:
    10px 14px;

  border:
    1px solid rgba(255, 255, 255, 0.16);

  border-radius:
    50px;

  background:
    rgba(255, 255, 255, 0.08);

  color: var(--sg-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.72rem;

  font-weight: 900;

  text-decoration: none;

  backdrop-filter: blur(6px);

  -webkit-backdrop-filter: blur(6px);

  transition:
    background var(--sg-transition),
    color var(--sg-transition),
    transform var(--sg-transition);
}


.lr-sg-card-content a i {
  color: var(--sg-orange);

  transition:
    transform var(--sg-transition),
    color var(--sg-transition);
}


.lr-sg-card-content a:hover {
  background: var(--sg-orange);

  color: var(--sg-white);

  transform:
    translateY(-3px);
}


.lr-sg-card-content a:hover i {
  color: var(--sg-white);

  transform:
    translate(3px, -3px);
}


/* =========================================================
   ACTIVE SLIDE
========================================================= */

.lr-sg-slide.is-active .lr-sg-card {
  border-color:
    var(--sg-orange);

  box-shadow:
    0 28px 60px rgba(255, 143, 31, 0.22);
}


.lr-sg-slide.is-active .lr-sg-card::before {
  border-color:
    rgba(255, 143, 31, 0.72);
}


.lr-sg-slide.is-active .lr-sg-icon {
  background:
    var(--sg-orange);

  color:
    var(--sg-white);
}


.lr-sg-slide.is-active .lr-sg-number {
  color:
    var(--sg-orange-light);
}


.lr-sg-slide.is-active .lr-sg-card-content a {
  border-color:
    var(--sg-orange);

  background:
    var(--sg-orange);

  color:
    var(--sg-white);
}


.lr-sg-slide.is-active .lr-sg-card-content a i {
  color:
    var(--sg-white);
}


/* =========================================================
   ARROWS
========================================================= */

.lr-sg-arrow {
  position: absolute;

  z-index: 20;

  top: 50%;

  display: grid;

  place-items: center;

  width: 56px;

  height: 56px;

  padding: 0;

  border:
    4px solid var(--sg-white);

  border-radius: 50%;

  background:
    var(--sg-navy);

  color:
    var(--sg-white);

  font-size: 1rem;

  cursor: pointer;

  box-shadow:
    0 13px 29px rgba(13, 23, 36, 0.23);

  transform:
    translateY(-50%);

  transition:
    background var(--sg-transition),
    transform var(--sg-transition),
    box-shadow var(--sg-transition);
}


.lr-sg-prev {
  left: 6px;
}


.lr-sg-next {
  right: 6px;
}


.lr-sg-arrow:hover {
  background: var(--sg-orange);

  color: var(--sg-white);

  transform:
    translateY(-50%) scale(1.09);

  box-shadow:
    0 17px 34px rgba(255, 143, 31, 0.30);
}


.lr-sg-arrow:disabled {
  opacity: 0.3;

  cursor: not-allowed;
}


/* =========================================================
   BOTTOM BAR
========================================================= */

.lr-sg-bottom {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  max-width: 1080px;

  margin:
    25px auto 0;

  padding:
    13px 15px;

  border:
    1px solid rgba(23, 36, 53, 0.09);

  border-radius: 50px;

  background:
    rgba(255, 255, 255, 0.92);

  box-shadow:
    0 14px 34px rgba(23, 36, 53, 0.08);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);
}


/* LEFT */

.lr-sg-bottom-left {
  display: flex;

  align-items: center;

  gap: 10px;
}


.lr-sg-bottom-left>span {
  display: grid;

  flex: 0 0 44px;

  place-items: center;

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background:
    rgba(255, 143, 31, 0.10);

  color: var(--sg-orange);
}


.lr-sg-bottom-left>div {
  display: flex;

  flex-direction: column;
}


.lr-sg-bottom-left small {
  color: var(--sg-gray);

  font-size: 0.49rem;

  font-weight: 800;

  letter-spacing: 0.07em;
}


.lr-sg-bottom-left strong {
  margin-top: 2px;

  color: var(--sg-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.84rem;

  font-weight: 900;
}


/* STATUS */

.lr-sg-bottom-status {
  display: flex;

  align-items: center;

  gap: 8px;

  padding:
    9px 13px;

  border-radius: 50px;

  background:
    var(--sg-navy);

  color: var(--sg-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.63rem;

  font-weight: 900;

  letter-spacing: 0.06em;
}


.lr-sg-bottom-status>span {
  position: relative;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--sg-orange);
}


.lr-sg-bottom-status>span::before {
  content: "";

  position: absolute;

  inset: -4px;

  border:
    1px solid rgba(255, 143, 31, 0.60);

  border-radius: 50%;

  animation:
    lrSgStatusPulse 2s ease-out infinite;
}


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

@keyframes lrSgGlow {

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

  50% {
    opacity: 1;
    transform: scale(1.08);
  }

}


@keyframes lrSgWrench {

  0%,
  100% {
    transform:
      translateY(0) rotate(-20deg);
  }

  50% {
    transform:
      translateY(-18px) rotate(-7deg);
  }

}


@keyframes lrSgGear {

  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }

}


@keyframes lrSgTools {

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

  50% {
    transform:
      translateY(-17px) rotate(-2deg);
  }

}


@keyframes lrSgHeaderLine {

  0%,
  100% {
    width: 40px;
  }

  50% {
    width: 57px;
  }

}


@keyframes lrSgPhoneRing {

  0% {
    opacity: 0.75;
    transform: scale(0.90);
  }

  100% {
    opacity: 0;
    transform: scale(1.42);
  }

}


@keyframes lrSgStatusPulse {

  0% {
    opacity: 0.75;
    transform: scale(0.8);
  }

  100% {
    opacity: 0;
    transform: scale(1.7);
  }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

  .lr-service-gallery {
    padding: 90px 0;
  }


  .lr-sg-header-actions {
    justify-content: flex-start;
  }


  .lr-sg-card {
    min-height: 525px;

    border-radius:
      140px 140px 25px 25px;
  }


  .lr-sg-card::before {
    border-radius:
      130px 130px 17px 17px;
  }

}


/* =========================================================
   TABLET - 2 CARDS
========================================================= */

@media (max-width: 991.98px) {

  .lr-service-gallery {
    padding: 78px 0;
  }


  .lr-sg-header {
    margin-bottom: 43px;
  }


  .lr-sg-header-actions {
    justify-content: flex-start;
  }


  .lr-sg-slide {
    flex:
      0 0 calc((100% - 22px) / 2);
  }


  .lr-sg-slider {
    padding:
      0 38px;
  }


  .lr-sg-card {
    min-height: 540px;

    border-radius:
      160px 160px 26px 26px;
  }


  .lr-sg-card::before {
    border-radius:
      150px 150px 18px 18px;
  }

}


/* =========================================================
   MOBILE - 1 CARD
========================================================= */

@media (max-width: 767.98px) {

  .lr-service-gallery {
    padding: 65px 0;
  }


  .lr-sg-title {
    font-size:
      clamp(2.4rem,
        9vw,
        3.2rem);
  }


  .lr-sg-intro {
    font-size: 0.93rem;
  }


  .lr-sg-header-actions {
    align-items: stretch;

    flex-direction: column;
  }


  .lr-sg-phone {
    width: 100%;

    min-width: 0;

    max-width: 390px;
  }


  .lr-sg-estimate {
    width: 100%;

    max-width: 390px;
  }


  .lr-sg-slider {
    padding:
      0 31px;
  }


  .lr-sg-slide {
    flex:
      0 0 100%;
  }


  .lr-sg-card {
    min-height: 555px;

    border-radius:
      190px 190px 28px 28px;
  }


  .lr-sg-card::before {
    border-radius:
      180px 180px 20px 20px;
  }


  .lr-sg-arrow {
    width: 48px;

    height: 48px;

    border-width: 3px;
  }


  .lr-sg-prev {
    left: 2px;
  }


  .lr-sg-next {
    right: 2px;
  }


  .lr-sg-bottom {
    flex-direction: column;

    align-items: stretch;

    max-width: 520px;

    border-radius: 24px;
  }


  .lr-sg-bottom-status {
    justify-content: center;
  }

}


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

@media (max-width: 575.98px) {

  .lr-service-gallery {
    padding: 56px 0;
  }


  .lr-sg-pretitle {
    font-size: 0.64rem;
  }


  .lr-sg-pretitle>span {
    width: 27px;
  }


  .lr-sg-title {
    font-size: 2.25rem;
  }


  .lr-sg-slider {
    padding:
      0 25px;
  }


  .lr-sg-card {
    min-height: 510px;

    border-radius:
      170px 170px 24px 24px;
  }


  .lr-sg-card::before {
    border-radius:
      160px 160px 16px 16px;
  }


  .lr-sg-icon {
    top: 23px;
    left: 23px;

    width: 50px;
    height: 50px;
  }


  .lr-sg-number {
    top: 25px;
    right: 23px;

    font-size: 2.35rem;
  }


  .lr-sg-category {
    left: 23px;

    bottom: 179px;
  }


  .lr-sg-card-content {
    left: 23px;
    right: 23px;
    bottom: 23px;
  }


  .lr-sg-card-content h3 {
    font-size: 1.5rem;
  }


  .lr-sg-card-content p {
    font-size: 0.79rem;
  }


  .lr-sg-arrow {
    width: 43px;

    height: 43px;

    border-width: 2px;
  }

}


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

@media (max-width: 400px) {

  .lr-sg-slider {
    padding:
      0 21px;
  }


  .lr-sg-card {
    min-height: 485px;
  }


  .lr-sg-card-content {
    left: 20px;
    right: 20px;
  }


  .lr-sg-category {
    left: 20px;
  }


  .lr-sg-arrow {
    width: 39px;

    height: 39px;
  }

}


/* =========================================================
   FOCUS
========================================================= */

.lr-sg-phone:focus-visible,
.lr-sg-estimate:focus-visible,
.lr-sg-card-content a:focus-visible,
.lr-sg-arrow:focus-visible,
.lr-sg-track:focus-visible {
  outline:
    3px solid var(--sg-orange);

  outline-offset: 4px;
}


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

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

  .lr-service-gallery::after,
  .lr-sg-tools i,
  .lr-sg-pretitle>span,
  .lr-sg-phone-icon::before,
  .lr-sg-bottom-status>span::before {
    animation: none !important;
  }


  .lr-sg-track {
    scroll-behavior: auto;
  }


  .lr-sg-phone,
  .lr-sg-phone-arrow,
  .lr-sg-estimate,
  .lr-sg-card,
  .lr-sg-card>img,
  .lr-sg-icon,
  .lr-sg-card-content a,
  .lr-sg-card-content a i,
  .lr-sg-arrow {
    transition: none !important;
  }


  .lr-sg-card:hover,
  .lr-sg-card:hover>img,
  .lr-sg-card:hover .lr-sg-icon,
  .lr-sg-card-content a:hover,
  .lr-sg-card-content a:hover i,
  .lr-sg-phone:hover,
  .lr-sg-phone:hover .lr-sg-phone-arrow,
  .lr-sg-estimate:hover {
    transform: none !important;
  }

}

/* 00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */

/* =========================================================
   SYSTEM CARE ADVERTISEMENT VARIABLES
========================================================= */

/* =========================================================
   CURVED SYSTEM CARE AD
========================================================= */

.gd-flow-care-section {
  --flow-navy: #172435;
  --flow-navy-dark: #0d1724;
  --flow-navy-soft: #223247;

  --flow-orange: #ff8f1f;
  --flow-orange-dark: #e8780d;
  --flow-orange-light: #ffa142;

  --flow-white: #ffffff;
  --flow-light: #f5f5f5;

  --flow-text: #20282f;
  --flow-gray: #6f757b;

  --flow-transition:
    400ms cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;

  padding: 110px 0;

  overflow: hidden;

  isolation: isolate;

  background:
    linear-gradient(135deg,
      #ffffff 0%,
      #f6f7f9 100%);
}


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

.gd-flow-care-section::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -3;

  opacity: 0.45;

  background-image:
    linear-gradient(rgba(23, 36, 53, .025) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(23, 36, 53, .025) 1px,
      transparent 1px);

  background-size:
    55px 55px;
}


/* ORANGE GLOW */

.gd-flow-care-section::after {
  content: "";

  position: absolute;

  z-index: -2;

  top: -250px;

  left: -220px;

  width: 650px;

  height: 650px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(255, 143, 31, .15),
      rgba(255, 143, 31, .035) 48%,
      transparent 72%);

  animation:
    gdFlowGlow 7s ease-in-out infinite;
}


/* =========================================================
   BACKGROUND TOOLS
========================================================= */

.gd-flow-tools {
  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;
}


.gd-flow-tool {
  position: absolute;

  display: grid;

  place-items: center;

  opacity: .18;

  pointer-events: none;

  color: var(--flow-orange);
}


.gd-flow-tool-wrench {
  top: 7%;

  right: 5%;

  font-size: 6.5rem;

  transform: rotate(-25deg);

  animation:
    gdFlowToolOne 8s ease-in-out infinite;
}


.gd-flow-tool-gear {
  right: -35px;

  bottom: 6%;

  font-size: 9rem;

  color: var(--flow-navy);

  animation:
    gdFlowGear 20s linear infinite;
}


.gd-flow-tool-tools {
  left: 3%;

  bottom: 8%;

  font-size: 5rem;

  color: var(--flow-navy);

  animation:
    gdFlowToolTwo 8s ease-in-out infinite;
}


/* =========================================================
   IMAGE SIDE
========================================================= */

.gd-flow-visual {
  position: relative;

  max-width: 500px;

  margin: 0 auto;

  padding:
    0 20px 45px 0;
}


/* =========================================================
   ARCH IMAGE
========================================================= */

.gd-flow-image-frame {
  position: relative;

  height: 650px;

  overflow: hidden;

  border-radius:
    240px 240px 32px 32px;

  background:
    var(--flow-navy);

  box-shadow:
    0 30px 65px rgba(23, 36, 53, .18);
}


/* ORANGE ARCH BORDER */

.gd-flow-image-frame::before {
  content: "";

  position: absolute;

  z-index: 5;

  inset: 14px;

  border:
    2px solid rgba(255, 143, 31, .55);

  border-radius:
    220px 220px 24px 24px;

  pointer-events: none;
}


.gd-flow-image {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transition:
    transform 800ms cubic-bezier(.22, 1, .36, 1);
}


.gd-flow-image-frame:hover .gd-flow-image {
  transform:
    scale(1.055);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.gd-flow-image-overlay {
  position: absolute;

  z-index: 2;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(180deg,
      rgba(13, 23, 36, .04) 20%,
      rgba(13, 23, 36, .08) 45%,
      rgba(13, 23, 36, .78) 100%);
}


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

.gd-flow-image-label {
  position: absolute;

  z-index: 6;

  top: 45px;

  left: 50%;

  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding:
    10px 16px;

  border:
    1px solid rgba(255, 255, 255, .18);

  border-radius: 50px;

  background:
    rgba(13, 23, 36, .82);

  color:
    var(--flow-white);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  transform:
    translateX(-50%);

  white-space: nowrap;
}


.gd-flow-image-label i {
  color:
    var(--flow-orange);
}


.gd-flow-image-label span {
  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: .67rem;

  font-weight: 800;

  letter-spacing: .09em;
}


/* =========================================================
   IMAGE BOTTOM
========================================================= */

.gd-flow-image-bottom {
  position: absolute;

  z-index: 6;

  left: 34px;

  right: 34px;

  bottom: 34px;

  display: flex;

  flex-direction: column;

  padding-left: 16px;

  border-left:
    4px solid var(--flow-orange);
}


.gd-flow-image-bottom small {
  color:
    var(--flow-orange-light);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: .64rem;

  font-weight: 800;

  letter-spacing: .10em;
}


.gd-flow-image-bottom strong {
  margin-top: 5px;

  color:
    var(--flow-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1.35rem;

  font-weight: 900;

  line-height: 1.15;
}


/* =========================================================
   CIRCULAR OFFER BADGE
========================================================= */

.gd-flow-offer {
  position: absolute;

  z-index: 8;

  right: -25px;

  bottom: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 150px;

  height: 150px;

  border:
    8px solid var(--flow-white);

  border-radius: 50%;

  background:
    var(--flow-orange);

  color:
    var(--flow-white);

  text-align: center;

  box-shadow:
    0 20px 40px rgba(255, 143, 31, .30);

  animation:
    gdFlowOfferPulse 3s ease-in-out infinite;
}


.gd-flow-offer::before {
  content: "";

  position: absolute;

  inset: -14px;

  border:
    2px solid rgba(255, 143, 31, .25);

  border-radius: 50%;

  animation:
    gdFlowOfferRing 2.3s ease-out infinite;
}


.gd-flow-offer span,
.gd-flow-offer small {
  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: .6rem;

  font-weight: 800;

  letter-spacing: .08em;
}


.gd-flow-offer strong {
  color:
    var(--flow-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1.55rem;

  font-weight: 900;

  line-height: .95;
}


/* =========================================================
   DECORATIVE TRACK
========================================================= */

.gd-flow-track {
  position: absolute;

  z-index: -1;

  top: 85px;

  left: -28px;

  width: 55px;

  height: 425px;

  border:
    3px solid rgba(255, 143, 31, .35);

  border-right: 0;

  border-radius:
    60px 0 0 60px;
}


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

.gd-flow-content {
  position: relative;

  padding-left: 20px;
}


/* =========================================================
   PRETITLE
========================================================= */

.gd-flow-pretitle {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 15px;

  color:
    var(--flow-orange-dark);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: .78rem;

  font-weight: 800;

  letter-spacing: .12em;
}


.gd-flow-pretitle span {
  width: 42px;

  height: 3px;

  background:
    var(--flow-orange);

  animation:
    gdFlowLine 3s ease-in-out infinite;
}


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

.gd-flow-title {
  max-width: 700px;

  margin: 0;

  color:
    var(--flow-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

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

  font-weight: 900;

  line-height: .98;

  letter-spacing: -.035em;
}


.gd-flow-title span {
  display: block;

  margin-top: 5px;

  color:
    var(--flow-orange);
}


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

.gd-flow-description {
  max-width: 720px;

  margin:
    24px 0 0;

  color:
    var(--flow-gray);

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

  font-size: 1.08rem;

  line-height: 1.82;
}


.gd-flow-description strong {
  color:
    var(--flow-navy);
}


/* =========================================================
   CURVED SERVICE RIBBONS
========================================================= */

.gd-flow-service {
  position: relative;

  display: flex;

  align-items: center;

  gap: 17px;

  min-height: 112px;

  margin-top: 17px;

  padding:
    16px 22px 16px 12px;

  border:
    1px solid rgba(23, 36, 53, .09);

  border-radius:
    999px 38px 38px 999px;

  background:
    var(--flow-white);

  box-shadow:
    0 12px 30px rgba(23, 36, 53, .07);

  transition:
    transform var(--flow-transition),
    border-color var(--flow-transition),
    box-shadow var(--flow-transition);
}


.gd-flow-service:hover {
  border-color:
    rgba(255, 143, 31, .38);

  box-shadow:
    0 19px 40px rgba(23, 36, 53, .12);

  transform:
    translateX(10px);
}


/* STAGGERED LOOK */

.gd-flow-service-two {
  margin-left: 28px;
}


.gd-flow-service-three {
  margin-left: 55px;
}


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

.gd-flow-service-icon {
  display: grid;

  flex: 0 0 76px;

  place-items: center;

  width: 76px;

  height: 76px;

  border-radius: 50%;

  background:
    var(--flow-navy);

  color:
    var(--flow-orange);

  font-size: 1.45rem;

  box-shadow:
    0 12px 25px rgba(23, 36, 53, .16);

  transition:
    background var(--flow-transition),
    color var(--flow-transition),
    transform var(--flow-transition);
}


.gd-flow-service:hover .gd-flow-service-icon {
  background:
    var(--flow-orange);

  color:
    var(--flow-white);

  transform:
    rotate(-7deg) scale(1.05);
}


/* =========================================================
   SERVICE CONTENT
========================================================= */

.gd-flow-service-content {
  flex: 1;
}


.gd-flow-service-content small {
  color:
    var(--flow-orange-dark);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: .62rem;

  font-weight: 800;

  letter-spacing: .09em;
}


.gd-flow-service-content h3 {
  margin:
    3px 0 5px;

  color:
    var(--flow-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1.22rem;

  font-weight: 900;
}


.gd-flow-service-content p {
  margin: 0;

  color:
    var(--flow-gray);

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

  font-size: .9rem;

  line-height: 1.6;
}


/* =========================================================
   CHECK
========================================================= */

.gd-flow-service-check {
  display: grid;

  flex: 0 0 36px;

  place-items: center;

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background:
    rgba(255, 143, 31, .10);

  color:
    var(--flow-orange);

  transition:
    background var(--flow-transition),
    color var(--flow-transition),
    transform var(--flow-transition);
}


.gd-flow-service:hover .gd-flow-service-check {
  background:
    var(--flow-orange);

  color:
    var(--flow-white);

  transform:
    scale(1.08);
}


/* =========================================================
   MARKETING STRIP
========================================================= */

.gd-flow-marketing {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  margin-top: 28px;

  padding:
    18px 20px;

  border-top:
    1px solid rgba(23, 36, 53, .10);

  border-bottom:
    1px solid rgba(23, 36, 53, .10);
}


.gd-flow-marketing>div {
  display: flex;

  align-items: center;

  gap: 9px;
}


.gd-flow-marketing i {
  color:
    var(--flow-orange);

  font-size: 1.1rem;
}


.gd-flow-marketing span {
  display: flex;

  flex-direction: column;
}


.gd-flow-marketing small {
  color:
    var(--flow-gray);

  font-size: .56rem;

  font-weight: 700;

  letter-spacing: .06em;
}


.gd-flow-marketing strong {
  color:
    var(--flow-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: .88rem;

  font-weight: 800;
}


/* =========================================================
   ACTIONS
========================================================= */

.gd-flow-actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 16px;

  margin-top: 28px;
}


/* =========================================================
   ESTIMATE CTA
========================================================= */

.gd-flow-btn {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  min-height: 62px;

  padding:
    0 27px;

  overflow: hidden;

  border-radius:
    50px 14px 50px 14px;

  background:
    var(--flow-orange);

  color:
    var(--flow-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1rem;

  font-weight: 900;

  text-decoration: none;

  box-shadow:
    0 15px 30px rgba(255, 143, 31, .26);

  transition:
    background var(--flow-transition),
    transform var(--flow-transition),
    box-shadow var(--flow-transition);
}


.gd-flow-btn::before {
  content: "";

  position: absolute;

  top: -30%;

  left: -55%;

  width: 30%;

  height: 160%;

  background:
    linear-gradient(110deg,
      transparent,
      rgba(255, 255, 255, .42),
      transparent);

  transform:
    skewX(-20deg);

  animation:
    gdFlowBtnShine 3.5s ease-in-out infinite;
}


.gd-flow-btn:hover {
  background:
    var(--flow-orange-dark);

  color:
    var(--flow-white);

  box-shadow:
    0 20px 38px rgba(255, 143, 31, .34);

  transform:
    translateY(-4px);
}


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

.gd-flow-phone {
  display: flex;

  align-items: center;

  gap: 12px;

  min-height: 62px;

  padding:
    7px 20px 7px 8px;

  border:
    2px solid var(--flow-navy);

  border-radius:
    50px;

  background:
    var(--flow-navy);

  color:
    var(--flow-white);

  text-decoration: none;

  box-shadow:
    0 13px 27px rgba(23, 36, 53, .16);

  transition:
    transform var(--flow-transition),
    background var(--flow-transition),
    border-color var(--flow-transition);
}


.gd-flow-phone:hover {
  border-color:
    var(--flow-orange);

  background:
    var(--flow-navy-dark);

  color:
    var(--flow-white);

  transform:
    translateY(-4px);
}


.gd-flow-phone-icon {
  position: relative;

  display: grid;

  flex: 0 0 46px;

  place-items: center;

  width: 46px;

  height: 46px;

  border-radius: 50%;

  background:
    var(--flow-orange);

  color:
    var(--flow-white);
}


.gd-flow-phone-icon::before {
  content: "";

  position: absolute;

  inset: -5px;

  border:
    2px solid rgba(255, 143, 31, .35);

  border-radius: 50%;

  animation:
    gdFlowPhoneRing 2s ease-out infinite;
}


.gd-flow-phone>span:last-child {
  display: flex;

  flex-direction: column;
}


.gd-flow-phone small {
  color:
    rgba(255, 255, 255, .52);

  font-size: .62rem;

  font-weight: 700;

  letter-spacing: .06em;
}


.gd-flow-phone strong {
  margin-top: 2px;

  color:
    var(--flow-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1.18rem;

  font-weight: 900;
}


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

@keyframes gdFlowGlow {

  0%,
  100% {
    opacity: .65;
    transform: scale(.95);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }

}


@keyframes gdFlowOfferPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

}


@keyframes gdFlowOfferRing {

  0% {
    opacity: .7;
    transform: scale(.9);
  }

  100% {
    opacity: 0;
    transform: scale(1.22);
  }

}


@keyframes gdFlowGear {

  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }

}


@keyframes gdFlowToolOne {

  0%,
  100% {
    transform:
      translateY(0) rotate(-25deg);
  }

  50% {
    transform:
      translateY(-20px) rotate(-15deg);
  }

}


@keyframes gdFlowToolTwo {

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

  50% {
    transform:
      translateY(-18px) rotate(0deg);
  }

}


@keyframes gdFlowLine {

  0%,
  100% {
    width: 42px;
  }

  50% {
    width: 58px;
  }

}


@keyframes gdFlowBtnShine {

  0%,
  65% {
    left: -55%;
  }

  100% {
    left: 145%;
  }

}


@keyframes gdFlowPhoneRing {

  0% {
    opacity: .75;
    transform: scale(.9);
  }

  100% {
    opacity: 0;
    transform: scale(1.4);
  }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

  .gd-flow-care-section {
    padding: 90px 0;
  }


  .gd-flow-image-frame {
    height: 610px;
  }

  .gd-flow-service {
    min-height: 110px;
  }


  .gd-flow-service-two {
    margin-left: 18px;
  }


  .gd-flow-service-three {
    margin-left: 35px;
  }
}







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

@media (max-width: 991.98px) {

  .gd-flow-care-section {
    padding: 75px 0;
  }


  .gd-flow-visual {
    max-width: 620px;

    margin-bottom: 20px;
  }


  .gd-flow-image-frame {
    height: 600px;

    border-radius:
      300px 300px 35px 35px;
  }


  .gd-flow-content {
    max-width: 720px;

    margin: 0 auto;

    padding-left: 0;
  }


  .gd-flow-title {
    font-size:
      clamp(2.8rem, 7vw, 4rem);
  }


  .gd-flow-service-two,
  .gd-flow-service-three {
    margin-left: 0;
  }

}


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

@media (max-width: 767.98px) {

  .gd-flow-care-section {
    padding: 60px 0;
  }


  .gd-flow-visual {
    padding:
      0 10px 38px 0;
  }


  .gd-flow-image-frame {
    height: 500px;

    border-radius:
      220px 220px 28px 28px;
  }


  .gd-flow-offer {
    right: -4px;

    width: 125px;

    height: 125px;

    border-width: 6px;
  }


  .gd-flow-offer strong {
    font-size: 1.3rem;
  }


  .gd-flow-title {
    font-size:
      clamp(2.5rem, 10vw, 3.3rem);
  }


  .gd-flow-description {
    font-size: 1rem;
  }


  .gd-flow-service {
    align-items: flex-start;

    min-height: auto;

    padding:
      15px 17px 15px 10px;

    border-radius:
      999px 26px 26px 999px;
  }


  .gd-flow-service-icon {
    flex-basis: 66px;

    width: 66px;

    height: 66px;
  }


  .gd-flow-service-content p {
    font-size: .86rem;
  }


  .gd-flow-marketing {
    align-items: flex-start;

    flex-direction: column;
  }


  .gd-flow-actions {
    align-items: stretch;

    flex-direction: column;
  }


  .gd-flow-btn,
  .gd-flow-phone {
    width: 100%;
  }


  .gd-flow-phone {
    justify-content: flex-start;
  }

}


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

@media (max-width: 575.98px) {

  .gd-flow-care-section {
    padding: 52px 0;
  }


  .gd-flow-image-frame {
    height: 430px;

    border-radius:
      190px 190px 24px 24px;
  }


  .gd-flow-image-label {
    top: 28px;

    font-size: .6rem;
  }


  .gd-flow-image-bottom {
    left: 24px;

    right: 24px;

    bottom: 27px;
  }


  .gd-flow-image-bottom strong {
    font-size: 1.1rem;
  }


  .gd-flow-offer {
    width: 112px;

    height: 112px;
  }


  .gd-flow-offer strong {
    font-size: 1.15rem;
  }


  .gd-flow-title {
    font-size: 2.35rem;
  }


  .gd-flow-service {
    gap: 12px;

    padding:
      13px 14px 13px 8px;
  }


  .gd-flow-service-icon {
    flex-basis: 58px;

    width: 58px;

    height: 58px;

    font-size: 1.15rem;
  }


  .gd-flow-service-content h3 {
    font-size: 1.05rem;
  }


  .gd-flow-service-content p {
    font-size: .82rem;
  }


  .gd-flow-service-check {
    display: none;
  }


  .gd-flow-track {
    display: none;
  }

}


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

@media (max-width: 400px) {

  .gd-flow-image-frame {
    height: 390px;
  }


  .gd-flow-offer {
    width: 100px;

    height: 100px;
  }


  .gd-flow-offer span,
  .gd-flow-offer small {
    font-size: .52rem;
  }


  .gd-flow-offer strong {
    font-size: 1rem;
  }


  .gd-flow-title {
    font-size: 2.15rem;
  }


  .gd-flow-description {
    font-size: .94rem;
  }

}


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

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

  .gd-flow-care-section::after,
  .gd-flow-tool,
  .gd-flow-offer,
  .gd-flow-offer::before,
  .gd-flow-pretitle span,
  .gd-flow-btn::before,
  .gd-flow-phone-icon::before {
    animation: none !important;
  }


  .gd-flow-image,
  .gd-flow-service,
  .gd-flow-service-icon,
  .gd-flow-service-check,
  .gd-flow-btn,
  .gd-flow-phone {
    transition: none !important;
  }


  .gd-flow-image-frame:hover .gd-flow-image,
  .gd-flow-service:hover,
  .gd-flow-service:hover .gd-flow-service-icon,
  .gd-flow-service:hover .gd-flow-service-check,
  .gd-flow-btn:hover,
  .gd-flow-phone:hover {
    transform: none;
  }

}

/* 00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */

/* =========================================================
   WHY CHOOSE US + APPOINTMENT SECTION
========================================================= */

.gd-why-section {
  --why-navy: #172435;
  --why-navy-dark: #0d1724;
  --why-navy-soft: #223247;

  --why-orange: #ff8f1f;
  --why-orange-dark: #e8780d;
  --why-orange-light: #ffa142;

  --why-white: #ffffff;

  --why-light: #f5f5f5;
  --why-light-soft: #f8f9fb;

  --why-text: #20282f;
  --why-gray: #6f757b;

  --why-border:
    rgba(23, 36, 53, 0.11);

  --why-transition:
    380ms cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;

  padding-bottom: 105px;

  overflow: hidden;

  isolation: isolate;

  background: #f5f6f8;
}


/* =========================================================
   BACKGROUND SHAPES
========================================================= */

.gd-why-bg-shapes {
  position: absolute;

  inset: 0;

  z-index: 1;

  overflow: hidden;

  pointer-events: none;
}


.gd-why-bg-shapes > i {
  position: absolute;

  opacity: 0.055;

  pointer-events: none;
}


.gd-why-bg-wrench {
  top: 8%;
  left: 2%;

  color: var(--why-orange);

  font-size: 7rem;

  animation:
    gdWhyWrenchFloat 8s ease-in-out infinite;
}


.gd-why-bg-gear {
  top: 20%;
  right: -50px;

  color: var(--why-white);

  font-size: 11rem;

  animation:
    gdWhyGearRotate 22s linear infinite;
}


.gd-why-bg-tools {
  top: 48%;
  left: 3%;

  color: var(--why-orange);

  font-size: 6rem;

  animation:
    gdWhyToolsFloat 8s ease-in-out infinite;
}


/* =========================================================
   DARK TOP AREA
========================================================= */

.gd-why-dark {
  position: relative;

  z-index: 2;

  padding:
    100px 0 205px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      var(--why-navy) 0%,
      var(--why-navy-dark) 100%
    );
}


/* GRID */

.gd-why-dark::before {
  content: "";

  position: absolute;

  inset: 0;

  opacity: 0.24;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );

  background-size:
    55px 55px;
}


/* ORANGE GLOW */

.gd-why-dark::after {
  content: "";

  position: absolute;

  top: -300px;
  left: 50%;

  width: 760px;
  height: 760px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(255, 143, 31, 0.14),
      rgba(255, 143, 31, 0.03) 46%,
      transparent 72%
    );

  transform:
    translateX(-50%);
}


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

.gd-why-dark .container {
  position: relative;

  z-index: 3;

  max-width: 1320px;
}


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

.gd-why-header {
  max-width: 790px;

  margin:
    0 auto 52px;
}


/* PRETITLE */

.gd-why-pretitle {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  margin-bottom: 14px;

  color: var(--why-orange-light);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.74rem;

  font-weight: 800;

  letter-spacing: 0.14em;
}


.gd-why-pretitle span {
  display: block;

  width: 42px;
  height: 3px;

  background: var(--why-orange);
}


/* TITLE */

.gd-why-header h2 {
  margin: 0;

  color: var(--why-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    clamp(
      2.5rem,
      4vw,
      3.7rem
    );

  font-weight: 900;

  line-height: 0.98;

  letter-spacing: -0.035em;
}


.gd-why-header h2 span {
  display: block;

  margin-top: 5px;

  color: var(--why-orange);
}


/* DESCRIPTION */

.gd-why-header p {
  max-width: 650px;

  margin:
    20px auto 0;

  color:
    rgba(255, 255, 255, 0.68);

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

  font-size: 1rem;

  line-height: 1.75;
}


/* =========================================================
   CARD ROW
========================================================= */

.gd-why-row {
  position: relative;

  z-index: 4;
}


/* =========================================================
   WHY CARD
========================================================= */

.gd-why-card-new {
  position: relative;

  display: flex;

  flex-direction: column;

  width: 100%;

  min-height: 305px;

  padding:
    31px 24px 23px;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 143, 31, 0.13);

  border-radius: 28px;

  background:
    linear-gradient(
      160deg,
      #213249 0%,
      #172536 55%,
      #111d2c 100%
    );

  box-shadow:
    0 18px 40px
    rgba(0, 0, 0, 0.18);

  transition:
    transform var(--why-transition),
    border-color var(--why-transition),
    box-shadow var(--why-transition);
}


.gd-why-card-new:hover {
  border-color:
    rgba(255, 143, 31, 0.46);

  box-shadow:
    0 27px 52px
    rgba(0, 0, 0, 0.25);

  transform:
    translateY(-10px);
}


/* TOP LINE */

.gd-why-card-new::before {
  content: "";

  position: absolute;

  top: 0;
  left: 24px;

  width: 64px;
  height: 4px;

  border-radius:
    0 0 8px 8px;

  background:
    var(--why-orange);

  transition:
    width var(--why-transition);
}


.gd-why-card-new:hover::before {
  width:
    calc(100% - 48px);
}


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

.gd-why-card-number {
  position: absolute;

  z-index: 5;

  top: 20px;
  right: 20px;

  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  border:
    1px solid
    rgba(255, 143, 31, 0.30);

  border-radius: 50%;

  background:
    rgba(255, 143, 31, 0.08);

  color:
    var(--why-orange-light);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.72rem;

  font-weight: 900;

  transition:
    background var(--why-transition),
    color var(--why-transition),
    transform var(--why-transition);
}


.gd-why-card-new:hover
.gd-why-card-number {
  background:
    var(--why-orange);

  color:
    var(--why-white);

  transform:
    rotate(-7deg)
    scale(1.06);
}


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

.gd-why-card-icon {
  position: relative;

  z-index: 4;

  display: grid;

  place-items: center;

  width: 82px;
  height: 82px;

  margin-bottom: 22px;

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius:
    25px 25px 25px 8px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.065),
      rgba(255, 255, 255, 0.018)
    );

  color:
    var(--why-orange);

  font-size: 2.15rem;

  transition:
    background var(--why-transition),
    color var(--why-transition),
    transform var(--why-transition),
    border-radius var(--why-transition);
}


.gd-why-card-new:hover
.gd-why-card-icon {
  border-radius:
    8px 25px 25px 25px;

  background:
    var(--why-orange);

  color:
    var(--why-white);

  transform:
    translateY(-4px)
    rotate(-3deg);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.gd-why-card-content {
  position: relative;

  z-index: 4;

  flex: 1;
}


.gd-why-card-content small {
  display: block;

  margin-bottom: 7px;

  color:
    var(--why-orange-light);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.63rem;

  font-weight: 800;

  letter-spacing: 0.10em;
}


.gd-why-card-content h3 {
  margin:
    0 0 9px;

  color:
    var(--why-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1.42rem;

  font-weight: 900;

  line-height: 1.1;
}


.gd-why-card-content p {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.67);

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

  font-size: 0.85rem;

  line-height: 1.62;
}


/* =========================================================
   CARD BOTTOM
========================================================= */

.gd-why-card-check {
  position: relative;

  z-index: 4;

  display: flex;

  align-items: center;

  gap: 8px;

  margin-top: 18px;

  padding-top: 15px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.075);

  color:
    rgba(255, 255, 255, 0.76);

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

  font-size: 0.74rem;
}


.gd-why-card-check i {
  color:
    var(--why-orange);
}


/* GLOW */

.gd-why-card-glow {
  position: absolute;

  z-index: 1;

  top: -90px;
  right: -90px;

  width: 220px;
  height: 220px;

  border-radius: 50%;

  opacity: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(255, 143, 31, 0.18),
      transparent 68%
    );

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


.gd-why-card-new:hover
.gd-why-card-glow {
  opacity: 1;

  transform:
    scale(1.2);
}


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

.gd-why-contact-container {
  position: relative;

  z-index: 10;

  margin-top: -125px;
}


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

.gd-why-contact-shell {
  position: relative;

  max-width: 1180px;

  margin: 0 auto;

  overflow: hidden;

  border:
    1px solid
    rgba(23, 36, 53, 0.09);

  border-radius:
    36px 16px 36px 16px;

  background:
    var(--why-white);

  box-shadow:
    0 28px 70px
    rgba(13, 23, 36, 0.18);
}


/* TOP ORANGE LINE */

.gd-why-contact-shell::before {
  content: "";

  position: absolute;

  z-index: 20;

  top: 0;
  left: 0;

  width: 100%;
  height: 5px;

  background:
    linear-gradient(
      90deg,
      var(--why-orange-dark),
      var(--why-orange-light),
      var(--why-orange-dark)
    );

  background-size:
    200% 100%;

  animation:
    gdWhyContactLine
    4s linear
    infinite;
}


/* =========================================================
   LEFT CONTACT PANEL
   LIGHT BACKGROUND / DARK NAVY TEXT
========================================================= */

.gd-why-contact-panel {
  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;

  min-height: 760px;

  padding:
    52px 42px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #f5f7f9 100%
    );

  color:
    var(--why-navy);
}


/* BACKGROUND CIRCLE */

.gd-why-contact-panel::before {
  content: "";

  position: absolute;

  right: -115px;
  bottom: -120px;

  width: 290px;
  height: 290px;

  border:
    34px solid
    rgba(255, 143, 31, 0.045);

  border-radius: 50%;

  pointer-events: none;
}


.gd-why-contact-panel::after {
  content: "";

  position: absolute;

  top: -150px;
  left: -130px;

  width: 300px;
  height: 300px;

  border-radius: 50%;

  background:
    rgba(23, 36, 53, 0.025);

  pointer-events: none;
}


/* =========================================================
   LEFT DECORATIVE TOOL
========================================================= */

.gd-why-contact-bg-icon {
  position: absolute;

  z-index: 1;

  top: 28px;
  right: 24px;

  color:
    rgba(23, 36, 53, 0.045);

  font-size: 7rem;

  transform:
    rotate(-13deg);
}


/* =========================================================
   LEFT PRETITLE
========================================================= */

.gd-why-contact-pretitle {
  position: relative;

  z-index: 3;

  display: flex;

  align-items: center;

  gap: 9px;

  color:
    var(--why-orange-dark);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.7rem;

  font-weight: 900;

  letter-spacing: 0.10em;
}


.gd-why-contact-pretitle > span {
  width: 31px;
  height: 3px;

  background:
    var(--why-orange);
}


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

.gd-why-contact-panel h2 {
  position: relative;

  z-index: 3;

  margin:
    14px 0 0;

  color:
    var(--why-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    clamp(
      2.1rem,
      2.9vw,
      2.85rem
    );

  font-weight: 900;

  line-height: 0.98;

  letter-spacing: -0.035em;
}


.gd-why-contact-panel h2 span {
  display: block;

  margin-top: 4px;

  color:
    var(--why-orange);
}


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

.gd-why-contact-panel > p {
  position: relative;

  z-index: 3;

  margin:
    20px 0 0;

  color:
    var(--why-navy-soft);

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

  font-size: 0.98rem;

  line-height: 1.75;
}


/* =========================================================
   LEFT PHONE
========================================================= */

.gd-why-contact-phone {
  position: relative;

  z-index: 3;

  display: flex;

  align-items: center;

  gap: 11px;

  margin-top: 26px;

  padding:
    8px 13px 8px 8px;

  border:
    1px solid
    rgba(23, 36, 53, 0.08);

  border-radius: 50px;

  background:
    var(--why-navy);

  color:
    var(--why-white);

  text-decoration: none;

  box-shadow:
    0 14px 29px
    rgba(13, 23, 36, 0.17);

  transition:
    background var(--why-transition),
    transform var(--why-transition),
    box-shadow var(--why-transition);
}


.gd-why-contact-phone:hover {
  background:
    var(--why-navy-dark);

  color:
    var(--why-white);

  transform:
    translateY(-4px);

  box-shadow:
    0 19px 35px
    rgba(13, 23, 36, 0.24);
}


/* PHONE ICON */

.gd-why-contact-phone-icon {
  position: relative;

  display: grid;

  flex:
    0 0 48px;

  place-items: center;

  width: 48px;
  height: 48px;

  border-radius: 50%;

  background:
    var(--why-orange);

  color:
    var(--why-white);
}


.gd-why-contact-phone-icon::before {
  content: "";

  position: absolute;

  inset: -5px;

  border:
    2px solid
    rgba(255, 143, 31, 0.30);

  border-radius: 50%;

  animation:
    gdWhyPhoneRing
    2s ease-out
    infinite;
}


/* PHONE TEXT */

.gd-why-contact-phone-text {
  display: flex;

  flex: 1;

  flex-direction: column;
}


.gd-why-contact-phone-text small {
  color:
    rgba(255, 255, 255, 0.48);

  font-size: 0.54rem;

  font-weight: 700;

  letter-spacing: 0.06em;
}


.gd-why-contact-phone-text strong {
  margin-top: 2px;

  color:
    var(--why-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1.16rem;

  font-weight: 900;

  white-space: nowrap;
}


/* PHONE ARROW */

.gd-why-contact-phone-arrow {
  display: grid;

  flex:
    0 0 36px;

  place-items: center;

  width: 36px;
  height: 36px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.06);

  color:
    var(--why-orange);

  transition:
    background var(--why-transition),
    color var(--why-transition),
    transform var(--why-transition);
}


.gd-why-contact-phone:hover
.gd-why-contact-phone-arrow {
  background:
    var(--why-orange);

  color:
    var(--why-white);

  transform:
    translate(3px, -3px);
}


/* =========================================================
   INFORMATION LIST
========================================================= */

.gd-why-info-list {
  position: relative;

  z-index: 3;

  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-top: 28px;
}


/* =========================================================
   INFORMATION ITEM
========================================================= */

.gd-why-info-item {
  display: flex;

  align-items: center;

  gap: 13px;

  min-height: 76px;

  padding:
    12px 14px;

  border:
    1px solid
    rgba(23, 36, 53, 0.085);

  border-radius:
    18px 18px 18px 6px;

  background:
    rgba(255, 255, 255, 0.76);

  box-shadow:
    0 8px 22px
    rgba(23, 36, 53, 0.04);

  transition:
    border-color var(--why-transition),
    background var(--why-transition),
    transform var(--why-transition),
    box-shadow var(--why-transition);
}


.gd-why-info-item:hover {
  border-color:
    rgba(255, 143, 31, 0.30);

  background:
    var(--why-white);

  transform:
    translateX(5px);

  box-shadow:
    0 14px 29px
    rgba(23, 36, 53, 0.08);
}


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

.gd-why-info-icon {
  display: grid;

  flex:
    0 0 48px;

  place-items: center;

  width: 48px;
  height: 48px;

  border-radius:
    15px 15px 15px 5px;

  background:
    var(--why-navy);

  color:
    var(--why-orange);

  font-size: 1rem;

  transition:
    background var(--why-transition),
    color var(--why-transition),
    transform var(--why-transition);
}


.gd-why-info-item:hover
.gd-why-info-icon {
  background:
    var(--why-orange);

  color:
    var(--why-white);

  transform:
    rotate(-5deg);
}


/* =========================================================
   INFORMATION TEXT
========================================================= */

.gd-why-info-item > div {
  display: flex;

  flex-direction: column;

  min-width: 0;
}


.gd-why-info-item small {
  color:
    var(--why-orange-dark);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.55rem;

  font-weight: 900;

  letter-spacing: 0.075em;
}


.gd-why-info-item strong {
  margin-top: 2px;

  color:
    var(--why-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1rem;

  font-weight: 900;

  line-height: 1.2;
}


.gd-why-info-item p {
  margin:
    2px 0 0;

  color:
    var(--why-gray);

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

  font-size: 0.76rem;

  line-height: 1.4;
}


.gd-why-info-item a {
  margin-top: 3px;

  color:
    var(--why-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.86rem;

  font-weight: 800;

  text-decoration: none;

  overflow-wrap: anywhere;

  transition:
    color var(--why-transition);
}


.gd-why-info-item a:hover {
  color:
    var(--why-orange-dark);
}


/* =========================================================
   LEFT TRUST BAR
========================================================= */

.gd-why-contact-trust {
  position: relative;

  z-index: 3;

  display: flex;

  flex-wrap: wrap;

  gap:
    8px 17px;

  margin-top: 23px;

  padding-top: 19px;

  border-top:
    1px solid
    rgba(23, 36, 53, 0.08);
}


.gd-why-contact-trust span {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  color:
    var(--why-navy-soft);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.72rem;

  font-weight: 800;
}


.gd-why-contact-trust i {
  color:
    var(--why-orange);
}


/* =========================================================
   DECORATIVE 24
========================================================= */

.gd-why-contact-number {
  position: absolute;

  z-index: 1;

  right: 15px;
  bottom: -5px;

  color:
    rgba(23, 36, 53, 0.04);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 8rem;

  font-weight: 900;

  line-height: 1;
}


/* =========================================================
   RIGHT FORM PANEL
========================================================= */

.gd-why-form-panel {
  position: relative;

  height: 100%;

  min-height: 760px;

  padding:
    48px 45px;

  background:
    var(--why-white);
}


/* SUBTLE CORNER GLOW */

.gd-why-form-panel::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 210px;
  height: 210px;

  pointer-events: none;

  background:
    radial-gradient(
      circle at top right,
      rgba(255, 143, 31, 0.085),
      transparent 70%
    );
}


/* =========================================================
   FORM HEADING
========================================================= */

.gd-why-form-heading {
  position: relative;

  z-index: 2;

  margin-bottom: 30px;
}


.gd-why-form-pretitle {
  display: flex;

  align-items: center;

  gap: 9px;

  color:
    var(--why-orange-dark);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.68rem;

  font-weight: 900;

  letter-spacing: 0.09em;
}


.gd-why-form-pretitle > span {
  width: 30px;
  height: 3px;

  background:
    var(--why-orange);
}


.gd-why-form-heading h3 {
  margin:
    9px 0 0;

  color:
    var(--why-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

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

  font-weight: 900;

  line-height: 1;

  letter-spacing: -0.025em;
}


.gd-why-form-heading h3 span {
  color:
    var(--why-orange);
}


.gd-why-form-heading p {
  max-width: 560px;

  margin:
    13px 0 0;

  color:
    var(--why-gray);

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

  font-size: 0.9rem;

  line-height: 1.7;
}


/* =========================================================
   BOOKING FORM
========================================================= */

.booking-form {
  position: relative;

  z-index: 3;
}


/* =========================================================
   FIELD
========================================================= */

.booking-field {
  position: relative;
}


/* =========================================================
   INPUT / SELECT / TEXTAREA
========================================================= */

.booking-field__control {
  width: 100%;

  min-height: 58px;

  padding:
    20px 47px 8px 17px !important;

  border:
    1px solid
    var(--why-border) !important;

  border-radius:
    15px !important;

  outline: 0;

  background:
    var(--why-light-soft) !important;

  color:
    var(--why-navy) !important;

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

  font-size: 0.86rem !important;

  font-weight: 500;

  box-shadow:
    none !important;

  transition:
    border-color var(--why-transition),
    background var(--why-transition),
    box-shadow var(--why-transition);
}


.booking-field__control:hover {
  border-color:
    rgba(255, 143, 31, 0.28) !important;
}


.booking-field__control:focus {
  border-color:
    var(--why-orange) !important;

  background:
    var(--why-white) !important;

  box-shadow:
    0 0 0 4px
    rgba(255, 143, 31, 0.08) !important;
}


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

.booking-field label {
  position: absolute;

  z-index: 4;

  top: 50%;
  left: 17px;

  margin: 0;

  color:
    #7c848c;

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

  font-size: 0.82rem;

  line-height: 1;

  pointer-events: none;

  transform:
    translateY(-50%);

  transform-origin:
    left center;

  transition:
    top 200ms ease,
    transform 200ms ease,
    color 200ms ease,
    font-size 200ms ease;
}


/* FLOAT LABEL */

.booking-field__control:focus ~ label,
.booking-field__control:not(:placeholder-shown) ~ label,
.booking-field select:valid ~ label {
  top: 11px;

  color:
    var(--why-orange-dark);

  font-size: 0.58rem;

  font-weight: 800;

  transform: none;
}


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

.booking-field__icon {
  position: absolute;

  z-index: 4;

  top: 50%;
  right: 17px;

  color:
    var(--why-orange);

  font-size: 0.9rem;

  pointer-events: none;

  transform:
    translateY(-50%);
}


/* =========================================================
   TEXTAREA
========================================================= */

.booking-field--textarea
.booking-field__control {
  min-height: 125px;

  padding-top:
    25px !important;

  resize: vertical;
}


.booking-field--textarea label {
  top: 22px;

  transform: none;
}


.booking-field--textarea
.booking-field__icon {
  top: 20px;

  transform: none;
}


/* =========================================================
   SELECT
========================================================= */

.booking-field--select
.booking-field__control {
  padding-right:
    38px !important;
}


.booking-field--select label {
  top: 10px;

  color:
    var(--why-orange-dark);

  font-size: 0.57rem;

  font-weight: 800;

  transform: none;
}


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

.booking-form__submit {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 11px;

  width: 100%;

  min-height: 58px;

  padding:
    0 25px;

  overflow: hidden;

  border: 0;

  border-radius:
    50px 14px 50px 14px;

  background:
    var(--why-orange);

  color:
    var(--why-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.94rem;

  font-weight: 900;

  cursor: pointer;

  box-shadow:
    0 13px 28px
    rgba(255, 143, 31, 0.26);

  transition:
    background var(--why-transition),
    transform var(--why-transition),
    box-shadow var(--why-transition);
}


/* BUTTON SHINE */

.booking-form__submit::before {
  content: "";

  position: absolute;

  top: -30%;
  left: -60%;

  width: 30%;
  height: 160%;

  background:
    linear-gradient(
      110deg,
      transparent,
      rgba(255, 255, 255, 0.45),
      transparent
    );

  transform:
    skewX(-20deg);

  animation:
    gdWhyButtonShine
    3.5s ease-in-out
    infinite;
}


.booking-form__submit:hover {
  background:
    var(--why-orange-dark);

  transform:
    translateY(-3px);

  box-shadow:
    0 18px 34px
    rgba(255, 143, 31, 0.34);
}


/* BUTTON ICON */

.booking-form__submit-icon {
  display: grid;

  place-items: center;

  width: 34px;
  height: 34px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.16);

  color:
    var(--why-white);
}


.booking-form__submit-arrow {
  transition:
    transform var(--why-transition);
}


.booking-form__submit:hover
.booking-form__submit-arrow {
  transform:
    translateX(5px);
}


/* =========================================================
   FORM NOTE
========================================================= */

.booking-form__note {
  max-width: 560px;

  margin:
    17px auto 0;

  color:
    var(--why-gray);

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

  font-size: 0.69rem;

  line-height: 1.6;

  text-align: center;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.gd-why-contact-phone:focus-visible,
.gd-why-info-item a:focus-visible,
.booking-field__control:focus-visible,
.booking-form__submit:focus-visible {
  outline:
    3px solid
    var(--why-orange-light);

  outline-offset: 3px;
}


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

@keyframes gdWhyWrenchFloat {

  0%,
  100% {
    transform:
      translateY(0)
      rotate(-20deg);
  }

  50% {
    transform:
      translateY(-20px)
      rotate(-8deg);
  }

}


@keyframes gdWhyGearRotate {

  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(360deg);
  }

}


@keyframes gdWhyToolsFloat {

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

  50% {
    transform:
      translateY(-18px)
      rotate(-2deg);
  }

}


@keyframes gdWhyPhoneRing {

  0% {
    opacity: 0.75;

    transform:
      scale(0.9);
  }

  100% {
    opacity: 0;

    transform:
      scale(1.42);
  }

}


@keyframes gdWhyContactLine {

  from {
    background-position:
      200% 0;
  }

  to {
    background-position:
      -200% 0;
  }

}


@keyframes gdWhyButtonShine {

  0%,
  65% {
    left: -60%;
  }

  100% {
    left: 145%;
  }

}


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

@media (min-width: 1400px) {

  .gd-why-contact-shell {
    max-width: 1220px;
  }


  .gd-why-contact-panel {
    padding:
      56px 46px;
  }


  .gd-why-form-panel {
    padding:
      52px 50px;
  }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

  .gd-why-dark {
    padding:
      85px 0 190px;
  }


  .gd-why-card-new {
    padding:
      29px 20px 22px;
  }


  .gd-why-card-icon {
    width: 76px;
    height: 76px;

    font-size: 2rem;
  }


  .gd-why-card-content h3 {
    font-size: 1.3rem;
  }


  .gd-why-contact-panel {
    padding:
      45px 32px;
  }


  .gd-why-form-panel {
    padding:
      44px 34px;
  }

}


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

@media (max-width: 991.98px) {

  .gd-why-section {
    padding-bottom: 80px;
  }


  .gd-why-dark {
    padding:
      75px 0 180px;
  }


  .gd-why-contact-container {
    margin-top: -110px;
  }


  .gd-why-contact-shell {
    max-width: 780px;

    border-radius:
      30px 14px 30px 14px;
  }


  .gd-why-contact-panel,
  .gd-why-form-panel {
    min-height: auto;
  }


  .gd-why-contact-panel {
    padding:
      46px 42px;
  }


  .gd-why-form-panel {
    padding:
      45px 42px;
  }


  .gd-why-info-list {
    display: grid;

    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


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

@media (max-width: 767.98px) {

  .gd-why-section {
    padding-bottom: 65px;
  }


  .gd-why-dark {
    padding:
      60px 0 160px;
  }


  .gd-why-header h2 {
    font-size:
      clamp(
        2.25rem,
        8.5vw,
        3rem
      );
  }


  .gd-why-header p {
    font-size: 0.95rem;
  }


  .gd-why-card-new {
    min-height: auto;

    padding:
      27px 21px 22px;
  }


  .gd-why-contact-container {
    margin-top: -90px;
  }


  .gd-why-contact-panel {
    padding:
      40px 29px;
  }


  .gd-why-contact-panel h2 {
    font-size:
      clamp(
        2rem,
        7vw,
        2.6rem
      );
  }


  .gd-why-form-panel {
    padding:
      40px 29px;
  }


  .gd-why-form-heading h3 {
    font-size:
      clamp(
        1.9rem,
        7vw,
        2.4rem
      );
  }


  .gd-why-info-list {
    grid-template-columns: 1fr;
  }

}


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

@media (max-width: 575.98px) {

  .gd-why-section {
    padding-bottom: 55px;
  }


  .gd-why-dark {
    padding:
      52px 0 145px;
  }


  .gd-why-pretitle {
    font-size: 0.65rem;
  }


  .gd-why-pretitle span {
    width: 28px;
  }


  .gd-why-header h2 {
    font-size: 2.2rem;
  }


  .gd-why-card-new {
    max-width: 380px;

    margin: 0 auto;
  }


  .gd-why-contact-container {
    margin-top: -78px;
  }


  .gd-why-contact-shell {
    border-radius:
      25px 12px 25px 12px;
  }


  .gd-why-contact-panel {
    padding:
      35px 22px;
  }


  .gd-why-contact-panel h2 {
    font-size: 2.15rem;
  }


  .gd-why-contact-panel > p {
    font-size: 0.91rem;
  }


  .gd-why-contact-phone-text strong {
    font-size: 1.05rem;
  }


  .gd-why-info-item {
    min-height: 72px;

    padding:
      11px 12px;
  }


  .gd-why-info-icon {
    flex-basis: 44px;

    width: 44px;
    height: 44px;
  }


  .gd-why-form-panel {
    padding:
      36px 22px;
  }


  .gd-why-form-heading h3 {
    font-size: 2rem;
  }


  .booking-field__control {
    min-height: 55px;

    font-size:
      0.82rem !important;
  }

}


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

@media (max-width: 400px) {

  .gd-why-header h2 {
    font-size: 2rem;
  }


  .gd-why-card-new {
    padding:
      25px 18px 21px;
  }


  .gd-why-contact-panel {
    padding:
      32px 18px;
  }


  .gd-why-contact-panel h2 {
    font-size: 1.95rem;
  }


  .gd-why-contact-phone-arrow {
    display: none;
  }


  .gd-why-contact-trust {
    flex-direction: column;

    align-items: flex-start;
  }


  .gd-why-form-panel {
    padding:
      32px 18px;
  }


  .gd-why-form-heading h3 {
    font-size: 1.85rem;
  }


  .booking-field__control {
    padding-left:
      14px !important;
  }

}


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

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

  .gd-why-bg-shapes > i,
  .gd-why-contact-shell::before,
  .gd-why-contact-phone-icon::before,
  .booking-form__submit::before {
    animation:
      none !important;
  }


  .gd-why-card-new,
  .gd-why-card-number,
  .gd-why-card-icon,
  .gd-why-card-glow,
  .gd-why-contact-phone,
  .gd-why-contact-phone-arrow,
  .gd-why-info-item,
  .gd-why-info-icon,
  .booking-field__control,
  .booking-form__submit,
  .booking-form__submit-arrow {
    transition:
      none !important;
  }


  .gd-why-card-new:hover,
  .gd-why-card-new:hover
  .gd-why-card-number,
  .gd-why-card-new:hover
  .gd-why-card-icon,
  .gd-why-contact-phone:hover,
  .gd-why-contact-phone:hover
  .gd-why-contact-phone-arrow,
  .gd-why-info-item:hover,
  .gd-why-info-item:hover
  .gd-why-info-icon,
  .booking-form__submit:hover {
    transform:
      none !important;
  }

}

/* 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */

/* =========================================================
   VARIABLES
========================================================= */

:root {

  --gd-navy: #172435;
  --gd-navy-dark: #0d1724;
  --gd-navy-soft: #223247;

  --gd-orange: #ff8f1f;
  --gd-orange-dark: #e8780d;
  --gd-orange-light: #ffa142;

  --gd-white: #ffffff;

  --gd-light-gray: #f1f2f5;

  --gd-text: #20282f;
  --gd-gray: #626a73;

  --gd-border:
    rgba(23, 36, 53, 0.08);

  --gd-transition:
    280ms ease;

}


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

.gd-combined-section {

  position:
    relative;

  overflow:
    visible;

  background:
    var(--gd-white);

}


/* =========================================================
   TESTIMONIAL AREA
========================================================= */

.gd-testimonial-area {

  position:
    relative;

  padding:
    85px 0 190px;

  overflow:
    visible;

  background:
    var(--gd-light-gray);

}


/* subtle pattern */

.gd-testimonial-area::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  opacity:
    0.18;

  background-image:

    linear-gradient(rgba(23, 36, 53, 0.025) 1px,
      transparent 1px),

    linear-gradient(90deg,
      rgba(23, 36, 53, 0.025) 1px,
      transparent 1px);

  background-size:
    44px 44px;

}


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

.gd-testimonial-heading {

  position:
    relative;

  z-index:
    2;

  max-width:
    700px;

  margin:
    0 auto 60px;

}


.gd-testimonial-pretitle {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  margin-bottom:
    10px;

  color:
    var(--gd-orange);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    0.74rem;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

}


.gd-testimonial-pretitle span {

  width:
    25px;

  height:
    1px;

  background:
    var(--gd-orange);

}


.gd-testimonial-heading h2 {

  margin:
    0;

  color:
    var(--gd-text);

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

  font-size:
    clamp(2.6rem,
      4vw,
      3.8rem);

  font-weight:
    700;

  line-height:
    1;

}


.gd-testimonial-heading p {

  max-width:
    540px;

  margin:
    15px auto 0;

  color:
    var(--gd-gray);

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

  font-size:
    0.84rem;

  line-height:
    1.7;

}


/* =========================================================
   CAROUSEL
========================================================= */

.gd-review-carousel {

  position:
    relative;

  z-index:
    5;

  max-width:
    1240px;

  margin:
    0 auto;

  padding:
    0 80px;

}


/* =========================================================
   VIEWPORT
========================================================= */

.gd-carousel-viewport {

  position:
    relative;

  width:
    100%;

  overflow:
    hidden;

  padding:
    20px 0 70px;

  touch-action:
    pan-y;

  cursor:
    grab;

}


.gd-carousel-viewport:active {

  cursor:
    grabbing;

}


/* =========================================================
   TRACK
========================================================= */

.gd-carousel-track {

  display:
    flex;

  align-items:
    stretch;

  gap:
    60px;

  width:
    100%;

  will-change:
    transform;

  transition:
    transform 520ms cubic-bezier(0.22,
      0.61,
      0.36,
      1);

}


/* =========================================================
   SLIDE
========================================================= */

.gd-review-slide {

  position:
    relative;

  flex:
    0 0 calc((100% - 60px) / 2);

  min-width:
    0;

  /*
    Reserved space for customer box.
  */

  padding-left:
    82px;

}


/* =========================================================
   REVIEW CARD
========================================================= */

.gd-review-card {

  position:
    relative;

  display:
    flex;

  align-items:
    center;

  width:
    100%;

  min-height:
    225px;

  padding:
    32px 30px 32px 155px;

  overflow:
    visible;

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

  border-radius:
    17px;

  background:
    var(--gd-white);

  box-shadow:
    0 16px 38px rgba(23, 36, 53, 0.09);

  transition:
    transform var(--gd-transition),
    box-shadow var(--gd-transition);

}


.gd-review-card:hover {

  transform:
    translateY(-5px);

  box-shadow:
    0 24px 52px rgba(23, 36, 53, 0.13);

}


/* =========================================================
   CUSTOMER SPEECH-BUBBLE BOX

   KEEPING SAME SHAPE
========================================================= */

.gd-customer-box {

  position:
    absolute;

  z-index:
    10;

  left:
    -82px;

  top:
    50%;

  width:
    190px;

  height:
    190px;

  border-radius:
    24px;

  background:
    var(--gd-navy);

  box-shadow:
    0 17px 34px rgba(23, 36, 53, 0.20);

  transform:
    translateY(-56%);

}


/* =========================================================
   SAME SPEECH TAIL
========================================================= */

.gd-customer-box::after {

  content:
    "";

  position:
    absolute;

  left:
    28px;

  bottom:
    -52px;

  width:
    84px;

  height:
    67px;

  background:
    var(--gd-navy);

  clip-path:
    polygon(0 0,
      100% 0,
      16% 100%);

}


/* =========================================================
   CUSTOMER IMAGE

   BIGGER INSIDE SAME SHAPE
========================================================= */

.gd-customer-image {

  position:
    absolute;

  z-index:
    3;

  left:
    50%;

  top:
    50%;

  width:
    132px;

  height:
    132px;

  overflow:
    hidden;

  border-radius:
    18px;

  background:
    #ececec;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.13);

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

}


.gd-customer-image img {

  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

  transition:
    transform 450ms ease;

}


.gd-review-card:hover .gd-customer-image img {

  transform:
    scale(1.05);

}


/* =========================================================
   REVIEW CONTENT
========================================================= */

.gd-review-content {

  width:
    100%;

}


.gd-review-content>p {

  max-width:
    350px;

  margin:
    0;

  color:
    #333a41;

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

  font-size:
    0.81rem;

  line-height:
    1.75;

}


/* =========================================================
   AUTHOR
========================================================= */

.gd-review-author {

  display:
    flex;

  flex-direction:
    column;

  margin-top:
    18px;

}


.gd-review-author strong {

  color:
    var(--gd-navy-dark);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    1.02rem;

  font-weight:
    800;

}


.gd-review-author small {

  margin-top:
    4px;

  color:
    var(--gd-gray);

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

  font-size:
    0.64rem;

}


/* =========================================================
   CAROUSEL ARROWS
========================================================= */

.gd-carousel-arrow {

  position:
    absolute;

  z-index:
    30;

  top:
    50%;

  display:
    grid;

  place-items:
    center;

  width:
    48px;

  height:
    48px;

  padding:
    0;

  border:
    0;

  border-radius:
    50%;

  cursor:
    pointer;

  transform:
    translateY(-50%);

  transition:
    transform var(--gd-transition),
    background var(--gd-transition),
    color var(--gd-transition),
    opacity var(--gd-transition),
    box-shadow var(--gd-transition);

}


/* Previous */

.gd-carousel-prev {

  left:
    5px;

  background:
    var(--gd-white);

  color:
    #9ba2a9;

  box-shadow:
    0 8px 20px rgba(23, 36, 53, 0.08);

}


/* Next */

.gd-carousel-next {

  right:
    5px;

  background:
    var(--gd-orange);

  color:
    var(--gd-white);

  box-shadow:
    0 9px 22px rgba(255, 143, 31, 0.30);

}


.gd-carousel-arrow:hover:not(:disabled) {

  background:
    var(--gd-orange-dark);

  color:
    var(--gd-white);

  transform:
    translateY(-50%) scale(1.1);

}


.gd-carousel-arrow.is-disabled {

  opacity:
    0.28;

  cursor:
    default;

  box-shadow:
    none;

}


/* =========================================================
   SERVICE LOCATIONS
========================================================= */

.gd-service-locations {

  position:
    absolute;

  z-index:
    20;

  left:
    50%;

  bottom:
    0;

  display:
    grid;

  grid-template-columns:
    31% 69%;

  width:
    min(1050px,
      calc(100% - 80px));

  min-height:
    220px;

  overflow:
    hidden;

  background:
    var(--gd-navy-dark);

  box-shadow:
    0 23px 50px rgba(13, 23, 36, 0.23);

  /*
     Half remains in gray area.
     Half extends into white area.
  */

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

}


/* decorative texture */

.gd-service-locations::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  opacity:
    0.3;

  background:

    repeating-linear-gradient(35deg,
      transparent 0,
      transparent 26px,
      rgba(255, 255, 255, 0.022) 27px,
      transparent 28px),

    radial-gradient(circle at 90% 0%,
      rgba(255, 143, 31, 0.11),
      transparent 30%);

}


/* =========================================================
   LOCATION INTRO
========================================================= */

.gd-location-intro {

  position:
    relative;

  z-index:
    3;

  padding:
    35px 30px;

  border-right:
    1px solid rgba(255, 255, 255, 0.08);

}


.gd-location-pretitle {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  margin-bottom:
    8px;

  color:
    var(--gd-orange);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    0.67rem;

  font-weight:
    800;

  letter-spacing:
    0.08em;

}


.gd-location-pretitle span {

  width:
    23px;

  height:
    1px;

  background:
    var(--gd-orange);

}


.gd-location-intro h2 {

  margin:
    0;

  color:
    var(--gd-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    1.8rem;

  font-weight:
    800;

  line-height:
    1.05;

}


.gd-location-intro h2 span {

  display:
    block;

}


.gd-location-intro p {

  margin:
    12px 0 0;

  color:
    rgba(255, 255, 255, 0.48);

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

  font-size:
    0.69rem;

  line-height:
    1.6;

}


/* =========================================================
   LOCATION CTA
========================================================= */

.gd-location-all {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  margin-top:
    17px;

  color:
    var(--gd-orange);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    0.69rem;

  font-weight:
    800;

  text-decoration:
    none;

}


.gd-location-all:hover {

  color:
    var(--gd-orange-light);

}


.gd-location-all i {

  transition:
    transform var(--gd-transition);

}


.gd-location-all:hover i {

  transform:
    translateX(5px);

}


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

.gd-location-grid {

  position:
    relative;

  z-index:
    3;

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

}


/* =========================================================
   LOCATION LINK
========================================================= */

.gd-location-link {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    8px;

  min-height:
    110px;

  padding:
    14px 10px;

  border-right:
    1px solid rgba(255, 255, 255, 0.07);

  border-bottom:
    1px solid rgba(255, 255, 255, 0.07);

  color:
    var(--gd-white);

  text-align:
    center;

  text-decoration:
    none;

  transition:
    background var(--gd-transition);

}


.gd-location-link:hover {

  color:
    var(--gd-white);

  background:
    rgba(255, 143, 31, 0.09);

}


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

.gd-location-icon {

  display:
    grid;

  place-items:
    center;

  width:
    39px;

  height:
    39px;

  border-radius:
    50%;

  background:
    rgba(255, 143, 31, 0.12);

  color:
    var(--gd-orange);

  font-size:
    0.95rem;

  transition:
    background var(--gd-transition),
    color var(--gd-transition),
    transform var(--gd-transition);

}


.gd-location-link:hover .gd-location-icon {

  background:
    var(--gd-orange);

  color:
    var(--gd-white);

  transform:
    translateY(-3px);

}


/* =========================================================
   LOCATION TEXT
========================================================= */

.gd-location-text {

  display:
    flex;

  flex-direction:
    column;

}


.gd-location-text strong {

  color:
    var(--gd-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    0.8rem;

  font-weight:
    700;

}


.gd-location-text small {

  margin-top:
    2px;

  color:
    rgba(255, 255, 255, 0.42);

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

  font-size:
    0.58rem;

}


/* =========================================================
   WHITE BOTTOM AREA
========================================================= */

.gd-section-white-bottom {

  min-height:
    210px;

  background:
    var(--gd-white);

}


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

@media (min-width: 1400px) {

  .gd-review-carousel {

    max-width:
      1280px;

  }


  .gd-carousel-track {

    gap:
      66px;

  }


  .gd-review-slide {

    flex:
      0 0 calc((100% - 66px) / 2);

    padding-left:
      90px;

  }


  .gd-review-card {

    min-height:
      235px;

    padding-left:
      170px;

  }


  .gd-customer-box {

    left:
      -90px;

    width:
      200px;

    height:
      200px;

  }


  .gd-customer-box::after {

    width:
      88px;

    height:
      70px;

  }


  .gd-customer-image {

    width:
      140px;

    height:
      140px;

  }

}


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

@media (max-width: 991.98px) {

  .gd-testimonial-area {

    padding:
      75px 0 210px;

  }


  .gd-review-carousel {

    max-width:
      720px;

    padding:
      0 70px;

  }


  .gd-carousel-track {

    gap:
      35px;

  }


  .gd-review-slide {

    flex:
      0 0 100%;

    padding-left:
      85px;

  }


  .gd-review-card {

    min-height:
      225px;

    padding-left:
      170px;

  }


  .gd-customer-box {

    left:
      -85px;

  }


  .gd-service-locations {

    grid-template-columns:
      1fr;

    width:
      calc(100% - 70px);

  }


  .gd-location-intro {

    border-right:
      0;

    border-bottom:
      1px solid rgba(255, 255, 255, 0.08);

  }


  .gd-location-grid {

    grid-template-columns:
      repeat(4, 1fr);

  }


  .gd-section-white-bottom {

    min-height:
      400px;

  }

}


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

@media (max-width: 767.98px) {

  .gd-testimonial-area {

    padding:
      65px 0 200px;

  }


  .gd-testimonial-heading {

    margin-bottom:
      85px;

  }


  .gd-testimonial-heading h2 {

    font-size:
      2.3rem;

  }


  .gd-review-carousel {

    padding:
      0 45px;

  }


  .gd-carousel-track {

    gap:
      26px;

  }


  .gd-review-slide {

    flex:
      0 0 100%;

    padding:
      95px 0 0;

  }


  .gd-review-card {

    min-height:
      300px;

    padding:
      125px 22px 30px;

    text-align:
      center;

  }


  .gd-customer-box {

    left:
      50%;

    top:
      -85px;

    width:
      175px;

    height:
      175px;

    transform:
      translateX(-50%);

  }


  .gd-customer-box::after {

    left:
      37px;

    bottom:
      -45px;

    width:
      74px;

    height:
      58px;

  }


  .gd-customer-image {

    width:
      120px;

    height:
      120px;

  }


  .gd-review-content>p {

    max-width:
      none;

  }


  .gd-review-author {

    align-items:
      center;

  }


  .gd-carousel-arrow {

    width:
      39px;

    height:
      39px;

  }


  .gd-carousel-prev {

    left:
      0;

  }


  .gd-carousel-next {

    right:
      0;

  }


  .gd-service-locations {

    width:
      calc(100% - 30px);

  }


  .gd-location-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }


  .gd-location-link {

    min-height:
      96px;

  }


  .gd-section-white-bottom {

    min-height:
      575px;

  }

}


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

@media (max-width: 480px) {

  .gd-review-carousel {

    padding:
      0 38px;

  }


  .gd-testimonial-heading h2 {

    font-size:
      2rem;

  }


  .gd-review-card {

    padding-left:
      18px;

    padding-right:
      18px;

  }


  .gd-customer-box {

    width:
      155px;

    height:
      155px;

  }


  .gd-customer-box::after {

    left:
      33px;

    bottom:
      -40px;

    width:
      67px;

    height:
      52px;

  }


  .gd-customer-image {

    width:
      108px;

    height:
      108px;

    border-radius:
      16px;

  }


  .gd-service-locations {

    width:
      calc(100% - 20px);

  }


  .gd-location-intro {

    padding:
      28px 22px;

  }


  .gd-location-intro h2 {

    font-size:
      1.55rem;

  }

}


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

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

  .gd-carousel-track {

    transition:
      none;

  }


  .gd-review-card,
  .gd-carousel-arrow,
  .gd-customer-image img {

    transition:
      none;

  }

}

/* =========================================================
   FINAL FIX
   TESTIMONIAL + SERVICE LOCATIONS
   TABLET / MOBILE
========================================================= */

@media (max-width: 991.98px) {

  /* =======================================================
     TESTIMONIAL AREA
  ======================================================== */

  .gd-testimonial-area {
    position: relative !important;

    padding:
      75px 0 55px !important;

    overflow: hidden !important;
  }


  /* give the testimonials their own complete space */
  .gd-testimonial-area > .container {
    position: relative;

    z-index: 5;

    padding-bottom: 70px !important;
  }


  /* =======================================================
     CAROUSEL
  ======================================================== */

  .gd-review-carousel {
    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 720px;

    margin:
      0 auto !important;

    padding:
      0 65px;
  }


  .gd-carousel-viewport {
    position: relative;

    width: 100%;

    padding:
      25px 0 55px !important;

    overflow: hidden;
  }


  .gd-carousel-track {
    align-items: stretch;

    gap: 35px;
  }


  .gd-review-slide {
    flex:
      0 0 100%;

    min-width: 100%;

    padding-left: 85px;
  }


  .gd-review-card {
    min-height: 235px;

    padding:
      32px 28px 40px 170px;
  }


  /* =======================================================
     SERVICE LOCATION
     IMPORTANT: REMOVE FLOATING POSITION
  ======================================================== */

  .gd-service-locations {
    position: relative !important;

    z-index: 3 !important;

    top: auto !important;

    right: auto !important;

    bottom: auto !important;

    left: auto !important;

    display: grid;

    grid-template-columns:
      1fr !important;

    width:
      calc(100% - 70px) !important;

    min-height: 0 !important;

    margin:
      0 auto !important;

    transform:
      none !important;
  }


  .gd-location-intro {
    border-right: 0;

    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.08);
  }


  .gd-location-grid {
    grid-template-columns:
      repeat(4, 1fr);
  }


  /* OLD WHITE SPACER IS NO LONGER NEEDED */
  .gd-section-white-bottom {
    display: none !important;
  }

}


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

@media (max-width: 767.98px) {

  .gd-testimonial-area {
    padding:
      60px 0 45px !important;
  }


  /* VERY IMPORTANT:
     creates real space after complete testimonial
  */
  .gd-testimonial-area > .container {
    padding-bottom:
      75px !important;
  }


  /* =======================================================
     TESTIMONIAL HEADING
  ======================================================== */

  .gd-testimonial-heading {
    margin:
      0 auto 85px;
  }


  .gd-testimonial-heading h2 {
    font-size:
      2.3rem;
  }


  /* =======================================================
     CAROUSEL
  ======================================================== */

  .gd-review-carousel {
    max-width: 100%;

    padding:
      0 45px;
  }


  .gd-carousel-viewport {
    padding:
      20px 0 65px !important;
  }


  .gd-carousel-track {
    gap: 26px;
  }


  /* =======================================================
     REVIEW SLIDE
  ======================================================== */

  .gd-review-slide {
    flex:
      0 0 100%;

    min-width: 100%;

    padding:
      95px 0 0;
  }


  /* =======================================================
     REVIEW CARD
  ======================================================== */

  .gd-review-card {
    position: relative;

    z-index: 4;

    min-height: 325px !important;

    padding:
      125px 25px 45px !important;

    text-align: center;
  }


  /* =======================================================
     CUSTOMER BOX
  ======================================================== */

  .gd-customer-box {
    left: 50%;

    top: -85px;

    width: 175px;

    height: 175px;

    transform:
      translateX(-50%);
  }


  .gd-customer-box::after {
    left: 37px;

    bottom: -45px;

    width: 74px;

    height: 58px;
  }


  .gd-customer-image {
    width: 120px;

    height: 120px;
  }


  /* =======================================================
     REVIEW CONTENT
  ======================================================== */

  .gd-review-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    height: 100%;
  }


  .gd-review-content > p {
    max-width: 420px;

    margin:
      0 auto;

    font-size: 0.84rem;

    line-height: 1.75;
  }


  .gd-review-author {
    align-items: center;

    margin-top: 22px;

    padding-bottom: 5px;
  }


  .gd-review-author strong {
    font-size: 1.08rem;
  }


  .gd-review-author small {
    display: block;

    margin-top: 5px;

    font-size: 0.65rem;
  }


  /* =======================================================
     ARROWS
  ======================================================== */

  .gd-carousel-arrow {
    z-index: 30;

    width: 40px;

    height: 40px;
  }


  .gd-carousel-prev {
    left: 0;
  }


  .gd-carousel-next {
    right: 0;
  }


  /* =======================================================
     SERVICE LOCATIONS
     NOW COMPLETELY BELOW TESTIMONIAL
  ======================================================== */

  .gd-service-locations {
    position: relative !important;

    top: auto !important;

    right: auto !important;

    bottom: auto !important;

    left: auto !important;

    width:
      calc(100% - 30px) !important;

    margin:
      0 auto !important;

    transform:
      none !important;
  }


  .gd-location-intro {
    padding:
      32px 25px;
  }


  .gd-location-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .gd-location-link {
    min-height: 105px;
  }

}


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

@media (max-width: 480px) {

  .gd-testimonial-area {
    padding:
      52px 0 40px !important;
  }


  /* MORE SPACE BETWEEN REVIEW AND LOCATIONS */
  .gd-testimonial-area > .container {
    padding-bottom:
      85px !important;
  }


  .gd-testimonial-heading {
    margin-bottom:
      80px;
  }


  .gd-testimonial-heading h2 {
    font-size:
      2rem;
  }


  .gd-review-carousel {
    padding:
      0 30px;
  }


  .gd-carousel-viewport {
    padding-bottom:
      70px !important;
  }


  .gd-review-slide {
    padding-top:
      90px;
  }


  .gd-review-card {
    min-height:
      320px !important;

    padding:
      115px 20px 48px !important;

    border-radius:
      17px;
  }


  .gd-customer-box {
    top: -80px;

    width: 160px;

    height: 160px;
  }


  .gd-customer-box::after {
    left: 34px;

    bottom: -41px;

    width: 68px;

    height: 54px;
  }


  .gd-customer-image {
    width: 110px;

    height: 110px;
  }


  .gd-review-content > p {
    font-size:
      0.81rem;

    line-height:
      1.7;
  }


  .gd-review-author {
    margin-top:
      21px;
  }


  .gd-review-author strong {
    font-size:
      1.05rem;
  }


  .gd-review-author small {
    font-size:
      0.63rem;
  }


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

  .gd-service-locations {
    width:
      calc(100% - 20px) !important;

    margin:
      0 auto !important;
  }


  .gd-location-intro {
    padding:
      28px 22px;
  }


  .gd-location-intro h2 {
    font-size:
      1.55rem;
  }


  .gd-location-link {
    min-height:
      100px;
  }

}




/* =========================================================
   FINAL 15-LOCATION LAYOUT FIX
   5 columns desktop / compact height / responsive flow
========================================================= */

@media (min-width: 992px) {

  .gd-testimonial-area {
    padding-bottom: 165px;
  }


  .gd-service-locations {
    grid-template-columns:
      minmax(265px, 28%) minmax(0, 72%);

    width:
      min(1180px, calc(100% - 60px));

    min-height:
      276px;
  }


  .gd-location-grid {
    grid-template-columns:
      repeat(5, minmax(0, 1fr));

    grid-auto-rows:
      92px;
  }


  .gd-location-link {
    min-height:
      92px;

    padding:
      10px 8px;

    gap:
      7px;
  }


  .gd-location-icon {
    width:
      37px;

    height:
      37px;
  }


  .gd-location-text strong {
    font-size:
      0.76rem;

    line-height:
      1.2;

    white-space:
      nowrap;
  }


  .gd-section-white-bottom {
    min-height:
      180px;
  }

}


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

@media (min-width: 768px) and (max-width: 991.98px) {

  .gd-service-locations {
    width:
      calc(100% - 70px) !important;
  }


  .gd-location-grid {
    grid-template-columns:
      repeat(5, minmax(0, 1fr)) !important;
  }


  .gd-location-link {
    min-height:
      90px !important;

    padding:
      10px 6px;
  }


  .gd-location-icon {
    width:
      36px;

    height:
      36px;
  }


  .gd-location-text strong {
    font-size:
      0.72rem;

    line-height:
      1.2;

    white-space:
      nowrap;
  }

}


/* =========================================================
   MID MOBILE
   3 COLUMNS
========================================================= */

@media (min-width: 576px) and (max-width: 767.98px) {

  .gd-location-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
  }


  .gd-location-link {
    min-height:
      92px !important;
  }


  .gd-location-text strong {
    white-space:
      normal;
  }

}


/* =========================================================
   SMALL MOBILE
   2 COLUMNS
========================================================= */

@media (max-width: 575.98px) {

  .gd-location-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }


  .gd-location-link {
    min-height:
      94px !important;
  }


  .gd-location-text strong {
    white-space:
      normal;
  }

}



/* 00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */
/* =========================================================
   VARIABLES
========================================================= */
/* =========================================================
   CENTERED LAWRENCE FOOTER
========================================================= */

.lr-center-footer {
  --lf-navy: #172435;
  --lf-navy-dark: #0d1724;
  --lf-navy-soft: #223247;

  --lf-orange: #ff8f1f;
  --lf-orange-dark: #e8780d;
  --lf-orange-light: #ffa142;

  --lf-white: #ffffff;

  --lf-text:
    rgba(255, 255, 255, 0.68);

  --lf-muted:
    rgba(255, 255, 255, 0.44);

  --lf-border:
    rgba(255, 255, 255, 0.09);

  --lf-transition:
    380ms cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;

  padding-top: 90px;

  overflow: hidden;

  isolation: isolate;

  color: var(--lf-white);

  background:
    linear-gradient(
      150deg,
      var(--lf-navy) 0%,
      var(--lf-navy-dark) 55%,
      #09121d 100%
    );
}


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

.lr-center-footer::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -3;

  opacity: 0.18;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );

  background-size:
    55px 55px;
}


/* =========================================================
   ORANGE AMBIENT GLOW
========================================================= */

.lr-center-footer::after {
  content: "";

  position: absolute;

  z-index: -2;

  top: -380px;

  left: 50%;

  width: 900px;

  height: 700px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(255, 143, 31, 0.17),
      rgba(255, 143, 31, 0.04) 45%,
      transparent 72%
    );

  transform:
    translateX(-50%);

  animation:
    lrFooterGlow
    7s ease-in-out
    infinite;
}


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

.lr-center-footer .container {
  position: relative;

  z-index: 3;

  max-width: 1120px;
}


/* =========================================================
   CENTER CONTENT
========================================================= */

.lr-footer-content {
  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  max-width: 960px;

  margin: 0 auto;

  text-align: center;
}


/* =========================================================
   BACKGROUND TOOL DECORATIONS
========================================================= */

.lr-footer-decoration {
  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;
}


.lr-footer-decoration i {
  position: absolute;

  pointer-events: none;

  opacity: 0.055;
}


/* WRENCH */

.lr-footer-wrench {
  top: 10%;

  left: 3%;

  color: var(--lf-orange);

  font-size: 8rem;

  animation:
    lrFooterWrench
    8s ease-in-out
    infinite;
}


/* GEAR */

.lr-footer-gear {
  right: -60px;

  bottom: 8%;

  color: var(--lf-white);

  font-size: 12rem;

  animation:
    lrFooterGear
    24s linear
    infinite;
}


/* TOOLS */

.lr-footer-tools {
  top: 47%;

  right: 4%;

  color: var(--lf-orange);

  font-size: 6rem;

  animation:
    lrFooterTools
    8s ease-in-out
    infinite;
}


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

.lr-footer-brand {
  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;
}


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

.lr-footer-brand-icon {
  position: relative;

  display: grid;

  place-items: center;

  width: 80px;

  height: 80px;

  margin-bottom: 18px;

  border:
    1px solid
    rgba(255, 143, 31, 0.30);

  border-radius:
    50%;

  background:
    rgba(255, 143, 31, 0.10);

  color:
    var(--lf-orange);

  font-size:
    2.5rem;

  box-shadow:
    0 15px 35px
    rgba(0, 0, 0, 0.18);
}


/* outer ring */

.lr-footer-brand-icon::before {
  content: "";

  position: absolute;

  inset: -8px;

  border:
    1px solid
    rgba(255, 143, 31, 0.18);

  border-radius: 50%;

  animation:
    lrFooterBrandRing
    3s ease-out
    infinite;
}


/* =========================================================
   BRAND SMALL
========================================================= */

.lr-footer-brand-text small {
  display: block;

  margin-bottom: 8px;

  color:
    var(--lf-orange-light);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    0.66rem;

  font-weight:
    900;

  letter-spacing:
    0.14em;
}


/* =========================================================
   BUSINESS NAME
========================================================= */

.lr-footer-brand-text h2 {
  margin: 0;

  color:
    var(--lf-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

font-size: clamp(1.7rem, 2.5vw, 2.5rem);

  font-weight:
    900;

  line-height:
    0.95;

  letter-spacing:
    -0.04em;
}


.lr-footer-brand-text h2 span {
  display: block;

  margin-top: 5px;

  color:
    var(--lf-orange);
}


/* =========================================================
   DIVIDER
========================================================= */

.lr-footer-divider {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  width: 100%;

  max-width: 330px;

  margin:
    29px auto;
}


.lr-footer-divider span {
  width: 100%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 143, 31, 0.65)
    );
}


.lr-footer-divider span:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(255, 143, 31, 0.65),
      transparent
    );
}


.lr-footer-divider i {
  flex: 0 0 auto;

  color:
    var(--lf-orange);

  font-size:
    0.85rem;

  animation:
    lrFooterDividerGear
    7s linear
    infinite;
}


/* =========================================================
   PHONE WRAP
========================================================= */

.lr-footer-phone-wrap {
  display: flex;

  justify-content: center;

  width: 100%;
}


/* =========================================================
   PHONE CTA
========================================================= */

.lr-footer-phone {
  display: flex;

  align-items: center;

  gap: 12px;

  min-width: 340px;

  padding:
    8px 13px 8px 8px;

  border:
    1px solid
    rgba(255, 255, 255, 0.11);

  border-radius: 50px;

  background:
    rgba(255, 255, 255, 0.055);

  color:
    var(--lf-white);

  text-align: left;

  text-decoration: none;

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  box-shadow:
    0 13px 30px
    rgba(0, 0, 0, 0.16);

  transition:
    background var(--lf-transition),
    border-color var(--lf-transition),
    transform var(--lf-transition);
}


.lr-footer-phone:hover {
  border-color:
    rgba(255, 143, 31, 0.42);

  background:
    rgba(255, 143, 31, 0.09);

  color:
    var(--lf-white);

  transform:
    translateY(-4px);
}


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

.lr-footer-phone-icon {
  position: relative;

  display: grid;

  flex:
    0 0 52px;

  place-items: center;

  width: 52px;

  height: 52px;

  border-radius: 50%;

  background:
    var(--lf-orange);

  color:
    var(--lf-white);

  font-size:
    1rem;
}


.lr-footer-phone-icon::before {
  content: "";

  position: absolute;

  inset: -6px;

  border:
    2px solid
    rgba(255, 143, 31, 0.32);

  border-radius: 50%;

  animation:
    lrFooterPhoneRing
    2s ease-out
    infinite;
}


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

.lr-footer-phone-text {
  display: flex;

  flex: 1;

  flex-direction: column;
}


.lr-footer-phone-text small {
  color:
    var(--lf-muted);

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

  font-size:
    0.54rem;

  font-weight:
    700;

  letter-spacing:
    0.07em;
}


.lr-footer-phone-text strong {
  margin-top: 2px;

  color:
    var(--lf-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    1.25rem;

  font-weight:
    900;

  letter-spacing:
    0.01em;
}


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

.lr-footer-phone-arrow {
  display: grid;

  place-items: center;

  width: 38px;

  height: 38px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.06);

  color:
    var(--lf-orange);

  transition:
    background var(--lf-transition),
    color var(--lf-transition),
    transform var(--lf-transition);
}


.lr-footer-phone:hover
.lr-footer-phone-arrow {
  background:
    var(--lf-orange);

  color:
    var(--lf-white);

  transform:
    translate(3px, -3px);
}


/* =========================================================
   SERVICE AREA
========================================================= */

.lr-footer-service-area {
  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  max-width: 850px;

  margin-top: 42px;

  text-align: center;
}


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

.lr-footer-section-icon {
  display: grid;

  place-items: center;

  width: 48px;

  height: 48px;

  margin-bottom: 15px;

  border:
    1px solid
    rgba(255, 143, 31, 0.23);

  border-radius: 50%;

  background:
    rgba(255, 143, 31, 0.08);

  color:
    var(--lf-orange);
}


/* =========================================================
   SERVICE COPY
========================================================= */

.lr-footer-service-copy small {
  display: block;

  margin-bottom: 10px;

  color:
    var(--lf-orange-light);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    0.68rem;

  font-weight:
    900;

  letter-spacing:
    0.11em;
}


.lr-footer-service-copy p {
  margin: 0;

  color:
    var(--lf-text);

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

  font-size:
    0.95rem;

  line-height:
    1.85;
}


.lr-footer-service-copy strong {
  color:
    rgba(255, 255, 255, 0.90);

  font-weight:
    600;
}


/* =========================================================
   LOCATION HEADING
========================================================= */

.lr-footer-location-heading {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 11px;

  margin-top: 45px;

  text-align: left;
}


.lr-footer-location-heading > span {
  display: grid;

  flex:
    0 0 45px;

  place-items: center;

  width: 45px;

  height: 45px;

  border-radius: 50%;

  background:
    var(--lf-orange);

  color:
    var(--lf-white);
}


.lr-footer-location-heading > div {
  display: flex;

  flex-direction: column;
}


.lr-footer-location-heading small {
  color:
    var(--lf-orange-light);

  font-size:
    0.54rem;

  font-weight:
    800;

  letter-spacing:
    0.08em;
}


.lr-footer-location-heading strong {
  margin-top: 3px;

  color:
    var(--lf-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    1rem;

  font-weight:
    900;
}


/* =========================================================
   GOOGLE MAP
========================================================= */

.lr-footer-map {
  position: relative;

  width: 100%;

  height: 390px;

  margin-top: 22px;

  padding: 7px;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 143, 31, 0.30);

  border-radius:
    28px 28px 70px 28px;

  background:
    rgba(255, 255, 255, 0.04);

  box-shadow:
    0 25px 55px
    rgba(0, 0, 0, 0.24);
}


/* orange corner */

.lr-footer-map::before {
  content: "";

  position: absolute;

  z-index: 3;

  top: 0;

  left: 0;

  width: 100px;

  height: 6px;

  border-radius:
    28px 0 0 0;

  background:
    var(--lf-orange);

  pointer-events: none;
}


.lr-footer-map iframe {
  display: block;

  width: 100%;

  height: 100%;

  border: 0;

  border-radius:
    21px 21px 62px 21px;
}


/* =========================================================
   SOCIAL AREA
========================================================= */

.lr-footer-social-area {
  width: 100%;

  margin-top: 46px;
}


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

.lr-footer-social-heading {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 14px;

  margin-bottom: 22px;
}


.lr-footer-social-heading > span {
  width: 60px;

  height: 1px;

  background:
    rgba(255, 143, 31, 0.48);
}


.lr-footer-social-heading strong {
  color:
    var(--lf-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    0.86rem;

  font-weight:
    900;

  letter-spacing:
    0.07em;

  text-transform:
    uppercase;
}


/* =========================================================
   SOCIAL LINKS
========================================================= */

.lr-footer-social-links {
  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 10px;
}


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

.lr-footer-social-link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  min-height: 45px;

  padding:
    0 15px;

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

  border-radius: 50px;

  background:
    rgba(255, 255, 255, 0.035);

  color:
    rgba(255, 255, 255, 0.72);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    0.72rem;

  font-weight:
    700;

  text-decoration: none;

  transition:
    background var(--lf-transition),
    color var(--lf-transition),
    border-color var(--lf-transition),
    transform var(--lf-transition);
}


.lr-footer-social-link i {
  color:
    var(--lf-orange);

  font-size:
    0.87rem;

  transition:
    color var(--lf-transition),
    transform var(--lf-transition);
}


.lr-footer-social-link:hover {
  border-color:
    var(--lf-orange);

  background:
    var(--lf-orange);

  color:
    var(--lf-white);

  transform:
    translateY(-4px);
}


.lr-footer-social-link:hover i {
  color:
    var(--lf-white);

  transform:
    scale(1.1);
}


/* =========================================================
   TRUST ITEMS
========================================================= */

.lr-footer-trust {
  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap:
    10px 22px;

  width: 100%;

  margin-top: 38px;

  padding-top: 27px;

  border-top:
    1px solid
    var(--lf-border);
}


.lr-footer-trust span {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  color:
    var(--lf-muted);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    0.7rem;

  font-weight:
    700;
}


.lr-footer-trust i {
  color:
    var(--lf-orange);

  font-size:
    0.68rem;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.lr-footer-copyright {
  position: relative;

  z-index: 5;

  margin-top: 55px;

  border-top:
    1px solid
    var(--lf-border);

  background:
    rgba(0, 0, 0, 0.17);
}


.lr-footer-copyright .container {
  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 74px;

  padding:
    16px 20px;

  text-align: center;
}


.lr-footer-copyright p {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.43);

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

  font-size:
    0.72rem;

  line-height:
    1.6;
}


.lr-footer-copyright a {
  color:
    var(--lf-orange);

  font-weight:
    700;

  text-decoration: none;

  transition:
    color var(--lf-transition);
}


.lr-footer-copyright a:hover {
  color:
    var(--lf-orange-light);
}


/* =========================================================
   FOCUS
========================================================= */

.lr-footer-phone:focus-visible,
.lr-footer-social-link:focus-visible,
.lr-footer-copyright a:focus-visible {
  outline:
    3px solid
    var(--lf-orange);

  outline-offset:
    4px;
}


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

@keyframes lrFooterGlow {

  0%,
  100% {
    opacity: 0.65;

    transform:
      translateX(-50%)
      scale(0.95);
  }

  50% {
    opacity: 1;

    transform:
      translateX(-50%)
      scale(1.08);
  }

}


@keyframes lrFooterWrench {

  0%,
  100% {
    transform:
      translateY(0)
      rotate(-18deg);
  }

  50% {
    transform:
      translateY(-20px)
      rotate(-7deg);
  }

}


@keyframes lrFooterGear {

  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(360deg);
  }

}


@keyframes lrFooterTools {

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

  50% {
    transform:
      translateY(-18px)
      rotate(-3deg);
  }

}


@keyframes lrFooterBrandRing {

  0% {
    opacity: 0.7;

    transform:
      scale(0.9);
  }

  100% {
    opacity: 0;

    transform:
      scale(1.35);
  }

}


@keyframes lrFooterDividerGear {

  from {
    transform:
      rotate(0);
  }

  to {
    transform:
      rotate(360deg);
  }

}


@keyframes lrFooterPhoneRing {

  0% {
    opacity: 0.75;

    transform:
      scale(0.9);
  }

  100% {
    opacity: 0;

    transform:
      scale(1.42);
  }

}


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

@media (max-width: 991.98px) {

  .lr-center-footer {
    padding-top: 75px;
  }


  .lr-footer-content {
    max-width: 760px;
  }


  .lr-footer-brand-text h2 {
    font-size:
      clamp(
        2.6rem,
        7vw,
        3.8rem
      );
  }


  .lr-footer-map {
    height: 350px;
  }

}


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

@media (max-width: 767.98px) {

  .lr-center-footer {
    padding-top: 62px;
  }


  .lr-footer-brand-icon {
    width: 68px;

    height: 68px;

    font-size: 2rem;
  }


  .lr-footer-brand-text h2 {
    font-size:
      clamp(
        2.35rem,
        9vw,
        3.1rem
      );
  }


  .lr-footer-phone {
    min-width: 0;

    width: 100%;

    max-width: 380px;
  }


  .lr-footer-service-area {
    margin-top: 35px;
  }


  .lr-footer-service-copy p {
    font-size: 0.9rem;

    line-height: 1.75;
  }


  .lr-footer-location-heading {
    margin-top: 38px;
  }


  .lr-footer-map {
    height: 315px;

    border-radius:
      22px 22px 50px 22px;
  }


  .lr-footer-map iframe {
    border-radius:
      16px 16px 44px 16px;
  }


  .lr-footer-social-area {
    margin-top: 38px;
  }


  .lr-footer-trust {
    gap:
      10px 15px;
  }


  .lr-footer-copyright {
    margin-top: 45px;
  }

}


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

@media (max-width: 575.98px) {

  .lr-center-footer {
    padding-top: 52px;
  }


  .lr-footer-brand-text small {
    font-size: 0.58rem;
  }


  .lr-footer-brand-text h2 {
    font-size: 2.35rem;
  }


  .lr-footer-divider {
    max-width: 260px;

    margin:
      24px auto;
  }


  .lr-footer-phone {
    max-width: 350px;
  }


  .lr-footer-phone-icon {
    flex-basis: 47px;

    width: 47px;

    height: 47px;
  }


  .lr-footer-phone-text strong {
    font-size: 1.12rem;
  }


  .lr-footer-phone-arrow {
    width: 34px;

    height: 34px;
  }


  .lr-footer-service-copy p {
    font-size: 0.86rem;
  }


  .lr-footer-location-heading {
    align-items: center;

    text-align: left;
  }


  .lr-footer-location-heading strong {
    font-size: 0.87rem;
  }


  .lr-footer-map {
    height: 275px;

    padding: 5px;
  }


  .lr-footer-social-links {
    gap: 8px;
  }


  .lr-footer-social-link {
    min-height: 42px;

    padding:
      0 12px;

    font-size: 0.67rem;
  }


  .lr-footer-trust {
    flex-direction: column;

    gap: 9px;
  }


  .lr-footer-copyright .container {
    min-height: 78px;
  }


  .lr-footer-copyright p {
    max-width: 330px;

    font-size: 0.67rem;
  }

}


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

@media (max-width: 390px) {

  .lr-footer-brand-text h2 {
    font-size: 2.1rem;
  }


  .lr-footer-phone {
    gap: 8px;

    padding-right: 9px;
  }


  .lr-footer-phone-text small {
    font-size: 0.47rem;
  }


  .lr-footer-phone-text strong {
    font-size: 1.02rem;
  }


  .lr-footer-phone-arrow {
    display: none;
  }


  .lr-footer-location-heading > span {
    flex-basis: 40px;

    width: 40px;

    height: 40px;
  }


  .lr-footer-location-heading strong {
    font-size: 0.8rem;
  }


  .lr-footer-map {
    height: 245px;
  }


  .lr-footer-social-link span {
    display: none;
  }


  .lr-footer-social-link {
    display: grid;

    place-items: center;

    width: 43px;

    height: 43px;

    min-height: 43px;

    padding: 0;

    border-radius: 50%;
  }


  .lr-footer-social-link i {
    font-size: 0.9rem;
  }

}


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

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

  .lr-center-footer::after,
  .lr-footer-decoration i,
  .lr-footer-brand-icon::before,
  .lr-footer-divider i,
  .lr-footer-phone-icon::before {
    animation:
      none !important;
  }


  .lr-footer-phone,
  .lr-footer-phone-arrow,
  .lr-footer-social-link,
  .lr-footer-social-link i,
  .lr-footer-copyright a {
    transition:
      none !important;
  }


  .lr-footer-phone:hover,
  .lr-footer-phone:hover
  .lr-footer-phone-arrow,
  .lr-footer-social-link:hover,
  .lr-footer-social-link:hover i {
    transform:
      none !important;
  }

}














/* 00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */
/* =========================================================
   RESTORATION SECTION
========================================================= */

/* =========================================================
   GARAGE DOOR RESTORATION SHOWCASE
========================================================= */

.lr-repair-showcase {
  --rs-navy: #172435;
  --rs-navy-dark: #0d1724;
  --rs-navy-soft: #223247;

  --rs-orange: #ff8f1f;
  --rs-orange-dark: #e8780d;
  --rs-orange-light: #ffa142;

  --rs-white: #ffffff;
  --rs-light: #f5f5f5;

  --rs-text: #20282f;
  --rs-gray: #6f757b;

  --rs-border:
    rgba(23, 36, 53, 0.10);

  --rs-transition:
    400ms cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;

  padding:
    105px 0;

  overflow: hidden;

  isolation: isolate;

  background:
    linear-gradient(145deg,
      #f4f6f8 0%,
      #ffffff 50%,
      #f5f7f9 100%);
}


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

.lr-repair-showcase::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -4;

  opacity: 0.36;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(23, 36, 53, 0.025) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(23, 36, 53, 0.025) 1px,
      transparent 1px);

  background-size:
    54px 54px;
}


/* =========================================================
   AMBIENT ORANGE GLOW
========================================================= */

.lr-repair-showcase::after {
  content: "";

  position: absolute;

  z-index: -3;

  top: -270px;

  left: 42%;

  width: 720px;

  height: 620px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(circle,
      rgba(255, 143, 31, 0.11),
      rgba(255, 143, 31, 0.03) 45%,
      transparent 72%);

  animation:
    lrRsGlow 7s ease-in-out infinite;
}


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

.lr-repair-showcase .container {
  position: relative;

  z-index: 3;

  max-width: 1280px;
}


/* =========================================================
   PALE REPAIR TOOLS
========================================================= */

.lr-rs-tools {
  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;
}


.lr-rs-tool {
  position: absolute;

  display: grid;

  place-items: center;

  pointer-events: none;

  opacity: 0.20;
}


/* WRENCH */

.lr-rs-tool-wrench {
  top: 7%;

  left: 1.5%;

  width: 115px;

  height: 115px;

  border:
    2px solid rgba(255, 143, 31, 0.18);

  border-radius:
    28px;

  background:
    rgba(255, 143, 31, 0.045);

  color:
    rgba(255, 143, 31, 0.70);

  font-size: 3rem;

  animation:
    lrRsWrench 8s ease-in-out infinite;
}


/* GEAR */

.lr-rs-tool-gear {
  right: -35px;

  bottom: 7%;

  width: 155px;

  height: 155px;

  border:
    2px dashed rgba(23, 36, 53, 0.16);

  border-radius: 50%;

  color:
    rgba(23, 36, 53, 0.52);

  font-size: 4rem;

  animation:
    lrRsGear 22s linear infinite;
}


/* TOOLS */

.lr-rs-tool-tools {
  top: 20%;

  right: 3%;

  width: 92px;

  height: 92px;

  border:
    1px solid rgba(23, 36, 53, 0.12);

  border-radius: 24px;

  background:
    rgba(23, 36, 53, 0.03);

  color:
    rgba(23, 36, 53, 0.48);

  font-size: 2.4rem;

  animation:
    lrRsTools 8s ease-in-out infinite;
}


/* NUT */

.lr-rs-tool-nut {
  left: 4%;

  bottom: 10%;

  width: 80px;

  height: 80px;

  border:
    1px solid rgba(255, 143, 31, 0.14);

  border-radius: 22px;

  color:
    rgba(255, 143, 31, 0.55);

  font-size: 2rem;

  animation:
    lrRsNut 7s ease-in-out infinite;
}


/* =========================================================
   MAIN SHELL
========================================================= */

.lr-rs-shell {
  position: relative;

  overflow: hidden;

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

  border-radius:
    38px 16px 38px 16px;

  background:
    var(--rs-white);

  box-shadow:
    0 30px 75px rgba(13, 23, 36, 0.13);
}


/* TOP ACCENT */

.lr-rs-shell::before {
  content: "";

  position: absolute;

  z-index: 12;

  top: 0;

  left: 0;

  width: 100%;

  height: 5px;

  background:
    linear-gradient(90deg,
      var(--rs-orange-dark),
      var(--rs-orange-light),
      var(--rs-orange-dark));

  background-size:
    200% 100%;

  animation:
    lrRsTopLine 4s linear infinite;
}


/* =========================================================
   LEFT VISUAL PANEL
========================================================= */

.lr-rs-visual {
  position: relative;

  height: 100%;

  min-height: 760px;

  overflow: hidden;

  background:
    var(--rs-navy-dark);
}


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

.lr-rs-image {
  position: absolute;

  inset: 0;

  z-index: 1;

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transition:
    transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}


.lr-rs-visual:hover .lr-rs-image {
  transform:
    scale(1.055);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.lr-rs-image-overlay {
  position: absolute;

  inset: 0;

  z-index: 2;

  background:
    linear-gradient(180deg,
      rgba(13, 23, 36, 0.58) 0%,
      rgba(13, 23, 36, 0.17) 34%,
      rgba(13, 23, 36, 0.50) 67%,
      rgba(13, 23, 36, 0.96) 100%);

  pointer-events: none;
}


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

.lr-rs-visual-label {
  position: absolute;

  z-index: 7;

  top: 32px;

  left: 31px;

  display: flex;

  align-items: center;

  gap: 9px;

  padding:
    8px 14px 8px 8px;

  border:
    1px solid rgba(255, 255, 255, 0.15);

  border-radius: 50px;

  background:
    rgba(13, 23, 36, 0.76);

  backdrop-filter:
    blur(9px);

  -webkit-backdrop-filter:
    blur(9px);
}


.lr-rs-visual-label>span {
  display: grid;

  flex: 0 0 37px;

  place-items: center;

  width: 37px;

  height: 37px;

  border-radius: 50%;

  background:
    var(--rs-orange);

  color:
    var(--rs-white);
}


.lr-rs-visual-label>div {
  display: flex;

  flex-direction: column;
}


.lr-rs-visual-label small {
  color:
    rgba(255, 255, 255, 0.46);

  font-size: 0.46rem;

  font-weight: 700;

  letter-spacing: 0.06em;
}


.lr-rs-visual-label strong {
  margin-top: 2px;

  color:
    var(--rs-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.78rem;

  font-weight: 900;
}


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

.lr-rs-visual-number {
  position: absolute;

  z-index: 3;

  top: 85px;

  right: 25px;

  color:
    rgba(255, 255, 255, 0.11);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 8rem;

  font-weight: 900;

  line-height: 1;
}


/* =========================================================
   VISUAL COPY
========================================================= */

.lr-rs-visual-copy {
  position: absolute;

  z-index: 7;

  left: 38px;

  right: 38px;

  bottom: 190px;

  padding-left: 17px;

  border-left:
    4px solid var(--rs-orange);
}


.lr-rs-visual-eyebrow {
  display: block;

  margin-bottom: 8px;

  color:
    var(--rs-orange-light);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.58rem;

  font-weight: 900;

  letter-spacing: 0.1em;
}


.lr-rs-visual-copy h3 {
  margin: 0;

  color:
    var(--rs-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

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

  font-weight: 900;

  line-height: 0.98;

  letter-spacing: -0.025em;
}


.lr-rs-visual-copy h3 span {
  display: block;

  color:
    var(--rs-orange);
}


.lr-rs-visual-copy p {
  max-width: 350px;

  margin:
    13px 0 0;

  color:
    rgba(255, 255, 255, 0.70);

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

  font-size: 0.84rem;

  line-height: 1.65;
}


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

.lr-rs-fast-badge {
  position: absolute;

  z-index: 9;

  top: 160px;

  right: -15px;

  display: flex;

  align-items: center;

  gap: 9px;

  padding:
    8px 15px 8px 8px;

  border:
    1px solid rgba(23, 36, 53, 0.08);

  border-radius: 50px;

  background:
    var(--rs-white);

  box-shadow:
    0 16px 35px rgba(0, 0, 0, 0.20);

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


.lr-rs-fast-icon {
  display: grid;

  place-items: center;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background:
    rgba(255, 143, 31, 0.12);

  color:
    var(--rs-orange);
}


.lr-rs-fast-badge>span:last-child {
  display: flex;

  flex-direction: column;
}


.lr-rs-fast-badge small {
  color:
    var(--rs-gray);

  font-size: 0.47rem;

  font-weight: 700;
}


.lr-rs-fast-badge strong {
  margin-top: 2px;

  color:
    var(--rs-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.79rem;

  font-weight: 900;
}


/* =========================================================
   VISUAL BOTTOM STRIP
========================================================= */

.lr-rs-visual-bottom {
  position: absolute;

  z-index: 7;

  left: 25px;

  right: 25px;

  bottom: 26px;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 8px;
}


.lr-rs-visual-bottom>div {
  display: flex;

  align-items: center;

  gap: 9px;

  padding:
    11px;

  border:
    1px solid rgba(255, 255, 255, 0.10);

  border-radius: 13px;

  background:
    rgba(13, 23, 36, 0.72);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


.lr-rs-visual-bottom i {
  color:
    var(--rs-orange);

  font-size: 0.9rem;
}


.lr-rs-visual-bottom span {
  display: flex;

  flex-direction: column;
}


.lr-rs-visual-bottom small {
  color:
    rgba(255, 255, 255, 0.42);

  font-size: 0.45rem;

  font-weight: 700;
}


.lr-rs-visual-bottom strong {
  margin-top: 2px;

  color:
    var(--rs-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.69rem;

  font-weight: 800;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.lr-rs-content {
  position: relative;

  height: 100%;

  min-height: 760px;

  padding:
    58px 54px;

  background:
    var(--rs-white);
}


/* LARGE BACKGROUND NUMBER */

.lr-rs-content::before {
  content: "REPAIR";

  position: absolute;

  top: 12px;

  right: 18px;

  color:
    rgba(23, 36, 53, 0.025);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 5.5rem;

  font-weight: 900;

  line-height: 1;

  pointer-events: none;
}


/* =========================================================
   PRETITLE
========================================================= */

.lr-rs-pretitle {
  position: relative;

  z-index: 3;

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 15px;

  color:
    var(--rs-orange-dark);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.72rem;

  font-weight: 900;

  letter-spacing: 0.11em;
}


.lr-rs-pretitle>span {
  display: block;

  width: 40px;

  height: 3px;

  background:
    var(--rs-orange);

  animation:
    lrRsLine 3s ease-in-out infinite;
}


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

.lr-rs-title {
  position: relative;

  z-index: 3;

  max-width: 650px;

  margin: 0;

  color:
    var(--rs-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

font-size: clamp(1.6rem, 2.3vw, 2.3rem);

  font-weight: 900;

  line-height: 0.98;

  letter-spacing: -0.04em;
}


.lr-rs-title span {
  display: block;

  margin-top: 4px;

  color:
    var(--rs-orange);
}


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

.lr-rs-brand {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 18px;

  padding:
    7px 13px;

  border:
    1px solid rgba(23, 36, 53, 0.08);

  border-radius: 50px;

  background:
    #f7f8fa;

  color:
    var(--rs-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.78rem;

  font-weight: 800;
}


.lr-rs-brand i {
  color:
    var(--rs-orange);
}


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

.lr-rs-lead,
.lr-rs-description {
  max-width: 670px;

  color:
    var(--rs-gray);

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

  font-size: 0.96rem;

  line-height: 1.78;
}


.lr-rs-lead {
  margin:
    21px 0 0;
}


.lr-rs-description {
  margin:
    13px 0 0;
}


.lr-rs-lead strong,
.lr-rs-description strong {
  color:
    var(--rs-navy);

  font-weight: 700;
}


/* =========================================================
   DIAGNOSTIC STRIP
========================================================= */

.lr-rs-diagnostic {
  margin-top: 25px;

  padding:
    17px 18px;

  border-left:
    4px solid var(--rs-orange);

  background:
    linear-gradient(90deg,
      rgba(255, 143, 31, 0.08),
      rgba(255, 143, 31, 0.015));
}


/* HEADING */

.lr-rs-diagnostic-heading {
  display: flex;

  align-items: center;

  gap: 11px;
}


.lr-rs-diagnostic-heading>span {
  display: grid;

  flex: 0 0 43px;

  place-items: center;

  width: 43px;

  height: 43px;

  border-radius: 13px;

  background:
    var(--rs-navy);

  color:
    var(--rs-orange);
}


.lr-rs-diagnostic-heading>div {
  display: flex;

  flex-direction: column;
}


.lr-rs-diagnostic-heading small {
  color:
    var(--rs-orange-dark);

  font-size: 0.49rem;

  font-weight: 800;

  letter-spacing: 0.07em;
}


.lr-rs-diagnostic-heading strong {
  margin-top: 2px;

  color:
    var(--rs-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.91rem;

  font-weight: 900;
}


/* POINTS */

.lr-rs-diagnostic-points {
  display: flex;

  flex-wrap: wrap;

  gap:
    8px 16px;

  margin-top: 14px;

  padding-left: 54px;
}


.lr-rs-diagnostic-points span {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  color:
    var(--rs-gray);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.72rem;

  font-weight: 700;
}


.lr-rs-diagnostic-points i {
  color:
    var(--rs-orange);
}


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

.lr-rs-services {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  margin-top: 27px;

  border-top:
    1px solid rgba(23, 36, 53, 0.10);

  border-bottom:
    1px solid rgba(23, 36, 53, 0.10);
}


/* =========================================================
   SERVICE ITEM
========================================================= */

.lr-rs-service {
  position: relative;

  padding:
    23px 17px 21px;

  border-right:
    1px solid rgba(23, 36, 53, 0.09);

  transition:
    background var(--rs-transition),
    transform var(--rs-transition);
}


.lr-rs-service:last-child {
  border-right: 0;
}


.lr-rs-service:hover {
  background:
    rgba(255, 143, 31, 0.035);

  transform:
    translateY(-4px);
}


/* NUMBER */

.lr-rs-service-number {
  position: absolute;

  top: 16px;

  right: 12px;

  color:
    rgba(23, 36, 53, 0.18);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.62rem;

  font-weight: 900;
}


/* ICON */

.lr-rs-service-icon {
  display: grid;

  place-items: center;

  width: 48px;

  height: 48px;

  margin-bottom: 15px;

  border:
    1px solid rgba(255, 143, 31, 0.15);

  border-radius:
    15px 15px 15px 5px;

  background:
    rgba(255, 143, 31, 0.07);

  color:
    var(--rs-orange);

  font-size: 1.15rem;

  transition:
    background var(--rs-transition),
    color var(--rs-transition),
    transform var(--rs-transition);
}


.lr-rs-service:hover .lr-rs-service-icon {
  background:
    var(--rs-orange);

  color:
    var(--rs-white);

  transform:
    rotate(-5deg) scale(1.06);
}


/* SERVICE TEXT */

.lr-rs-service h3 {
  margin: 0;

  color:
    var(--rs-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.95rem;

  font-weight: 900;

  line-height: 1.2;
}


.lr-rs-service p {
  margin:
    7px 0 0;

  color:
    var(--rs-gray);

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

  font-size: 0.72rem;

  line-height: 1.55;
}


/* =========================================================
   ACTIONS
========================================================= */

.lr-rs-actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 11px;

  margin-top: 28px;
}


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

.lr-rs-estimate-btn {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  min-height: 55px;

  padding:
    0 22px;

  overflow: hidden;

  border-radius:
    50px 12px 50px 12px;

  background:
    var(--rs-orange);

  color:
    var(--rs-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.82rem;

  font-weight: 900;

  text-decoration: none;

  box-shadow:
    0 12px 26px rgba(255, 143, 31, 0.25);

  transition:
    background var(--rs-transition),
    transform var(--rs-transition),
    box-shadow var(--rs-transition);
}


/* SHINE */

.lr-rs-estimate-btn::before {
  content: "";

  position: absolute;

  top: -30%;

  left: -55%;

  width: 28%;

  height: 160%;

  background:
    linear-gradient(110deg,
      transparent,
      rgba(255, 255, 255, 0.44),
      transparent);

  transform:
    skewX(-20deg);

  animation:
    lrRsButtonShine 3.4s ease-in-out infinite;
}


.lr-rs-estimate-btn:hover {
  background:
    var(--rs-orange-dark);

  color:
    var(--rs-white);

  transform:
    translateY(-4px);

  box-shadow:
    0 17px 32px rgba(255, 143, 31, 0.32);
}


.lr-rs-estimate-btn i {
  transition:
    transform var(--rs-transition);
}


.lr-rs-estimate-btn:hover i {
  transform:
    translate(3px, -3px);
}


/* =========================================================
   PHONE CTA
========================================================= */

.lr-rs-phone {
  display: flex;

  align-items: center;

  gap: 9px;

  min-height: 55px;

  padding:
    6px 15px 6px 7px;

  border-radius: 50px;

  background:
    var(--rs-navy);

  color:
    var(--rs-white);

  text-decoration: none;

  box-shadow:
    0 12px 25px rgba(23, 36, 53, 0.16);

  transition:
    background var(--rs-transition),
    transform var(--rs-transition);
}


.lr-rs-phone:hover {
  background:
    var(--rs-navy-dark);

  color:
    var(--rs-white);

  transform:
    translateY(-4px);
}


/* PHONE ICON */

.lr-rs-phone-icon {
  position: relative;

  display: grid;

  flex: 0 0 42px;

  place-items: center;

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background:
    var(--rs-orange);

  color:
    var(--rs-white);
}


.lr-rs-phone-icon::before {
  content: "";

  position: absolute;

  inset: -5px;

  border:
    2px solid rgba(255, 143, 31, 0.30);

  border-radius: 50%;

  animation:
    lrRsPhoneRing 2s ease-out infinite;
}


.lr-rs-phone>span:last-child {
  display: flex;

  flex-direction: column;
}


.lr-rs-phone small {
  color:
    rgba(255, 255, 255, 0.46);

  font-size: 0.49rem;

  font-weight: 700;
}


.lr-rs-phone strong {
  margin-top: 2px;

  color:
    var(--rs-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.98rem;

  font-weight: 900;
}


/* =========================================================
   QUOTE NOTE
========================================================= */

.lr-rs-quote {
  display: flex;

  align-items: center;

  gap: 9px;

  min-height: 55px;

  padding:
    7px 13px;

  border:
    1px solid rgba(23, 36, 53, 0.10);

  border-radius: 15px;

  background:
    #f7f8fa;
}


.lr-rs-quote>i {
  color:
    var(--rs-orange);

  font-size: 1.05rem;
}


.lr-rs-quote>span {
  display: flex;

  flex-direction: column;
}


.lr-rs-quote small {
  color:
    var(--rs-gray);

  font-size: 0.46rem;

  font-weight: 700;
}


.lr-rs-quote strong {
  margin-top: 2px;

  color:
    var(--rs-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.76rem;

  font-weight: 900;
}


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

@keyframes lrRsGlow {

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

  50% {
    opacity: 1;
    transform: scale(1.08);
  }

}


@keyframes lrRsWrench {

  0%,
  100% {
    transform:
      translateY(0) rotate(-18deg);
  }

  50% {
    transform:
      translateY(-18px) rotate(-7deg);
  }

}


@keyframes lrRsGear {

  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }

}


@keyframes lrRsTools {

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

  50% {
    transform:
      translateY(-17px) rotate(0);
  }

}


@keyframes lrRsNut {

  0%,
  100% {
    transform:
      translateY(0) rotate(-9deg);
  }

  50% {
    transform:
      translateY(-14px) rotate(7deg);
  }

}


@keyframes lrRsFastFloat {

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

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

}


@keyframes lrRsLine {

  0%,
  100% {
    width: 40px;
  }

  50% {
    width: 56px;
  }

}


@keyframes lrRsTopLine {

  from {
    background-position:
      200% 0;
  }

  to {
    background-position:
      -200% 0;
  }

}


@keyframes lrRsButtonShine {

  0%,
  65% {
    left: -55%;
  }

  100% {
    left: 145%;
  }

}


@keyframes lrRsPhoneRing {

  0% {
    opacity: 0.75;

    transform:
      scale(0.9);
  }

  100% {
    opacity: 0;

    transform:
      scale(1.42);
  }

}


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

@media (min-width: 1400px) {

  .lr-repair-showcase .container {
    max-width: 1320px;
  }


  .lr-rs-visual,
  .lr-rs-content {
    min-height: 780px;
  }


  .lr-rs-content {
    padding:
      62px 60px;
  }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

  .lr-repair-showcase {
    padding:
      90px 0;
  }


  .lr-rs-visual,
  .lr-rs-content {
    min-height:
      750px;
  }


  .lr-rs-content {
    padding:
      48px 38px;
  }


  .lr-rs-title {
font-size: clamp(2.1rem, 3vw, 3rem);
  }


  .lr-rs-services {
    grid-template-columns:
      1fr;
  }


  .lr-rs-service {
    display: grid;

    grid-template-columns:
      48px 1fr;

    gap: 0 13px;

    padding:
      17px 10px;

    border-right: 0;

    border-bottom:
      1px solid rgba(23, 36, 53, 0.08);
  }


  .lr-rs-service:last-child {
    border-bottom: 0;
  }


  .lr-rs-service-icon {
    grid-row:
      1 / 3;

    margin-bottom: 0;
  }


  .lr-rs-service-number {
    top: 12px;
  }


  .lr-rs-service p {
    margin-top: 5px;
  }

}


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

@media (max-width: 991.98px) {

  .lr-repair-showcase {
    padding:
      78px 0;
  }


  .lr-rs-shell {
    max-width:
      760px;

    margin:
      0 auto;
  }


  .lr-rs-visual {
    min-height:
      620px;
  }


  .lr-rs-content {
    min-height:
      auto;

    padding:
      45px 40px;
  }


  .lr-rs-fast-badge {
    right:
      20px;
  }


  .lr-rs-title {
    font-size:
      clamp(2.55rem,
        6vw,
        3.5rem);
  }


  .lr-rs-services {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


  .lr-rs-service {
    display: block;

    padding:
      22px 15px;

    border-right:
      1px solid rgba(23, 36, 53, 0.08);

    border-bottom: 0;
  }


  .lr-rs-service:last-child {
    border-right: 0;
  }


  .lr-rs-service-icon {
    margin-bottom: 13px;
  }

}


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

@media (max-width: 767.98px) {

  .lr-repair-showcase {
    padding:
      65px 0;
  }


  .lr-rs-shell {
    border-radius:
      28px 13px 28px 13px;
  }


  .lr-rs-visual {
    min-height:
      560px;
  }


  .lr-rs-visual-copy {
    left:
      27px;

    right:
      27px;

    bottom:
      175px;
  }


  .lr-rs-visual-copy h3 {
    font-size:
      2.15rem;
  }


  .lr-rs-fast-badge {
    top:
      130px;

    right:
      15px;
  }


  .lr-rs-content {
    padding:
      38px 27px;
  }


  .lr-rs-title {
    font-size:
      clamp(2.25rem,
        8vw,
        3rem);
  }


  .lr-rs-lead,
  .lr-rs-description {
    font-size:
      0.92rem;
  }


  .lr-rs-services {
    grid-template-columns:
      1fr;
  }


  .lr-rs-service {
    display: grid;

    grid-template-columns:
      48px 1fr;

    gap:
      0 12px;

    border-right: 0;

    border-bottom:
      1px solid rgba(23, 36, 53, 0.08);
  }


  .lr-rs-service:last-child {
    border-bottom: 0;
  }


  .lr-rs-service-icon {
    grid-row:
      1 / 3;

    margin-bottom: 0;
  }


  .lr-rs-actions {
    align-items: stretch;

    flex-direction: column;
  }


  .lr-rs-estimate-btn,
  .lr-rs-phone,
  .lr-rs-quote {
    width: 100%;
  }


  .lr-rs-phone {
    justify-content:
      flex-start;
  }


  .lr-rs-quote {
    justify-content:
      center;
  }


  .lr-rs-tool-tools {
    display: none;
  }

}


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

@media (max-width: 575.98px) {

  .lr-repair-showcase {
    padding:
      55px 0;
  }


  .lr-rs-visual {
    min-height:
      500px;
  }


  .lr-rs-visual-label {
    top:
      22px;

    left:
      20px;
  }


  .lr-rs-visual-number {
    font-size:
      5rem;
  }


  .lr-rs-fast-badge {
    top:
      102px;

    right:
      10px;

    transform:
      scale(0.9);

    transform-origin:
      right top;
  }


  .lr-rs-visual-copy {
    bottom:
      155px;

    left:
      21px;

    right:
      21px;
  }


  .lr-rs-visual-copy h3 {
    font-size:
      1.85rem;
  }


  .lr-rs-visual-copy p {
    font-size:
      0.77rem;
  }


  .lr-rs-visual-bottom {
    left:
      16px;

    right:
      16px;

    bottom:
      17px;

    grid-template-columns:
      1fr;
  }


  .lr-rs-content {
    padding:
      34px 21px;
  }


  .lr-rs-pretitle {
    font-size:
      0.64rem;
  }


  .lr-rs-pretitle>span {
    width:
      28px;
  }


  .lr-rs-title {
    font-size:
      2.2rem;
  }


  .lr-rs-diagnostic-points {
    padding-left:
      0;
  }


  .lr-rs-tool-nut {
    display: none;
  }

}


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

@media (max-width: 390px) {

  .lr-rs-title {
    font-size:
      2rem;
  }


  .lr-rs-visual {
    min-height:
      470px;
  }


  .lr-rs-visual-copy h3 {
    font-size:
      1.7rem;
  }


  .lr-rs-fast-badge {
    top:
      95px;

    transform:
      scale(0.82);

    transform-origin:
      right top;
  }


  .lr-rs-content {
    padding:
      31px 18px;
  }

}


/* =========================================================
   FOCUS
========================================================= */

.lr-rs-estimate-btn:focus-visible,
.lr-rs-phone:focus-visible {
  outline:
    3px solid var(--rs-orange);

  outline-offset:
    4px;
}


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

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

  .lr-repair-showcase::after,
  .lr-rs-tool,
  .lr-rs-shell::before,
  .lr-rs-fast-badge,
  .lr-rs-pretitle>span,
  .lr-rs-estimate-btn::before,
  .lr-rs-phone-icon::before {
    animation:
      none !important;
  }


  .lr-rs-image,
  .lr-rs-service,
  .lr-rs-service-icon,
  .lr-rs-estimate-btn,
  .lr-rs-estimate-btn i,
  .lr-rs-phone {
    transition:
      none !important;
  }


  .lr-rs-visual:hover .lr-rs-image,
  .lr-rs-service:hover,
  .lr-rs-service:hover .lr-rs-service-icon,
  .lr-rs-estimate-btn:hover,
  .lr-rs-estimate-btn:hover i,
  .lr-rs-phone:hover {
    transform:
      none !important;
  }

}

/* 000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */

/* =========================================================
   VARIABLES
========================================================= */

/* =========================================================
   VARIABLES
========================================================= */

/* =========================================================
   GARAGE DOOR OPENER TECH SECTION
========================================================= */

.lr-opener-tech {
  --ot-navy: #172435;
  --ot-navy-dark: #0d1724;
  --ot-navy-soft: #223247;

  --ot-orange: #ff8f1f;
  --ot-orange-dark: #e8780d;
  --ot-orange-light: #ffa142;

  --ot-white: #ffffff;
  --ot-light: #f5f5f5;

  --ot-text: #20282f;
  --ot-gray: #6f757b;

  --ot-border:
    rgba(23, 36, 53, 0.10);

  --ot-transition:
    400ms cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;

  padding: 105px 0;

  overflow: hidden;

  isolation: isolate;

  background:
    linear-gradient(145deg,
      #f5f7f9 0%,
      #ffffff 48%,
      #f4f6f8 100%);
}


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

.lr-opener-tech::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -4;

  opacity: 0.38;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(23, 36, 53, 0.025) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(23, 36, 53, 0.025) 1px,
      transparent 1px);

  background-size:
    54px 54px;
}


/* =========================================================
   ORANGE GLOW
========================================================= */

.lr-opener-tech::after {
  content: "";

  position: absolute;

  z-index: -3;

  top: -300px;

  left: 45%;

  width: 750px;

  height: 650px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(circle,
      rgba(255, 143, 31, 0.12),
      rgba(255, 143, 31, 0.025) 47%,
      transparent 72%);

  animation:
    lrOtGlow 7s ease-in-out infinite;
}


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

.lr-opener-tech .container {
  position: relative;

  z-index: 3;

  max-width: 1280px;
}


/* =========================================================
   BACKGROUND TOOLS
========================================================= */

.lr-opener-tech-tools {
  position: absolute;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


.lr-opener-tech-tools i {
  position: absolute;

  opacity: 0.07;

  pointer-events: none;
}


.lr-ot-tool-gear {
  right: -60px;

  bottom: 6%;

  color: var(--ot-navy);

  font-size: 11rem;

  animation:
    lrOtGear 22s linear infinite;
}


.lr-ot-tool-wrench {
  top: 9%;

  left: 2%;

  color: var(--ot-orange);

  font-size: 7rem;

  animation:
    lrOtWrench 8s ease-in-out infinite;
}


.lr-ot-tool-power {
  top: 21%;

  right: 4%;

  color: var(--ot-orange);

  font-size: 5rem;

  animation:
    lrOtPower 7s ease-in-out infinite;
}


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

.lr-ot-heading {
  position: relative;

  z-index: 4;

  margin-bottom: 49px;
}


/* =========================================================
   PRETITLE
========================================================= */

.lr-ot-pretitle {
  display: flex;

  align-items: center;

  gap: 9px;

  margin-bottom: 13px;

  color: var(--ot-orange-dark);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.72rem;

  font-weight: 900;

  letter-spacing: 0.11em;
}


.lr-ot-pretitle>span {
  width: 40px;

  height: 3px;

  background: var(--ot-orange);

  animation:
    lrOtPretitle 3s ease-in-out infinite;
}


.lr-ot-pretitle i {
  color: var(--ot-orange);
}


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

.lr-ot-title {
  max-width: 720px;

  margin: 0;

  color: var(--ot-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

font-size: clamp(1.6rem, 2.3vw, 2.3rem);

  font-weight: 900;

  line-height: 0.97;

  letter-spacing: -0.04em;
}


.lr-ot-title span {
  display: block;

  margin-top: 4px;

  color: var(--ot-orange);
}


/* =========================================================
   HEADING TEXT
========================================================= */

.lr-ot-heading-text {
  max-width: 470px;

  margin:
    0 0 3px auto;

  color: var(--ot-gray);

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

  font-size: 1rem;

  line-height: 1.75;
}


/* =========================================================
   MAIN CONSOLE
========================================================= */

.lr-ot-console {
  position: relative;

  z-index: 4;

  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, 0.07);

  border-radius:
    38px 15px 38px 15px;

  background:
    var(--ot-navy-dark);

  box-shadow:
    0 32px 75px rgba(13, 23, 36, 0.18);
}


/* animated top line */

.lr-ot-console::before {
  content: "";

  position: absolute;

  z-index: 20;

  top: 0;

  left: 0;

  width: 100%;

  height: 5px;

  background:
    linear-gradient(90deg,
      var(--ot-orange-dark),
      var(--ot-orange-light),
      var(--ot-orange-dark));

  background-size:
    200% 100%;

  animation:
    lrOtTopLine 4s linear infinite;
}


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

.lr-ot-content {
  position: relative;

  min-height: 755px;

  height: 100%;

  padding:
    49px 46px;

  color: var(--ot-white);

  background:
    linear-gradient(145deg,
      var(--ot-navy) 0%,
      var(--ot-navy-dark) 100%);
}


/* tech grid */

.lr-ot-content::before {
  content: "";

  position: absolute;

  inset: 0;

  opacity: 0.12;

  pointer-events: none;

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

  background-size:
    34px 34px;
}


/* =========================================================
   STATUS
========================================================= */

.lr-ot-status {
  position: relative;

  z-index: 3;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding-bottom: 21px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.10);
}


.lr-ot-status-title {
  display: flex;

  align-items: center;

  gap: 10px;
}


.lr-ot-status-light {
  position: relative;

  display: block;

  width: 11px;

  height: 11px;

  border-radius: 50%;

  background: var(--ot-orange);

  box-shadow:
    0 0 18px rgba(255, 143, 31, 0.55);
}


.lr-ot-status-light::before {
  content: "";

  position: absolute;

  inset: -6px;

  border:
    1px solid rgba(255, 143, 31, 0.45);

  border-radius: 50%;

  animation:
    lrOtStatusPulse 2s ease-out infinite;
}


.lr-ot-status-title>div {
  display: flex;

  flex-direction: column;
}


.lr-ot-status-title small {
  color:
    rgba(255, 255, 255, 0.42);

  font-size: 0.48rem;

  font-weight: 700;

  letter-spacing: 0.07em;
}


.lr-ot-status-title strong {
  margin-top: 2px;

  color: var(--ot-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.86rem;

  font-weight: 900;
}


/* =========================================================
   STATUS TAGS
========================================================= */

.lr-ot-status-tags {
  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 6px;
}


.lr-ot-status-tags span {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  padding:
    5px 8px;

  border:
    1px solid rgba(255, 255, 255, 0.10);

  border-radius: 50px;

  background:
    rgba(255, 255, 255, 0.035);

  color:
    rgba(255, 255, 255, 0.63);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.51rem;

  font-weight: 800;
}


.lr-ot-status-tags i {
  color: var(--ot-orange);
}


/* =========================================================
   COPY
========================================================= */

.lr-ot-copy {
  position: relative;

  z-index: 3;

  margin-top: 27px;
}


.lr-ot-section-number {
  position: absolute;

  top: -10px;

  right: 0;

  color:
    rgba(255, 255, 255, 0.055);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 5.5rem;

  font-weight: 900;

  line-height: 1;
}


.lr-ot-copy p {
  position: relative;

  z-index: 2;

  max-width: 690px;

  margin:
    0 0 13px;

  color:
    rgba(255, 255, 255, 0.68);

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

  font-size: 0.94rem;

  line-height: 1.75;
}


.lr-ot-copy strong {
  color: var(--ot-white);

  font-weight: 700;
}


/* =========================================================
   SERVICE LIST
========================================================= */

.lr-ot-service-list {
  position: relative;

  z-index: 3;

  margin-top: 26px;

  border-top:
    1px solid rgba(255, 255, 255, 0.09);
}


/* =========================================================
   SERVICE ROW
========================================================= */

.lr-ot-service {
  display: grid;

  grid-template-columns:
    30px 56px 1fr 40px;

  align-items: center;

  gap: 13px;

  min-height: 113px;

  padding:
    18px 2px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.09);

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


.lr-ot-service:hover {
  padding-left: 11px;

  background:
    linear-gradient(90deg,
      rgba(255, 143, 31, 0.07),
      transparent);
}


/* NUMBER */

.lr-ot-service-number {
  color:
    rgba(255, 255, 255, 0.29);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.62rem;

  font-weight: 900;
}


/* ICON */

.lr-ot-service-icon {
  display: grid;

  place-items: center;

  width: 56px;

  height: 56px;

  border:
    1px solid rgba(255, 143, 31, 0.20);

  border-radius:
    17px 17px 17px 6px;

  background:
    rgba(255, 143, 31, 0.08);

  color: var(--ot-orange);

  font-size: 1.25rem;

  transition:
    background var(--ot-transition),
    color var(--ot-transition),
    transform var(--ot-transition);
}


.lr-ot-service:hover .lr-ot-service-icon {
  background: var(--ot-orange);

  color: var(--ot-white);

  transform:
    rotate(-5deg) scale(1.06);
}


/* COPY */

.lr-ot-service-copy small {
  color: var(--ot-orange-light);

  font-size: 0.48rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}


.lr-ot-service-copy h3 {
  margin:
    3px 0 5px;

  color: var(--ot-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1.08rem;

  font-weight: 900;
}


.lr-ot-service-copy p {
  max-width: 470px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.56);

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

  font-size: 0.75rem;

  line-height: 1.55;
}


/* CHECK */

.lr-ot-service-check {
  display: grid;

  place-items: center;

  width: 36px;

  height: 36px;

  border:
    1px solid rgba(255, 255, 255, 0.09);

  border-radius: 50%;

  color: var(--ot-orange);

  transition:
    background var(--ot-transition),
    color var(--ot-transition),
    transform var(--ot-transition);
}


.lr-ot-service:hover .lr-ot-service-check {
  background: var(--ot-orange);

  color: var(--ot-white);

  transform: rotate(360deg);
}


/* =========================================================
   SYSTEM TYPES
========================================================= */

.lr-ot-system-types {
  position: relative;

  z-index: 3;

  display: flex;

  flex-wrap: wrap;

  gap:
    8px 18px;

  margin-top: 21px;
}


.lr-ot-system-types span {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  color:
    rgba(255, 255, 255, 0.64);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.72rem;

  font-weight: 700;
}


.lr-ot-system-types i {
  color: var(--ot-orange);

  font-size: 0.7rem;
}


/* =========================================================
   ACTIONS
========================================================= */

.lr-ot-actions {
  position: relative;

  z-index: 3;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 18px;

  margin-top: 27px;
}


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

.lr-ot-btn {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  min-height: 55px;

  padding:
    0 23px;

  overflow: hidden;

  border-radius:
    50px 12px 50px 12px;

  background: var(--ot-orange);

  color: var(--ot-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.84rem;

  font-weight: 900;

  text-decoration: none;

  box-shadow:
    0 12px 26px rgba(255, 143, 31, 0.25);

  transition:
    background var(--ot-transition),
    transform var(--ot-transition),
    box-shadow var(--ot-transition);
}


.lr-ot-btn::before {
  content: "";

  position: absolute;

  top: -30%;

  left: -55%;

  width: 28%;

  height: 160%;

  background:
    linear-gradient(110deg,
      transparent,
      rgba(255, 255, 255, 0.45),
      transparent);

  transform: skewX(-20deg);

  animation:
    lrOtButtonShine 3.5s ease-in-out infinite;
}


.lr-ot-btn:hover {
  background: var(--ot-orange-dark);

  color: var(--ot-white);

  transform: translateY(-4px);

  box-shadow:
    0 17px 32px rgba(255, 143, 31, 0.32);
}


.lr-ot-btn i {
  transition:
    transform var(--ot-transition);
}


.lr-ot-btn:hover i {
  transform:
    translate(3px, -3px);
}


/* =========================================================
   SUPPORT
========================================================= */

.lr-ot-support {
  display: flex;

  align-items: center;

  gap: 10px;
}


.lr-ot-support>span {
  position: relative;

  display: grid;

  place-items: center;

  width: 45px;

  height: 45px;

  border-radius: 50%;

  background:
    rgba(255, 143, 31, 0.10);

  color: var(--ot-orange);
}


.lr-ot-support>span::before {
  content: "";

  position: absolute;

  inset: -5px;

  border:
    1px solid rgba(255, 143, 31, 0.28);

  border-radius: 50%;

  animation:
    lrOtSupportRing 2.2s ease-out infinite;
}


.lr-ot-support>div {
  display: flex;

  flex-direction: column;
}


.lr-ot-support small {
  color:
    rgba(255, 255, 255, 0.40);

  font-size: 0.48rem;

  font-weight: 700;

  letter-spacing: 0.07em;
}


.lr-ot-support strong {
  margin-top: 2px;

  color: var(--ot-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.82rem;

  font-weight: 900;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.lr-ot-visual {
  position: relative;

  min-height: 755px;

  height: 100%;

  overflow: hidden;

  background: var(--ot-navy-dark);
}


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

.lr-ot-visual>img {
  position: absolute;

  inset: 0;

  z-index: 1;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transition:
    transform 850ms cubic-bezier(0.22, 1, 0.36, 1);
}


.lr-ot-visual:hover>img {
  transform: scale(1.06);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.lr-ot-visual-overlay {
  position: absolute;

  inset: 0;

  z-index: 2;

  background:
    linear-gradient(180deg,
      rgba(13, 23, 36, 0.40) 0%,
      rgba(13, 23, 36, 0.06) 33%,
      rgba(13, 23, 36, 0.43) 63%,
      rgba(13, 23, 36, 0.97) 100%);

  pointer-events: none;
}


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

.lr-ot-image-badge {
  position: absolute;

  z-index: 8;

  top: 30px;

  left: 30px;

  display: flex;

  align-items: center;

  gap: 9px;

  padding:
    8px 14px 8px 8px;

  border:
    1px solid rgba(255, 255, 255, 0.15);

  border-radius: 50px;

  background:
    rgba(13, 23, 36, 0.76);

  backdrop-filter: blur(9px);

  -webkit-backdrop-filter: blur(9px);

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


.lr-ot-image-badge>span {
  display: grid;

  flex: 0 0 38px;

  place-items: center;

  width: 38px;

  height: 38px;

  border-radius: 50%;

  background: var(--ot-orange);

  color: var(--ot-white);
}


.lr-ot-image-badge>div {
  display: flex;

  flex-direction: column;
}


.lr-ot-image-badge small {
  color:
    rgba(255, 255, 255, 0.45);

  font-size: 0.45rem;

  font-weight: 700;
}


.lr-ot-image-badge strong {
  margin-top: 2px;

  color: var(--ot-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.78rem;

  font-weight: 900;
}


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

.lr-ot-image-number {
  position: absolute;

  z-index: 4;

  top: 32px;

  right: 25px;

  color:
    rgba(255, 255, 255, 0.12);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 7rem;

  font-weight: 900;

  line-height: 1;
}


/* =========================================================
   TECH RING
========================================================= */

.lr-ot-tech-ring {
  position: absolute;

  z-index: 7;

  top: 43%;

  right: 28px;

  display: grid;

  place-items: center;

  width: 100px;

  height: 100px;

  border:
    1px dashed rgba(255, 255, 255, 0.30);

  border-radius: 50%;

  animation:
    lrOtTechRing 16s linear infinite;
}


.lr-ot-tech-ring::before {
  content: "";

  position: absolute;

  top: -5px;

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: var(--ot-orange);

  box-shadow:
    0 0 20px rgba(255, 143, 31, 0.70);
}


.lr-ot-tech-ring span {
  position: absolute;

  inset: 17px;

  border:
    1px solid rgba(255, 143, 31, 0.32);

  border-radius: 50%;
}


.lr-ot-tech-ring i {
  color: var(--ot-orange);

  font-size: 1.6rem;
}


/* =========================================================
   IMAGE COPY
========================================================= */

.lr-ot-image-copy {
  position: absolute;

  z-index: 8;

  left: 35px;

  right: 35px;

  bottom: 138px;

  padding-left: 16px;

  border-left:
    4px solid var(--ot-orange);
}


.lr-ot-image-copy small {
  color: var(--ot-orange-light);

  font-size: 0.53rem;

  font-weight: 900;

  letter-spacing: 0.09em;
}


.lr-ot-image-copy h3 {
  margin:
    7px 0 0;

  color: var(--ot-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

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

  font-weight: 900;

  line-height: 0.98;
}


.lr-ot-image-copy h3 span {
  display: block;

  color: var(--ot-orange);
}


.lr-ot-image-copy p {
  margin:
    9px 0 0;

  color:
    rgba(255, 255, 255, 0.62);

  font-size: 0.72rem;
}


/* =========================================================
   IMAGE BOTTOM
========================================================= */

.lr-ot-image-bottom {
  position: absolute;

  z-index: 8;

  left: 25px;

  right: 25px;

  bottom: 26px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  padding:
    11px 13px;

  border:
    1px solid rgba(255, 255, 255, 0.12);

  border-radius: 14px;

  background:
    rgba(13, 23, 36, 0.75);

  backdrop-filter: blur(8px);

  -webkit-backdrop-filter: blur(8px);
}


.lr-ot-image-bottom>div {
  display: flex;

  align-items: center;

  gap: 9px;
}


.lr-ot-image-bottom>div>span {
  display: grid;

  place-items: center;

  width: 38px;

  height: 38px;

  border-radius: 50%;

  background:
    rgba(255, 143, 31, 0.12);

  color: var(--ot-orange);
}


.lr-ot-image-bottom>div>div {
  display: flex;

  flex-direction: column;
}


.lr-ot-image-bottom small {
  color:
    rgba(255, 255, 255, 0.43);

  font-size: 0.45rem;

  font-weight: 700;
}


.lr-ot-image-bottom strong {
  margin-top: 2px;

  color: var(--ot-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.72rem;

  font-weight: 900;
}


.lr-ot-image-bottom-check {
  display: grid;

  flex: 0 0 37px;

  place-items: center;

  width: 37px;

  height: 37px;

  border-radius: 50%;

  background: var(--ot-orange);

  color: var(--ot-white);
}


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

@keyframes lrOtGlow {

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

  50% {
    opacity: 1;
    transform: scale(1.08);
  }

}


@keyframes lrOtGear {

  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }

}


@keyframes lrOtWrench {

  0%,
  100% {
    transform:
      translateY(0) rotate(-18deg);
  }

  50% {
    transform:
      translateY(-18px) rotate(-6deg);
  }

}


@keyframes lrOtPower {

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

  50% {
    transform:
      translateY(-15px) scale(1.1);
  }

}


@keyframes lrOtPretitle {

  0%,
  100% {
    width: 40px;
  }

  50% {
    width: 58px;
  }

}


@keyframes lrOtTopLine {

  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }

}


@keyframes lrOtStatusPulse {

  0% {
    opacity: 0.75;
    transform: scale(0.8);
  }

  100% {
    opacity: 0;
    transform: scale(1.8);
  }

}


@keyframes lrOtButtonShine {

  0%,
  65% {
    left: -55%;
  }

  100% {
    left: 145%;
  }

}


@keyframes lrOtSupportRing {

  0% {
    opacity: 0.65;
    transform: scale(0.9);
  }

  100% {
    opacity: 0;
    transform: scale(1.4);
  }

}


@keyframes lrOtBadgeFloat {

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

  50% {
    transform: translateY(-6px);
  }

}


@keyframes lrOtTechRing {

  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

  .lr-opener-tech {
    padding: 90px 0;
  }


  .lr-ot-content,
  .lr-ot-visual {
    min-height: 720px;
  }


  .lr-ot-content {
    padding:
      43px 34px;
  }


  .lr-ot-title {
    font-size:
      clamp(2.6rem,
        4vw,
        3.7rem);
  }


  .lr-ot-service {
    grid-template-columns:
      25px 50px 1fr 35px;
  }


  .lr-ot-service-icon {
    width: 50px;

    height: 50px;
  }

}


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

@media (max-width: 991.98px) {

  .lr-opener-tech {
    padding: 78px 0;
  }


  .lr-ot-heading-text {
    max-width: none;

    margin-left: 0;
  }


  .lr-ot-console {
    max-width: 760px;

    margin: 0 auto;
  }


  .lr-ot-content {
    min-height: auto;

    padding:
      44px 38px;
  }


  .lr-ot-visual {
    min-height: 610px;
  }


  .lr-ot-title {
    font-size:
      clamp(2.6rem,
        7vw,
        3.8rem);
  }

}


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

@media (max-width: 767.98px) {

  .lr-opener-tech {
    padding: 65px 0;
  }


  .lr-ot-title {
    font-size:
      clamp(2.35rem,
        9vw,
        3.1rem);
  }


  .lr-ot-heading {
    margin-bottom: 39px;
  }


  .lr-ot-console {
    border-radius:
      28px 12px 28px 12px;
  }


  .lr-ot-content {
    padding:
      35px 25px;
  }


  .lr-ot-status {
    align-items: flex-start;

    flex-direction: column;
  }


  .lr-ot-status-tags {
    justify-content: flex-start;
  }


  .lr-ot-service {
    grid-template-columns:
      24px 48px 1fr;
  }


  .lr-ot-service-check {
    display: none;
  }


  .lr-ot-service-icon {
    width: 48px;

    height: 48px;
  }


  .lr-ot-actions {
    align-items: stretch;

    flex-direction: column;
  }


  .lr-ot-btn {
    width: 100%;
  }


  .lr-ot-support {
    justify-content: center;
  }


  .lr-ot-visual {
    min-height: 540px;
  }


  .lr-ot-tech-ring {
    width: 80px;

    height: 80px;
  }

}


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

@media (max-width: 575.98px) {

  .lr-opener-tech {
    padding: 55px 0;
  }


  .lr-ot-pretitle {
    font-size: 0.63rem;
  }


  .lr-ot-pretitle>span {
    width: 28px;
  }


  .lr-ot-title {
    font-size: 2.2rem;
  }


  .lr-ot-heading-text {
    font-size: 0.91rem;
  }


  .lr-ot-content {
    padding:
      31px 20px;
  }


  .lr-ot-copy p {
    font-size: 0.88rem;
  }


  .lr-ot-service {
    grid-template-columns:
      20px 45px 1fr;

    gap: 9px;

    padding:
      16px 0;
  }


  .lr-ot-service-icon {
    width: 45px;

    height: 45px;
  }


  .lr-ot-service-copy h3 {
    font-size: 1rem;
  }


  .lr-ot-service-copy p {
    font-size: 0.71rem;
  }


  .lr-ot-system-types {
    gap:
      7px 12px;
  }


  .lr-ot-visual {
    min-height: 490px;
  }


  .lr-ot-image-badge {
    top: 20px;

    left: 18px;
  }


  .lr-ot-image-number {
    display: none;
  }


  .lr-ot-tech-ring {
    top: 38%;

    right: 17px;

    width: 70px;

    height: 70px;
  }


  .lr-ot-image-copy {
    left: 23px;

    right: 23px;

    bottom: 123px;
  }


  .lr-ot-image-copy h3 {
    font-size: 1.9rem;
  }


  .lr-ot-image-bottom {
    left: 17px;

    right: 17px;

    bottom: 18px;
  }

}


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

@media (max-width: 390px) {

  .lr-ot-title {
    font-size: 2rem;
  }


  .lr-ot-content {
    padding:
      29px 17px;
  }


  .lr-ot-service-number {
    display: none;
  }


  .lr-ot-service {
    grid-template-columns:
      45px 1fr;
  }


  .lr-ot-visual {
    min-height: 455px;
  }


  .lr-ot-tech-ring {
    display: none;
  }


  .lr-ot-image-copy h3 {
    font-size: 1.7rem;
  }

}


/* =========================================================
   FOCUS
========================================================= */

.lr-ot-btn:focus-visible {
  outline:
    3px solid var(--ot-orange);

  outline-offset: 4px;
}


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

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

  .lr-opener-tech::after,
  .lr-opener-tech-tools i,
  .lr-ot-pretitle>span,
  .lr-ot-console::before,
  .lr-ot-status-light::before,
  .lr-ot-btn::before,
  .lr-ot-support>span::before,
  .lr-ot-image-badge,
  .lr-ot-tech-ring {
    animation: none !important;
  }


  .lr-ot-service,
  .lr-ot-service-icon,
  .lr-ot-service-check,
  .lr-ot-btn,
  .lr-ot-btn i,
  .lr-ot-visual>img {
    transition: none !important;
  }


  .lr-ot-service:hover,
  .lr-ot-service:hover .lr-ot-service-icon,
  .lr-ot-service:hover .lr-ot-service-check,
  .lr-ot-btn:hover,
  .lr-ot-btn:hover i,
  .lr-ot-visual:hover>img {
    transform: none !important;
  }

}

/* =========================================================
   OPENER SECTION - BIGGER TEXT
========================================================= */

/* PRETITLE */
.lr-ot-pretitle {
  font-size: 0.86rem;
}


/* MAIN TITLE */
.lr-ot-title {
font-size: clamp(1.6rem, 2.3vw, 2.3rem);
}


/* TOP RIGHT DESCRIPTION */
.lr-ot-heading-text {
  font-size: 1.12rem;
  line-height: 1.8;
}


/* SYSTEM STATUS */
.lr-ot-status-title small {
  font-size: 0.58rem;
}

.lr-ot-status-title strong {
  font-size: 1rem;
}

.lr-ot-status-tags span {
  font-size: 0.62rem;
}


/* MAIN DESCRIPTION */
.lr-ot-copy p {
  font-size: 1.06rem;
  line-height: 1.82;
}


/* SERVICE SMALL LABEL */
.lr-ot-service-copy small {
  font-size: 0.58rem;
}


/* SERVICE TITLES */
.lr-ot-service-copy h3 {
  font-size: 1.3rem;
}


/* SERVICE DESCRIPTION */
.lr-ot-service-copy p {
  font-size: 0.88rem;
  line-height: 1.65;
}


/* SYSTEM TYPES */
.lr-ot-system-types span {
  font-size: 0.84rem;
}


/* CTA BUTTON */
.lr-ot-btn {
  font-size: 0.98rem;
}


/* SUPPORT TEXT */
.lr-ot-support small {
  font-size: 0.58rem;
}

.lr-ot-support strong {
  font-size: 0.96rem;
}


/* IMAGE TOP BADGE */
.lr-ot-image-badge small {
  font-size: 0.54rem;
}

.lr-ot-image-badge strong {
  font-size: 0.9rem;
}


/* IMAGE MAIN COPY */
.lr-ot-image-copy small {
  font-size: 0.63rem;
}

.lr-ot-image-copy h3 {
  font-size:
    clamp(2.3rem,
      3.3vw,
      3.15rem);
}

.lr-ot-image-copy p {
  font-size: 0.86rem;
}


/* IMAGE BOTTOM PANEL */
.lr-ot-image-bottom small {
  font-size: 0.54rem;
}

.lr-ot-image-bottom strong {
  font-size: 0.86rem;
}


/* =========================================================
   TABLET
========================================================= */
@media (max-width: 991.98px) {

  .lr-ot-title {
    font-size:
      clamp(3rem,
        7vw,
        4.2rem);
  }

  .lr-ot-heading-text {
    font-size: 1.08rem;
  }

  .lr-ot-copy p {
    font-size: 1.02rem;
  }

  .lr-ot-service-copy h3 {
    font-size: 1.2rem;
  }

  .lr-ot-service-copy p {
    font-size: 0.84rem;
  }

}


/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 767.98px) {

  .lr-ot-title {
    font-size:
      clamp(2.6rem,
        9.5vw,
        3.5rem);
  }

  .lr-ot-heading-text {
    font-size: 1rem;
  }

  .lr-ot-copy p {
    font-size: 0.98rem;
  }

  .lr-ot-service-copy h3 {
    font-size: 1.15rem;
  }

  .lr-ot-service-copy p {
    font-size: 0.82rem;
  }

  .lr-ot-system-types span {
    font-size: 0.8rem;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */
@media (max-width: 575.98px) {

  .lr-ot-pretitle {
    font-size: 0.72rem;
  }

  .lr-ot-title {
    font-size: 2.5rem;
  }

  .lr-ot-heading-text {
    font-size: 0.98rem;
  }

  .lr-ot-copy p {
    font-size: 0.95rem;
  }

  .lr-ot-service-copy h3 {
    font-size: 1.1rem;
  }

  .lr-ot-service-copy p {
    font-size: 0.8rem;
  }

  .lr-ot-image-copy h3 {
    font-size: 2.15rem;
  }

  .lr-ot-image-copy p {
    font-size: 0.8rem;
  }

}

/* 00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */


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

.lr-cta-section {
  position: relative;
  overflow: hidden;

  padding: 80px 0;

  background: #0d1724;
}


/* subtle background pattern */
.lr-cta-section::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(circle at 10% 30%,
      rgba(255, 143, 31, 0.10),
      transparent 32%),
    radial-gradient(circle at 90% 80%,
      rgba(255, 143, 31, 0.07),
      transparent 35%),
    repeating-linear-gradient(135deg,
      transparent 0,
      transparent 34px,
      rgba(255, 255, 255, 0.018) 35px,
      transparent 36px);
}


.lr-cta-section .container {
  position: relative;
  z-index: 2;
}


/* =========================================================
   CTA WRAPPER
========================================================= */

.lr-cta-wrap {
  position: relative;

  padding: 55px 60px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 24px;

  background: #172435;

  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.22);
}


/* orange line */
.lr-cta-wrap::before {
  content: "";

  position: absolute;

  top: 0;
  left: 60px;

  width: 100px;
  height: 4px;

  background: #ff8f1f;
}


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

.lr-cta-content {
  max-width: 820px;
}


/* =========================================================
   PRETITLE
========================================================= */

.lr-cta-pretitle {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-bottom: 14px;

  color: #ff8f1f;

  font-family: "Roboto Condensed", Arial, sans-serif;

  font-size: 0.72rem;
  font-weight: 800;

  letter-spacing: 0.12em;
}


.lr-cta-pretitle span {
  width: 32px;
  height: 2px;

  background: #ff8f1f;
}


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

.lr-cta-content h2 {
  max-width: 760px;

  margin: 0;

  color: #ffffff;

  font-family: "Roboto Condensed", Arial, sans-serif;

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

  font-weight: 900;

  line-height: 1;

  letter-spacing: -0.02em;
}


.lr-cta-content h2 span {
  display: block;

  color: #ff8f1f;
}


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

.lr-cta-content p {
  max-width: 720px;

  margin: 20px 0 0;

  color: rgba(255, 255, 255, 0.60);

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

  font-size: 0.9rem;

  line-height: 1.8;
}


.lr-cta-content p strong {
  color: #ffffff;
}


/* =========================================================
   FEATURES
========================================================= */

.lr-cta-features {
  display: flex;
  flex-wrap: wrap;

  gap: 20px;

  margin-top: 25px;
}


.lr-cta-feature {
  display: flex;
  align-items: center;

  gap: 8px;

  color: rgba(255, 255, 255, 0.80);

  font-family: "Roboto Condensed", Arial, sans-serif;

  font-size: 0.78rem;
  font-weight: 700;
}


.lr-cta-feature i {
  color: #ff8f1f;

  font-size: 0.85rem;
}


/* =========================================================
   RIGHT ACTIONS
========================================================= */

.lr-cta-actions {
  display: flex;
  flex-direction: column;

  gap: 14px;
}


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

.lr-cta-primary {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  min-height: 56px;

  padding: 0 22px;

  border-radius: 9px;

  background: #ff8f1f;

  color: #ffffff;

  font-family: "Roboto Condensed", Arial, sans-serif;

  font-size: 0.86rem;
  font-weight: 800;

  text-decoration: none;

  transition:
    background 280ms ease,
    transform 280ms ease,
    box-shadow 280ms ease;
}


.lr-cta-primary:hover {
  background: #e8780d;

  color: #ffffff;

  transform: translateY(-3px);

  box-shadow:
    0 12px 28px rgba(255, 143, 31, 0.28);
}


.lr-cta-primary i {
  transition:
    transform 280ms ease;
}


.lr-cta-primary:hover i {
  transform: translate(3px, -3px);
}


/* =========================================================
   PHONE CTA
========================================================= */

.lr-cta-phone {
  display: flex;
  align-items: center;

  gap: 12px;

  min-height: 68px;

  padding: 11px 15px;

  border: 1px solid rgba(255, 255, 255, 0.10);

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.04);

  text-decoration: none;

  transition:
    background 280ms ease,
    border-color 280ms ease,
    transform 280ms ease;
}


.lr-cta-phone:hover {
  border-color: rgba(255, 143, 31, 0.35);

  background: rgba(255, 143, 31, 0.07);

  transform: translateY(-3px);
}


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

.lr-cta-phone-icon {
  display: grid;
  place-items: center;

  flex: 0 0 44px;

  width: 44px;
  height: 44px;

  border-radius: 50%;

  background: rgba(255, 143, 31, 0.13);

  color: #ff8f1f;

  font-size: 0.95rem;
}


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

.lr-cta-phone-text {
  display: flex;
  flex-direction: column;
}


.lr-cta-phone-text small {
  color: rgba(255, 255, 255, 0.43);

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

  font-size: 0.61rem;
}


.lr-cta-phone-text strong {
  margin-top: 2px;

  color: #ffffff;

  font-family: "Roboto Condensed", Arial, sans-serif;

  font-size: 1rem;
  font-weight: 800;
}


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

@media (max-width: 991.98px) {

  .lr-cta-section {
    padding: 65px 0;
  }


  .lr-cta-wrap {
    padding: 45px 40px;
  }


  .lr-cta-actions {
    max-width: 420px;
  }

}


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

@media (max-width: 767.98px) {

  .lr-cta-section {
    padding: 50px 0;
  }


  .lr-cta-wrap {
    padding: 38px 24px;

    border-radius: 18px;
  }


  .lr-cta-wrap::before {
    left: 24px;

    width: 70px;
  }


  .lr-cta-content h2 {
    font-size: 2.3rem;
  }


  .lr-cta-features {
    flex-direction: column;

    gap: 12px;
  }


  .lr-cta-actions {
    max-width: 100%;
  }


  .lr-cta-primary {
    width: 100%;
  }

}


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

@media (max-width: 480px) {

  .lr-cta-wrap {
    padding: 34px 20px;
  }


  .lr-cta-content h2 {
    font-size: 2rem;
  }


  .lr-cta-content p {
    font-size: 0.82rem;
  }


  .lr-cta-phone {
    padding: 10px 12px;
  }

}

/* 0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */

/* =========================================================
   GARAGE DOOR INSTALLATION SECTION
========================================================= */

.lr-install-arch-section {
  --ia-navy: #172435;
  --ia-navy-dark: #0d1724;
  --ia-navy-soft: #223247;

  --ia-orange: #ff8f1f;
  --ia-orange-dark: #e8780d;
  --ia-orange-light: #ffa142;

  --ia-white: #ffffff;
  --ia-light: #f5f5f5;

  --ia-text: #20282f;
  --ia-gray: #6f757b;

  --ia-border:
    rgba(23, 36, 53, 0.10);

  --ia-transition:
    400ms cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;

  padding: 105px 0;

  overflow: hidden;

  isolation: isolate;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f7f8fa 55%,
      #f3f5f7 100%
    );
}


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

.lr-install-arch-section::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -3;

  opacity: 0.43;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(23, 36, 53, 0.026) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(23, 36, 53, 0.026) 1px,
      transparent 1px
    );

  background-size: 54px 54px;
}


/* =========================================================
   ORANGE BACKGROUND GLOW
========================================================= */

.lr-install-arch-section::after {
  content: "";

  position: absolute;

  z-index: -2;

  left: -250px;

  bottom: -300px;

  width: 700px;

  height: 700px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(255, 143, 31, 0.14),
      rgba(255, 143, 31, 0.035) 48%,
      transparent 72%
    );

  animation:
    iaAmbientGlow
    7s ease-in-out
    infinite;
}


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

.lr-install-arch-section .container {
  position: relative;

  z-index: 3;

  max-width: 1240px;
}


/* =========================================================
   BACKGROUND TOOLS
========================================================= */

.lr-install-arch-shapes {
  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;
}


.lr-install-arch-shapes > i {
  position: absolute;

  opacity: 0.10;

  pointer-events: none;
}


.lr-install-arch-wrench {
  top: 8%;

  left: 2%;

  color: var(--ia-orange);

  font-size: 6rem;

  animation:
    iaWrenchFloat
    8s ease-in-out
    infinite;
}


.lr-install-arch-gear {
  right: -50px;

  bottom: 6%;

  color: var(--ia-navy);

  font-size: 10rem;

  animation:
    iaGearRotate
    21s linear
    infinite;
}


.lr-install-arch-tools {
  top: 10%;

  right: 3%;

  color: var(--ia-orange);

  font-size: 5rem;

  animation:
    iaToolsFloat
    8s ease-in-out
    infinite;
}


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

.lr-install-arch-content {
  position: relative;

  width: 100%;

  padding: 15px 0;
}


/* =========================================================
   PRETITLE
========================================================= */

.lr-install-arch-pretitle {
  display: flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 14px;

  color: var(--ia-orange-dark);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.76rem;

  font-weight: 800;

  line-height: 1.2;

  letter-spacing: 0.12em;
}


.lr-install-arch-pretitle > span {
  display: block;

  width: 40px;

  height: 3px;

  background: var(--ia-orange);

  animation:
    iaPretitleLine
    3s ease-in-out
    infinite;
}


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

.lr-install-arch-title {
  max-width: 580px;

  margin: 0;

  color: var(--ia-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

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

  font-weight: 900;

  line-height: 0.99;

  letter-spacing: -0.035em;
}


.lr-install-arch-title span {
  display: block;

  margin-top: 5px;

  color: var(--ia-orange);
}


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

.lr-install-arch-description {
  max-width: 590px;

  margin: 22px 0 0;

  color: var(--ia-gray);

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

  font-size: 1rem;

  line-height: 1.8;
}


.lr-install-arch-description strong {
  color: var(--ia-navy);

  font-weight: 700;
}


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

.lr-install-arch-offer {
  position: relative;

  display: flex;

  align-items: center;

  gap: 14px;

  width: 100%;

  max-width: 590px;

  margin-top: 25px;

  padding: 15px 17px;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 143, 31, 0.24);

  border-radius:
    50px 17px 17px 50px;

  background:
    rgba(255, 143, 31, 0.065);
}


/* shine */

.lr-install-arch-offer::before {
  content: "";

  position: absolute;

  top: -40%;

  left: -40%;

  width: 25%;

  height: 180%;

  pointer-events: none;

  background:
    linear-gradient(
      110deg,
      transparent,
      rgba(255, 255, 255, 0.72),
      transparent
    );

  transform: skewX(-20deg);

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


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

.lr-install-arch-offer-icon {
  position: relative;

  z-index: 2;

  display: grid;

  flex: 0 0 56px;

  place-items: center;

  width: 56px;

  height: 56px;

  border-radius: 50%;

  background: var(--ia-orange);

  color: var(--ia-white);

  font-size: 1.25rem;

  box-shadow:
    0 10px 23px
    rgba(255, 143, 31, 0.27);
}


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

.lr-install-arch-offer-content {
  position: relative;

  z-index: 2;

  display: flex;

  flex: 1;

  flex-direction: column;

  min-width: 0;
}


.lr-install-arch-offer-content small {
  color: var(--ia-orange-dark);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.63rem;

  font-weight: 800;

  letter-spacing: 0.09em;
}


.lr-install-arch-offer-content strong {
  margin-top: 2px;

  color: var(--ia-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1.17rem;

  font-weight: 900;

  line-height: 1.15;
}


.lr-install-arch-offer-content p {
  margin: 4px 0 0;

  color: var(--ia-gray);

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

  font-size: 0.76rem;

  line-height: 1.45;
}


/* =========================================================
   SAME DAY PILL
========================================================= */

.lr-install-arch-offer-live {
  position: relative;

  z-index: 2;

  display: inline-flex;

  align-items: center;

  gap: 5px;

  flex: 0 0 auto;

  padding: 8px 11px;

  border-radius: 50px;

  background: var(--ia-navy);

  color: var(--ia-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.57rem;

  font-weight: 900;

  letter-spacing: 0.04em;
}


.lr-install-arch-offer-live i {
  color: var(--ia-orange);
}


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

.lr-install-arch-benefits {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;

  width: 100%;

  margin-top: 25px;
}


/* =========================================================
   BENEFIT CARD
========================================================= */

.lr-install-arch-benefit {
  position: relative;

  display: flex;

  align-items: center;

  gap: 12px;

  min-width: 0;

  min-height: 112px;

  padding:
    11px 13px 11px 8px;

  overflow: hidden;

  border:
    1px solid
    rgba(23, 36, 53, 0.09);

  border-radius:
    999px 23px 23px 999px;

  background: var(--ia-white);

  box-shadow:
    0 9px 24px
    rgba(23, 36, 53, 0.055);

  transition:
    transform var(--ia-transition),
    border-color var(--ia-transition),
    box-shadow var(--ia-transition);
}


.lr-install-arch-benefit:hover {
  border-color:
    rgba(255, 143, 31, 0.35);

  box-shadow:
    0 17px 36px
    rgba(23, 36, 53, 0.11);

  transform:
    translateY(-5px);
}


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

.lr-install-arch-benefit-icon {
  position: relative;

  z-index: 2;

  display: grid;

  flex: 0 0 62px;

  place-items: center;

  width: 62px;

  height: 62px;

  border-radius: 50%;

  background: var(--ia-navy);

  color: var(--ia-orange);

  font-size: 1.15rem;

  box-shadow:
    0 9px 21px
    rgba(23, 36, 53, 0.15);

  transition:
    background var(--ia-transition),
    color var(--ia-transition),
    transform var(--ia-transition);
}


/* first orange icon like screenshot */

.lr-install-orange-icon {
  background: #d57a18;

  color: #ffffff;
}


.lr-install-arch-benefit:hover
.lr-install-arch-benefit-icon {
  background: var(--ia-orange);

  color: var(--ia-white);

  transform:
    rotate(-6deg)
    scale(1.05);
}


/* =========================================================
   BENEFIT CONTENT
========================================================= */

.lr-install-arch-benefit-content {
  position: relative;

  z-index: 2;

  flex: 1;

  min-width: 0;
}


.lr-install-arch-benefit-content small {
  display: block;

  margin-bottom: 4px;

  color: var(--ia-orange-dark);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.55rem;

  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.07em;
}


.lr-install-arch-benefit-content h3 {
  margin:
    0 0 5px;

  color: var(--ia-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1rem;

  font-weight: 900;

  line-height: 1.08;
}


.lr-install-arch-benefit-content p {
  margin: 0;

  color: var(--ia-gray);

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

  font-size: 0.72rem;

  line-height: 1.46;
}


/* =========================================================
   CHECK
========================================================= */

.lr-install-arch-check {
  position: relative;

  z-index: 2;

  display: grid;

  flex: 0 0 29px;

  place-items: center;

  width: 29px;

  height: 29px;

  border-radius: 50%;

  background:
    rgba(255, 143, 31, 0.10);

  color: var(--ia-orange);

  font-size: 0.78rem;

  transition:
    background var(--ia-transition),
    color var(--ia-transition),
    transform var(--ia-transition);
}


.lr-install-arch-benefit:hover
.lr-install-arch-check {
  background: var(--ia-orange);

  color: var(--ia-white);

  transform:
    scale(1.08)
    rotate(7deg);
}


/* =========================================================
   ACTIONS
========================================================= */

.lr-install-arch-actions {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 13px;

  margin-top: 26px;
}


/* =========================================================
   FREE ESTIMATE BUTTON
========================================================= */

.lr-install-arch-btn {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  min-height: 58px;

  padding:
    0 25px;

  overflow: hidden;

  border-radius:
    50px 13px 50px 13px;

  background: var(--ia-orange);

  color: var(--ia-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.92rem;

  font-weight: 900;

  text-decoration: none;

  box-shadow:
    0 13px 27px
    rgba(255, 143, 31, 0.27);

  transition:
    background var(--ia-transition),
    transform var(--ia-transition),
    box-shadow var(--ia-transition);
}


/* shine */

.lr-install-arch-btn::before {
  content: "";

  position: absolute;

  top: -30%;

  left: -55%;

  width: 30%;

  height: 160%;

  pointer-events: none;

  background:
    linear-gradient(
      110deg,
      transparent,
      rgba(255, 255, 255, 0.45),
      transparent
    );

  transform: skewX(-20deg);

  animation:
    iaButtonShine
    3.5s ease-in-out
    infinite;
}


.lr-install-arch-btn:hover {
  background: var(--ia-orange-dark);

  color: var(--ia-white);

  transform:
    translateY(-4px);

  box-shadow:
    0 18px 35px
    rgba(255, 143, 31, 0.34);
}


.lr-install-arch-btn i {
  transition:
    transform var(--ia-transition);
}


.lr-install-arch-btn:hover i {
  transform:
    translate(4px, -4px);
}


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

.lr-install-arch-phone {
  display: flex;

  align-items: center;

  gap: 11px;

  min-height: 58px;

  padding:
    6px 20px 6px 7px;

  border-radius: 50px;

  background: var(--ia-navy);

  color: var(--ia-white);

  text-decoration: none;

  box-shadow:
    0 11px 25px
    rgba(23, 36, 53, 0.17);

  transition:
    transform var(--ia-transition),
    background var(--ia-transition);
}


.lr-install-arch-phone:hover {
  background: var(--ia-navy-dark);

  color: var(--ia-white);

  transform:
    translateY(-4px);
}


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

.lr-install-arch-phone-icon {
  position: relative;

  display: grid;

  flex: 0 0 44px;

  place-items: center;

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: var(--ia-orange);

  color: var(--ia-white);
}


.lr-install-arch-phone-icon::before {
  content: "";

  position: absolute;

  inset: -5px;

  border:
    2px solid
    rgba(255, 143, 31, 0.35);

  border-radius: 50%;

  animation:
    iaPhoneRing
    2s ease-out
    infinite;
}


.lr-install-arch-phone-icon i {
  animation:
    iaPhoneShake
    2.6s ease-in-out
    infinite;
}


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

.lr-install-arch-phone-text {
  display: flex;

  flex-direction: column;
}


.lr-install-arch-phone-text small {
  color:
    rgba(255, 255, 255, 0.50);

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

  font-size: 0.56rem;

  font-weight: 700;

  letter-spacing: 0.05em;
}


.lr-install-arch-phone-text strong {
  margin-top: 2px;

  color: var(--ia-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1.08rem;

  font-weight: 900;

  white-space: nowrap;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.lr-install-arch-visual {
  position: relative;

  width: 100%;

  max-width: 575px;

  margin:
    0 auto;

  padding:
    0 20px 60px;
}


/* =========================================================
   MAIN ARCH IMAGE
========================================================= */

.lr-install-arch-image-wrap {
  position: relative;

  width: 100%;

  height: 675px;

  margin: 0 auto;

  overflow: hidden;

  border-radius:
    285px 285px 38px 38px;

  background: var(--ia-navy);

  box-shadow:
    0 30px 65px
    rgba(23, 36, 53, 0.20);
}


/* inner orange arch */

.lr-install-arch-image-wrap::before {
  content: "";

  position: absolute;

  z-index: 5;

  inset: 14px;

  border:
    2px solid
    rgba(255, 143, 31, 0.52);

  border-radius:
    265px 265px 28px 28px;

  pointer-events: none;
}


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

.lr-install-arch-image {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: center;

  transition:
    transform 800ms
    cubic-bezier(0.22, 1, 0.36, 1);
}


.lr-install-arch-image-wrap:hover
.lr-install-arch-image {
  transform:
    scale(1.055);
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.lr-install-arch-overlay {
  position: absolute;

  z-index: 2;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(13, 23, 36, 0.02) 15%,
      rgba(13, 23, 36, 0.08) 52%,
      rgba(13, 23, 36, 0.86) 100%
    );
}


/* =========================================================
   IMAGE TOP LABEL
========================================================= */

.lr-install-arch-image-label {
  position: absolute;

  z-index: 7;

  top: 43px;

  left: 50%;

  display: flex;

  align-items: center;

  gap: 9px;

  max-width:
    calc(100% - 80px);

  padding:
    9px 14px 9px 9px;

  border:
    1px solid
    rgba(255, 255, 255, 0.16);

  border-radius: 50px;

  background:
    rgba(13, 23, 36, 0.84);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  transform:
    translateX(-50%);

  white-space: nowrap;

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


.lr-install-arch-image-label-icon {
  display: grid;

  flex: 0 0 37px;

  place-items: center;

  width: 37px;

  height: 37px;

  border-radius: 50%;

  background:
    rgba(255, 143, 31, 0.14);

  color: var(--ia-orange);
}


.lr-install-arch-image-label > div {
  display: flex;

  flex-direction: column;
}


.lr-install-arch-image-label small {
  color: var(--ia-orange-light);

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

  font-size: 0.51rem;

  font-weight: 800;

  letter-spacing: 0.07em;
}


.lr-install-arch-image-label strong {
  margin-top: 2px;

  color: var(--ia-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.82rem;

  font-weight: 800;
}


/* =========================================================
   IMAGE BOTTOM COPY
========================================================= */

.lr-install-arch-image-bottom {
  position: absolute;

  z-index: 7;

  left: 37px;

  right: 37px;

  bottom: 40px;

  display: flex;

  flex-direction: column;

  padding-left: 15px;

  border-left:
    4px solid
    var(--ia-orange);
}


.lr-install-arch-image-bottom small {
  color: var(--ia-orange-light);

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

  font-size: 0.58rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}


.lr-install-arch-image-bottom strong {
  margin-top: 5px;

  color: var(--ia-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1.28rem;

  font-weight: 900;

  line-height: 1.15;
}


/* =========================================================
   FREE ESTIMATE BADGE
========================================================= */

.lr-install-arch-badge {
  position: absolute;

  z-index: 10;

  right: -5px;

  bottom: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  width: 150px;

  height: 150px;

  border:
    8px solid
    var(--ia-white);

  border-radius: 50%;

  background: var(--ia-orange);

  color: var(--ia-white);

  text-align: center;

  box-shadow:
    0 20px 42px
    rgba(255, 143, 31, 0.33);

  animation:
    iaBadgeFloat
    3s ease-in-out
    infinite;
}


.lr-install-arch-badge::before {
  content: "";

  position: absolute;

  inset: -14px;

  border:
    2px solid
    rgba(255, 143, 31, 0.28);

  border-radius: 50%;

  animation:
    iaBadgeRing
    2.3s ease-out
    infinite;
}


.lr-install-arch-badge small,
.lr-install-arch-badge span {
  color: var(--ia-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.57rem;

  font-weight: 800;

  letter-spacing: 0.08em;
}


.lr-install-arch-badge strong {
  color: var(--ia-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1.45rem;

  font-weight: 900;

  line-height: 0.94;
}


/* =========================================================
   OUTER DECORATIVE ARCH
========================================================= */

.lr-install-arch-outline {
  position: absolute;

  z-index: -1;

  top: 76px;

  right: -5px;

  width: 98%;

  height: 505px;

  border:
    3px solid
    rgba(255, 143, 31, 0.28);

  border-left: 0;

  border-radius:
    0 290px 290px 0;

  pointer-events: none;
}


/* =========================================================
   TRUST PILL
========================================================= */

.lr-install-arch-trust {
  position: absolute;

  z-index: 9;

  left: -5px;

  bottom: 88px;

  display: flex;

  align-items: center;

  gap: 9px;

  padding:
    10px 15px 10px 9px;

  border:
    1px solid
    rgba(23, 36, 53, 0.10);

  border-radius: 50px;

  background: var(--ia-white);

  box-shadow:
    0 14px 32px
    rgba(23, 36, 53, 0.14);
}


.lr-install-arch-trust-icon {
  display: grid;

  flex: 0 0 38px;

  place-items: center;

  width: 38px;

  height: 38px;

  border-radius: 50%;

  background:
    rgba(255, 143, 31, 0.11);

  color: var(--ia-orange);
}


.lr-install-arch-trust > div {
  display: flex;

  flex-direction: column;
}


.lr-install-arch-trust small {
  color: var(--ia-gray);

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

  font-size: 0.51rem;

  font-weight: 700;

  letter-spacing: 0.06em;
}


.lr-install-arch-trust strong {
  margin-top: 1px;

  color: var(--ia-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 0.81rem;

  font-weight: 800;
}


/* =========================================================
   FOCUS
========================================================= */

.lr-install-arch-btn:focus-visible,
.lr-install-arch-phone:focus-visible {
  outline:
    3px solid
    var(--ia-orange);

  outline-offset: 4px;
}


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

@keyframes iaAmbientGlow {

  0%,
  100% {
    opacity: 0.65;

    transform:
      scale(0.95);
  }

  50% {
    opacity: 1;

    transform:
      scale(1.08);
  }

}


@keyframes iaWrenchFloat {

  0%,
  100% {
    transform:
      translateY(0)
      rotate(-20deg);
  }

  50% {
    transform:
      translateY(-20px)
      rotate(-9deg);
  }

}


@keyframes iaGearRotate {

  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(360deg);
  }

}


@keyframes iaToolsFloat {

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

  50% {
    transform:
      translateY(-18px)
      rotate(-2deg);
  }

}


@keyframes iaPretitleLine {

  0%,
  100% {
    width: 40px;
  }

  50% {
    width: 56px;
  }

}


@keyframes iaOfferShine {

  0%,
  65% {
    left: -40%;
  }

  100% {
    left: 145%;
  }

}


@keyframes iaButtonShine {

  0%,
  65% {
    left: -55%;
  }

  100% {
    left: 145%;
  }

}


@keyframes iaPhoneRing {

  0% {
    opacity: 0.75;

    transform:
      scale(0.9);
  }

  100% {
    opacity: 0;

    transform:
      scale(1.43);
  }

}


@keyframes iaPhoneShake {

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

  83% {
    transform:
      rotate(-11deg);
  }

  87% {
    transform:
      rotate(11deg);
  }

  92% {
    transform:
      rotate(-6deg);
  }

}


@keyframes iaImageLabelFloat {

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

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

}


@keyframes iaBadgeFloat {

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

  50% {
    transform:
      translateY(-8px);
  }

}


@keyframes iaBadgeRing {

  0% {
    opacity: 0.7;

    transform:
      scale(0.90);
  }

  100% {
    opacity: 0;

    transform:
      scale(1.24);
  }

}


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

@media (min-width: 1400px) {

  .lr-install-arch-section .container {
    max-width: 1320px;
  }


  .lr-install-arch-section .row {
    --bs-gutter-x: 5.5rem;
  }


  .lr-install-arch-title {
    max-width: 620px;

font-size: clamp( 1rem, 1.4vw, 1.45rem );
  }


  .lr-install-arch-description,
  .lr-install-arch-offer {
    max-width: 620px;
  }


  .lr-install-arch-visual {
    max-width: 600px;
  }


  .lr-install-arch-image-wrap {
    height: 700px;
  }

}


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

@media (min-width: 1200px) {

  .lr-install-arch-section .row {
    --bs-gutter-x: 5rem;
  }


  .lr-install-arch-content {
    padding-left: 5px;
  }

}


/* =========================================================
   LAPTOP
========================================================= */

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

  .lr-install-arch-section {
    padding: 88px 0;
  }


  .lr-install-arch-section .row {
    --bs-gutter-x: 3.5rem;
  }


  .lr-install-arch-title {
    font-size:
      clamp(
        2.15rem,
        3.2vw,
        2.85rem
      );
  }


  .lr-install-arch-description {
    font-size: 0.96rem;
  }


  .lr-install-arch-image-wrap {
    height: 625px;
  }


  .lr-install-arch-visual {
    max-width: 525px;
  }


  .lr-install-arch-benefit {
    min-height: 106px;

    gap: 9px;
  }


  .lr-install-arch-benefit-icon {
    flex-basis: 55px;

    width: 55px;

    height: 55px;
  }


  .lr-install-arch-benefit-content h3 {
    font-size: 0.91rem;
  }


  .lr-install-arch-benefit-content p {
    font-size: 0.67rem;
  }


  .lr-install-arch-check {
    width: 26px;

    height: 26px;

    flex-basis: 26px;
  }

}


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

@media (max-width: 991.98px) {

  .lr-install-arch-section {
    padding: 75px 0;
  }


  .lr-install-arch-section .row {
    --bs-gutter-x: 1.5rem;
  }


  .lr-install-arch-visual {
    width: 100%;

    max-width: 620px;

    margin:
      0 auto 15px;

    padding:
      0 15px 58px;
  }


  .lr-install-arch-image-wrap {
    height: 620px;

    border-radius:
      310px 310px 35px 35px;
  }


  .lr-install-arch-image-wrap::before {
    border-radius:
      290px 290px 27px 27px;
  }


  .lr-install-arch-content {
    max-width: 760px;

    margin:
      0 auto;

    padding: 0;
  }


  .lr-install-arch-title {
    max-width: 680px;

    font-size:
      clamp(
        2.4rem,
        5.5vw,
        3.2rem
      );
  }


  .lr-install-arch-description,
  .lr-install-arch-offer {
    max-width: 720px;
  }


  .lr-install-arch-benefits {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


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

@media (max-width: 767.98px) {

  .lr-install-arch-section {
    padding: 60px 0;
  }


  .lr-install-arch-visual {
    padding:
      0 8px 48px;
  }


  .lr-install-arch-image-wrap {
    height: 510px;

    border-radius:
      240px 240px 27px 27px;
  }


  .lr-install-arch-image-wrap::before {
    border-radius:
      220px 220px 20px 20px;
  }


  .lr-install-arch-badge {
    right: 0;

    width: 125px;

    height: 125px;

    border-width: 6px;
  }


  .lr-install-arch-badge strong {
    font-size: 1.2rem;
  }


  .lr-install-arch-trust {
    left: 10px;

    bottom: 73px;
  }


  .lr-install-arch-outline {
    right: 0;

    width: 95%;
  }


  .lr-install-arch-title {
    font-size:
      clamp(
        2.2rem,
        8vw,
        2.8rem
      );
  }


  .lr-install-arch-description {
    font-size: 1rem;
  }


  .lr-install-arch-offer {
    align-items: flex-start;

    border-radius: 24px;
  }


  .lr-install-arch-offer-live {
    align-self: center;
  }


  .lr-install-arch-benefits {
    grid-template-columns: 1fr;

    max-width: 550px;
  }


  .lr-install-arch-benefit {
    min-height: 100px;
  }


  .lr-install-arch-benefit-content p {
    font-size: 0.75rem;
  }


  .lr-install-arch-actions {
    flex-direction: column;

    align-items: stretch;
  }


  .lr-install-arch-btn,
  .lr-install-arch-phone {
    width: 100%;
  }


  .lr-install-arch-phone {
    justify-content: flex-start;
  }

}


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

@media (max-width: 575.98px) {

  .lr-install-arch-section {
    padding: 52px 0;
  }


  .lr-install-arch-image-wrap {
    height: 440px;

    border-radius:
      205px 205px 23px 23px;
  }


  .lr-install-arch-image-label {
    top: 27px;

    max-width:
      calc(100% - 45px);
  }


  .lr-install-arch-image-label strong {
    font-size: 0.73rem;
  }


  .lr-install-arch-image-bottom {
    left: 24px;

    right: 24px;

    bottom: 27px;
  }


  .lr-install-arch-image-bottom strong {
    font-size: 1.02rem;
  }


  .lr-install-arch-badge {
    width: 108px;

    height: 108px;
  }


  .lr-install-arch-badge strong {
    font-size: 1.02rem;
  }


  .lr-install-arch-trust,
  .lr-install-arch-outline {
    display: none;
  }


  .lr-install-arch-title {
    font-size: 2.15rem;
  }


  .lr-install-arch-description {
    font-size: 0.96rem;
  }


  .lr-install-arch-offer {
    padding: 14px;
  }


  .lr-install-arch-offer-icon {
    flex-basis: 49px;

    width: 49px;

    height: 49px;
  }


  .lr-install-arch-offer-content strong {
    font-size: 1.05rem;
  }


  .lr-install-arch-offer-live {
    display: none;
  }


  .lr-install-arch-benefits {
    gap: 12px;
  }


  .lr-install-arch-benefit {
    min-height: 96px;

    padding:
      10px 12px 10px 7px;
  }


  .lr-install-arch-benefit-icon {
    flex-basis: 54px;

    width: 54px;

    height: 54px;

    font-size: 1rem;
  }


  .lr-install-arch-benefit-content small {
    font-size: 0.51rem;
  }


  .lr-install-arch-benefit-content h3 {
    font-size: 0.96rem;
  }


  .lr-install-arch-benefit-content p {
    font-size: 0.72rem;
  }


  .lr-install-arch-check {
    flex-basis: 27px;

    width: 27px;

    height: 27px;
  }

}


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

@media (max-width: 400px) {

  .lr-install-arch-image-wrap {
    height: 390px;
  }


  .lr-install-arch-image-label {
    padding:
      7px 10px 7px 7px;
  }


  .lr-install-arch-image-label-icon {
    flex-basis: 32px;

    width: 32px;

    height: 32px;
  }


  .lr-install-arch-image-label small {
    font-size: 0.44rem;
  }


  .lr-install-arch-image-label strong {
    font-size: 0.66rem;
  }


  .lr-install-arch-title {
    font-size: 2rem;
  }


  .lr-install-arch-description {
    font-size: 0.92rem;
  }


  .lr-install-arch-benefit {
    gap: 8px;

    padding-right: 10px;
  }


  .lr-install-arch-benefit-icon {
    flex-basis: 50px;

    width: 50px;

    height: 50px;
  }


  .lr-install-arch-benefit-content h3 {
    font-size: 0.91rem;
  }


  .lr-install-arch-benefit-content p {
    font-size: 0.68rem;
  }


  .lr-install-arch-check {
    display: none;
  }


  .lr-install-arch-phone-text strong {
    font-size: 1rem;
  }

}


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

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

  .lr-install-arch-section::after,
  .lr-install-arch-shapes > i,
  .lr-install-arch-pretitle > span,
  .lr-install-arch-offer::before,
  .lr-install-arch-btn::before,
  .lr-install-arch-phone-icon::before,
  .lr-install-arch-phone-icon i,
  .lr-install-arch-image-label,
  .lr-install-arch-badge,
  .lr-install-arch-badge::before {
    animation: none !important;
  }


  .lr-install-arch-benefit,
  .lr-install-arch-benefit-icon,
  .lr-install-arch-check,
  .lr-install-arch-btn,
  .lr-install-arch-btn i,
  .lr-install-arch-phone,
  .lr-install-arch-image {
    transition: none !important;
  }


  .lr-install-arch-benefit:hover,
  .lr-install-arch-benefit:hover
  .lr-install-arch-benefit-icon,
  .lr-install-arch-benefit:hover
  .lr-install-arch-check,
  .lr-install-arch-btn:hover,
  .lr-install-arch-phone:hover,
  .lr-install-arch-image-wrap:hover
  .lr-install-arch-image {
    transform: none !important;
  }

}




/* 000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */
/* =========================================================
   COMMON QUESTIONS SECTION
========================================================= */

.lr-common-section {
  position: relative;
  overflow: hidden;
  padding: 90px 0;
  background: #f4f5f7;
}


/* subtle background pattern */
.lr-common-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;

  background-image:
    linear-gradient(rgba(23, 36, 53, 0.025) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(23, 36, 53, 0.025) 1px,
      transparent 1px);

  background-size: 48px 48px;
}


/* orange glow */
.lr-common-section::after {
  content: "";
  position: absolute;
  top: -160px;
  left: -150px;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  background: rgba(255, 143, 31, 0.06);
  pointer-events: none;
}


.lr-common-section .container {
  position: relative;
  z-index: 2;
}


/* =========================================================
   WRAPPER
========================================================= */

.lr-common-wrap {
  padding: 55px;
  border: 1px solid rgba(23, 36, 53, 0.08);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 22px 55px rgba(23, 36, 53, 0.08);
}


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

.lr-common-content {
  max-width: 500px;
}


/* =========================================================
   PRETITLE
========================================================= */

.lr-common-pretitle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;

  color: #ff8f1f;

  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}


.lr-common-pretitle span {
  width: 34px;
  height: 2px;
  background: #ff8f1f;
}


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

.lr-common-title {
  margin: 0;

  color: #172435;

  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 900;

  line-height: 0.98;
  letter-spacing: -0.025em;
}


.lr-common-title span {
  display: block;
  color: #ff8f1f;
}


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

.lr-common-text {
  margin: 23px 0 0;

  color: #69717a;

  font-family: "Roboto", Arial, sans-serif;
  font-size: 0.88rem;
  line-height: 1.8;
}


.lr-common-text+.lr-common-text {
  margin-top: 13px;
}


.lr-common-text strong {
  color: #172435;
  font-weight: 700;
}


/* =========================================================
   HIGHLIGHT
========================================================= */

.lr-common-highlight {
  display: flex;
  align-items: center;
  gap: 13px;

  margin-top: 27px;
  padding: 17px 18px;

  border-left: 3px solid #ff8f1f;

  background: rgba(255, 143, 31, 0.07);
}


.lr-common-highlight-icon {
  display: grid;
  place-items: center;

  flex: 0 0 44px;

  width: 44px;
  height: 44px;

  border-radius: 50%;

  background: #172435;
  color: #ff8f1f;

  font-size: 1rem;
}


.lr-common-highlight>div:last-child {
  display: flex;
  flex-direction: column;
}


.lr-common-highlight small {
  color: #969ba1;

  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 0.56rem;
  font-weight: 800;

  letter-spacing: 0.09em;
}


.lr-common-highlight strong {
  margin-top: 3px;

  color: #172435;

  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
}


/* =========================================================
   QUESTION CARDS
========================================================= */

.lr-common-card {
  position: relative;

  height: 100%;
  min-height: 235px;

  padding: 25px 23px;

  overflow: hidden;

  border: 1px solid rgba(23, 36, 53, 0.09);
  border-radius: 16px;

  background: #f7f8fa;

  transition:
    transform 280ms ease,
    box-shadow 280ms ease,
    border-color 280ms ease,
    background 280ms ease;
}


.lr-common-card:hover {
  transform: translateY(-6px);

  border-color: rgba(255, 143, 31, 0.34);

  background: #ffffff;

  box-shadow:
    0 17px 35px rgba(23, 36, 53, 0.10);
}


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

.lr-common-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 20px;
}


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

.lr-common-number {
  color: rgba(23, 36, 53, 0.22);

  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 2rem;
  font-weight: 900;

  line-height: 1;

  transition: color 280ms ease;
}


.lr-common-card:hover .lr-common-number {
  color: #ff8f1f;
}


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

.lr-common-card-icon {
  display: grid;
  place-items: center;

  width: 47px;
  height: 47px;

  border-radius: 13px;

  background: #172435;
  color: #ff8f1f;

  font-size: 1rem;

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


.lr-common-card:hover .lr-common-card-icon {
  background: #ff8f1f;
  color: #ffffff;

  transform: rotate(4deg);
}


/* =========================================================
   CARD HEADING
========================================================= */

.lr-common-card h3 {
  margin: 0 0 10px;

  color: #172435;

  font-family: "Roboto Condensed", Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;

  line-height: 1.25;
}


/* =========================================================
   CARD PARAGRAPH
========================================================= */

.lr-common-card p {
  margin: 0;

  color: #69717a;

  font-family: "Roboto", Arial, sans-serif;
  font-size: 0.74rem;

  line-height: 1.7;
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

  .lr-common-wrap {
    padding: 45px;
  }


  .lr-common-card {
    min-height: 245px;
  }

}


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

@media (max-width: 991.98px) {

  .lr-common-section {
    padding: 70px 0;
  }


  .lr-common-wrap {
    padding: 40px;
  }


  .lr-common-content {
    max-width: 100%;
  }


  .lr-common-card {
    min-height: 220px;
  }

}


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

@media (max-width: 767.98px) {

  .lr-common-section {
    padding: 55px 0;
  }


  .lr-common-wrap {
    padding: 32px 24px;
    border-radius: 18px;
  }


  .lr-common-title {
    font-size: 2.4rem;
  }


  .lr-common-card {
    min-height: auto;
  }

}


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

@media (max-width: 480px) {

  .lr-common-wrap {
    padding: 28px 20px;
  }


  .lr-common-title {
    font-size: 2.05rem;
  }


  .lr-common-text {
    font-size: 0.82rem;
  }


  .lr-common-card {
    padding: 21px 18px;
  }


  .lr-common-highlight {
    padding: 15px;
  }

}

/* 0000000000000000000000000000000000000000000000000000000000000000 */
/* =========================================================
   FAQ SECTION
========================================================= */
/* =========================================================
   LUXURY FAQ SECTION
========================================================= */

.lr-lux-faq-section {
  --faq-navy: #172435;
  --faq-navy-dark: #0d1724;
  --faq-navy-soft: #223247;

  --faq-orange: #ff8f1f;
  --faq-orange-dark: #e8780d;
  --faq-orange-light: #ffa142;

  --faq-white: #ffffff;

  --faq-light: #f6f7f9;
  --faq-light-soft: #fafbfc;

  --faq-text: #20282f;
  --faq-gray: #69717a;

  --faq-border: rgba(23, 36, 53, 0.10);

  --faq-transition:
    380ms cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;

  padding: 105px 0;

  overflow: hidden;

  isolation: isolate;

  background:
    linear-gradient(135deg,
      #f5f6f8 0%,
      #ffffff 55%,
      #f4f5f7 100%);
}


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

.lr-lux-faq-section::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -3;

  opacity: .45;

  pointer-events: none;

  background-image:
    linear-gradient(rgba(23, 36, 53, .025) 1px,
      transparent 1px),
    linear-gradient(90deg,
      rgba(23, 36, 53, .025) 1px,
      transparent 1px);

  background-size:
    52px 52px;
}


/* =========================================================
   AMBIENT GLOW
========================================================= */

.lr-lux-faq-section::after {
  content: "";

  position: absolute;

  z-index: -2;

  top: -220px;

  right: -200px;

  width: 620px;

  height: 620px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(circle,
      rgba(255, 143, 31, .14),
      rgba(255, 143, 31, .035) 48%,
      transparent 72%);

  animation:
    faqGlow 7s ease-in-out infinite;
}


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

.lr-lux-faq-section .container {
  position: relative;

  z-index: 3;

  max-width: 1240px;
}


/* =========================================================
   PALE REPAIR SHAPES
========================================================= */

.lr-lux-faq-shapes {
  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;
}


.lr-lux-faq-shapes i {
  position: absolute;

  opacity: .12;

  pointer-events: none;
}


.lr-lux-faq-wrench {
  top: 8%;

  left: 2%;

  color: var(--faq-orange);

  font-size: 6rem;

  animation:
    faqWrench 8s ease-in-out infinite;
}


.lr-lux-faq-gear {
  right: -50px;

  bottom: 6%;

  color: var(--faq-navy);

  font-size: 10rem;

  animation:
    faqGear 20s linear infinite;
}


.lr-lux-faq-tools {
  left: 3%;

  bottom: 8%;

  color: var(--faq-navy);

  font-size: 5rem;

  animation:
    faqTools 8s ease-in-out infinite;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.lr-lux-faq-side {
  position: relative;

  width: 100%;

  max-width: 465px;

  height: 100%;

  min-height: 690px;

  margin:
    0 auto;

  padding-bottom: 55px;
}


/* =========================================================
   ARCH PANEL
========================================================= */

.lr-lux-faq-arch {
  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: center;

  width: 100%;

  min-height: 665px;

  padding:
    105px 42px 50px;

  overflow: hidden;

  border-radius:
    230px 230px 35px 35px;

  background:
    linear-gradient(145deg,
      var(--faq-navy) 0%,
      var(--faq-navy-dark) 100%);

  box-shadow:
    0 30px 65px rgba(23, 36, 53, .19);
}


/* INNER ARCH */

.lr-lux-faq-arch::before {
  content: "";

  position: absolute;

  inset: 14px;

  z-index: 1;

  border:
    2px solid rgba(255, 143, 31, .42);

  border-radius:
    215px 215px 26px 26px;

  pointer-events: none;
}


/* DECORATIVE LINES */

.lr-lux-faq-arch::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: .28;

  background:
    repeating-linear-gradient(135deg,
      transparent 0,
      transparent 34px,
      rgba(255, 255, 255, .025) 35px,
      transparent 36px);
}


/* =========================================================
   LARGE QUESTION ICON
========================================================= */

.lr-lux-faq-arch-icon {
  position: absolute;

  z-index: 4;

  top: 34px;

  left: 50%;

  display: grid;

  place-items: center;

  width: 76px;

  height: 76px;

  border:
    7px solid var(--faq-navy);

  border-radius: 50%;

  background:
    var(--faq-orange);

  color:
    var(--faq-white);

  font-size: 1.75rem;

  box-shadow:
    0 14px 28px rgba(255, 143, 31, .30);

  transform:
    translateX(-50%);

  animation:
    faqQuestionFloat 3s ease-in-out infinite;
}


/* =========================================================
   SIDE EYEBROW
========================================================= */

.lr-lux-faq-side-eyebrow {
  position: relative;

  z-index: 3;

  margin-bottom: 15px;

  color:
    var(--faq-orange-light);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: .7rem;

  font-weight: 800;

  text-align: center;

  letter-spacing: .11em;
}


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

.lr-lux-faq-arch h2 {
  position: relative;

  z-index: 3;

  margin: 0;

  color:
    var(--faq-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size:
    clamp(2.6rem,
      4vw,
      3.6rem);

  font-weight: 900;

  line-height: .96;

  text-align: center;

  letter-spacing: -.035em;
}


.lr-lux-faq-arch h2 span {
  display: block;

  margin-top: 4px;

  color:
    var(--faq-orange);
}


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

.lr-lux-faq-arch>p {
  position: relative;

  z-index: 3;

  margin:
    23px 0 0;

  color:
    rgba(255, 255, 255, .74);

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

  font-size: .98rem;

  line-height: 1.75;

  text-align: center;
}


.lr-lux-faq-arch>p strong {
  color:
    var(--faq-white);
}


/* =========================================================
   HIGHLIGHTS
========================================================= */

.lr-lux-faq-highlights {
  position: relative;

  z-index: 3;

  display: flex;

  flex-direction: column;

  gap: 10px;

  margin-top: 27px;
}


.lr-lux-faq-highlight {
  display: flex;

  align-items: center;

  gap: 11px;

  padding:
    10px 14px 10px 9px;

  border:
    1px solid rgba(255, 255, 255, .10);

  border-radius: 50px;

  background:
    rgba(255, 255, 255, .055);

  transition:
    transform var(--faq-transition),
    background var(--faq-transition),
    border-color var(--faq-transition);
}


.lr-lux-faq-highlight:hover {
  border-color:
    rgba(255, 143, 31, .38);

  background:
    rgba(255, 143, 31, .08);

  transform:
    translateX(5px);
}


.lr-lux-faq-highlight>span {
  display: grid;

  flex: 0 0 42px;

  place-items: center;

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background:
    rgba(255, 143, 31, .13);

  color:
    var(--faq-orange);
}


.lr-lux-faq-highlight>div {
  display: flex;

  flex-direction: column;
}


.lr-lux-faq-highlight small {
  color:
    rgba(255, 255, 255, .42);

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

  font-size: .53rem;

  font-weight: 700;

  letter-spacing: .07em;
}


.lr-lux-faq-highlight strong {
  margin-top: 2px;

  color:
    var(--faq-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: .87rem;

  font-weight: 800;
}


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

.lr-lux-faq-phone {
  position: relative;

  z-index: 3;

  display: flex;

  align-items: center;

  gap: 11px;

  margin-top: 23px;

  padding:
    7px 16px 7px 8px;

  border:
    1px solid rgba(255, 143, 31, .30);

  border-radius: 50px;

  background:
    rgba(255, 143, 31, .08);

  color:
    var(--faq-white);

  text-decoration: none;

  transition:
    background var(--faq-transition),
    transform var(--faq-transition),
    border-color var(--faq-transition);
}


.lr-lux-faq-phone:hover {
  border-color:
    var(--faq-orange);

  background:
    rgba(255, 143, 31, .13);

  color:
    var(--faq-white);

  transform:
    translateY(-4px);
}


.lr-lux-faq-phone-icon {
  position: relative;

  display: grid;

  flex: 0 0 46px;

  place-items: center;

  width: 46px;

  height: 46px;

  border-radius: 50%;

  background:
    var(--faq-orange);

  color:
    var(--faq-white);
}


.lr-lux-faq-phone-icon::before {
  content: "";

  position: absolute;

  inset: -5px;

  border:
    2px solid rgba(255, 143, 31, .35);

  border-radius: 50%;

  animation:
    faqPhoneRing 2s ease-out infinite;
}


.lr-lux-faq-phone>span:last-child {
  display: flex;

  flex-direction: column;
}


.lr-lux-faq-phone small {
  color:
    rgba(255, 255, 255, .47);

  font-size: .55rem;

  font-weight: 700;

  letter-spacing: .06em;
}


.lr-lux-faq-phone strong {
  margin-top: 2px;

  color:
    var(--faq-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1.12rem;

  font-weight: 900;
}


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

.lr-lux-faq-big-number {
  position: absolute;

  z-index: 2;

  right: 26px;

  bottom: 15px;

  color:
    rgba(255, 255, 255, .055);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 7rem;

  font-weight: 900;

  line-height: 1;
}


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

.lr-lux-faq-floating-badge {
  position: absolute;

  z-index: 8;

  right: -18px;

  bottom: 0;

  display: flex;

  align-items: center;

  gap: 10px;

  padding:
    11px 16px;

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

  border-radius: 50px;

  background:
    var(--faq-white);

  box-shadow:
    0 16px 35px rgba(23, 36, 53, .14);

  animation:
    faqBadgeFloat 3.5s ease-in-out infinite;
}


.lr-lux-faq-floating-badge>i {
  display: grid;

  place-items: center;

  width: 39px;

  height: 39px;

  border-radius: 50%;

  background:
    rgba(255, 143, 31, .11);

  color:
    var(--faq-orange);
}


.lr-lux-faq-floating-badge>span {
  display: flex;

  flex-direction: column;
}


.lr-lux-faq-floating-badge small {
  color:
    var(--faq-gray);

  font-size: .51rem;

  font-weight: 700;
}


.lr-lux-faq-floating-badge strong {
  color:
    var(--faq-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: .8rem;

  font-weight: 800;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.lr-lux-faq-content {
  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 100%;
}


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

.lr-lux-faq-header {
  margin-bottom: 27px;
}


.lr-lux-faq-pretitle {
  display: flex;

  align-items: center;

  gap: 11px;

  margin-bottom: 12px;

  color:
    var(--faq-orange-dark);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: .72rem;

  font-weight: 800;

  letter-spacing: .11em;
}


.lr-lux-faq-pretitle>span {
  display: block;

  width: 38px;

  height: 3px;

  background:
    var(--faq-orange);

  animation:
    faqPretitle 3s ease-in-out infinite;
}


.lr-lux-faq-header h3 {
  max-width: 650px;

  margin: 0;

  color:
    var(--faq-navy);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

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

  font-weight: 900;

  line-height: .99;

  letter-spacing: -.03em;
}


.lr-lux-faq-header h3 span {
  display: block;

  color:
    var(--faq-orange);
}


.lr-lux-faq-header>p {
  max-width: 650px;

  margin:
    17px 0 0;

  color:
    var(--faq-gray);

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

  font-size: 1rem;

  line-height: 1.75;
}


/* =========================================================
   FAQ ITEM
========================================================= */

.lr-lux-faq-item {
  position: relative;

  margin-bottom: 13px;

  overflow: hidden;

  border:
    1px solid rgba(23, 36, 53, .09);

  border-radius:
    50px 18px 18px 50px;

  background:
    var(--faq-white);

  box-shadow:
    0 8px 22px rgba(23, 36, 53, .045);

  transition:
    border-color var(--faq-transition),
    box-shadow var(--faq-transition),
    transform var(--faq-transition);
}


.lr-lux-faq-item:last-of-type {
  margin-bottom: 0;
}


.lr-lux-faq-item:hover {
  border-color:
    rgba(255, 143, 31, .32);

  box-shadow:
    0 15px 32px rgba(23, 36, 53, .08);

  transform:
    translateX(4px);
}


.lr-lux-faq-item[open] {
  border-color:
    rgba(255, 143, 31, .30);

  border-radius:
    28px;

  box-shadow:
    0 18px 38px rgba(23, 36, 53, .09);
}


/* REMOVE DEFAULT MARKER */

.lr-lux-faq-item summary {
  list-style: none;
}


.lr-lux-faq-item summary::-webkit-details-marker {
  display: none;
}


/* =========================================================
   QUESTION SUMMARY
========================================================= */

.lr-lux-faq-item summary {
  position: relative;

  display: flex;

  align-items: center;

  gap: 14px;

  min-height: 76px;

  padding:
    10px 15px 10px 9px;

  cursor: pointer;

  color:
    var(--faq-navy);

  background:
    var(--faq-white);

  transition:
    background var(--faq-transition),
    color var(--faq-transition);
}


.lr-lux-faq-item[open] summary {
  color:
    var(--faq-white);

  background:
    var(--faq-navy);
}


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

.lr-lux-faq-number {
  display: grid;

  flex: 0 0 56px;

  place-items: center;

  width: 56px;

  height: 56px;

  border-radius: 50%;

  background:
    var(--faq-navy);

  color:
    var(--faq-orange);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: .68rem;

  font-weight: 900;

  transition:
    background var(--faq-transition),
    color var(--faq-transition),
    transform var(--faq-transition);
}


.lr-lux-faq-item[open] .lr-lux-faq-number {
  background:
    var(--faq-orange);

  color:
    var(--faq-white);

  transform:
    rotate(-5deg);
}


/* =========================================================
   QUESTION TEXT
========================================================= */

.lr-lux-faq-question {
  flex: 1;

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: 1.05rem;

  font-weight: 800;

  line-height: 1.3;
}


/* =========================================================
   TOGGLE
========================================================= */

.lr-lux-faq-toggle {
  display: grid;

  flex: 0 0 38px;

  place-items: center;

  width: 38px;

  height: 38px;

  border-radius: 50%;

  background:
    rgba(23, 36, 53, .07);

  color:
    var(--faq-navy);

  transition:
    background var(--faq-transition),
    color var(--faq-transition),
    transform var(--faq-transition);
}


.lr-lux-faq-item[open] .lr-lux-faq-toggle {
  background:
    rgba(255, 143, 31, .15);

  color:
    var(--faq-orange);

  transform:
    rotate(45deg);
}


/* =========================================================
   ANSWER
========================================================= */

.lr-lux-faq-answer {
  display: flex;

  align-items: flex-start;

  gap: 16px;

  padding:
    23px 27px;

  border-top:
    1px solid rgba(23, 36, 53, .07);

  background:
    var(--faq-light-soft);
}


/* ANSWER ICON */

.lr-lux-faq-answer-icon {
  display: grid;

  flex: 0 0 44px;

  place-items: center;

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background:
    rgba(255, 143, 31, .11);

  color:
    var(--faq-orange);

  font-size: 1rem;
}


/* ANSWER TEXT */

.lr-lux-faq-answer>div {
  flex: 1;
}


.lr-lux-faq-answer p {
  margin:
    0 0 10px;

  color:
    var(--faq-gray);

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

  font-size: .9rem;

  line-height: 1.78;
}


.lr-lux-faq-answer p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.lr-lux-faq-cta {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  margin-top: 24px;

  padding:
    17px 18px;

  border-radius:
    50px 16px 16px 50px;

  background:
    var(--faq-navy);
}


/* =========================================================
   CTA CONTENT
========================================================= */

.lr-lux-faq-cta-content {
  display: flex;

  align-items: center;

  gap: 11px;
}


.lr-lux-faq-cta-content>span {
  display: grid;

  flex: 0 0 46px;

  place-items: center;

  width: 46px;

  height: 46px;

  border-radius: 50%;

  background:
    rgba(255, 143, 31, .13);

  color:
    var(--faq-orange);
}


.lr-lux-faq-cta-content>div {
  display: flex;

  flex-direction: column;
}


.lr-lux-faq-cta-content small {
  color:
    rgba(255, 255, 255, .43);

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

  font-size: .54rem;

  font-weight: 700;

  letter-spacing: .08em;
}


.lr-lux-faq-cta-content strong {
  margin-top: 2px;

  color:
    var(--faq-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: .91rem;

  font-weight: 800;
}


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

.lr-lux-faq-btn {
  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  min-height: 48px;

  padding:
    0 19px;

  overflow: hidden;

  border-radius: 50px;

  background:
    var(--faq-orange);

  color:
    var(--faq-white);

  font-family:
    "Roboto Condensed",
    Arial,
    sans-serif;

  font-size: .78rem;

  font-weight: 900;

  text-decoration: none;

  white-space: nowrap;

  box-shadow:
    0 10px 22px rgba(255, 143, 31, .22);

  transition:
    background var(--faq-transition),
    transform var(--faq-transition),
    box-shadow var(--faq-transition);
}


.lr-lux-faq-btn::before {
  content: "";

  position: absolute;

  top: -30%;

  left: -60%;

  width: 30%;

  height: 160%;

  background:
    linear-gradient(110deg,
      transparent,
      rgba(255, 255, 255, .4),
      transparent);

  transform:
    skewX(-20deg);

  animation:
    faqButtonShine 3.5s ease-in-out infinite;
}


.lr-lux-faq-btn:hover {
  background:
    var(--faq-orange-dark);

  color:
    var(--faq-white);

  transform:
    translateY(-3px);

  box-shadow:
    0 14px 27px rgba(255, 143, 31, .30);
}


.lr-lux-faq-btn i {
  transition:
    transform var(--faq-transition);
}


.lr-lux-faq-btn:hover i {
  transform:
    translate(3px, -3px);
}


/* =========================================================
   FOCUS
========================================================= */

.lr-lux-faq-item summary:focus-visible,
.lr-lux-faq-phone:focus-visible,
.lr-lux-faq-btn:focus-visible {
  outline:
    3px solid var(--faq-orange);

  outline-offset: 4px;
}


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

@keyframes faqGlow {

  0%,
  100% {
    opacity: .65;

    transform:
      scale(.95);
  }

  50% {
    opacity: 1;

    transform:
      scale(1.08);
  }

}


@keyframes faqWrench {

  0%,
  100% {
    transform:
      translateY(0) rotate(-20deg);
  }

  50% {
    transform:
      translateY(-20px) rotate(-8deg);
  }

}


@keyframes faqGear {

  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }

}


@keyframes faqTools {

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

  50% {
    transform:
      translateY(-18px) rotate(-2deg);
  }

}


@keyframes faqQuestionFloat {

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

  50% {
    transform:
      translateX(-50%) translateY(-7px);
  }

}


@keyframes faqPhoneRing {

  0% {
    opacity: .75;

    transform:
      scale(.9);
  }

  100% {
    opacity: 0;

    transform:
      scale(1.42);
  }

}


@keyframes faqBadgeFloat {

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

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

}


@keyframes faqPretitle {

  0%,
  100% {
    width: 38px;
  }

  50% {
    width: 55px;
  }

}


@keyframes faqButtonShine {

  0%,
  65% {
    left: -60%;
  }

  100% {
    left: 145%;
  }

}


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

@media (min-width: 1400px) {

  .lr-lux-faq-section .container {
    max-width: 1320px;
  }


  .lr-lux-faq-section .row {
    --bs-gutter-x: 5.5rem;
  }


  .lr-lux-faq-side {
    max-width: 490px;
  }


  .lr-lux-faq-arch {
    min-height: 700px;
  }

}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199.98px) {

  .lr-lux-faq-section {
    padding:
      90px 0;
  }


  .lr-lux-faq-section .row {
    --bs-gutter-x: 3.5rem;
  }


  .lr-lux-faq-side {
    max-width: 430px;
  }


  .lr-lux-faq-arch {
    min-height: 655px;

    padding:
      100px 32px 45px;
  }


  .lr-lux-faq-arch h2 {
    font-size:
      3rem;
  }


  .lr-lux-faq-question {
    font-size:
      .98rem;
  }

}


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

@media (max-width: 991.98px) {

  .lr-lux-faq-section {
    padding:
      75px 0;
  }


  .lr-lux-faq-side {
    max-width: 600px;

    min-height: auto;

    margin-bottom: 15px;
  }


  .lr-lux-faq-arch {
    min-height: 600px;

    border-radius:
      300px 300px 35px 35px;
  }


  .lr-lux-faq-arch::before {
    border-radius:
      280px 280px 26px 26px;
  }


  .lr-lux-faq-content {
    max-width: 760px;

    margin:
      0 auto;
  }


  .lr-lux-faq-header h3 {
    font-size:
      clamp(2.5rem,
        6vw,
        3.5rem);
  }

}


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

@media (max-width: 767.98px) {

  .lr-lux-faq-section {
    padding:
      60px 0;
  }


  .lr-lux-faq-side {
    max-width: 530px;
  }


  .lr-lux-faq-arch {
    min-height: 570px;

    padding:
      95px 27px 40px;

    border-radius:
      245px 245px 28px 28px;
  }


  .lr-lux-faq-arch::before {
    border-radius:
      225px 225px 20px 20px;
  }


  .lr-lux-faq-arch h2 {
    font-size:
      2.7rem;
  }


  .lr-lux-faq-header h3 {
    font-size:
      2.65rem;
  }


  .lr-lux-faq-header>p {
    font-size:
      .96rem;
  }


  .lr-lux-faq-item,
  .lr-lux-faq-item[open] {
    border-radius:
      20px;
  }


  .lr-lux-faq-item summary {
    gap: 11px;

    min-height: 72px;

    padding:
      9px 13px 9px 8px;
  }


  .lr-lux-faq-number {
    flex-basis: 50px;

    width: 50px;

    height: 50px;
  }


  .lr-lux-faq-question {
    font-size:
      .94rem;
  }


  .lr-lux-faq-answer {
    padding:
      21px 22px;
  }


  .lr-lux-faq-cta {
    flex-direction:
      column;

    align-items:
      stretch;

    border-radius:
      22px;
  }


  .lr-lux-faq-btn {
    width: 100%;
  }

}


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

@media (max-width: 575.98px) {

  .lr-lux-faq-section {
    padding:
      52px 0;
  }


  .lr-lux-faq-arch {
    min-height: 530px;

    padding:
      90px 20px 35px;

    border-radius:
      215px 215px 24px 24px;
  }


  .lr-lux-faq-arch h2 {
    font-size:
      2.4rem;
  }


  .lr-lux-faq-arch>p {
    font-size:
      .92rem;
  }


  .lr-lux-faq-floating-badge {
    display: none;
  }


  .lr-lux-faq-side {
    padding-bottom: 0;
  }


  .lr-lux-faq-header h3 {
    font-size:
      2.25rem;
  }


  .lr-lux-faq-pretitle {
    font-size:
      .65rem;
  }


  .lr-lux-faq-item summary {
    gap: 9px;

    padding:
      9px 10px 9px 7px;
  }


  .lr-lux-faq-number {
    flex-basis: 44px;

    width: 44px;

    height: 44px;
  }


  .lr-lux-faq-question {
    font-size:
      .87rem;
  }


  .lr-lux-faq-toggle {
    flex-basis: 32px;

    width: 32px;

    height: 32px;

    font-size:
      .75rem;
  }


  .lr-lux-faq-answer {
    gap: 12px;

    padding:
      19px 17px;
  }


  .lr-lux-faq-answer p {
    font-size:
      .84rem;
  }

}


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

@media (max-width: 400px) {

  .lr-lux-faq-arch {
    min-height: 500px;

    padding-left: 17px;

    padding-right: 17px;
  }


  .lr-lux-faq-arch h2 {
    font-size:
      2.18rem;
  }


  .lr-lux-faq-highlight {
    padding-right:
      10px;
  }


  .lr-lux-faq-header h3 {
    font-size:
      2.05rem;
  }


  .lr-lux-faq-number {
    flex-basis: 40px;

    width: 40px;

    height: 40px;
  }


  .lr-lux-faq-question {
    font-size:
      .82rem;
  }


  .lr-lux-faq-answer {
    flex-direction:
      column;
  }

}


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

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

  .lr-lux-faq-section::after,
  .lr-lux-faq-shapes i,
  .lr-lux-faq-arch-icon,
  .lr-lux-faq-phone-icon::before,
  .lr-lux-faq-floating-badge,
  .lr-lux-faq-pretitle>span,
  .lr-lux-faq-btn::before {
    animation:
      none !important;
  }


  .lr-lux-faq-highlight,
  .lr-lux-faq-phone,
  .lr-lux-faq-item,
  .lr-lux-faq-number,
  .lr-lux-faq-toggle,
  .lr-lux-faq-btn,
  .lr-lux-faq-btn i {
    transition:
      none !important;
  }


  .lr-lux-faq-highlight:hover,
  .lr-lux-faq-phone:hover,
  .lr-lux-faq-item:hover,
  .lr-lux-faq-item[open] .lr-lux-faq-number,
  .lr-lux-faq-item[open] .lr-lux-faq-toggle,
  .lr-lux-faq-btn:hover {
    transform:
      none;
  }

}
/* 000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 */

/* =========================================================
   GARAGE DOOR BRANDS MARQUEE
========================================================= */

.lr-brands-section {
  position: relative;
  overflow: hidden;

  padding: 85px 0 80px;

  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(255, 143, 31, 0.09),
      transparent 25%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(255, 143, 31, 0.06),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #0d1724 0%,
      #172435 48%,
      #223247 100%
    );
}


/* =========================================================
   DECORATIVE BACKGROUND
========================================================= */

.lr-brands-decoration {
  position: absolute;
  inset: 0;
  z-index: 0;

  overflow: hidden;

  pointer-events: none;
}


.lr-brands-decoration i {
  position: absolute;

  line-height: 1;

  color: rgba(255, 255, 255, 0.025);
}


.lr-brands-gear {
  top: -95px;
  right: -65px;

  font-size: 310px;

  transform: rotate(18deg);
}


.lr-brands-wrench {
  left: -75px;
  bottom: -100px;

  font-size: 290px;

  transform: rotate(-32deg);
}


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

.lr-brands-heading {
  position: relative;
  z-index: 2;

  margin-bottom: 48px;
}


.lr-brands-pretitle {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  margin-bottom: 15px;

  color: #ff8f1f;

  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: 0.18em;
  text-transform: uppercase;
}


.lr-brands-pretitle span {
  display: block;

  width: 30px;
  height: 2px;

  background: #ff8f1f;
}


.lr-brands-pretitle i {
  font-size: 1rem;
}


.lr-brands-heading h2 {
  margin: 0;

  color: #ffffff;

  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
}


.lr-brands-heading h2 span {
  display: block;

  margin-top: 4px;

  color: #ff8f1f;
}


.lr-brands-heading p {
  max-width: 650px;

  margin:
    18px auto
    0;

  color: rgba(255, 255, 255, 0.72);

  font-size: 1rem;
  line-height: 1.75;
}


/* =========================================================
   MARQUEE WRAPPER
========================================================= */

.lr-brands-marquee {
  position: relative;
  z-index: 2;

  width: 100%;

  overflow: hidden;

  padding: 28px 0;

  border-top:
    1px solid rgba(255, 255, 255, 0.08);

  border-bottom:
    1px solid rgba(255, 255, 255, 0.08);

  background:
    rgba(255, 255, 255, 0.025);
}


/* =========================================================
   LEFT / RIGHT FADE
========================================================= */

.lr-brands-marquee::before,
.lr-brands-marquee::after {
  content: "";

  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;

  width: 130px;

  pointer-events: none;
}


.lr-brands-marquee::before {
  left: 0;

  background:
    linear-gradient(
      90deg,
      #101c2b 0%,
      rgba(16, 28, 43, 0.85) 35%,
      rgba(16, 28, 43, 0) 100%
    );
}


.lr-brands-marquee::after {
  right: 0;

  background:
    linear-gradient(
      270deg,
      #172435 0%,
      rgba(23, 36, 53, 0.85) 35%,
      rgba(23, 36, 53, 0) 100%
    );
}


/* =========================================================
   MOVING TRACK
========================================================= */

.lr-brands-track {
  display: flex;
  align-items: center;

  width: max-content;

  animation:
    lrBrandsScroll 35s linear infinite;

  will-change: transform;
}


/* =========================================================
   EACH 11-LOGO GROUP
========================================================= */

.lr-brands-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;

  gap: 30px;

  padding-right: 30px;
}


/* =========================================================
   LOGO BOX
========================================================= */

.lr-brand-item {
  position: relative;

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

  flex: 0 0 auto;

  width: 210px;
  height: 125px;

  padding: 20px 25px;

  overflow: hidden;

  border:
    1px solid rgba(255, 255, 255, 0.08);

  border-radius: 8px;

  background:
    rgba(255, 255, 255, 0.97);

  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.16);

  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}


/* ORANGE TOP ACCENT */

.lr-brand-item::before {
  content: "";

  position: absolute;
  top: 0;
  left: 50%;

  width: 0;
  height: 3px;

  background: #ff8f1f;

  transform: translateX(-50%);

  transition: width 0.3s ease;
}


/* LOGO IMAGE */

.lr-brand-item img {
  display: block;

  width: 100%;
  max-width: 165px;
  height: 80px;

  object-fit: contain;

  transition:
    transform 0.3s ease,
    opacity 0.3s ease;

  opacity: 0.92;
}


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

.lr-brand-item:hover {
  transform: translateY(-5px);

  border-color:
    rgba(255, 143, 31, 0.55);

  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.24);
}


.lr-brand-item:hover::before {
  width: 100%;
}


.lr-brand-item:hover img {
  transform: scale(1.06);

  opacity: 1;
}


/* PAUSE MARQUEE */

.lr-brands-marquee:hover .lr-brands-track {
  animation-play-state: paused;
}


/* =========================================================
   CONTINUOUS ANIMATION
========================================================= */

@keyframes lrBrandsScroll {

  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }

}


/* =========================================================
   BOTTOM ACCENT
========================================================= */

.lr-brands-bottom-accent {
  position: absolute;
  left: 50%;
  bottom: 0;

  width: 170px;
  height: 4px;

  border-radius: 4px 4px 0 0;

  background:
    linear-gradient(
      90deg,
      #e8780d,
      #ff8f1f,
      #ffa142
    );

  transform: translateX(-50%);
}


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

@media (max-width: 991.98px) {

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


  .lr-brands-heading {
    margin-bottom: 38px;
  }


  .lr-brands-marquee {
    padding: 24px 0;
  }


  .lr-brands-group {
    gap: 24px;

    padding-right: 24px;
  }


  .lr-brand-item {
    width: 185px;
    height: 110px;

    padding: 17px 22px;
  }


  .lr-brand-item img {
    max-width: 145px;
    height: 70px;
  }


  .lr-brands-track {
    animation-duration: 30s;
  }


  .lr-brands-marquee::before,
  .lr-brands-marquee::after {
    width: 80px;
  }

}


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

@media (max-width: 575.98px) {

  .lr-brands-section {
    padding: 58px 0 55px;
  }


  .lr-brands-heading {
    margin-bottom: 30px;

    padding: 0 12px;
  }


  .lr-brands-pretitle {
    gap: 7px;

    font-size: 0.64rem;

    letter-spacing: 0.12em;
  }


  .lr-brands-pretitle span {
    width: 18px;
  }


  .lr-brands-heading h2 {
    font-size: 1.75rem;
  }


  .lr-brands-heading p {
    font-size: 0.9rem;
    line-height: 1.65;
  }


  .lr-brands-marquee {
    padding: 20px 0;
  }


  .lr-brands-group {
    gap: 16px;

    padding-right: 16px;
  }


  .lr-brand-item {
    width: 150px;
    height: 92px;

    padding: 14px 18px;
  }


  .lr-brand-item img {
    max-width: 120px;
    height: 60px;
  }


  .lr-brands-track {
    animation-duration: 26s;
  }


  .lr-brands-marquee::before,
  .lr-brands-marquee::after {
    width: 35px;
  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

  .lr-brands-track {
    animation: none;
  }


  .lr-brand-item,
  .lr-brand-item img,
  .lr-brand-item::before {
    transition: none;
  }

}


/* 000000000000000000000000000000000000000000000000000000000000 */

#lrServicesToggle.active {
  color: var(--orange, #ff8f1f);
}

#lrServicesDropdown.active > #lrServicesToggle::after {
  width: 100%;
}

#lrServicesMenu a.active {
  color: var(--orange, #ff8f1f);
  background: rgba(255, 143, 31, 0.08);
}

#lrServicesMenu a.active strong {
  color: var(--orange, #ff8f1f);
}