html[data-design="technical"] .phones {
    grid-template-columns: repeat(2, max-content);
    justify-content: end;
    align-items: center;
    font-variant-numeric: tabular-nums;
    gap: 4px 20px;
}
html[data-design="technical"] .phones a {
    text-align: left;
    white-space: nowrap;
}
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
.table-scroll:focus-visible {
    outline: 2px solid #d8ad25;
    outline-offset: 2px;
}
.hero-body > *,
.layout > * {
    min-width: 0;
}
@media (max-width: 1000px) and (min-width: 701px) {
    html[data-design="technical"] .header {
        grid-template-columns: 100px minmax(0, 1fr) auto;
    }
    html[data-design="technical"] .phones {
        gap: 4px 10px;
        font-size: 13px;
    }
    html[data-design="technical"] .topnav a {
        padding: 0 4px;
        font-size: 12px;
    }
    .layout {
        padding-left: 20px;
        grid-template-columns: 190px minmax(0, 1fr);
    }
}
@media (max-width: 700px) {
    html[data-design="technical"] body {
        font-size: 16px;
        line-height: 1.55;
    }
    html[data-design="technical"] .header {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 10px 14px;
    }
    html[data-design="technical"] .brand img {
        width: 76px;
        height: 68px;
    }
    html[data-design="technical"] .phones {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        gap: 0 12px;
        width: 100%;
        font-size: clamp(12px, 3.5vw, 15px);
    }
    html[data-design="technical"] .phones a {
        display: flex;
        align-items: center;
        min-height: 44px;
    }
    html[data-design="technical"] .header > .button {
        width: 100%;
        justify-self: stretch;
        min-height: 44px;
        padding: 10px 14px;
    }
    html[data-design="technical"] .topnav a {
        min-height: 44px;
        line-height: 44px;
    }
    html[data-design="technical"] .factory-link {
        margin: 14px 16px 20px;
        font-size: 13px;
    }
    .home-hero,
    .home-gallery {
        padding-left: 16px;
        padding-right: 16px;
    }
    html[data-design="technical"] .home-hero h1 {
        font-size: clamp(25px, 6.7vw, 32px);
        margin: 12px 0 18px;
    }
    .hero-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
    .hero-pipe,
    .hero-pipe.photo-hero {
        max-height: none;
    }
    .photo-hero img {
        width: 100%;
        max-height: 280px;
        object-fit: contain;
    }
    html[data-design="technical"] .hero-copy {
        font-size: 16px;
        padding: 16px;
    }
    .layout {
        display: flex;
        flex-direction: column;
        padding: 16px;
    }
    .layout aside,
    .layout main {
        width: 100%;
        min-width: 0;
    }
    html[data-design="technical"] aside details {
        margin-bottom: 8px;
    }
    html[data-design="technical"] aside summary {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px;
    }
    aside summary::after {
        content: "+";
        font-size: 20px;
        line-height: 1;
    }
    aside details[open] > summary::after {
        content: "−";
    }
    html[data-design="technical"] aside li > a {
        font-size: 14px;
        padding: 12px;
        min-height: 44px;
    }
    html[data-design="technical"] main {
        padding: 16px;
    }
    .prose {
        overflow-wrap: anywhere;
        overflow-x: visible;
    }
    .prose p {
        text-align: left !important;
    }
    .prose img,
    .prose img[style*="float"] {
        max-width: 100% !important;
        height: auto !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .prose video,
    .prose iframe {
        max-width: 100% !important;
    }
    .prose video {
        height: auto !important;
    }
    .prose table {
        font-size: 14px;
    }
    .table-scroll {
        margin: 16px 0;
    }
        .table-scroll > table { min-width: 100%; }
    .table-scroll > table[border="1"] { overflow-wrap: normal; }
    .prose table[border="0"],
    .prose table[border="0"] > tbody,
    .prose table[border="0"] > tbody > tr,
    .prose table[border="0"] > tbody > tr > td {
        display: block;
        width: 100% !important;
        height: auto !important;
    }
    .prose table[border="0"] td { padding: 12px 0; font-size: 16px; }
    .album-group { padding: 8px 0; }
    .album-images {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .album-images a {
        display: block;
    }
    .album-images img {
        width: 100%;
    }
    .gallery-section .gallery {
        gap: 12px;
    }
    .gallery-section figure {
        flex-basis: 160px;
    }
    .gallery-section img {
        width: 160px;
        height: 120px;
        object-fit: contain;
    }
    input,
    textarea,
    select {
        font-size: 16px;
    }
    .form-section .button {
        width: 100%;
        white-space: normal;
        min-height: 44px;
    }
    footer .prose {
        overflow-wrap: anywhere;
    }
    footer .prose td {
        padding: 8px 0;
    }
    .footer-links {
        gap: 8px 20px;
    }
    .footer-links a {
        padding: 8px 0;
    }
}