/* Final interface corrections. Keep this file last in the stylesheet stack. */
@media (min-width: 901px) {
  /* Avoid fractional-scale hairlines by overlapping the next white section. */
  .page-canvas .hero > .white-curve,
  .home-page .service-band > .white-curve {
    top: auto !important;
    bottom: -3px !important;
    width: 100% !important;
    height: 64px !important;
    background: #fff !important;
    box-shadow: 0 5px 0 #fff !important;
    clip-path: polygon(0 0, 50% 100%, 100% 0, 100% 100%, 0 100%) !important;
  }

  .home-page .about-strip::after {
    bottom: -3px !important;
    width: 100% !important;
    height: 64px !important;
    background: #fff !important;
    box-shadow: 0 5px 0 #fff;
    clip-path: polygon(0 0, 50% 100%, 100% 0, 100% 100%, 0 100%);
  }
}
@media (max-width: 900px) {
  .page-canvas .hero > .white-curve,
  .home-page .service-band > .white-curve {
    bottom: -2px !important;
    background: #fff !important;
    box-shadow: 0 4px 0 #fff !important;
    clip-path: polygon(0 0, 50% 100%, 100% 0, 100% 100%, 0 100%) !important;
  }
  /* Keep imported SVG icons in the flex flow so labels can never slide under them. */
  .home-page .contact-chip .chip-icon,
  .sub-page .contact-chip .chip-icon {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    transform: none !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
  }

  .home-page .contact-chip .chip-icon.pin,
  .sub-page .contact-chip .chip-icon.pin {
    flex-basis: 28px !important;
    width: 28px !important;
    height: 36px !important;
  }

  .home-page .contact-chip .chip-text,
  .sub-page .contact-chip .chip-text {
    position: relative !important;
    inset: auto !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .home-page .contact-address,
  .sub-page .contact-address,
  .home-page .contact-phone,
  .sub-page .contact-phone {
    justify-content: flex-start !important;
  }

  /* A 21 x 14 px icon with both diagonals meeting on the same pixel centre. */
  .mobile-nav-toggle {
    grid-template-rows: repeat(3, 2px) !important;
    row-gap: 4px !important;
    align-content: center !important;
  }

  .mobile-nav-toggle span {
    align-self: center !important;
    transform-origin: 50% 50% !important;
  }

  .mobile-nav-toggle.is-open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg) !important;
  }

  .mobile-nav-toggle.is-open span:nth-child(2) {
    opacity: 0 !important;
  }

  .mobile-nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg) !important;
  }

  /*
   * Keep the mobile menu on a single compositor layer. The legacy entrance
   * animation plus backdrop-filter caused Chromium to paint the panel but
   * temporarily drop its links.
   */
  body.is-ready .home-page .top-nav,
  body.is-ready .sub-page .top-nav,
  .home-page .top-nav,
  .sub-page .top-nav {
    visibility: hidden !important;
    border-width: 0 !important;
    box-shadow: none !important;
    opacity: 0 !important;
    transform: none !important;
    animation: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    will-change: auto !important;
    transition:
      max-height .32s cubic-bezier(.22, 1, .36, 1),
      padding .24s ease,
      opacity .16s ease !important;
  }

  body.is-ready .home-page .top-nav.is-open,
  body.is-ready .sub-page .top-nav.is-open,
  .home-page .top-nav.is-open,
  .sub-page .top-nav.is-open {
    visibility: visible !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .42) !important;
    opacity: 1 !important;
  }

  .home-page .top-nav a,
  .sub-page .top-nav a {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    isolation: auto !important;
    view-transition-name: none !important;
  }

  /* Centre the chevron optically and geometrically inside the round control. */
  .home-page .down-dot::before,
  .sub-page .down-dot::before {
    left: 50% !important;
    top: 50% !important;
    width: 28px !important;
    height: 12px !important;
    border: 0 !important;
    transform: translate(-50%, -50%) !important;
    background: url("/assets/figma-down-arrow.svg") center / contain no-repeat !important;
  }

  /* Four facts are compact 2 x 2 cards instead of a long one-column stack. */
  .home-page .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 48px var(--mobile-gutter) 24px !important;
  }

  .home-page .yellow-card.design-export {
    width: 100% !important;
    margin: 0 !important;
    border-radius: clamp(15px, 4vw, 22px) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .08) !important;
  }

  .home-page .phone-cta {
    margin-top: 2px !important;
  }

  /* Neutralize the old tablet FAQ geometry, including its more specific !important rules. */
  .faq-page .faq-list {
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .faq-page .faq-list article,
  .faq-page .faq-list article:nth-child(n) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .faq-page .faq-list article .faq-bubble-bg,
  .faq-page .faq-list .faq-bubble-bg {
    display: none !important;
  }

  .faq-page .faq-list article:nth-child(n) .faq-question {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: calc(100% - 28px) !important;
    height: auto !important;
  }

  .faq-page .faq-list article:nth-child(n) .faq-answer {
    box-sizing: border-box !important;
    width: calc(100% - 22px) !important;
    max-width: calc(100% - 22px) !important;
    height: auto !important;
    margin: 0 0 0 22px !important;
  }

  .faq-page .faq-list article:nth-child(n) .faq-question span,
  .faq-page .faq-list article:nth-child(n) .faq-answer p {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .home-page .quality-composite { display: none !important; }

  .home-page .quality h2 {
    left: clamp(112px, 33vw, 142px) !important;
    right: 14px !important;
    max-width: none !important;
    font-size: clamp(21px, 5.8vw, 28px) !important;
    line-height: 1 !important;
    letter-spacing: -.025em;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .home-page .strip-copy p {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
  }

  .contacts-page::before {
    display: none !important;
    content: none !important;
  }

  .support-panel {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: 68px !important;
    width: auto !important;
    max-width: none !important;
  }

  .support-chat {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  .support-launcher {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 50% !important;
    background: #0b0b0b !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28) !important;
    font-size: 0 !important;
  }

  .support-launcher::after {
    display: none !important;
    content: none !important;
  }

  .support-launcher-label {
    display: none !important;
  }

  .support-launcher-glyph {
    display: grid !important;
    place-items: center !important;
    width: 100%;
    height: 100%;
    color: #fff;
    font: 800 22px/1 Arial, sans-serif;
    transform: translateY(-1px);
  }

  .support-launcher-dot {
    position: absolute !important;
    right: 2px !important;
    bottom: 2px !important;
    z-index: 2;
    width: 11px !important;
    height: 11px !important;
    border: 2px solid #0b0b0b;
    border-radius: 50%;
  }
}

@media (min-width: 360px) and (max-width: 900px) {
  .services-page .service-catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .services-page .service-art-card {
    width: 100% !important;
    margin: 0 !important;
    border-radius: clamp(15px, 4vw, 22px) !important;
  }

  .services-page .service-art-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 12px) / 2) !important;
  }
}

@media (min-width: 600px) and (max-width: 900px) {
  .about-page .adv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .about-page .adv-grid article.design-export {
    width: 100% !important;
    margin: 0 !important;
    border-radius: clamp(15px, 4vw, 22px) !important;
  }

  .about-page .adv-grid article.design-export:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 12px) / 2) !important;
  }
}
@media (min-width: 700px) and (max-width: 900px) {
  .home-page .facts,
  .about-page .adv-grid,
  .services-page .service-catalog {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .home-page .facts article:last-child:nth-child(4n) {
    grid-column: auto;
  }

  .about-page .adv-grid article.design-export:last-child:nth-child(odd) {
    grid-column: auto;
    width: 100% !important;
  }

  .services-page .service-art-card:last-child:nth-child(odd) {
    grid-column: auto;
    width: 100% !important;
  }
}