/*V 1.9 Depurado y Ordenado*/
/* Reset and Base Styles */
body {background-color:#ffffff; color:#333333; line-height:1.6; overflow-x:hidden;}

/* --surface-*: grises azulados de seccion; separan mas que el #f8f9fa, que contra blanco no se distingue */
:root {--primary-green:#38ed24; --accent-green:#38ed24; --brand-blue-deep:#0f2f77; --primary-black:#000000; --primary-white:#ffffff; --light-gray:#f8f9fa; --surface-soft:#eef2f7; --surface-tint:#dfe8f3; --border-soft:#dbe3ec; --hero-overlap:clamp(40px, 5vw, 72px); --border-color:#e0e0e0; --color-nav-active:color-mix(in srgb, var(--primary-green) 50%, #000); --color-rating-bg:#209b41; --color-footer-muted:#ccc; --color-standard-card:var(--surface-soft); --color-standard-icon:var(--brand-blue-deep); --color-faq-bg:var(--primary-black); --color-faq-card:var(--surface-soft); --color-faq-icon:var(--brand-blue-deep);}

/* Section Styles */
section {padding:60px 0; width:100%;}
.section-header h2 {font-size:clamp(24px, 4vw, 32px); font-weight:700; margin-bottom:15px; color:var(--primary-black); text-transform:uppercase; line-height:1.2; text-wrap: balance; -webkit-text-wrap: balance;}
.section-header p {font-size:clamp(14px, 2.5vw, 18px); color:#666; max-width:700px; margin:0 auto; line-height:1.6;}

/* Header Styles */
.logo {max-width:clamp(100px, 15vw, 200px); height:auto;}
.map-icon {background-color:#4285f4; color:white; width:35px; height:35px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:16px;}
.google-reviews i {font-size:20px; color:#4285f4;}
.rating {font-size:12px; font-weight:600; color:#ffc107;}

/* Mobile Menu Button */

/* Bottom Navigation */

/* Mobile Navigation */
.mobile-nav a:hover,
.mobile-nav a.active {color:var(--primary-green); background-color:rgba(255, 255, 255, 0.05);}

/* Hero Section */
/* Panel negro a la izquierda, superficie clara a la derecha. La tarjeta cruza esa frontera:
   el cruce es lo que da composicion y saca al hero del reparto de plantilla.
   Negro y no navy: el negro es el chasis de marca de EcoEnergy en todo el sitio. */
/* Canal izquierdo propio: con 20px el titular arrancaba antes que el .container de 1200 del resto.
   Sale del hueco entre columnas, no del ancho de la imagen, que no se toca. */
.hero {position:relative; background-color:var(--primary-black); padding:clamp(50px, 7vw, 90px) 20px clamp(24px, 3vw, 40px) clamp(20px, 4vw, 56px); width:100%;}
/* El 39.3% deja a la imagen el mismo ancho que tenia con 1fr 1.5fr; lo que gana el
   canal izquierdo sale del gap entre columnas, que estaba en 60px. */
/* Contenido centrado con tope, igual que el .hero-content de las hermanas. El fondo
   sangra aparte, asi que centrar aqui no puede abrir ninguna franja en el borde. */
.hero-grid {display:grid; grid-template-columns:clamp(380px, 39.3%, 560px) minmax(0, 1fr); align-items:center; gap:clamp(16px, 1.7vw, 24px); max-width:1900px; margin:0 auto; width:100%; position:relative; z-index:1;}
/* Posicionado para que el panel claro nunca pueda pintarse sobre el titular */
.hero-content {width:100%; text-align:left; position:relative; z-index:1;}
/* Raya verde: marca que en el titular habla EcoEnergy, no Carrier */
.hero-content::before {content:""; display:block; width:64px; height:5px; border-radius:3px; background:linear-gradient(90deg, var(--primary-green), var(--accent-green)); margin-bottom:22px;}
.hero h1 {font-size:clamp(22px, 2.4vw, 35px); font-weight:700; margin-bottom:22px; color:var(--primary-white); line-height:1.2; text-wrap: balance; -webkit-text-wrap: balance;}
/* Corte del titular por sentido: servicio, servicio, lugar. En movil los span vuelven a
   ser inline y el texto se parte solo, que ahi cabe en dos lineas. */
@media (min-width:993px) {.hero h1 span {display:block;}}
/* La imagen aprobada se muestra completa: height auto, sin cover ni object-fit */
/* Misma entrada que .animated-item (0.6s, sube 20px y aparece) pero por CSS y no por el
   observer del JS, para que el LCP no quede atado a cuando arranca el JavaScript.
   Arranca en 0.01 y no en 0: Chrome descarta como candidato a LCP lo que este a opacidad cero. */
@keyframes heroMediaIn {from {opacity:0.01; transform:translateY(20px);} to {opacity:1; transform:none;}}
/* margin-bottom negativo: la tarjeta baja e invade la seccion siguiente */
.hero-media-frame {position:relative; align-self:end; margin-bottom:calc(-1 * var(--hero-overlap));}
/* El panel cuelga de la tarjeta por sus cuatro lados y nunca se sale del layout. Con
   100vw se pasaba del ancho real de la pagina y abria una franja blanca a la derecha.
   top:-50px es el margen celeste aprobado, ahora por construccion y no por formula.
   bottom compensa que la tarjeta baja mas que el hero: el desborde menos el padding. */
.hero-media-frame::before {content:""; position:absolute; top:-50px; left:16.5%; right:-20px; bottom:calc(var(--hero-overlap) - clamp(24px, 3vw, 40px)); background-color:var(--surface-tint); border-top-left-radius:14px; z-index:0;}
.hero-media {border-radius:14px; overflow:hidden; background-color:var(--primary-white); box-shadow:0 24px 54px rgba(15, 47, 119, 0.26); position:relative; z-index:2; animation:heroMediaIn 0.6s ease-out both;}
.hero-media img {width:100%; height:auto; display:block;}
.cta-button {background:linear-gradient(135deg, var(--primary-green), var(--accent-green)); border:2px solid var(--primary-green); color:#000000; padding:clamp(13px, 2vw, 16px) clamp(22px, 4vw, 32px); font-size:clamp(14px, 2vw, 16px); font-weight:700; cursor:pointer; border-radius:50px; transition:all 0.3s ease; text-transform:uppercase; box-shadow:0 6px 18px rgba(40, 167, 69, 0.35); min-height:44px; display:inline-flex; align-items:center; justify-content:center;}
.cta-button:hover {transform:translateY(-3px); box-shadow:0 10px 26px rgba(40, 167, 69, 0.5);}
/* Bullets del hero. Mismo patron que la caja publicitaria del hero de AC Services */
.hero-bullets {display:flex; flex-direction:column; gap:12px; margin-bottom:30px;}
.hero-bullets li {display:flex; align-items:flex-start; gap:12px; color:#e8e8e8; font-size:clamp(14px, 2vw, 16px); font-weight:600; line-height:1.45;}
.hero-bullets li i {color:var(--primary-green); font-size:clamp(14px, 2vw, 16px); margin-top:3px; flex-shrink:0;}
/* El enlace al directorio de Carrier necesita leerse como enlace sin robarle el verde al CTA */
.hero-bullets a {color:var(--primary-white); text-decoration:underline; text-underline-offset:3px;}
.hero-bullets a:hover {color:var(--primary-green);}
/* Boton y telefono juntos: con el aire danado la gente llama antes que rellenar un formulario */
.hero-actions {display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:26px;}
/* Pildora perfilada: el verde queda solo para la accion principal */
.outline-phone {display:inline-flex; align-items:center; justify-content:center; background:transparent; border:2px solid var(--primary-white); color:var(--primary-white); padding:clamp(13px, 2vw, 16px) clamp(20px, 3vw, 30px); border-radius:50px; font-size:clamp(14px, 2vw, 16px); font-weight:700; text-transform:uppercase; white-space:nowrap; min-height:44px; transition:all 0.3s ease;}
.outline-phone:hover {background-color:var(--primary-white); color:var(--primary-black);}
/* Estrellas y acreditacion en la misma fila: las dos son prueba, no texto */
.hero-proof-row {display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px;}
.hero-proof {display:flex; align-items:center; gap:8px; color:#e8e8e8; font-size:clamp(12px, 1.6vw, 14px); font-weight:600; line-height:1.5;}
.hero-proof i {color:var(--primary-green); font-size:13px;}
/* El archivo trae fondo blanco opaco: la pildora lo convierte en placa y no en recorte */
.hero-cert {display:block; height:46px; width:auto; padding:6px 12px; background-color:var(--primary-white); border-radius:8px; box-shadow:0 4px 14px rgba(0, 0, 0, 0.35);}

/* Scroll animado. Solo entrada: el hover lo define cada tarjeta con su propia regla */
.animated-item {opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out;}
.animated-item.scrolled {opacity: 1; transform: translateY(0);}

/* El padding superior compensa lo que invade la tarjeta del hero */
.services-brand {background-color:var(--surface-soft); padding:calc(clamp(60px, 10vw, 100px) + var(--hero-overlap)) 0 clamp(60px, 10vw, 100px); width:100%;}
p.text-our {color:#666; font-size:clamp(14px, 2.5vw, 16px); line-height:1.6; max-width:950px; margin:0 auto clamp(40px, 8vw, 60px) auto; text-align:center;}
.interlink {color: color-mix(in srgb, var(--primary-green) 50%, #000); text-decoration: underline; transition: color 0.3s ease, text-decoration 0.3s ease;}
.interlink:hover {color: var(--accent-green); text-decoration: none;}
/* Logo Carrier sobre el titular de sus series; el ovalo es el mismo navy de --brand-blue-deep */
.brand-mark {display:block; width:auto; height:clamp(88px, 11vw, 140px); margin:0 auto clamp(20px, 3vw, 28px) auto;}
.services-brand .section-header h2 {color:var(--brand-blue-deep); text-align:center; font-size:clamp(28px, 5vw, 40px); font-weight:700; margin-bottom:clamp(40px, 8vw, 60px); text-transform:uppercase; letter-spacing:2px;}
.brand-solutions-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:clamp(20px, 4vw, 30px); max-width:1400px; margin:0 auto; padding:0 20px;}
/* Tarjeta blanca sobre seccion gris: da relieve y separa una tarjeta de otra */
.brand-solution-card {background-color:var(--primary-white); border-radius:12px; overflow:hidden; padding-bottom:clamp(20px, 3vw, 26px); box-shadow:0 4px 18px rgba(15, 47, 119, 0.08); text-align:center; transition:transform 0.3s ease, box-shadow 0.3s ease;}
.brand-solution-card:hover {transform:translateY(-10px); box-shadow:0 14px 34px rgba(15, 47, 119, 0.16);}
.solution-image {width:100%; height:clamp(180px, 25vw, 220px); margin-bottom:clamp(18px, 3vw, 24px); overflow:hidden;}
.solution-image img {width:100%; height:100%; object-fit:cover; transition:transform 0.3s ease;}
.brand-solution-card:hover .solution-image img {transform:scale(1.05);}

/* Titulos de las tarjetas de series */
.brand-solution-card h3 {color: var(--brand-blue-deep);font-size:clamp(16px, 3vw, 20px);font-weight:700;margin-bottom:clamp(12px, 2.5vw, 16px);padding:0 18px;text-transform:uppercase;letter-spacing:1px;line-height:1.3;}
.brand-solution-card p {color:#666; font-size:clamp(13px, 2.5vw, 15px); line-height:1.6; padding:0 18px; text-align:center;}

/* System Info Sections (Carrier High-Efficiency & Infinity) */
.system-info-section {background-color:var(--primary-white); padding:clamp(40px, 8vw, 80px) 0; width:100%; position:relative; border-top:1px solid var(--border-soft);}
/* .alt: el segundo bloque alterna al gris de seccion */
.system-info-section.alt {background-color:var(--surface-soft); border-top:none;}
.system-info-container {display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(30px, 6vw, 60px); max-width:1200px; margin:0 auto; padding:0 20px;}
.system-info-text {text-align:left;}
.system-info-text h2 {font-size:clamp(24px, 4vw, 32px); font-weight:700; color:var(--brand-blue-deep); margin-bottom:15px; text-transform:uppercase; letter-spacing:1px; text-wrap:balance; -webkit-text-wrap:balance;}
.system-info-text p {font-size:clamp(14px, 2.5vw, 16px); color:#666; line-height:1.6; max-width:700px;}
.system-info-image {width:100%; border-radius:12px; overflow:hidden; box-shadow:0 10px 30px rgba(0, 0, 0, 0.12);}
.system-info-image img {width:100%; height:auto; display:block; transition:transform 0.4s ease;}
.system-info-image:hover img {transform:scale(1.03);}
/* El segundo bloque va espejado para que los dos no se lean como una sola seccion larga.
   En min-width para no pelear con el orden apilado del bloque de 768px. */
@media (min-width:769px) {.system-info-section.alt .system-info-text {order:2;}
 .system-info-section.alt .system-info-image {order:1;}
}

/* Family First Section --- */
.family-first {border-top:1px solid var(--border-soft);}
.family-first .section-header p {text-align:center;}
.benefit-item {box-shadow:0 3px 10px rgba(15, 47, 119, 0.06);}

/* CTA Card */
/* Cierra los beneficios dentro de su misma seccion: tarjeta y no banda a sangre,
   asi el gancho no corta la racha clara ni anade una seccion negra de mas. */
.cta-card {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:clamp(20px, 3vw, 36px); margin:clamp(30px, 5vw, 45px) 20px 0; padding:clamp(26px, 4vw, 38px) clamp(24px, 4vw, 42px); background-color:var(--surface-tint); border-left:5px solid var(--primary-green); border-radius:12px; box-shadow:0 6px 22px rgba(15, 47, 119, 0.08);}
.cta-card-text {flex:1 1 400px;}
.cta-card-text h2 {font-size:clamp(20px, 3vw, 28px); font-weight:700; color:var(--brand-blue-deep); text-transform:uppercase; line-height:1.2; margin-bottom:10px; text-wrap:balance; -webkit-text-wrap:balance;}
.cta-card-text p {color:#666; font-size:clamp(14px, 2vw, 16px); line-height:1.6;}
.cta-card-actions {display:flex; flex-wrap:wrap; align-items:center; gap:14px; flex-shrink:0;}
/* Sobre fondo claro el borde blanco de la pildora desaparece */
.outline-phone.dark {border-color:var(--brand-blue-deep); color:var(--brand-blue-deep);}
.outline-phone.dark:hover {background-color:var(--brand-blue-deep); color:var(--primary-white);}

/* Gallery Section */
.brand-gallery {background-color:var(--surface-soft); padding:clamp(60px, 10vw, 100px) 0; width:100%; border-top:1px solid var(--border-soft);}
.brand-gallery .section-header h2 {color:var(--brand-blue-deep); text-align:center; font-size:clamp(28px, 5vw, 40px); font-weight:700; margin-bottom:clamp(20px, 4vw, 30px); text-transform:uppercase; letter-spacing:2px;}
.brand-gallery .section-header p {color:#666; text-align:center; font-size:clamp(14px, 2.5vw, 16px); line-height:1.6; max-width:900px; margin:0 auto clamp(10px, 2vw, 15px) auto;}
.brand-gallery .section-header p:last-of-type {margin-bottom:clamp(40px, 8vw, 60px);}

/* Carousel Controls */
.gallery-carousel {max-width:1400px; margin:0 auto; position:relative;}
.carousel-container {position:relative; overflow:hidden; border-radius:12px;}
.carousel-track {display:flex; transition:transform 0.5s ease-in-out;}
.carousel-slide {min-width:100%; position:relative;}
.image-group {display:flex; gap:clamp(15px, 2vw, 20px); padding:0 clamp(10px, 2vw, 20px);}
/* aspect-ratio fijo: la caja tiene la misma forma en toda pantalla, asi el recorte no cambia por breakpoint */
.gallery-image {flex:1; aspect-ratio:4 / 3; border-radius:8px; overflow:hidden; box-shadow:0 5px 20px rgba(0, 0, 0, 0.12); transition:transform 0.3s ease;}
.gallery-image:hover {transform:translateY(-5px);}
.gallery-image img {width:100%; height:100%; object-fit:cover; display:block;}
.carousel-btn {position:absolute; top:50%; transform:translateY(-50%); background:rgba(0, 0, 0, 0.7); color:#ffffff; border:none; width:clamp(40px, 6vw, 50px); height:clamp(40px, 6vw, 50px); border-radius:50%; cursor:pointer; font-size:clamp(16px, 2.5vw, 20px); display:flex; align-items:center; justify-content:center; transition:all 0.3s ease; z-index:10;}
.carousel-btn:hover {background: var(--brand-blue-deep);transform:translateY(-50%) scale(1.1);}
.prev-btn {left:clamp(10px, 2vw, 20px);}
.next-btn {right:clamp(10px, 2vw, 20px);}
.carousel-indicators {display:flex; justify-content:center; gap:15px; margin-top:clamp(20px, 4vw, 30px);}
.indicator {width:24px; height:24px; border-radius:50%; border:2px solid rgba(0, 0, 0, 0.25); background:transparent; cursor:pointer; transition:all 0.3s ease; padding:12px; background-clip:content-box;}
.indicator.active,
.indicator:hover {background-color: var(--brand-blue-deep);border-color: var(--brand-blue-deep);}

/* Contact Form Section (Iframe) */
.contact-form-section {background-color:var(--primary-black); color:var(--primary-white); padding:clamp(20px, 3vw, 30px) 0; overflow:hidden;}
.form-grid-container {display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(30px, 6vw, 60px); max-width:1200px; margin:0 auto; padding:0;}
.form-text-content .form-logo {max-width:100%; height:auto; margin-bottom:30px;}
.form-text-content h2 {font-size:clamp(28px, 5vw, 42px); line-height:1.2; margin-bottom:20px; text-transform:uppercase; color: var(--primary-green);}
.form-text-content p {font-size:clamp(14px, 2vw, 16px); color:white; line-height:1.7;}
.form-wrapper {border-radius:8px; overflow:hidden; min-height:900px; background-color:#fff; width:100%; box-shadow:0 8px 25px rgba(0, 0, 0, 0.1); position:relative;}

/* Service Areas Section */
.areas-horizontal-list {display:flex; flex-wrap:wrap; gap:clamp(15px, 3vw, 25px); margin-bottom:20px; align-items:center;}
.area-item i {color: var(--primary-green);font-size:clamp(12px, 2vw, 16px);}
.areas-description {color:#ccc; font-size:clamp(12px, 2vw, 14px); line-height:1.6;}
.map-container-large {background-color:var(--light-gray); border-radius:8px; overflow:hidden; width:100%; height:clamp(300px, 40vw, 500px); box-shadow:0 5px 15px rgba(0, 0, 0, 0.1);}
.map-container-large iframe {width:100%; height:100%; border:0;}

/* FAQ Section */
/* Negro y no blanco: queda entre dos secciones negras y en blanco se leia como una isla.
   Cierra la pagina con el negro de marca, igual que el formulario, las areas y el footer. */
.faq .section-header h2 {color:var(--primary-white);}
.faq-item {box-shadow:0 3px 10px rgba(15, 47, 119, 0.06);}
/* La pregunta es focusable desde el teclado, necesita foco visible */
.faq-question:focus-visible {outline:3px solid var(--brand-blue-deep); outline-offset:-3px;}

/* Footer */
.map-container {height:clamp(150px, 25vw, 200px); border-radius:8px; overflow:hidden; margin-bottom:20px; margin-top:20px;}
.map-container iframe {width:100%; height:100%; border:0;}
.footer-section.column ul {display:grid; grid-template-columns:repeat(2, 1fr); gap:8px;}
.footer-section.column ul li {width:100%; margin:0;}
.footer-section a {color:#ccc; transition:color 0.3s ease; font-size:clamp(12px, 2vw, 14px); line-height:1.5;}
.license-row span {font-size:clamp(12px, 2vw, 14px); color:#ccc;}
.social-icon {display:flex; justify-content:center; align-items:center; width:clamp(35px, 6vw, 40px); height:clamp(35px, 6vw, 40px); background-color:rgba(255, 255, 255, 0.1); border-radius:50%; transition:all 0.3s ease; font-size:clamp(14px, 2.5vw, 16px);}

/* --- Responsive y Breakpoints--- */
@media (min-width:1200px) {.brand-solutions-grid {grid-template-columns:repeat(4, 1fr);}}
/* 1977 = 1900 de tope + 76 de padding: justo donde la rejilla se topa y deja de tocar el
   borde. Sin sangria el panel deja de leerse como fondo y queda un rectangulo claro
   flotando entre dos negros, asi que el hero pasa a negro entero, igual que en movil. */
@media (min-width:1977px) {.hero-media-frame::before {display:none;}}
/* Entre 993 y 1199 el auto-fit dejaba 3 tarjetas arriba y 1 huerfana abajo */
@media (min-width:993px) and (max-width:1199px) {.brand-solutions-grid {grid-template-columns:repeat(2, 1fr);}}
@media (max-width:1200px) {.header-right {gap:10px;}
 .find-us, .google-reviews {display:none;}
 .phone-button {padding:6px 12px; font-size:13px;}
}
@media (max-width:1150px) {.bottom-nav {display:none;}
 .header-right {display:none;}
 .mobile-menu-phone-container {display:flex;}
 .mobile-menu-btn {display:block;}
 .mobile-nav-container {display:block;}
 .form-grid-container {grid-template-columns:1fr;}
 .form-text-content {text-align:center; margin-bottom:40px;}
 .form-text-content .form-logo {margin:0 auto;}
 .form-wrapper {max-width:600px; margin:0 auto;}
}
@media (max-width:992px) {.service-areas-content {grid-template-columns:1fr; gap:30px;}
 /* Apilado: se anula el desborde de la tarjeta y con el la compensacion de la seccion */
 :root {--hero-overlap:0px;}
 /* Sin dos columnas no hay frontera que cruzar: el hero pasa a negro completo */
 .hero-media-frame::before {display:none;}
 .hero-grid {grid-template-columns:1fr; gap:30px;}
 .hero-content {text-align:center;}
 .hero-content::before {margin-left:auto; margin-right:auto;}
 .hero-actions {justify-content:center;}
 /* En columna, align-items centra cada bullet sin romper su alineacion interna icono-texto */
 .hero-bullets {align-items:center;}
 .hero-proof-row {justify-content:center;}
 .bottom-nav {display:none;}
 .header-right {display:none;}
 .mobile-menu-phone-container {display:flex;}
 .mobile-menu-btn {display:block;}
 .mobile-nav-container {display:block;}
}
@media (max-width:991px) {.top-header {flex-wrap:wrap; min-height:0;}
}
@media (min-width:768px) {.service-areas-content {display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px, 5vw, 50px); align-items:start;}}
@media (max-width:768px) {.brand-solutions-grid {grid-template-columns:1fr; gap:30px;}
 .solution-image {height:clamp(160px, 20vw, 180px);}

 .system-info-container {grid-template-columns:1fr;}
 .system-info-text {text-align:center; order:1;}
 .system-info-text p {margin:0 auto;}
 .system-info-image {order:2;}
 .cta-card {flex-direction:column; text-align:center; justify-content:flex-start;}
 /* En columna el flex-basis pasa a ser alto: sin esto el texto reservaba 400px y abria un hueco */
 .cta-card-text {flex:0 1 auto;}
 .cta-card-actions {justify-content:center;}
 .image-group {gap:clamp(10px, 1.5vw, 15px); padding:0 clamp(5px, 1vw, 10px);}
 .carousel-btn {width:clamp(35px, 5vw, 40px); height:clamp(35px, 5vw, 40px); font-size:clamp(14px, 2vw, 16px);}
 .areas-horizontal-list {flex-direction:column; align-items:flex-start; gap:10px;}
 .map-container-large {height:clamp(250px, 35vw, 350px);}
 .container {padding:0 15px;}
 .mobile-phone-button {font-size:11px; padding:5px 10px;}
 .mobile-menu-btn {font-size:18px; padding:8px;}
 .mobile-menu-phone-container {gap:6px; padding:0 8px;}
 .form-wrapper {min-height:960px;}
}
@media (max-width:576px) {.brand-gallery {padding:clamp(40px, 8vw, 60px) 0;}
 .image-group {flex-direction:column; gap:clamp(10px, 2vw, 15px); padding:0 clamp(5px, 1vw, 10px);}
 .carousel-btn {width:30px; height:30px; font-size:12px;}
 .indicator {width:20px; height:20px; padding:14px;}
 .container {padding:0 10px;}
 .mobile-phone-button {font-size:10px; padding:4px 8px;}
 .mobile-menu-btn {font-size:16px; padding:6px;}
 .mobile-menu-phone-container {gap:4px; padding:0 6px;}
 .form-wrapper {min-height:1050px;}
}
@media (max-width:480px) {.image-group {flex-direction:column;}
 .gallery-image {margin-bottom:10px;}
}
@media (max-width:360px) {.cta-button {font-size:13px;}
 .mobile-phone-button {font-size:9px; padding:3px 6px;}
 .mobile-menu-btn {font-size:14px; padding:8px;}
 .mobile-menu-phone-container {gap:3px; padding:0 5px;}
}
@media (max-width:320px) {.request {font-size:12px;}}
@media (max-width:300px) {.container {padding:0 5px !important;}
 .logo-container {padding:5px !important;}
 .logo {max-width:110px !important;}
 .mobile-menu-phone-container {padding:0 2px !important; gap:5px !important;}
 .mobile-phone-button {font-size:9px !important; padding:4px 6px !important;}
 .mobile-menu-btn {padding:5px !important; font-size:20px !important;}
 h1, h2, h3, h4, p, a, span {word-wrap:break-word; overflow-wrap:break-word; hyphens:auto;}
 .hero h1 {font-size:20px !important;}
 .map-container, .map-container iframe {height:180px; width:100% !important;}
}
/* Footer legal links (standalone — these pages have no copyright bar by design) */
.footer-legal-standalone {width:100%; padding:25px 0 15px 0; margin-top:30px; border-top:1px solid #333; display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap;}
.footer-legal-standalone a {color:#999; font-size:13px;}
.footer-legal-standalone .sep {color:#444; font-size:13px;}