/* ==========================================================================
   KK IT Solutions — Responsive Layer
   --------------------------------------------------------------------------
   style.css defines the component system; this file holds every breakpoint
   adaptation in one place so layout behaviour is easy to audit.

   Breakpoints
     ≤ 360px   very small phones
     ≤ 575px   phones
     ≤ 767px   large phones
     ≤ 991px   tablets  (mobile navigation + mobile hero treatment end here)
     ≥ 576px   small tablets and up
     ≥ 768px   tablets and up
     ≥ 992px   small laptops and up
     ≥ 1100px  desktop navigation
     ≥ 1200px  desktops
     ≥ 1400px  large desktops
   ========================================================================== */

/* ==========================================================================
   A. SMALL-SCREEN BASE CORRECTIONS
   ========================================================================== */
@media (max-width: 1199.98px) {
  :root { --section-y: 46px; --container: 1100px; }
}

@media (max-width: 991.98px) {
  :root {
    --section-y: 44px;
    --gutter: 22px;
    --header-h: 74px;
    --header-h-sm: 64px;
  }

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

  /* leave room for the sticky mobile action bar */
  body { padding-bottom: 58px; }

  .section-head { margin-bottom: 24px; }
  .section-head--split { align-items: center; flex-direction: column; gap: 20px; }

  /* --- Hero: tablets still receive the wide desktop banner file, which
         carries its own headline and call to action as part of the artwork,
         so it is shown whole — no crop, no scrim, no copy layered over it.
         Phones get the text-free portrait crop instead and have the copy
         restored over it in the <= 575.98px block below. --- */
  .hero__slide .hero__media {
    aspect-ratio: 2560 / 799;
    height: auto;
    max-height: none;
  }
  .hero__overlay { opacity: 0; }
  .hero__content { display: none; }
  .hero__nav { display: none; }
  .hero__dots { bottom: 16px; }

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

  /* --- Split layouts stack --- */
  .split, .security__grid, .enquiry__grid { grid-template-columns: 1fr !important; gap: 30px; }
  .split--reverse .split__media { order: 0; }
  .figure-inset { width: 40%; right: -14px; bottom: -14px; }
  .float-card { left: 12px; bottom: 18px; max-width: 280px; }
  .float-card--top-left { right: 12px; top: 18px; left: auto; bottom: auto; }

  .post-featured { grid-template-columns: 1fr !important; }
  .post-featured__body { padding: 24px 22px; }

  .form-card { padding: 26px 22px; }
  .footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
}

@media (max-width: 767.98px) {
  .page-hero { min-height: 200px; }

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

  .brand-chip { width: 158px; height: 76px; padding: 3px 0; }
  .brand-chip img { height: 70px; }
  .marquee--brands .marquee__group { gap: 12px; }

  :root { --section-y: 34px; --gutter: 20px; }

  /* Horizontal reveals are swapped for a vertical one on phones: a sideways
     offset is a large share of a narrow viewport and reads as a wobble. */
  [data-anim="slide-left"],
  [data-anim="slide-right"] { transform: translateY(26px); }

  .grid { gap: 20px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .checklist--2 { grid-template-columns: 1fr; }

  .section-head { margin-bottom: 20px; }

  /* Hero */
  .hero__dots { bottom: 14px; }

  .hero-trust__list { grid-template-columns: 1fr; }
  .hero-trust__item { padding: 16px 20px; }

  /* The banner is short at phone widths — tuck the indicators into the
     corner so they never sit on top of the artwork's own headline. */
  .hero__dots {
    left: auto;
    right: 12px;
    bottom: 10px;
    transform: none;
    gap: 7px;
    padding: 7px 11px;
  }
  .hero__dot { width: 20px; }
  .hero__dot.is-active { width: 34px; }

  /* Cards */
  .service-card__body { padding: 22px 20px 18px; }
  .usp-card { padding: 20px 20px 18px 24px; }
  .usp-card--cat { padding: 20px 20px 18px; }
  .tcard { padding: 26px 22px 22px; }
  .form-card { padding: 22px 18px; }
  .modal { padding: 16px; align-items: flex-end; }
  .modal__dialog { border-radius: var(--r-md); }
  .modal__head { padding: 24px 24px 20px; }
  .modal__body { padding: 24px 24px 28px; }
  .modal__close { top: 14px; right: 14px; width: 34px; height: 34px; }

  .stats { grid-template-columns: 1fr; }
  .stat { padding: 22px 20px; }
  .mini-stats { grid-template-columns: 1fr; }

  .accordion__trigger { padding: 17px 0; font-size: .97rem; gap: 16px; }
  .accordion__panel-inner { padding-right: 0; padding-bottom: 18px; }

  .filter-bar { gap: 8px; margin-bottom: 32px; }
  .filter-btn { padding: 9px 16px; font-size: .82rem; }

  .footer__main { grid-template-columns: 1fr; gap: 26px; padding-block: 40px 30px; }
  .footer__bottom { gap: 4px 18px; line-height: 1.7; }
  .footer__brand p { max-width: none; }

  .article-hero { aspect-ratio: 4 / 3; margin-bottom: 24px; }
  .prose { font-size: .98rem; }
  .prose blockquote { padding: 20px 22px; font-size: 1rem; }

  .carousel-controls { gap: 16px; margin-top: 24px; }
  .pagination { margin-top: 30px; }
  .page-link { min-width: 42px; height: 42px; }

  .btn { padding: 14px 24px; }
  .btn--lg { padding: 16px 28px; font-size: .95rem; }
  .btn-group .btn { flex: 1 1 auto; }
}

@media (max-width: 575.98px) {
  /* Phones receive the same wide banner artwork as desktop and it is shown
     COMPLETE — full width, uncropped, letterbox-free — so the headline and
     call to action baked into the file are never cut off. Nothing to override
     here: the <= 991.98px block above already pins it to 2560 / 799. */

  .topbar { display: none; }
  .info-card { padding: 20px 18px; gap: 14px; }
  .security__feature { padding: 15px 16px; gap: 12px; }
  .security__feature:hover { padding-left: 16px; }
  .contact-tile { padding: 16px; gap: 13px; }
  .contact-tile:hover { transform: none; }
  .float-card { position: static; margin-top: 16px; max-width: none; box-shadow: var(--sh-md); }
  .figure-inset { display: none; }
  .figure-frame::before, .figure-frame::after { display: none; }
  .share a, .share button { width: 38px; height: 38px; }
  .process::before { left: 22px; }
  .process__marker { width: 46px; height: 46px; font-size: .86rem; }
  .process__step { gap: 16px; }
  .brand-chip { width: 142px; height: 68px; padding: 3px 0; border-radius: var(--r-sm); }
  .brand-chip img { height: 62px; }
  .marquee--brands .marquee__group { gap: 10px; }
  .marquee--brands + .marquee--brands { margin-top: 10px; }
}

@media (max-width: 360px) {
  :root { --gutter: 16px; }
  .btn { padding: 13px 18px; font-size: .87rem; }
  .mobile-bar__btn { font-size: .86rem; gap: 8px; }
  .drawer { width: 92vw; }
}

/* ==========================================================================
   B. PROGRESSIVE ENHANCEMENT (min-width)
   ========================================================================== */
@media (min-width: 576px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usp-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcarousel__slide { flex-basis: 50%; padding-inline: 14px; }
  .tcarousel__track { margin-inline: -14px; }
  .post-featured { grid-template-columns: 1.05fr 1fr; }
  .post-featured__media { aspect-ratio: auto; height: 100%; min-height: 280px; }
  .article-head h1 { max-width: 20ch; }
}

@media (min-width: 992px) {
  :root { --section-y: 48px; }

  .split { grid-template-columns: 1fr 1fr; gap: 40px; }
  /* The media fills its column here, so it no longer needs the height cap
     that was leaving a gap between the picture and the copy. */
  .split--wide-media { grid-template-columns: .94fr 1.06fr; }
  .split--wide-copy { grid-template-columns: 1fr 1.12fr; }
  /* The picture is taken out of flow and stretched to the copy beside it, so
     the band is never taller than its text and no gap opens up between them. */
  .split--wide-media { align-items: stretch; }
  .split--wide-media .split__media { position: relative; min-height: 380px; }
  .split--wide-media .figure-frame { position: absolute; inset: 0; }
  .split--wide-media .figure--cap {
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
  }
  .split--reverse .split__media { order: 1; }
  .split--reverse .split__copy { order: 0; }

  .security__grid { grid-template-columns: .95fr 1.05fr; gap: 40px; align-items: stretch; }
  /* Two feature columns instead of five stacked rows keeps the band short */
  /* Testimonial arrows move out beside the cards on desktop */
  .testimonials .carousel-controls { margin-top: 0; }
  .testimonials .carousel-controls__dots { display: none; }
  .testimonials [data-carousel-prev],
  .testimonials [data-carousel-next] {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
  }
  /* the carousel is inset so the arrows sit clear of the cards, never
     spilling outside the container */
  .testimonials .tcarousel { padding-inline: 58px; }
  .testimonials [data-carousel-prev] { left: 0; }
  .testimonials [data-carousel-next] { right: 0; }

  .security__features { grid-template-columns: 1fr 1fr; }
  .security__feature:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* The picture is taken out of flow so the feature list sets the band height */
  .security__grid .split__media { position: relative; min-height: 340px; }
  .security__grid .figure--tall {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
  .enquiry__grid { grid-template-columns: 1fr 1.05fr; gap: 36px; }

  .hero-trust__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-trust__item { border-bottom: 0; }
  .usp-strip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .usp-point { border-bottom: 0; }
  .hero-trust__item:last-child { border-right: 0; }

  .hero__nav { display: inline-flex; }
  .hero__dots { bottom: 26px; }

  .process { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
  .process::before {
    left: 0; right: 0; top: 28px; bottom: auto;
    width: auto; height: 2px;
    background: linear-gradient(90deg, var(--accent), rgba(238, 91, 39, .12));
  }
  .process__step { flex-direction: column; gap: 22px; }
  .process__body { padding-top: 0; }
  .process__marker { background: var(--surface); }
  .section--dark .process__marker,
  .section--dark-alt .process__marker { background: var(--primary-dark); border-color: var(--dark-border); color: var(--on-dark); }

  .tcarousel__slide { flex-basis: 33.3333%; }

  .mobile-bar { display: none; }
  .wa-float { display: inline-flex; bottom: 84px; }
  body { padding-bottom: 0; }

  .footer__main {
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 34px 36px;
    padding-block: 56px 42px;
  }

  .blog-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
  .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 44px; align-items: start; }
  .sidebar--sticky { position: sticky; top: calc(var(--header-h-sm) + 24px); }

  .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }

  .page-hero { padding-block: clamp(30px, 3vw, 42px); }
}

@media (min-width: 1100px) {
  .nav { display: block; }
  .header__actions { display: flex; }
  .burger { display: none; }
  .brand__mark { width: 44px; height: 48px; }
  .brand__mark img { width: 75.5px; left: -16px; }
  .brand__word { width: 104px; height: 33px; }
  .brand__word img { width: 103.8px; top: -70.2px; }
}

@media (min-width: 1200px) {
  :root { --section-y: 54px; --gutter: 24px; }

  .grid--3 { gap: 22px; }
  .grid--4 { gap: 20px; }
  .split { gap: 44px; }
  .security__grid { gap: 44px; }
  .enquiry__grid { gap: 40px; }
  .section-head { margin-bottom: 28px; }

  .nav__link { padding: 12px 18px; font-size: .95rem; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1400px) {
  :root { --container: 1320px; }
  .hero__slide .hero__media { max-height: 700px; }
  .hero__nav--prev { left: 40px; }
  .hero__nav--next { right: 40px; }
}

@media (min-width: 1700px) {
  :root { --container: 1380px; }
  .hero__slide .hero__media { max-height: 760px; }
}

/* ==========================================================================
   C. INPUT-CAPABILITY QUERIES
   ========================================================================== */

/* Touch devices: no hover-only reveals */
@media (hover: none), (pointer: coarse) {
  .service-card:hover, .usp-card:hover, .brand-card:hover,
  .product-card:hover, .post-card:hover, .info-card:hover { transform: none; }
  .brand-chip img { filter: grayscale(0); opacity: .92; }
  .brand-chip:hover { transform: none; }
  .brand-card__logo img { filter: grayscale(0); opacity: .95; }
  .wa-float__label { display: none; }
}

/* Very short landscape viewports (e.g. phones turned sideways).
   The forced 440px height used to crop the banner here — the artwork keeps
   its own ratio so it stays complete; only the ceiling is lowered. */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 991.98px) {
  .hero__slide .hero__media { aspect-ratio: 2560 / 799; height: auto; max-height: 440px; }
  .drawer__body { padding-bottom: 12px; }
}