* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #030303;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

:root {
  --gold: #f5c400;
  --gold-soft: #ffe477;
  --dark: #050505;
  --gray: #b7b7b7;
}

/* LOADER */

#loader {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.8s ease;
}

#loader img {
  width: 230px;
  animation: loaderPulse 1.5s infinite;
}

@keyframes loaderPulse {
  0% { opacity: .35; transform: scale(.95); }
  50% { opacity: 1; transform: scale(1); }
  100% { opacity: .35; transform: scale(.95); }
}

/* NAVBAR */

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  height: 96px;
  padding: 0 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(245,196,0,.22);
  transition: .45s ease;
}
.logo img {
  width: 200px;
  height: 250px;
  max-height: none;
  object-fit: contain;

  transform: translateY(20px);

  filter: drop-shadow(
    0 0 18px rgba(245, 196, 0, 0.35)
  );
}

nav {
  display: flex;
  gap: 32px;
}

nav a {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
}

nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -9px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: .35s ease;
}

nav a:hover::after {
  width: 100%;
}

.nav-btn {
  padding: 16px 26px;
  background: linear-gradient(135deg, var(--gold), var(--gold-soft), #b8860b);
  color: #000;
  font-weight: 900;
  text-transform: uppercase;
  border-radius: 3px;
  box-shadow: 0 0 30px rgba(245,196,0,.35);
  position: relative;
  overflow: hidden;
}

.nav-btn::before,
.btn-gold::before,
.btn-outline::before,
button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 80%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  transform: skewX(-25deg);
  transition: .8s;
}

.nav-btn:hover::before,
.btn-gold:hover::before,
.btn-outline:hover::before,
button:hover::before {
  left: 140%;
}

/* HERO */

.hero {
  position: relative;
  height: 100vh;
  min-height: 860px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 6%;
}

.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.62) contrast(1.25) saturate(1.15);
  animation: heroZoom 18s infinite alternate ease-in-out;
}

@keyframes heroZoom {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 35%, rgba(245,196,0,.20), transparent 30%),
    radial-gradient(circle at 10% 80%, rgba(245,196,0,.12), transparent 28%),
    linear-gradient(90deg, rgba(0,0,0,.96), rgba(0,0,0,.68), rgba(0,0,0,.20)),
    linear-gradient(0deg, rgba(0,0,0,.95), transparent 60%);
  z-index: 1;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: .18;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 930px;
  padding-top: 95px;
  animation: heroEnter 1.25s ease forwards;
}

@keyframes heroEnter {
  from { opacity: 0; transform: translateY(80px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-tag {
  display: inline-block;
  color: var(--gold);
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 22px;
  text-shadow: 0 0 25px rgba(245,196,0,.65);
}

.hero h1 {
  font-size: clamp(54px, 8vw, 118px);
  line-height: .88;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -5px;
  margin-bottom: 30px;
  text-shadow: 0 0 45px rgba(255,255,255,.18);
}

.hero h1 span {
  display: block;
  background: linear-gradient(90deg, #f5c400, #fff0a8, #b8860b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 28px rgba(245,196,0,.45));
}

.hero p {
  max-width: 770px;
  color: #eeeeee;
  font-size: 22px;
  line-height: 1.75;
}

.hero-buttons {
  display: flex;
  gap: 18px;
  margin-top: 38px;
  flex-wrap: wrap;
}

.btn-gold,
.btn-outline {
  position: relative;
  overflow: hidden;
  padding: 19px 34px;
  border-radius: 3px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: .35s ease;
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-soft), #b8860b);
  color: #000;
  box-shadow: 0 0 35px rgba(245,196,0,.35);
}

.btn-outline {
  border: 1px solid rgba(245,196,0,.8);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
}

.btn-gold:hover,
.btn-outline:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 55px rgba(245,196,0,.28);
}

.hero-badges {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 5px;
}

.hero-badges div {
  padding: 14px 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(245,196,0,.28);
  backdrop-filter: blur(14px);
  font-weight: 800;
  font-size: 14px;
}

.hero-badges i {
  color: var(--gold);
  margin-right: 8px;
}

/* GENERAL SECTIONS */

section {
  padding: 120px 6%;
}

.section-title {
  max-width: 900px;
  margin: 0 auto 70px;
  text-align: center;
}

.section-title span,
.about-content span {
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 3px;
}

.section-title h2,
.about-content h2 {
  font-size: clamp(36px, 5vw, 62px);
  text-transform: uppercase;
  margin: 18px 0;
  line-height: 1;
}

.section-title p {
  color: var(--gray);
  font-size: 18px;
  line-height: 1.7;
}

/* SERVICES */

.services {
  background:
    radial-gradient(circle at top, rgba(245,196,0,.12), transparent 35%),
    #070707;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.service-card {
  min-height: 300px;
  padding: 36px;
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border: 1px solid rgba(245,196,0,.30);
  position: relative;
  overflow: hidden;
  transition: .45s ease;
}

.service-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: .4s;
}

.service-card:hover {
  transform: translateY(-14px);
  background: rgba(245,196,0,.08);
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
}

.service-card:hover::before {
  opacity: 1;
}

.service-card i {
  color: var(--gold);
  font-size: 44px;
  margin-bottom: 25px;
  filter: drop-shadow(0 0 14px rgba(245,196,0,.4));
}

.service-card h3 {
  font-size: 24px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.service-card p {
  color: var(--gray);
  line-height: 1.8;
}

/* ABOUT */

.about {
  background:
    linear-gradient(90deg, rgba(0,0,0,.96), rgba(0,0,0,.72)),
    radial-gradient(circle at right, rgba(245,196,0,.12), transparent 35%),
    #050505;
}

.about-content {
  max-width: 900px;
}

.about-content p {
  color: var(--gray);
  font-size: 19px;
  line-height: 1.85;
  margin-bottom: 20px;
}

.about-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 35px;
}

.about-points div {
  padding: 20px;
  border: 1px solid rgba(245,196,0,.28);
  background: rgba(255,255,255,.035);
  font-weight: 900;
}

.about-points i {
  color: var(--gold);
  margin-right: 10px;
}

/* PROCESS */

.process {
  background: #080808;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.process-grid div {
  padding: 38px;
  border: 1px solid rgba(245,196,0,.28);
  background: rgba(255,255,255,.035);
  transition: .4s;
}

.process-grid div:hover {
  transform: translateY(-10px);
  background: rgba(245,196,0,.08);
}

.process-grid span {
  color: var(--gold);
  font-size: 42px;
  font-weight: 900;
}

.process-grid h3 {
  margin: 22px 0 14px;
  font-size: 23px;
}

.process-grid p {
  color: var(--gray);
  line-height: 1.75;
}

/* PROJECTS */

.projects {
  background: #050505;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.project-card {
  position: relative;
  height: 310px;
  padding: 0;
  overflow: hidden;
  background: #050505;
  border: 1px solid rgba(245, 196, 0, 0.30);
  transition: 0.45s ease;
}

.project-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.project-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 28px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75),
    transparent 55%
  );
}

.project-overlay h3 {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 45px rgba(245, 196, 0, 0.18);
}

.reviews {
  background:
    radial-gradient(circle at center, rgba(245,196,0,.10), transparent 35%),
    #080808;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.review-card {
  padding: 35px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(245,196,0,.28);
}

.stars {
  color: var(--gold);
  font-size: 22px;
  margin-bottom: 20px;
}

.review-card p {
  color: var(--gray);
  line-height: 1.8;
  margin-bottom: 20px;
}

/* CONTACT */

.contact {
  background: #050505;
}

form {
  max-width: 950px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

input,
select,
textarea {
  width: 100%;
  padding: 20px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(245,196,0,.32);
  color: #fff;
  font-family: inherit;
  outline: none;
}

textarea {
  grid-column: span 2;
  min-height: 170px;
}

button {
  position: relative;
  overflow: hidden;
  grid-column: span 2;
  padding: 21px;
  background: linear-gradient(135deg, var(--gold), var(--gold-soft), #b8860b);
  border: none;
  color: #000;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

/* FOOTER */

footer {
  padding: 85px 6%;
  background: #000;
  text-align: center;
  border-top: 1px solid rgba(245,196,0,.22);
}

footer img {
  width: 240px;
  margin-bottom: 24px;
  filter: drop-shadow(0 0 20px rgba(245,196,0,.3));
}

footer p {
  color: var(--gray);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin: 30px 0;
}

.footer-links a {
  font-weight: 800;
  text-transform: uppercase;
}

.copy {
  font-size: 13px;
}

/* FLOATING PHONE */

.floating-call {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 62px;
  height: 62px;
  background: linear-gradient(135deg, var(--gold), var(--gold-soft));
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  font-size: 23px;
  box-shadow: 0 0 35px rgba(245,196,0,.5);
  animation: callPulse 1.8s infinite;
}

@keyframes callPulse {
  0% { box-shadow: 0 0 0 0 rgba(245,196,0,.55); }
  70% { box-shadow: 0 0 0 18px rgba(245,196,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,196,0,0); }
}

/* ANIMATIONS */

.reveal {
  opacity: 0;
  transform: translateY(80px);
  transition: 1s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* MOBILE */

@media (max-width: 1150px) {
  nav {
    display: none;
  }

  .service-grid,
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .project-grid,
  .review-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .navbar {
    height: 78px;
    padding: 0 5%;
  }

  .logo img {
    width: 115px;
  }

  .nav-btn {
    padding: 12px 14px;
    font-size: 11px;
  }

  .hero {
    min-height: 760px;
    padding: 0 5%;
  }

  .hero-content {
    padding-top: 95px;
  }

  .hero h1 {
    letter-spacing: -2px;
  }

  .hero p {
    font-size: 16px;
  }

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

  .btn-gold,
  .btn-outline {
    text-align: center;
  }

  .hero-badges {
    gap: 12px;
  }

  .hero-badges div {
    width: 100%;
  }

  section {
    padding: 85px 5%;
  }

  .service-grid,
  .process-grid,
  .project-grid,
  .review-grid,
  .about-points,
  form {
    grid-template-columns: 1fr;
  }

  textarea,
  button {
    grid-column: span 1;
  }

  .project-card {
    height: 240px;
  }
}.nav-scrolled {
  height: 76px !important;
  background: rgba(0, 0, 0, 0.92) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.65);
}

.reveal {
  opacity: 0;
  transform: translateY(70px);
  transition: 1s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.spotlight {
  position: fixed;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,196,0,.18), transparent 65%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 2;
  mix-blend-mode: screen;
}

.premium-card,
.project-card,
.review-card {
  transform-style: preserve-3d;
  will-change: transform;
}

.hero h1 {
  animation: titleGlow 3s infinite alternate;
}

@keyframes titleGlow {
  from {
    text-shadow: 0 0 20px rgba(255,255,255,.12);
  }

  to {
    text-shadow:
      0 0 35px rgba(255,255,255,.25),
      0 0 55px rgba(245,196,0,.25);
  }
}
.service-card{
  position: relative;
  z-index: 10;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.service-card *{
  pointer-events: none;
}.service-grid {
  position: relative;
  z-index: 50;
}

.service-card {
  position: relative;
  z-index: 60;
  pointer-events: auto !important;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.service-card * {
  pointer-events: none;
}
/* ==================================================
   ROOFING HERO — PREMIUM APPLE / TESLA STYLE
================================================== */

.roofing-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding-top: 50px;
  isolation: isolate;
}

.roofing-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  filter:
    brightness(1.05)
    contrast(1.05)
    saturate(1.12);

  transform: scale(1.03);
  z-index: -3;
}

/* Fondo más claro, pero mantiene el texto visible */
.roofing-hero .hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(3, 6, 12, 0.68) 0%,
      rgba(3, 6, 12, 0.43) 42%,
      rgba(3, 6, 12, 0.12) 75%,
      rgba(3, 6, 12, 0.05) 100%
    );

  pointer-events: none;
  z-index: -2;
}

/* Glow elegante detrás del contenido */
.roofing-hero::after {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  left: -220px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(255, 203, 30, 0.18) 0%,
    rgba(255, 203, 30, 0.05) 40%,
    transparent 70%
  );

  filter: blur(10px);
  pointer-events: none;
  z-index: -1;
}

.roofing-hero .hero-content {
  max-width: 850px;
  position: relative;
  z-index: 2;
}

/* Texto superior */
.roofing-hero .hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: #ffd54a;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;

  margin-bottom: 24px;

  text-shadow:
    0 0 12px rgba(255, 205, 40, 0.28);
}

/* Título principal */
.roofing-hero h1 {
  font-size: clamp(64px, 8vw, 125px);
  line-height: 0.88;
  letter-spacing: -5px;
  font-weight: 900;
  text-transform: uppercase;
  color: #ffffff;

  margin-bottom: 28px;

  text-shadow:
    0 5px 25px rgba(0, 0, 0, 0.38),
    0 0 25px rgba(255, 255, 255, 0.08);
}

/* Parte amarilla del título */
.roofing-hero h1 span {
  display: block;

  background: linear-gradient(
    180deg,
    #fff6a6 0%,
    #ffd72f 35%,
    #f4b900 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 7px 22px rgba(0, 0, 0, 0.28),
    0 0 30px rgba(255, 200, 0, 0.28);
}

/* Descripción */
.roofing-hero p {
  max-width: 720px;

  color: rgba(255, 255, 255, 0.96);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.75;

  margin-bottom: 34px;

  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.38);
}

/* Área de botones */
.roofing-hero .hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 34px;
}

/* Botón amarillo */
.roofing-hero .btn-gold {
  position: relative;
  overflow: hidden;

  padding: 18px 30px;
  border-radius: 4px;

  background: linear-gradient(
    135deg,
    #ffe45f 0%,
    #ffd028 45%,
    #f2b600 100%
  );

  color: #090909;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;

  border: 1px solid rgba(255, 234, 120, 0.65);

  box-shadow:
    0 15px 35px rgba(245, 190, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);

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

.roofing-hero .btn-gold::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;

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

  transform: skewX(-20deg);
  transition: left 0.65s ease;
}

.roofing-hero .btn-gold:hover {
  transform: translateY(-4px);

  box-shadow:
    0 20px 48px rgba(245, 190, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.roofing-hero .btn-gold:hover::before {
  left: 150%;
}

/* Botón transparente */
.roofing-hero .btn-outline {
  padding: 18px 30px;
  border-radius: 4px;

  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;

  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;

  border: 1px solid rgba(255, 218, 70, 0.75);
  backdrop-filter: blur(12px);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.18);

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

.roofing-hero .btn-outline:hover {
  transform: translateY(-4px);
  background: rgba(255, 210, 35, 0.14);
  border-color: #ffd528;
}

/* Badges inferiores */
.roofing-hero .hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

.roofing-hero .hero-badges div {
  display: flex;
  align-items: center;
  gap: 9px;

  padding: 13px 19px;

  color: rgba(255, 255, 255, 0.95);
  font-size: 12px;
  font-weight: 800;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.10),
      rgba(255, 255, 255, 0.035)
    );

  border: 1px solid rgba(255, 212, 45, 0.34);
  border-radius: 3px;

  backdrop-filter: blur(14px);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.roofing-hero .hero-badges i {
  color: #ffd52f;
  filter: drop-shadow(0 0 8px rgba(255, 205, 30, 0.40));
}

/* Animación inicial */
.roofing-hero .hero-tag,
.roofing-hero h1,
.roofing-hero p,
.roofing-hero .hero-buttons,
.roofing-hero .hero-badges {
  animation: roofingFadeUp 0.9s ease both;
}

.roofing-hero h1 {
  animation-delay: 0.08s;
}

.roofing-hero p {
  animation-delay: 0.16s;
}

.roofing-hero .hero-buttons {
  animation-delay: 0.24s;
}

.roofing-hero .hero-badges {
  animation-delay: 0.32s;
}

@keyframes roofingFadeUp {
  from {
    opacity: 0;
    transform: translateY(35px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ajustes para celular */
@media (max-width: 700px) {
  .roofing-hero {
    min-height: 760px;
    padding: 120px 6% 55px;
  }

  .roofing-hero video {
    object-position: 62% center;
  }

  .roofing-hero .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(3, 6, 12, 0.73),
        rgba(3, 6, 12, 0.40)
      );
  }

  .roofing-hero h1 {
    font-size: 54px;
    letter-spacing: -2px;
  }

  .roofing-hero p {
    font-size: 16px;
    line-height: 1.65;
  }

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

  .roofing-hero .btn-gold,
  .roofing-hero .btn-outline {
    text-align: center;
  }

  .roofing-hero .hero-badges {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.service-card {
    display: block;
    padding: 28px 22px 32px;
    background: linear-gradient(145deg, #111, #080808);
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: 18px;
    color: white;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.4s ease, border-color 0.4s ease,
        box-shadow 0.4s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: #d4af37;
    box-shadow: 0 20px 45px rgba(212, 175, 55, 0.22);
}

.service-image {
    width: 190px;
    height: 190px;
    margin: 0 auto 25px;
    overflow: hidden;
    border: 2px solid #d4af37;
    border-radius: 50%;
    box-shadow:
        0 0 20px rgba(212, 175, 55, 0.45),
        0 0 50px rgba(212, 175, 55, 0.15);
}

.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.service-card:hover .service-image img {
    transform: scale(1.12);
}

.service-card h3 {
    margin: 0 0 15px;
    color: white;
    font-size: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.service-card p {
    margin: 0;
    color: #d2d2d2;
    line-height: 1.7;
}

.learn-more {
    display: inline-block;
    margin-top: 22px;
    color: #d4af37;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 600px) {
    .service-image {
        width: 160px;
        height: 160px;
    }
}
/* =====================================================
   PREMIUM ABOUT SECTION
===================================================== */

.about-premium {
  position: relative;
  overflow: hidden;
  padding: 110px 6% 0;
  background:
    radial-gradient(
      circle at 80% 35%,
      rgba(245, 196, 0, 0.09),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #050505 0%,
      #0b0b0d 50%,
      #050505 100%
    );
  border-top: 1px solid rgba(245, 196, 0, 0.22);
  border-bottom: 1px solid rgba(245, 196, 0, 0.22);
}

.about-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  pointer-events: none;

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

  background-size: 70px 70px;
}

.about-premium-grid {
  position: relative;
  z-index: 2;
  max-width: 1450px;
  margin: 0 auto 85px;

  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(500px, 1.1fr);
  gap: 70px;
  align-items: center;
}

/* FOTO */

.about-photo-side {
  position: relative;
  min-height: 650px;
}

.about-photo-frame {
  position: relative;
  height: 650px;
  overflow: hidden;
  border: 1px solid rgba(255, 207, 45, 0.75);

  box-shadow:
    0 0 0 1px rgba(255, 207, 45, 0.12),
    0 30px 70px rgba(0, 0, 0, 0.5),
    0 0 45px rgba(245, 196, 0, 0.1);
}

.about-photo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(0, 0, 0, 0.72) 100%
    );
}

.about-photo-frame::after {
  content: "";
  position: absolute;
  top: -20%;
  left: -60%;
  z-index: 2;

  width: 32%;
  height: 150%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 224, 110, 0.22),
    transparent
  );

  transform: rotate(18deg);
  transition: left 0.9s ease;
  pointer-events: none;
}

.about-photo-frame:hover::after {
  left: 135%;
}

.about-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  filter:
    brightness(0.82)
    contrast(1.08)
    saturate(0.9);

  transition:
    transform 0.9s ease,
    filter 0.9s ease;
}

.about-photo-frame:hover img {
  transform: scale(1.055);

  filter:
    brightness(0.92)
    contrast(1.05)
    saturate(1);
}

/* CUADRO SOBRE LA FOTO */

.experience-box {
  position: absolute;
  z-index: 5;
  left: -38px;
  bottom: 35px;

  width: 230px;
  min-height: 245px;
  padding: 32px 26px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background:
    linear-gradient(
      145deg,
      rgba(19, 19, 21, 0.96),
      rgba(4, 4, 5, 0.98)
    );

  border: 1px solid rgba(245, 196, 0, 0.58);

  box-shadow:
    0 25px 55px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(18px);
}

.experience-box strong {
  color: #ffffff;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: 1px;
}

.experience-box span {
  margin-top: 5px;

  color: #f5c400;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 1px;
}

.experience-box small {
  margin-top: 10px;

  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
}

.experience-stars {
  margin-top: 25px;

  color: #f5c400;
  font-size: 18px;
  letter-spacing: 5px;

  text-shadow: 0 0 18px rgba(245, 196, 0, 0.5);
}

/* INFORMACIÓN */

.about-info-side {
  position: relative;
}

.about-small-title {
  display: inline-block;
  margin-bottom: 16px;

  color: #f5c400;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;

  text-shadow: 0 0 18px rgba(245, 196, 0, 0.3);
}

.about-info-side h2 {
  margin: 0 0 27px;

  color: #ffffff;
  font-size: clamp(55px, 5.2vw, 88px);
  font-weight: 900;
  line-height: 0.94;
  letter-spacing: -4px;
  text-transform: uppercase;

  text-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
}

.about-info-side h2 span {
  display: block;

  background: linear-gradient(
    180deg,
    #ffe982 0%,
    #f5c400 48%,
    #b98100 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-info-side > p {
  max-width: 760px;
  margin: 0 0 19px;

  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
}

/* TARJETAS */

.about-feature-grid {
  margin-top: 37px;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}

.about-feature {
  min-height: 108px;
  padding: 19px;

  display: flex;
  align-items: center;
  gap: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.016)
    );

  border: 1px solid rgba(245, 196, 0, 0.42);

  box-shadow:
    0 13px 30px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.about-feature:hover {
  transform: translateY(-7px);

  background:
    linear-gradient(
      145deg,
      rgba(245, 196, 0, 0.13),
      rgba(255, 255, 255, 0.025)
    );

  border-color: #f5c400;

  box-shadow:
    0 20px 38px rgba(0, 0, 0, 0.3),
    0 0 25px rgba(245, 196, 0, 0.1);
}

.about-feature i {
  flex: 0 0 42px;

  color: #f5c400;
  font-size: 30px;
  text-align: center;

  filter: drop-shadow(0 0 9px rgba(245, 196, 0, 0.35));
}

.about-feature div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.about-feature strong {
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.5px;
}

.about-feature span {
  color: rgba(255, 255, 255, 0.57);
  font-size: 10px;
  line-height: 1.45;
}

/* BOTONES */

.about-premium-buttons {
  margin-top: 27px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}

.about-gold-button,
.about-outline-button {
  min-height: 65px;
  padding: 18px 25px;

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

  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;

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

.about-gold-button {
  color: #090909;

  background: linear-gradient(
    135deg,
    #ffe46b,
    #f5c400 50%,
    #c78d00
  );

  border: 1px solid rgba(255, 237, 148, 0.65);

  box-shadow:
    0 14px 32px rgba(245, 196, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.about-gold-button:hover {
  transform: translateY(-5px);

  box-shadow:
    0 22px 45px rgba(245, 196, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.about-outline-button {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(245, 196, 0, 0.55);
}

.about-outline-button:hover {
  transform: translateY(-5px);
  background: rgba(245, 196, 0, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.26);
}

/* BARRA INFERIOR */

.about-stats {
  position: relative;
  z-index: 2;

  margin: 0 -6%;
  padding: 40px 7%;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025),
      rgba(0, 0, 0, 0.35)
    );

  border-top: 1px solid rgba(245, 196, 0, 0.28);
}

.about-stat {
  min-height: 78px;
  padding: 0 32px;

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

  border-right: 1px solid rgba(245, 196, 0, 0.2);
}

.about-stat:last-child {
  border-right: none;
}

.about-stat i {
  color: #f5c400;
  font-size: 38px;

  filter: drop-shadow(0 0 12px rgba(245, 196, 0, 0.3));
}

.about-stat div {
  display: flex;
  flex-direction: column;
}

.about-stat strong {
  color: #f5c400;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
}

.about-stat span {
  margin-top: 4px;

  color: rgba(255, 255, 255, 0.67);
  font-size: 11px;
  font-weight: 600;
}

/* TABLET */

@media (max-width: 1150px) {
  .about-premium-grid {
    grid-template-columns: 1fr;
    gap: 65px;
  }

  .about-photo-side {
    max-width: 800px;
    width: 100%;
    margin: auto;
  }

  .about-info-side {
    max-width: 850px;
    margin: auto;
  }

  .about-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 30px;
  }

  .about-stat:nth-child(2) {
    border-right: none;
  }
}

/* CELULAR */

@media (max-width: 700px) {
  .about-premium {
    padding: 80px 5% 0;
  }

  .about-premium-grid {
    gap: 55px;
    margin-bottom: 65px;
  }

  .about-photo-side {
    min-height: 480px;
  }

  .about-photo-frame {
    height: 480px;
  }

  .experience-box {
    left: 15px;
    bottom: 15px;

    width: 190px;
    min-height: 195px;
    padding: 24px 20px;
  }

  .experience-box strong {
    font-size: 20px;
  }

  .experience-box span {
    font-size: 25px;
  }

  .about-info-side h2 {
    font-size: 48px;
    line-height: 0.96;
    letter-spacing: -2px;
  }

  .about-info-side > p {
    font-size: 15px;
    line-height: 1.7;
  }

  .about-feature-grid {
    grid-template-columns: 1fr;
  }

  .about-feature {
    min-height: 95px;
  }

  .about-premium-buttons {
    grid-template-columns: 1fr;
  }

  .about-stats {
    grid-template-columns: 1fr;
    padding: 30px 7%;
  }

  .about-stat,
  .about-stat:nth-child(2) {
    padding: 25px 5px;
    justify-content: flex-start;

    border-right: none;
    border-bottom: 1px solid rgba(245, 196, 0, 0.18);
  }

  .about-stat:last-child {
    border-bottom: none;
  }
}
/* =====================================================
   HERO HOME — PREMIUM UPGRADE
===================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 110px 6% 45px;
  background: #050505;
}

/* VIDEO */

.hero > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;

  filter:
    brightness(0.82)
    contrast(1.08)
    saturate(1.08);

  transform: scale(1.02);
}

/* OSCURECER SOLO DETRÁS DEL TEXTO */

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.93) 0%,
      rgba(0, 0, 0, 0.76) 34%,
      rgba(0, 0, 0, 0.30) 62%,
      rgba(0, 0, 0, 0.06) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.30) 0%,
      transparent 35%,
      rgba(0, 0, 0, 0.52) 100%
    );
}

/* INFORMACIÓN */

.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 700px;
  padding-top: 15px;
  margin: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;

  animation: premiumHeroEnter 1.15s ease forwards;
}

@keyframes premiumHeroEnter {
  from {
    opacity: 0;
    transform: translateY(45px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* TEXTO PEQUEÑO DORADO */

.hero-tag {
  margin-bottom: 18px;
  padding-left: 55px;
  position: relative;

  color: #ffd329;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 3.5px;
  text-transform: uppercase;

  text-shadow: 0 0 20px rgba(255, 205, 0, 0.45);
}

.hero-tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;

  width: 40px;
  height: 2px;

  background: linear-gradient(90deg, #ffd329, transparent);
  transform: translateY(-50%);
}

/* TÍTULO */

.hero h1 {
  max-width: 680px;
  margin: 0 0 24px;

  color: #ffffff;
  font-size: clamp(58px, 7.2vw, 108px);
  font-weight: 950;
  line-height: 0.84;
  letter-spacing: -5px;
  text-transform: uppercase;

  text-shadow:
    0 8px 28px rgba(0, 0, 0, 0.75),
    0 0 35px rgba(255, 255, 255, 0.08);
}

.hero h1 span {
  display: block;

  background: linear-gradient(
    180deg,
    #fff087 0%,
    #ffd000 48%,
    #c58900 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  filter: drop-shadow(0 8px 20px rgba(255, 196, 0, 0.22));
}

/* DESCRIPCIÓN */

.hero-content > p {
  max-width: 610px;
  margin: 0 0 30px;

  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(15px, 1.35vw, 19px);
  font-weight: 500;
  line-height: 1.65;

  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.8);
}

/* BOTONES */

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 28px;
}

.hero-buttons a {
  min-width: 195px;
  min-height: 58px;
  padding: 16px 25px;

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

  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-decoration: none;
  text-transform: uppercase;

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

.hero-buttons a:hover {
  transform: translateY(-5px);
}

.hero-buttons .btn-gold {
  color: #080808;

  background: linear-gradient(
    135deg,
    #ffe66e,
    #ffd000 48%,
    #c98b00
  );

  border: 1px solid rgba(255, 240, 158, 0.8);

  box-shadow:
    0 12px 35px rgba(255, 196, 0, 0.27),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.hero-buttons .btn-gold:hover {
  box-shadow:
    0 20px 45px rgba(255, 196, 0, 0.43),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.hero-buttons .btn-outline {
  color: #ffffff;
  background: rgba(10, 10, 10, 0.28);
  border: 1px solid rgba(255, 208, 0, 0.78);
  backdrop-filter: blur(8px);
}

.hero-buttons .btn-outline:hover {
  background: rgba(255, 208, 0, 0.12);
}

/* CUADROS INFERIORES */

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-badges > div {
  min-height: 44px;
  padding: 10px 16px;

  display: flex;
  align-items: center;
  gap: 9px;

  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 800;

  background: rgba(5, 5, 5, 0.38);
  border: 1px solid rgba(255, 208, 0, 0.38);
  backdrop-filter: blur(12px);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 25px rgba(0, 0, 0, 0.18);
}

.hero-badges i {
  color: #ffd000;
  filter: drop-shadow(0 0 7px rgba(255, 208, 0, 0.55));
}

/* TABLET Y CELULAR */

@media (max-width: 800px) {
  .hero {
    min-height: 100svh;
    padding: 120px 7% 45px;
    align-items: flex-end;
  }

  .hero > video {
    object-position: 62% center;
  }

  .hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.18) 0%,
        rgba(0, 0, 0, 0.56) 38%,
        rgba(0, 0, 0, 0.96) 100%
      );
  }

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

  .hero h1 {
    font-size: clamp(52px, 15vw, 78px);
    line-height: 0.88;
    letter-spacing: -3px;
  }

  .hero-content > p {
    max-width: 100%;
    font-size: 15px;
  }

  .hero-buttons {
    width: 100%;
  }

  .hero-buttons a {
    flex: 1 1 100%;
    width: 100%;
  }

  .hero-badges {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
}
/* =====================================================
   HERO TITLE — PREMIUM METALLIC TYPOGRAPHY
===================================================== */

.hero h1 {
  position: relative;
  max-width: 720px;
  margin: 0 0 26px;

  font-family: "Montserrat", sans-serif;
  font-size: clamp(60px, 7vw, 108px);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -6px;
  text-transform: uppercase;

  /* Plata/blanco metálico */
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f8f8f8 28%,
    #bdbdbd 58%,
    #ffffff 78%,
    #8d8d8d 100%
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  filter:
    drop-shadow(0 5px 0 rgba(0, 0, 0, 0.48))
    drop-shadow(0 15px 22px rgba(0, 0, 0, 0.65));

  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.18);
}

/* La palabra EXTERIOR */

.hero h1 span {
  position: relative;
  display: block;
  width: fit-content;
  padding-right: 12px;

  background: linear-gradient(
    110deg,
    #8c5c00 0%,
    #e8ad00 18%,
    #fff29a 38%,
    #ffcf18 52%,
    #b97800 70%,
    #ffe36b 88%,
    #9c6500 100%
  );

  background-size: 220% auto;

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  -webkit-text-stroke: 1px rgba(255, 219, 75, 0.25);

  filter:
    drop-shadow(0 6px 0 rgba(74, 43, 0, 0.65))
    drop-shadow(0 14px 22px rgba(255, 190, 0, 0.28));

  animation: exteriorGoldShine 5s linear infinite;
}

/* Línea dorada debajo de EXTERIOR */

.hero h1 span::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: -12px;

  width: 72%;
  height: 3px;

  background: linear-gradient(
    90deg,
    #ffd000,
    rgba(255, 208, 0, 0.2),
    transparent
  );

  box-shadow: 0 0 18px rgba(255, 208, 0, 0.6);
}

/* Brillo metálico moviéndose */

@keyframes exteriorGoldShine {
  0% {
    background-position: 200% center;
  }

  100% {
    background-position: -20% center;
  }
}

/* Texto pequeño superior */

.hero-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 22px;
  padding: 8px 15px 8px 0;

  color: #ffd329;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 4px;
  text-transform: uppercase;

  text-shadow:
    0 0 14px rgba(255, 208, 0, 0.55),
    0 3px 8px rgba(0, 0, 0, 0.75);
}

.hero-tag::before {
  content: "";
  width: 44px;
  height: 2px;
  flex-shrink: 0;

  background: linear-gradient(
    90deg,
    #ffd329,
    rgba(255, 211, 41, 0.08)
  );

  box-shadow: 0 0 12px rgba(255, 208, 0, 0.6);
}

/* Descripción más elegante */

.hero-content > p {
  max-width: 580px;
  margin: 0 0 32px;

  color: rgba(255, 255, 255, 0.86);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 500;
  line-height: 1.72;
  letter-spacing: -0.2px;

  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.9),
    0 0 20px rgba(0, 0, 0, 0.4);
}

/* Ajuste para celular */

@media (max-width: 700px) {
  .hero h1 {
    font-size: clamp(52px, 15vw, 76px);
    line-height: 0.86;
    letter-spacing: -4px;
  }

  .hero h1 span::after {
    bottom: -8px;
    width: 65%;
  }

  .hero-tag {
    font-size: 11px;
    letter-spacing: 2.5px;
  }
}
.about-video {
  width: 100%;
  height: 100%;
  min-height: 520px;
  display: block;
  object-fit: cover;
}
/* ARREGLAR BOTÓN FREE ESTIMATE */

.navbar .nav-btn {
  position: relative;
  width: auto !important;
  min-width: 185px;
  height: 54px;
  padding: 0 24px !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;

  color: #080808 !important;
  background: linear-gradient(
    135deg,
    #ffe86b,
    #ffd000 50%,
    #c98b00
  ) !important;

  border: 1px solid rgba(255, 235, 130, 0.9);
  text-decoration: none;
  white-space: nowrap;

  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.5px;

  box-shadow:
    0 10px 30px rgba(255, 196, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);

  overflow: hidden;
}

/* Quita el cuadrito amarillo separado */

.navbar .nav-btn::before,
.navbar .nav-btn::after {
  display: none !important;
  content: none !important;
}

.navbar .nav-btn i {
  position: static !important;
  color: #080808 !important;
  font-size: 14px;
}

.navbar .nav-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(255, 196, 0, 0.45);
}
/* BOTÓN DE LLAMADA — ARREGLO DEFINITIVO */

.navbar .nav-call-btn {
  position: relative;
  z-index: 5;

  width: auto;
  min-width: 185px;
  height: 54px;
  padding: 0 25px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  flex-shrink: 0;

  color: #090909;
  background: linear-gradient(
    135deg,
    #fff08a 0%,
    #ffd000 45%,
    #d99b00 100%
  );

  border: 1px solid rgba(255, 239, 154, 0.9);
  border-radius: 2px;

  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  box-shadow:
    0 10px 28px rgba(255, 196, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);

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

.navbar .nav-call-btn i {
  position: static;
  display: inline-block;
  color: #090909;
  font-size: 14px;
}

.navbar .nav-call-btn span {
  position: static;
  display: inline-block;
  color: #090909;
}

.navbar .nav-call-btn::before,
.navbar .nav-call-btn::after {
  content: none !important;
  display: none !important;
}

.navbar .nav-call-btn:hover {
  transform: translateY(-3px);

  box-shadow:
    0 16px 38px rgba(255, 196, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
/* =========================================
   PROCESS SECTION — PREMIUM GLASS DESIGN
========================================= */

.process-premium {
  position: relative;
  overflow: hidden;
  padding: 130px 6% 90px;
  background: #030303;
  isolation: isolate;
}

.process-background {
  position: absolute;
  inset: 0;
  z-index: -3;

  background:
    url("assets/process-bg.jpg")
    center center / cover no-repeat;

  filter:
    brightness(0.28)
    contrast(1.2)
    saturate(0.75);

  transform: scale(1.04);
}

.process-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.96) 0%,
      rgba(0, 0, 0, 0.80) 45%,
      rgba(0, 0, 0, 0.58) 100%
    ),
    radial-gradient(
      circle at 50% 20%,
      rgba(255, 196, 0, 0.14),
      transparent 35%
    );
}

.process-premium::before,
.process-premium::after {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  z-index: -1;
  pointer-events: none;
}

.process-premium::before {
  top: -250px;
  left: -220px;

  background:
    radial-gradient(
      circle,
      rgba(255, 196, 0, 0.16),
      transparent 68%
    );
}

.process-premium::after {
  right: -250px;
  bottom: -250px;

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

.process-container {
  width: min(1450px, 100%);
  margin: 0 auto;
}

.process-heading {
  max-width: 980px;
  margin: 0 auto 75px;
  text-align: center;
}

.process-label {
  display: inline-flex;
  align-items: center;
  gap: 20px;

  color: #ffd34d;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 5px;
  text-transform: uppercase;
}

.process-label::before,
.process-label::after {
  content: "";
  width: 58px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #ffd34d
    );
}

.process-label::after {
  background:
    linear-gradient(
      90deg,
      #ffd34d,
      transparent
    );
}

.process-heading h2 {
  margin: 20px 0 22px;

  color: #ffffff;
  font-size: clamp(48px, 6vw, 88px);
  font-weight: 950;
  line-height: 0.94;
  letter-spacing: -4px;
  text-transform: uppercase;
}

.process-heading h2 span {
  display: block;

  background:
    linear-gradient(
      180deg,
      #fff2a0 0%,
      #ffd24a 35%,
      #d89a00 100%
    );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 10px 35px rgba(255, 196, 0, 0.20);
}

.process-heading p {
  max-width: 760px;
  margin: 0 auto;

  color: rgba(255, 255, 255, 0.72);
  font-size: 18px;
  line-height: 1.7;
}

.process-line {
  width: calc(100% - 120px);
  height: 2px;
  margin: 0 auto -2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 208, 0, 0.85) 10%,
      rgba(255, 208, 0, 0.85) 90%,
      transparent
    );

  box-shadow:
    0 0 18px rgba(255, 208, 0, 0.45);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;

  position: relative;
  z-index: 2;
}

.process-card {
  position: relative;
  min-height: 420px;
  padding: 68px 28px 35px;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0.03)
    );

  border: 1px solid rgba(255, 208, 0, 0.35);
  border-radius: 26px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(255, 208, 0, 0.06),
    0 25px 60px rgba(0, 0, 0, 0.42);

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

  overflow: visible;

  transition:
    transform 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease;
}

.process-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.10),
      transparent 32%
    );
}

.process-number {
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);

  width: 92px;
  height: 92px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #111111;
  font-size: 31px;
  font-weight: 950;

  background:
    linear-gradient(
      145deg,
      #fff4a4,
      #ffd33e 48%,
      #b87900
    );

  border: 2px solid rgba(255, 244, 164, 0.88);

  box-shadow:
    0 0 0 8px rgba(255, 208, 0, 0.08),
    0 0 30px rgba(255, 208, 0, 0.70),
    inset 0 2px 5px rgba(255, 255, 255, 0.72);
}

.process-icon {
  width: 112px;
  height: 112px;
  margin-bottom: 25px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.11),
      rgba(255, 255, 255, 0.025)
    );

  border: 1px solid rgba(255, 208, 0, 0.38);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 28px rgba(255, 208, 0, 0.13);

  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.process-icon i {
  color: #ffd34d;
  font-size: 42px;

  filter:
    drop-shadow(0 0 12px rgba(255, 208, 0, 0.45));
}

.process-card h3 {
  min-height: 58px;
  margin: 0;

  color: #ffffff;
  font-size: 23px;
  font-weight: 900;
  line-height: 1.12;
  text-transform: uppercase;
}

.process-divider {
  width: 58px;
  height: 2px;
  margin: 19px auto;

  background:
    linear-gradient(
      90deg,
      transparent,
      #ffd34d,
      transparent
    );

  box-shadow:
    0 0 10px rgba(255, 208, 0, 0.45);
}

.process-card p {
  margin: 0;

  color: rgba(255, 255, 255, 0.73);
  font-size: 15px;
  line-height: 1.72;
}

.process-card:hover {
  transform: translateY(-14px);

  border-color: rgba(255, 208, 0, 0.90);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 32px 85px rgba(0, 0, 0, 0.58),
    0 0 35px rgba(255, 196, 0, 0.14);
}

.process-card:hover .process-icon {
  transform: translateY(-5px) scale(1.06);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 38px rgba(255, 208, 0, 0.28);
}

.process-trust-bar {
  margin-top: 34px;
  padding: 24px 28px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.02)
    );

  border: 1px solid rgba(255, 208, 0, 0.28);
  border-radius: 24px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 20px 50px rgba(0, 0, 0, 0.38);

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

.trust-item {
  min-height: 74px;
  padding: 0 22px;

  display: flex;
  align-items: center;
  gap: 16px;

  border-right: 1px solid rgba(255, 208, 0, 0.20);
}

.trust-item:last-child {
  border-right: none;
}

.trust-item i {
  color: #ffd34d;
  font-size: 30px;

  filter:
    drop-shadow(0 0 10px rgba(255, 208, 0, 0.35));
}

.trust-item div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.trust-item strong {
  color: #ffffff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.trust-item span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  line-height: 1.45;
}

/* TABLET */

@media (max-width: 1100px) {
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 75px 22px;
  }

  .process-line {
    display: none;
  }

  .process-trust-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 0;
  }

  .trust-item:nth-child(2) {
    border-right: none;
  }
}

/* MOBILE */

@media (max-width: 700px) {
  .process-premium {
    padding: 100px 20px 70px;
  }

  .process-heading {
    margin-bottom: 90px;
    text-align: left;
  }

  .process-label {
    gap: 12px;
    font-size: 11px;
    letter-spacing: 3px;
  }

  .process-label::before {
    display: none;
  }

  .process-heading h2 {
    font-size: 46px;
    letter-spacing: -2px;
  }

  .process-heading p {
    font-size: 15px;
  }

  .process-grid {
    grid-template-columns: 1fr;
    gap: 80px;
  }

  .process-card {
    min-height: auto;
    padding: 68px 24px 35px;
  }

  .process-trust-bar {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .trust-item {
    padding: 16px 5px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 208, 0, 0.16);
  }

  .trust-item:last-child {
    border-bottom: none;
  }
}
/* ARREGLAR LÍNEAS DE PROCESS */

.process-divider {
  display: block !important;
  width: 55px !important;
  height: 2px !important;
  min-height: 2px !important;
  margin: 18px auto 22px !important;

  border: 0 !important;
  border-radius: 20px !important;

  background: linear-gradient(
    90deg,
    transparent,
    #ffd34d,
    transparent
  ) !important;

  box-shadow: 0 0 10px rgba(255, 208, 0, 0.45) !important;
}

/* Evita que estilos viejos conviertan la línea en cuadro */

.process-card .process-divider::before,
.process-card .process-divider::after {
  display: none !important;
  content: none !important;
}
/* =========================================
   NUEVA SECCIÓN PROCESS — LIMPIA Y PREMIUM
========================================= */

.steps-section {
  position: relative;
  padding: 120px 6%;
  overflow: hidden;

  background:
    linear-gradient(
      rgba(2, 2, 2, 0.88),
      rgba(2, 2, 2, 0.95)
    ),
    url("assets/process-bg.jpg") center / cover no-repeat;
}

.steps-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 10%,
      rgba(255, 201, 0, 0.14),
      transparent 38%
    );
}

.steps-container {
  position: relative;
  z-index: 2;
  width: min(1400px, 100%);
  margin: 0 auto;
}

.steps-heading {
  max-width: 820px;
  margin: 0 auto 65px;
  text-align: center;
}

.steps-heading > span {
  color: #ffd229;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.steps-heading h2 {
  margin: 16px 0 20px;

  color: #ffffff;
  font-size: clamp(44px, 5vw, 76px);
  font-weight: 950;
  line-height: 0.98;
  letter-spacing: -3px;
  text-transform: uppercase;
}

.steps-heading h2 strong {
  display: block;
  color: #ffd229;
}

.steps-heading p {
  max-width: 700px;
  margin: 0 auto;

  color: rgba(255, 255, 255, 0.72);
  font-size: 17px;
  line-height: 1.7;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.step-card {
  position: relative;
  min-height: 330px;
  padding: 30px;

  display: flex;
  flex-direction: column;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.10),
      rgba(255, 255, 255, 0.025)
    );

  border: 1px solid rgba(255, 210, 41, 0.30);
  border-radius: 18px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 20px 55px rgba(0, 0, 0, 0.42);

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

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 45px;
}

.step-number {
  color: #ffd229;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: 2px;
}

.step-top i {
  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  color: #ffd229;
  font-size: 23px;

  border: 1px solid rgba(255, 210, 41, 0.38);
  border-radius: 50%;

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

  box-shadow:
    0 0 24px rgba(255, 210, 41, 0.14);
}

.step-card h3 {
  margin: 0 0 17px;

  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.15;
  text-transform: uppercase;
}

.step-card h3::after {
  content: "";
  display: block;

  width: 42px;
  height: 2px;
  margin-top: 16px;

  background: #ffd229;
  box-shadow: 0 0 10px rgba(255, 210, 41, 0.45);
}

.step-card p {
  margin: auto 0 0;

  color: rgba(255, 255, 255, 0.68);
  font-size: 15px;
  line-height: 1.65;
}

.step-card:hover {
  transform: translateY(-10px);
  border-color: rgba(255, 210, 41, 0.85);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 28px 70px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(255, 210, 41, 0.10);
}

/* TABLET */

@media (max-width: 1050px) {
  .steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* CELULAR */

@media (max-width: 650px) {
  .steps-section {
    padding: 90px 20px 70px;
  }

  .steps-heading {
    margin-bottom: 45px;
    text-align: left;
  }

  .steps-heading h2 {
    font-size: 43px;
    letter-spacing: -2px;
  }

  .steps-heading p {
    font-size: 15px;
  }

  .steps-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .step-card {
    min-height: 285px;
    padding: 26px;
  }

  .step-top {
    margin-bottom: 35px;
  }
}
/* =====================================================
   MASTER'S MIND — PREMIUM STEPPED PROCESS
===================================================== */

.mm-process {
  position: relative;
  min-height: 820px;
  padding: 110px 6% 100px;
  overflow: hidden;
  isolation: isolate;

  background:
    url("assets/process-bg.jpg")
    center center / cover no-repeat;
}

.mm-process-shade {
  position: absolute;
  inset: 0;
  z-index: -2;

  background:
    linear-gradient(
      90deg,
      rgba(2, 5, 9, 0.98) 0%,
      rgba(2, 5, 9, 0.90) 35%,
      rgba(2, 5, 9, 0.64) 72%,
      rgba(2, 5, 9, 0.72) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.25),
      rgba(0, 0, 0, 0.84)
    );
}

.mm-process::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 75% 40%,
      rgba(255, 190, 50, 0.11),
      transparent 35%
    );
}

.mm-process-container {
  width: min(1450px, 100%);
  margin: 0 auto;
}

.mm-process-intro {
  max-width: 620px;
  position: relative;
  z-index: 4;
}

.mm-process-label {
  display: inline-flex;
  align-items: center;
  gap: 16px;

  color: #dca93e;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.mm-process-label::after {
  content: "";
  width: 60px;
  height: 1px;

  background: linear-gradient(
    90deg,
    #dca93e,
    transparent
  );
}

.mm-process-intro h2 {
  margin: 18px 0 12px;

  color: #ffffff;
  font-size: clamp(48px, 5.5vw, 78px);
  font-weight: 950;
  line-height: 0.96;
  letter-spacing: -3px;
  text-transform: uppercase;
}

.mm-process-intro h2 strong {
  display: block;
  color: #dca93e;
  font-weight: 950;
}

.mm-process-title-line {
  width: 58px;
  height: 2px;
  margin: 24px 0;

  background: #dca93e;

  box-shadow:
    0 0 12px rgba(220, 169, 62, 0.42);
}

.mm-process-intro p {
  max-width: 480px;
  margin: 0;

  color: rgba(255, 255, 255, 0.76);
  font-size: 16px;
  line-height: 1.7;
}

/* CONTENEDOR DE LOS PASOS */

.mm-process-steps {
  position: relative;
  min-height: 510px;
  margin-top: -35px;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 0;
}

/* LÍNEA ASCENDENTE */

.mm-process-steps::before {
  content: "";
  position: absolute;
  z-index: 3;

  left: 8%;
  right: 3%;
  top: 89px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #dca93e 8%,
      #f6ce6b 88%,
      transparent
    );

  box-shadow:
    0 0 12px rgba(220, 169, 62, 0.52);

  transform: rotate(-8deg);
  transform-origin: left center;
}

/* TARJETAS */

.mm-step {
  position: relative;
  z-index: 2;
  min-height: 330px;
  padding: 28px 28px 32px;

  display: flex;
  flex-direction: column;

  background:
    linear-gradient(
      160deg,
      rgba(16, 22, 29, 0.95),
      rgba(4, 8, 13, 0.88)
    );

  border: 1px solid rgba(220, 169, 62, 0.38);
  border-bottom: none;
  border-radius: 14px 14px 0 0;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 25px 55px rgba(0, 0, 0, 0.48);

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

  transition:
    transform 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

/* ALTURAS ESCALONADAS */

.mm-step-1 {
  min-height: 315px;
  margin-top: 150px;
}

.mm-step-2 {
  min-height: 350px;
  margin-top: 105px;
}

.mm-step-3 {
  min-height: 390px;
  margin-top: 58px;
}

.mm-step-4 {
  min-height: 430px;
  margin-top: 10px;
}

/* PUNTOS DORADOS SOBRE LA LÍNEA */

.mm-step::before {
  content: "";
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 5;

  width: 13px;
  height: 13px;

  border-radius: 50%;

  background: #fff1b3;
  border: 2px solid #dca93e;

  box-shadow:
    0 0 8px #dca93e,
    0 0 22px rgba(220, 169, 62, 0.9);
}

.mm-step-number {
  color: #e6b84e;
  font-family: Georgia, serif;
  font-size: clamp(52px, 5vw, 76px);
  line-height: 1;
}

.mm-step-line {
  width: 48px;
  height: 1px;
  margin: 16px 0 22px;

  background: rgba(220, 169, 62, 0.82);
}

.mm-step-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 22px;

  display: grid;
  place-items: center;

  color: #dca93e;
  font-size: 29px;

  border: 1px solid rgba(220, 169, 62, 0.70);
  border-radius: 50%;

  background:
    rgba(220, 169, 62, 0.035);

  box-shadow:
    inset 0 0 20px rgba(220, 169, 62, 0.04);
}

.mm-step h3 {
  margin: 0 0 14px;

  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
}

.mm-step p {
  margin: 0;

  color: rgba(255, 255, 255, 0.67);
  font-size: 13px;
  line-height: 1.65;
}

.mm-step:hover {
  z-index: 6;
  transform: translateY(-12px);

  border-color: rgba(246, 206, 107, 0.88);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 35px 75px rgba(0, 0, 0, 0.60),
    0 0 26px rgba(220, 169, 62, 0.12);
}

/* TABLET */

@media (max-width: 1050px) {
  .mm-process {
    padding: 100px 5% 80px;
  }

  .mm-process-steps {
    min-height: auto;
    margin-top: 70px;

    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .mm-process-steps::before {
    display: none;
  }

  .mm-step-1,
  .mm-step-2,
  .mm-step-3,
  .mm-step-4 {
    min-height: 330px;
    margin-top: 0;
  }

  .mm-step {
    border-bottom: 1px solid rgba(220, 169, 62, 0.38);
    border-radius: 14px;
  }

  .mm-step::before {
    display: none;
  }
}

/* CELULAR */

@media (max-width: 650px) {
  .mm-process {
    min-height: auto;
    padding: 85px 20px 65px;

    background-position: 63% center;
  }

  .mm-process-shade {
    background:
      linear-gradient(
        rgba(1, 4, 8, 0.92),
        rgba(1, 4, 8, 0.97)
      );
  }

  .mm-process-intro h2 {
    font-size: 43px;
    letter-spacing: -2px;
  }

  .mm-process-intro p {
    font-size: 15px;
  }

  .mm-process-steps {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 50px;
  }

  .mm-step-1,
  .mm-step-2,
  .mm-step-3,
  .mm-step-4 {
    min-height: auto;
  }

  .mm-step {
    padding: 26px;
  }

  .mm-step-number {
    font-size: 56px;
  }
}
/* =====================================================
   MASTER'S MIND — PREMIUM BACKGROUND LIGHTS
   LUCES DORADAS PARA TODA LA PÁGINA
===================================================== */

/* Fondo general con profundidad */
body {
  position: relative;
  overflow-x: hidden;

  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(255, 196, 0, 0.08),
      transparent 28%
    ),
    radial-gradient(
      circle at 88% 38%,
      rgba(255, 196, 0, 0.06),
      transparent 30%
    ),
    radial-gradient(
      circle at 35% 72%,
      rgba(80, 110, 145, 0.07),
      transparent 30%
    ),
    #030303;
}

/* Luz suave dentro de las secciones */
.services,
.about-premium,
.projects,
.reviews,
.contact {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Brillo dorado izquierdo */
.services::before,
.about-premium::before,
.projects::before,
.reviews::before,
.contact::before {
  content: "";
  position: absolute;
  z-index: -2;
  pointer-events: none;

  width: 520px;
  height: 520px;
  top: 5%;
  left: -260px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 196, 0, 0.15) 0%,
      rgba(255, 196, 0, 0.06) 30%,
      transparent 68%
    );

  filter: blur(12px);
}

/* Brillo dorado derecho */
.services::after,
.about-premium::after,
.projects::after,
.reviews::after,
.contact::after {
  content: "";
  position: absolute;
  z-index: -2;
  pointer-events: none;

  width: 600px;
  height: 600px;
  right: -320px;
  bottom: -220px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 183, 0, 0.13) 0%,
      rgba(255, 183, 0, 0.045) 35%,
      transparent 70%
    );

  filter: blur(18px);
}

/* Capa oscura elegante dentro de cada sección */
.services,
.about-premium,
.projects,
.reviews,
.contact {
  background-color: #050505;
  background-image:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.018),
      transparent 35%
    ),
    radial-gradient(
      circle at 50% 0%,
      rgba(255, 196, 0, 0.055),
      transparent 32%
    );
}

/* Línea dorada muy suave entre secciones */
.services,
.about-premium,
.mm-process,
.projects,
.reviews,
.contact {
  border-top: 1px solid rgba(255, 196, 0, 0.08);
}

/* Luz detrás de los títulos */
.section-title,
.steps-heading,
.project-heading,
.reviews .section-title,
.about-info-side {
  position: relative;
  z-index: 2;
}

.section-title::before,
.project-heading::before,
.reviews .section-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;

  width: 350px;
  height: 180px;
  top: 50%;
  left: 50%;

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

  background:
    radial-gradient(
      ellipse,
      rgba(255, 196, 0, 0.10),
      transparent 68%
    );

  filter: blur(18px);
}

/* Brillo suave dentro de las tarjetas */
.service-card,
.project-card,
.review-card,
.about-feature,
.step-card {
  position: relative;
  overflow: hidden;
}

.service-card::after,
.project-card::after,
.review-card::after,
.about-feature::after,
.step-card::after {
  content: "";
  position: absolute;
  pointer-events: none;

  width: 180px;
  height: 180px;
  top: -90px;
  right: -80px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 210, 70, 0.13),
      transparent 68%
    );

  opacity: 0.7;

  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}

.service-card:hover::after,
.project-card:hover::after,
.review-card:hover::after,
.about-feature:hover::after,
.step-card:hover::after {
  opacity: 1;
  transform: scale(1.2);
}

/* Partículas doradas sutiles */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;

  opacity: 0.15;

  background-image:
    radial-gradient(
      circle,
      rgba(255, 215, 90, 0.85) 0 1px,
      transparent 1.5px
    );

  background-size: 90px 90px;
  background-position: 15px 25px;
}

/* Evita que las partículas tapen el contenido */
.navbar,
.hero,
.services,
.about-premium,
.mm-process,
.projects,
.reviews,
.contact,
footer {
  position: relative;
  z-index: 1;
}

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

@media (max-width: 1050px) {
  .services::before,
  .about-premium::before,
  .projects::before,
  .reviews::before,
  .contact::before {
    width: 420px;
    height: 420px;
  }

  .services::after,
  .about-premium::after,
  .projects::after,
  .reviews::after,
  .contact::after {
    width: 470px;
    height: 470px;
  }
}

/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 650px) {
  body {
    background:
      radial-gradient(
        circle at 20% 15%,
        rgba(255, 196, 0, 0.065),
        transparent 22%
      ),
      radial-gradient(
        circle at 90% 60%,
        rgba(255, 196, 0, 0.05),
        transparent 24%
      ),
      #030303;
  }

  .services::before,
  .about-premium::before,
  .projects::before,
  .reviews::before,
  .contact::before {
    width: 320px;
    height: 320px;
    left: -210px;
    top: 12%;
  }

  .services::after,
  .about-premium::after,
  .projects::after,
  .reviews::after,
  .contact::after {
    width: 330px;
    height: 330px;
    right: -220px;
    bottom: -120px;
  }

  body::before {
    opacity: 0.09;
    background-size: 120px 120px;
  }

  .section-title::before,
  .project-heading::before,
  .reviews .section-title::before {
    width: 260px;
    height: 140px;
  }
}
/* =========================================
   FONDO PREMIUM COMO LA REFERENCIA
========================================= */

#services {
  position: relative !important;
  isolation: isolate;
  overflow: hidden;

  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(212, 158, 37, 0.08),
      transparent 38%
    ),
    radial-gradient(
      ellipse at 20% 75%,
      rgba(212, 158, 37, 0.07),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 85% 65%,
      rgba(212, 158, 37, 0.06),
      transparent 36%
    ),
    linear-gradient(
      180deg,
      #040608 0%,
      #020304 52%,
      #050403 100%
    ) !important;
}

/* Líneas decorativas de la izquierda */

#services::before {
  content: "";
  position: absolute;
  left: -80px;
  bottom: -100px;
  width: 470px;
  height: 470px;
  z-index: -1;
  pointer-events: none;

  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 16px,
      rgba(218, 169, 54, 0.22) 17px,
      transparent 18px 31px
    );

  opacity: 0.45;
  mask-image: linear-gradient(
    135deg,
    #000,
    transparent 68%
  );
  -webkit-mask-image: linear-gradient(
    135deg,
    #000,
    transparent 68%
  );
}

/* Líneas decorativas de la derecha */

#services::after {
  content: "";
  position: absolute;
  right: -100px;
  top: -70px;
  width: 500px;
  height: 500px;
  z-index: -1;
  pointer-events: none;

  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 17px,
      rgba(218, 169, 54, 0.18) 18px,
      transparent 19px 34px
    );

  opacity: 0.38;
  transform: rotate(180deg);

  mask-image: linear-gradient(
    135deg,
    #000,
    transparent 68%
  );
  -webkit-mask-image: linear-gradient(
    135deg,
    #000,
    transparent 68%
  );
}

/* Luz central tenue */

#services .section-title {
  position: relative;
  z-index: 2;
}

#services .section-title::before {
  content: "";
  position: absolute;
  width: 760px;
  height: 300px;
  left: 50%;
  top: 55%;
  z-index: -1;
  pointer-events: none;

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

  background:
    radial-gradient(
      ellipse,
      rgba(213, 161, 44, 0.11),
      transparent 66%
    );

  filter: blur(25px);
}

/* Partículas pequeñas */

#services .service-grid {
  position: relative;
  z-index: 2;

  background-image:
    radial-gradient(
      circle,
      rgba(231, 190, 89, 0.45) 0 1px,
      transparent 1.5px
    );

  background-size: 95px 95px;
  background-position: 10px 22px;
}

/* Tarjetas oscuras con brillo discreto */

#services .service-card {
  background:
    linear-gradient(
      150deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.012)
    ) !important;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 22px 55px rgba(0, 0, 0, 0.42),
    0 0 22px rgba(211, 158, 40, 0.045) !important;
}

/* CELULAR */

@media (max-width: 650px) {
  #services {
    background:
      radial-gradient(
        ellipse at 50% 8%,
        rgba(212, 158, 37, 0.075),
        transparent 30%
      ),
      radial-gradient(
        ellipse at 85% 75%,
        rgba(212, 158, 37, 0.055),
        transparent 32%
      ),
      #030405 !important;
  }

  #services::before,
  #services::after {
    width: 320px;
    height: 320px;
    opacity: 0.25;
  }

  #services .section-title::before {
    width: 340px;
    height: 190px;
  }
}
/* =========================================================
   SIDING PAGE
========================================================= */

.siding-page {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 200, 0, 0.08), transparent 28%),
    radial-gradient(circle at 85% 30%, rgba(255, 196, 0, 0.06), transparent 30%),
    #080808;
  color: #ffffff;
  overflow-x: hidden;
}

/* HERO */

.siding-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 130px 8% 80px;
  overflow: hidden;
}

.siding-hero-image {
  position: absolute;
  inset: 0;
  background:
    url("assets/siding.jpg")
    center center / cover no-repeat;
  transform: scale(1.03);
}

.siding-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.82) 38%,
      rgba(0, 0, 0, 0.45) 70%,
      rgba(0, 0, 0, 0.30) 100%
    );
}

.siding-hero::after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  left: 5%;
  bottom: -240px;
  border-radius: 50%;
  background: rgba(255, 204, 0, 0.13);
  filter: blur(90px);
}

.siding-hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
}

.siding-tag {
  display: inline-block;
  margin-bottom: 22px;
  color: #f6c900;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.siding-hero h1 {
  margin: 0;
  font-size: clamp(56px, 7vw, 105px);
  line-height: 0.95;
  letter-spacing: -4px;
  text-transform: uppercase;
  font-weight: 900;
}

.siding-hero h1 span {
  display: block;
  color: #f4c900;
  text-shadow:
    0 0 18px rgba(255, 204, 0, 0.24),
    0 0 45px rgba(255, 204, 0, 0.08);
}

.siding-hero-content > p {
  max-width: 680px;
  margin-top: 28px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 18px;
  line-height: 1.8;
}

.siding-hero-buttons,
.siding-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 34px;
}

.siding-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 55px;
  padding: 0 26px;
  border-radius: 10px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 13px;
  font-weight: 800;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.siding-btn:hover {
  transform: translateY(-3px);
}

.siding-btn-gold {
  background: linear-gradient(135deg, #ffe253, #f0b800);
  color: #111111;
  box-shadow: 0 12px 35px rgba(255, 199, 0, 0.18);
}

.siding-btn-gold:hover {
  box-shadow: 0 18px 45px rgba(255, 199, 0, 0.32);
}

.siding-btn-outline {
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
}

.siding-btn-outline:hover {
  border-color: #f6c900;
  background: rgba(246, 201, 0, 0.08);
}

.siding-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 45px;
}

.siding-trust-row div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.siding-trust-row i {
  color: #f6c900;
}

/* SECTION HEADINGS */

.siding-intro,
.siding-options,
.siding-process,
.siding-service-area,
.siding-cta {
  padding: 100px 8%;
}

.siding-section-heading {
  max-width: 830px;
  margin: 0 auto;
  text-align: center;
}

.siding-section-heading > span,
.siding-benefits-content > span,
.service-area-box > div:first-child > span,
.siding-cta > span {
  display: inline-block;
  margin-bottom: 16px;
  color: #f6c900;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.siding-section-heading h2,
.siding-benefits-content h2,
.service-area-box h2,
.siding-cta h2 {
  margin: 0;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -2px;
  text-transform: uppercase;
}

.siding-section-heading h2 strong,
.siding-benefits-content h2 strong,
.siding-cta h2 strong {
  display: block;
  color: #f6c900;
}

.siding-section-heading p {
  max-width: 750px;
  margin: 25px auto 0;
  color: rgba(255, 255, 255, 0.67);
  line-height: 1.85;
}

/* SIDING CARDS */

.siding-options {
  background:
    linear-gradient(180deg, #0a0a0a, #080808);
}

.siding-grid {
  max-width: 1250px;
  margin: 55px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.siding-card {
  position: relative;
  padding: 34px 26px;
  min-height: 420px;
  border-radius: 20px;
  border: 1px solid rgba(255, 209, 0, 0.25);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.045),
      rgba(255, 255, 255, 0.018)
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 15px 40px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.siding-card:hover {
  transform: translateY(-10px);
  border-color: rgba(255, 209, 0, 0.75);
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.45),
    0 0 35px rgba(255, 209, 0, 0.08);
}

.siding-card.featured {
  border-color: rgba(255, 209, 0, 0.85);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 210, 0, 0.13), transparent 45%),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.018)
    );
}

.siding-card-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #f6c900;
  color: #111111;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
}

.siding-card-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(246, 201, 0, 0.10);
  border: 1px solid rgba(246, 201, 0, 0.26);
  color: #f6c900;
  font-size: 25px;
  margin-bottom: 26px;
}

.siding-card h3 {
  margin: 0 0 15px;
  font-size: 23px;
  text-transform: uppercase;
}

.siding-card p {
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.7;
}

.siding-card ul {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.siding-card li {
  margin: 11px 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
}

.siding-card li i {
  width: 20px;
  color: #f6c900;
}

/* BENEFITS */

.siding-benefits {
  max-width: 1400px;
  margin: 0 auto;
  padding: 110px 8%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 75px;
  align-items: center;
}

.siding-benefits-image {
  position: relative;
}

.siding-benefits-image::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(246, 201, 0, 0.28);
  border-radius: 28px;
}

.siding-benefits-image::after {
  content: "";
  position: absolute;
  width: 55%;
  height: 55%;
  bottom: -25px;
  right: -25px;
  background: rgba(246, 201, 0, 0.14);
  filter: blur(55px);
  z-index: -1;
}

.siding-benefits-image img {
  width: 100%;
  display: block;
  min-height: 540px;
  object-fit: cover;
  border-radius: 22px;
}

.siding-benefits-content > p {
  margin: 25px 0 35px;
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.8;
}

.benefit-item {
  display: grid;
  grid-template-columns: 55px 1fr;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.benefit-item > i {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #f6c900;
  background: rgba(246, 201, 0, 0.09);
  border: 1px solid rgba(246, 201, 0, 0.2);
}

.benefit-item h3 {
  margin: 0 0 7px;
}

.benefit-item p {
  margin: 0;
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.6;
}

/* PROCESS */

.siding-process {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.018),
      rgba(255, 255, 255, 0)
    );
}

.process-grid {
  max-width: 1200px;
  margin: 55px auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.process-card {
  position: relative;
  padding: 34px 25px;
  min-height: 280px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.process-card > span {
  position: absolute;
  top: 20px;
  right: 20px;
  color: rgba(246, 201, 0, 0.25);
  font-size: 42px;
  font-weight: 900;
}

.process-card > i {
  color: #f6c900;
  font-size: 28px;
  margin-bottom: 30px;
}

.process-card h3 {
  margin-bottom: 12px;
  text-transform: uppercase;
}

.process-card p {
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.65;
}

/* SERVICE AREA */

.service-area-box {
  max-width: 1200px;
  margin: 0 auto;
  padding: 55px;
  border-radius: 25px;
  border: 1px solid rgba(246, 201, 0, 0.2);
  background:
    radial-gradient(circle at 0% 50%, rgba(246, 201, 0, 0.08), transparent 38%),
    rgba(255, 255, 255, 0.025);
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 55px;
}

.service-area-box p {
  color: rgba(255, 255, 255, 0.64);
  line-height: 1.8;
}

.service-area-cities {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 10px;
}

.service-area-cities span {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(246, 201, 0, 0.07);
  border: 1px solid rgba(246, 201, 0, 0.20);
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
}

/* CTA */

.siding-cta {
  position: relative;
  text-align: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, #090909, #030303);
}

.siding-cta-glow {
  position: absolute;
  width: 700px;
  height: 350px;
  left: 50%;
  bottom: -260px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(246, 201, 0, 0.18);
  filter: blur(85px);
}

.siding-cta > * {
  position: relative;
  z-index: 2;
}

.siding-cta p {
  margin: 20px auto 0;
  color: rgba(255, 255, 255, 0.64);
}

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

/* FOOTER */

.siding-footer {
  padding: 65px 8% 35px;
  text-align: center;
  background: #020202;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.siding-footer img {
  width: 130px;
  max-width: 45%;
  margin-bottom: 15px;
}

.siding-footer > p:not(.copyright) {
  max-width: 560px;
  margin: 0 auto 25px;
  color: rgba(255, 255, 255, 0.55);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}

.footer-links a,
.footer-contact a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-contact a:hover {
  color: #f6c900;
}

.footer-contact {
  margin-top: 20px;
}

.footer-contact i {
  margin-right: 7px;
  color: #f6c900;
}

.copyright {
  margin-top: 35px;
  color: rgba(255, 255, 255, 0.35);
  font-size: 12px;
}

/* FLOATING CALL */

.floating-call {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe24f, #efb700);
  color: #111111;
  text-decoration: none;
  font-size: 20px;
  z-index: 100;
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(246, 201, 0, 0.16);
  transition: transform 0.25s ease;
}

.floating-call:hover {
  transform: translateY(-4px) scale(1.04);
}

/* RESPONSIVE */

@media (max-width: 1100px) {
  .siding-grid,
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .siding-benefits {
    grid-template-columns: 1fr;
  }

  .service-area-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .siding-hero {
    min-height: auto;
    padding: 140px 6% 75px;
  }

  .siding-hero h1 {
    letter-spacing: -2px;
  }

  .siding-intro,
  .siding-options,
  .siding-process,
  .siding-service-area,
  .siding-cta,
  .siding-benefits {
    padding: 75px 6%;
  }

  .siding-grid,
  .process-grid {
    grid-template-columns: 1fr;
  }

  .siding-card {
    min-height: auto;
  }

  .siding-benefits-image img {
    min-height: 390px;
  }

  .service-area-box {
    padding: 35px 24px;
  }

  .siding-hero-buttons,
  .siding-cta-buttons {
    flex-direction: column;
  }

  .siding-btn {
    width: 100%;
  }

  .siding-trust-row {
    flex-direction: column;
    gap: 14px;
  }
}
/* ==========================================================
   MASTER'S MIND EXTERIOR
   PREMIUM SIDING PAGE V2
========================================================== */

.siding-page {
  margin: 0;
  background: #030303;
  color: #fff;
  overflow-x: hidden;
}


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

.siding-navbar {
  position: relative;
  z-index: 100;

  width: 100%;
  min-height: 108px;

  display: grid;
  grid-template-columns: 260px 1fr 190px;
  align-items: center;

  padding: 10px 5%;

  background:
    linear-gradient(
      180deg,
      rgba(4,4,4,.98),
      rgba(4,4,4,.94)
    );

  border-bottom: 1px solid rgba(255,201,0,.32);

  box-shadow:
    0 10px 45px rgba(0,0,0,.6),
    0 1px 30px rgba(255,194,0,.04);
}


.siding-logo {
  display: flex;
  align-items: center;
  height: 95px;
}


.siding-logo img {
  width: 230px;
  height: 100px;
  object-fit: contain;

  filter:
    drop-shadow(0 0 5px rgba(255,210,40,.35))
    drop-shadow(0 0 16px rgba(255,190,0,.14));

  transition:
    transform .3s ease,
    filter .3s ease;
}


.siding-logo:hover img {
  transform: scale(1.035);

  filter:
    drop-shadow(0 0 7px rgba(255,220,80,.55))
    drop-shadow(0 0 25px rgba(255,190,0,.23));
}


.siding-nav-links {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 29px;
}


.siding-nav-links a {
  position: relative;

  color: rgba(255,255,255,.90);

  text-decoration: none;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 1.15px;

  transition:
    color .25s ease,
    text-shadow .25s ease;
}


.siding-nav-links a::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -10px;

  width: 0;
  height: 2px;

  transform: translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      #ffd51e,
      transparent
    );

  box-shadow:
    0 0 12px rgba(255,205,0,.8);

  transition: width .3s ease;
}


.siding-nav-links a:hover {
  color: #ffd51e;

  text-shadow:
    0 0 10px rgba(255,211,32,.35);
}


.siding-nav-links a:hover::after {
  width: 110%;
}


.siding-nav-cta {
  justify-self: end;

  min-height: 53px;

  padding: 0 21px;

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

  gap: 10px;

  background:
    linear-gradient(
      135deg,
      #ffe560,
      #ffc400,
      #e7a900
    );

  color: #111;

  text-decoration: none;

  font-size: 11px;
  font-weight: 900;

  letter-spacing: 1px;

  border-radius: 6px;

  border: 1px solid rgba(255,235,130,.72);

  box-shadow:
    0 0 10px rgba(255,198,0,.45),
    0 0 30px rgba(255,198,0,.20),
    inset 0 1px 0 rgba(255,255,255,.6);

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


.siding-nav-cta:hover {
  transform: translateY(-3px);

  box-shadow:
    0 0 14px rgba(255,205,0,.65),
    0 15px 35px rgba(255,191,0,.22);
}


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

.siding-main-hero {
  position: relative;

  min-height: calc(100vh - 108px);

  overflow: hidden;

  display: flex;
  align-items: center;

  border-bottom:
    1px solid rgba(255,197,0,.25);
}


.siding-hero-bg {
  position: absolute;
  inset: 0;

  background:
    url("assets/siding.jpg")
    center center / cover no-repeat;

  transform: scale(1.035);

  animation:
    sidingHeroZoom 15s ease-in-out infinite alternate;
}


@keyframes sidingHeroZoom {

  from {
    transform: scale(1.035);
  }

  to {
    transform: scale(1.095);
  }

}


.siding-hero-dark {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,

      rgba(0,0,0,.99) 0%,

      rgba(0,0,0,.92) 27%,

      rgba(0,0,0,.74) 47%,

      rgba(0,0,0,.26) 72%,

      rgba(0,0,0,.08) 100%
    ),
    linear-gradient(
      0deg,
      rgba(0,0,0,.55),
      transparent 45%
    );
}


.siding-main-hero::before {
  content: "";

  position: absolute;

  left: -180px;
  top: 15%;

  width: 600px;
  height: 600px;

  border-radius: 50%;

  background:
    rgba(255,195,0,.10);

  filter: blur(120px);

  pointer-events: none;
}


.siding-main-hero::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 58%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      #ffcb00,
      rgba(255,203,0,.45),
      transparent
    );

  box-shadow:
    0 0 18px rgba(255,196,0,.6);
}


.siding-gold-particles {
  position: absolute;

  left: 5%;
  bottom: 8%;

  width: 500px;
  height: 350px;

  opacity: .65;

  pointer-events: none;

  background-image:

    radial-gradient(
      circle,
      rgba(255,211,40,.8) 0 1px,
      transparent 2px
    ),

    radial-gradient(
      circle,
      rgba(255,185,0,.7) 0 1px,
      transparent 2px
    );

  background-size:
    52px 52px,
    83px 83px;

  mask-image:
    linear-gradient(
      to top,
      black,
      transparent
    );
}


.siding-hero-inner {
  position: relative;

  z-index: 5;

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

  margin: 0 auto;

  padding:
    75px 5%
    70px;
}


.siding-hero-left {
  max-width: 770px;
}


.siding-eyebrow {
  display: flex;
  align-items: center;

  gap: 14px;

  margin-bottom: 22px;

  color: #ffd21b;

  font-size: 12px;
  font-weight: 900;

  letter-spacing: 2.5px;

  text-shadow:
    0 0 12px rgba(255,200,0,.35);
}


.eyebrow-line {
  display: inline-block;

  width: 44px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #ffd21b
    );

  box-shadow:
    0 0 10px rgba(255,200,0,.55);
}


.siding-eyebrow .eyebrow-line:last-child {
  background:
    linear-gradient(
      90deg,
      #ffd21b,
      transparent
    );
}


.siding-hero-left h1 {
  margin: 0;

  font-size:
    clamp(58px, 6.9vw, 108px);

  line-height: .88;

  letter-spacing: -4px;

  font-weight: 950;

  text-transform: uppercase;

  text-shadow:
    0 5px 30px rgba(0,0,0,.8);
}


.siding-hero-left h1 > span {
  display: block;

  color: #ffc800;

  text-shadow:
    0 0 5px rgba(255,213,46,.75),
    0 0 15px rgba(255,196,0,.55),
    0 0 38px rgba(255,184,0,.25),
    0 6px 20px rgba(0,0,0,.8);
}


.siding-hero-description {
  max-width: 640px;

  margin:
    28px 0 0;

  color:
    rgba(255,255,255,.88);

  font-size: 16px;

  line-height: 1.75;

  text-shadow:
    0 2px 12px rgba(0,0,0,.85);
}


.siding-hero-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 15px;

  margin-top: 31px;
}


.gold-premium-btn,
.glass-premium-btn {
  min-height: 56px;

  padding:
    0 27px;

  display:
    inline-flex;

  align-items: center;

  justify-content: center;

  gap: 11px;

  border-radius: 6px;

  text-decoration: none;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 1px;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}


.gold-premium-btn {
  color: #111;

  background:
    linear-gradient(
      135deg,
      #ffe45c,
      #ffc500,
      #e9ab00
    );

  border:
    1px solid rgba(255,240,140,.75);

  box-shadow:
    0 0 10px rgba(255,201,0,.45),
    0 8px 26px rgba(255,185,0,.18);
}


.gold-premium-btn:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 0 18px rgba(255,206,0,.62),
    0 15px 38px rgba(255,185,0,.28);
}


.glass-premium-btn {
  color: #fff;

  background:
    rgba(4,4,4,.42);

  border:
    1px solid rgba(255,211,55,.7);

  backdrop-filter:
    blur(12px);

  box-shadow:
    inset 0 0 20px rgba(255,197,0,.025),
    0 0 15px rgba(255,193,0,.05);
}


.glass-premium-btn:hover {
  transform:
    translateY(-3px);

  border-color:
    #ffd427;

  box-shadow:
    0 0 22px rgba(255,199,0,.18);
}


/* HERO FEATURES */

.siding-hero-features {
  display: flex;
  flex-wrap: wrap;

  gap: 38px;

  margin-top: 50px;
}


.hero-feature {
  display: flex;

  align-items: center;

  gap: 14px;
}


.feature-circle {
  width: 49px;
  height: 49px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: #ffd019;

  border:
    1px solid #ffc600;

  background:
    rgba(255,199,0,.06);

  box-shadow:
    0 0 15px rgba(255,199,0,.10);
}


.hero-feature strong,
.hero-feature span {
  display: block;
}


.hero-feature strong {
  color: #fff;

  font-size: 10px;

  letter-spacing: .6px;
}


.hero-feature span {
  color:
    rgba(255,255,255,.62);

  margin-top: 3px;

  font-size: 10px;

  letter-spacing: .7px;
}


/* ==========================================================
   GENERAL HEADING
========================================================== */

.premium-heading {
  text-align: center;

  max-width: 850px;

  margin: 0 auto;
}


.premium-heading > span,
.small-gold-title {
  display: block;

  margin-bottom: 12px;

  color: #ffc800;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: 2px;

  text-shadow:
    0 0 11px rgba(255,195,0,.24);
}


.premium-heading h2,
.siding-benefit-panel h2,
.siding-process-panel h2,
.local-area-panel h2,
.estimate-premium-panel h2 {
  margin: 0;

  color: #fff;

  font-size:
    clamp(34px, 4vw, 62px);

  line-height: .98;

  letter-spacing: -1.8px;
}


.premium-heading h2 strong,
.siding-benefit-panel h2 strong,
.siding-process-panel h2 strong,
.local-area-panel h2 strong,
.estimate-premium-panel h2 strong {
  color: #ffc800;

  font-weight: inherit;

  text-shadow:
    0 0 7px rgba(255,210,40,.35),
    0 0 22px rgba(255,190,0,.12);
}


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

.siding-services-section {
  padding:
    90px 4% 100px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(255,190,0,.055),
      transparent 32%
    ),
    #030303;
}


.siding-premium-grid {
  max-width: 1450px;

  margin:
    48px auto 0;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 20px;
}


.premium-service-card {
  position: relative;

  min-height: 420px;

  padding:
    33px 27px 28px;

  border-radius: 11px;

  border:
    1px solid rgba(255,191,0,.42);

  background:
    linear-gradient(
      145deg,
      rgba(18,18,18,.96),
      rgba(5,5,5,.96)
    );

  overflow: hidden;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 15px 40px rgba(0,0,0,.42);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}


.premium-service-card::before {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  top: -110px;
  left: 50%;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    rgba(255,190,0,.09);

  filter:
    blur(40px);
}


.premium-service-card:hover {
  transform:
    translateY(-9px);

  border-color:
    #ffc400;

  box-shadow:
    0 0 15px rgba(255,190,0,.14),
    0 25px 55px rgba(0,0,0,.55);
}


.premium-featured-card {
  border-color:
    #ffc900;

  box-shadow:
    0 0 12px rgba(255,190,0,.22),
    0 20px 45px rgba(0,0,0,.5);
}


.popular-label {
  position: absolute;

  top: 0;
  left: 50%;

  transform:
    translateX(-50%);

  padding:
    7px 24px;

  color: #111;

  background:
    linear-gradient(
      90deg,
      #dca000,
      #ffe359,
      #dca000
    );

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 1px;

  box-shadow:
    0 0 16px rgba(255,196,0,.35);
}


.service-icon-ring {
  position: relative;

  width: 72px;
  height: 72px;

  margin:
    12px auto 29px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: #ffc700;

  font-size: 27px;

  border:
    1px solid #ffc700;

  background:
    radial-gradient(
      circle,
      rgba(255,197,0,.10),
      rgba(0,0,0,.35)
    );

  box-shadow:
    0 0 16px rgba(255,197,0,.07);
}


.premium-service-card h3 {
  margin:
    0 0 16px;

  text-align: center;

  font-size: 19px;

  letter-spacing: .3px;
}


.premium-service-card > p {
  min-height: 90px;

  color:
    rgba(255,255,255,.68);

  font-size: 13px;

  line-height: 1.75;
}


.premium-service-card ul {
  list-style: none;

  margin:
    23px 0 0;

  padding: 0;
}


.premium-service-card li {
  margin:
    12px 0;

  color:
    rgba(255,255,255,.82);

  font-size: 12px;
}


.premium-service-card li i {
  margin-right: 8px;

  color: #ffc800;

  font-size: 11px;
}


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

.siding-middle-section {
  max-width: 1450px;

  margin: 0 auto;

  padding:
    20px 4% 90px;

  display: grid;

  grid-template-columns:
    .85fr 1fr 1fr;

  gap: 18px;
}


.siding-middle-image,
.siding-benefit-panel,
.siding-process-panel {
  min-height: 560px;

  border-radius: 12px;

  border:
    1px solid rgba(255,194,0,.30);

  background:
    linear-gradient(
      145deg,
      #0c0c0c,
      #050505
    );

  overflow: hidden;
}


.siding-middle-image {
  position: relative;
}


.siding-middle-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  filter:
    brightness(.74)
    contrast(1.06)
    saturate(.85);
}


.siding-middle-image::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      0deg,
      rgba(0,0,0,.35),
      transparent 55%
    );

  pointer-events: none;
}


.middle-image-border {
  position: absolute;

  inset: 9px;

  border:
    1px solid rgba(255,197,0,.22);

  border-radius: 8px;

  z-index: 2;

  pointer-events: none;
}


.siding-benefit-panel,
.siding-process-panel {
  padding:
    39px 35px;
}


.siding-benefit-panel h2,
.siding-process-panel h2 {
  font-size:
    clamp(30px, 3vw, 46px);
}


.middle-description {
  margin:
    22px 0 28px;

  color:
    rgba(255,255,255,.62);

  font-size: 13px;

  line-height: 1.72;
}


.premium-benefit {
  display: grid;

  grid-template-columns:
    52px 1fr;

  gap: 15px;

  align-items: start;

  padding:
    18px 0;

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


.benefit-icon {
  width: 46px;
  height: 46px;

  display: grid;

  place-items: center;

  color: #ffc900;

  border:
    1px solid rgba(255,201,0,.68);

  border-radius: 7px;

  background:
    rgba(255,195,0,.04);

  box-shadow:
    0 0 12px rgba(255,195,0,.04);
}


.premium-benefit h3,
.process-premium-row h3 {
  margin:
    0 0 5px;

  font-size: 12px;

  letter-spacing: .5px;
}


.premium-benefit p,
.process-premium-row p {
  margin: 0;

  color:
    rgba(255,255,255,.57);

  font-size: 11px;

  line-height: 1.6;
}


/* PROCESS */

.process-premium-row {
  display: grid;

  grid-template-columns:
    48px 38px 1fr;

  gap: 12px;

  align-items: center;

  padding:
    17px 0;

  border-bottom:
    1px solid rgba(255,255,255,.065);
}


.process-number {
  width: 43px;
  height: 43px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: #fff;

  font-size: 14px;

  border:
    1px solid #ffc900;

  box-shadow:
    0 0 15px rgba(255,194,0,.08);
}


.process-premium-row > i {
  color: #ffc600;

  font-size: 22px;

  text-shadow:
    0 0 12px rgba(255,195,0,.2);
}


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

.siding-bottom-grid {
  max-width: 1450px;

  margin: 0 auto;

  padding:
    0 4% 80px;

  display: grid;

  grid-template-columns:
    1.4fr .8fr;

  gap: 18px;
}


.local-area-panel,
.estimate-premium-panel {
  position: relative;

  padding:
    42px;

  border:
    1px solid rgba(255,193,0,.34);

  border-radius: 12px;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(255,190,0,.055),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      #0b0b0b,
      #050505
    );

  overflow: hidden;
}


.local-area-panel h2 {
  font-size:
    clamp(30px, 3.1vw, 48px);
}


.local-area-panel p {
  max-width: 650px;

  margin:
    18px 0 25px;

  color:
    rgba(255,255,255,.60);

  line-height: 1.72;

  font-size: 12px;
}


.cities-premium {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}


.cities-premium span {
  padding:
    12px 18px;

  color:
    rgba(255,255,255,.83);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .4px;

  border:
    1px solid rgba(255,196,0,.65);

  border-radius: 5px;

  background:
    rgba(255,191,0,.025);

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


.cities-premium span:hover {
  transform:
    translateY(-2px);

  background:
    rgba(255,191,0,.10);

  box-shadow:
    0 0 15px rgba(255,191,0,.08);
}


.estimate-premium-panel {
  text-align: center;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255,193,0,.085),
      transparent 55%
    ),
    #070707;

  box-shadow:
    inset 0 0 30px rgba(255,190,0,.025);
}


.estimate-premium-panel::before {
  content: "";

  position: absolute;

  width: 300px;
  height: 200px;

  left: 50%;
  bottom: -150px;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background:
    rgba(255,190,0,.14);

  filter:
    blur(60px);
}


.estimate-premium-panel > * {
  position: relative;
  z-index: 2;
}


.estimate-premium-panel h2 {
  font-size:
    clamp(31px, 3vw, 45px);
}


.estimate-premium-panel p {
  color:
    rgba(255,255,255,.61);

  font-size: 12px;

  line-height: 1.6;
}


.estimate-call-btn,
.estimate-outline-btn {
  min-height: 48px;

  width: 100%;

  margin-top: 12px;

  display:
    flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  text-decoration: none;

  font-size: 11px;

  font-weight: 900;

  letter-spacing: .6px;

  border-radius: 5px;
}


.estimate-call-btn {
  color: #111;

  background:
    linear-gradient(
      135deg,
      #ffe158,
      #ffc200
    );

  box-shadow:
    0 0 13px rgba(255,195,0,.18);
}


.estimate-outline-btn {
  color: #fff;

  border:
    1px solid rgba(255,196,0,.72);

  background:
    rgba(0,0,0,.25);
}


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

.siding-premium-footer {
  padding:
    48px 5% 35px;

  text-align: center;

  background: #010101;

  border-top:
    1px solid rgba(255,191,0,.18);
}


.siding-premium-footer img {
  width: 185px;

  filter:
    drop-shadow(
      0 0 9px rgba(255,195,0,.17)
    );
}


.siding-premium-footer p {
  color:
    rgba(255,255,255,.52);

  font-size: 11px;
}


.siding-premium-footer span {
  color:
    rgba(255,255,255,.3);

  font-size: 10px;
}


/* ==========================================================
   FLOATING PHONE
========================================================== */

.siding-floating-phone {
  position: fixed;

  right: 27px;
  bottom: 25px;

  z-index: 300;

  width: 61px;
  height: 61px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  color: #111;

  font-size: 20px;

  text-decoration: none;

  background:
    linear-gradient(
      135deg,
      #ffe154,
      #ffc300
    );

  border:
    1px solid rgba(255,240,150,.68);

  box-shadow:
    0 0 12px rgba(255,195,0,.55),
    0 0 30px rgba(255,190,0,.18),
    0 12px 30px rgba(0,0,0,.5);

  animation:
    floatingPhoneGlow 2.8s ease-in-out infinite;
}


@keyframes floatingPhoneGlow {

  0%,
  100% {

    box-shadow:
      0 0 12px rgba(255,195,0,.4),
      0 0 28px rgba(255,190,0,.12);

  }

  50% {

    box-shadow:
      0 0 18px rgba(255,205,0,.7),
      0 0 42px rgba(255,190,0,.25);

  }

}


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

@media (max-width: 1180px) {

  .siding-navbar {
    grid-template-columns:
      180px 1fr 170px;
  }

  .siding-logo img {
    width: 170px;
  }

  .siding-nav-links {
    gap: 17px;
  }

  .siding-premium-grid {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .siding-middle-section {
    grid-template-columns:
      1fr 1fr;
  }

  .siding-middle-image {
    grid-row:
      span 2;
  }

}


@media (max-width: 850px) {

  .siding-navbar {
    min-height: 90px;

    grid-template-columns:
      150px 1fr;

    padding:
      6px 5%;
  }

  .siding-logo {
    height: 80px;
  }

  .siding-logo img {
    width: 145px;
    height: 80px;
  }

  .siding-nav-links {
    display: none;
  }

  .siding-nav-cta {
    font-size: 9px;

    min-height: 46px;
  }

  .siding-main-hero {
    min-height:
      calc(100vh - 90px);
  }

  .siding-hero-inner {
    padding:
      70px 6%;
  }

  .siding-hero-dark {
    background:
      linear-gradient(
        90deg,
        rgba(0,0,0,.97),
        rgba(0,0,0,.74)
      );
  }

  .siding-hero-left h1 {
    font-size:
      clamp(49px, 13vw, 80px);

    letter-spacing:
      -2.5px;
  }

  .siding-hero-features {
    gap: 22px;
  }

  .siding-middle-section,
  .siding-bottom-grid {
    grid-template-columns:
      1fr;
  }

  .siding-middle-image {
    height: 500px;

    min-height: auto;
  }

}


@media (max-width: 620px) {

  .siding-navbar {
    grid-template-columns:
      120px 1fr;
  }

  .siding-logo img {
    width: 120px;
  }

  .siding-nav-cta {
    padding:
      0 13px;
  }

  .siding-hero-inner {
    padding:
      60px 6%
      55px;
  }

  .siding-eyebrow {
    font-size: 9px;
  }

  .eyebrow-line {
    width: 24px;
  }

  .siding-hero-left h1 {
    font-size:
      clamp(43px, 14vw, 66px);

    line-height:
      .92;
  }

  .siding-hero-description {
    font-size:
      14px;
  }

  .siding-hero-actions {
    flex-direction:
      column;
  }

  .gold-premium-btn,
  .glass-premium-btn {
    width: 100%;
  }

  .siding-hero-features {
    flex-direction:
      column;
  }

  .siding-premium-grid {
    grid-template-columns:
      1fr;
  }

  .premium-service-card {
    min-height:
      auto;
  }

  .siding-services-section {
    padding:
      70px 5%;
  }

  .siding-middle-section {
    padding:
      0 5% 70px;
  }

  .siding-bottom-grid {
    padding:
      0 5% 60px;
  }

  .local-area-panel,
  .estimate-premium-panel,
  .siding-benefit-panel,
  .siding-process-panel {
    padding:
      30px 23px;
  }

}
/* =========================================
   SIDING HERO
========================================= */

.siding-hero {
  position: relative;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.72) 42%,
      rgba(0, 0, 0, 0.20) 75%,
      rgba(0, 0, 0, 0.05) 100%
    ),
    url("assets/siding.jpg") center center / cover no-repeat;
}

.siding-hero .hero-content {
  position: relative;
  z-index: 3;
}

.siding-hero .hero-tag {
  color: #ffd200;
  text-shadow:
    0 0 8px rgba(255, 210, 0, 0.45);
}

.siding-hero h1 span {
  color: #ffd000;

  text-shadow:
    0 0 5px rgba(255, 230, 100, 0.85),
    0 0 13px rgba(255, 205, 0, 0.70),
    0 0 30px rgba(255, 190, 0, 0.35);
}
/* ==========================================================
   GUTTERS PAGE — MASTERS MIND EXTERIOR
   PREMIUM BLACK + GOLD
========================================================== */

.gutter-page {
  background: #030303;
  color: #fff;
  overflow-x: hidden;
}


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

.gutter-hero {
  position: relative;
  min-height: 100vh;
  padding: 160px 7% 150px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    url("assets/gutter-hero.jpg")
    center center / cover no-repeat;
}

.gutter-hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.84) 38%,
      rgba(0,0,0,.40) 72%,
      rgba(0,0,0,.60) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.25),
      rgba(0,0,0,.80)
    );
}

.gutter-hero::after {
  content: "";
  position: absolute;

  width: 750px;
  height: 750px;

  left: -350px;
  bottom: -400px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(220,169,62,.14),
      transparent 68%
    );

  pointer-events: none;
}

.gutter-hero-content {
  position: relative;
  z-index: 3;

  width: min(760px, 100%);
}

.gutter-hero .section-label {
  display: inline-block;

  margin-bottom: 22px;

  color: #dca93e;

  font-size: 13px;
  font-weight: 900;
  letter-spacing: 3px;
}

.gutter-hero h1 {
  margin: 0;

  color: #fff;

  font-size: clamp(55px, 6.8vw, 105px);
  font-weight: 950;
  line-height: .90;

  letter-spacing: -5px;
  text-transform: uppercase;
}

.gutter-hero h1 span {
  display: block;

  color: #dca93e;

  text-shadow:
    0 0 30px rgba(220,169,62,.13);
}

.gutter-hero-content > p {
  max-width: 650px;

  margin: 28px 0 34px;

  color: rgba(255,255,255,.75);

  font-size: 17px;
  line-height: 1.75;
}


/* HERO BUTTONS */

.gutter-hero-buttons {
  display: flex;
  flex-wrap: wrap;

  gap: 15px;
}

.gutter-hero-buttons a {
  min-height: 58px;

  padding: 0 28px;

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

  gap: 10px;

  border-radius: 7px;

  font-size: 13px;
  font-weight: 900;

  letter-spacing: .5px;

  text-decoration: none;

  transition: .35s ease;
}

.gutter-hero .gold-btn {
  color: #080808;

  background:
    linear-gradient(
      135deg,
      #f2c65a,
      #c99427
    );

  box-shadow:
    0 10px 35px rgba(220,169,62,.20);
}

.gutter-hero .outline-btn {
  color: #fff;

  border: 1px solid rgba(255,255,255,.35);

  background: rgba(0,0,0,.28);

  backdrop-filter: blur(8px);
}

.gutter-hero-buttons a:hover {
  transform: translateY(-4px);
}


/* HERO BENEFITS */

.gutter-benefits {
  position: absolute;

  z-index: 4;

  left: 7%;
  right: 7%;
  bottom: 35px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  border-top: 1px solid rgba(220,169,62,.30);

  background:
    linear-gradient(
      90deg,
      rgba(5,5,5,.78),
      rgba(5,5,5,.50)
    );

  backdrop-filter: blur(12px);
}

.gutter-benefit {
  min-height: 88px;

  padding: 18px 22px;

  display: flex;
  align-items: center;

  gap: 15px;

  border-right:
    1px solid rgba(255,255,255,.08);
}

.gutter-benefit:last-child {
  border-right: 0;
}

.gutter-benefit i {
  color: #dca93e;

  font-size: 25px;
}

.gutter-benefit strong {
  display: block;

  margin-bottom: 5px;

  color: #fff;

  font-size: 12px;
  font-weight: 900;
}

.gutter-benefit span {
  color: rgba(255,255,255,.55);

  font-size: 11px;
}


/* ==========================================================
   GLOBAL GUTTER HEADINGS
========================================================== */

.gutter-services,
.gutter-process,
.gutter-projects,
.gutter-reviews,
.gutter-contact {
  position: relative;

  padding: 110px 7%;

  overflow: hidden;
}

.gutter-services,
.gutter-projects {
  background:
    radial-gradient(
      circle at 12% 20%,
      rgba(220,169,62,.07),
      transparent 28%
    ),
    #050505;
}

.gutter-process,
.gutter-reviews {
  background:
    radial-gradient(
      circle at 88% 60%,
      rgba(220,169,62,.06),
      transparent 30%
    ),
    #020202;
}

.gutter-page .section-heading {
  width: min(850px, 100%);

  margin: 0 auto 65px;

  text-align: center;
}

.gutter-page .section-heading > span {
  display: block;

  margin-bottom: 15px;

  color: #dca93e;

  font-size: 12px;
  font-weight: 900;

  letter-spacing: 3px;
}

.gutter-page .section-heading h2 {
  margin: 0;

  color: #fff;

  font-size: clamp(38px, 4.4vw, 67px);
  font-weight: 950;

  line-height: .98;

  letter-spacing: -2.5px;
}

.gutter-page .section-heading p {
  max-width: 680px;

  margin: 20px auto 0;

  color: rgba(255,255,255,.60);

  font-size: 15px;

  line-height: 1.7;
}


/* ==========================================================
   GUTTER SERVICES
========================================================== */

.gutter-service-grid {
  width: min(1400px, 100%);

  margin: auto;

  display: grid;

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

  gap: 22px;
}

.gutter-service-card {
  position: relative;

  overflow: hidden;

  min-height: 470px;

  border:
    1px solid rgba(220,169,62,.18);

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.012)
    );

  box-shadow:
    0 25px 55px rgba(0,0,0,.40);

  transition:
    transform .4s ease,
    border-color .4s ease,
    box-shadow .4s ease;
}

.gutter-card-image {
  height: 235px;

  overflow: hidden;
}

.gutter-card-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .7s ease;
}

.gutter-card-content {
  padding: 28px;
}

.gutter-card-content > i {
  margin-bottom: 18px;

  color: #dca93e;

  font-size: 27px;
}

.gutter-card-content h3 {
  margin: 0 0 15px;

  color: #fff;

  font-size: 21px;
  font-weight: 900;

  line-height: 1.08;
}

.gutter-card-content p {
  margin: 0;

  color: rgba(255,255,255,.58);

  font-size: 14px;
  line-height: 1.7;
}

.gutter-service-card:hover {
  transform: translateY(-10px);

  border-color:
    rgba(220,169,62,.65);

  box-shadow:
    0 30px 70px rgba(0,0,0,.55),
    0 0 25px rgba(220,169,62,.07);
}

.gutter-service-card:hover img {
  transform: scale(1.07);
}


/* ==========================================================
   WHY CHOOSE US
========================================================== */

.gutter-why {
  position: relative;

  min-height: 720px;

  display: grid;

  grid-template-columns:
    1.05fr .95fr;

  overflow: hidden;

  background: #030303;
}

.gutter-why-content {
  padding: 110px 7%;

  display: flex;
  flex-direction: column;

  justify-content: center;

  background:
    radial-gradient(
      circle at 20% 50%,
      rgba(220,169,62,.08),
      transparent 35%
    );
}

.gutter-why-content .section-label {
  color: #dca93e;

  font-size: 12px;
  font-weight: 900;

  letter-spacing: 3px;
}

.gutter-why-content h2 {
  margin: 18px 0 25px;

  color: #fff;

  font-size: clamp(42px, 4.8vw, 70px);
  font-weight: 950;

  line-height: .96;

  letter-spacing: -3px;
}

.gutter-why-content h2 span {
  display: block;

  color: #dca93e;
}

.gutter-why-content > p {
  max-width: 620px;

  margin: 0 0 18px;

  color: rgba(255,255,255,.65);

  font-size: 15px;
  line-height: 1.75;
}

.gutter-why-grid {
  margin-top: 35px;

  display: grid;

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

  gap: 16px;
}

.gutter-why-grid > div {
  padding: 20px;

  display: flex;

  gap: 15px;

  border:
    1px solid rgba(220,169,62,.18);

  border-radius: 10px;

  background:
    rgba(255,255,255,.025);
}

.gutter-why-grid i {
  color: #dca93e;

  font-size: 22px;
}

.gutter-why-grid strong {
  display: block;

  margin-bottom: 5px;

  color: #fff;

  font-size: 13px;
}

.gutter-why-grid span {
  color: rgba(255,255,255,.55);

  font-size: 11px;

  line-height: 1.5;
}

.gutter-why-image {
  min-height: 720px;

  overflow: hidden;
}

.gutter-why-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;
}


/* ==========================================================
   PROCESS
========================================================== */

.gutter-process-grid {
  width: min(1400px, 100%);

  margin: auto;

  display: grid;

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

  gap: 20px;
}

.gutter-step {
  position: relative;

  min-height: 350px;

  padding: 32px 27px;

  border:
    1px solid rgba(220,169,62,.20);

  border-radius: 14px;

  background:
    linear-gradient(
      150deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.012)
    );

  transition: .4s ease;
}

.gutter-step strong {
  display: block;

  margin-bottom: 30px;

  color: rgba(220,169,62,.40);

  font-family: Georgia, serif;

  font-size: 55px;
}

.gutter-step i {
  width: 60px;
  height: 60px;

  margin-bottom: 25px;

  display: grid;

  place-items: center;

  color: #dca93e;

  font-size: 24px;

  border:
    1px solid rgba(220,169,62,.50);

  border-radius: 50%;
}

.gutter-step h3 {
  margin: 0 0 15px;

  color: #fff;

  font-size: 15px;
  font-weight: 900;
}

.gutter-step p {
  margin: 0;

  color: rgba(255,255,255,.55);

  font-size: 13px;
  line-height: 1.7;
}

.gutter-step:hover {
  transform: translateY(-8px);

  border-color:
    rgba(220,169,62,.65);
}


/* ==========================================================
   PROJECTS
========================================================== */

.gutter-project-grid {
  width: min(1400px,100%);

  margin: auto;

  display: grid;

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

  gap: 20px;
}

.gutter-project-card {
  position: relative;

  height: 320px;

  overflow: hidden;

  border-radius: 12px;

  border:
    1px solid rgba(220,169,62,.20);
}

.gutter-project-card::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      transparent 35%,
      rgba(0,0,0,.88)
    );
}

.gutter-project-card img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform .7s ease;
}

.gutter-project-card span {
  position: absolute;

  z-index: 3;

  left: 24px;
  bottom: 22px;

  color: #fff;

  font-size: 14px;
  font-weight: 900;
}

.gutter-project-card:hover img {
  transform: scale(1.07);
}


/* ==========================================================
   REVIEWS
========================================================== */

.gutter-review-grid {
  width: min(1250px,100%);

  margin: auto;

  display: grid;

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

  gap: 20px;
}

.gutter-review-grid article {
  padding: 32px;

  border:
    1px solid rgba(220,169,62,.18);

  border-radius: 12px;

  background:
    rgba(255,255,255,.025);
}

.gutter-review-grid .stars {
  margin-bottom: 20px;

  color: #dca93e;

  letter-spacing: 5px;
}

.gutter-review-grid p {
  color: rgba(255,255,255,.68);

  font-size: 14px;
  line-height: 1.75;
}

.gutter-review-grid strong {
  color: #fff;

  font-size: 12px;
}


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

.gutter-contact {
  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(220,169,62,.10),
      transparent 35%
    ),
    #040404;
}

.gutter-form {
  width: min(850px,100%);

  margin: auto;
}

.gutter-form .form-row {
  display: grid;

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

  gap: 15px;

  margin-bottom: 15px;
}

.gutter-form input,
.gutter-form textarea {
  width: 100%;

  padding: 18px;

  color: #fff;

  border:
    1px solid rgba(255,255,255,.15);

  border-radius: 7px;

  outline: none;

  background:
    rgba(255,255,255,.035);

  font-family: inherit;
}

.gutter-form textarea {
  min-height: 150px;

  resize: vertical;
}

.gutter-form input:focus,
.gutter-form textarea:focus {
  border-color:
    rgba(220,169,62,.70);
}

.gutter-form button {
  width: 100%;

  margin-top: 15px;

  padding: 19px;

  border: 0;
  border-radius: 7px;

  cursor: pointer;

  color: #080808;

  background:
    linear-gradient(
      135deg,
      #f1c75d,
      #c89125
    );

  font-weight: 900;

  letter-spacing: 1px;
}


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

@media (max-width: 1050px) {

  .gutter-benefits {
    grid-template-columns: repeat(2,1fr);
  }

  .gutter-service-grid,
  .gutter-project-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .gutter-process-grid {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .gutter-why {
    grid-template-columns: 1fr;
  }

  .gutter-why-image {
    min-height: 500px;
  }

}


/* ==========================================================
   CELULAR
========================================================== */

@media (max-width: 650px) {

  .gutter-hero {
    min-height: 920px;

    padding:
      135px 20px
      280px;

    background-position:
      60% center;
  }

  .gutter-hero h1 {
    font-size: 50px;

    letter-spacing: -3px;
  }

  .gutter-hero-content > p {
    font-size: 15px;
  }

  .gutter-hero-buttons {
    flex-direction: column;
  }

  .gutter-hero-buttons a {
    width: 100%;
  }

  .gutter-benefits {
    left: 20px;
    right: 20px;
    bottom: 25px;

    grid-template-columns: 1fr;
  }

  .gutter-benefit {
    min-height: 60px;

    padding: 12px 15px;
  }

  .gutter-services,
  .gutter-process,
  .gutter-projects,
  .gutter-reviews,
  .gutter-contact {
    padding: 80px 20px;
  }

  .gutter-page .section-heading {
    margin-bottom: 45px;
  }

  .gutter-page .section-heading h2 {
    font-size: 40px;
  }

  .gutter-service-grid,
  .gutter-process-grid,
  .gutter-project-grid,
  .gutter-review-grid {
    grid-template-columns: 1fr;
  }

  .gutter-service-card {
    min-height: auto;
  }

  .gutter-card-image {
    height: 230px;
  }

  .gutter-why-content {
    padding: 80px 20px;
  }

  .gutter-why-content h2 {
    font-size: 43px;

    letter-spacing: -2px;
  }

  .gutter-why-grid {
    grid-template-columns: 1fr;
  }

  .gutter-why-image {
    min-height: 380px;
  }

  .gutter-project-card {
    height: 280px;
  }

  .gutter-form .form-row {
    grid-template-columns: 1fr;
  }

}
/* MISMA TIPOGRAFÍA PREMIUM EN GUTTERS */

.gutter-page,
.gutter-page button,
.gutter-page input,
.gutter-page textarea {
  font-family: "Montserrat", sans-serif !important;
}

.gutter-hero h1 {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -6px !important;
}

.gutter-hero .section-label {
  font-weight: 900 !important;
  letter-spacing: 4px !important;
}

.gutter-page .section-heading h2,
.gutter-why-content h2 {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -3px !important;
}

.gutter-card-content h3,
.gutter-step h3,
.gutter-project-card span,
.gutter-page .navbar a {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 900 !important;
}
/* =========================================
   GUTTERS HERO — PREMIUM TITLE
   ========================================= */

.gutter-hero h1 {
    font-family: "Montserrat", Arial, sans-serif !important;

    font-size: clamp(58px, 7.2vw, 118px) !important;
    font-weight: 900 !important;

    line-height: 0.82 !important;
    letter-spacing: -7px !important;

    text-transform: uppercase;
    margin: 18px 0 28px !important;

    max-width: 1050px;
}

/* GUTTERS BUILT */
.gutter-hero h1 .white,
.gutter-hero h1 .hero-white {
    color: #ffffff !important;
    display: block;
}

/* TO PROTECT */
.gutter-hero h1 .gold,
.gutter-hero h1 .hero-gold {
    display: block;

    color: #ffd000 !important;

    text-shadow:
        0 0 8px rgba(255, 208, 0, 0.50),
        0 0 22px rgba(255, 190, 0, 0.30),
        0 4px 20px rgba(0, 0, 0, 0.55);
}

/* PREMIUM GUTTER SERVICES */
.gutter-hero .section-label,
.gutter-hero .eyebrow {
    font-family: "Montserrat", Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 900 !important;

    letter-spacing: 4px !important;
    text-transform: uppercase;

    color: #ffd000 !important;

    text-shadow: 0 0 15px rgba(255, 200, 0, 0.35);
}

/* DESCRIPTION */
.gutter-hero p {
    font-family: "Montserrat", Arial, sans-serif !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;
    max-width: 720px;
}

/* MOBILE */
@media (max-width: 768px) {

    .gutter-hero h1 {
        font-size: clamp(46px, 14vw, 72px) !important;
        letter-spacing: -4px !important;
        line-height: 0.86 !important;
    }

}
/* BRILLO PREMIUM DEL TITULO DE GUTTERS */

.gutter-title span {
  text-shadow:
    0 2px 2px rgba(0, 0, 0, 0.65),
    0 0 8px rgba(255, 255, 255, 0.12);
}

.gutter-title .gold {
  color: #ffd200 !important;

  text-shadow:
    0 0 6px rgba(255, 210, 0, 0.95),
    0 0 14px rgba(255, 196, 0, 0.75),
    0 0 28px rgba(255, 184, 0, 0.45),
    0 0 55px rgba(255, 170, 0, 0.22) !important;
}

.gutter-hero .section-label {
  color: #ffd200 !important;

  text-shadow:
    0 0 5px rgba(255, 210, 0, 0.85),
    0 0 14px rgba(255, 190, 0, 0.45) !important;
}
/* =========================================
   GUTTERS HERO — PREMIUM 3D TITLE
   ========================================= */

.gutter-page .gutter-hero .gutter-title {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -4px !important;
  line-height: 0.84 !important;
  font-size: clamp(60px, 7.5vw, 118px) !important;
}

/* GUTTERS BUILT — SILVER METALLIC 3D */
.gutter-page .gutter-hero .gutter-title span:not(.gold) {
  display: block !important;

  color: transparent !important;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f8f8f8 15%,
      #d8d8d8 34%,
      #ffffff 48%,
      #a9a9a9 68%,
      #eeeeee 84%,
      #8d8d8d 100%
    ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;

  -webkit-text-fill-color: transparent !important;

  filter:
    drop-shadow(0px 3px 0px #777)
    drop-shadow(0px 7px 0px #444)
    drop-shadow(0px 12px 12px rgba(0,0,0,.75)) !important;
}

/* TO PROTECT — GOLD METALLIC 3D */
.gutter-page .gutter-hero .gutter-title .gold {
  display: block !important;

  color: transparent !important;

  background:
    linear-gradient(
      180deg,
      #fff7a8 0%,
      #ffe54c 12%,
      #ffc400 35%,
      #fff06a 48%,
      #e9a900 67%,
      #ffd900 82%,
      #a86c00 100%
    ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;

  -webkit-text-fill-color: transparent !important;

  filter:
    drop-shadow(0px 3px 0px #d29a00)
    drop-shadow(0px 7px 0px #9b6500)
    drop-shadow(0px 12px 14px rgba(0,0,0,.8))
    drop-shadow(0px 0px 18px rgba(255,200,0,.28)) !important;
}

/* GOLD LINE UNDER TITLE */
.gutter-page .gutter-hero .gutter-title .gold::after {
  content: "";
  display: block;
  width: 72%;
  height: 5px;
  margin-top: 8px;

  background: linear-gradient(
    90deg,
    #9b6500,
    #ffd900,
    #fff176,
    #d79c00
  );

  box-shadow:
    0 3px 0 #805000,
    0 0 14px rgba(255, 200, 0, .5);
}

/* MOBILE */
@media (max-width: 768px) {
  .gutter-page .gutter-hero .gutter-title {
    font-size: clamp(48px, 14vw, 76px) !important;
    letter-spacing: -3px !important;
    line-height: .87 !important;
  }
}
/* GUTTERS — GOLD CLEANER / LESS GLOW */

.gutter-page .gutter-hero .gutter-title .gold {
  filter:
    drop-shadow(0px 3px 0px #b77b00)
    drop-shadow(0px 6px 0px #805500)
    drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.55))
    drop-shadow(0px 0px 5px rgba(255, 200, 0, 0.18))
    !important;
}

/* Línea dorada más elegante */
.gutter-page .gutter-hero .gutter-title .gold::after {
  box-shadow:
    0 2px 0 #805000,
    0 0 5px rgba(255, 200, 0, 0.22) !important;
}
/* =========================================
   GUTTERS GOLD — CLEAN + ANIMATED SHINE
========================================= */

.gutter-page .gutter-hero .gutter-title .gold {
  position: relative;

  background:
    linear-gradient(
      180deg,
      #fff7a5 0%,
      #ffd83d 22%,
      #eab000 55%,
      #b87900 100%
    ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;

  /* MUCHO MENOS GLOW */
  filter:
    drop-shadow(0 3px 0 #a66f00)
    drop-shadow(0 7px 0 #654300)
    drop-shadow(0 10px 12px rgba(0,0,0,.48)) !important;

  overflow: hidden;
}

/* QUITAMOS EL BRILLO FIJO DE LA LINEA */
.gutter-page .gutter-hero .gutter-title .gold::after {
  box-shadow: none !important;
}

/* REFLEJO QUE PASA POR LA LETRA */
.gutter-page .gutter-hero .gutter-title .gold::before {
  content: "";

  position: absolute;
  top: -20%;
  left: -35%;

  width: 22%;
  height: 140%;

  background:
    linear-gradient(
      100deg,
      transparent 0%,
      rgba(255,255,255,0.10) 25%,
      rgba(255,255,255,0.75) 50%,
      rgba(255,255,255,0.10) 75%,
      transparent 100%
    );

  transform: skewX(-18deg);

  animation: gutterGoldShine 4.8s ease-in-out infinite;

  pointer-events: none;
}

/* ANIMACION */
@keyframes gutterGoldShine {

  0% {
    left: -35%;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  42% {
    left: 115%;
    opacity: 1;
  }

  55%,
  100% {
    left: 115%;
    opacity: 0;
  }

}

/* MOVIMIENTO SUAVE DEL TITULO COMPLETO */
.gutter-title {
  animation: gutterTitleFloat 5s ease-in-out infinite;
}

@keyframes gutterTitleFloat {

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

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

}
/* =========================================
   FIX FINAL — GOLD SIN TANTO GLOW
========================================= */

.gutter-page .gutter-hero .gutter-title .gold {
  background: linear-gradient(
    180deg,
    #fff08a 0%,
    #ffd633 20%,
    #e8ad00 55%,
    #a96d00 100%
  ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;

  /* 3D / SOMBRA — SIN LUZ EXAGERADA */
  filter:
    drop-shadow(0 2px 0 #b47b00)
    drop-shadow(0 5px 0 #805400)
    drop-shadow(0 8px 6px rgba(0,0,0,.55))
    !important;

  text-shadow: none !important;
}

/* LINEA DORADA */
.gutter-page .gutter-hero .gutter-title .gold::after {
  box-shadow: none !important;
  filter: none !important;
}

/* BRILLO ANIMADO MUY SUAVE */
.gutter-page .gutter-hero .gutter-title .gold::before {
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,0.05) 35%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.05) 65%,
    transparent 100%
  ) !important;

  animation: gutterGoldShine 5s ease-in-out infinite !important;
}
/* ===============================
   WINDOW OPTIONS - PREMIUM CARDS
================================ */

.window-options {
  padding: 90px 4%;
  background:
    radial-gradient(circle at 50% 0%, rgba(220, 165, 15, 0.08), transparent 35%),
    #050505;
}

.window-section-heading {
  text-align: center;
  margin-bottom: 45px;
}

.window-section-heading span {
  color: #f0b91a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 4px;
}

.window-section-heading h2 {
  margin-top: 12px;
  color: #fff;
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 800;
  letter-spacing: -2px;
}

.window-options-grid {
  max-width: 1400px;
  margin: auto;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.window-option-card {
  position: relative;
  overflow: hidden;

  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.045),
    rgba(255,255,255,0.01)
  );

  border: 1px solid rgba(228, 173, 20, 0.38);
  border-radius: 10px;

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.window-option-card:hover {
  transform: translateY(-8px);

  border-color: #e6b31d;

  box-shadow:
    0 18px 40px rgba(0,0,0,0.5),
    0 0 24px rgba(220,165,15,0.10);
}

.window-option-card img {
  width: 100%;
  height: 260px;

  display: block;
  object-fit: cover;

  transition: transform 0.6s ease;
}

.window-option-card:hover img {
  transform: scale(1.06);
}

.window-option-card h3 {
  margin: 0;
  padding: 22px;

  text-align: center;

  color: #fff;

  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
}

/* CELULAR */

@media (max-width: 900px) {
  .window-options-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .window-options-grid {
    grid-template-columns: 1fr;
  }

  .window-option-card img {
    height: 230px;
  }
}
/* =========================================================
   WINDOWS PAGE FIX
========================================================= */

.window-page {
  margin: 0;
  background: #050505;
  color: #fff;
  font-family: "Montserrat", sans-serif;
}

.window-page * {
  box-sizing: border-box;
}


/* HERO */

.window-hero {
  position: relative;
  min-height: 760px;

  display: flex;
  align-items: center;

  padding: 110px 7% 80px;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.83) 36%,
      rgba(0,0,0,.35) 68%,
      rgba(0,0,0,.15) 100%
    ),
    url("assets/window-hero.jpg");

  background-size: cover;
  background-position: center;

  overflow: hidden;
}

.window-hero-content {
  position: relative;
  z-index: 2;

  width: min(720px, 100%);
}

.window-label {
  display: inline-block;

  color: #e7b51f;

  font-size: 14px;
  font-weight: 800;

  letter-spacing: 4px;

  margin-bottom: 25px;
}


/* BIG TITLE */

.window-title {
  display: flex;
  flex-direction: column;

  margin: 0;

  font-size: clamp(68px, 7vw, 115px);
  font-weight: 900;

  line-height: .80;
  letter-spacing: -6px;

  text-transform: uppercase;
}

.window-title > span:not(.window-gold) {
  display: block;

  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #f5f5f5 38%,
      #c9c9c9 67%,
      #8f8f8f 100%
    );

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

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

  filter:
    drop-shadow(0 3px 0 #777)
    drop-shadow(0 7px 0 #333)
    drop-shadow(0 12px 10px rgba(0,0,0,.65));
}

.window-gold {
  display: block;

  margin-top: 12px;

  background:
    linear-gradient(
      180deg,
      #ffe77d 0%,
      #e8b526 35%,
      #bd8107 75%,
      #785000 100%
    );

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

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

  filter:
    drop-shadow(0 3px 0 #8d6000)
    drop-shadow(0 7px 0 #523600)
    drop-shadow(0 11px 9px rgba(0,0,0,.65));
}


/* HERO TEXT */

.window-hero-text {
  max-width: 620px;

  margin: 32px 0;

  color: rgba(255,255,255,.88);

  font-size: 17px;
  font-weight: 500;

  line-height: 1.65;
}


/* BUTTONS */

.window-hero-buttons {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.window-gold-btn,
.window-outline-btn {
  min-height: 58px;

  padding: 0 30px;

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

  text-decoration: none;

  font-size: 13px;
  font-weight: 800;

  border-radius: 4px;
}

.window-gold-btn {
  color: #050505;

  background:
    linear-gradient(
      135deg,
      #ffd844,
      #dca20c
    );

  border: 1px solid #e8b51c;
}

.window-outline-btn {
  color: #fff;

  background: rgba(0,0,0,.30);

  border: 1px solid rgba(255,255,255,.55);
}


/* BENEFITS */

.window-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  padding: 30px 7%;

  background: #070707;

  border-top: 1px solid rgba(224,172,22,.25);
  border-bottom: 1px solid rgba(224,172,22,.25);
}

.window-benefit {
  display: flex;
  align-items: center;

  gap: 18px;

  padding: 20px 30px;

  border-right: 1px solid rgba(224,172,22,.18);
}

.window-benefit:last-child {
  border-right: none;
}

.window-benefit i {
  color: #e5b21c;

  font-size: 28px;
}

.window-benefit h3 {
  margin: 0 0 5px;

  color: #f0bd28;

  font-size: 13px;
}

.window-benefit p {
  margin: 0;

  color: #ccc;

  font-size: 12px;
}


/* WINDOW OPTIONS */

.window-options {
  padding: 100px 5%;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(210,160,15,.08),
      transparent 35%
    ),
    #050505;
}

.window-section-heading {
  max-width: 850px;

  margin: 0 auto 50px;

  text-align: center;
}

.window-section-heading > span {
  color: #e8b41b;

  font-size: 13px;
  font-weight: 800;

  letter-spacing: 4px;
}

.window-section-heading h2 {
  margin: 12px 0;

  color: #fff;

  font-size: clamp(38px, 4vw, 58px);
  font-weight: 800;
}

.window-section-heading h2 strong {
  color: #e3ad18;
}

.window-section-heading p {
  max-width: 650px;

  margin: auto;

  color: #aaa;

  line-height: 1.7;
}


/* CARDS */

.window-options-grid {
  max-width: 1450px;

  margin: auto;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  gap: 20px;
}

.window-option-card {
  overflow: hidden;

  border: 1px solid rgba(225,170,20,.38);
  border-radius: 9px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.01)
    );

  transition: .35s ease;
}

.window-option-card:hover {
  transform: translateY(-7px);

  border-color: #e8b51d;
}

.window-card-image {
  overflow: hidden;
}

.window-card-image img {
  width: 100%;
  height: 250px;

  display: block;

  object-fit: cover;

  transition: .6s ease;
}

.window-option-card:hover img {
  transform: scale(1.06);
}

.window-card-content {
  padding: 25px;
}

.window-card-content > span {
  color: #dca817;

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 2px;
}

.window-card-content h3 {
  margin: 9px 0 13px;

  color: #fff;

  font-size: 19px;
}

.window-card-content p {
  min-height: 70px;

  margin: 0 0 20px;

  color: #aaa;

  font-size: 13px;

  line-height: 1.6;
}

.window-card-content a {
  color: #e7b31c;

  text-decoration: none;

  font-size: 11px;
  font-weight: 800;
}


/* INSTALLATION */

.window-installation {
  max-width: 1450px;

  margin: auto;

  padding: 110px 6%;

  display: grid;
  grid-template-columns: 1.15fr .85fr;

  gap: 80px;

  align-items: center;
}

.window-installation-image {
  overflow: hidden;

  border: 1px solid rgba(224,172,22,.45);
  border-radius: 8px;
}

.window-installation-image img {
  width: 100%;
  min-height: 500px;

  display: block;

  object-fit: cover;
}

.window-installation-content > span {
  color: #e5b21d;

  font-size: 13px;
  font-weight: 800;

  letter-spacing: 3px;
}

.window-installation-content h2 {
  margin: 15px 0 25px;

  font-size: clamp(42px, 4vw, 65px);

  line-height: 1.02;
}

.window-installation-content h2 strong {
  color: #e2ad1a;
}

.window-installation-content > p {
  color: #bbb;

  line-height: 1.8;
}

.window-install-list {
  margin-top: 30px;

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

  gap: 14px;
}

.window-install-list div {
  color: #eee;

  font-size: 13px;
}

.window-install-list i {
  color: #e6b31c;

  margin-right: 8px;
}


/* CONTACT */

.window-contact {
  padding: 100px 7%;

  display: grid;
  grid-template-columns: .8fr 1.2fr;

  gap: 75px;

  align-items: center;

  background: #070707;

  border-top: 1px solid rgba(224,172,22,.25);
}

.window-contact-heading > span {
  color: #e6b31c;

  font-size: 13px;
  font-weight: 800;

  letter-spacing: 3px;
}

.window-contact-heading h2 {
  margin: 12px 0 20px;

  font-size: clamp(42px, 4vw, 62px);

  line-height: 1.05;
}

.window-contact-heading strong {
  color: #e4af1a;
}

.window-contact-heading p {
  color: #aaa;

  line-height: 1.7;
}

.window-form {
  padding: 35px;

  border: 1px solid rgba(225,173,21,.30);

  background: rgba(255,255,255,.02);
}

.window-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 15px;

  margin-bottom: 15px;
}

.window-form input,
.window-form textarea {
  width: 100%;

  padding: 18px;

  color: #fff;

  background: #0b0b0b;

  border: 1px solid rgba(255,255,255,.15);

  outline: none;
}

.window-form textarea {
  min-height: 150px;

  resize: vertical;

  margin-bottom: 15px;
}

.window-form button {
  width: 100%;
  min-height: 58px;

  border: none;

  cursor: pointer;

  font-weight: 900;

  background:
    linear-gradient(
      135deg,
      #ffd842,
      #dba10a
    );
}


/* RESPONSIVE */

@media (max-width: 1000px) {

  .window-options-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .window-installation,
  .window-contact {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 700px) {

  .window-hero {
    min-height: 700px;

    padding: 100px 22px 60px;
  }

  .window-title {
    font-size: clamp(50px, 15vw, 72px);

    letter-spacing: -3px;
  }

  .window-benefits,
  .window-options-grid,
  .window-form-row,
  .window-install-list {
    grid-template-columns: 1fr;
  }

  .window-benefit {
    border-right: none;

    border-bottom: 1px solid rgba(225,172,20,.14);
  }

  .window-options,
  .window-installation,
  .window-contact {
    padding-left: 22px;
    padding-right: 22px;
  }

}
/* =========================================
   WINDOWS HERO TITLE — PREMIUM 3D EFFECT
========================================= */

.window-page .window-title {
  perspective: 900px;
}

/* BLANCO / PLATA 3D */
.window-page .window-title > span:not(.window-gold) {
  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #f7f7f7 24%,
      #d8d8d8 50%,
      #a6a6a6 76%,
      #eeeeee 100%
    ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;

  filter:
    drop-shadow(0 2px 0 #c9c9c9)
    drop-shadow(0 4px 0 #999)
    drop-shadow(0 7px 0 #5e5e5e)
    drop-shadow(0 12px 10px rgba(0,0,0,.6)) !important;
}

/* DORADO 3D */
.window-page .window-gold {
  position: relative;

  background:
    linear-gradient(
      180deg,
      #fff1a2 0%,
      #f8d44a 18%,
      #e1ad17 48%,
      #b77600 78%,
      #7c4c00 100%
    ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;

  filter:
    drop-shadow(0 2px 0 #d19a00)
    drop-shadow(0 5px 0 #9b6700)
    drop-shadow(0 8px 0 #634000)
    drop-shadow(0 13px 10px rgba(0,0,0,.65)) !important;

  overflow: hidden;
}

/* REFLEJO ANIMADO SUAVE */
.window-page .window-gold::before {
  content: "";

  position: absolute;
  top: -15%;
  left: -25%;

  width: 14%;
  height: 130%;

  background:
    linear-gradient(
      105deg,
      transparent,
      rgba(255,255,255,.34),
      transparent
    );

  transform: skewX(-18deg);

  animation: windowGoldShine 6s ease-in-out infinite;

  pointer-events: none;
}

@keyframes windowGoldShine {
  0%, 68% {
    left: -25%;
    opacity: 0;
  }

  72% {
    opacity: .7;
  }

  90% {
    left: 110%;
    opacity: .7;
  }

  100% {
    left: 110%;
    opacity: 0;
  }
}

/* =========================================
   WINDOWS NAVBAR DROPDOWN - FINAL FIX
========================================= */

.window-page .services-dropdown {
  position: relative !important;
  display: inline-block !important;
}

/* menú oculto */
.window-page .services-menu {
  position: absolute !important;

  top: 100% !important;
  left: 0 !important;

  width: 190px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  padding: 12px 0 !important;
  margin-top: 12px !important;

  background: rgba(5, 5, 5, 0.98) !important;

  border: 1px solid rgba(224, 174, 25, 0.35) !important;
  border-radius: 7px !important;

  box-shadow:
    0 18px 40px rgba(0,0,0,.65),
    0 0 20px rgba(210,160,15,.08) !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transform: translateY(8px) !important;

  transition:
    opacity .22s ease,
    transform .22s ease,
    visibility .22s ease !important;

  z-index: 99999 !important;
}


/* SHOW */
.window-page .services-dropdown:hover .services-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  transform: translateY(0) !important;
}


/* LINKS ONE UNDER ANOTHER */
.window-page .services-menu a {
  display: block !important;

  width: 100% !important;

  padding: 12px 18px !important;
  margin: 0 !important;

  white-space: nowrap !important;

  color: #fff !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;

  text-decoration: none !important;
}


/* HOVER GOLD */
.window-page .services-menu a:hover {
  color: #f0ba20 !important;

  background:
    linear-gradient(
      90deg,
      rgba(236,181,25,.10),
      transparent
    ) !important;
}
/* =========================================
   WINDOWS - FREE ESTIMATE BUTTON
========================================= */

.window-page .nav-estimate-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 11px !important;

  padding: 15px 23px !important;

  background: linear-gradient(
    135deg,
    #ffd83d 0%,
    #e5ad18 100%
  ) !important;

  color: #111 !important;

  border: 1px solid rgba(255, 220, 90, 0.75) !important;
  border-radius: 2px !important;

  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1.3px !important;

  text-decoration: none !important;

  box-shadow:
    0 7px 22px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.30) !important;

  transition:
    transform .25s ease,
    box-shadow .25s ease !important;
}

.window-page .nav-estimate-btn i {
  font-size: 13px !important;
  color: #222 !important;
}

.window-page .nav-estimate-btn:hover {
  transform: translateY(-2px) !important;

  box-shadow:
    0 10px 28px rgba(0,0,0,.40),
    0 0 18px rgba(230,175,20,.25) !important;
}
.contact select {
  color: #fff !important;
  background: rgba(0,0,0,.35) !important;
}

.contact select option {
  color: #111 !important;
  background: #fff !important;
}

/* =========================================
   PREMIUM FORM SUCCESS POPUP
========================================= */

.form-success {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 25px;

  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  z-index: 99999;
}

.form-success.active {
  display: flex;
}

.form-success-box {
  width: min(520px, 100%);
  padding: 55px 40px;

  text-align: center;

  background:
    radial-gradient(
      circle at top,
      rgba(230, 175, 20, 0.16),
      transparent 45%
    ),
    #080808;

  border: 1px solid rgba(230, 175, 20, 0.45);
  border-radius: 16px;

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.8),
    0 0 45px rgba(230, 175, 20, 0.10);
}

.success-check {
  width: 72px;
  height: 72px;
  margin: 0 auto 25px;

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

  border-radius: 50%;

  background: linear-gradient(
    135deg,
    #ffe36b,
    #e6af14,
    #b77b00
  );

  color: #080808;
  font-size: 28px;

  box-shadow: 0 0 35px rgba(230, 175, 20, 0.3);
}

.form-success-box > span {
  color: #e6af14;

  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
}

.form-success-box h3 {
  margin: 12px 0 16px;

  color: #fff;

  font-size: clamp(34px, 6vw, 46px);
  font-weight: 900;
  letter-spacing: -1px;
}

.form-success-box p {
  max-width: 400px;
  margin: 0 auto 30px;

  color: #bcbcbc;

  font-size: 15px;
  line-height: 1.7;
}

.form-success-box button {
  padding: 15px 38px;

  border: 0;
  border-radius: 6px;

  background: linear-gradient(
    135deg,
    #ffe36b,
    #e6af14
  );

  color: #080808;

  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;

  cursor: pointer;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.form-success-box button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 10px 30px rgba(230, 175, 20, 0.25);
}
/* ===== HERO FINAL PREMIUM ===== */

.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.96) 0%,
      rgba(0,0,0,.80) 35%,
      rgba(0,0,0,.25) 68%,
      rgba(0,0,0,.08) 100%
    );
}

.hero-content {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 760px;
  margin-left: 6%;
  padding-top: 80px;
}

.hero-tag {
  display: block;
  color: #f5c400;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 18px;
}

.hero-content h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(58px, 7vw, 105px);
  line-height: .86;
  letter-spacing: -4px;
  font-weight: 900;
  text-transform: uppercase;
}

.hero-content h1 span {
  display: block;
  color: #f5c400;
  margin-top: 10px;
  text-shadow: 0 0 35px rgba(245,196,0,.35);
}

.hero-content > p {
  max-width: 620px;
  color: #f1f1f1;
  font-size: 17px;
  line-height: 1.65;
  margin: 25px 0 15px;
}

.hero-location {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 16px;
  margin: 18px 0 28px;
}

.hero-location i {
  color: #f5c400;
  font-size: 21px;
}

.hero-location strong {
  color: #f5c400;
}

.hero-buttons {
  display: flex;
  gap: 18px;
  margin-bottom: 32px;
}

.hero-buttons a {
  padding: 18px 30px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.hero-badges {
  display: flex;
  align-items: center;
  gap: 30px;
}

.hero-badges div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.hero-badges i {
  color: #f5c400;
  font-size: 22px;
}

@media (max-width: 900px) {

  .hero-content {
    margin-left: 7%;
    margin-right: 7%;
    padding-top: 120px;
  }

  .hero-content h1 {
    font-size: clamp(48px, 12vw, 75px);
    letter-spacing: -2px;
  }

  .hero-buttons {
    flex-wrap: wrap;
  }

  .hero-badges {
    flex-wrap: wrap;
    gap: 18px;
  }
}
.hero-title {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.hero-name {
  color: #fff;
}

.hero-exteriors {
  display: block;
  color: #f5c400;
  text-align: center;
  width: 100%;
}
/* ===== HERO TITLE FINAL ===== */

.hero-title {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: max-content !important;
  max-width: none !important;
  margin: 0 !important;

  font-size: clamp(58px, 6vw, 88px) !important;
  line-height: 0.88 !important;
  letter-spacing: -3px !important;
  text-transform: uppercase !important;
}
.hero-seo {
  display: block !important;
  width: 100% !important;
  margin-top: 16px !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  letter-spacing: 2px !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.88) !important;
}
/* MASTERS MIND - SILVER METALLIC */
.hero-title .hero-name {
  display: block !important;
  width: 100% !important;
  white-space: nowrap !important;
  text-align: center !important;

  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #ececec 20%,
    #b7b7b7 45%,
    #7f7f7f 62%,
    #d8d8d8 82%,
    #ffffff 100%
  ) !important;

  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;

  filter: drop-shadow(0 4px 12px rgba(255,255,255,0.10));
}

/* EXTERIORS - GOLD */
.hero-title .hero-exteriors {
  display: block !important;
  width: 100% !important;
  white-space: nowrap !important;
  text-align: center !important;

  margin-top: 10px !important;

  background: linear-gradient(
    180deg,
    #fff3a0 0%,
    #f5c400 28%,
    #d69b00 60%,
    #ffcf24 82%,
    #f5c400 100%
  ) !important;

  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;

  filter: drop-shadow(0 0 18px rgba(245,196,0,0.35));
}

/* MOBILE */
@media (max-width: 900px) {
  .hero-title {
    font-size: clamp(46px, 11vw, 72px) !important;
    letter-spacing: -2px !important;
  }

  .hero-title .hero-exteriors {
    margin-top: 8px !important;
  }
}
/* ===== BRUTAL EFFECT FOR HERO TITLE ===== */

.hero-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 18px 0 18px;
  line-height: 0.9;
  position: relative;
  z-index: 2;
}

.hero-title .title-line {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  letter-spacing: -2px;
  text-transform: uppercase;
  position: relative;
}

/* MASTERS MIND - silver / chrome brutal effect */
.hero-title .title-main {
  font-size: clamp(56px, 8vw, 122px);
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f2f2f2 18%,
    #d9d9d9 38%,
    #bcbcbc 52%,
    #ffffff 68%,
    #9f9f9f 85%,
    #f5f5f5 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 2px 0 rgba(255,255,255,0.18),
    0 4px 8px rgba(0,0,0,0.35),
    0 10px 28px rgba(255,255,255,0.10),
    0 0 35px rgba(255,255,255,0.08);
  filter: drop-shadow(0 0 14px rgba(255,255,255,0.08));
}

/* EXTERIORS - gold glowing effect */
.hero-title .title-accent {
  font-size: clamp(58px, 8.4vw, 128px);
  background: linear-gradient(
    180deg,
    #fff3a0 0%,
    #ffd84d 18%,
    #f5c400 42%,
    #ffdf5a 62%,
    #b8860b 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 2px 0 rgba(255,255,255,0.12),
    0 5px 12px rgba(0,0,0,0.45),
    0 0 18px rgba(245,196,0,0.45),
    0 0 35px rgba(245,196,0,0.28),
    0 0 60px rgba(245,196,0,0.18);
  filter: drop-shadow(0 0 18px rgba(245,196,0,0.28));
}

/* gold line under title */
.hero-title::after {
  content: "";
  width: 260px;
  max-width: 55%;
  height: 3px;
  margin-top: 10px;
  background: linear-gradient(90deg, #f5c400, #ffe27a, transparent);
  box-shadow: 0 0 18px rgba(245,196,0,0.45);
  border-radius: 999px;
}

/* shine effect */
.hero-title .title-main::after,
.hero-title .title-accent::after {
  content: "";
  position: absolute;
  top: 0;
  left: -20%;
  width: 28%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.05) 20%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0.08) 80%,
    transparent 100%
  );
  transform: skewX(-22deg);
  animation: shineSweep 4.5s ease-in-out infinite;
  pointer-events: none;
}

.hero-title .title-accent::after {
  animation-delay: 0.8s;
}

/* subtle pulse */
.hero-title .title-main {
  animation: silverPulse 3s ease-in-out infinite;
}

.hero-title .title-accent {
  animation: goldPulse 2.8s ease-in-out infinite;
}

@keyframes shineSweep {
  0% {
    left: -30%;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  30% {
    left: 110%;
    opacity: 0;
  }
  100% {
    left: 110%;
    opacity: 0;
  }
}

@keyframes silverPulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.08));
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(255,255,255,0.18));
  }
}

@keyframes goldPulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(245,196,0,0.20));
  }
  50% {
    filter: drop-shadow(0 0 22px rgba(245,196,0,0.42));
  }
}

/* responsive */
@media (max-width: 768px) {
  .hero-title {
    gap: 0;
    margin: 14px 0 14px;
  }

  .hero-title .title-main {
    font-size: clamp(42px, 11vw, 72px);
    letter-spacing: -1px;
  }

  .hero-title .title-accent {
    font-size: clamp(44px, 11.5vw, 76px);
    letter-spacing: -1px;
  }

  .hero-title::after {
    width: 180px;
    margin-top: 8px;
  }
}
.google-review-btn {
  display: block;
  width: fit-content;
  margin: 35px auto 0;
  padding: 14px 28px;

  color: #000;
  background: linear-gradient(135deg, #f5c542, #d4a017);

  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.5px;

  border-radius: 6px;
  border: 1px solid #f5c542;

  transition: 0.3s ease;
  box-shadow: 0 0 18px rgba(245, 197, 66, 0.25);
}

.google-review-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 28px rgba(245, 197, 66, 0.45);
}
/* =========================
   BEFORE & AFTER
========================= */

.before-after {
  padding: 100px 7%;
  background:
    radial-gradient(circle at center, rgba(212, 160, 23, 0.08), transparent 45%),
    #080808;
}

.before-after .section-title {
  text-align: center;
  margin-bottom: 45px;
}

.before-after .section-title span {
  color: #d4a017;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 14px;
}

.before-after .section-title h2 {
  color: #fff;
  font-size: clamp(38px, 5vw, 64px);
  margin: 8px 0 12px;
  text-transform: uppercase;
}

.before-after .section-title p {
  color: #bdbdbd;
  font-size: 17px;
}

.ba-wrapper {
  position: relative;
  width: min(1100px, 100%);
  height: 560px;
  margin: auto;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(212, 160, 23, 0.55);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.65),
    0 0 35px rgba(212, 160, 23, 0.12);
  cursor: ew-resize;
  user-select: none;
}

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

.ba-after-layer {
  position: absolute;
  inset: 0;
  width: 50%;
  overflow: hidden;
}

.ba-after-img {
  width: 1100px;
  max-width: none;
}

.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #d4a017;
  transform: translateX(-50%);
  box-shadow: 0 0 15px rgba(212, 160, 23, 0.7);
}

.ba-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0a0a0a;
  color: #f5c542;
  border: 2px solid #f5c542;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 0 25px rgba(245, 197, 66, 0.35);
}

.ba-label {
  position: absolute;
  top: 22px;
  z-index: 5;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
}

.ba-label-before {
  left: 22px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.ba-label-after {
  right: 22px;
  background: #d4a017;
  color: #000;
}

@media (max-width: 768px) {
  .before-after {
    padding: 70px 18px;
  }

  .ba-wrapper {
    height: 380px;
    border-radius: 14px;
  }

  .ba-after-img {
    width: calc(100vw - 36px);
  }

  .ba-handle {
    width: 46px;
    height: 46px;
  }
}
/* =========================================================
   INSURANCE CLAIMS PAGE
========================================================= */

.insurance-page {
  margin: 0;
  background: #050505;
  color: #fff;
  overflow-x: hidden;
}

.insurance-page * {
  box-sizing: border-box;
}


/* NAV */

.insurance-nav {
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;

  padding: 0 6%;

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

  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.75),
    transparent
  );
}

.insurance-logo img {
  width: 185px;
}

.insurance-nav nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

.insurance-nav nav a {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .7px;
}

.insurance-nav-btn {
  padding: 14px 22px;
  border: 1px solid #d4a017;
  color: #f3c64b !important;
}


/* HERO */

.insurance-hero {
  min-height: 100vh;
  position: relative;

  display: flex;
  align-items: center;

  padding: 150px 7% 100px;

  background:
    url("assets/roofing-project.jpg")
    center / cover no-repeat;
}

.insurance-hero-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.97) 0%,
      rgba(0,0,0,.82) 45%,
      rgba(0,0,0,.25) 100%
    );
}

.insurance-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.insurance-eyebrow {
  color: #d4a017;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 3px;
}

.insurance-hero h1 {
  font-size: clamp(58px, 7.8vw, 112px);
  line-height: .9;
  margin: 24px 0;
  font-weight: 900;
}

.insurance-hero h1 strong {
  display: block;
  color: #d4a017;
}

.insurance-hero-content > p {
  max-width: 670px;
  color: #cacaca;
  line-height: 1.8;
  font-size: 17px;
}

.insurance-hero-buttons {
  display: flex;
  gap: 16px;
  margin-top: 38px;
}

.insurance-btn-primary,
.insurance-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 20px;

  padding: 17px 28px;

  text-decoration: none;
  font-weight: 900;
  letter-spacing: .5px;
  font-size: 13px;

  transition: .3s ease;
}

.insurance-btn-primary {
  color: #080808;
  background:
    linear-gradient(135deg,#f3c64b,#b98510);
}

.insurance-btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(212,160,23,.3);
}

.insurance-btn-secondary {
  color: #fff;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
}

.insurance-hero-trust {
  display: flex;
  gap: 55px;
  margin-top: 65px;
}

.insurance-hero-trust div {
  display: flex;
  flex-direction: column;
}

.insurance-hero-trust strong {
  color: #d4a017;
  font-size: 20px;
}

.insurance-hero-trust span {
  color: #aaa;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}


/* SECTION TITLE */

.insurance-section-title {
  max-width: 800px;
  margin: 0 auto 65px;
  text-align: center;
}

.insurance-section-title > span {
  color: #d4a017;
  font-weight: 900;
  letter-spacing: 3px;
  font-size: 12px;
}

.insurance-section-title h2 {
  font-size: clamp(40px,5vw,70px);
  line-height: 1;
  margin: 15px 0 20px;
}

.insurance-section-title h2 strong {
  color: #d4a017;
}

.insurance-section-title p {
  color: #999;
  line-height: 1.7;
}


/* DAMAGE */

.insurance-damage {
  padding: 120px 7%;
  background:
    radial-gradient(circle at center,
      rgba(212,160,23,.07),
      transparent 45%
    ),
    #080808;
}

.insurance-damage-grid {
  max-width: 1300px;
  margin: auto;

  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
}

.insurance-damage-card {
  position: relative;
  min-height: 340px;

  padding: 36px 30px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.015)
    );

  border: 1px solid rgba(255,255,255,.09);

  transition: .4s ease;
  overflow: hidden;
}

.insurance-damage-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 0%;
  height: 2px;

  background: #d4a017;

  transition: .4s;
}

.insurance-damage-card:hover {
  transform: translateY(-10px);
  border-color: rgba(212,160,23,.55);
}

.insurance-damage-card:hover::after {
  width: 100%;
}

.insurance-card-icon {
  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(212,160,23,.4);

  color: #d4a017;

  font-size: 25px;

  margin-bottom: 55px;
}

.insurance-damage-card > span {
  position: absolute;
  top: 28px;
  right: 28px;

  color: rgba(255,255,255,.15);
  font-weight: 900;
}

.insurance-damage-card h3 {
  font-size: 24px;
  margin-bottom: 15px;
}

.insurance-damage-card p {
  color: #999;
  line-height: 1.7;
}


/* PROCESS */

.insurance-process {
  position: relative;
  padding: 130px 7%;
  background: #050505;
}

.insurance-process-line {
  max-width: 1050px;
  margin: auto;
}

.insurance-process-step {
  display: grid;
  grid-template-columns: 100px 1fr;

  padding: 38px 0;

  border-bottom: 1px solid rgba(255,255,255,.08);
}

.insurance-step-number {
  color: #d4a017;
  font-size: 26px;
  font-weight: 900;
}

.insurance-step-content h3 {
  font-size: 27px;
  margin: 0 0 10px;
}

.insurance-step-content p {
  color: #999;
  margin: 0;
  line-height: 1.7;
  max-width: 750px;
}


/* WHY */

.insurance-why {
  display: grid;
  grid-template-columns: 1fr 1fr;

  min-height: 750px;
  background: #0a0a0a;
}

.insurance-why-image {
  position: relative;
  overflow: hidden;
}

.insurance-why-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.insurance-why-image::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(10,10,10,.3)
    );
}

.insurance-image-badge {
  position: absolute;
  z-index: 3;

  left: 45px;
  bottom: 45px;

  padding: 18px 24px;

  background: rgba(0,0,0,.85);
  border-left: 3px solid #d4a017;

  font-weight: 900;
}

.insurance-image-badge strong {
  display: block;
  color: #d4a017;
}

.insurance-why-content {
  padding: 100px 9%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.insurance-why-content > span {
  color: #d4a017;
  font-weight: 900;
  letter-spacing: 2px;
}

.insurance-why-content h2 {
  font-size: clamp(42px,5vw,70px);
  line-height: 1;
  margin: 18px 0 25px;
}

.insurance-why-content h2 strong {
  display: block;
  color: #d4a017;
}

.insurance-why-content > p {
  color: #aaa;
  line-height: 1.8;
}

.insurance-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 15px 25px;

  margin: 35px 0;
}

.insurance-checks div {
  color: #ddd;
  font-size: 14px;
}

.insurance-checks b {
  color: #d4a017;
  margin-right: 8px;
}


/* DISCLAIMER */

.insurance-disclaimer {
  padding: 35px 7%;

  display: flex;
  align-items: center;
  gap: 35px;

  background: #d4a017;
  color: #090909;
}

.insurance-disclaimer span {
  font-weight: 1000;
  letter-spacing: 2px;
}

.insurance-disclaimer p {
  margin: 0;
  line-height: 1.6;
}


/* FAQ */

.insurance-faq {
  padding: 120px 7%;
  background: #050505;
}

.insurance-faq-list {
  max-width: 950px;
  margin: auto;
}

.insurance-faq-item {
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.insurance-faq-item button {
  width: 100%;

  padding: 27px 0;

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

  border: none;
  background: none;
  color: #fff;

  text-align: left;
  font-size: 18px;
  font-weight: 700;

  cursor: pointer;
}

.insurance-faq-item button span {
  color: #d4a017;
  font-size: 30px;
  transition: .3s;
}

.insurance-faq-answer {
  max-height: 0;
  overflow: hidden;

  transition: max-height .45s ease;
}

.insurance-faq-answer p {
  padding: 0 0 28px;
  margin: 0;

  color: #999;
  line-height: 1.7;
}

.insurance-faq-item.active .insurance-faq-answer {
  max-height: 250px;
}

.insurance-faq-item.active button span {
  transform: rotate(45deg);
}


/* CONTACT */

.insurance-contact {
  padding: 120px 7%;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;

  background:
    radial-gradient(circle at left,
      rgba(212,160,23,.11),
      transparent 40%
    ),
    #080808;
}

.insurance-contact-left > span {
  color: #d4a017;
  font-weight: 900;
  letter-spacing: 2px;
}

.insurance-contact-left h2 {
  font-size: clamp(45px,5vw,72px);
  line-height: 1;
}

.insurance-contact-left h2 strong {
  display: block;
  color: #d4a017;
}

.insurance-contact-left > p {
  color: #999;
  line-height: 1.8;
}

.insurance-contact-info {
  margin-top: 40px;
}

.insurance-contact-info a {
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  text-decoration: none;
}

.insurance-contact-info p {
  color: #888;
}

.insurance-form {
  padding: 42px;

  background: rgba(255,255,255,.035);

  border: 1px solid rgba(212,160,23,.3);
}

.insurance-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.insurance-form input,
.insurance-form select,
.insurance-form textarea {
  width: 100%;

  padding: 17px 15px;
  margin-bottom: 14px;

  background: #101010;
  color: #fff;

  border: 1px solid rgba(255,255,255,.12);

  outline: none;
}

.insurance-form input:focus,
.insurance-form select:focus,
.insurance-form textarea:focus {
  border-color: #d4a017;
}

.insurance-form textarea {
  min-height: 130px;
  resize: vertical;
}

.insurance-form button {
  width: 100%;

  padding: 18px;

  border: none;

  background:
    linear-gradient(
      135deg,
      #f4c84e,
      #b98712
    );

  color: #070707;

  font-weight: 1000;
  letter-spacing: .7px;

  cursor: pointer;

  transition: .3s;
}

.insurance-form button:hover {
  transform: translateY(-3px);
}


/* FOOTER */

.insurance-footer {
  padding: 45px 7%;

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

  background: #020202;

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

.insurance-footer img {
  width: 150px;
}

.insurance-footer p {
  color: #666;
  font-size: 12px;
}


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

@media (max-width: 1000px) {

  .insurance-nav nav > a:not(.insurance-nav-btn) {
    display: none;
  }

  .insurance-damage-grid {
    grid-template-columns: 1fr 1fr;
  }

  .insurance-why {
    grid-template-columns: 1fr;
  }

  .insurance-why-image {
    height: 550px;
  }

  .insurance-contact {
    grid-template-columns: 1fr;
  }

}


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

@media (max-width: 700px) {

  .insurance-nav {
    height: 82px;
    padding: 0 20px;
  }

  .insurance-logo img {
    width: 135px;
  }

  .insurance-nav-btn {
    padding: 11px 13px !important;
    font-size: 10px !important;
  }

  .insurance-hero {
    min-height: 92vh;
    padding: 125px 22px 70px;
  }

  .insurance-hero-overlay {
    background:
      linear-gradient(
        rgba(0,0,0,.82),
        rgba(0,0,0,.9)
      );
  }

  .insurance-hero h1 {
    font-size: 52px;
  }

  .insurance-hero-buttons {
    flex-direction: column;
  }

  .insurance-btn-primary,
  .insurance-btn-secondary {
    justify-content: center;
  }

  .insurance-hero-trust {
    gap: 20px;
    justify-content: space-between;
  }

  .insurance-damage,
  .insurance-process,
  .insurance-faq,
  .insurance-contact {
    padding: 80px 20px;
  }

  .insurance-damage-grid {
    grid-template-columns: 1fr;
  }

  .insurance-process-step {
    grid-template-columns: 60px 1fr;
  }

  .insurance-why-image {
    height: 400px;
  }

  .insurance-why-content {
    padding: 75px 22px;
  }

  .insurance-checks {
    grid-template-columns: 1fr;
  }

  .insurance-disclaimer {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 30px 22px;
  }

  .insurance-form {
    padding: 25px 18px;
  }

  .insurance-form-row {
    grid-template-columns: 1fr;
  }

  .insurance-footer {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

}
.hero-seo {
  display: block;
  margin-top: 14px;
  font-size: clamp(13px, 1.1vw, 17px);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
}
.hero-title {
  overflow: visible !important;
  height: auto !important;
}

.hero-seo {
  display: block !important;
  margin-top: 14px;
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 700;
  letter-spacing: 1.8px;
  line-height: 1.4;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
/* =========================================================
   RESPONSIVE MASTER FIX
   Desktop / Laptop / Tablet / Mobile
========================================================= */

/* Prevent horizontal overflow */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
}

/* ---------- LARGE LAPTOPS ---------- */
@media (max-width: 1200px) {
  .hero-content,
  .gutter-hero-content,
  .insurance-hero-content {
    width: min(92%, 980px);
  }

  .hero-title,
  .gutter-title {
    font-size: clamp(54px, 7vw, 82px) !important;
  }

  .service-grid,
  .gutter-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- TABLET ---------- */
@media (max-width: 900px) {
  .navbar {
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero,
  .roofing-hero,
  .siding-hero,
  .gutter-hero {
    min-height: 100svh;
  }

  .hero-content,
  .gutter-hero-content {
    width: 92%;
    margin-inline: auto;
    text-align: center;
    align-items: center;
  }

  .hero-title,
  .gutter-title {
    font-size: clamp(46px, 9vw, 72px) !important;
    line-height: .92 !important;
  }

  .hero-buttons,
  .gutter-hero-buttons {
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-badges {
    justify-content: center;
    flex-wrap: wrap;
  }

  .service-grid,
  .gutter-service-grid {
    grid-template-columns: 1fr;
  }

  .about-content,
  .process-grid,
  .project-grid {
    grid-template-columns: 1fr;
  }

  .ba-wrapper {
    height: 460px;
  }
}

/* ---------- MOBILE ---------- */
@media (max-width: 600px) {
  .navbar {
    padding: 12px 16px;
  }

  .logo img,
  .insurance-logo img {
    max-width: 150px;
    height: auto;
  }

  nav {
    gap: 12px;
  }

  nav a {
    font-size: 11px;
  }

  .nav-btn {
    padding: 11px 14px;
    font-size: 11px;
  }

  .hero-content,
  .gutter-hero-content {
    width: 100%;
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero-title,
  .gutter-title {
    width: 100% !important;
    max-width: 100% !important;
    font-size: clamp(40px, 13vw, 58px) !important;
    letter-spacing: -2px !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }

  .hero-name,
  .hero-exteriors {
    white-space: normal !important;
    width: 100% !important;
  }

  .hero-content p,
  .gutter-hero-content p {
    font-size: 15px;
    line-height: 1.6;
  }

  .hero-buttons,
  .gutter-hero-buttons {
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }

  .hero-buttons a,
  .gutter-hero-buttons a {
    width: 100%;
    text-align: center;
  }

  .hero-badges {
    width: 100%;
    gap: 10px;
  }

  .hero-badges > div {
    flex: 1 1 100%;
  }

  section {
    padding-left: 18px;
    padding-right: 18px;
  }

  .section-title h2,
  .section-heading h2,
  .about-content h2 {
    font-size: clamp(30px, 9vw, 44px);
  }

  .service-card,
  .project-card {
    width: 100%;
  }

  .ba-wrapper {
    height: 340px;
  }

  .ba-after-img {
    width: calc(100vw - 36px);
  }
}

/* ---------- VERY SMALL PHONES ---------- */
@media (max-width: 390px) {
  .hero-title,
  .gutter-title {
    font-size: clamp(34px, 12vw, 48px) !important;
  }

  .hero-content p,
  .gutter-hero-content p {
    font-size: 14px;
  }

  nav a {
    font-size: 10px;
  }

  .nav-btn {
    padding: 10px 12px;
  }
}
/* =========================================================
   MOBILE / TABLET NAVIGATION
========================================================= */

.mobile-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid rgba(245, 196, 0, 0.65);
  color: #f5c400;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  font-size: 22px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 10002;
}

@media (max-width: 900px) {

  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;

    display: flex;
    flex-direction: column;
    gap: 0;

    padding: 14px 18px 22px;

    background: rgba(5, 5, 5, 0.98);
    border-top: 1px solid rgba(245, 196, 0, 0.35);
    border-bottom: 1px solid rgba(245, 196, 0, 0.35);

    transform: translateY(-15px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: 0.3s ease;
  }

  .main-nav.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .main-nav a {
    width: 100%;
    padding: 15px 6px;
    font-size: 14px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .main-nav a:last-child {
    border-bottom: none;
  }
}

@media (max-width: 600px) {

  .navbar .logo img {
    max-width: 135px;
  }

  .navbar .nav-btn {
    display: none;
  }

  .mobile-menu-btn {
    margin-left: auto;
  }
}
/* ===== FIX MENU TABLET + MOBILE ===== */
@media (max-width: 900px) {

  .navbar .nav-btn {
    display: none !important;
  }

  .mobile-menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 48px !important;
    height: 48px !important;
    margin-left: auto !important;

    background: #0a0a0a !important;
    color: #f5c400 !important;
    border: 2px solid #f5c400 !important;
    border-radius: 8px !important;

    font-size: 23px !important;
    position: relative !important;
    z-index: 99999 !important;
  }
}
/* ===== INSURANCE MOBILE MENU FIX ===== */
@media (max-width: 900px) {

  .insurance-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10000 !important;
  }

  .insurance-nav .insurance-nav-btn {
    display: none !important;
  }

  .insurance-nav .mobile-menu-btn {
    display: flex !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .insurance-nav .main-nav {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    background: rgba(5, 5, 5, 0.98) !important;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);

    transition: 0.3s ease;
  }

  .insurance-nav .main-nav.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  .insurance-nav .main-nav a {
    width: 100% !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
}
/* ===== FINAL INSURANCE MOBILE NAV FIX ===== */
@media (max-width: 900px) {

  .insurance-nav {
    overflow: visible !important;
  }

  .insurance-nav #mainNav {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999999 !important;

    background: #080808 !important;
    border-top: 1px solid #f5c400 !important;

    display: flex !important;
    flex-direction: column !important;

    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
  }

  .insurance-nav #mainNav.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .insurance-nav #mainNav a {
    display: block !important;
    width: 100% !important;
    padding: 16px 22px !important;
    color: #fff !important;
    background: #080808 !important;
  }
}
<section class="contact-premium" id="contact">

  <div class="contact-premium-left">

    <span class="contact-eyebrow">CONTACT US</span>

    <h2>Get In <span>Touch</span></h2>

    <p class="contact-intro">
      We're here to help with your next exterior project.
      Contact us today for a free estimate and expert advice.
    </p>

    <div class="contact-info-card">
      <div class="contact-icon">
        <i class="fa-solid fa-phone"></i>
      </div>
      <div>
        <span>CALL US</span>
        <a href="tel:+16034041792">+1 (603) 404-1792</a>
      </div>
    </div>

    <div class="contact-info-card">
      <div class="contact-icon">
        <i class="fa-solid fa-envelope"></i>
      </div>
      <div>
        <span>EMAIL US</span>
        <a href="mailto:office@mastersmindexteriors.com">
          office@mastersmindexteriors.com
        </a>
      </div>
    </div>

    <div class="contact-info-card">
      <div class="contact-icon">
        <i class="fa-solid fa-location-dot"></i>
      </div>
      <div>
        <span>SERVICE AREA</span>
        <p>New Hampshire • Massachusetts • Maine</p>
      </div>
    </div>

    <div class="contact-info-card">
      <div class="contact-icon">
        <i class="fa-regular fa-clock"></i>
      </div>
      <div>
        <span>WORKING HOURS</span>
        <p>
          Monday - Friday: 8:00 AM - 5:00 PM<br>
          Saturday: 9:00 AM - 3:00 PM<br>
          Sunday: Closed
        </p>
      </div>
    </div>

  </div>

  <div class="contact-premium-form">

    <span class="form-eyebrow">SEND US A MESSAGE</span>

    <h2>Request a <span>Free Estimate</span></h2>

    <p>
      Fill out the form below and we'll get back to you as soon as possible.
    </p>

    <form
      action="https://formspree.io/f/xvkpjzzv"
      method="POST"
      id="lead-form"
    >

      <input type="text" name="name" placeholder="Your Name *" required>

      <input type="email" name="email" placeholder="Your Email *" required>

      <input type="tel" name="phone" placeholder="Phone Number">

      <input type="text" name="address" placeholder="Project Address">

      <select name="service" required>
        <option value="" selected disabled>Service Needed</option>
        <option value="Roofing">Roofing</option>
        <option value="Roof Repairs">Roof Repairs</option>
        <option value="Siding">Siding</option>
        <option value="Gutters">Gutters</option>
        <option value="Windows">Windows</option>
        <option value="Doors">Doors</option>
        <option value="Storm Damage">Storm Damage</option>
        <option value="Commercial Roofing">Commercial Roofing</option>
      </select>

      <textarea
        name="message"
        placeholder="Tell us about your project *"
        required
      ></textarea>

      <button type="submit" class="premium-submit">
        REQUEST FREE ESTIMATE
        <i class="fa-solid fa-arrow-right"></i>
      </button>

    </form>

    <div id="form-success" class="form-success">
      <div class="form-success-box">

        <div class="success-check">
          <i class="fa-solid fa-check"></i>
        </div>

        <span>REQUEST RECEIVED</span>

        <h3>THANK YOU!</h3>

        <p>
          We received your request successfully.<br>
          A member of Master's Mind Exterior will contact you shortly.
        </p>

        <button type="button" id="success-close">
          CLOSE
        </button>

      </div>
    </div>

  </div>

</section>
/* ===== FINAL PREMIUM CONTACT FIX ===== */

#contact.contact-premium {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 45px !important;
  padding: 90px 7% !important;
  align-items: start !important;
}

#contact .contact-premium-left {
  display: block !important;
}

#contact .contact-info-card {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 20px !important;
  margin: 16px 0 !important;

  background: rgba(10, 10, 10, 0.82) !important;
  border: 1px solid rgba(246, 191, 36, 0.55) !important;
  border-radius: 14px !important;
}

#contact .contact-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;

  border: 1px solid #f6bf24 !important;
  border-radius: 12px !important;
  color: #f6bf24 !important;
  font-size: 24px !important;
}

#contact .contact-info-card > div:last-child {
  display: block !important;
}

#contact .contact-info-card span {
  color: #f6bf24 !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
}

#contact .contact-info-card a,
#contact .contact-info-card p {
  display: block !important;
  color: white !important;
  margin: 5px 0 0 !important;
  text-decoration: none !important;
}

#contact .contact-premium-form {
  display: block !important;
  padding: 38px !important;

  background: rgba(10, 10, 10, 0.92) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 20px !important;
}

#contact #lead-form {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  width: 100% !important;
}

#contact #lead-form input,
#contact #lead-form select,
#contact #lead-form textarea {
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;

  padding: 17px !important;
  margin: 0 !important;

  background: #111315 !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 10px !important;
  color: white !important;
}

#contact #lead-form textarea {
  min-height: 140px !important;
}

#contact .premium-submit {
  width: 100% !important;
  padding: 18px !important;

  background: linear-gradient(135deg, #ffd45c, #e6a800) !important;
  color: #111 !important;

  border: none !important;
  border-radius: 10px !important;
  font-weight: 900 !important;
}

@media (max-width: 900px) {
  #contact.contact-premium {
    grid-template-columns: 1fr !important;
    padding: 65px 22px !important;
  }
}
/* ===== CONTACT PREMIUM LAYOUT FIX ===== */

#contact.contact-premium {
  max-width: 1500px !important;
  margin: 0 auto !important;
  padding: 90px 5% !important;
  grid-template-columns: 0.95fr 1.05fr !important;
  gap: 34px !important;
}

#contact .contact-premium-left {
  max-width: 620px !important;
}

#contact .contact-info-card {
  width: 100% !important;
  max-width: 100% !important;
}

#contact .contact-premium-form {
  width: 100% !important;
  max-width: 650px !important;
  justify-self: end !important;
}

#contact .contact-premium-form > p {
  max-width: 520px !important;
}

#contact #lead-form {
  grid-template-columns: 1fr !important;
}

#contact #lead-form input,
#contact #lead-form select,
#contact #lead-form textarea,
#contact #lead-form button {
  width: 100% !important;
  max-width: 100% !important;
}

#contact .contact-premium-left h2 {
  font-size: 64px !important;
  margin-bottom: 10px !important;
}

#contact .contact-premium-form h2 {
  font-size: 48px !important;
  line-height: 1.05 !important;
}

#contact .contact-info-card {
  min-height: 92px !important;
}

@media (max-width: 1100px) {
  #contact.contact-premium {
    grid-template-columns: 1fr !important;
  }

  #contact .contact-premium-left,
  #contact .contact-premium-form {
    max-width: 760px !important;
    width: 100% !important;
    justify-self: center !important;
  }
}

@media (max-width: 600px) {
  #contact.contact-premium {
    padding: 60px 18px !important;
  }

  #contact .contact-premium-left h2 {
    font-size: 42px !important;
  }

  #contact .contact-premium-form h2 {
    font-size: 34px !important;
  }
}
/* ===== CONTACT PREMIUM LAYOUT FIX ===== */

#contact.contact-premium {
  max-width: 1500px !important;
  margin: 0 auto !important;
  padding: 90px 5% !important;
  grid-template-columns: 0.95fr 1.05fr !important;
  gap: 34px !important;
}

#contact .contact-premium-left {
  max-width: 620px !important;
}

#contact .contact-info-card {
  width: 100% !important;
  max-width: 100% !important;
}

#contact .contact-premium-form {
  width: 100% !important;
  max-width: 650px !important;
  justify-self: end !important;
}

#contact .contact-premium-form > p {
  max-width: 520px !important;
}

#contact #lead-form {
  grid-template-columns: 1fr !important;
}

#contact #lead-form input,
#contact #lead-form select,
#contact #lead-form textarea,
#contact #lead-form button {
  width: 100% !important;
  max-width: 100% !important;
}

#contact .contact-premium-left h2 {
  font-size: 64px !important;
  margin-bottom: 10px !important;
}

#contact .contact-premium-form h2 {
  font-size: 48px !important;
  line-height: 1.05 !important;
}

#contact .contact-info-card {
  min-height: 92px !important;
}

@media (max-width: 1100px) {
  #contact.contact-premium {
    grid-template-columns: 1fr !important;
  }

  #contact .contact-premium-left,
  #contact .contact-premium-form {
    max-width: 760px !important;
    width: 100% !important;
    justify-self: center !important;
  }
}

@media (max-width: 600px) {
  #contact.contact-premium {
    padding: 60px 18px !important;
  }

  #contact .contact-premium-left h2 {
    font-size: 42px !important;
  }

  #contact .contact-premium-form h2 {
    font-size: 34px !important;
  }
}
/* ===== CONTACT PREMIUM LAYOUT FIX ===== */

#contact.contact-premium {
  max-width: 1500px !important;
  margin: 0 auto !important;
  padding: 90px 5% !important;
  grid-template-columns: 0.95fr 1.05fr !important;
  gap: 34px !important;
}

#contact .contact-premium-left {
  max-width: 620px !important;
}

#contact .contact-info-card {
  width: 100% !important;
  max-width: 100% !important;
}

#contact .contact-premium-form {
  width: 100% !important;
  max-width: 650px !important;
  justify-self: end !important;
}

#contact .contact-premium-form > p {
  max-width: 520px !important;
}

#contact #lead-form {
  grid-template-columns: 1fr !important;
}

#contact #lead-form input,
#contact #lead-form select,
#contact #lead-form textarea,
#contact #lead-form button {
  width: 100% !important;
  max-width: 100% !important;
}

#contact .contact-premium-left h2 {
  font-size: 64px !important;
  margin-bottom: 10px !important;
}

#contact .contact-premium-form h2 {
  font-size: 48px !important;
  line-height: 1.05 !important;
}

#contact .contact-info-card {
  min-height: 92px !important;
}

@media (max-width: 1100px) {
  #contact.contact-premium {
    grid-template-columns: 1fr !important;
  }

  #contact .contact-premium-left,
  #contact .contact-premium-form {
    max-width: 760px !important;
    width: 100% !important;
    justify-self: center !important;
  }
}

@media (max-width: 600px) {
  #contact.contact-premium {
    padding: 60px 18px !important;
  }

  #contact .contact-premium-left h2 {
    font-size: 42px !important;
  }

  #contact .contact-premium-form h2 {
    font-size: 34px !important;
  }
}
/* ===== CONTACT PREMIUM LAYOUT FIX ===== */

#contact.contact-premium {
  max-width: 1500px !important;
  margin: 0 auto !important;
  padding: 90px 5% !important;
  grid-template-columns: 0.95fr 1.05fr !important;
  gap: 34px !important;
}

#contact .contact-premium-left {
  max-width: 620px !important;
}

#contact .contact-info-card {
  width: 100% !important;
  max-width: 100% !important;
}

#contact .contact-premium-form {
  width: 100% !important;
  max-width: 650px !important;
  justify-self: end !important;
}

#contact .contact-premium-form > p {
  max-width: 520px !important;
}

#contact #lead-form {
  grid-template-columns: 1fr !important;
}

#contact #lead-form input,
#contact #lead-form select,
#contact #lead-form textarea,
#contact #lead-form button {
  width: 100% !important;
  max-width: 100% !important;
}

#contact .contact-premium-left h2 {
  font-size: 64px !important;
  margin-bottom: 10px !important;
}

#contact .contact-premium-form h2 {
  font-size: 48px !important;
  line-height: 1.05 !important;
}

#contact .contact-info-card {
  min-height: 92px !important;
}

@media (max-width: 1100px) {
  #contact.contact-premium {
    grid-template-columns: 1fr !important;
  }

  #contact .contact-premium-left,
  #contact .contact-premium-form {
    max-width: 760px !important;
    width: 100% !important;
    justify-self: center !important;
  }
}

@media (max-width: 600px) {
  #contact.contact-premium {
    padding: 60px 18px !important;
  }

  #contact .contact-premium-left h2 {
    font-size: 42px !important;
  }

  #contact .contact-premium-form h2 {
    font-size: 34px !important;
  }
}
/* ===== CONTACT DESKTOP SIDE BY SIDE ===== */

@media screen and (min-width: 700px) {

  body #contact.contact-premium {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 80px 5% !important;
    gap: 40px !important;
    box-sizing: border-box !important;
  }

  body #contact .contact-premium-left {
    flex: 1 1 50% !important;
    width: 50% !important;
    max-width: 650px !important;
    margin: 0 !important;
  }

  body #contact .contact-premium-form {
    flex: 1 1 50% !important;
    width: 50% !important;
    max-width: 650px !important;
    margin: 0 !important;
  }

  body #contact #lead-form {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }

  body #contact #lead-form select,
  body #contact #lead-form textarea,
  body #contact #lead-form button {
    grid-column: 1 / -1 !important;
  }
}

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

@media screen and (max-width: 699px) {

  body #contact.contact-premium {
    display: flex !important;
    flex-direction: column !important;
    padding: 60px 20px !important;
    gap: 30px !important;
  }

  body #contact .contact-premium-left,
  body #contact .contact-premium-form {
    width: 100% !important;
    max-width: 100% !important;
  }

  body #contact #lead-form {
    grid-template-columns: 1fr !important;
  }
}
/* MOBILE HERO FIX */
@media (max-width: 768px) {
  .hero {
    padding-top: 150px !important;
  }

  .hero-content {
    padding-top: 20px !important;
  }
}
@media (max-width: 768px) {
  .hero h1 {
    font-size: 56px !important;
    line-height: 0.95 !important;
  }
}
@media (max-width: 768px) {
  .hero-video {
    object-fit: cover !important;
    object-position: center center !important;
    transform: scale(0.82) !important;
    width: 122% !important;
    left: -11% !important;
  }
}
@media (max-width: 768px) {
  .hero > video {
    object-fit: cover !important;
    object-position: center center !important;
  }
}
@media (max-width: 768px) {
  .hero-title {
    width: 100% !important;
    max-width: 100% !important;
  }

  .hero-title .hero-name,
  .hero-title .hero-exteriors {
    font-size: 42px !important;
    line-height: 0.95 !important;
    width: 100% !important;
    text-align: center !important;
  }
}
@media (max-width: 768px) {

  /* Baja PREMIUM EXTERIOR CONTRACTOR debajo del menú */
  .hero-tag {
    margin-top: 35px !important;
    position: relative !important;
    z-index: 5 !important;
  }

  /* MASTERS MIND completo y visible */
  .hero-title .hero-name {
    background: linear-gradient(
      180deg,
      #ffffff 0%,
      #f4e8bd 25%,
      #d7bd6a 55%,
      #ffffff 100%
    ) !important;

    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;

    width: 100% !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
}
/* =====================================================
   HOME HERO MOBILE - FINAL FIX
===================================================== */

@media (max-width: 768px) {

  /* HERO COMPLETO */
  .hero {
    min-height: auto !important;
    height: auto !important;
    padding: 165px 0 70px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  /* VIDEO DE FONDO */
  .hero > video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  /* CONTENIDO */
  .hero-content {
    position: relative !important;
    z-index: 5 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 28px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* PREMIUM EXTERIOR CONTRACTOR */
  .hero-tag {
    display: block !important;
    position: relative !important;
    margin: 0 auto 32px !important;
    padding: 0 !important;

    font-size: 18px !important;
    line-height: 1.25 !important;
    letter-spacing: 3px !important;
    font-weight: 800 !important;

    color: #f5c400 !important;
    text-align: center !important;

    transform: none !important;
    top: auto !important;
    left: auto !important;
  }

  /* TITULO */
  .hero-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto 20px !important;
    padding: 0 !important;

    line-height: 1 !important;
    transform: none !important;
  }

  /* MASTERS MIND */
  .hero-title .hero-name {
    display: block !important;
    width: 100% !important;

    font-size: 42px !important;
    line-height: 1 !important;
    letter-spacing: -1.5px !important;
    white-space: nowrap !important;

    text-align: center !important;

    background: none !important;
    color: #f2df9c !important;
    -webkit-text-fill-color: #f2df9c !important;

    opacity: 1 !important;
    filter: none !important;
    -webkit-mask: none !important;
    mask: none !important;

    text-shadow:
      0 2px 0 #96731c,
      0 4px 12px rgba(245, 196, 0, 0.22) !important;
  }

  /* EXTERIORS */
  .hero-title .hero-exteriors {
    display: block !important;
    width: 100% !important;

    margin-top: 8px !important;

    font-size: 46px !important;
    line-height: 0.95 !important;
    letter-spacing: -1.5px !important;
    white-space: nowrap !important;

    text-align: center !important;

    background: none !important;
    color: #f5c400 !important;
    -webkit-text-fill-color: #f5c400 !important;

    opacity: 1 !important;
    filter: none !important;
    -webkit-mask: none !important;
    mask: none !important;

    text-shadow:
      0 2px 0 #9f7600,
      0 5px 16px rgba(245, 196, 0, 0.25) !important;
  }

  /* ROOFING & EXTERIOR CONTRACTOR... */
  .hero-title .hero-seo {
    display: block !important;
    width: 100% !important;

    margin-top: 22px !important;

    font-size: 16px !important;
    line-height: 1.35 !important;
    letter-spacing: 1.5px !important;
    font-weight: 800 !important;

    color: #f5c400 !important;
    -webkit-text-fill-color: #f5c400 !important;

    text-align: center !important;
  }

  /* DESCRIPCION */
  .hero-content > p {
    width: 100% !important;
    max-width: 560px !important;

    margin: 35px auto 0 !important;

    font-size: 18px !important;
    line-height: 1.55 !important;

    text-align: center !important;
  }

  /* LOCATION */
  .hero-location {
    width: 100% !important;
    margin: 45px auto 0 !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;

    text-align: center !important;
  }

  /* BOTONES */
  .hero-buttons {
    width: 100% !important;
    margin-top: 48px !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .hero-buttons a {
    width: 100% !important;
    min-height: 64px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}