/* ==========================================================================
   Castle Design — breakpoint overrides. Loaded after style.css.

   Column COUNTS are not set here any more — they are Bootstrap .col-* classes
   in the markup (col-md-6, col-lg-3, …). What is left here is everything
   Bootstrap does not own: gutters, spacing, type scale, and the nav/header
   behaviour, which still switches at 1024 rather than Bootstrap's 992.
   ========================================================================== */

@media (max-width: 1300px) {

   /* The inset image deliberately overhangs its figure by 40px. Once the page
       gutter is narrower than that, the overhang pushes past the viewport and
       creates a horizontal scrollbar — so pull it back in. */
   .figure__b {
      right: -16px;
      bottom: -32px;
   }
}

@media (max-width: 1200px) {
   .split {
      --bs-gutter-x: 56px;
   }

   .srow {
      --bs-gutter-x: 52px;
      padding: 84px 0;
   }

   .footer__grid {
      --bs-gutter-x: 44px;
      --bs-gutter-y: 44px;
   }

   .hero__stats {
      gap: 40px;
   }
}

@media (max-width: 1024px) {
   :root {
      --hdr: 76px;
   }

   .nav {
      display: none;
   }

   .nav-toggle {
      display: flex;
   }

   /* The mega panel is desktop-only. Its fixed 300px columns would otherwise
       force the fixed header wider than the viewport. Mobile uses the drawer. */
   .mega {
      display: none;
   }

   /* Mobile header carries the logo and the menu button only — the phone icon
       and the CTA both live inside the drawer, so they'd only crowd the bar. */
   .header__tel {
      display: none;
   }

   .header__actions .btn {
      display: none;
   }

   .header__actions {
      gap: 0;
   }

   .brand__logo {
      height: 46px;
   }

   .header.is-stuck .brand__logo,
   .is-inner .brand__logo {
      height: 42px;
   }

   .sec {
      padding: 88px 0;
   }

   .sec--tight {
      padding: 68px 0;
   }

   .sec-head {
      margin-bottom: 48px;
   }

   .sec-head--split {
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
   }

   .split {
      --bs-gutter-x: 56px;
      --bs-gutter-y: 56px;
   }

   .figure__b {
      right: -16px;
      bottom: -24px;
      width: 46%;
   }

   .figure__badge {
      left: 0;
   }

   /* .svc-grid stays two-up here (col-md-6). Full-width cards read as empty
       banners, and a 10-child category page becomes an endless strip. */
   .svc {
      padding: 44px 32px;
   }

   .srow {
      --bs-gutter-x: 40px;
      --bs-gutter-y: 40px;
      padding: 68px 0;
   }

   .srow__media img {
      aspect-ratio: 16/11;
   }

   .stats__item {
      padding: 40px 20px;
      border-bottom: 1px solid var(--line-lt);
   }

   .stats__item:nth-child(2n) {
      border-right: 0;
   }

   .stats__item:nth-last-child(-n+2) {
      border-bottom: 0;
   }

   .gal {
      --bs-gutter-x: 14px;
      --bs-gutter-y: 14px;
   }

   /* Header no longer shrinks to 74px below lg — sit the tab bar on --hdr. */
   .gtabs-bar {
      top: var(--hdr);
   }

   .gtab {
      padding: 16px 3px 14px;
      margin-right: 20px;
      font-size: .96rem;
   }

   .hero__scroll {
      display: none;
   }
}

/* .split and .srow stack below Bootstrap's `lg`. A horizontal gutter is pointless
   once the columns sit one above the other, and it only feeds the row overhang
   described on .sec — so drop it and keep the vertical gutter. Must come after
   the 1024 block, which sets a gutter on both. */
@media (max-width: 991.98px) {
   .split {
      --bs-gutter-x: 0;
   }

   .srow {
      --bs-gutter-x: 0;
   }
}

@media (max-width: 768px) {
   body {
      font-size: 16px;
   }

   /* Long words ("Innovative Spaces.") overflow the phone viewport at the
       desktop clamp floor — scale the display sizes down here. */
   h1 {
      font-size: clamp(2rem, 9vw, 2.9rem);
   }

   h2 {
      font-size: clamp(1.75rem, 7.5vw, 2.4rem);
   }

   h3 {
      font-size: clamp(1.25rem, 5vw, 1.5rem);
   }

   .eyebrow {
      font-size: .62rem;
      letter-spacing: .18em;
   }

   .eyebrow::before {
      width: 22px;
   }

   .hero__lead,
   .lead {
      font-size: 1rem;
   }

   .sig {
      font-size: 1.2rem;
   }

   .btn {
      font-size: .68rem;
      letter-spacing: .14em;
   }

   .sec {
      padding: 72px 0;
   }

   .cta {
      padding: 80px 0;
   }

   .hero__inner {
      padding-top: calc(var(--hdr) + 56px);
   }

   .hero__lead {
      margin-bottom: 32px;
   }

   .hero__actions .btn {
      flex: 1 1 auto;
   }

   .hero__meta {
      margin-top: 48px;
      flex-direction: column;
      align-items: flex-start;
      gap: 24px;
   }

   .hero__stats {
      gap: 32px;
      flex-wrap: wrap;
   }

   .hero__stat b {
      font-size: 1.6rem;
   }

   .phero {
      padding: calc(var(--hdr) + 64px) 0 64px;
   }

   .reasons {
      --bs-gutter-x: 0;
   }

   .srow__list {
      --bs-gutter-x: 0;
   }

   .faq__q {
      font-size: 1.15rem;
      padding: 24px 40px 24px 0;
   }

   .faq__a p {
      padding-right: 30px;
   }

   .pcard__body {
      padding: 24px;
   }

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

   /* Tighter marquee, and a shorter cycle so a phone still sees movement. */
   .brands__viewport {
      margin-top: 34px;
   }

   .brands__track {
      animation-duration: 34s;
   }

   .brands__item {
      min-width: 104px;
      height: 62px;
   }

   .brands__item img {
      max-height: 40px;
   }

   .brands__word {
      font-size: 1.3rem;
   }

   .footer {
      padding-top: 68px;
   }

   .footer__grid {
      --bs-gutter-x: 40px;
      --bs-gutter-y: 40px;
   }

   .footer__bar {
      flex-direction: column;
      gap: 8px;
   }

   .lb {
      padding: 20px;
   }

   .lb__nav {
      width: 44px;
      height: 44px;
   }

   .lb__nav--prev {
      left: 10px;
   }

   .lb__nav--next {
      right: 10px;
   }

   .to-top {
      display: none;
   }
}

@media (max-width: 560px) {
   :root {
      --gut: 18px;
   }

   .stats__item {
      border-right: 0;
   }

   .svc {
      padding: 38px 24px;
   }

   .figure__b {
      display: none;
   }

   .btn {
      padding: 15px 26px;
   }
}

/* Status pages (404, thank-you). The 88svh floor is for large screens — on a
   phone the content is taller than that anyway, and a forced minimum only adds
   empty navy above the fold. */
@media (max-width: 768px) {
   .status {
      min-height: 0;
   }

   .status__inner {
      padding: calc(var(--hdr) + 56px) var(--gut) 64px;
   }

   .status__actions .btn {
      flex: 1 1 auto;
   }

   .status__meta {
      margin-top: 44px;
      gap: 10px 22px;
   }

   .status__seal {
      width: 70px;
      height: 70px;
      margin-bottom: 28px;
   }

   .steps {
      --bs-gutter-y: 28px;
   }
}