:root {
  --navy:   #0d2b55;
  --navy2:  #163a6e;
  --navy3:  #1a4480;
  --sky:    #2e7bc4;
  --skylt:  #5baee0;
  --skypale:#d4e9f7;
  --sun:    #f5a623;
  --solar:  #fbbf24;
  --mint:   #2dbb6e;
  --white:  #ffffff;
  --fog:    #8aaec8;
  --mist:   #c8dced;
  --ff-dis: 'Archivo Black', sans-serif;
  --ff-ser: 'DM Serif Display', serif;
  --ff-body:'Archivo', sans-serif;
  --ff-mono:'Space Mono', monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff-body);background:var(--navy);color:var(--white);overflow-x:hidden}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--navy)}
::-webkit-scrollbar-thumb{background:var(--sky);border-radius:2px}
img{max-width:100%;display:block}
a{text-decoration:none}

/* ── CUSTOM CURSOR ── */
#cur-dot, #cur-ring {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  top: -100px; left: -100px;
}
#cur-dot {
  width: 6px; height: 6px;
  background: var(--solar);
}
#cur-ring {
  width: 32px; height: 32px;
  border: 1.5px solid rgba(91,174,224,.4);
}

/* ── NAV ── */
#main-nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 48px;
  transition:background .4s,box-shadow .4s;
}
#main-nav.scrolled{
  background:rgba(13,43,85,.97);
  backdrop-filter:blur(16px);
  box-shadow:0 2px 32px rgba(0,0,0,.35);
}
.nav-logo img{height:50px;width:auto;border-radius:8px;display:block}
.nav-logo-text{font-family:var(--ff-dis);font-size:20px;color:#fff}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:#fff !important;
  text-shadow:0 1px 6px rgba(0,0,0,.6);
  transition:color .2s;
}
.nav-links a:hover{color:var(--solar) !important}
.nav-links a.active{color:var(--solar) !important}
.nav-cta{
  background:var(--sun);color:var(--navy) !important;
  padding:10px 22px;border-radius:4px;
  font-weight:700;text-shadow:none !important;
  transition:background .2s,transform .2s;
}
.nav-cta:hover{background:var(--solar);transform:translateY(-1px)}

/* ── NAV HAMBURGER ── */
#nav-hamburger{
  display:none;flex-direction:column;gap:5px;
  cursor:pointer;background:none;border:none;padding:8px;
  z-index:1001;
  -webkit-tap-highlight-color:transparent;
}
#nav-hamburger span{
  display:block;width:24px;height:2px;background:#fff;
  border-radius:2px;transition:transform .3s,opacity .3s;
}
#nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
#nav-hamburger.open span:nth-child(2){opacity:0}
#nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── MOBILE MENU (slide-in panel) ── */
#mobile-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(320px, 85vw);
  background: var(--navy2);
  border-left: 1px solid rgba(91,174,224,.15);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 80px 32px 40px;
  gap: 4px;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.23,1,.32,1);
  visibility: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#mobile-menu.open {
  transform: translateX(0);
  visibility: visible;
}

#mm-overlay {
  position: fixed; inset: 0;
  background: rgba(6,11,24,.7);
  backdrop-filter: blur(4px);
  z-index: 10000;
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
  visibility: hidden;
}
#mm-overlay.open {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}

#mobile-close {
  position: absolute; top: 18px; right: 18px;
  background: none; border: 1px solid rgba(91,174,224,.2);
  color: rgba(200,216,234,.7); width: 34px; height: 34px;
  border-radius: 50%; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.mm-link {
  font-family: var(--ff-dis); font-size: 22px; color: #fff !important;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06);
  text-decoration: none; display: block; width: 100%;
}
.mm-link:hover { color: var(--skylt) !important; }
.mm-cta {
  margin-top: 16px; background: var(--sun); color: var(--navy) !important;
  padding: 13px 24px; font-family: var(--ff-mono); font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700;
  text-align: center; text-decoration: none; border-radius: 2px; display: block;
  width: 100%;
}
.mm-phone { margin-top: 14px; font-family: var(--ff-dis); font-size: 17px; }
.mm-phone a { color: var(--skylt); text-decoration: none; }

/* ── MARQUEE ── */
.marquee-wrap{
  background:linear-gradient(90deg,var(--navy2),var(--navy3),var(--navy2));
  overflow:hidden;padding:13px 0;
  border-top:1px solid rgba(77,163,224,.2);
  border-bottom:1px solid rgba(77,163,224,.2);
}
.marquee-wrap.marquee-light{
  background:linear-gradient(90deg,var(--sky),var(--skylt),var(--sky));
}
.marquee-track{display:flex}
.marquee-inner{
  display:flex;flex-shrink:0;
  animation:mq 30s linear infinite;
}
.marquee-inner.rev{animation:mqrev 30s linear infinite}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqrev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.marquee-item{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:#fff;white-space:nowrap;padding:0 36px;
}
.marquee-item::after{content:'\2726';margin-left:36px;color:var(--solar)}
.marquee-light .marquee-item{color:var(--navy)}
.marquee-light .marquee-item::after{color:var(--navy2)}

/* ── BUTTONS ── */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--sun);color:var(--navy);
  padding:15px 34px;border-radius:4px;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:2px;
  font-weight:700;text-transform:uppercase;
  transition:background .2s,transform .2s;
  border:none;cursor:pointer;
}
.btn-primary:hover{background:var(--solar);transform:translateY(-2px)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(255,255,255,.3);color:#fff;
  padding:15px 34px;border-radius:4px;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;
  transition:border-color .2s,background .2s;
}
.btn-ghost:hover{border-color:var(--skylt);background:rgba(91,174,224,.1)}
.btn-sky{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--sky);color:#fff;
  padding:15px 34px;border-radius:4px;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:2px;
  font-weight:700;text-transform:uppercase;
  transition:background .2s,transform .2s;
}
.btn-sky:hover{background:var(--navy3);transform:translateY(-2px)}

/* ── SECTION COMMON ── */
.sec{padding:96px 60px}
.sec-dark{background:var(--navy)}
.sec-mid{background:var(--navy2)}
.sec-sky{background:linear-gradient(135deg,var(--navy2),var(--navy3))}
.eyebrow{
  font-family:var(--ff-mono);font-size:11px;letter-spacing:3px;
  text-transform:uppercase;color:var(--skylt);
  margin-bottom:14px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';display:block;width:24px;height:2px;background:var(--skylt)}
.eyebrow.gold{color:var(--solar)}
.eyebrow.gold::before{background:var(--solar)}
.eyebrow.mint{color:var(--mint)}
.eyebrow.mint::before{background:var(--mint)}
h1.display,h2.display{
  font-family:var(--ff-dis);font-size:clamp(36px,5.5vw,72px);
  line-height:1.02;letter-spacing:-1.5px;color:#fff;margin-bottom:16px;
}
h2.display em{font-family:var(--ff-ser);font-style:italic;color:var(--skylt)}
.subtext{font-size:15px;line-height:1.85;color:var(--fog)}

/* ── SHIELD BULLET ── */
.shield-li{display:flex;align-items:flex-start;gap:12px;margin-bottom:13px;font-size:14px;line-height:1.65;color:var(--mist)}
.shield-li::before{
  content:'';flex-shrink:0;width:18px;height:22px;margin-top:2px;
  background:var(--sun);
  clip-path:polygon(50% 0%,100% 20%,100% 65%,50% 100%,0% 65%,0% 20%);
}
.shield-li.mint::before{background:var(--mint)}
.mint{color:var(--mint) !important}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}
.reveal.vis{opacity:1;transform:none}

/* ── PAGE HERO (inner pages) ── */
.page-hero{
  padding:160px 60px 80px;
  background:linear-gradient(135deg,var(--navy2) 0%,var(--navy) 100%);
  position:relative;overflow:hidden;
}
.page-hero::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 70% 40%,rgba(91,174,224,.12) 0%,transparent 65%);
}
.page-hero-content{position:relative;z-index:1;max-width:700px}

/* ── FAQ ACCORDION ── */
.faq-item {
  border: 1px solid rgba(91,174,224,.15) !important;
  background: rgba(22,58,110,.4) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  margin-bottom: 2px !important;
}
.faq-q {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 20px 26px !important;
  cursor: pointer !important;
  font-family: var(--ff-dis) !important;
  font-size: 14px !important;
  color: #fff !important;
  gap: 16px !important;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s;
}
.faq-q:hover { background: rgba(91,174,224,.06); }
.faq-icon {
  width: 24px !important; height: 24px !important;
  min-width: 24px !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(91,174,224,.2) !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 18px !important; color: var(--skylt) !important;
  transition: transform .3s, border-color .3s, color .3s;
  line-height: 1 !important;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg) !important;
  border-color: var(--solar) !important;
  color: var(--solar) !important;
}

/* FAQ answer: HIDDEN by default — uses display:none as bulletproof fallback */
.faq-a {
  display: none !important;
  overflow: hidden !important;
  padding: 0 26px !important;
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: var(--fog) !important;
}
/* FAQ answer: VISIBLE when .open */
.faq-item.open > .faq-a {
  display: block !important;
  padding: 0 26px 22px !important;
}

/* ── FOOTER ── */
footer{
  background:var(--navy2);
  border-top:1px solid rgba(77,163,224,.15);
  padding:60px;
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:48px;
}
.footer-logo img{height:72px;width:auto;border-radius:10px;margin-bottom:12px}
.footer-brand{font-size:13px;color:var(--fog);line-height:1.75}
.footer-auth{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:14px;
  font-family:var(--ff-mono);font-size:10px;letter-spacing:1.5px;
  color:var(--solar);text-transform:uppercase;
  border:1px solid rgba(245,166,35,.3);padding:6px 12px;border-radius:2px;
}
.footer-col-title{
  font-family:var(--ff-mono);font-size:10px;letter-spacing:2px;
  text-transform:uppercase;color:var(--sky);margin-bottom:14px;
}
.footer-links{display:flex;flex-direction:column;gap:9px}
.footer-links a{font-size:13px;color:var(--fog);transition:color .2s}
.footer-links a:hover{color:var(--skylt)}
.footer-contact p{font-size:13px;color:var(--fog);line-height:2}
.footer-contact a{color:var(--skylt)}
.footer-bottom{
  grid-column:1/-1;padding-top:28px;
  border-top:1px solid rgba(77,163,224,.1);
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;color:var(--fog);
}
.footer-badge{font-family:var(--ff-mono);font-size:11px;letter-spacing:2px;color:var(--solar);text-transform:uppercase}

/* WordPress admin bar */
.admin-bar #main-nav { top: 32px; }
@media screen and (max-width:782px) { .admin-bar #main-nav { top: 46px; } }

/* CF7 */
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],
.wpcf7 select,.wpcf7 textarea {
  width:100%;background:rgba(13,43,85,.6);border:1px solid rgba(91,174,224,.2);
  border-radius:4px;padding:12px 14px;color:#fff;font-family:var(--ff-body);
  font-size:14px;outline:none;margin-bottom:12px;
}
.wpcf7 input[type=submit] {
  background:var(--sun);color:var(--navy);border:none;padding:14px 32px;
  font-family:var(--ff-mono);font-size:11px;letter-spacing:2px;font-weight:700;
  text-transform:uppercase;cursor:pointer;width:100%;
}


/* ══════════════════════════════════════════════════
   RESPONSIVE — TABLET (max 1024px)
   ══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Nav */
  #nav-hamburger { display: flex !important; }
  .nav-links { display: none !important; }
  #main-nav { padding: 14px 24px !important; }
  #main-nav.scrolled { padding: 10px 24px !important; }

  /* Hero — single column, hide stats sidebar */
  #hero > div:last-child,
  [style*="grid-template-columns:1fr 300px"] {
    grid-template-columns: 1fr !important;
  }
  .hero-right { display: none !important; }
  #hero > div:last-child {
    padding: 100px 32px 60px !important;
  }

  /* All 2-col grids stack */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Keep inner 2x2 stat grids as 2-col */
  [style*="grid-template-columns:1fr 1fr"] > [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Stats bar — 2 cols */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* How-it-works & gallery — 2 cols */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* 10-step process — 3 cols then 2 cols on smaller */
  [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* FAQ layout — single col */
  [style*="grid-template-columns:280px 1fr"],
  [style*="grid-template-columns: 280px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* Section padding */
  [style*="padding:80px 60px"],
  [style*="padding:96px 60px"] {
    padding: 64px 32px !important;
  }
  [style*="padding:140px 60px"],
  [style*="padding:160px 60px"] {
    padding: 120px 32px 48px !important;
  }
  [style*="padding:120px 60px"] {
    padding: 80px 32px !important;
  }
  [style*="padding:130px 60px"] {
    padding: 90px 32px !important;
  }
  [style*="padding:88px 60px"] {
    padding: 60px 32px !important;
  }
  [style*="padding:140px 60px 80px"] {
    padding: 120px 32px 48px !important;
    min-height: auto !important;
  }

  /* Gallery negative margin */
  [style*="margin:0 -60px"] {
    margin: 0 -32px !important;
    grid-template-columns: 1fr 1fr !important;
  }

  /* Footer — 2 cols */
  footer {
    grid-template-columns: 1fr 1fr !important;
    padding: 48px 32px !important;
  }

  /* Page hero */
  .page-hero { padding: 130px 32px 60px; }
  .sec { padding: 72px 32px; }
}


/* ══════════════════════════════════════════════════
   RESPONSIVE — MOBILE (max 768px)
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Disable custom cursor */
  body { cursor: auto !important; }
  #cur-dot, #cur-ring { display: none !important; }

  #main-nav { padding: 12px 20px !important; }
  #main-nav.scrolled { padding: 10px 20px !important; }

  /* All inline-style grids to single column */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 300px"],
  [style*="grid-template-columns:1.2fr 1fr 1fr"],
  [style*="grid-template-columns:280px 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Stats keep 2 col on mobile */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 2px !important;
  }

  /* Inner stat grids keep 2 col */
  [style*="grid-template-columns:1fr 1fr"] > [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .hero-right { display: none !important; }

  /* All section padding */
  [style*="padding:80px 60px"],
  [style*="padding:96px 60px"] { padding: 52px 20px !important; }
  [style*="padding:60px"] { padding: 32px 20px !important; }
  [style*="padding:140px 60px 80px"] { padding: 110px 20px 44px !important; }
  [style*="padding:160px 60px 80px"] { padding: 120px 20px 44px !important; }
  [style*="padding:140px 60px"],
  [style*="padding:160px 60px"] { padding: 110px 20px 44px !important; }
  [style*="padding:120px 60px"] { padding: 72px 20px !important; }
  [style*="padding:130px 60px"] { padding: 80px 20px !important; }
  [style*="padding:88px 60px"] { padding: 52px 20px !important; }

  /* Product card image min-height */
  [style*="min-height:520px"],
  [style*="min-height: 520px"] {
    min-height: 260px !important;
  }

  /* Hero text */
  .htl { font-size: clamp(32px, 9vw, 52px) !important; }
  h1.display, h2.display { font-size: clamp(28px, 8vw, 48px); }

  /* CTA final title */
  [style*="font-size:clamp(48px"] {
    font-size: clamp(36px, 10vw, 64px) !important;
  }

  /* Gallery negative margin */
  [style*="margin:0 -60px"],
  [style*="margin: 0 -60px"] {
    margin: 0 -20px !important;
    grid-template-columns: 1fr !important;
  }

  /* Contact form rows */
  [style*="grid-template-columns:1fr 1fr"][style*="gap:12px"] {
    grid-template-columns: 1fr !important;
  }

  /* Footer single col */
  footer {
    grid-template-columns: 1fr !important;
    padding: 40px 20px !important;
  }
  footer > [style*="grid-column:1/-1"] {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }

  .sec { padding: 52px 20px; }
  .page-hero { padding: 110px 20px 48px; }

  /* Buttons: full-width on mobile for touch targets */
  .btn-primary,
  .btn-ghost,
  .btn-sky {
    padding: 14px 24px;
    font-size: 10px;
    text-align: center;
    justify-content: center;
  }
  /* CTA button rows wrap nicely */
  [style*="display:flex"][style*="gap:14px"],
  [style*="display:flex"][style*="gap:12px"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Marquee smaller text */
  .marquee-item {
    font-size: 10px;
    letter-spacing: 1.5px;
    padding: 0 24px;
  }
  .marquee-item::after { margin-left: 24px; }
}


/* ══════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (max 375px)
   ══════════════════════════════════════════════════ */
@media (max-width: 375px) {
  #main-nav { padding: 10px 16px !important; }
  .nav-logo img { height: 40px; }

  [style*="padding:80px 60px"],
  [style*="padding:96px 60px"] { padding: 40px 16px !important; }
  [style*="padding:140px 60px 80px"] { padding: 100px 16px 36px !important; }
  [style*="padding:160px 60px 80px"] { padding: 110px 16px 36px !important; }
  [style*="padding:120px 60px"] { padding: 60px 16px !important; }
  [style*="padding:130px 60px"] { padding: 70px 16px !important; }
  [style*="padding:88px 60px"] { padding: 44px 16px !important; }
  [style*="padding:60px"] { padding: 28px 16px !important; }

  .htl { font-size: clamp(28px, 9vw, 40px) !important; }
  h1.display, h2.display { font-size: clamp(24px, 8vw, 36px); }

  footer { padding: 32px 16px !important; }

  /* Stats single col on very small screens */
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  .faq-q { padding: 16px 18px; font-size: 13px; }
  .faq-a { padding-left: 18px !important; padding-right: 18px !important; font-size: 13px; }
  .faq-item.open .faq-a { padding-left: 18px !important; padding-right: 18px !important; }

  #mobile-menu { width: 85vw !important; padding: 70px 24px 32px !important; }
}


/* ══════════════════════════════════════════════════
   RESPONSIVE — VERY SMALL (max 320px)
   ══════════════════════════════════════════════════ */
@media (max-width: 320px) {
  .htl { font-size: 26px !important; }
  h1.display, h2.display { font-size: 22px !important; }

  .btn-primary, .btn-ghost, .btn-sky {
    padding: 12px 16px;
    font-size: 9px;
    letter-spacing: 1px;
  }

  [style*="padding:80px 60px"],
  [style*="padding:96px 60px"] { padding: 36px 12px !important; }
  [style*="padding:140px 60px 80px"] { padding: 90px 12px 32px !important; }
  [style*="padding:60px"] { padding: 24px 12px !important; }

  footer { padding: 28px 12px !important; }

  .marquee-item { font-size: 9px; padding: 0 16px; }
  .marquee-item::after { margin-left: 16px; }
}

/* ============================================== */
/* CLIENT CUSTOM CSS — preserved from Customizer  */
/* ============================================== */

/* Fix 4-column stat grid on mobile */
@media (max-width: 768px) {
  section > div[style*="repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }
  section > div[style*="repeat(4"] > div {
    padding: 20px 20px !important;
  }
  /* Fix hero buttons wrapping */
  div[style*="display:flex"][style*="gap"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}
@media (max-width: 375px) {
  section > div[style*="repeat(4"] {
    grid-template-columns: 1fr !important;
  }
  section > div[style*="repeat(4"] > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(91,174,224,.15) !important;
  }
}

/* Fix About section 2-column layout on mobile */
@media (max-width: 768px) {
  section[style*="padding:80px 60px"] > div[style*="1fr 1fr"][style*="gap:80px"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  section[style*="padding:80px 60px"] {
    padding: 40px 8px !important;
  }
}

/* CTA NAV */
a.nav-cta { color: #000000 !important; }
a.nav-cta:hover { color: #252525 !important; }

/* Contact Form 7 styling */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  width: 100% !important;
  background: rgba(13,43,85,.6) !important;
  border: 1px solid rgba(91,174,224,.2) !important;
  color: #fff !important;
  padding: 14px 16px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  margin-bottom: 8px !important;
  box-sizing: border-box !important;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
  border-color: var(--sky) !important;
  outline: none !important;
}
.wpcf7 textarea { min-height: 140px !important; resize: vertical !important; }
.wpcf7 input[type="submit"] {
  background: var(--solar) !important;
  color: var(--navy) !important;
  border: none !important;
  padding: 16px 40px !important;
  font-family: var(--ff-mono) !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  width: 100% !important;
  margin-top: 8px !important;
  transition: opacity .3s !important;
}
.wpcf7 input[type="submit"]:hover { opacity: .85 !important; }
.wpcf7 label {
  color: #fff !important;
  font-size: 13px !important;
  font-family: var(--ff-mono) !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 16px !important;
}
.wpcf7-response-output {
  border-color: var(--solar) !important;
  color: #fff !important;
  margin-top: 16px !important;
}
.wpcf7 .wpcf7-form-control { margin-top: 8px !important; }

/* Footer + Nav Logos */
img.footer-logo { width: 180px; border-radius: 10px; }
.nav-logo img { height: 100px; }
@media (max-width: 768px) {
  .nav-logo img { height: 80px !important; }
}

/* Hero eyebrow size */
.eyebrow.gold.hero-eyebrow { font-size: 20px; }

/* Hero stats panel — mobile 2-up grid */
@media (max-width: 768px) {
  .hero-right { display: block !important; width: 100% !important; }
  .hero-right > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
  .hero-right > div > div {
    background: rgba(13,43,85,.5) !important;
    border: 1px solid rgba(91,174,224,.15) !important;
    border-radius: 4px !important;
    padding: 16px !important;
    text-align: center !important;
  }
}
.hero-right > div {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Hero stat labels — larger on mobile */
@media (max-width: 768px) {
  .hero-right div[style*="font-size:11px"] { font-size: 14px !important; }
}
.hero-right div[style*="font-size:11px"] { font-size: 14px !important; }

/* Remove inline bold from hero subtext */
.hero-sub strong { display: none !important; }

/* Very small viewport tweaks */
@media (max-width: 320px) {
  .htl { font-size: 52px !important; }
}

/* Eyebrow on mobile */
@media (max-width: 768px) {
  .eyebrow { font-size: 13px !important; }
}

/* Hero eyebrow — hidden per client */
.eyebrow.gold.hero-eyebrow {
  display: none !important;
  font-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}
#hero > div[style*="padding:140px"] {
  padding-top: 60px !important;
  align-items: center !important;
}

/* Section headings */
h2.display,
h2.display.reveal,
h2.display.reveal.vis {
  font-size: 44px !important;
  font-weight: 400 !important;
}
@media (max-width: 768px) {
  h2.display,
  h2.display.reveal,
  h2.display.reveal.vis {
    font-size: 34px !important;
    font-weight: 500 !important;
  }
}

/* Subtext on very small viewports */
@media (max-width: 375px) {
  .subtext { font-size: 14px !important; }
}

/* Statement attribution on mobile */
@media (max-width: 768px) {
  .stmt-attr { font-size: 13px !important; }
}

/* ============================================== */
/* MOBILE LAYOUT FIXES — v4.2.2                    */
/* Handles new 3-col and 5-col grids added in      */
/* v4.2.0 (3-step cards, promise cards, process)   */
/* ============================================== */

@media (max-width: 768px) {

  /* Hero — stack hero content + stats panel */
  #hero > div[style*="grid-template-columns:1fr 300px"] {
    grid-template-columns: 1fr !important;
    padding: 120px 16px 40px !important;
    gap: 24px !important;
  }

  /* Products section (Loxon XP / Latitude cards) — stack image and text */
  div[style*="grid-template-columns:1fr 1fr"][style*="border-top:1px solid rgba(91,174,224,.15)"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns:1fr 1fr"][style*="border-top:1px solid rgba(91,174,224,.15)"] > div {
    padding: 32px 16px !important;
  }
  div[style*="grid-template-columns:1fr 1fr"][style*="border-top:1px solid rgba(91,174,224,.15)"] > div[style*="min-height:520px"] {
    min-height: 260px !important;
  }

  /* 3-column card grids (3-step cards on House Coating, Residential, promise cards on Contact) */
  section > div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  section > div[style*="grid-template-columns:repeat(3,1fr)"] > div {
    padding: 32px 20px !important;
  }

  /* 5-column 10-step process grid (House Coating) → 2 columns */
  section > div[style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* 2-column split layouts inside 80px sections */
  section > div[style*="grid-template-columns:1fr 1fr"][style*="gap:60px"],
  section > div[style*="grid-template-columns:1fr 1fr"][style*="gap:80px"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Contact hero 2-col layout */
  section[style*="min-height:80vh"] > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-top: 40px !important;
  }

  /* FAQ section: 280px sidebar + content → stacked */
  section > div[style*="grid-template-columns:280px 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Footer 3-col grid → single column */
  footer[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 40px 20px !important;
  }

  /* About section 2-col internal grid (stats 2×2) stays but reduces gap */
  section > div > div[style*="grid-template-columns:1fr 1fr"][style*="gap:8px"] {
    gap: 8px !important;
  }

  /* Reduce outer section padding on mobile */
  section[style*="padding:80px 60px"],
  section[style*="padding:88px 60px"],
  section[style*="padding:120px 60px"],
  section[style*="padding:130px 60px"],
  section[style*="padding:160px 60px 80px"],
  section[style*="padding:140px 60px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* House Coating hero section padding */
  section > div[style*="padding:160px 60px 80px"] {
    padding: 120px 16px 40px !important;
  }

  /* Gallery 3-up grid → single column */
  section[id="gallery"] > div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    margin: 0 !important;
  }

  /* Video section aspect-ratio stays but wrap */
  section[id="video"] > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Marquee item size on mobile */
  .marquee-item { font-size: 11px !important; padding: 0 14px !important; }
}

@media (max-width: 480px) {
  /* 10-step process on very small screens → single column */
  section > div[style*="grid-template-columns:repeat(5,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* About stats 2×2 → single column on tiny screens */
  section > div > div[style*="grid-template-columns:1fr 1fr"][style*="gap:8px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================== */
/* MOBILE SPACING FIXES — v4.2.3                   */
/* More breathing room at the edges + scoped fixes */
/* ============================================== */

@media (max-width: 768px) {

  /* Hero: generous horizontal padding so text never touches the edge */
  #hero > div[style*="grid-template-columns:1fr 300px"] {
    padding: 120px 24px 48px !important;
  }

  /* Hero headline lines — add inline padding to safeguard */
  #hero .htl {
    padding-right: 8px !important;
    padding-left: 0 !important;
    word-break: break-word !important;
  }

  /* Hero subtext and eyebrow — prevent touching edges */
  #hero .hero-sub,
  #hero .hero-eyebrow { padding-right: 8px !important; }

  /* Hero buttons — wrap and fill width */
  #hero .hero-cta { flex-direction: column !important; align-items: stretch !important; }
  #hero .hero-cta a { width: 100% !important; justify-content: center !important; text-align: center !important; }

  /* House Coating / Residential / Contact heroes — same side padding */
  section > div[style*="padding:160px 60px 80px"] {
    padding: 120px 24px 48px !important;
  }

  /* All full-width sections — lift left/right padding from 16px -> 24px */
  section[style*="padding:80px 60px"],
  section[style*="padding:88px 60px"],
  section[style*="padding:120px 60px"],
  section[style*="padding:130px 60px"],
  section[style*="padding:140px 60px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* Product cards (Loxon XP / Latitude) — inner padding */
  div[style*="grid-template-columns:1fr 1fr"][style*="border-top:1px solid rgba(91,174,224,.15)"] > div {
    padding: 40px 24px !important;
  }

  /* 3-col cards padding */
  section > div[style*="grid-template-columns:repeat(3,1fr)"] > div {
    padding: 32px 24px !important;
  }

  /* Footer generous padding */
  footer[style*="grid-template-columns"] {
    padding: 40px 24px !important;
  }

  /* Contact hero padding */
  section[style*="min-height:80vh"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* FAQ items — side padding inside cards */
  .faq-item { padding-left: 4px !important; padding-right: 4px !important; }
}

/* Very small screens — pull back a bit so long words still fit */
@media (max-width: 375px) {
  #hero > div[style*="grid-template-columns:1fr 300px"] {
    padding: 100px 18px 36px !important;
  }
  section > div[style*="padding:160px 60px 80px"] {
    padding: 100px 18px 36px !important;
  }
  section[style*="padding:80px 60px"],
  section[style*="padding:88px 60px"],
  section[style*="padding:120px 60px"],
  section[style*="padding:130px 60px"],
  section[style*="padding:140px 60px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  footer[style*="grid-template-columns"] { padding: 32px 18px !important; }
}