/* ==========================================================================
   Mobile conversion styles (added for Google Ads / mobile-friendliness pass)
   Keeps new conversion-focused CSS out of the huge legacy style.css so it's
   easy to find, tweak, or remove later.
   ========================================================================== */

/* ---- Sticky mobile "Call Now" bar -------------------------------------- */
.mobile-call-bar {
  display: none;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 62px;
  }

  .mobile-call-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    height: 58px;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
  }

  .mobile-call-bar a {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.2px;
    text-decoration: none;
    color: #fff;
  }

  .mobile-call-bar a svg {
    flex-shrink: 0;
  }

  .mobile-call-bar-call {
    background: #1f9d55;
  }

  .mobile-call-bar-quote {
    background: #0e3655;
  }

  /* Keep Google's reCAPTCHA badge from being hidden behind the call bar */
  .grecaptcha-badge {
    bottom: 70px !important;
  }
}

/* ---- Trust badges strip below the hero (proof points, competitor-inspired:
   DSC and Nexlar both surface trust stats/badges immediately after the hero
   instead of burying them at the page bottom) ----------------------------- */
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  padding: 22px 20px;
  background: #f4f6f9;
  border-bottom: 1px solid #e3e7ee;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #2d3657;
  white-space: nowrap;
}

.trust-badge svg {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: #1f9d55;
}

@media (max-width: 576px) {
  .trust-badges {
    justify-content: flex-start;
    gap: 14px 22px;
  }

  .trust-badge {
    flex: 1 1 auto;
    font-size: 13px;
    white-space: normal;
  }
}

/* ---- Quick Quote: embedded mini lead form (competitor-inspired: Nexlar
   puts a short Name/Email/Phone form right on the homepage instead of
   sending visitors to a separate quote page) ------------------------------ */
.quick-quote {
  display: flex;
  justify-content: center;
  padding: 50px 20px;
  background: #0e3655;
}

.quick-quote-card {
  width: 100%;
  max-width: 640px;
  background: #fff;
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  text-align: center;
}

.quick-quote-title {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 800;
  color: #2d3657;
}

.quick-quote-subtitle {
  margin: 0 0 24px;
  color: #5a6472;
  font-size: 15px;
}

.quick-quote-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
  text-align: left;
}

.quick-quote-fields input {
  grid-column: span 1;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  font-size: 15px;
  border: 1px solid #d7dce3;
  border-radius: 8px;
  color: #1e293b;
}

.quick-quote-fields input:focus {
  outline: none;
  border-color: #1f9d55;
  box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.15);
}

.quick-quote-fields input[name="additional_details"] {
  grid-column: 1 / -1;
}

.quick-quote-submit {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 8px;
  background: #1f9d55;
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.quick-quote-submit:hover {
  background: #188045;
}

.quick-quote-submit:disabled {
  opacity: 0.7;
  cursor: default;
}

.quick-quote-status {
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
}

.quick-quote-status-success {
  background: #e6f6ec;
  color: #1f9d55;
}

.quick-quote-status-error {
  background: #fdecec;
  color: #c53030;
}

.quick-quote-fineprint {
  margin: 16px 0 0;
  font-size: 13px;
  color: #8a94a3;
}

.quick-quote-fineprint a {
  color: #2d3657;
  text-decoration: underline;
}

@media (max-width: 576px) {
  .quick-quote {
    padding: 36px 16px;
  }

  .quick-quote-card {
    padding: 26px 20px;
  }

  .quick-quote-fields {
    grid-template-columns: 1fr;
  }
}

/* ---- Home page hero: fix text-wrapping regression from a legacy old-swiper
   rule (`.swiper-slide { white-space: nowrap }` around line 37652 of
   style.css) that collides with the current hero's slide markup and stops
   the copy from ever wrapping, clipping it at the edge of the slide. Not
   scoped to a media query — it's wrong at every width. ---------------- */
.my_banner .swiper-slide,
.my_banner .swiper-slide-contents,
.my_banner .swiper-slide-contents p {
  white-space: normal;
}

/* ---- Home page hero: fix overlap / overflow on small screens ---------- */
@media (max-width: 768px) {
  .swiper {
    height: auto;
  }

  .swiper-slide {
    min-height: 560px;
    padding: 40px 0;
  }

  .elementor-slide-heading {
    font-size: 28px !important;
    line-height: 1.25 !important;
  }

  .first-btn-slider {
    display: inline-block;
    width: auto;
    max-width: 100%;
    padding: 12px 28px;
    font-size: 16px;
    text-align: center;
    white-space: normal;
  }

  .elementor-slide-description a {
    font-size: 1rem;
    padding: 12px 28px;
  }

  .my_banner .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Arrow nav overlaps the copy on short screens; swipe gesture covers it */
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}

/* ==========================================================================
   Standalone Google Ads landing pages (gate repair, access control, CCTV,
   apartment, commercial). No nav menu, no footer link list on purpose —
   these are meant to be a closed loop: land, call, or fill out the form.
   See landing-header.php / landing-footer.php / inc-trust-badges.php /
   inc-quick-quote-form.php.
   ========================================================================== */

.landing-header {
  background: #fff;
  border-bottom: 1px solid #e3e7ee;
  padding: 14px 20px;
}

.landing-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.landing-header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #2d3657;
  font-weight: 800;
  font-size: 17px;
}

.landing-header-logo img {
  height: 36px;
  width: 36px;
}

.landing-header-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1f9d55;
  color: #fff;
  padding: 10px 18px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

.landing-footer {
  background: #0e3655;
  color: #cfd8e3;
  padding: 28px 20px 90px;
  text-align: center;
}

.landing-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.landing-footer-contact a {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}

.landing-footer-license {
  margin: 10px 0 0;
  font-size: 13px;
  opacity: 0.8;
}

@media (min-width: 769px) {
  .landing-footer {
    padding-bottom: 28px;
  }
}

/* ---- Hero -------------------------------------------------------------- */
.landing-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 70px 20px;
}

.landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 54, 85, 0.82), rgba(14, 54, 85, 0.88));
}

.landing-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.landing-hero h1 {
  color: #fff;
  font-size: 38px;
  line-height: 1.2;
  margin: 0 0 16px;
}

.landing-hero p {
  font-size: 18px;
  color: #e7ecf3;
  margin: 0 0 28px;
}

.landing-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.landing-hero-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1f9d55;
  color: #fff;
  padding: 15px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
}

.landing-hero-ctas .cta-button {
  align-self: auto;
  margin-top: 0;
  padding: 15px 30px;
  font-size: 17px;
}

@media (max-width: 576px) {
  .landing-hero {
    padding: 44px 16px;
  }

  .landing-hero h1 {
    font-size: 28px;
  }

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

  .landing-hero-call,
  .landing-hero-ctas .cta-button {
    width: 100%;
    justify-content: center;
  }
}

/* ---- Real project photo strip ------------------------------------------ */
.landing-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 50px 20px;
  justify-content: center;
}

.landing-photos img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
  .landing-photos {
    grid-template-columns: 1fr;
    padding: 36px 16px;
  }

  .landing-photos img {
    height: 200px;
  }
}

/* ---- Why choose us: large-icon benefit grid ---------------------------- */
.landing-why {
  background: #f4f6f9;
  padding: 50px 20px;
}

.landing-why-inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.landing-why h2 {
  margin: 0 0 36px;
}

.landing-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 24px;
}

.landing-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.landing-benefit svg {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  color: #1f9d55;
}

.landing-benefit p {
  margin: 0;
  font-weight: 700;
  color: #2d3657;
  font-size: 16px;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .landing-benefit-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 18px;
  }
}

@media (max-width: 480px) {
  .landing-benefit-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Hero eyebrow badge (buzzword strip above the headline) ------------ */
.landing-hero-eyebrow {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}

@media (max-width: 576px) {
  .landing-hero-eyebrow {
    font-size: 10.5px;
    padding: 7px 14px;
  }
}

/* ---- Longer narrative / context section --------------------------------- */
.landing-narrative {
  background: #fff;
  padding: 54px 20px;
}

.landing-narrative-inner {
  max-width: 760px;
  margin: 0 auto;
}

.landing-narrative h2 {
  text-align: center;
  margin: 0 0 24px;
}

.landing-narrative p {
  font-size: 17px;
  line-height: 1.7;
  color: #4a5568;
  margin: 0 0 18px;
}

.landing-narrative p:last-child {
  margin-bottom: 0;
}

/* ---- Service-type card row ----------------------------------------------- */
.landing-services-grid {
  background: #0e3655;
  padding: 54px 20px;
}

.landing-services-grid-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.service-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 28px 18px;
  text-align: center;
}

.service-card svg {
  width: 44px;
  height: 44px;
  color: #ff8a5c;
  margin-bottom: 14px;
}

.service-card h3 {
  color: #fff;
  font-size: 16px;
  letter-spacing: 0.03em;
  margin: 0 0 8px;
}

.service-card p {
  margin: 0;
  font-size: 14px;
  color: #cfd8e3;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .landing-services-grid-inner {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .landing-services-grid-inner {
    grid-template-columns: 1fr;
  }
}