/*
 * KernWi-Fi Website V4 homepage responsive corrections
 *
 * Desktop at 1440px:
 * - No document-level horizontal overflow was reproduced.
 *
 * Responsive layout at 1100px and below:
 * - Remove fixed hero height and clipping.
 * - Reset the upward hero-copy transform.
 * - Return service discovery to document flow.
 * - Hide the desktop decorative connector.
 *
 * Navigation:
 * - Normal flow from 769px through 1100px.
 * - Fixed navigation retained at 768px and below, with footer clearance.
 */

@media (max-width: 1100px) {
  .hero {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .hero-content {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #connectivity.hero-main {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
  }

  .v42-address-panel.v42-address-centered {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
  }

  .v42-service-discovery {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 24px 28px 0 !important;
    transform: none !important;
    z-index: auto !important;
  }

  .kwdc-v18-connector {
    display: none !important;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .mobile-nav.nav-v42-mobile {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    margin: 16px 28px !important;
    transform: none !important;
  }
}

@media (max-width: 768px) {
  .site-footer {
    padding-bottom: 130px;
  }
}

/*
 * KernWi-Fi service-discovery specificity override
 *
 * The homepage injects this important rule:
 * body[data-kw-hero-cards="on"] .hero .v42-service-discovery
 *
 * Match that component state with greater specificity so the
 * responsive normal-flow treatment wins at 1100px and below.
 */
@media (max-width: 1100px) {
  html body[data-kw-hero-cards="on"]
    .hero .v42-service-discovery {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 24px 28px 0 !important;
    transform: none !important;
    z-index: auto !important;
  }
}

/*
 * KernWi-Fi final responsive persistence
 *
 * Persist the browser-validated 1024px layout:
 * - Content-driven hero height
 * - Visible overflow
 * - Normal-flow service discovery
 * - Service content above hero overlays
 */
@media (max-width: 1100px) {
  html body[data-kw-hero-cards="on"] .hero {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html body[data-kw-hero-cards="on"]
    .hero .hero-content {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html body[data-kw-hero-cards="on"]
    .hero #connectivity.hero-main {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
  }

  html body[data-kw-hero-cards="on"]
    .hero .v42-service-discovery {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 24px 28px 0 !important;
    transform: none !important;
    z-index: 2 !important;
  }

  html body[data-kw-hero-cards="on"]
    .hero .kwdc-v18-connector {
    display: none !important;
  }
}

/*
 * KernWi-Fi responsive logo and slogan lockup
 *
 * Above 1060px:
 * - The desktop sidebar logo and large hero heading remain unchanged.
 *
 * At 1060px and below:
 * - Display the official logo and positioning statement as one lockup.
 * - Preserve the original h1 semantically.
 * - Remove visible repetition of the large hero heading.
 */

.kw-responsive-brand {
  display: none;
}

@media (max-width: 1060px) {
  .site-shell {
    position: relative;
  }

  .kw-responsive-brand {
    position: absolute;
    top: 18px;
    left: 22px;
    right: 22px;
    z-index: 4;

    min-width: 0;
    padding: 0;

    display: flex;
    align-items: center;
    gap: clamp(18px, 4vw, 32px);

    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
  }

  .kw-responsive-brand__link {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    max-width: 40%;
    text-decoration: none;
  }

  .kw-responsive-brand__link:focus-visible {
    outline: 3px solid #76d1ff;
    outline-offset: 5px;
    border-radius: 7px;
  }

  .kw-responsive-brand__logo {
    display: block;
    width: clamp(150px, 25vw, 185px);
    max-width: 100%;
    height: auto;
    object-fit: contain;

    filter:
      drop-shadow(0 3px 7px rgba(0, 0, 0, 0.92))
      drop-shadow(0 0 12px rgba(5, 18, 33, 0.45));
  }

  .kw-responsive-brand__statement {
    max-width: 330px;
    margin: 0;
    padding-left: clamp(18px, 3vw, 28px);

    border-left:
      1px solid rgba(118, 209, 255, 0.34);

    color: #ffffff;
    font-size: clamp(1.55rem, 4vw, 2.25rem);
    font-weight: 850;
    line-height: 0.98;
    letter-spacing: -0.045em;

    text-wrap: balance;
    text-shadow:
      0 3px 10px rgba(0, 0, 0, 0.92),
      0 0 20px rgba(3, 13, 25, 0.58);
  }

  /*
   * Keep the real h1 in the accessibility tree while avoiding
   * visual duplication with the responsive slogan.
   */
  #connectivity.hero-main h1 {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  html body[data-kw-hero-cards="on"] .hero {
    padding-top: 104px !important;
  }

  html body[data-kw-hero-cards="on"]
    .hero #connectivity.hero-main {
    padding-top: 14px !important;
    padding-bottom: 30px !important;
  }
}

/* Compact tablet lockup */
@media (min-width: 561px) and (max-width: 820px) {
  .kw-responsive-brand__logo {
    width: 160px;
  }

  .kw-responsive-brand__statement {
    max-width: 285px;
    font-size: 1.75rem;
  }

  html body[data-kw-hero-cards="on"] .hero {
    padding-top: 92px !important;
  }
}

/* Stack the lockup on narrow mobile displays */
@media (max-width: 560px) {
  .kw-responsive-brand {
    top: 14px;
    left: 16px;
    right: 16px;

    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 10px;
  }

  .kw-responsive-brand__link {
    max-width: 70%;
  }

  .kw-responsive-brand__logo {
    width: clamp(145px, 48vw, 170px);
  }

  .kw-responsive-brand__statement {
    max-width: 300px;
    padding-left: 0;
    padding-top: 9px;

    border-left: 0;
    border-top:
      1px solid rgba(118, 209, 255, 0.28);

    font-size: clamp(1.45rem, 8vw, 2rem);
    line-height: 0.98;
  }

  html body[data-kw-hero-cards="on"] .hero {
    padding-top: 148px !important;
  }

  html body[data-kw-hero-cards="on"]
    .hero #connectivity.hero-main {
    padding-top: 10px !important;
  }
}

/*
 * KernWi-Fi responsive lockup refinements
 *
 * Refines the existing responsive logo and slogan lockup:
 * - Reduces the isolated drop-shadow effect
 * - Softens the divider
 * - Favours a compact two-line tablet statement
 * - Reduces the mobile gap before supporting copy
 * - Preserves the accepted desktop layout
 */

/* Restrained shared shadow treatment */
@media (max-width: 1060px) {
  .kw-responsive-brand__logo {
    filter:
      drop-shadow(
        0 2px 3px rgba(0, 0, 0, 0.42)
      ) !important;
  }

  .kw-responsive-brand__statement {
    text-shadow:
      0 2px 4px rgba(0, 0, 0, 0.42) !important;
  }
}

/*
 * Tablet and small-laptop lockup
 *
 * Intended layout:
 * [KernWi-Fi logo] | Connectivity Without
 *                    Compromise
 */
@media (min-width: 561px) and (max-width: 1060px) {
  .kw-responsive-brand {
    top: 16px !important;
    left: 28px !important;
    right: 28px !important;

    align-items: center !important;
    gap: 22px !important;
  }

  .kw-responsive-brand__link {
    flex: 0 0 auto !important;
    max-width: none !important;
  }

  .kw-responsive-brand__logo {
    width: clamp(155px, 19vw, 178px) !important;
    max-width: 100% !important;
  }

  .kw-responsive-brand__statement {
    width: min(390px, calc(100% - 205px)) !important;
    max-width: 390px !important;
    margin: 0 !important;
    padding-left: 22px !important;

    border-left:
      1px solid rgba(118, 209, 255, 0.20) !important;

    font-size:
      clamp(1.45rem, 3vw, 1.9rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;

    text-wrap: balance;
  }

  html body[data-kw-hero-cards="on"] .hero {
    padding-top: 82px !important;
  }

  html body[data-kw-hero-cards="on"]
    .hero #connectivity.hero-main {
    padding-top: 8px !important;
    padding-bottom: 24px !important;
  }
}

/* Compact tablet treatment around 768px */
@media (min-width: 561px) and (max-width: 820px) {
  .kw-responsive-brand {
    left: 24px !important;
    right: 24px !important;
    gap: 20px !important;
  }

  .kw-responsive-brand__logo {
    width: 160px !important;
  }

  .kw-responsive-brand__statement {
    width: min(360px, calc(100% - 190px)) !important;
    max-width: 360px !important;
    padding-left: 20px !important;
    font-size: 1.65rem !important;
  }

  html body[data-kw-hero-cards="on"] .hero {
    padding-top: 80px !important;
  }

  html body[data-kw-hero-cards="on"]
    .hero #connectivity.hero-main {
    padding-top: 6px !important;
    padding-bottom: 22px !important;
  }
}

/*
 * Narrow-mobile stacked lockup
 *
 * Reduces the unused space between the slogan and supporting copy.
 */
@media (max-width: 560px) {
  .kw-responsive-brand {
    top: 12px !important;
    left: 16px !important;
    right: 16px !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: start !important;
    gap: 5px !important;
  }

  .kw-responsive-brand__link {
    max-width: 76% !important;
  }

  .kw-responsive-brand__logo {
    width:
      clamp(145px, 46vw, 165px) !important;
    max-width: 100% !important;
  }

  .kw-responsive-brand__statement {
    width: auto !important;
    max-width: 315px !important;
    margin: 0 !important;
    padding: 6px 0 0 !important;

    border-left: 0 !important;
    border-top:
      1px solid rgba(118, 209, 255, 0.20) !important;

    font-size:
      clamp(1.35rem, 7vw, 1.75rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;

    text-wrap: balance;
  }

  html body[data-kw-hero-cards="on"] .hero {
    padding-top: 112px !important;
  }

  html body[data-kw-hero-cards="on"]
    .hero #connectivity.hero-main {
    padding-top: 0 !important;
    padding-bottom: 18px !important;
  }
}

/* Very narrow mobile adjustment */
@media (max-width: 380px) {
  .kw-responsive-brand__link {
    max-width: 82% !important;
  }

  .kw-responsive-brand__logo {
    width: 150px !important;
  }

  .kw-responsive-brand__statement {
    max-width: 300px !important;
    font-size: 1.45rem !important;
  }

  html body[data-kw-hero-cards="on"] .hero {
    padding-top: 116px !important;
  }
}

/*
 * KernWi-Fi centred mobile Check Address action
 *
 * Mobile order:
 * Services | Kern DC       | Solutions
 * Support  | Check Address | Company
 */
@media (max-width: 560px) {
  .mobile-nav-inner.nav-v42-mobile-inner {
    display: grid !important;
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    overflow-x: visible !important;
  }

  .mobile-nav-inner.nav-v42-mobile-inner > a {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 8px 6px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    white-space: nowrap !important;
    text-align: center !important;
  }

  /* Support remains left on row two. */
  .mobile-nav-inner.nav-v42-mobile-inner
    > :nth-child(4) {
    order: 4 !important;
  }

  /* Company moves to the right. */
  .mobile-nav-inner.nav-v42-mobile-inner
    > :nth-child(5) {
    order: 6 !important;
  }

  /* Check Address becomes the centred action. */
  .mobile-nav-inner.nav-v42-mobile-inner
    > .nav-v42-mobile-cta {
    order: 5 !important;
    width: 100% !important;
  }
}

/*
 * KernWi-Fi responsive hamburger drawer
 *
 * The top drawer provides:
 * Home | Services | Support | Company
 *
 * The existing bottom navigation remains available as a
 * quick-action surface.
 */

.kw-mobile-menu-button,
.kw-mobile-drawer {
  display: none;
}

@media (max-width: 1060px) {
  .kw-responsive-brand {
    padding-right: 58px !important;
  }

  .kw-mobile-menu-button {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 6;

    width: 44px;
    height: 44px;
    padding: 0;
    border:
      1px solid rgba(118, 209, 255, 0.24);
    border-radius: 12px;

    display: inline-grid;
    place-items: center;

    color: #ffffff;
    background: rgba(4, 17, 31, 0.62);
    backdrop-filter: blur(8px);
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.20);

    cursor: pointer;
  }

  .kw-mobile-menu-button:hover {
    background: rgba(11, 38, 65, 0.84);
  }

  .kw-mobile-menu-button:focus-visible {
    outline: 3px solid #76d1ff;
    outline-offset: 3px;
  }

  .kw-mobile-menu-button__icon,
  .kw-mobile-menu-button__icon::before,
  .kw-mobile-menu-button__icon::after {
    width: 20px;
    height: 2px;
    border-radius: 999px;
    display: block;
    background: currentColor;
    transition:
      transform 160ms ease,
      opacity 160ms ease;
  }

  .kw-mobile-menu-button__icon {
    position: relative;
  }

  .kw-mobile-menu-button__icon::before,
  .kw-mobile-menu-button__icon::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .kw-mobile-menu-button__icon::before {
    top: -6px;
  }

  .kw-mobile-menu-button__icon::after {
    top: 6px;
  }

  .kw-mobile-menu-button[aria-expanded="true"]
    .kw-mobile-menu-button__icon {
    background: transparent;
  }

  .kw-mobile-menu-button[aria-expanded="true"]
    .kw-mobile-menu-button__icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  .kw-mobile-menu-button[aria-expanded="true"]
    .kw-mobile-menu-button__icon::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .kw-mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
  }

  .kw-mobile-drawer.is-open {
    display: block;
  }

  .kw-mobile-drawer__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(1, 7, 14, 0.72);
    cursor: default;
  }

  .kw-mobile-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;

    width: min(360px, calc(100vw - 28px));
    height: 100%;
    padding: 22px;

    overflow-y: auto;

    color: #eef7ff;
    background:
      linear-gradient(
        160deg,
        rgba(7, 27, 48, 0.99),
        rgba(3, 13, 25, 0.99)
      );
    border-left:
      1px solid rgba(118, 209, 255, 0.22);
    box-shadow:
      -24px 0 60px rgba(0, 0, 0, 0.42);
  }

  .kw-mobile-drawer__header {
    min-height: 52px;
    padding-bottom: 18px;
    border-bottom:
      1px solid rgba(118, 209, 255, 0.16);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .kw-mobile-drawer__title {
    margin: 0;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 800;
  }

  .kw-mobile-drawer__close {
    width: 40px;
    height: 40px;
    padding: 0;
    border:
      1px solid rgba(118, 209, 255, 0.22);
    border-radius: 10px;

    display: inline-grid;
    place-items: center;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
  }

  .kw-mobile-drawer__close:focus-visible {
    outline: 3px solid #76d1ff;
    outline-offset: 3px;
  }

  .kw-mobile-drawer__links {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;

    display: grid;
    gap: 8px;
  }

  .kw-mobile-drawer__links a {
    min-height: 48px;
    padding: 12px 14px;
    border:
      1px solid rgba(118, 209, 255, 0.12);
    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    color: #e4f1ff;
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.94rem;
    font-weight: 750;
    text-decoration: none;
  }

  .kw-mobile-drawer__links a::after {
    content: "›";
    color: #76d1ff;
    font-size: 1.25rem;
  }

  .kw-mobile-drawer__links a:hover,
  .kw-mobile-drawer__links a:focus-visible {
    color: #ffffff;
    background: rgba(41, 168, 255, 0.12);
    border-color: rgba(118, 209, 255, 0.28);
  }

  .kw-mobile-drawer__links a:focus-visible {
    outline: 3px solid #76d1ff;
    outline-offset: 2px;
  }

  body.kw-mobile-drawer-open {
    overflow: hidden;
  }
}

@media (max-width: 560px) {
  .kw-responsive-brand {
    padding-right: 52px !important;
  }

  .kw-mobile-menu-button {
    width: 40px;
    height: 40px;
  }

  .kw-mobile-drawer__panel {
    width: min(340px, calc(100vw - 16px));
    padding: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kw-mobile-menu-button__icon,
  .kw-mobile-menu-button__icon::before,
  .kw-mobile-menu-button__icon::after {
    transition: none;
  }
}

/*
 * KernWi-Fi polished responsive drawer
 *
 * Refines the functional drawer into a narrower branded panel:
 * - Deliberate visible backdrop
 * - Compact KernWi-Fi brand context
 * - Lighter navigation rows
 * - Prominent Check Address CTA
 * - Contact number at the bottom
 */

@media (max-width: 1060px) {
  .kw-mobile-drawer__backdrop {
    background: rgba(1, 7, 14, 0.78) !important;
    backdrop-filter: blur(2px);
  }

  .kw-mobile-drawer__panel {
    width: min(330px, calc(100vw - 36px)) !important;
    height: 100% !important;
    padding: 20px !important;

    border-left:
      1px solid rgba(118, 209, 255, 0.20) !important;
    border-radius: 18px 0 0 18px;

    background:
      linear-gradient(
        165deg,
        rgba(7, 28, 49, 0.995),
        rgba(3, 13, 25, 0.995)
      ) !important;

    box-shadow:
      -18px 0 46px rgba(0, 0, 0, 0.40) !important;
  }

  .kw-mobile-drawer__header {
    min-height: 54px !important;
    padding-bottom: 15px !important;

    align-items: flex-start !important;

    border-bottom:
      1px solid rgba(118, 209, 255, 0.14) !important;
  }

  .kw-mobile-drawer__brand {
    min-width: 0;
    display: grid;
    gap: 4px;
  }

  .kw-mobile-drawer__brand-logo {
    display: block;
    width: 138px;
    max-width: 100%;
    height: auto;
    object-fit: contain;

    filter:
      drop-shadow(
        0 2px 3px rgba(0, 0, 0, 0.34)
      );
  }

  .kw-mobile-drawer__title {
    margin: 2px 0 0 !important;
    color: rgba(199, 220, 242, 0.72) !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
  }

  .kw-mobile-drawer__close {
    flex: 0 0 auto;

    width: 36px !important;
    height: 36px !important;

    border-color:
      rgba(118, 209, 255, 0.14) !important;

    background:
      rgba(255, 255, 255, 0.025) !important;

    font-size: 1.25rem !important;
  }

  .kw-mobile-drawer__close:hover {
    background:
      rgba(41, 168, 255, 0.10) !important;
  }

  .kw-mobile-drawer__links {
    margin-top: 16px !important;
    gap: 5px !important;
  }

  .kw-mobile-drawer__links a {
    min-height: 44px !important;
    padding: 10px 12px !important;

    border-color:
      rgba(118, 209, 255, 0.09) !important;

    background:
      rgba(255, 255, 255, 0.025) !important;

    font-size: 0.90rem !important;
    font-weight: 720 !important;
  }

  .kw-mobile-drawer__links a::after {
    color: rgba(118, 209, 255, 0.82) !important;
  }

  .kw-mobile-drawer__links a:hover,
  .kw-mobile-drawer__links a:focus-visible {
    background:
      rgba(41, 168, 255, 0.10) !important;

    border-color:
      rgba(118, 209, 255, 0.24) !important;
  }

  .kw-mobile-drawer__footer {
    margin-top: 24px;
    padding-top: 18px;

    border-top:
      1px solid rgba(118, 209, 255, 0.14);

    display: grid;
    gap: 12px;
  }

  .kw-mobile-drawer__address {
    min-height: 48px;
    padding: 0 16px;
    border:
      1px solid rgba(118, 209, 255, 0.40);
    border-radius: 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    background:
      linear-gradient(
        120deg,
        rgba(28, 143, 239, 0.96),
        rgba(20, 105, 196, 0.97)
      );

    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14);

    font-size: 0.90rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
  }

  .kw-mobile-drawer__address:hover,
  .kw-mobile-drawer__address:focus-visible {
    filter: brightness(1.08);
  }

  .kw-mobile-drawer__address:focus-visible,
  .kw-mobile-drawer__phone:focus-visible {
    outline: 3px solid #76d1ff;
    outline-offset: 3px;
  }

  .kw-mobile-drawer__phone {
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: rgba(208, 225, 243, 0.79);
    font-size: 0.80rem;
    font-weight: 700;
    text-decoration: none;
  }

  .kw-mobile-drawer__phone::before {
    content: "Call";
    color: #76d1ff;
    font-size: 0.64rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}

@media (max-width: 560px) {
  .kw-mobile-drawer__panel {
    width: min(310px, calc(100vw - 42px)) !important;
    padding: 18px !important;
  }

  .kw-mobile-drawer__brand-logo {
    width: 128px;
  }
}

/*
 * KernWi-Fi compact mobile drawer final polish
 *
 * - Removes unused full-height drawer space
 * - Preserves internal scrolling on short displays
 * - Tightens CTA and phone spacing
 * - Reduces navigation-row visual weight
 */
@media (max-width: 560px) {
  .kw-mobile-drawer__panel {
    top: 10px !important;
    right: 0 !important;
    bottom: auto !important;

    width:
      min(310px, calc(100vw - 42px)) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height:
      calc(100dvh - 20px) !important;

    padding: 18px !important;
    overflow-y: auto !important;

    border-radius:
      18px 0 0 18px !important;
  }

  .kw-mobile-drawer__brand-logo {
    width: 120px !important;
  }

  .kw-mobile-drawer__header {
    min-height: 48px !important;
    padding-bottom: 13px !important;
  }

  .kw-mobile-drawer__links {
    margin-top: 14px !important;
    gap: 5px !important;
  }

  .kw-mobile-drawer__links a {
    min-height: 43px !important;
    padding: 9px 11px !important;

    border-color:
      rgba(118, 209, 255, 0.07) !important;

    background:
      rgba(255, 255, 255, 0.018) !important;
  }

  .kw-mobile-drawer__footer {
    margin-top: 18px !important;
    padding-top: 16px !important;
    gap: 8px !important;
  }

  .kw-mobile-drawer__address {
    min-height: 46px !important;
  }

  .kw-mobile-drawer__phone {
    min-height: 34px !important;
  }
}

/*
 * Fallback for browsers without dynamic viewport units.
 */
@supports not (height: 100dvh) {
  @media (max-width: 560px) {
    .kw-mobile-drawer__panel {
      max-height:
        calc(100vh - 20px) !important;
    }
  }
}

/*
 * KernWi-Fi consistent left responsive drawer
 *
 * Applies one content-height treatment across the full responsive
 * range, while retaining internal scrolling on short viewports.
 */
@media (max-width: 1060px) {
  .kw-mobile-drawer__panel {
    top: 10px !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;

    width:
      min(330px, calc(100vw - 36px)) !important;

    height: auto !important;
    min-height: 0 !important;
    max-height:
      calc(100dvh - 20px) !important;

    overflow-y: auto !important;
    overscroll-behavior: contain;

    border-left: 0 !important;
    border-right:
      1px solid rgba(118, 209, 255, 0.20) !important;

    border-radius:
      0 18px 18px 0 !important;

    box-shadow:
      18px 0 46px rgba(0, 0, 0, 0.40) !important;
  }

  .kw-mobile-drawer__footer {
    margin-top: 18px !important;
    padding-top: 16px !important;
    gap: 8px !important;
  }

  .kw-mobile-drawer__phone {
    min-height: 34px !important;
  }
}

/* Narrow mobile retains the approved 310px treatment. */
@media (max-width: 560px) {
  .kw-mobile-drawer__panel {
    width:
      min(310px, calc(100vw - 42px)) !important;

    padding: 18px !important;
  }
}

/* Fallback where dynamic viewport units are unavailable. */
@supports not (height: 100dvh) {
  @media (max-width: 1060px) {
    .kw-mobile-drawer__panel {
      max-height:
        calc(100vh - 20px) !important;
    }
  }
}

/*
 * KernWi-Fi short landscape tablet final fix
 *
 * Targets desktop-like tablet widths with limited landscape height,
 * including the validated 1280 x 800 layout.
 */
@media
  (min-width: 1061px)
  and (max-width: 1366px)
  and (max-height: 850px) {

  html body[data-kw-hero-cards="on"] .site-shell {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  html body[data-kw-hero-cards="on"] .hero {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  html body[data-kw-hero-cards="on"]
    .hero .hero-content {
    display: block !important;
    height: fit-content !important;
    block-size: fit-content !important;
    min-height: 0 !important;
    min-block-size: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
    align-content: start !important;
  }

  html body[data-kw-hero-cards="on"]
    .hero #connectivity.hero-main {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 38px 32px 24px !important;
    transform: none !important;
  }

  html body[data-kw-hero-cards="on"]
    .hero #connectivity.hero-main h1 {
    max-width: 590px !important;
    font-size: clamp(4.1rem, 7.2vw, 5.75rem) !important;
    line-height: 0.93 !important;
  }

  html body[data-kw-hero-cards="on"]
    .hero .v42-address-panel.v42-address-centered {
    position: relative !important;
    inset: auto !important;
    width: min(800px, calc(100% - 64px)) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    transform: none !important;
  }

  html body[data-kw-hero-cards="on"]
    .hero .v42-service-discovery {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 24px 28px 0 !important;
    transform: none !important;
    z-index: 2 !important;
  }

  html body[data-kw-hero-cards="on"]
    .hero .kwdc-v18-connector {
    display: none !important;
  }

  html body[data-kw-hero-cards="on"]
    .site-footer {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    margin-top: 0 !important;
    transform: none !important;
    z-index: 3 !important;
  }
}