@media (max-width: 880px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .container,
  .wrap {
    padding-inline: 20px !important;
  }

  .site-header {
    width: 100%;
  }

  .site-header.menu-open {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom-color: var(--line) !important;
    box-shadow: var(--shadow-md) !important;
  }

  .header-inner {
    height: 64px !important;
    min-width: 0 !important;
    gap: 12px !important;
  }

  .header-inner > .nav {
    display: none !important;
  }

  .header-actions {
    flex: 0 0 auto !important;
    gap: 0 !important;
    margin-left: auto !important;
    min-width: 0 !important;
  }

  .header-actions .lang-toggle,
  .header-actions .btn-quote {
    display: none !important;
  }

  .header-actions .menu-toggle {
    display: inline-grid !important;
    height: 44px !important;
    place-items: center;
    width: 44px !important;
  }

  .brand img,
  .brand-logo,
  .foot-logo,
  .foot-brand img,
  .foot-brand .foot-logo {
    max-width: min(220px, 58vw);
    height: auto;
  }

  .site-header .brand img {
    max-width: min(150px, 38vw) !important;
    max-height: 32px !important;
    height: auto !important;
    width: auto !important;
  }

  .nav {
    gap: 12px !important;
  }

  .nav-right {
    gap: 10px !important;
  }

  .nav-right .lang {
    display: inline-flex !important;
    flex: 0 0 auto;
    min-height: 44px;
  }

  .site-header.menu-open .lang button,
  .site-header.menu-open .lang button.on,
  .site-header.menu-open .lang .sep {
    color: var(--ink) !important;
  }

  .site-header.menu-open .nav-toggle span {
    background: var(--ink) !important;
  }

  .site-header.menu-open .nav-menu a {
    color: var(--ink) !important;
  }

  .site-header.menu-open .nav-menu a:hover,
  .site-header.menu-open .nav-menu a[aria-current="page"] {
    color: var(--brand) !important;
  }

  .brand,
  .foot-brand,
  .textlink,
  .view-all-btn {
    align-items: center;
    display: inline-flex !important;
    min-height: 44px;
  }

  .textlink,
  .view-all-btn {
    flex-shrink: 0;
    white-space: nowrap !important;
  }

  .site-footer .footer-top,
  .footer .footer-top {
    align-items: center !important;
    text-align: center;
  }

  .site-footer .foot-brand,
  .footer .foot-brand {
    justify-content: center;
    margin-inline: auto;
    width: 100%;
  }

  .site-footer .foot-logo,
  .site-footer .foot-brand img,
  .site-footer .foot-brand .foot-logo,
  .footer .foot-logo,
  .footer .foot-brand img,
  .footer .foot-brand .foot-logo {
    max-width: min(150px, 38vw) !important;
    max-height: 32px !important;
    height: auto !important;
    width: auto !important;
  }

  .main-hero {
    min-height: 620px !important;
    height: 100svh !important;
    background-position: center top !important;
  }

  .main-hero-tagline {
    left: 20px !important;
    right: 20px !important;
    bottom: 44px !important;
    width: auto !important;
  }

  .main-hero-tagline p {
    font-size: clamp(24px, 8vw, 38px) !important;
    line-height: 1.35 !important;
    word-break: keep-all;
  }

  .container > div[style*="justify-content:space-between"] > div[style*="max-width:560px"] {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .container > div[style*="justify-content:space-between"] > div[style*="max-width:560px"] h1 {
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }

  .home-intro-heading {
    font-size: clamp(22px, 6.4vw, 30px) !important;
    line-height: 1.42 !important;
    letter-spacing: -0.03em !important;
  }

  .hero,
  .work-hero {
    min-height: auto;
  }

  .hero-inner {
    padding-top: 82px !important;
  }

  .hero h1,
  .work-hero h1 {
    max-width: none !important;
    font-size: clamp(30px, 10vw, 44px) !important;
  }

  .hero .home-intro-heading {
    font-size: clamp(22px, 6.4vw, 30px) !important;
    line-height: 1.42 !important;
    letter-spacing: -0.03em !important;
  }

  .hero-lead,
  .work-hero p {
    max-width: none !important;
    word-break: keep-all;
  }

  .hero-lead br,
  .intro p br,
  .biz-page-head p br {
    display: none;
  }

  .hero-actions,
  .cta-actions,
  .st-cta2 {
    align-items: stretch !important;
    width: 100%;
  }

  .hero-btn,
  .btn-pill,
  .st-pill {
    width: 100%;
    min-width: 0 !important;
    justify-content: space-between;
  }

  .page-img-banner,
  .biz-hero-banner {
    height: clamp(240px, 52vw, 360px) !important;
  }

  .pg-title-blk {
    padding: 64px 20px 44px !important;
  }

  .pg-title-blk p {
    margin-top: 14px !important;
    line-height: 1.55;
  }

  .biz-subnav {
    height: auto !important;
    padding: 12px 0 14px !important;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .biz-subnav::-webkit-scrollbar {
    display: none;
  }

  .biz-subnav-inner {
    box-sizing: border-box;
    width: max-content;
    min-width: 100%;
    gap: clamp(8px, 2.4vw, 14px) !important;
    padding-inline: 22px;
    justify-content: center;
  }

  .biz-snav-btn {
    flex: 0 0 auto;
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.2 !important;
    min-height: 42px;
    min-width: clamp(72px, 21vw, 112px);
    padding: 0 12px 8px !important;
    scroll-snap-align: center;
    text-align: center;
  }

  .about-subtabs-wrap {
    overflow-x: auto;
  }

  .about-subtabs {
    width: max-content;
    min-width: 100%;
    padding-inline: 20px !important;
  }

  .about-half-img {
    width: 100% !important;
    height: clamp(220px, 52vw, 320px) !important;
    margin-bottom: 36px !important;
  }

  .works-filter-row,
  .port-head {
    align-items: stretch !important;
  }

  .works-filters,
  .wf-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
  }

  .wf,
  .wf-btn {
    flex: 0 0 auto;
    min-height: 44px;
    min-width: 44px;
  }

  .works-section {
    margin-bottom: 54px !important;
  }

  .lay,
  .section .lay,
  .si2-grid,
  .lbl-grid,
  [data-panel="shopmall"] .lbl-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .svc__body p,
  .si2-list .row p,
  .si2-flow .step p,
  .si2-flow .step h4,
  .si2-proc .lab,
  .st-pill,
  .biz-page-head p {
    white-space: normal !important;
  }

  [data-panel],
  [data-panel] .container,
  .si2-grid,
  .si2-grid > *,
  .si2-flow,
  .si2-flow .step,
  .si2-list,
  .si2-list .row,
  .st-cta2,
  .st-pill {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  [data-panel] .container {
    box-sizing: border-box;
    padding-inline: 22px !important;
  }

  .si2-label {
    font-size: clamp(18px, 5vw, 21px) !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere;
    padding-left: 2px !important;
  }

  .si2-list .row,
  .si2-svc .row {
    padding-block: 22px !important;
    padding-inline: 2px !important;
  }

  .si2-list h4,
  .si2-svc h4,
  .si2-flow .step h4 {
    font-size: clamp(16px, 4.3vw, 18px) !important;
    line-height: 1.35 !important;
  }

  .si2-list p,
  .si2-svc p,
  .si2-flow .step p,
  .biz-page-head p {
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.7 !important;
  }

  .process,
  .si2-proc,
  .process-track,
  .sw-flow.flow5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .tech-grid,
  .st-feat4,
  .feat-row,
  .sw-steps,
  .sw-flow,
  .fee-grid,
  .grade-grid,
  .wmodal__facts,
  .wmodal__gallery {
    grid-template-columns: 1fr 1fr !important;
  }

  .proj-grid,
  .loc-grid,
  .contact-grid,
  .port-grid,
  .work-grid,
  .work-cards,
  .st-grid,
  .sw-plans,
  .sw-feats {
    grid-template-columns: 1fr !important;
  }

  .cform {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .field,
  .form-card .field {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .field[hidden],
  .field.is-hidden,
  .form-card .field[hidden],
  .form-card .field.is-hidden {
    display: none !important;
  }

  .field label,
  .field--full label,
  .form-card .field label {
    width: auto !important;
    padding-top: 0 !important;
  }

  .field input,
  .field select,
  .field textarea,
  .select-trigger,
  .filebox {
    width: 100% !important;
    min-width: 0 !important;
  }

  .field.field--full {
    grid-column: 1 !important;
  }

  .consult__head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .btn-consult-submit {
    width: 100%;
    justify-content: center;
    min-height: 48px;
  }

  .form-actions {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .form-actions .btn {
    grid-column: 1 !important;
    width: 100%;
  }

  .jobs-table {
    display: table !important;
    table-layout: fixed;
    width: 100%;
    margin-left: 0 !important;
    white-space: normal;
  }

  .jobs-table th,
  .jobs-table td {
    padding: 14px 6px !important;
    font-size: 13px !important;
  }

  .jobs-table th:nth-child(3),
  .jobs-table td:nth-child(3),
  .jobs-table th:nth-child(4),
  .jobs-table td:nth-child(4) {
    display: none;
  }

  .jobs-table th:first-child,
  .jobs-table td:first-child {
    width: 44px !important;
  }

  .jobs-table th:last-child,
  .jobs-table td:last-child {
    width: 88px !important;
  }

  .jobs-table .col-title {
    overflow-wrap: anywhere;
    text-align: left !important;
  }

  .footer-top,
  .footer-info,
  .biz {
    align-items: flex-start !important;
  }

  .biz li {
    white-space: normal !important;
  }
}

@media (max-width: 520px) {
  .container,
  .wrap {
    padding-inline: 18px !important;
  }

  .main-hero {
    min-height: 560px !important;
  }

  .section,
  .section--tight,
  .work-section {
    padding-block: 56px !important;
  }

  .home-intro-heading {
    font-size: clamp(20px, 5.8vw, 25px) !important;
    line-height: 1.44 !important;
  }

  .hero .home-intro-heading {
    font-size: clamp(20px, 5.8vw, 25px) !important;
    line-height: 1.44 !important;
  }

  .biz-grid,
  .works-pg-grid,
  .caps-inner,
  .process,
  .si2-proc,
  .process-track,
  .tech-grid,
  .st-feat4,
  .feat-row,
  .sw-steps,
  .sw-flow,
  .sw-flow.flow5,
  .fee-grid,
  .grade-grid,
  .wmodal__facts,
  .wmodal__gallery,
  .wmfeat-list {
    grid-template-columns: 1fr !important;
  }

  .si2-flow,
  [data-panel="snapwiz"] .si2-flow {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  .si2-flow .step {
    text-align: left !important;
  }

  .si2-flow .step .ico {
    margin-bottom: 12px !important;
  }

  .st-cta2 {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .st-pill {
    justify-content: space-between !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 16px !important;
    padding: 16px 20px !important;
    overflow-wrap: anywhere;
  }

  .frame-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .svc__item,
  .svc-item,
  .si2-svc .row,
  .adopt-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .lbl-grid:has(.rec-list) {
    gap: 18px !important;
  }

  .rec-list .it {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 22px 2px !important;
  }

  .rec-list .ix {
    display: none !important;
  }

  .rec-list h4 {
    font-size: clamp(17px, 4.6vw, 19px) !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }

  .rec-list p {
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.72 !important;
  }

  .lbl-grid:has(.rec-feats) .lbl-head,
  .lbl-grid:has(.rec-flow) .lbl-head {
    text-align: center !important;
  }

  .rec-feats {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .rec-feat {
    margin-inline: auto;
    max-width: 320px;
    text-align: center !important;
  }

  .rec-feat .ico {
    display: flex;
    justify-content: center;
    margin-inline: auto;
    margin-bottom: 14px !important;
  }

  .rec-feat h4 {
    font-size: clamp(17px, 4.5vw, 18px) !important;
  }

  .rec-feat p {
    line-height: 1.7 !important;
    margin-inline: auto;
    max-width: 30ch;
  }

  .rec-flow {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .rec-step {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    padding: 22px 16px;
    text-align: center !important;
  }

  .rec-ico {
    display: flex;
    justify-content: center;
    margin-bottom: 12px !important;
  }

  .rec-step h4 {
    font-size: clamp(16px, 4.3vw, 18px) !important;
    line-height: 1.35 !important;
  }

  .rec-step p {
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.55 !important;
  }

  .footer-top {
    flex-direction: column !important;
  }

  .site-footer .footer-meta {
    padding-block: 22px 34px !important;
  }

  .site-footer .footer-info {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
    line-height: 1.65 !important;
    font-size: 13px !important;
    word-break: keep-all;
  }

  .site-footer .footer-info .div {
    display: none !important;
  }

  .site-footer .footer-info > span:not(.div) {
    display: inline-flex;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal !important;
  }

  .site-footer .footer-copy {
    width: 100%;
    margin-top: 14px !important;
    line-height: 1.55 !important;
    font-size: 12px !important;
  }

  .biz {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px 12px !important;
  }

  .biz li {
    padding-inline: 0 !important;
  }

  .biz li::after {
    display: none !important;
  }

  .wmodal__panel {
    width: min(94vw, 720px) !important;
    max-height: 88vh !important;
  }
}