/* ==========================================================================
   responsive.css — all @media rules extracted from style.css
   Load AFTER style.css so breakpoint overrides keep the last word.
   ========================================================================== */

@media(max-width:760px) {
  .topbar__social {
    display: none
  }

  .topbar__div {
    display: none
  }

  .topbar__in {
    gap: 10px;
    justify-content: space-between
  }
}

@media(max-width:520px) {
  .floaters {
    top: auto;
    bottom: 16px
  }

  .topbar__contact {
    gap: 12px;
    font-size: .78rem
  }
}

@media(max-width:960px) {
  .nav__link {
    color: var(--ink);
    text-shadow: none
  }
}

@media(max-width:960px) {
  .topbar {
    display: none
  }

  .nav-toggle {
    display: flex;
    position: relative;
    z-index: 60
  }

  /* topbar is hidden on mobile, so the call shortcut moves into the header */
  .header-call {
    display: inline-flex
  }

  .header-quote {
    padding: .55rem .95rem;
    font-size: .86rem
  }

  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(86vw, 340px);
    height: 100vh;
    height: 100dvh;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    background: #fff;
    padding: 92px 22px 32px;
    gap: 2px;
    box-shadow: -14px 0 44px rgba(8, 18, 30, .28);
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
    z-index: 55;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain
  }

  .site-nav.open {
    transform: translateX(0)
  }

  /* close (✕) button pinned to the drawer's top-right */
  .nav-close {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 5
  }

  .nav-close:hover {
    background: var(--bg-steel);
    color: var(--steel)
  }

  /* drawer has its own ✕ — hide the hamburger while it's open */
  body.nav-locked .nav-toggle {
    display: none
  }

  .nav__link {
    display: block;
    width: 100%;
    padding: .95rem .2rem;
    border-bottom: 1px solid var(--line)
  }

  .nav__cta {
    margin: 12px 0 0;
    justify-content: center
  }

  .nav-scrim {
    position: fixed;
    inset: 0;
    background: rgba(8, 14, 22, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 54
  }

  .nav-scrim.open {
    opacity: 1;
    visibility: visible
  }

  body.nav-locked {
    overflow: hidden
  }
}

@media(min-width:961px) {
  .nav-scrim {
    display: none
  }
}

@media(max-width:900px) {

  .hero__panel {
    display: none
  }
}

@media(max-width:640px) {

  .stats__grid > *:nth-child(2) .stat {
    border-right: 0
  }
}

@media(max-width:760px) {
  .cta__in {
    flex-direction: column;
    align-items: flex-start;
    padding: 44px 0
  }
}

@media(max-width:768px) {
  .footer__brand-in {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px
  }
}

@media(max-width:560px) {

  .footer__bar-in {
    flex-direction: column;
    text-align: center
  }
}

@media(max-width:640px) {
  .hero__arrow {
    width: 40px;
    height: 40px;
    font-size: 1.6rem
  }

  .hero__arrow--l {
    left: 12px
  }

  .hero__arrow--r {
    right: 12px
  }
}

@media(max-width:640px) {
  .hero__slide {
    min-height: 100vh;
    min-height: 100dvh
  }

  .hero__card {
    padding: 40px 22px
  }
}

@media(max-width:560px) {
  .cats-slider__track .cat {
    flex-basis: 82%
  }

  .cats-slider__btn {
    display: none
  }

  .pcat .pcat__banner {
    align-items: flex-start;
    padding-top: 60px;
  }
}

@media(max-width:820px) {

  .pcat,
  .pcat:nth-child(even) {
    flex-direction: column
  }

  .pcat__banner {
    flex-basis: auto;
    min-height: 180px;
    justify-content: center;
    text-align: center
  }

  .pcat:nth-child(even) .pcat__banner {
    justify-content: center;
    text-align: center
  }

  .pcat__banner h3 {
    font-size: 1.6rem
  }

  /* card slider floats up over the banner image */
  .pcat:not(:nth-child(even)) .pcat__slider,
  .pcat:nth-child(even) .pcat__slider {
    margin: -70px 12px 0;
    padding: 16px;
    z-index: 2;
    box-shadow: 0 12px 30px rgba(8, 18, 30, .16)
  }

  .pcat__nav {
    display: none
  }
}

@media(max-width:560px) {
  .pcard {
    flex-basis: 72%
  }
}

@media(max-width:900px) {

  .blog-detail__side .toc-wrapper {
    position: static;
    max-width: none
  }
}

@media(max-width:560px) {

  .post-nav__link--next {
    text-align: left
  }

  .blog-search {
    flex-wrap: wrap
  }
}

@media(max-width:960px) {
  .nav__item {
    display: block;
    position: static
  }

  /* drawer parent links stay dark & crisp on the white panel */
  .site-top .site-nav .nav__link {
    color: var(--ink);
    text-shadow: none
  }

  /* parent link with submenu: caret points right (go forward) */
  .nav__item>.nav__link.has-caret {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between
  }

  .nav__item>.nav__link.has-caret .caret {
    border-left: 5px solid currentColor;
    border-right: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    margin-left: auto
  }

  /* submenu slides in as the next panel over the whole drawer */
  .site-dropdown {
    position: absolute;
    inset: 0;
    margin: 0;
    min-width: 0;
    background: #fff;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 78px 22px 28px;
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.22, 1, .36, 1);
    z-index: 3
  }

  .nav__item.open>.site-dropdown {
    transform: translateX(0)
  }

  .site-dropdown li a {
    padding: .85rem .4rem;
    border-bottom: 1px solid var(--line);
    font-size: 1rem;
    font-weight: 600
  }

  /* back row injected at the top of each submenu */
  .site-dropdown__back-item {
    display: block;
    list-style: none
  }

  .site-dropdown__back {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: .8rem .2rem;
    margin-bottom: 6px;
    cursor: pointer;
    background: none;
    border: 0;
    border-bottom: 2px solid var(--line);
    font: inherit;
    text-align: left
  }

  .site-dropdown__back::before {
    content: "";
    flex: none;
    width: 0;
    height: 0;
    border-right: 8px solid var(--steel);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent
  }

  .site-dropdown__back-label {
    font-weight: 700;
    color: var(--steel)
  }

  .site-dropdown__back-title {
    font-weight: 500;
    color: var(--muted, #6b7a88);
    font-size: .9rem
  }

  .site-dropdown__back-title::before {
    content: "· ";
    margin-right: 2px
  }

  /* second-level flyouts flatten into indented groups inside the drawer panel */
  .site-subdropdown {
    position: static;
    min-width: 0;
    margin: 0 0 10px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    list-style: none;
    opacity: 1;
    visibility: visible;
    transform: none
  }

  .site-dropdown li.has-sub>a {
    color: var(--steel);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--line)
  }

  .caret--sub {
    display: none
  }

  .site-subdropdown li a {
    display: block;
    padding: .85rem .4rem .85rem 1rem;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 1rem;
    font-weight: 600
  }
}

@media(max-width:640px) {
  .quote-modal {
    padding: 0;
    align-items: flex-end
  }

  .quote-modal__dialog {
    width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    padding: 26px 18px 20px;
    transform: translateY(28px)
  }

  .quote-modal__grid {
    grid-template-columns: 1fr
  }

  .quote-modal__head h2 {
    font-size: 1.25rem
  }

  .quote-modal__actions .k-btn {
    flex: 1 1 auto;
    justify-content: center
  }
}

@media(max-width:420px) {
  .header-call {
    display: none
  }
}

@media (max-width: 560px) {
  .bcard {
    flex-basis: 82%
  }
}

@media (max-width: 991px) {
  .container {
    max-width: 100%;
    padding-left: 14px;
    padding-right: 14px
  }
}

@media (max-width: 480px) {
  /* 12px matches Bootstrap's half-gutter. At 10px every .row inside a
     container hung 2px past each edge and got shaved by the body's
     overflow clip. */
  .container {
    padding-left: 12px;
    padding-right: 12px
  }
}

/* Wide gutters (g-4 / g-5) pull rows further out than the container padding
   can absorb below the desktop width, so the outer columns lose their edge. */
@media (max-width: 991.98px) {
  .row {
    --bs-gutter-x: 1.5rem
  }
}

@media (max-width: 760px) {

  .prod-spec th {
    width: 130px
  }
}

/* An 11px dot is a 11px tap target. The dot keeps its size; an invisible
   24x44 box around it is what the thumb actually hits. Gap widens so the
   boxes of adjacent dots never overlap. */
@media (max-width: 767.98px) {
  .hero__dots {
    gap: 15px
  }

  /* The hero fills the viewport, so dots pinned 22px from its bottom sit
     underneath the fixed contact bar and cannot be tapped at all. */
  body:has(.k-sticky) .hero__dots {
    bottom: 74px
  }

  .hero__dots button {
    position: relative
  }

  .hero__dots button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 44px;
    transform: translate(-50%, -50%)
  }
}

/* iOS Safari zooms the viewport when a field smaller than 16px takes focus,
   and it never zooms back out. Every field family is pinned to 16px here so
   the desktop sizes can stay as they are. Covers tablet portrait too, where
   iPadOS Safari does the same thing. */
@media (max-width: 991.98px) {

  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form input[type="tel"],
  .contact-form select,
  .contact-form textarea,
  .quote-modal .form-control,
  input[type="search"],
  .blog-search input[type="search"],
  .k-calc__field input,
  .k-calc__field select,
  .cn-cb-input,
  .cn-cb-cc {
    font-size: 16px
  }
}

/* The quick-connect stack and the sticky bar both pin to the bottom edge on
   phones and offer the same Call / WhatsApp pair, so the floating stack lands
   on top of the bar. Where the bar exists it wins: its links dial and open
   WhatsApp directly instead of routing through a modal. */
@media (max-width: 767.98px) {
  body:has(.k-sticky) .cn-cb-fab-stack {
    display: none
  }
}

/* Pages without the bar keep the stack, which becomes a full-width row at
   480px; the 52px reserved for the bar is not enough to clear it. */
@media (max-width: 480px) {
  body:not(:has(.k-sticky)) {
    padding-bottom: 72px
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }
}

@media (max-width: 560px) {

  .grade {
    padding: 16px 18px
  }
}

@media (max-width: 620px) {

  .indcard {
    min-height: 210px
  }
}

@media (max-width: 860px) {

  .about-intro__badge {
    right: 16px;
    bottom: -18px
  }
}

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

@media (max-width: 520px) {
  .values-grid {
    grid-template-columns: 1fr
  }
}

@media (max-width: 575px) {

  .contact-panel,
  .contact-form {
    padding: 22px 18px
  }

  .contact-form .form-actions .k-btn {
    flex: 1 1 100%;
    justify-content: center
  }

  .contact-form .form-status {
    flex: 1 1 100%
  }

  .map-wrap iframe {
    height: 300px
  }
}

@media (prefers-reduced-motion: reduce) {

  .prod-detail__media,
  .prod-detail__media img,
  .prod-card__img img {
    transition: none
  }

  .prod-detail__media:hover,
  .prod-detail__media:hover img,
  .prod-card:hover .prod-card__img img {
    transform: none
  }
}

/* ==== Industries index — sector cards + sidebar ==== */
@media (max-width: 991.98px) {
  .sector-assure {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 26px 24px
  }

  .ind-side {
    margin-top: 8px
  }
}

@media (max-width: 575.98px) {
  .sector__media {
    height: 150px
  }

  .sector__body {
    padding: 18px 18px 14px
  }

  .sector__go {
    padding: 12px 18px
  }

  .sector__no {
    font-size: 1.3rem
  }

  .ind-side__cta {
    padding: 20px 18px
  }
}