/* ==========================================================================
   responsive.css - Layout restructuring across breakpoints
   Approach: change structure (columns, stacking, positioning), not just fonts.
   ========================================================================== */

/* ---------- <= 1080px : tablets / small laptops ---------- */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }
  .nav__desktop-cta { display: none; }

  /* Top bar on mobile = logo + burger only (language moves into the menu),
     so the burger can never be pushed off the right edge on small screens. */
  .nav__inner { justify-content: space-between; gap: var(--sp-3);padding: 0 70px; }
  .nav__actions .lang-switch { display: none; }

  /* Language switch shown inside the mobile menu instead */
  .lang-switch--mobile {
    display: inline-flex;
    margin-bottom: var(--sp-4);
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--border-on-dark);
  }
  .lang-switch--mobile .lang-switch__btn { color: var(--text-on-dark); }
  .lang-switch--mobile .lang-switch__btn[aria-pressed="true"] { background: var(--orange); color: var(--white); }

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

  .defect-card--1 { left: auto; right: 26%; }
  .hero__scrollcue { display: none; }

  .why,
  .report,
  .coverage,
  .cta,
  .defects { grid-template-columns: 1fr; }

  .defects__panel { position: static; }
  .defects__tabs { display: grid; grid-template-columns: repeat(2, 1fr); }

  .footer__top { grid-template-columns: 1fr 1fr; }

  /* Report becomes single column: centre the mock and drop the rotation on
     the decorative stacked pages so nothing overhangs the screen edge. */
  .report__mock { max-width: 440px; margin-inline: auto; }
  .report-page--back { transform: translate(14px, 14px); }
  .report-page--mid { transform: translate(7px, 7px); }
}

/* ---------- <= 860px : large phones / small tablets ---------- */
@media (max-width: 860px) {
  .nav__inner { justify-content: space-between; gap: var(--sp-3);padding: 0 40px; }

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

  /* ---- Hero keeps the DESKTOP concept on mobile: the photo stays a
     full-bleed background and the copy is overlaid on top of it
     (image behind, words in front) ---- */
  .hero {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--nav-h) + 1.5rem);
  }
  .hero__inner {
    flex: 1;
    align-items: flex-start;
    /* top spacer reveals a clear band of the house photo before the copy,
       so the image reads at the top and the words sit lower over the dark part */
    padding-block: clamp(3.5rem, 13vh, 7rem) var(--sp-7);
  }
  .hero__content { max-width: none; }

  /* visual stays an absolute full-bleed background layer, exactly like desktop */
  .hero__visual {
    position: absolute;
    inset: 0;
    z-index: 0;
    order: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .hero__house { object-position: 60% 42%; transform: scale(1.05); }

  /* mobile mirrors the desktop fade, rotated to run top -> bottom: the house
     shows clearly at the top and darkens as it descends, so the copy lower down
     sits over a dark, legible area (desktop fades right -> left instead). */
  .hero__overlay {
    background:
      linear-gradient(180deg,
        rgba(8, 22, 40, 0.46) 0%,
        rgba(8, 22, 40, 0.24) 13%,
        rgba(8, 22, 40, 0.34) 20%,
        rgba(8, 22, 40, 0.66) 30%,
        rgba(8, 22, 40, 0.86) 46%,
        rgba(8, 22, 40, 0.95) 100%);
  }

  /* hide the sharp desktop callouts (cards, hotspots, connectors): over
     full-width copy they only clutter the view. */
  .hero__connectors,
  .hotspot,
  .defect-card,
  .report-card { display: none; }

  /* keep the SAME crisp glowing scan line as desktop (GSAP retargets the sweep
     for narrow screens), but drop its opacity so it sits at a similar faintness
     to the dimmed house photo behind it, instead of a bold bright streak.
     opacity() multiplies on top of the opacity GSAP animates, and we keep the
     desktop drop-shadow glow so it still reads as light rather than a hard line. */
  .hero__scanbeam {
    filter:
      drop-shadow(0 0 10px rgba(255, 140, 50, 0.9))
      drop-shadow(0 0 26px rgba(255, 120, 30, 0.6))
      opacity(0.3);
  }

  /* highlights: 2-up grid, sit below the hero (no overlap) once stacked */
  .highlights { padding-top: var(--sp-6); }
  .highlights__card { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
  .highlight + .highlight::before { display: none; }
  .highlight:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .highlight:nth-child(even) { border-left: 1px solid var(--border); }
  /* trust badges: stack as separate full-row blocks, no divider lines */
  .hero__trust { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .hero__trust li {
    border-right: 0;
    margin-right: 0;
    padding: 0;
    font-size: 0.9rem;
  }
  .hero__trust-icon { width: 42px; height: 42px; }

  /* ==========================================================================
   PROCESS CARDS RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .process-section__heading-grid {
    grid-template-columns:
      minmax(0, 1.1fr)
      minmax(280px, 0.9fr);

    gap: 3rem;
  }

  .process__track {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .process-step,
  .process-step:nth-child(4),
  .process-step:nth-child(5) {
    grid-column: auto;
  }

  .process-step:last-child {
    grid-column: 1 / -1;
  }
}


@media (max-width: 860px) {
  .process-section__heading-grid {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 1.4rem;
  }

  .process-section__intro {
    max-width: 620px;

    margin: 0;
  }

  .process-step {
    min-height: 290px;
  }
}


@media (max-width: 640px) {
  .process-section {
    padding:
      4.5rem
      0
      5rem;
  }

  .process-section__header {
    margin-bottom: 2.5rem;
  }

  .process-section__title {
    font-size: var(--fs-h2);
    line-height: 1.04;
  }

  .process-section__intro {
    font-size: 0.96rem;
    line-height: 1.65;
  }

  .process__track {
    grid-template-columns: 1fr;

    gap: 1rem;
  }

  .process-step,
  .process-step:nth-child(4),
  .process-step:nth-child(5),
  .process-step:last-child {
    grid-column: auto;

    min-height: 0;

    padding: 1.25rem;
  }

  .process-step__top {
    align-items: flex-start;
  }

  .process-step__num {
    font-size: 2.75rem;
  }

  .process-step__icon {
    width: 48px;
    height: 48px;
  }

  .process-step__icon svg {
    width: 22px;
    height: 22px;
  }

  .process-step__body {
    margin-top: 2.4rem;
    padding-top: 0;
  }

  .process-step__title {
    font-size: 1.2rem;
  }

  .process-step__desc {
    margin-top: 0.55rem;

    font-size: 0.82rem;
    line-height: 1.6;
  }

  .process-step__status {
    display: none;
  }

  .process-step__mini-list {
    margin-top: 1rem;
  }

  .process-section__footer {
    display: grid;
    grid-template-columns: 1fr;

    gap: 1.2rem;

    margin-top: 2.5rem;

    padding: 1.25rem;
  }

  .process-section__footer .btn {
    width: 100%;

    justify-content: center;
  }
}

  .report__list { grid-template-columns: 1fr; }

  /* Clean single report card on phones: the decorative stack is a desktop
     flourish and the offset can nudge past a narrow screen, so drop it. */
  .report-page--back,
  .report-page--mid { display: none; }
  .report__mock { max-width: none; }
}

/* ---------- <= 640px : phones ---------- */
@media (max-width: 640px) {
  /* property portfolio cards: slightly narrower + tighter gap on phones */
  .prop-card { width: 224px; margin-right: var(--sp-4); }
  .prop-marquee__track { animation-duration: 42s; }

  /* highlights: single column stack */
  .highlights__card { grid-template-columns: 1fr; }
  .highlight:nth-child(even) { border-left: 0; }
  .highlight:nth-child(n + 2) { border-top: 1px solid var(--border); }

  .form-grid { grid-template-columns: 1fr; }
  .why__facts { grid-template-columns: 1fr; }
  .coverage__list { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; gap: var(--sp-7); }
  .footer__bottom { justify-content: flex-start; }

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

  /* Gallery filters scroll horizontally instead of wrapping into many rows */
  .gallery__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }
  .gallery__filters::-webkit-scrollbar { display: none; }
  .filter-btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-height: 40px;
  }

  .testi__grid,
  .defects__tabs {
    grid-template-columns: 1fr;
  }

  /* About: single-column checklist, 2-up stat cards, tuned framed media */
  .about__actions { flex-wrap: wrap; }

  .hero__cta { gap: var(--sp-3); }
  .hero__cta .btn { flex: 1 1 auto; justify-content: center; }

  /* Smaller floating buttons + hide WA label */
  .float-btn { height: 50px; }
  .float-top { width: 40px; height: 40px; }
  .float-top svg { width: 16px; height: 16px; }
  .float-wa__label { display: none; }
  .float-wa { width: 50px; padding: 0; justify-content: center; }
}

/* ---------- <= 400px : very small phones ---------- */
@media (max-width: 400px) {
  .gallery__grid { grid-template-columns: 1fr; }
  .booking-form__actions { flex-direction: column; }
  .booking-form__actions .btn { width: 100%; }

  .hero { padding-top: calc(var(--nav-h) + 1rem); }
  .nav__logo-sub { display: none; }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
}

/* ---------- Large screens: allow the wide container to breathe ---------- */
@media (min-width: 1440px) {
  .hero__content { max-width: 660px; }
}
/* =========================================================
   FINAL MOBILE HERO
   Target: clean full-screen layout like reference screenshot
   ========================================================= */

   .hero__trust-sub,
   .hero__proof {
     display: none;
   }
   
   .hero::after {
     content: none;
   }
   
   @media (max-width: 820px) {
     /* ---------------------------------------------------------
        HERO CONTAINER
        --------------------------------------------------------- */
   
     .hero {
       position: relative;
       min-height: auto;
       display: block;
   
       padding-top: 0;
       padding-bottom: 92px;
   
       background: #081b31;
       overflow: hidden;
       isolation: isolate;
     }
    
   
     /* ---------------------------------------------------------
        HERO BACKGROUND
        --------------------------------------------------------- */
   
     .hero__visual {
       position: absolute;
       inset: 0;
       z-index: 0;
   
       width: 100%;
       height: 100%;
       overflow: hidden;
     }
   
     .hero__media {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
     }
   
     .hero__house {
       position: absolute;
       inset: 0;
   
       width: 100%;
       height: 100%;
   
       object-fit: cover;
   
       /*
         Moves the house slightly right and keeps
         the roof visible behind the headline.
       */
       object-position: 61% top;
      transform: scale(1.02);
     }
   
    
     .hero__overlay {
      background:
        /* Darken the lower area behind cards */
        linear-gradient(
          180deg,
          rgba(5, 19, 35, 0.12) 0%,
          rgba(5, 19, 35, 0.20) 18%,
          rgba(5, 19, 35, 0.40) 36%,
          rgba(5, 19, 35, 0.68) 54%,
          rgba(5, 19, 35, 0.90) 72%,
          rgba(5, 19, 35, 0.98) 100%
        ),
  
        /* Dark left side for heading and description */
        linear-gradient(
          90deg,
          rgba(4, 17, 32, 0.94) 0%,
          rgba(4, 17, 32, 0.82) 24%,
          rgba(4, 17, 32, 0.55) 52%,
          rgba(4, 17, 32, 0.18) 78%,
          rgba(4, 17, 32, 0.05) 100%
        ),
  
        /* Soft vignette around the edges */
        radial-gradient(
          ellipse at 72% 20%,
          rgba(13, 37, 62, 0) 0%,
          rgba(7, 23, 41, 0.08) 36%,
          rgba(4, 17, 32, 0.42) 100%
        );
    }
  
   
     /* Subtle blueprint grid */
     .hero__visual::after {
       content: "";
       position: absolute;
       inset: 0;
       z-index: 2;
   
       background-image:
         linear-gradient(
           rgba(255, 255, 255, 0.035) 1px,
           transparent 1px
         ),
         linear-gradient(
           90deg,
           rgba(255, 255, 255, 0.035) 1px,
           transparent 1px
         );
   
       background-size: 46px 46px;
   
       -webkit-mask-image:
         linear-gradient(
           180deg,
           transparent 0%,
           transparent 35%,
           #000 62%,
           #000 100%
         );
   
       mask-image:
         linear-gradient(
           180deg,
           transparent 0%,
           transparent 35%,
           #000 62%,
           #000 100%
         );
   
       pointer-events: none;
     }
   
     .hero__scanbeam,
     .hero__connectors,
     .hotspot,
     .defect-card,
     .report-card,
     .hero__scrollcue,
     .hero__cut {
       display: none !important;
     }
   
     /* ---------------------------------------------------------
        NAVIGATION OVER HERO
        --------------------------------------------------------- */
   
     .nav {
       top: 0;
       padding-top: 0;
     }
   
     .nav__inner {
       width: 100%;
       max-width: none;
   
       min-height: 112px;
       padding: 18px 54px 10px;
   
       background: transparent;
       border: 0;
       border-radius: 0;
       box-shadow: none;
   
       justify-content: space-between;
     }
   
     .nav__panel {
       opacity: 0;
       background: transparent;
       border: 0;
       box-shadow: none;
       backdrop-filter: none;
       -webkit-backdrop-filter: none;
     }
   
     .nav__logo {
       width: 150px;
       max-width: 42vw;
     }
   
     .nav__logo img {
       width: 100%;
       height: auto;
       display: block;
   
       /*
         Use this only when the supplied logo is dark.
         Remove it when using a white logo asset.
       */
       filter: brightness(0) invert(1);
     }
   
     .nav__burger {
       width: 48px;
       height: 48px;
   
       color: #fff;
     }
   
     .nav__burger span,
     .nav__burger span::before,
     .nav__burger span::after {
       background: #fff;
     }
   
     /*
       Apply the floating white pill only after scrolling.
       This covers several common JS class names.
     */
     .nav.is-scrolled .nav__inner,
     .nav.scrolled .nav__inner,
     .nav.nav--scrolled .nav__inner {
       width: calc(100% - 32px);
       min-height: 76px;
   
       margin: 8px auto 0;
       padding: 10px 26px;
   
       background: rgb(255 255 255 / 34%);
       border: 1px solid rgb(255 255 255 / 34%);
       border-radius: 999px;
   
       box-shadow:
         0 12px 32px rgba(5, 20, 38, 0.16);
   
       -webkit-backdrop-filter: blur(18px);
       backdrop-filter: blur(18px);
     }
   
     .nav.is-scrolled .nav__logo,
     .nav.scrolled .nav__logo,
     .nav.nav--scrolled .nav__logo {
       width: 114px;
     }
   
     .nav.is-scrolled .nav__logo img,
     .nav.scrolled .nav__logo img,
     .nav.nav--scrolled .nav__logo img {
       filter: none;
     }
   
     .nav.is-scrolled .nav__burger,
     .nav.scrolled .nav__burger,
     .nav.nav--scrolled .nav__burger {
       color: var(--navy-900);
     }
   
     .nav.is-scrolled .nav__burger span,
     .nav.is-scrolled .nav__burger span::before,
     .nav.is-scrolled .nav__burger span::after,
     .nav.scrolled .nav__burger span,
     .nav.scrolled .nav__burger span::before,
     .nav.scrolled .nav__burger span::after,
     .nav.nav--scrolled .nav__burger span,
     .nav.nav--scrolled .nav__burger span::before,
     .nav.nav--scrolled .nav__burger span::after {
       background: var(--navy-900);
     }
   
     /* ---------------------------------------------------------
        CONTENT POSITIONING
        --------------------------------------------------------- */
   
     .hero__inner {
       position: relative;
       z-index: 3;
   
       display: block;
       width: 100%;
       max-width: none;
   
       margin: 0;
       padding:
         188px
         54px
         26px;
     }
   
     .hero__content {
       width: 100%;
       max-width: none;
     }
   
     /* ---------------------------------------------------------
        EYEBROW
        --------------------------------------------------------- */
   
     .hero__eyebrow {
       display: flex;
       align-items: center;
   
       gap: 16px;
       margin: 0 0 27px;
     }
   
     .hero__eyebrow-line {
       width: 40px;
       height: 3px;
   
       background: var(--orange);
       border-radius: 99px;
     }
   
     .eyebrow--bare {
       font-size: 0.83rem;
       font-weight: 700;
       line-height: 1.3;
   
       color: var(--orange);
   
       letter-spacing: 0.13em;
       text-transform: uppercase;
       white-space: nowrap;
     }
   
     /* ---------------------------------------------------------
        HEADLINE
        --------------------------------------------------------- */
   
     .hero__title {
       max-width: 500px;
   
       margin: 0;
   
       /*
         Smaller than your current 11.5vw value.
         This produces the reference line wrapping.
       */
       font-size: clamp(2.85rem, 10.4vw, 4.15rem);
       font-weight: 800;
       line-height: 1.07;
       letter-spacing: -0.035em;
   
       color: #fff;
     }
   
     .hero__title .line {
       display: block;
       overflow: visible;
     }
   
     .hero__title .line > span {
       display: block;
     }
   
     .hero__title .accent {
       color: var(--orange);
     }
   
     /* ---------------------------------------------------------
        DESCRIPTION
        --------------------------------------------------------- */
   
     .hero__lead {
       max-width: 520px;
   
       margin: 28px 0 0;
   
       font-size: clamp(1.05rem, 4.1vw, 1.25rem);
       line-height: 1.7;
       font-weight: 400;
   
       color: rgba(239, 245, 250, 0.91);
     }
   
     /* ---------------------------------------------------------
        CTA BUTTONS
        --------------------------------------------------------- */
   
     .hero__cta {
       display: flex;
       flex-direction: column;
       align-items: stretch;
   
       gap: 14px;
       margin: 32px 200px 0 0;
     }
   
     .hero__cta .btn {
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.04rem;
       font-weight: 700;
       padding: 0.8rem 1rem;
       border-radius: 999px;
     }
   
     .hero__cta .btn--primary {
       background: var(--orange);
       border-color: var(--orange);
   
       box-shadow:
         0 12px 28px rgba(240, 96, 23, 0.22);
     }
   
     .hero__cta-secondary {
       background: rgba(7, 21, 38, 0.30);
   
       border: 2px solid rgba(255, 255, 255, 0.66);
   
       color: #fff;
   
       -webkit-backdrop-filter: blur(6px);
       backdrop-filter: blur(6px);
     }
   
     .hero__cta-secondary svg {
       width: 20px;
       height: 20px;
     }
   
     /* ---------------------------------------------------------
        TRUST CARD
        --------------------------------------------------------- */
   
     .hero__trust {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
   
       width: 100%;
       margin: 34px 0 0;
       padding: 28px 10px;
   
       background:
         linear-gradient(
           145deg,
           rgba(18, 41, 65, 0.76),
           rgba(5, 23, 42, 0.84)
         );
   
       border: 1px solid rgba(255, 255, 255, 0.10);
       border-radius: 18px;
   
       box-shadow:
         inset 0 1px 0 rgba(255, 255, 255, 0.04);
   
       -webkit-backdrop-filter: blur(10px);
       backdrop-filter: blur(10px);
     }
   
     .hero__trust li {
       position: relative;
   
       min-width: 0;
       margin: 0;
       padding: 0 12px;
   
       display: flex;
       flex-direction: column;
       align-items: center;
   
       gap: 10px;
   
       text-align: center;
       border: 0;
     }
   
     .hero__trust li:not(:last-child)::after {
       content: "";
       position: absolute;
   
       top: 3px;
       right: 0;
       bottom: 3px;
   
       width: 1px;
   
       background: rgba(255, 255, 255, 0.13);
     }
   
     .hero__trust-icon {
       width: 54px;
       height: 54px;
   
       display: grid;
       place-items: center;
   
       border: 0;
       border-radius: 50%;
   
       background: rgba(255, 255, 255, 0.07);
       color: var(--orange);
     }
   
     .hero__trust-icon svg {
       width: 24px;
       height: 24px;
     }
   
     .hero__trust-label {
       display: block;
   
       min-height: 42px;
   
       font-family: var(--font-heading);
       font-size: clamp(0.82rem, 3.15vw, 1rem);
       font-weight: 800;
       line-height: 1.2;
   
       color: #fff;
     }
   
     .hero__trust-sub {
       display: block;
   
       max-width: 125px;
   
       font-size: clamp(0.67rem, 2.7vw, 0.82rem);
       line-height: 1.35;
   
       color: #aebdcc;
     }
   
     /* ---------------------------------------------------------
        WHITE PROOF CARD
        --------------------------------------------------------- */
   
     .hero__proof {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
   
       width: 100%;
       margin: 24px 0 0;
   
       background: rgba(255, 255, 255, 0.04);
       border-radius: 1rem;
       overflow: hidden;
       box-shadow: 0 20px 45px rgba(2, 13, 26, 0.20);
       border: 1px solid rgba(255, 255, 255, 0.09);
       transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
     }
   
     .hero__proof-item {
       position: relative;
   
       min-width: 0;
       min-height: 112px;
   
       display: grid;
       grid-template-columns: 27px minmax(0, 1fr);
       align-content: center;
   
       column-gap: 9px;
   
       padding: 18px 13px;
   
       border: 0;
     }
   
     .hero__proof-item:not(:last-child)::after {
       content: "";
       position: absolute;
   
       top: 15px;
       right: 0;
       bottom: 15px;
   
       width: 1px;
   
       background: #ffffff17;
     }
   
     .hero__proof-icon {
       grid-column: 1;
       grid-row: 1 / span 2;
   
       margin: 1px 0 0;
   
       color: var(--orange) !important;
     }
   
     .hero__proof-icon svg {
       width: 25px;
       height: 25px;
     }
   
     .hero__proof-item > div {
       grid-column: 2;
       min-width: 0;
     }
   
     .hero__proof-item strong {
       display: block;
   
       margin: 0;
   
       font-family: var(--font-heading);
       font-size: clamp(0.69rem, 2.8vw, 0.84rem);
       font-weight: 800;
       line-height: 1.18;
   
       color: #fff;
     }
   
     .hero__proof-item span {
       display: block;
   
       margin-top: 6px;
   
       font-size: clamp(0.6rem, 2.4vw, 0.73rem);
       line-height: 1.28;
       color: rgba(210, 221, 232, 0.7);
   
     }
   
     /* ---------------------------------------------------------
        STRAIGHT DIAGONAL BOTTOM CUT
        --------------------------------------------------------- */
   
     .hero::after {
       content: "";
       position: absolute;
   
       z-index: 5;
       left: 0;
       right: 0;
       bottom: -1px;
   
       width: 100%;
       height: 70px;
   
       background: var(--surface, #fff);
   
       clip-path: polygon(
         0 0,
         100% 100%,
         100% 100%,
         0 100%
       );
   
       pointer-events: none;
     }
   
     /* Keep floating controls above the hero cards */
     .float-wa,
     .float-top {
       z-index: 30;
     }
   
     .float-wa {
       right: 20px;
       bottom: 24px;
     }
   }
   
   /* =========================================================
      SMALL PHONE REFINEMENTS
      ========================================================= */
   
   @media (max-width: 430px) {
     .nav__inner {
       min-height: 98px;
       padding-inline: 34px;
     }
   
     .nav__logo {
       width: 136px;
     }
   
     .hero__inner {
       padding:
         140px
         22px
         22px;
     }
   
     .hero__title {
       font-size: clamp(2.62rem, 12vw, 3.3rem);
       padding-right: 60px;
      }
      .hero__cta {
        margin: 32px 60px 0 0;
      }
     
   
     .hero__lead {
       font-size: 1rem;
       line-height: 1.67;
       padding-right: 60px;
     }
   
     .hero__trust {
       padding-inline: 4px;
     }
   
     .hero__trust li {
       padding-inline: 7px;
     }
   
     .hero__trust-icon {
       width: 48px;
       height: 48px;
     }
   
     .hero__proof-item {
       grid-template-columns: 23px minmax(0, 1fr);
       column-gap: 6px;
       padding-inline: 8px;
     }
   
     .hero__proof-icon svg {
       width: 22px;
       height: 22px;
     }
   }
   
   /* =========================================================
      VERY SMALL PHONE
      ========================================================= */
   
   @media (max-width: 360px) {
     .hero__inner {
       padding-inline: 17px;
     }
   
     .hero__title {
       font-size: 2.48rem;
     }
   
     .eyebrow--bare {
       font-size: 0.7rem;
       letter-spacing: 0.11em;
     }
   
     .hero__eyebrow-line {
       width: 28px;
     }
   
     .hero__trust-label {
       font-size: 0.76rem;
     }
   
     .hero__trust-sub {
       font-size: 0.62rem;
     }
   
     .hero__proof-item {
       padding-inline: 6px;
     }
   
     .hero__proof-item strong {
       font-size: 0.65rem;
     }
   
     .hero__proof-item span {
       font-size: 0.57rem;
     }
   }

   
/* ==========================================================================
   WHY CHOOSE + ABOUT RESPONSIVE
   ========================================================================== */

   @media (max-width: 1080px) {
    .why-choose__grid {
      grid-template-columns:
        repeat(2, minmax(0, 1fr));
    }
  
    .why-card:nth-child(2)::after {
      display: none;
    }
  
    .why-card:nth-child(n + 3) {
      border-top: 1px solid var(--border);
    }
  
    .about__grid {
      grid-template-columns:
        minmax(340px, 0.9fr)
        minmax(0, 1.1fr);
  
      gap: 3rem;
    }
  
    .about__certifications {
      grid-template-columns: 1fr;
    }
  }
  
  
  @media (max-width: 860px) {
    .about__grid {
      grid-template-columns: 1fr;
  
      gap: 3rem;
    }
  
    .about__body {
      width: min(100%, 680px);
  
      margin-inline: auto;
    }
  
    .about__media {
      width: min(100%, 680px);
  
      margin-inline: auto;
    }
  
    .about__photo {
      aspect-ratio: 4 / 3;
    }
  }
  
  
  @media (max-width: 640px) {
    .why-choose {
      padding:
        4.25rem
        0
        4rem;
    }
  
    .why-choose__dots {
      top: 3.5rem;
      right: -3.5rem;
  
      width: 11rem;
      height: 10rem;
  
      opacity: 0.42;
    }
  
    .why-choose__title {
      margin-top: 1.15rem;
  
      font-size:
        clamp(2.35rem, 11vw, 3.25rem);
  
      line-height: 1.02;
    }
  
    .why-choose__intro {
      margin-top: 1.25rem;
  
      font-size: 0.97rem;
      line-height: 1.65;
    }
  
    .why-choose__grid {
      grid-template-columns:
        repeat(2, minmax(0, 1fr));
  
      margin-top: 2.6rem;
    }
  
    .why-card {
      padding:
        1.5rem
        0.7rem;
    }
  
    .why-card:nth-child(2)::after {
      display: none;
    }
  
    .why-card:nth-child(3)::after {
      display: block;
    }
  
    .why-card__icon {
      width: 48px;
      height: 48px;
  
      margin-bottom: 0.9rem;
    }
  
    .why-card__icon svg {
      width: 23px;
      height: 23px;
    }
  
    .why-card h3 {
      font-size: 0.86rem;
    }
  
    .why-card p {
      font-size: 0.72rem;
      line-height: 1.45;
    }
  
  
    /* About */
  
    .about__grid {
      gap: 2.4rem;
    }
  
    .about__body {
      order: 1;
    }
  
    .about__media {
      order: 2;
  
      width: 100%;
    }
  
    .about__heading {
      margin-top: 1rem;
      font-size: var(--fs-h2);
      line-height: 1.07;
    }
  
    .about__text {
      margin-top: 1.15rem;
  
      font-size: 0.97rem;
      line-height: 1.68;
    }
  
    .about-feature {
      grid-template-columns:
        43px minmax(0, 1fr);
  
      gap: 0.85rem;
    }
  
    .about-feature__icon {
      width: 43px;
      height: 43px;
    }
  
    .about-feature h3 {
      font-size: 0.92rem;
    }
  
    .about-feature p {
      font-size: 0.8rem;
    }
  
    .about__actions {
      display: grid;
      grid-template-columns: 1fr;
  
      margin-top: 1.7rem;
    }
  
    .about__actions .btn {
      width: 100%;
      justify-content: center;
    }
  
    .about__photo {
      aspect-ratio: 1.15 / 1;
  
      border-radius: 1.25rem;
    }
  
    .about__seal {
      top: 0.6rem;
      left: 0.75rem;
  
      width:
        clamp(76px, 21vw, 94px);
    }
  
    .about__certifications {
      gap: 1.5rem;
  
      margin-top: 3.5rem;
  
      padding: 1.3rem;
    }
  
    .about__certification-intro {
      grid-template-columns:
        44px minmax(0, 1fr);
  
      gap: 0.8rem;
    }
  
    .about__certification-icon {
      width: 44px;
      height: 44px;
    }
  
    .about__certification-intro strong {
      font-size: 0.9rem;
    }
  
    .about__certification-logos {
      gap: 0.9rem;
    }
  
    .about__certification-logo {
      min-height: 68px;
    }
  
    .about__certification-logo img {
      max-height: 108px;
    }
  
    .about__certification-divider {
      height: 58px;
    }
  }
  
  
  @media (max-width: 380px) {
    .why-card {
      padding-inline: 0.45rem;
    }
  
    .why-card h3 {
      font-size: 0.8rem;
    }
  
    .why-card p {
      font-size: 0.68rem;
    }
  
    .about__heading {
      font-size: 1.95rem;
    }
  }

  /* ==========================================================================
   WHY INSPECTION MATTERS RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .inspection-reason__grid {
    grid-template-columns:
      minmax(0, 0.95fr)
      minmax(380px, 1.05fr);

    gap: 3.5rem;
  }

  .inspection-reason__visual {
    padding-left: 2rem;
  }
}


@media (max-width: 860px) {
  .inspection-reason__grid {
    grid-template-columns: 1fr;

    gap: 4rem;
  }

  .inspection-reason__content {
    width: min(100%, 680px);

    margin-inline: auto;
  }

  .inspection-reason__visual {
    width: min(100%, 680px);

    margin-inline: auto;
  }

  .inspection-reason__figure {
    aspect-ratio: 4 / 3;
  }
}


@media (max-width: 640px) {
  .inspection-reason {
    padding:
      4.5rem
      0
      5rem;
  }

  .inspection-reason__title {
    margin-top: 1.15rem;
    font-size:var(--fs-h2);
    line-height: 1.05;
  }

  .inspection-reason__lead {
    margin-top: 1.2rem;
    font-size: 0.96rem;
    line-height: 1.68;
  }

  .inspection-reason__list {
    margin-top: 1.75rem;
  }

  .inspection-point {
    grid-template-columns:
      44px minmax(0, 1fr);

    gap: 0.8rem;

    padding:
      0.9rem;
  }

  .inspection-point__icon {
    width: 44px;
    height: 44px;
  }

  .inspection-point__icon svg {
    width: 20px;
    height: 20px;
  }

  .inspection-point h3 {
    font-size: 0.9rem;
  }

  .inspection-point p {
    font-size: 0.76rem;
  }

  .inspection-reason__visual {
    padding:
      1.3rem 0 3.5rem;
  }

  .inspection-reason__figure {
    aspect-ratio: 0.92 / 1;

    border-radius: 1.25rem;
  }

  .inspection-reason__figure img {
    object-position: center;
  }

  .inspection-reason__mini-card {
    top: 28px;
    left: 0.5rem;

    min-width: 190px;

    grid-template-columns:
      34px minmax(0, 1fr);

    padding:
      0.7rem 0.8rem;
  }

  .inspection-reason__mini-icon {
    width: 34px;
    height: 34px;
  }

  .inspection-evidence {
    width: calc(100% - 1.5rem);

    grid-template-columns:
      42px minmax(0, 1fr);

    gap: 0.8rem;

    padding:
      1rem;
  }

  .inspection-evidence__icon {
    width: 42px;
    height: 42px;
  }

  .inspection-evidence strong {
    font-size: 0.85rem;
  }

  .inspection-evidence p {
    font-size: 0.72rem;
  }

  .inspection-reason__dots {
    right: -3rem;

    opacity: 0.4;
  }
}


@media (max-width: 380px) {
  .inspection-reason__title {
    font-size: 2rem;
  }

  .inspection-reason__mini-card {
    min-width: 176px;
  }
}

/* ==========================================================================
   SERVICES RESPONSIVE
   ========================================================================== */

   @media (max-width: 1080px) {
    .services-section__heading-grid {
      grid-template-columns:
        minmax(0, 1.15fr)
        minmax(280px, 0.85fr);
  
      gap: 3rem;
    }
  
    .service-item--featured .service-item__media {
      min-height: 420px;
    }
  
    .service-item__media {
      min-height: 230px;
    }
  }
  
  
  @media (max-width: 860px) {
    .services-section__heading-grid {
      grid-template-columns: 1fr;
  
      align-items: start;
  
      gap: 1.4rem;
    }
  
    .services-section__intro {
      max-width: 620px;
  
      margin: 0;
    }
  
    .services-showcase {
      grid-template-columns: 1fr;
    }
  
    .service-item--featured {
      grid-row: auto;
    }
  
    .service-item--featured .service-item__media,
    .service-item__media {
      min-height: 360px;
    }
  
    .service-item--featured .service-item__title {
      font-size:
        clamp(1.4rem, 4vw, 2rem);
    }
  }
  
  
  @media (max-width: 640px) {
    .services-section {
      padding:
        4.5rem
        0
        5rem;
    }
  
    .services-section__header {
      margin-bottom: 2.5rem;
    }
  
    .services-section__title {
      margin-top: 0;
  
      font-size:
        var(--fs-h2);
  
      line-height: 1.04;
    }
  
    .services-section__intro {
      font-size: 0.96rem;
      line-height: 1.65;
    }
  
    .services-showcase {
      gap: 1rem;
    }
  
    .service-item {
      border-radius: 1.2rem;
    }
  
    .service-item__link {
      display: grid;
  
      grid-template-columns:
        42% minmax(0, 1fr);
  
      min-height: 190px;
    }
  
    .service-item__media,
    .service-item--featured .service-item__media {
      min-height: 100%;
    }
  
    .service-item__stage {
      left: 0.75rem;
      right: 0.75rem;
      bottom: 0.75rem;
  
      width: fit-content;
  
      max-width: calc(100% - 1.5rem);
  
      font-size: 0.63rem;
    }
  
    .service-item__number {
      top: 0.75rem;
      left: 0.75rem;
    }
  
    .service-item__body {
      grid-template-columns: 1fr;
  
      align-content: center;
  
      gap: 1rem;
  
      padding: 1.1rem;
    }
  
    .service-item__title,
    .service-item--featured .service-item__title {
      font-size: 1.05rem;
      line-height: 1.2;
    }
  
    .service-item__desc {
      margin-top: 0.45rem;
  
      font-size: 0.74rem;
      line-height: 1.5;
    }
  
    .service-item__arrow {
      width: 40px;
      height: 40px;
    }
  
    .service-item__arrow svg {
      width: 18px;
      height: 18px;
    }
  
    .services-section__footer {
      display: grid;
  
      grid-template-columns: 1fr;
  
      gap: 1.2rem;
  
      margin-top: 2.5rem;
    }
  
    .services-section__footer .btn {
      width: 100%;
  
      justify-content: center;
    }
  }
  
  
  @media (max-width: 420px) {
    .service-item__link {
      grid-template-columns:
        39% minmax(0, 1fr);
    }
  
    .service-item__body {
      padding:
        1rem 0.85rem;
    }
  
    .service-item__title,
    .service-item--featured .service-item__title {
      font-size: 0.95rem;
    }
  
    .service-item__desc {
      font-size: 0.7rem;
    }
  }

  /* ==========================================================================
   FINAL MOBILE SERVICES OVERRIDE
   ========================================================================== */

@media (max-width: 640px) {
  .services-showcase {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Cancel every desktop featured-card behaviour */
  .service-item--featured {
    grid-area: auto;
    grid-row: auto;
  }

  .service-item--featured .service-item__link,
  .service-item__link {
    display: grid;
    grid-template-columns: 39% minmax(0, 1fr);
    grid-template-rows: none;

    width: 100%;
    min-height: 210px;
    height: auto;
  }

  /* Make every image use the same mobile dimensions */
  .service-item--featured .service-item__media,
  .service-item:not(.service-item--featured) .service-item__media,
  .service-item__media {
    width: 100%;
    min-height: 210px;
    height: 100%;
    flex: none;
  }

  .service-item__media img,
  .service-item--featured .service-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Restore content for the first card */
  .service-item--featured .service-item__body,
  .service-item__body {
    display: grid;
    grid-template-columns: 1fr;
    align-content: center;
    gap: 1rem;

    min-width: 0;
    padding: 1.1rem;
  }

  .service-item__title,
  .service-item--featured .service-item__title {
    font-size: 1.04rem;
    line-height: 1.22;
  }

  .service-item__desc,
  .service-item--featured .service-item__desc {
    margin-top: 0.45rem;
    font-size: 0.75rem;
    line-height: 1.55;
  }

  .service-item__arrow {
    width: 42px;
    height: 42px;
  }

  .service-item__number {
    top: 0.8rem;
    left: 0.8rem;
  }

  .service-item__stage {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;

    width: fit-content;
    max-width: calc(100% - 1.5rem);

    padding: 0.42rem 0.7rem;
    font-size: 0.63rem;
    line-height: 1.15;
  }
}


/* ==========================================================================
   MOBILE SERVICE CTA
   ========================================================================== */

   @media (max-width: 640px) {
    /* Hide the circular desktop arrow */
    .service-item__arrow {
      display: none;
    }
  
    /* Show text CTA only on mobile */
    .service-item__mobile-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
  
      width: fit-content;
      margin-top: 0.9rem;
  
      font-family: var(--font-heading);
      font-size: 0.78rem;
      font-weight: 800;
      line-height: 1;
  
      color: var(--orange);
    }
  
    .service-item__mobile-cta svg {
      width: 16px;
      height: 16px;
  
      transition: transform var(--dur) var(--ease-out);
    }
  
    .service-item__link:hover .service-item__mobile-cta svg,
    .service-item__link:focus-visible .service-item__mobile-cta svg {
      transform: translateX(4px);
    }
  
    .service-item__body {
      align-content: center;
    }
  }

  @media (max-width: 860px) {
    .why-choose__heading-grid {
      grid-template-columns: 1fr;
  
      align-items: start;
  
      gap: 1.4rem;
    }
  
    .why-choose__intro {
      max-width: 620px;
      margin: 0;
    }
  }

  @media (max-width: 640px) {
    .why-choose__heading-grid {
      margin-top: 1.15rem;
      gap: 1.2rem;
    }
  
    .why-choose__title {
      font-size: var(--fs-h2);
      line-height: 1.02;
    }
  
    .why-choose__intro {
      font-size: 0.97rem;
      line-height: 1.65;
    }
  }

  /* ==========================================================================
   COMMON DEFECTS RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .defects-section__heading-grid {
    grid-template-columns:
      minmax(0, 1.1fr)
      minmax(280px, 0.9fr);

    gap: 3rem;
  }

  .defects {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .defects__tabs {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .defects__panel {
    position: static;
  }
}


@media (max-width: 860px) {
  .defects-section__heading-grid {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 1.4rem;
  }

  .defects-section__intro {
    max-width: 620px;
    margin: 0;
  }
}


@media (max-width: 640px) {
  .defects-section {
    padding:
      4.5rem
      0
      5rem;
  }

  .defects-section__header {
    margin-bottom: 2.5rem;
  }

  .defects-section__title {
    font-size: var(--fs-h2);

    line-height: 1.04;
  }

  .defects-section__intro {
    font-size: 0.96rem;
    line-height: 1.65;
  }

  .defects {
    gap: 1.5rem;
  }

  /* Horizontal category selector on mobile */
  .defects__tabs {
    display: flex;
    flex-wrap: nowrap;

    gap: 0.65rem;

    overflow-x: auto;
    overscroll-behavior-inline: contain;

    padding-bottom: 0.45rem;

    scroll-snap-type: x proximity;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
  }

  .defects__tabs::-webkit-scrollbar {
    display: none;
  }

  .defect-tab {
    flex:
      0 0
      min(82vw, 310px);

    grid-template-columns:
      28px
      42px
      minmax(0, 1fr);

    min-height: 68px;

    scroll-snap-align: start;
  }

  .defect-tab__arrow {
    display: none;
  }

  .defect-tab__label {
    font-size: 0.86rem;
  }

  .defects__panel {
    border-radius: 1.2rem;
  }

  .defects__media {
    aspect-ratio: 4 / 3;
  }

  .defects__photo-label {
    left: 0.85rem;
    bottom: 0.85rem;
  }

  .defects__media-index {
    top: 0.85rem;
    right: 0.85rem;
  }

  .defects__body {
    padding: 1.2rem;
  }

  .defects__body h3 {
    font-size: 1.45rem;
  }

  .defects__desc {
    font-size: 0.83rem;
  } 

  .defects__why {
    grid-template-columns:
      42px minmax(0, 1fr);

    gap: 0.8rem;

    padding: 0.9rem;
  }

  .defects__why-icon {
    width: 42px;
    height: 42px;
  }
}

/* ==========================================================================
   REPORT PREVIEW RESPONSIVE
   ========================================================================== */

   @media (max-width: 1080px) {
    .report-section__heading-grid {
      grid-template-columns:
        minmax(0, 1.1fr)
        minmax(280px, 0.9fr);
  
      gap: 3rem;
    }
  
    .report-showcase {
      grid-template-columns:
        minmax(340px, 0.9fr)
        minmax(0, 1.1fr);
  
      gap: 3.5rem;
    }
  
    .report__floating-note {
      right: -1rem;
    }
  }
  
  
  @media (max-width: 860px) {
    .report-section__heading-grid {
      grid-template-columns: 1fr;
  
      align-items: start;
  
      gap: 1.4rem;
    }
  
    .report-section__intro {
      max-width: 620px;
      margin: 0;
    }
  
    .report-showcase {
      grid-template-columns: 1fr;
  
      gap: 4rem;
    }
  
    .report__mock {
      width: min(100%, 610px);
  
      margin-inline: auto;
    }
  
    .report__content {
      width: min(100%, 680px);
  
      margin-inline: auto;
    }
  }
  
  
  @media (max-width: 640px) {
    .report-section {
      padding:
        4.5rem
        0
        5rem;
    }
  
    .report-section__header {
      margin-bottom: 3rem;
    }
  
    .report-section__title {
      font-size: var(--fs-h2);
      line-height: 1.04;
    }
  
    .report-section__intro {
      font-size: 0.96rem;
      line-height: 1.65;
    }
  
    .report-showcase {
      gap: 3rem;
    }
  
    .report__mock {
      width: calc(100% - 0.5rem);
    }
  
    /* Keep a subtle paper stack without pushing outside the screen */
    .report-page--back {
      display: block;
  
      transform:
        translate(12px, 12px)
        rotate(1.7deg);
    }
  
    .report-page--mid {
      display: block;
  
      transform:
        translate(6px, 6px)
        rotate(0.8deg);
    }
  
    .report-page--front {
      padding: 1rem;
    }
  
    .report-page__accent {
      right: 1rem;
  
      width: 30px;
      height: 60px;
    }
  
    .report-page__head img {
      width: 78px;
    }
  
    .report-page__meta {
      padding-right: 2.3rem;
  
      font-size: 0.58rem;
    }
  
    .report-page__meta strong {
      font-size: 0.7rem;
    }
  
    .report-page__divider {
      margin-top: 1rem;
    }
  
    .report-row {
      grid-template-columns:
        38px
        minmax(0, 1fr)
        auto;
  
      gap: 0.6rem;
  
      padding: 0.7rem 0;
    }
  
    .report-row__thumb {
      width: 38px;
      height: 38px;
    }
  
    .report-row__thumb svg {
      width: 17px;
      height: 17px;
    }
  
    .report-row__title {
      font-size: 0.69rem;
    }
  
    .report-row__loc {
      font-size: 0.58rem;
    }
  
    .report-row .badge {
      min-width: 0;
  
      padding:
        0.32rem 0.45rem;
  
      font-size: 0.52rem;
    }
  
    .report-page__note {
      margin-top: 0.8rem;
  
      padding: 0.65rem;
  
      font-size: 0.56rem;
    }
  
    .report__floating-note {
      right: -0.25rem;
      bottom: -1.6rem;
  
      min-width: 155px;
  
      grid-template-columns:
        36px minmax(0, 1fr);
  
      padding:
        0.65rem 0.75rem;
    }
  
    .report__floating-icon {
      width: 36px;
      height: 36px;
    }
  
    .report__floating-note strong {
      font-size: 0.67rem;
    }
  
    .report__floating-note span {
      font-size: 0.57rem;
    }
  
    .report__content {
      padding-top: 1rem;
    }
  
    .report-benefit {
      grid-template-columns:
        46px minmax(0, 1fr);
  
      gap: 0.8rem;
  
      padding: 0.9rem;
    }
  
    .report-benefit__icon {
      width: 46px;
      height: 46px;
      display: grid !important; 
    }
  
    .report-benefit strong {
      font-size: 0.9rem;
    }
  
    .report-benefit span {
      font-size: 0.77rem;
    }
  
    .report__assurance {
      grid-template-columns:
        40px minmax(0, 1fr);
  
      padding:
        0.8rem 0.85rem;
    }
  
    .report__assurance-icon {
      width: 40px;
      height: 40px;
    }
  
    .report__cta {
      width: 100%;
  
      justify-content: center;
    }
  }
  
  
  @media (max-width: 380px) {
    .report-page__meta {
      display: none;
    }
  
    .report-row {
      grid-template-columns:
        36px minmax(0, 1fr);
  
      align-items: center;
    }
  
    .report-row .badge {
      grid-column: 2;
  
      width: fit-content;
    }
  
    .report__floating-note {
      display: none;
    }
  }

  /* ==========================================================================
   HOUSES INSPECTED RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .houses__heading-grid {
    grid-template-columns:
      minmax(0, 1.1fr)
      minmax(280px, 0.9fr);

    gap: 3rem;
  }

  .prop-card {
    width: 310px;
  }
}


@media (max-width: 860px) {
  .houses__heading-grid {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 1.4rem;
  }

  .houses__intro-wrap {
    max-width: 620px;
  }

  .prop-marquee {
    -webkit-mask-image:
      linear-gradient(
        90deg,
        transparent,
        #000 2%,
        #000 98%,
        transparent
      );

    mask-image:
      linear-gradient(
        90deg,
        transparent,
        #000 2%,
        #000 98%,
        transparent
      );
  }
}


@media (max-width: 640px) {
  .houses {
    padding:
      4.5rem
      0
      5rem;
  }

  .houses__header {
    margin-bottom: 2.5rem;
  }

  .houses__title {
    font-size: var(--fs-h2);
    line-height: 1.04;
  }

  .houses__intro {
    font-size: 0.96rem;
    line-height: 1.65;
  }

  .houses__marquee-note {
    display: none;
  }

  .prop-marquee {
    padding-bottom: 0.8rem;

    -webkit-mask-image: none;
    mask-image: none;
  }

  .prop-marquee__track {
    animation-duration: 52s;
  }

  .prop-card {
    width: min(82vw, 310px);

    margin-right: 1rem;

    border-radius: 1.2rem;
  }

  .prop-card__body {
    padding: 1.05rem 1rem 1.15rem;
    display: none;
  }

  .prop-card__type {
    font-size: 1rem;
  }

  .prop-card__arrow {
    width: 36px;
    height: 36px;
  }

  .prop-card__meta {
    gap: 0.7rem;
  }

  .prop-card__stat > span {
    font-size: 0.67rem;
  }
}

/* ==========================================================================
   COVERAGE RESPONSIVE
   ========================================================================== */

   @media (max-width: 1080px) {
    .coverage-section__heading-grid {
      grid-template-columns:
        minmax(0, 1.1fr)
        minmax(280px, 0.9fr);
  
      gap: 3rem;
    }
  
    .coverage {
      grid-template-columns:
        minmax(330px, 0.9fr)
        minmax(0, 1.1fr);
  
      gap: 3.5rem;
    }
  
    .coverage__map {
      min-height: 520px;
    }
  
    .coverage__list {
      grid-template-columns: 1fr;
    }
  
    .coverage__list li:first-child {
      grid-column: auto;
    }
  }
  
  
  @media (max-width: 860px) {
    .coverage-section__heading-grid {
      grid-template-columns: 1fr;
  
      align-items: start;
  
      gap: 1.4rem;
    }
  
    .coverage-section__intro {
      max-width: 620px;
      margin: 0;
    }
  
    .coverage {
      grid-template-columns: 1fr;
  
      gap: 4rem;
    }
  
    .coverage__visual {
      width: min(100%, 650px);
  
      margin-inline: auto;
    }
  
    .coverage__content {
      width: min(100%, 680px);
  
      margin-inline: auto;
    }
  
    .coverage__map {
      min-height: 560px;
    }
  }
  
  
  @media (max-width: 640px) {
    .coverage-section {
      padding:
        4.5rem
        0
        5rem;
    }
  
    .coverage-section__header {
      margin-bottom: 3rem;
    }
  
    .coverage-section__title {
      font-size: var(--fs-h2);
      line-height: 1.04;
    }
  
    .coverage-section__intro {
      font-size: 0.96rem;
      line-height: 1.65;
    }
  
    .coverage {
      gap: 3rem;
    }
  
    .coverage__visual {
      padding:
        1rem 0 2.7rem;
    }
  
    .coverage__map {
      min-height: 430px;
  
      border-radius: 1.25rem;
    }
  
    @media (max-width: 640px) {
      .coverage__map {
        min-height: 440px;
      }
    
      .coverage__map > .my-map {
        width: min(100%, 360px);
        max-height: 420px;
      }
    }
  
    .coverage__map-label {
      left: 0.85rem;
      bottom: 0.85rem;
    }
  
    .coverage__map-status {
      top: 0.9rem;
      right: 0.9rem;
    }
  
    .coverage__floating-card {
      right: 0.5rem;
      bottom: 0;
  
      min-width: 185px;
  
      grid-template-columns:
        38px minmax(0, 1fr);
  
      padding:
        0.7rem 0.8rem;
    }
  
    .coverage__floating-icon {
      width: 38px;
      height: 38px;
    }
  
    .coverage__list {
      grid-template-columns: 1fr;
    }
  
    .coverage__list li {
      grid-template-columns:
        26px
        44px
        minmax(0, 1fr);
  
      min-height: 84px;
  
      padding: 0.9rem;
    }
  
    .coverage__location-icon {
      width: 44px;
      height: 44px;
    }
  
    .coverage__notice {
      grid-template-columns:
        42px minmax(0, 1fr);
  
      padding: 0.9rem;
    }
  
    .coverage__notice-icon {
      width: 42px;
      height: 42px;
    }
  
    .coverage__cta {
      width: 100%;
  
      justify-content: center;
    }
  }

  /* ==========================================================================
   TESTIMONIALS RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .testimonials-section__heading-grid {
    grid-template-columns:
      minmax(0, 1.1fr)
      minmax(280px, 0.9fr);

    gap: 3rem;
  }
}


@media (max-width: 860px) {
  .testimonials-section__heading-grid {
    grid-template-columns: 1fr;

    align-items: start;

    gap: 1.4rem;
  }

  .testimonials-section__intro {
    max-width: 620px;
    margin: 0;
  }

  .testi__grid {
    grid-template-columns: 1fr;
  }

  .testi-card--featured {
    grid-row: auto;
  }
}


@media (max-width: 640px) {
  .testimonials-section {
    padding:
      4.5rem
      0
      5rem;
  }

  .testimonials-section__header {
    margin-bottom: 2.5rem;
  }

  .testimonials-section__title {
    font-size: var(--fs-h2);
    line-height: 1.04;
  }

  .testimonials-section__intro {
    font-size: 0.96rem;
    line-height: 1.65;
  }

  .testi__grid {
    gap: 1rem;
  }

  .testi-card,
  .testi-card--featured {
    min-height: 0;

    padding: 1.25rem;

    border-radius: 1.2rem;
  }

  .testi-card__quote-mark {
    font-size: 3.5rem;
  }

  .testi-card__quote,
  .testi-card:not(.testi-card--featured) .testi-card__quote {
    margin-top: 1.5rem;

    font-size: 1rem;
    line-height: 1.6;
  }

  .testi-card__bottom {
    align-items: flex-end;

    margin-top: 1.6rem;
  }

  .testi-card__avatar {
    width: 44px;
    height: 44px;
  }

  .testi-card__verified {
    padding: 0.38rem 0.55rem;

    font-size: 0.58rem;
  }
}


@media (max-width: 390px) {
  .testi-card__bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ==========================================================================
   FAQ RESPONSIVE
   ========================================================================== */

   @media (max-width: 1080px) {
    .faq-section__heading-grid {
      grid-template-columns:
        minmax(0, 1.1fr)
        minmax(280px, 0.9fr);
  
      gap: 3rem;
    }
  
    .faq-layout {
      grid-template-columns:
        minmax(230px, 0.3fr)
        minmax(0, 1fr);
  
      gap: 2.5rem;
    }
  }
  
  
  @media (max-width: 860px) {
    .faq-section__heading-grid {
      grid-template-columns: 1fr;
  
      align-items: start;
  
      gap: 1.4rem;
    }
  
    .faq-section__intro-wrap {
      max-width: 620px;
    }
  
    .faq-layout {
      grid-template-columns: 1fr;
  
      gap: 1.5rem;
    }
  
    
  }
  
  
  @media (max-width: 640px) {
    .faq-section {
      padding:
        4.5rem
        0
        5rem;
    }
  
    .faq-section__header {
      margin-bottom: 2.5rem;
    }
  
    .faq-section__title {
      font-size: var(--fs-h2);
      line-height: 1.04;
    }
  
    .faq-section__intro {
      font-size: 0.96rem;
      line-height: 1.65;
    }
  
  
  

  
    .faq-item__question {
      grid-template-columns:
        28px
        minmax(0, 1fr)
        40px;
  
      gap: 0.7rem;
  
      min-height: 76px;
  
      padding:
        0.9rem;
    }
  
    .faq-item__question > span:nth-child(2) {
      font-size: 0.9rem;
    }
  
    .faq-item__toggle {
      width: 40px;
      height: 40px;
    }
  
    .faq-item__answer-inner {
      grid-template-columns:
        38px minmax(0, 1fr);
  
      gap: 0.7rem;
  
      margin:
        0 0.9rem 0.9rem;
  
      padding: 0.85rem;
    }
  
    .faq-item__answer-icon {
      width: 38px;
      height: 38px;
    }
  
    .faq-item__answer p {
      font-size: 0.78rem;
    }
  }

  /* ==========================================================================
   FAQ HELP CARD RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .faq-layout {
    grid-template-columns:
      minmax(300px, 0.4fr)
      minmax(0, 1fr);

    gap: 2.5rem;
  }

  .faq-help__options {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 860px) {
  .faq-layout {
    grid-template-columns: 1fr;

    gap: 1.5rem;
  }

  .faq-help {
    position: static;

    width: min(100%, 680px);
  }

  .faq-help__options {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}


@media (max-width: 640px) {
  .faq-help {
    padding: 1.25rem;

    border-radius: 1.25rem;
  }

  .faq-help__reply {
    font-size: 0.59rem;
  }

  .faq-help__icon {
    width: 52px;
    height: 52px;

    margin-top: 1.5rem;
  }

  .faq-help__title {
    margin-top: 1.25rem;
    font-size: var(--fs-h2);
  }

  .faq-help__text {
    font-size: 0.8rem;
    line-height: 1.65;
  }

  .faq-help__options {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 0.55rem;
  }

  .faq-help__options > span {
    min-height: 38px;

    padding:
      0.5rem 0.55rem;

    font-size: 0.63rem;
  }

  .faq-help__button {
    min-height: 52px;

    font-size: 0.76rem;
  }
}


@media (max-width: 380px) {
  .faq-help__options {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   BOOKING RESPONSIVE
   ========================================================================== */

   @media (max-width: 1080px) {
    .booking-section__container {
      grid-template-columns:
        minmax(0, 0.8fr)
        minmax(480px, 1.2fr);
  
      gap: 3.5rem;
    }
  
    .booking-trust {
      grid-template-columns: 1fr;
    }
  
    .booking-trust article {
      display: grid;
  
      grid-template-columns:
        38px minmax(0, 1fr);
  
      align-items: center;
  
      gap: 0.7rem;
    }
  
    .booking-trust strong {
      margin-top: 0;
    }
  }
  
  
  @media (max-width: 860px) {
    .booking-section__container {
      grid-template-columns: 1fr;
  
      gap: 4rem;
    }
  
    .booking-section__content {
      width: min(100%, 680px);
    }
  
    .booking-form-card {
      width: min(100%, 760px);
    }
  
    .booking-trust {
      grid-template-columns:
        repeat(3, minmax(0, 1fr));
    }
  
    .booking-trust article {
      display: block;
    }
  
    .booking-trust strong {
      margin-top: 0.7rem;
    }
  }
  
  
  @media (max-width: 640px) {
    .booking-section {
      padding:
        4.5rem
        0
        5rem;
    }
  
    .booking-section__container {
      gap: 3rem;
    }
  
    .booking-section__title {
      font-size: var(--fs-h2);
  
      line-height: 1.04;
    }
  
    .booking-section__intro {
      font-size: 0.96rem;
      line-height: 1.65;
    }
  
    .booking-benefit {
      grid-template-columns:
        42px minmax(0, 1fr);
    }
  
    .booking-benefit__icon {
      width: 42px;
      height: 42px;
    }
  
    .booking-whatsapp {
      padding: 1.15rem;
    }
  
    .booking-whatsapp__top {
      grid-template-columns:
        46px minmax(0, 1fr);
    }
  
    .booking-whatsapp__icon {
      width: 46px;
      height: 46px;
    }
  
    .booking-whatsapp__button {
      width: 100%;
      min-width: 0;
    }
  
    .booking-trust {
      grid-template-columns: 1fr;
    }
  
    .booking-trust article {
      display: grid;
  
      grid-template-columns:
        38px minmax(0, 1fr);
  
      align-items: center;
  
      gap: 0.7rem;
    }
  
    .booking-trust strong {
      margin-top: 0;
    }
  
    .booking-form-card {
      padding: 1.2rem;
  
      border-radius: 1.3rem;
    }
  
    .booking-form-card__header {
      padding-bottom: 1.4rem;
    }
  
    .booking-form__grid {
      grid-template-columns: 1fr;
  
      gap: 0.9rem;
    }
  
    .booking-form__full {
      grid-column: auto;
    }
  
    .form-field input,
    .form-field select {
      min-height: 54px;
    }
  
    .form-field textarea {
      min-height: 130px;
    }
  }

  /* ==========================================================================
   FOOTER RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .site-footer__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap:
      3.5rem 4rem;
  }
}


@media (max-width: 760px) {
  .footer-cta {
    grid-template-columns: 1fr;

    align-items: start;
  }

  .footer-cta__actions {
    width: 100%;
    min-width: 0;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;

    gap: 3rem;
  }

  .footer-brand > p {
    max-width: 520px;
  }

  .footer-column--services {
    max-width: 580px;
  }
}


@media (max-width: 640px) {
  .site-footer {
    padding:
      4rem
      0
      1.25rem;
  }

  .footer-cta {
    padding: 1.3rem;

    margin-bottom: 4rem;

    border-radius: 1.25rem;
  }

  .footer-cta h2 {
    font-size:  var(--fs-h2);
  }

  .footer-cta__button,
  .footer-cta__whatsapp {
    width: 100%;
  }

  .footer-brand__logo img {
    width: 150px;
  }

  .footer-services a {
    padding:
      0.75rem;
  }

  .site-footer__bottom {
    flex-direction: column;

    align-items: flex-start;
  }

  .site-footer__bottom-links {
    gap:
      0.8rem 1rem;
  }
}


@media (max-width: 390px) {
  .site-footer__bottom-links {
    flex-direction: column;
    align-items: flex-start;
  }
}