/* ==========================================================================
   Ordnungskommando — Responsive Stylesheet
   --------------------------------------------------------------------------
   Every @media query for the globally-loaded styles lives here. Loaded
   immediately AFTER style.css so these rules win on source order.

   Breakpoints
     <= 1430px  laptop + tablet : 48px section spacing + tablet type scale
     1200–1430  custom laptop band (explicit per spec)
     <= 1199px  header spacing tighten
     <= 991px   tablet : split/grid stacking, header + hero adjustments
     <= 767px   mobile : 32px spacing + mobile type, header logo-only, hero stack
     reduced-motion

   (Page-specific single-service.css keeps its own media queries.)
   ========================================================================== */

/* ==========================================================================
   Global — Laptop + Tablet : <= 1430px
   ========================================================================== */
@media only screen and (max-width: 1430px) {
  :root {
    --ord-section-y: 48px;

    /* tablet typography scaling */
    --ord-fs-h1: 40px;
    --ord-fs-h2: 32px;
    --ord-fs-h3: 25px;
    --ord-fs-h4: 20px;
    --ord-fs-body: 16px;
    --ord-fs-lead: 17px;
    --ord-fs-small: 14px;
    --ord-fs-btn: 15px;
  }

  .ord-section-head {
    margin-bottom: 40px;
  }

  .ord-split {
    gap: 44px;
  }
}

/* Custom laptop band : 1200–1430px (same tablet scaling + 48px spacing) */
@media only screen and (max-width: 1430px) and (min-width: 1200px) {
  :root {
    --ord-section-y: 48px;
  }
}

/* ==========================================================================
   Header — Laptop + tablet : tighten spacing so items fit on one row
   ========================================================================== */
@media (max-width: 1199px) {
  .ord-header__inner {
    gap: 18px;
  }
  .ord-header__menu {
    gap: 22px;
  }
  .ord-header__menu a {
    font-size: 15px;
  }

  /* Why You Choose — stack to one column */
  .home-s6__grid {
    grid-template-columns: 1fr;
    gap: 44px;
    align-items: start;
  }
}

/* ==========================================================================
   Tablet : <= 991px
   ========================================================================== */
@media only screen and (max-width: 991px) {
  /* Global */
  .ord-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ord-split--reverse .ord-split__media {
    order: 0;
  }
  .ord-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ord-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Header */
  .ord-header__menu {
    gap: 16px;
  }
  .ord-header__cta {
    padding: 11px 20px;
  }

  /* Home hero — stack to one column */
  .home-hero {
    min-height: 0;
  }
  .home-hero__inner {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 112px;
    padding-bottom: 56px;
  }
  .home-hero__title {
    max-width: 22ch;
    margin-bottom: 26px;
  }

  /* About — stack to one column; soften watermark behind text */
  .home-s2__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .home-s2__watermark {
    height: 90%;
    opacity: 0.5;
  }

  /* Services — stack header (intro above, arrows below-left) */
  .home-s4__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  /* Process — 2-up grid on tablet */
  .home-s5__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Service Areas — stack image above content; soften watermark */
  .home-s13__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .home-s13__watermark {
    height: auto;
    width: 70%;
    opacity: 0.3;
  }

  /* Trusted — stack copy above the image collage */
  .home-s7__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .home-s7__title {
    max-width: none;
  }

  /* Service detail — image back on top when the split stacks */
  .home-s11__row--rev .ord-split__media {
    order: 0;
  }
  .home-s11__row + .home-s11__row {
    margin-top: 44px;
  }

  /* Footer — two columns */
  .ord-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
  }
  .ord-footer__trust-item--end {
    margin-left: 0;
  }

  /* Estimation form — fields to a single column */
  .home-s8__row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Mobile : <= 767px
   ========================================================================== */
@media only screen and (max-width: 767px) {
  /* Global */
  :root {
    --ord-section-y: 32px;
    --ord-gutter: 18px;

    /* mobile typography scaling */
    --ord-fs-h1: 32px;
    --ord-fs-h2: 26px;
    --ord-fs-h3: 22px;
    --ord-fs-h4: 19px;
    --ord-fs-lead: 16px;
  }

  .ord-section-head {
    margin-bottom: 32px;
  }

  .ord-grid--2,
  .ord-grid--3,
  .ord-grid--4 {
    grid-template-columns: 1fr;
  }

  .ord-checklist--2col {
    grid-template-columns: 1fr;
  }

  .ord-btn {
    padding: 14px 24px;
  }

  /* Header — logo only, centered */
  .ord-header__inner {
    justify-content: center;
    min-height: 68px;
  }
  .ord-header__nav,
  .ord-header__cta {
    display: none;
  }
  .ord-header__brand img,
  .ord-header__logo,
  .ord-header__brand .custom-logo {
            height: 50px;
  }

  /* Home hero — tighter, full-width actions */
  .home-hero__inner {
    padding-top: 92px;
    padding-bottom: 44px;
    gap: 28px;
  }
  .home-hero__badges {
    gap: 12px;
  }
  .home-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .home-hero__actions .ord-btn {
    width: 100%;
  }

  /* About — keep watermark subtle on phones so text stays readable */
  .home-s2__watermark {
    height: auto;
    width: 70%;
    top: auto;
    bottom: 0;
    transform: none;
    opacity: 0.25;
  }

  /* Metrics — keep a 2×2 grid on phones instead of a single column */
  .home-s3__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .home-metric {
    padding: 20px;
  }

  /* Services — one full-width card per view on phones */
  .home-s4__card {
    width: calc(100vw - (var(--ord-gutter) * 2));
    max-width: none;
  }

  /* Process — single column on phones */
  .home-s5__grid {
    grid-template-columns: 1fr;
  }

  /* Why You Choose — single-column features; let proof pill wrap */
  .home-s6__cards {
    grid-template-columns: 1fr;
  }
  .home-proof {
    flex-wrap: wrap;
  }

  /* Trusted — flatten collage to a single column of images */
  .home-s7__media {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 0;
  }
  .home-s7__img {
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .home-s7__img--top,
  .home-s7__img--bottom,
  .home-s7__img--tall {
    grid-column: 1;
    grid-row: auto;
  }

  /* Estimation form — tighter padding; stack checks; full-width button */
  .home-s8__card {
    padding: 26px 20px;
  }
  .home-s8__checks {
    flex-direction: column;
    gap: 14px;
  }
  .home-s8__submit {
    width: 100%;
  }

  /* Transformations — taller aspect so detail stays visible on phones */
  .home-compare {
    aspect-ratio: 4 / 3;
  }

  /* Service Areas — districts to two columns */
  .home-s13__areas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* FAQ — tighter question padding on phones */
  .ss-faq__q {
    font-size: 15px;
    padding: 18px 20px;
  }
  .ss-faq__a > p {
    padding-inline: 20px;
  }

  /* Footer — single column; soften watermark */
  .ord-footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .ord-footer__main {
    padding-top: 48px;
  }
  .ord-footer__watermark {
    opacity: 0.25;
  }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}