/* Responsive styles and media queries. */
/* Responsive rules extracted from the original locked stylesheet. */

@layer site-utilities {
@media (hover:hover) {
        .site-group-hover-scale-105:is(:where(.site-group):hover *) {
          --site-scale-x: 105%;
          --site-scale-y: 105%;
          --site-scale-z: 105%;
          scale: var(--site-scale-x) var(--site-scale-y)
        }

        .site-group-hover-scale-x-100:is(:where(.site-group):hover *) {
          --site-scale-x: 100%;
          scale: var(--site-scale-x) var(--site-scale-y)
        }
      }

@media (hover:hover) {
        .site-hover--translate-y-0-5:hover {
          --site-translate-y: calc(var(--spacing) * -.5);
          translate: var(--site-translate-x) var(--site-translate-y)
        }

        .site-hover--translate-y-1:hover {
          --site-translate-y: calc(var(--spacing) * -1);
          translate: var(--site-translate-x) var(--site-translate-y)
        }

        .site-hover-bg-brand:hover {
          background-color: var(--color-brand)
        }

        .site-hover-bg-brand-dark:hover {
          background-color: var(--color-brand-dark)
        }

        .site-hover-text-brand:hover {
          color: var(--color-brand)
        }

        .site-hover-text-premium:hover {
          color: var(--color-premium)
        }

        .site-hover-text-white:hover {
          color: var(--color-white)
        }

        .site-hover-underline:hover {
          text-decoration-line: underline
        }

        .site-hover-shadow-xl:hover {
          --site-shadow: 0 20px 25px -5px var(--site-shadow-color, #0000001a), 0 8px 10px -6px var(--site-shadow-color, #0000001a);
          box-shadow: var(--site-inset-shadow), var(--site-inset-ring-shadow), var(--site-ring-offset-shadow), var(--site-ring-shadow), var(--site-shadow)
        }
      }

@media (min-width:40rem) {
        .site-sm--left-10 {
          left: calc(var(--spacing) * -10)
        }

        .site-sm-col-span-2 {
          grid-column: span 2/span 2
        }

        .site-sm-flex {
          display: flex
        }

        .site-sm-w-360px {
          width: 360px
        }

        .site-sm-w-auto {
          width: auto
        }

        .site-sm-grid-cols-2 {
          grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .site-sm-grid-cols-4 {
          grid-template-columns: repeat(4, minmax(0, 1fr))
        }

        .site-sm-flex-row {
          flex-direction: row
        }

        .site-sm-items-center {
          align-items: center
        }

        .site-sm-justify-between {
          justify-content: space-between
        }

        .site-sm-p-8 {
          padding: calc(var(--spacing) * 8)
        }

        .site-sm-px-6 {
          padding-inline: calc(var(--spacing) * 6)
        }

        .site-sm-text-4xl {
          font-size: var(--text-price);
          line-height: var(--site-leading, 1.15)
        }

        .site-sm-text-5xl {
          font-size: var(--text-hero);
          line-height: var(--site-leading, 1)
        }

        .site-sm-text-6xl {
          font-size: var(--text-hero);
          line-height: var(--site-leading, 1)
        }

        .site-sm-text-base {
          font-size: var(--text-body);
          line-height: var(--site-leading, 1.5)
        }

        .site-sm-text-sm {
          font-size: var(--text-small);
          line-height: var(--site-leading, 1.35)
        }
      }

@media (min-width:48rem) {
        .site-md-grid-cols-4 {
          grid-template-columns: repeat(4, minmax(0, 1fr))
        }

        .site-md-py-20 {
          padding-block: calc(var(--spacing) * 20)
        }
      }

@media (min-width:64rem) {
        .site-lg-order-1 {
          order: 1
        }

        .site-lg-order-2 {
          order: 2
        }

        .site-lg-col-span-2 {
          grid-column: span 2/span 2
        }

        .site-lg-col-span-4 {
          grid-column: span 4/span 4
        }

        .site-lg-col-span-5 {
          grid-column: span 5/span 5
        }

        .site-lg-col-span-7 {
          grid-column: span 7/span 7
        }

        .site-lg-col-span-8 {
          grid-column: span 8/span 8
        }

        .site-lg-flex {
          display: flex
        }

        .site-lg-hidden {
          display: none
        }

        .site-lg-h-12 {
          height: calc(var(--spacing) * 12)
        }

        .site-lg-h-20 {
          height: calc(var(--spacing) * 20)
        }

        .site-lg-grid-cols-2 {
          grid-template-columns: repeat(2, minmax(0, 1fr))
        }

        .site-lg-grid-cols-3 {
          grid-template-columns: repeat(3, minmax(0, 1fr))
        }

        .site-lg-grid-cols-4 {
          grid-template-columns: repeat(4, minmax(0, 1fr))
        }

        .site-lg-grid-cols-12 {
          grid-template-columns: repeat(12, minmax(0, 1fr))
        }

        .site-lg-gap-10 {
          gap: calc(var(--spacing) * 10)
        }

        .site-lg-gap-12 {
          gap: calc(var(--spacing) * 12)
        }

        .site-lg-px-8 {
          padding-inline: calc(var(--spacing) * 8)
        }

        .site-lg-py-28 {
          padding-block: calc(var(--spacing) * 28)
        }

        .site-lg-text-4-5rem {
          font-size: var(--text-hero);
        }
      }
}

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

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

@media (prefers-reduced-motion: reduce) {
      .reviews-track {
        animation: none;
        overflow-x: auto;
      }
    }

@media (min-width: 1024px) {
      .tech-grid {
        column-gap: 3.5rem;
      }

      .tech-left {
        position: sticky;
        top: 7rem;
        align-self: start;
      }
    }

@media (prefers-reduced-motion: reduce) {
      [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
    }

@media (max-width: 1023px) { .blog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .article-layout { grid-template-columns: 1fr; } .article-aside { position: static; } }
@media (max-width: 639px) { .blog-grid { grid-template-columns: 1fr; } .blog-card img { height: 12rem; } }

/* Additional-page responsive visibility fixes; scoped so index.html stays untouched. */
@media (max-width: 1024px) {
  .page-shell .inner-page-hero {
    min-height: 400px;
  }
  .page-shell .article-layout {
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 24px;
  }
}
@media (max-width: 760px) {
  .page-shell .inner-page-hero {
    min-height: 460px;
  }
  .page-shell .page-title {
    font-size: var(--text-price);
    line-height: 1.05;
  }
  .page-shell .page-intro {
    font-size: var(--text-card);
    line-height: 1.7;
  }
  .page-shell .page-stat-row {
    grid-template-columns: 1fr;
    margin-top: 30px;
  }
  .page-shell .page-stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
  }
  .page-shell .page-stat strong {
    font-size: var(--text-lg);
  }
  .page-shell .page-stat span {
    margin-top: 0;
    text-align: right;
  }
  .page-shell .page-hero-actions .page-btn {
    width: 100%;
  }
  .page-shell .form-submit-row {
    flex-direction: column;
    align-items: stretch;
  }
  .page-shell .form-submit-row .page-btn {
    width: 100%;
  }
  .page-shell .article-aside {
    grid-template-columns: 1fr;
  }
  .page-shell .aside-card {
    position: static;
  }
  .page-shell .article-body h2 {
    scroll-margin-top: 85px;
  }
}

/* Media queries moved out of the main stylesheet. */









@media(max-width:1024px){.detail-grid,.blog-grid{grid-template-columns:repeat(2,1fr)}.contact-grid{grid-template-columns:1fr}.article-layout{grid-template-columns:1fr}.article-aside{position:static;grid-template-columns:repeat(2,1fr)}.article-cover{height:360px}}@media(max-width:760px){.inner-page-hero{min-height:500px}.page-stat-row{grid-template-columns:1fr}.page-section{padding:68px 0}.info-split{grid-template-columns:1fr;gap:30px}.detail-grid,.blog-grid,.review-grid{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-field.site-full{grid-column:auto}.article-aside{grid-template-columns:1fr}.article-body{padding:24px}.article-cover{height:250px}.bottom-cta{padding:30px 24px}.bottom-cta-inner{align-items:flex-start;flex-direction:column}.page-hero-actions{flex-direction:column;align-items:stretch}.page-btn{width:100%}}@media(max-width:760px){.page-title{font-size: var(--text-price);}.page-intro{font-size: var(--text-body);}.page-stat{padding:16px}.form-card{padding:24px 18px}.contact-card{padding:20px}.blog-card-body{min-height:0}.article-body h2{font-size: var(--text-lg);}.article-cover{height:240px}.page-section-head{margin-bottom:30px}}

/* Final responsive semantic refinements. */
@media (max-width: 760px) {
  .article-body { padding: 24px 20px; }
  .article-cover { height: 240px; }
}

@media (min-width: 640px) {
  .site-sm-py-24 { padding-block: 96px; }
  .site-sm-px-8 { padding-inline: 32px; }
}
@media (min-width: 1024px) {
  .site-lg-py-12 { padding-block: 48px; }
}

/* Reviews page: normal flex layout, no horizontal card scrolling. */
@media (max-width: 1023px) {
  .page-shell .review-index-card {
    width: calc((100% - 24px) / 2);
    flex-basis: calc((100% - 24px) / 2);
  }
}
@media (max-width: 760px) {
  .page-shell .reviews-page-marquee {
    overflow: visible;
  }
  .page-shell .review-index-track {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .page-shell .review-index-card {
    width: 100%;
    flex-basis: auto;
  }
}









@media (max-width: 1199px) {
  #nav > div:first-child {
    padding-left: 24px;
    padding-right: 24px;
  }

  #nav nav {
    gap: 20px;
  }
}

@media (max-width: 1023px) {
  #nav > div:first-child {
    min-height: 70px;
    padding-left: 24px;
    padding-right: 24px;
  }

  #nav > div:first-child > a img {
    height: 44px;
    max-width: 200px;
  }

  #mobileMenu {
    padding: 18px 24px 22px;
  }

  #mobileMenu nav > a {
    padding: 10px 0;
  }
}

@media (max-width: 767px) {
  #nav > div:first-child {
    min-height: 64px;
    padding-left: 16px;
    padding-right: 16px;
  }

  #nav > div:first-child > a img {
    height: 39px;
    max-width: 180px;
  }

  #menuBtn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #menuBtn svg {
    width: 22px;
    height: 22px;
  }

  #mobileMenu {
    padding: 14px 16px 20px;
  }

  #mobileMenu nav > a {
    padding: 9px 2px;
  }

  #mobileMenu .site-mt-2 {
    display: flex;
    gap: 8px;
    margin-top: 12px;
  }

  #mobileMenu .site-mt-2 a {
    flex: 1;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
}

@media (max-width: 480px) {
  #nav > div:first-child {
    min-height: 60px;
    padding-left: 14px;
    padding-right: 14px;
  }

  #nav > div:first-child > a img {
    height: 35px;
    max-width: 165px;
  }

  #menuBtn {
    width: 42px;
    height: 42px;
  }

  #mobileMenu {
    padding: 12px 14px 18px;
  }

  #mobileMenu .site-mt-2 {
    flex-direction: column;
  }

  #mobileMenu .site-mt-2 a {
    width: 100%;
  }
}

/* =========================================================
   HEADER DESKTOP VISIBILITY FIX — HEADER ONLY
   Explicit breakpoint rules override base .site-hidden.
========================================================= */
@media (min-width: 1024px) {
  #nav nav.site-hidden.site-lg-flex {
    display: flex !important;
  }

  #nav > div:first-child > div.site-hidden.site-lg-flex {
    display: flex !important;
  }

  #nav #menuBtn.site-lg-hidden {
    display: none !important;
  }

  #nav #mobileMenu.site-hidden.site-lg-hidden {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  #nav nav.site-hidden.site-lg-flex,
  #nav > div:first-child > div.site-hidden.site-lg-flex {
    display: none !important;
  }

  #nav #menuBtn.site-lg-hidden {
    display: inline-flex !important;
  }
}

/* Mobile menu visibility: JS controls the open/close state. */
@media (max-width: 1023px) {
  #nav #mobileMenu.site-hidden {
    display: none !important;
  }

  #nav #mobileMenu:not(.site-hidden) {
    display: block !important;
  }
}

/* HEADER MOBILE MENU SCROLL FIX — HEADER ONLY */
@media (max-width: 1023px) {
  #nav {
    position: sticky;
    top: 0;
  }

  #nav #mobileMenu {
    max-height: calc(100dvh - 70px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

@media (max-width: 767px) {
  #nav #mobileMenu {
    max-height: calc(100dvh - 64px);
  }
}

@media (max-width: 480px) {
  #nav #mobileMenu {
    max-height: calc(100dvh - 60px);
  }
}



/* =========================================
   Responsive Table
   ========================================= */

@media (max-width: 767px) {

  .article-content table,
  .article-body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-radius: 12px;
    margin: 24px 0;
  }

  .article-content table thead th,
  .article-body table thead th,
  .article-content table tbody td,
  .article-body table tbody td {
    padding: 12px 14px;
    font-size: 14px;
  }
}