/* ==================================================================
   RESPONSIVE OVERRIDES

   This file used to re-declare the whole type scale and the whole
   spacing scale inside eight breakpoint blocks, on top of moving the
   root font-size between 87.5% and 115.6%. Because every rem-based
   padding, icon and heading was measured against that moving root, the
   same markup rendered at genuinely different proportions per
   breakpoint — which is why the site read as "zoomed out" on tablet.

   Type and spacing are now handled once, fluidly, in style.css:
     - `html` stays at 100% at every width
     - the s-* utilities are clamp() based (style.css §4)
     - section padding resolves through --section-y (style.css §1, §5)

   What is left here is only what genuinely differs per breakpoint:
   layout, the mobile navigation, and component geometry.
   ================================================================== */


/* ==================================================================
   LARGE DESKTOP / DESKTOP  (992px - 1199px)
   The nav wraps onto a second line below the logo at this width, so
   the header is taller and the logo is scaled down to compensate.
   ================================================================== */

@media (min-width: 992px) and (max-width: 1199px) {

  .desktoplogo img { max-height: 50px; }

  .wsmenu > .wsmenu-list > li > a { margin: 0; padding: 8px 13px; font-size: 1rem; }
  .wsmenu > .wsmenu-list > li > a.h-link:after { left: 13px; right: 13px; }
  .wsmenu > .wsmenu-list > li a.btn { padding: 11px 22px; margin-top: 12px; }
  .wsmenu > .wsmenu-list > li.reg-fst-link > a { margin-left: 8px; }
  .wsmenu > .wsmenu-list > li > ul.sub-menu { min-width: 240px; }

  .ico-50 .shape-ico svg { width: 104px; height: 104px; top: -30px; left: calc(50% - 48px); }
  .fbox-11 .ico-50 .shape-ico svg { top: -28px; left: calc(50% - 52px); }
  .ico-55 .shape-ico svg { width: 112px; height: 112px; top: -28px; left: calc(50% - 52px); }

  .ct-08 .section-title h2 { padding: 0 5px; }
  #about-3 .txt-block h5 { margin-bottom: 15px; }

  .fbox-12-wrapper { padding-left: 26px; }
  :root { --pad-card: 26px; }
  .fbox-ico-wrap { margin-right: 20px; }

  .cbox-2 .ico-wrap { margin-right: 18px; }
  .cbox-2-ico { width: 42px; height: 42px; font-size: 1.0625rem; line-height: 38px; }
  .cbox-2-line { height: calc(100% - 74px); }
  .cbox-2-txt { margin-bottom: 26px; }

  .ct-01 .img-block { margin-left: 8px; }

  .contact-form .form-control,
  .contact-form .form-select { height: 56px; }
  .contact-form textarea { min-height: 180px; }

  .inquiry-card { padding: 32px 28px 24px; }

  #footer-3 .footer-links .footer-mail-link { margin-bottom: 12px; }
}


/* ==================================================================
   TABLET  (768px - 991px)
   The desktop nav is replaced by the off-canvas mobile menu here, so
   everything below the logo belongs to that component.
   ================================================================== */

@media (min-width: 768px) and (max-width: 991px) {

  /* --- Mobile header bar --- */
  .wsmobileheader { height: 80px; box-shadow: 0 1px 0 rgba(35, 40, 58, .1); }
  .tra-menu .wsmobileheader { background-color: #fff; }
  .wsmobileheader .smllogo { display: block; margin-top: 12px; padding-left: 22px; }
  .smllogo img { width: auto; max-width: inherit; max-height: 54px; }

  .wsanimated-arrow { padding: 14px 22px 14px 0; margin: 24px 28px 0 0; }
  .wsanimated-arrow span:before { top: -8px; width: 26px; }
  .wsanimated-arrow span:after { bottom: -8px; width: 20px; }

  .wsactive .wsanimated-arrow span:before,
  .wsactive .wsanimated-arrow.active span:after { width: 28px; top: 0; }
  .wsactive .wsanimated-arrow span:after { width: 28px; top: 0; }
  .wsactive .wsanimated-arrow span { background: transparent; }

  /* --- Off-canvas menu --- */
  .wsmenu > .wsmenu-list > li > .wsmenu-click { height: 64px; }
  .wsmenu > .wsmenu-list > li.mobile-last-link > a { border-bottom: none; }

  .wsmenu > .wsmenu-list > li > a {
    font-size: 1.125rem;
    line-height: 30px;
    padding: 15px 32px 15px 22px;
    margin: 0;
  }
  .tra-menu .wsmenu > .wsmenu-list > li > a { color: #4e5566; }
  .wsmenu > .wsmenu-list > li > a.h-link:after { display: none; }

  .wsmenu > .wsmenu-list > li > .wsmenu-click > i { height: 10px; width: 10px; margin: 21px 18px 0 0; }
  .wsmenu > .wsmenu-list > li .wsmenu-click.ws-activearrow > i { transform: rotate(-45deg); margin-top: 28px; }

  .wsmenu > .wsmenu-list > li > ul.sub-menu {
    top: 5px;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #ddd;
    box-shadow: none;
  }

  .wsmenu > .wsmenu-list > li > ul.sub-menu,
  .wsmenu > .wsmenu-list > li > .wsmegamenu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: rotateX(0deg);
  }

  .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a,
  .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover {
    color: #4e5566;
    font-size: 1.0625rem;
    padding: 14px 22px;
    border-radius: 0;
  }

  .wsmenu > .wsmenu-list > li > .wsmegamenu ul li.title { font-size: 1.0625rem; padding: 0 14px; margin-bottom: 10px; }

  /* Get Started: full-width tap target at the foot of the menu. */
  .wsmenu > .wsmenu-list > li a.btn {
    display: block;
    font-size: 1.0625rem;
    line-height: 1.2;
    border-width: 2px;
    padding: 16px 22px;
    margin: 14px 22px;
    border-radius: 8px;
    text-align: center;
  }

  .wsmenu > .wsmenu-list > li.reg-fst-link > a { margin-left: 0; }

  /* --- Hero: the mobile header is in flow above it, so the hero only
         needs its own spacing, not the fixed-header clearance. --- */
  .hero-section { margin-top: 80px; }
  #hero-27 .hero-overlay,
  #hero-27.hero-inner-pages .hero-overlay { padding-top: 40px; }
  #hero-27.hero-inner-pages .hero-overlay.hero-mobile { padding-top: 34px; }
  .hero-27-txt h1 { max-width: 26ch; }

  /* --- Components --- */
  .ico-50 .shape-ico svg { width: 96px; height: 96px; top: -26px; left: calc(50% - 44px); }
  .fbox-11 .ico-50 .shape-ico svg { top: -26px; left: calc(50% - 48px); }
  .ico-55 .shape-ico svg { width: 104px; height: 104px; top: -26px; left: calc(50% - 48px); }

  .fbox-12-wrapper { padding-left: 0; }
  :root { --pad-card: 26px; }
  .fbox-5 { padding: 32px 26px; }
  .fbox-ico-wrap { margin-right: 18px; }

  #about-3 .txt-block h5 { margin-bottom: 14px; }
  .ct-08 .section-title h2 { padding: 0 5%; }

  .cbox-2 .ico-wrap { margin-right: 18px; }
  .cbox-2-ico { width: 40px; height: 40px; font-size: 1.0625rem; line-height: 36px; }
  .cbox-2-line { height: calc(100% - 70px); }
  .cbox-2-txt { margin-bottom: 24px; }

  .ct-01 .img-block { margin-left: 0; }

  .contact-form .form-control,
  .contact-form .form-select { height: 54px; }
  .contact-form textarea { min-height: 170px; }
  .contact-form textarea.form-control { padding: 15px; }
  .inquiry-card { padding: 28px 24px 20px; }

  .footer { padding-bottom: 25px; }
  .footer hr { margin-top: 5px; margin-bottom: 25px; }
  img.footer-logo { max-height: 52px; }
  #footer-3 .footer-links .footer-mail-link { margin-bottom: 10px; }
  .footer .foo-links li p { margin-bottom: 8px; }
}


/* ==================================================================
   MOBILE  (<= 767px)
   ================================================================== */

@media (max-width: 767px) {

  /* Decorative washes are scaled to the viewport rather than cropped
     from a desktop-sized image. */
  .bg--fixed { width: auto; }

  .block-shadow { box-shadow: 0 2px 6px rgba(35, 40, 58, .07); }

  h2, h3, h4, h5, h6 { line-height: 1.32; }

  /* --- Mobile header bar --- */
  .wsmobileheader { height: 80px; box-shadow: 0 1px 0 rgba(35, 40, 58, .1); }
  .tra-menu .wsmobileheader { background-color: #fff; }
  .wsmobileheader .smllogo { display: block; margin-top: 20px; padding-left: 18px; }
  .smllogo img { width: auto; max-width: inherit; max-height: 40px; }

  .wsanimated-arrow { padding: 14px 22px 14px 0; margin: 24px 22px 0 0; }
  .wsanimated-arrow span:before { top: -8px; width: 26px; }
  .wsanimated-arrow span:after { bottom: -8px; width: 20px; }

  .wsactive .wsanimated-arrow span:before,
  .wsactive .wsanimated-arrow.active span:after { width: 28px; top: 0; }
  .wsactive .wsanimated-arrow span:after { width: 28px; top: 0; }
  .wsactive .wsanimated-arrow span { background: transparent; }

  /* --- Off-canvas menu.
         Links are 1.0625rem on a 60px row so every item clears the
         44px minimum tap target. --- */
  .wsmenu > .wsmenu-list > li > .wsmenu-click { height: 60px; }
  .wsmenu > .wsmenu-list > li.mobile-last-link > a { border-bottom: none; }

  .wsmenu > .wsmenu-list > li > a {
    font-size: 1.0625rem;
    line-height: 28px;
    padding: 15px 32px 15px 20px;
    margin: 0;
  }
  .tra-menu .wsmenu > .wsmenu-list > li > a { color: #4e5566; }
  .wsmenu > .wsmenu-list > li > a.h-link:after { display: none; }

  .wsmenu > .wsmenu-list > li > .wsmenu-click > i { height: 9px; width: 9px; margin: 22px 18px 0 0; }
  .wsmenu > .wsmenu-list > li .wsmenu-click.ws-activearrow > i { transform: rotate(-45deg); margin-top: 28px; }

  .wsmenu > .wsmenu-list > li > ul.sub-menu {
    top: 5px;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #ddd;
    box-shadow: none;
    padding: 4px 0;
  }

  .wsmenu > .wsmenu-list > li > ul.sub-menu,
  .wsmenu > .wsmenu-list > li > .wsmegamenu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: rotateX(0deg);
  }

  .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a,
  .wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover {
    color: #4e5566;
    font-size: 1rem;
    padding: 14px 20px;
    border-radius: 0;
  }

  .wsmenu > .wsmenu-list > li > .wsmegamenu ul li.title { font-size: 1rem; padding: 0 7px; margin-bottom: 10px; }

  .wsmenu > .wsmenu-list > li a.btn {
    display: block;
    font-size: 1.0625rem;
    line-height: 1.2;
    border-width: 2px;
    padding: 16px 20px;
    margin: 14px 20px;
    border-radius: 8px;
    text-align: center;
  }

  .wsmenu > .wsmenu-list > li.reg-fst-link > a { margin-left: 0; }

  /* --- Hero --- */
  .hero-section { margin-top: 80px; }
  #hero-27 .hero-overlay,
  #hero-27.hero-inner-pages .hero-overlay { padding-top: 32px; }
  #hero-27.hero-inner-pages .hero-overlay.hero-mobile { padding-top: 26px; }

  .hero-27-txt h1 { max-width: none; }
  .hero-27-txt p.s-20 { max-width: none; }

  /* Full-width stacked CTAs: easier to hit, and the hierarchy stays
     legible because the primary button keeps its fill. */
  .btns-group { flex-direction: column; align-items: stretch; gap: 12px; }
  #hero-27 a.btn,
  .b-cta a.btn,
  .b-cta a.btn.mb-0 { width: 100%; display: block; text-align: center; }

  .hero-assurance { flex-direction: column; align-items: center; gap: 6px; }
  .hero-assurance li { gap: 0; }
  .hero-assurance li + li:before { display: none; }

  /* .advantages is the same reassurance line on the inner pages, and
     it stacks exactly like .hero-assurance above. The generated dot
     is dropped when the items are on separate lines. */
  .advantages { flex-direction: column; gap: 6px; }
  .advantages li { gap: 0; }
  .advantages li + li:before { display: none; }
  /* --- CTA sizing.
     Section CTAs go full width so they are comfortable to tap; the
     tier-3 text links deliberately stay inline so the hierarchy set on
     desktop survives the stack. --- */
  .txt-block .btn { width: 100%; text-align: center; }
  .txt-block .link-cta { width: auto; justify-content: flex-start; }

  /* --- Illustrations support the content, so they stop dominating the
     stack once everything is single column. --- */
  .img-block img { max-width: 82%; height: auto; }
  .ct-01 .img-block img { max-width: 76%; }


  /* --- Touch targets.
     Three controls sat under the comfortable 44px minimum on mobile:
     the tier-3 text links, the footer links, and the menu button. --- */
  .link-cta { min-height: 44px; }

  #footer-3 .foo-links li a { padding: 9px 0; }
  #footer-3 .footer-legal-links a { padding: 9px 0; }

  /* Inline contact links: vertical padding extends the hit box without
     changing the line box, so nothing shifts. */
  .footer-mail-link a,
  .inquiry-direct-links a { padding: 8px 0; }

  /* The hamburger bars are drawn by absolutely-positioned pseudo-elements
     that overflow the button box, so the button itself only measured
     25x31. This overlay gives it a 48px target without moving a pixel. */
  .wsanimated-arrow { position: absolute; }
  .wsanimated-arrow:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
  }

  /* The g-5 gutter resolves to a -24px row margin, which pushed the
     inquiry columns 4px past both viewport edges once the section and
     container padding shrank. The vertical gutter is what this row
     actually needs when stacked. */
  #get-started .row.g-5,
  #about-3 .row.g-5,
  .ct-01 .row.g-5,
  #contacts-1 .row.g-5 { --bs-gutter-x: 1.5rem; }

  /* Stacked, the 48px vertical gutter reads as a hole between two
     short text columns. */
  #about-3 .row.g-5 { --bs-gutter-y: 2rem; }

  /* .btns-group already supplies the gap between the stacked CTAs;
     the template margin was adding a second one on top of it. */
  .b-cta .btns-group a.btn,
  .b-cta .btns-group a.btn.mb-0 { margin-bottom: 0 !important; }

  /* --- Sections --- */
  .txt-block { padding-left: 12px; padding-right: 12px; }
  .txt-block > p { max-width: none; }
  .section-title p { max-width: none; }

  #a3-1 { margin-bottom: 25px; }
  .txt-block h5.mb-20 { margin-bottom: 15px; }

  /* --- Cards: centred, single column --- */
  .fbox-11 { display: block; text-align: center; }
  .fbox-11 .fbox-ico { margin-top: 0; margin-bottom: 14px; }
  .fbox-ico-wrap { margin-right: 0; }
  .fbox-12-wrapper { text-align: center; padding-left: 0; }
  :root { --pad-card: 24px; }
  .fbox-5 { padding: 28px 22px; }
  .tech-box .fbox-ico { width: 100%; }

  .ico-50 .shape-ico svg { width: 104px; height: 104px; top: -28px; left: calc(50% - 48px); }
  .fbox-11 .ico-50 .shape-ico svg { top: -28px; left: calc(50% - 52px); }
  .ico-55 .shape-ico svg { width: 108px; height: 108px; top: -26px; left: calc(50% - 50px); }

  .fbox-5.fb-1, .fbox-5.fb-5, .fbox-5.fb-6 { display: flex; flex-flow: wrap; }

  .cbox-2 .ico-wrap { margin-right: 16px; }
  .cbox-2-ico { width: 40px; height: 40px; font-size: 1.0625rem; line-height: 36px; }
  .cbox-2-line { height: calc(100% - 70px); }
  .cbox-2-txt { margin-bottom: 22px; }

  .ct-01 .img-block { margin-left: 0; margin-bottom: 30px; }

  /* --- Reviews --- */
  .review-txt p { font-size: 1.0625rem; }

  /* --- Forms --- */
  .contact-form .form-control,
  .contact-form .form-select { height: 54px; }
  .contact-form textarea { min-height: 170px; }
  .contact-form textarea.form-control { padding: 14px; }
  .inquiry-card { padding: 24px 18px 16px; }
  .inquiry-submit .btn { width: 100%; text-align: center; }

  /* --- Footer --- */
  footer .footer-links,
  footer .footer-info { text-align: center; }
  #footer-3 .footer-info p { max-width: none; }
  .footer { padding-bottom: 24px; }
  .footer hr { margin-top: 5px; margin-bottom: 24px; }
  /* gy-5 on the footer row supplies the stack gap. */
  .footer-info, .footer-links { margin-bottom: 0; }
  img.footer-logo { max-height: 56px; }
  #footer-3 .footer-links .footer-mail-link { margin-bottom: 12px; }
  #footer-3 .bottom-footer { margin-top: 34px; }
  .bottom-footer p.p-sm { margin-bottom: 0; }
  .foo-links.ico-10 li span { top: 1px; right: 3px; }
}


/* ==================================================================
   SMALL MOBILE  (<= 480px)
   ================================================================== */

@media (max-width: 480px) {

  .division { padding-left: 8px; padding-right: 8px; }

  /* The template pulled these sections 15px outside the viewport on
     either side. #page clips the right-hand overflow, so the effect was
     content shifted off-centre and slightly cropped. Sections align to
     the viewport now. */
  .content-section.ws-wrapper { margin: 0; }

  .font--jakarta h3, .font--jakarta h4,
  .font--jakarta h5, .font--jakarta h6 { line-height: 1.38; }

  .fbox-5 .fbox-txt p { padding: 0; }
  .rows-3 .fbox-11 p { padding: 0; }

  .txt-block p, .txt-block p.p-sm { margin-bottom: 0.85rem; }

  :root { --pad-card: 22px; }

  .reviews-nav { gap: 12px; }

  .ct-01 .img-block { margin: 0 0 26px; }
}


/* ==================================================================
   VERY SMALL MOBILE  (<= 360px)
   The type scale already bottoms out here via clamp(); this only
   tightens the off-canvas menu width so it does not fill the screen.
   ================================================================== */

@media (max-width: 360px) {

  .wsmenu > .wsmenu-list { width: 270px; margin-right: -270px; }
  .wsactive .wsmobileheader { margin-right: 270px; }
  .overlapblackbg { display: none !important; }

  .inquiry-card { padding: 20px 16px 14px; }
  :root { --pad-card: 20px; }
}