/* =========================================================
   AB DRYWALL SOLUTIONS — MODERN CORPORATE STYLESHEET (v3.1)
   - Redesign ONLY (no HTML changes)
   - + Hero single VIDEO background (injected via JS)
   - Text-only slider (slides swap text; video stays)
   ========================================================= */

:root{
  /* Brand */
  --navy:#06204a;
  --navy2:#0a2f75;
  --orange:#ff7a18;
  --gold:#ffd200;

  /* Neutrals */
  --ink:#0b1220;
  --ink2:#0f172a;
  --muted:#64748b;
  --muted2:#94a3b8;

  --bg:#ffffff;
  --bg2:#f7f9ff;
  --soft:#f4f7ff;
  --soft2:#eef3ff;

  --line:rgba(15,23,42,.10);
  --line2:rgba(15,23,42,.14);

  --radius:18px;
  --radius2:24px;

  --shadow: 0 18px 50px rgba(2, 12, 27, .10);
  --shadow2: 0 22px 70px rgba(2, 12, 27, .16);
  --shadow3: 0 10px 22px rgba(2, 12, 27, .10);

  /* Accent strip (corporate) */
  --strip: linear-gradient(90deg, var(--orange), var(--gold));

  /* Footer background image (optional) */
  --footer-img: url("images/footer-construction.jpg");

  /* Focus ring */
  --focus: 0 0 0 4px rgba(255, 210, 0, .22), 0 0 0 1px rgba(255, 122, 24, .25);
}

/* =========================
   GLOBAL / BASE
========================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  overflow-x:hidden;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1000px 420px at 12% 0%, rgba(6,32,74,.10), transparent 60%),
    radial-gradient(900px 420px at 92% 6%, rgba(255,210,0,.12), transparent 58%),
    linear-gradient(180deg, #fff, var(--bg2));
}

/* Subtle “industrial” texture */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(6,32,74,.04) 0 10px, transparent 10px 20px);
  background-size: 28px 28px;
  opacity:.22;
  mix-blend-mode:multiply;
  z-index:-1;
}

img,svg,video,canvas{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1180px;margin:0 auto;padding:0 clamp(14px,3vw,18px)}
.muted{color:var(--muted)}
.muted.small{font-size:13px}

/* Accessibility */
:focus{outline:none}
:focus-visible{box-shadow:var(--focus);border-radius:14px}

/* Smooth scroll anchors (nice for nav jumps) */
html{scroll-behavior:smooth}

/* =========================
   TOPBAR
========================= */
.topbar{
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(800px 240px at 20% 0%, rgba(255,210,0,.14), transparent 60%),
    linear-gradient(135deg, #061431, #081c3f 55%, #061431);
}
.topbar-inner{
  display:flex;gap:14px;align-items:center;justify-content:space-between;
  padding:10px 0;
}
.topbar-left,.topbar-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  padding:7px 12px;border-radius:999px;
  font-weight:800;font-size:12px;
  letter-spacing:.02em;
}
.dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.55)}
.toplink{
  font-size:13px;color:#fff;opacity:.92;
  transition:opacity .2s ease, transform .15s ease;
}
.toplink:hover{opacity:1;text-decoration:underline}
.topbar .muted{color:rgba(255,255,255,.75)}

/* =========================
   HEADER / NAV
========================= */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px 0;flex-wrap:wrap;
}

.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-logo{
  width:40px;
  height:40px;
  border-radius:14px;
  object-fit:contain;          /* si tu logo es rectangular */
  background: rgba(255,255,255,.75); /* “placa” detrás del logo */
  padding:6px;                 /* espacio interno para que respire */
  box-shadow: 0 14px 26px rgba(6,32,74,.22);
  border: 1px solid rgba(15,23,42,.10);
  display:block;
}
.brand-logo::after{
  content:"";
  position:absolute;inset:0;
  border-radius:14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.brand-text{min-width:0}
.brand-text strong{display:block;font-size:15px;letter-spacing:.2px;color:var(--ink2)}
.brand-text small{display:block;color:var(--muted);font-size:12px;margin-top:2px}

.nav{display:flex;gap:18px;align-items:center}
.nav a{
  color:var(--ink2);
  font-weight:800;font-size:13px;
  opacity:.92;
  position:relative;
  padding:8px 6px;
  border-radius:12px;
  transition: background .2s ease, opacity .2s ease, transform .15s ease;
}
.nav a:hover{
  opacity:1;
  background:rgba(6,32,74,.05);
  transform:translateY(-1px);
}

.header-cta{display:flex;gap:10px;align-items:center}

/* =========================
   BUTTONS (global)
========================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  font-weight:900;
  font-size:13px;
  border:1px solid transparent;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, filter .2s ease, border-color .2s ease;
  cursor:pointer;
}
.btn:active{transform:translateY(1px)}
.btn i{font-size:1.05em;vertical-align:-0.12em}

.btn-primary{
  color:#0b1220;
  background: linear-gradient(135deg, var(--gold), var(--orange));
  border-color: rgba(255,122,24,.30);
  box-shadow: 0 14px 30px rgba(255,122,24,.22);
}
.btn-primary:hover{filter:brightness(1.03);box-shadow:0 18px 40px rgba(255,122,24,.26)}

.btn-ghost{
  background:rgba(255,255,255,.80);
  color:var(--ink2);
  border-color:var(--line2);
  box-shadow: 0 10px 20px rgba(2, 12, 27, .06);
}
.btn-ghost:hover{
  background:rgba(255,255,255,.92);
  border-color: rgba(6,32,74,.18);
  transform:translateY(-1px);
}

.btn-alt{
  background: rgba(6,32,74,.06);
  color: var(--ink2);
  border-color: rgba(6,32,74,.16);
}
.btn-alt:hover{
  background: rgba(6,32,74,.09);
  border-color: rgba(6,32,74,.22);
}

/* =========================
   MOBILE NAV
========================= */
.nav-toggle{
  display:none;
  background:rgba(255,255,255,.86);
  border:1px solid var(--line2);
  cursor:pointer;
  width:44px;height:44px;
  padding:0;border-radius:14px;
  box-shadow: var(--shadow3);
}
.nav-toggle span{
  display:block;width:22px;height:2px;
  background:var(--navy);
  margin:4px auto;border-radius:2px;
  transition: transform .18s ease, opacity .18s ease;
}

.mobile-nav{
  display:none;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  padding:12px 18px 16px;
  box-shadow:0 18px 40px rgba(2,12,27,.12);
}
.mobile-nav a{
  display:block;
  padding:10px 0;
  color:var(--ink2);
  font-weight:800;
}
.mobile-nav-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* =========================
   HERO
========================= */
.hero{
  position:relative;
  isolation:isolate;
  padding:26px 0 10px;
}
.hero-bg{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(1100px 520px at 10% -10%, rgba(6,32,74,.14), transparent 60%),
    radial-gradient(900px 520px at 95% 10%, rgba(255,122,24,.14), transparent 58%),
    linear-gradient(180deg, #ffffff, #f6f9ff);
}
.hero-inner{display:grid;gap:16px}

/* =========================
   SLIDER
========================= */
.hero-slider{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow2);
  border:1px solid rgba(15,23,42,.10);

  /* ✅ RESPONSIVE HEIGHT (fix video stretched on mobile) */
  min-height: clamp(420px, 62vh, 560px);
}
@supports (height: 100svh){
  .hero-slider{ min-height: clamp(420px, 62svh, 560px); }
}

/* =========================
   ✅ HERO VIDEO (HTML .hero-video-wrap support)
   - You have a video in HTML: .hero-video-wrap .hero-video
   - This makes it behave as a background with object-fit: cover
========================= */
.hero-video-wrap{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:#979ca7;
}


.hero-video-wrap .hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transform:scale(1.02);
  filter:saturate(1.04) contrast(1.05) brightness(.82);
  z-index:0;
}

/* If video fails, allow fallback backgrounds */
.hero-slider.no-video .hero-video-wrap{display:none}

/* --- Existing: video background layer (injected by JS) --- */
.hero-video-layer{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:#050b18;
}
.hero-video-layer video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
  filter:saturate(1.04) contrast(1.05) brightness(.82);
}
.hero-video-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg, rgba(4,10,22,.82), rgba(4,10,22,.45) 58%, rgba(4,10,22,.25)),
    radial-gradient(900px 520px at 20% 25%, rgba(255,210,0,.18), transparent 60%),
    radial-gradient(900px 520px at 90% 20%, rgba(255,122,24,.14), transparent 60%);
}

/* Fallback: if video fails, show slide images again */
.hero-slider.no-video .hero-video-layer{display:none}

/* Hide slide background images when video is active (HTML video or injected video) */
.hero-slider:not(.no-video) .slide{background-image:none !important}

.slide{
  position:absolute;inset:0;
  opacity:0;pointer-events:none;
  transform:scale(1.03);
  transition:opacity .55s ease, transform .75s ease;
  background-image:var(--bg); /* keeps working as fallback */
  background-size:cover;
  background-position:center;
  filter:saturate(1.02) contrast(1.02);
  z-index:2; /* above video layer */
}
.slide.is-active{opacity:1;pointer-events:auto;transform:scale(1)}
/* keep overlay element for compatibility, but we don’t rely on it anymore */
.slide-overlay{display:none}

.slide-content{
  position:relative;
  padding: clamp(18px, 3vw, 44px);
  max-width: 740px;
  color:#fff;
  z-index:3;
}
.kicker{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.90);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  padding:8px 12px;
  border-radius:999px;
}
.slide-content h1{
  margin:14px 0 10px;
  font-size: clamp(28px, 4vw, 54px);
  line-height:1.03;
  letter-spacing:-.02em;
}
.accent{color:var(--gold)}
.slide-content p{
  margin:0 0 14px;
  color:rgba(255,255,255,.86);
  font-size:15px;
  line-height:1.65;
  max-width:62ch;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}

/* Slider Controls */
.slider-controls{
  position:absolute;
  inset:auto 0 14px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  z-index:5;

  /* ✅ iPhone safe-area support */
  inset: auto 0 max(14px, env(safe-area-inset-bottom)) 0;
}
.ctrl{
  width:44px;height:44px;border-radius:16px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.22);
  color:#fff;
  font-size:22px;
  cursor:pointer;
  transition:transform .12s ease, background .2s ease, border-color .2s ease;
  backdrop-filter: blur(10px);
}
.ctrl:hover{background:rgba(0,0,0,.30);border-color:rgba(255,255,255,.28)}
.ctrl:active{transform:translateY(1px)}
.dots{display:flex;gap:8px;align-items:center}
.dotbtn{
  width:10px;height:10px;border-radius:999px;
  background:rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.30);
  cursor:pointer;
  transition: transform .15s ease, background .2s ease;
}
.dotbtn.is-active{background:var(--gold);transform:scale(1.12)}

/* =========================
   ACCENT STRIP (cards)
========================= */
.quick-card,
.service-card,
.feature-content,
.step,
.coverage-card,
.contact-card,
.quote-card,
.ba-card{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, #ffffff, #fbfcff);
}
.quick-card::before,
.service-card::before,
.feature-content::before,
.step::before,
.coverage-card::before,
.contact-card::before,
.quote-card::before,
.ba-card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height:4px;
  background: var(--strip);
  opacity:.98;
  pointer-events:none;
}

/* =========================
   HERO QUICK CARDS
========================= */
.hero-quick{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:14px;
}
.quick-card{
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px 16px;
  box-shadow:0 12px 30px rgba(2,12,27,.06);
  backdrop-filter: blur(10px);
}
.quick-card h3{margin:0 0 6px;font-size:15px;color:var(--ink2)}
.quick-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}

/* =========================
   SECTIONS
========================= */
.section{padding:56px 0}
.section-warm{
  background:
    radial-gradient(900px 380px at 20% 0%, rgba(255,210,0,.16), transparent 58%),
    radial-gradient(900px 380px at 90% 15%, rgba(255,122,24,.12), transparent 58%),
    linear-gradient(180deg, #ffffff, #f7faff);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.section-head h2{margin:0;font-size:28px;color:var(--ink2);letter-spacing:-.02em}
.section-head p{margin:0;color:var(--muted);max-width:68ch;line-height:1.6}

/* =========================
   SERVICES GRID
========================= */
.services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.service-card{
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px;
  box-shadow:0 12px 28px rgba(2,12,27,.06);
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.service-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(2,12,27,.10);
  border-color:rgba(6,32,74,.22);
  background:linear-gradient(180deg, #fff, rgba(6,32,74,.02));
}
.service-card .icon{
  width:56px;height:56px;border-radius:18px;
  display:inline-flex;align-items:center;justify-content:center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,210,0,.55), transparent 60%),
    linear-gradient(135deg, rgba(6,32,74,.10), rgba(255,122,24,.08));
  border:1px solid rgba(6,32,74,.10);
  box-shadow:0 10px 20px rgba(2,12,27,.06);
}
.service-card .icon i{font-size:30px;line-height:1}
.service-card h3{margin:10px 0 6px;font-size:14px;color:var(--ink2)}
.service-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}

/* =========================
   FEATURE SECTIONS
========================= */
.feature{
  padding:60px 0;
  border-top:1px solid var(--line);
}
.feature.alt{
  background:
    radial-gradient(900px 360px at 10% 0%, rgba(6,32,74,.08), transparent 55%),
    linear-gradient(180deg, #ffffff, #f7faff);
}
.feature-inner{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:start;
}

/* Feature media */
.feature-media{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  min-height:440px;
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(255,210,0,.16), transparent 60%),
    linear-gradient(135deg, rgba(6,32,74,.55), rgba(255,122,24,.12));
  box-shadow:var(--shadow2);
  border:1px solid rgba(15,23,42,.10);
}
.feature-media::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--img);
  background-size:cover;
  background-position:center;
  filter:saturate(1.06) contrast(1.04);
  transform:scale(1.03);
}
.media-overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(900px 520px at 10% 10%, rgba(56, 56, 53, 0.1), transparent 60%),
    linear-gradient(180deg, rgba(6, 11, 22, 0.06), rgba(4, 8, 15, 0.16));
}
.media-zoom{
  position:absolute;left:14px;bottom:14px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.22);
  color:#fff;
  font-weight:900;
  cursor:pointer;
  transition:transform .12s ease, background .2s ease, border-color .2s ease;
  backdrop-filter: blur(10px);
}
.media-zoom:hover{background:rgba(0,0,0,.30);border-color:rgba(255,255,255,.28)}
.media-zoom:active{transform:translateY(1px)}

/* Feature content */
.feature-content{
  border:1px solid var(--line);
  border-radius:28px;
  padding:22px;
  box-shadow:0 14px 32px rgba(2,12,27,.06);
}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(6,32,74,.06);
  border:1px solid rgba(6,32,74,.14);
  color:var(--navy);
  font-weight:900;
  font-size:12px;
}
.feature-content h2{
  margin:12px 0 10px;
  color:var(--ink2);
  font-size:30px;
  line-height:1.12;
  letter-spacing:-.02em;
}
.feature-content p{margin:0 0 12px;color:var(--muted);line-height:1.75}
.bullets{margin:0;padding-left:18px}
.bullets li{margin:8px 0;color:var(--ink2)}
.feature-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* Feature cards wrapper */
.feature-cards{
  grid-column:1 / -1;
  margin-top:12px;
  padding:16px;
  border-radius:28px;
  background:
    radial-gradient(900px 360px at 15% 10%, rgba(255,210,0,.10), transparent 55%),
    linear-gradient(180deg,#fff,#f9fbff);
  border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(2,12,27,.06);
}
.feature-cards-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:12px;margin-bottom:12px
}
.feature-cards-head h3{margin:0;color:var(--ink2);font-size:18px}
.feature-cards-head p{margin:0;color:var(--muted);font-size:13px}

/* =========================
   AB SUB-CARDS
========================= */
.ab-subgrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.ab-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(2,12,27,.06);
  transition:transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.ab-card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%; height:4px;
  background: var(--strip);
  pointer-events:none;
  z-index:2;
}
.ab-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(2,12,27,.10);
  border-color:rgba(6,32,74,.22);
}
.ab-card__media{
  height:150px;
  position:relative;
  background:
    radial-gradient(900px 360px at 15% 20%, rgba(255,210,0,.16), transparent 55%),
    linear-gradient(135deg, rgba(6,32,74,.58), rgba(255,122,24,.12));
}
.ab-card__media::before{
  content:"";
  position:absolute;inset:0;
  background-image:var(--ab-media);
  background-size:cover;
  background-position:center;
  opacity:.92;
  transform:scale(1.03);
}
.ab-badges{
  position:absolute;left:12px;top:12px;
  display:flex;gap:8px;flex-wrap:wrap;
  z-index:3;
}
.ab-badge{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  font-size:11px;font-weight:900;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.18);
  color:#fff;
  backdrop-filter: blur(10px);
}
.ab-badge--primary{background:rgba(6,32,74,.78)}
.ab-badge--accent{background:rgba(255,210,0,.94);color:#111827;border-color:rgba(255,255,255,.34)}
.ab-badge--orange{background:rgba(255,122,24,.82)}
.ab-badge--sky{background:rgba(14,165,233,.62)}
.ab-badge--coffee{background:rgba(148,103,63,.62)}

.ab-card__body{padding:14px 14px 16px}
.ab-card__title{margin:0 0 6px;font-size:15px;color:var(--ink2)}
.ab-card__desc{margin:0 0 10px;color:var(--muted);font-size:13px;line-height:1.6}
.ab-list{margin:0 0 12px;padding-left:18px}
.ab-list li{margin:7px 0;color:var(--ink2);font-size:13px}
.ab-actions{display:flex;gap:8px;flex-wrap:wrap}

/* AB buttons */
.ab-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  font-weight:900;
  font-size:12px;
  border:1px solid var(--line2);
  background:rgba(255,255,255,.90);
  color:var(--ink2);
  transition:transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, filter .2s ease;
}
.ab-btn:hover{
  background:rgba(6,32,74,.04);
  border-color:rgba(6,32,74,.18);
}
.ab-btn:active{transform:translateY(1px)}
.ab-btn i{font-size:1.05em;vertical-align:-0.12em}

.ab-btn--primary{
  background: linear-gradient(135deg, var(--gold), var(--orange));
  border-color: rgba(255,122,24,.30);
  color:#0b1220;
  box-shadow: 0 12px 26px rgba(255,122,24,.20);
}
.ab-btn--primary:hover{filter:brightness(1.03);box-shadow:0 16px 34px rgba(255,122,24,.26)}
.ab-btn--ghost{border-color:rgba(6,32,74,.16)}

/* =========================
   STEPS
========================= */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px;
  box-shadow:0 12px 28px rgba(2,12,27,.06);
}
.step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:14px;
  background:linear-gradient(135deg, var(--gold), var(--orange));
  color:#111827;font-weight:900;
  margin-bottom:10px;
  box-shadow:0 10px 20px rgba(255,122,24,.18);
}
.step h3{margin:0 0 6px;color:var(--ink2);font-size:15px}
.step p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}

/* =========================
   COVERAGE
========================= */
.coverage{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.coverage-card{
  border:1px solid var(--line);
  border-radius:20px;
  padding:16px;
  box-shadow:0 12px 28px rgba(2,12,27,.06);
}
.coverage-card h3{margin:0 0 6px;color:var(--ink2)}
.coverage-card p{margin:0 0 10px;color:var(--muted);line-height:1.65}
.mini-list{margin:0;padding-left:18px;columns:2}
.mini-list li{margin:6px 0;color:var(--ink2);font-size:13px}

/* =========================
   CONTACT (kept for future section)
========================= */
.section-contact{
  background:
    radial-gradient(900px 380px at 18% 0%, rgba(6,32,74,.10), transparent 58%),
    radial-gradient(900px 380px at 90% 18%, rgba(255,210,0,.12), transparent 58%),
    linear-gradient(180deg, #ffffff, #f8fbff);
  border-top:1px solid var(--line);
}
.contact-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;align-items:start}
.contact-card{
  border:1px solid var(--line);
  border-radius:24px;
  padding:18px;
  box-shadow:var(--shadow);
}
.contact-card h2{margin:0 0 8px;color:var(--ink2)}
.contact-card p{margin:0 0 14px;color:var(--muted);line-height:1.75}
.contact-actions{display:flex;gap:10px;flex-wrap:wrap}
.contact-note{
  margin-top:14px;
  background:rgba(6,32,74,.05);
  border:1px solid rgba(6,32,74,.12);
  border-radius:18px;
  padding:12px;
  color:var(--ink2);
}

.contact-side{display:grid;gap:14px}
.badge-wall{display:flex;flex-wrap:wrap;gap:8px}
.badge{
  padding:8px 10px;border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  font-weight:900;font-size:12px;color:var(--ink2);
  box-shadow:0 10px 20px rgba(2,12,27,.06);
}
.side-box{
  color:#fff;
  border-radius:24px;
  padding:18px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow2);
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(255,210,0,.18), transparent 60%),
    radial-gradient(900px 420px at 90% 20%, rgba(255,122,24,.14), transparent 60%),
    linear-gradient(135deg, #061431, #081c3f 55%, #061431);
}
.side-box h3{margin:0 0 8px}
.side-box p{margin:0 0 12px;color:rgba(255,255,255,.84);line-height:1.75}
.side-links{display:grid;gap:8px}
.side-link{
  color:#fff;font-weight:900;font-size:13px;
  opacity:.92;
  border-bottom:1px solid rgba(255,255,255,.18);
  padding-bottom:6px;
  cursor:pointer;
  transition:opacity .2s ease, transform .15s ease;
}
.side-link:hover{opacity:1;transform:translateX(2px)}

/* ✅ Text shadow for hero readability */
.slide-content h1,
.slide-content p,
.kicker{
  text-shadow:
    0 2px 10px rgba(0,0,0,.55),
    0 10px 30px rgba(0,0,0,.35);
}

/* =========================
   ESTIMATE FORM
========================= */
.quote-wrap{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
  align-items:start;
}
.quote-card{
  border:1px solid var(--line);
  border-radius:28px;
  padding:18px;
  box-shadow:var(--shadow);
}
.quote-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.field{display:flex;flex-direction:column;gap:8px}
.field-full{grid-column:1 / -1}

.field label{font-weight:900;font-size:13px;color:var(--ink2)}

.field input,
.field select,
.field textarea{
  width:100%;
  border:1px solid var(--line2);
  border-radius:16px;
  padding:12px 12px;
  font-size:14px;
  outline:none;
  background:rgba(255,255,255,.92);
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.field textarea{resize:vertical;min-height:140px}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: rgba(255,122,24,.40);
  box-shadow: var(--focus);
  background:#fff;
}
.field-help{font-size:12px;color:var(--muted);line-height:1.6}

.quote-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.form-status{margin:12px 0 0;font-size:13px;color:var(--muted)}
.quote-aside{display:grid;gap:14px}

.footer-bottom{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.14);

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

  width:100%;
  gap:16px;

  /* IMPORTANT: siempre extremos, sin apilar */
  flex-wrap:nowrap;
}

.footer-bottom span{
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  color:rgba(255,255,255,.78);

  /* evita saltos de línea para que quede como tu foto */
  white-space:nowrap;
}

/* izquierda */
.footer-bottom .footer-left{
  text-align:left;
  color:rgba(255,255,255,.88);
}

/* derecha */
.footer-bottom .footer-right{
  text-align:right;
  color:rgba(255,255,255,.70);
}

/* En pantallas muy pequeñas, baja un poco el tamaño pero sigue en extremos */
@media (max-width: 520px){
  .footer-bottom span{ font-size:11px; }
}


/* =========================
   AB Process — Dark Premium (match Testimonials/FAQ)
========================= */
.ab-process{
  /* Brand */
  --brandA: var(--ab-orange, #ff7a18);
  --brandB: var(--ab-gold,   #ffd200);

  /* Dark palette */
  --bg0: #060a12;
  --bg1: #0a1220;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.04);

  --ink:  rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.14);

  padding: clamp(36px, 4.2vw, 68px) 0;
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(900px 480px at 16% 15%, rgba(255,122,24,.18), transparent 60%),
    radial-gradient(900px 480px at 86% 10%, rgba(255,210,0,.14), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* soft texture / depth */
.ab-process::before{
  content:"";
  position:absolute;
  inset:-220px -140px auto -140px;
  height:520px;
  background:
    radial-gradient(540px 300px at 30% 30%, rgba(255,122,24,.18), transparent 60%),
    radial-gradient(560px 300px at 70% 22%, rgba(255,210,0,.12), transparent 62%),
    radial-gradient(520px 260px at 55% 0%, rgba(255,255,255,.06), transparent 60%);
  pointer-events:none;
  opacity:.85;
}

/* subtle noise overlay (optional but nice) */
.ab-process::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.12) 0, transparent 55%),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.10) 0, transparent 55%),
    radial-gradient(1px 1px at 45% 20%, rgba(255,255,255,.08) 0, transparent 55%);
  opacity:.12;
  mix-blend-mode: overlay;
}

/* Head layout */
.ab-process__head{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
  align-items: end;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

@media (max-width: 900px){
  .ab-process__head{ grid-template-columns:1fr; }
}

/* Pill */
.ab-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 42px rgba(0,0,0,.35);
  font-weight: 900;
  color: var(--ink);
  letter-spacing:.02em;
  backdrop-filter: blur(10px);
}

/* Title */
.ab-process__title h2{
  margin:10px 0 6px;
  font-size: clamp(22px, 3.2vw, 36px);
  line-height:1.12;
  letter-spacing: -.02em;
  color: var(--ink);
}

.ab-process__title h2::after{
  content:"";
  display:block;
  height:4px;
  width:min(220px, 60%);
  border-radius:999px;
  margin-top:10px;
  background: linear-gradient(90deg, var(--brandA), var(--brandB));
  opacity:.95;
}

.ab-process__title p{
  margin:0;
  max-width: 80ch;
  color: var(--muted);
  line-height:1.75;
}

/* Notes */
.ab-process__note{
  display:grid;
  gap:10px;
  justify-items: end;
}

@media (max-width: 900px){
  .ab-process__note{ justify-items: start; }
}

.ab-note{
  width:100%;
  max-width: 420px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
  backdrop-filter: blur(12px);
}

.ab-note__dot{
  width:10px; height:10px;
  border-radius:999px;
  margin-top:6px;
  background: linear-gradient(180deg, var(--brandA), var(--brandB));
  box-shadow: 0 16px 28px rgba(255,122,24,.22);
}

.ab-note strong{ color: var(--ink); font-weight: 1000; }
.ab-note .muted{ color: var(--muted); font-size: 13px; margin-top:2px; }

/* Grid */
.ab-process__grid{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

/* Connecting line (desktop) */
.ab-process__grid::before{
  content:"";
  position:absolute;
  left: 6%;
  right: 6%;
  top: 34px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(255,122,24,.00),
    rgba(255,122,24,.35),
    rgba(255,210,0,.38),
    rgba(255,122,24,.35),
    rgba(255,122,24,.00)
  );
  opacity:.9;
}

@media (max-width: 980px){
  .ab-process__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ab-process__grid::before{ display:none; }
}
@media (max-width: 560px){
  .ab-process__grid{ grid-template-columns: 1fr; }
}

/* Card */
.ab-step{
  position:relative;
  border-radius: 22px;
  padding: 16px 16px 14px;
  background: linear-gradient(180deg, var(--card), var(--card2));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
  overflow:hidden;
  isolation:isolate;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
  backdrop-filter: blur(14px);
}

/* Premium border glow (subtle) */
.ab-step::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 26px;
  background: linear-gradient(135deg,
    rgba(255,122,24,.40),
    rgba(255,210,0,.34),
    rgba(255,255,255,.10)
  );
  opacity:.35;
  z-index:-2;
  filter: blur(14px);
}

.ab-step:hover{
  transform: translateY(-4px);
  border-color: rgba(255,122,24,.26);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  filter: brightness(1.03);
}

/* Top area */
.ab-step__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.ab-step__num{
  width:36px; height:36px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  font-weight: 1000;
  color: rgba(10,14,22,.95);
  background: linear-gradient(180deg, rgba(255,210,0,.98), rgba(255,122,24,.92));
  box-shadow: 0 18px 40px rgba(255,122,24,.18);
  border: 1px solid rgba(255,255,255,.12);
}

.ab-step__icon{
  width:38px; height:38px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  box-shadow: 0 16px 36px rgba(0,0,0,.40);
  color: rgba(255,255,255,.82);
}
.ab-step__icon svg{ width:20px; height:20px; }

/* Text */
.ab-step h3{
  margin: 0 0 6px;
  color: var(--ink);
  font-weight: 1000;
  letter-spacing: -.01em;
  font-size: 16px;
}
.ab-step p{
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 13.5px;
}

/* List */
.ab-step ul{
  margin: 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 8px;
}
.ab-step ul li{
  position:relative;
  padding-left: 18px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.55;
}
.ab-step ul li::before{
  content:"";
  position:absolute;
  left:0; top:.55em;
  width:10px; height:10px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brandA), var(--brandB));
  box-shadow: 0 14px 26px rgba(255,122,24,.20);
}

/* Optional reveal animation */
[data-reveal]{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.is-inview[data-reveal]{
  opacity: 1;
  transform: translateY(0);
}

/* Safety: avoid text looking “washed out” on some browsers */
.ab-process *{
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}


/* =========================
   LOCATION / MAP SECTION
========================= */
.location-wrap{
  display:grid;
  gap:14px;
}

.location-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg, #ffffff, #fbfcff);
  box-shadow:0 14px 32px rgba(2,12,27,.06);
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.location-card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:100%;
  height:4px;
  background: var(--strip);
  opacity:.98;
  pointer-events:none;
}

.location-meta{
  display:grid;
  gap:4px;
  min-width: 220px;
}
.location-meta strong{
  color:var(--ink2);
  font-size:15px;
  letter-spacing:.2px;
}
.location-meta .muted{
  font-size:13px;
}

.location-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Map wrapper: responsive + premium */
.map-embed{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  box-shadow: var(--shadow2);
  background:#0b1220;
  min-height: 340px;
  aspect-ratio: 16 / 9;
}

.map-embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* Mobile tuning */
@media (max-width: 820px){
  .map-embed{
    aspect-ratio: 4 / 5;   /* más alto para teléfono */
    min-height: 380px;
    border-radius:22px;
  }
}
@media (max-width: 420px){
  .location-card{
    padding:14px;
  }
  .location-meta strong{
    font-size:14px;
  }
}

/* =========================
   BEFORE / AFTER
========================= */
.ba-wrap{display:grid;gap:14px}
.ba-card{
  border:1px solid var(--line);
  border-radius:28px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.ba-stage{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  min-height: 340px;
  overflow:hidden;
  background:
    radial-gradient(900px 420px at 20% 20%, rgba(255,210,0,.14), transparent 58%),
    linear-gradient(135deg, rgba(6,32,74,.12), rgba(255,122,24,.10));
  user-select:none;
  touch-action:none;
}
.ba-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  transform: scale(1.02);
}
.ba-after{
  position:absolute;inset:0;width:50%;
  overflow:hidden;
  will-change: width;
}
.ba-divider{
  position:absolute;top:0;bottom:0;left:50%;
  width:0;
  border-left: 2px solid rgba(255,255,255,.92);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.25));
  will-change: left;
}
.ba-handle{
  position:absolute;top:50%;left:0;
  transform: translate(-50%, -50%);
  width:56px;height:56px;border-radius:18px;
  border:1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(0,0,0,.22);
  cursor:grab;
  display:grid;place-items:center;
  transition: transform .14s ease, background .2s ease, box-shadow .2s ease;
}
.ba-handle:hover{background: rgba(0,0,0,.32)}
.ba-handle:active{cursor:grabbing;transform: translate(-50%, -50%) scale(.98)}
.ba-arrows{display:flex;gap:10px;align-items:center}
.ba-arrow{
  width:10px;height:10px;
  border-top: 2px solid rgba(255,255,255,.96);
  border-right: 2px solid rgba(255,255,255,.96);
  opacity:.95;
}
.ba-arrow--left{ transform: rotate(-135deg); }
.ba-arrow--right{ transform: rotate(45deg); }

.ba-label{
  position:absolute;top:14px;
  padding:8px 12px;border-radius:999px;
  font-size:12px;font-weight:900;letter-spacing:.12em;
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
}
.ba-label--before{ left:14px; }
.ba-label--after{ right:14px; }
.ba-hint{
  position:absolute;bottom:14px;left:50%;
  transform: translateX(-50%);
  padding:8px 12px;border-radius:999px;
  font-size:12px;font-weight:900;color:#fff;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
  animation: baPulse 1.6s ease-in-out infinite;
}
@keyframes baPulse{
  0%,100%{ transform: translateX(-50%) scale(1); opacity:.9; }
  50%{ transform: translateX(-50%) scale(1.06); opacity:1; }
}
.ba-meta{padding:16px 18px 18px}
.ba-title{margin:0 0 6px;font-size:16px;color:var(--ink2)}
.ba-desc{margin:0;color:var(--muted);font-size:13px;line-height:1.75}

/* =========================
   FOOTER
========================= */
.footer{
  position:relative;
  overflow:hidden;
  padding:46px 0 30px;
  color:rgba(255,255,255,.88);
  border-top:1px solid rgba(255,255,255,.10);
  background: #061431;
}
.footer::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--footer-img);
  background-size:cover;
  background-position:center;
  filter: saturate(1.06) contrast(1.06);
  opacity:.14;
  transform: scale(1.04);
  pointer-events:none;
}
.footer::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(255,210,0,.16), transparent 60%),
    radial-gradient(900px 420px at 90% 20%, rgba(255,122,24,.14), transparent 60%),
    linear-gradient(180deg, rgba(6,20,49,.96), rgba(6,20,49,.88));
  pointer-events:none;
}
.footer .container,
.footer-inner{position:relative;z-index:1}

.footer-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.footer-links{display:flex;gap:10px;flex-wrap:wrap}
.footer-links a{
  font-weight:900;
  font-size:12px;
  letter-spacing:.04em;
  color:rgba(255,255,255,.90);
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  border-radius:999px;
  padding:10px 12px;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.footer-links a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
}

/* =========================
   LIGHTBOX
========================= */
.lightbox{
  position:fixed;inset:0;
  display:none;
  align-items:center;justify-content:center;
  z-index:100;
}
.lightbox.is-open{display:flex}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.lightbox-body{
  position:relative;
  background:#0b1220;
  border-radius:20px;
  padding:14px;
  max-width:min(980px, 92vw);
  max-height:86vh;
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12);
}
.lightbox-img{max-width:100%;max-height:78vh;border-radius:16px}
.lightbox-close{
  position:absolute;top:10px;right:10px;
  width:40px;height:40px;border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:24px;
  cursor:pointer;
}

/* =========================
   ICON HELPERS (Bootstrap Icons)
========================= */
.icon i{
  font-size: 32px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn i,
.ab-btn i,
.toplink i,
.side-link i,
.ctrl i{
  margin-right: .55rem;
  font-size: 1.05em;
  vertical-align: -0.12em;
}

/* =========================
   REVEAL
========================= */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .60s ease, transform .60s ease;
}
.reveal.is-visible{opacity:1;transform: translateY(0)}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1060px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .hero-quick{grid-template-columns:1fr}
  .feature-inner{grid-template-columns:1fr}
  .ab-subgrid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr 1fr}
  .coverage{grid-template-columns:1fr}
  .contact-inner{grid-template-columns:1fr}
}
@media (max-width: 980px){
  .quote-wrap{grid-template-columns:1fr}

  .nav{display:none}
  .header-cta{display:none}

  .nav-toggle{display:inline-flex}
  .nav-toggle.is-open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .nav-toggle.is-open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

  .mobile-nav{
    position:absolute;
    left:0; right:0;
    top:100%;
    display:none;
    max-height: calc(100vh - 70px);
    overflow:auto;
  }
  .mobile-nav.is-open{ display:block; }

  /* ✅ prevent toggle wrapping down */
  .header-inner{ flex-wrap:nowrap; }
}
@media (max-width: 820px){
  .steps{grid-template-columns:1fr}
  .ab-subgrid{grid-template-columns:1fr}
  .ba-stage{ min-height: 280px; border-radius:0; }
  .ba-handle{ width:52px; height:52px; border-radius:16px; }
}
@media (max-width: 600px){
  .topbar-inner{
    display:grid;
    grid-template-columns: 1fr auto;
    align-items:center;
    gap:10px;
    padding:8px 0;
  }
  .topbar-left .muted,
  .topbar-left .dot{ display:none; }
  .pill{padding:6px 10px;font-size:11px;white-space:nowrap}
  .topbar-right .dot{ display:none; }
  .topbar-right a:nth-of-type(2),
  .topbar-right a:nth-of-type(3){ display:none; }
  .topbar-right{justify-content:flex-end;flex-wrap:nowrap}
  .topbar-right a{font-size:12px;font-weight:800;white-space:nowrap}

  .quote-grid{grid-template-columns:1fr}
  .quote-card{padding:16px}

  /* ✅ better mobile hero spacing */
  .hero{ padding:16px 0 6px; }
  .hero-slider{
    border-radius:22px;
    min-height: min(560px, 72vh);
  }
  @supports (height: 100svh){
    .hero-slider{ min-height: min(560px, 72svh); }
  }
  .slide-content{
    max-width:100%;
    padding:18px 16px calc(92px + env(safe-area-inset-bottom));
  }
  .slide-content p{font-size:14px;}
  .hero-actions .btn{flex:1 1 100%;}
  .ctrl{
    width:40px;height:40px;
    border-radius:14px;
    font-size:20px;
  }

  /* ✅ feature media too tall on mobile -> reduce */
  .feature-media{ min-height:280px; border-radius:22px; }
  .feature-content{ border-radius:22px; padding:18px; }
}
@media (max-width: 420px){
  .brand-text small{display:none}
  .ab-actions .ab-btn{flex:1 1 100%}
  .mini-list{columns:1}
  .ba-stage{ min-height: 240px; }
  .ba-label{ font-size:11px; padding:7px 10px; }
}

/* ✅ services must be 1 column on small phones */
@media (max-width: 760px){
  .services-grid{ grid-template-columns:1fr; }
}

/* ✅ ultra small footer text */
@media (max-width: 380px){
  .footer-bottom span{ font-size:10px; }
}