/* ==========================================================================
   style-mobile.css — ≤480px. Narrow-phone refinements over tablet.css.
   ========================================================================== */
/* ==========================================================================
   HEADER + HERO — narrow phones: ≤480px
   Put this in style-mobile.css
   ========================================================================== */

@media screen and (max-width: 480px) {

    :root {
        --header-h: 5.95rem;
    }

    /* Header */
    .siteHeader .headerInner.mobile {
        min-height: var(--header-h);
        padding: 1.15rem 1.25rem;
    }

    .siteHeader .headerInner.mobile .logoArea {
        width: 10.75rem;
    }

    .siteHeader .hamburgerBtn {
        width: 2.75rem;
        height: 2.15rem;
        padding: 0.3rem;
    }

    .siteHeader .hamburgerBar {
        height: 0.1875rem;
    }

    .siteHeader .hamburgerBtn.isActive .hamburgerBar:nth-child(1) {
        transform: translateY(0.58rem) rotate(45deg);
    }

    .siteHeader .hamburgerBtn.isActive .hamburgerBar:nth-child(3) {
        transform: translateY(-0.58rem) rotate(-45deg);
    }

    .siteHeader .mobileMenu {
        width: 100%;
        padding: 5.75rem 1.25rem 1.5rem;
    }

    .siteHeader .mobileMenu a {
        font-size: 1rem;
        padding: 0.8125rem 0.5rem;
    }

    /* Hero */
    .heroTop {
        height: clamp(29.5rem, calc(100svh - var(--header-h)), 34rem);
        min-height: 29.5rem;
    }

    .heroTop .heroVideo {
        object-position: center center;
    }

    .heroTop .heroImage {
        object-position: 52% center;
    }

    .heroTop .heroContent {
        gap: 1.25rem;
        padding: 6rem 0.875rem 2rem;
    }

    .heroTop .heroTitle {
        font-size: clamp(3rem, 13vw, 3.9rem);
        letter-spacing: 0.035em;
        text-shadow: 0 0.16rem 0.42rem rgba(0, 0, 0, 0.24);
    }

    .heroTop .heroTitleSm {
        font-size: 0.38em;
        margin-bottom: 0.34em;
    }

    .heroTop .heroCta {
        width: min(20.5rem, 82vw);
        height: 4rem;
        padding: 0 1rem;

        font-size: 1rem;
        border-width: 0.25rem;
        border-radius: 1.75rem;
        gap: 0.625rem;
    }

    .heroTop .heroCtaArrow {
        border-top-width: 0.47rem;
        border-bottom-width: 0.47rem;
        border-left-width: 0.68rem;
    }

     /* ======================================================================
       NEWS — narrow phones
       ====================================================================== */

    .newsSection {
        padding: 2.5rem 0.85rem 5.7rem;
    }

    .newsSection::after {
        height: 4.8rem;
        background-size: auto 100%;
        background-position: center bottom;
    }

    .newsSection .newsHeader {
        margin-bottom: 1.7rem;
    }

    .newsSection .newsKicker {
        font-size: 0.78rem;
        margin-bottom: 0.3rem;
    }

    .newsSection .newsHeading {
        font-size: 2.65rem;
    }

    .newsSection .newsCarousel {
        gap: 0.3rem;
        max-width: 100%;
    }

    .newsSection .newsViewport {
        overflow: hidden;
    }

    .newsSection .newsTrack {
        gap: 0.75rem;
    }

    .newsSection .newsCard {
        flex-basis: 100%;
        min-height: 17rem;
        padding: 1.15rem 1rem 1rem;
    }

    .newsSection .newsDate {
        font-size: 0.9rem;
        margin-bottom: 0.65rem;
    }

    .newsSection .newsTitle {
        font-size: 1.05rem;
        line-height: 1.42;
        margin-bottom: 0.9rem;
    }

    .newsSection .newsTitle a {
        -webkit-line-clamp: 3;
    }

    .newsSection .newsExcerpt {
        font-size: 0.86rem;
        line-height: 1.7;
    }

    .newsSection .newsReadMore {
        font-size: 0.84rem;
    }

    .newsSection .newsArrow {
        width: 1.75rem;
        height: 3rem;
    }


    /* ======================================================================
       ABOUT — narrow phones
       ====================================================================== */

    .aboutSection {
        padding: 2.7rem 1rem 3.5rem;
    }

    .aboutSection .aboutWave {
        display: none;
    }

    .aboutSection .aboutInner {
        max-width: 24rem;
    }

    .aboutSection .aboutKicker {
        font-size: 0.82rem;
        margin-bottom: 0.6rem;
    }

    .aboutSection .aboutLogo {
        width: 11.5rem;
        margin-bottom: 1.2rem;
    }

    .aboutSection .aboutHeading {
        max-width: 22rem;
        margin-bottom: 1.2rem;
        line-height: 1.22;
    }

    .aboutSection .aboutWordSm {
        font-size: 1.35rem;
    }

    .aboutSection .aboutWordLg {
        font-size: 2rem;
    }

    .aboutSection .aboutDescription {
        max-width: 22rem;
        font-size: 0.86rem;
        line-height: 1.8;
        letter-spacing: 0.01em;
    }

    .aboutSection .aboutDescription br {
        display: none;
    }


    /* ======================================================================
       VIDEO — narrow phones
       ====================================================================== */

    .videoSection {
        min-height: 28rem;
    }

    .videoSection .videoSectionBg {
        object-position: center top;
        opacity: 0.82;
    }

    .videoSection::after {
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.92) 0%,
                rgba(0, 0, 0, 0.78) 58%,
                rgba(0, 0, 0, 0.55) 100%
            );
    }

    .videoSection .videoContent {
        max-width: none;
        width: 100%;
        margin-left: 0;
        padding: 4.5rem 1.4rem 4rem;
        box-sizing: border-box;
    }

    .videoSection .videoHeading {
        margin-bottom: 1.1rem;
    }

    .videoSection .videoHeadingLarge {
        font-size: 3rem;
    }

    .videoSection .videoHeadingSmall {
        font-size: 1.25rem;
    }

    .videoSection .videoDescription {
        font-size: 0.82rem;
        line-height: 1.85;
        letter-spacing: 0.04em;
    }

    .videoSection .videoCta {
        width: 13.75rem;
        height: 3.25rem;
        margin-top: 1.8rem;
        padding: 0 1.25rem;
        font-size: 0.9rem;
        border-radius: 0.5rem;
    }

    .videoSection .videoCtaArrow {
        font-size: 0.86rem;
    }
   /* ==========================================================================
   SERVICES/PRODUCTS — narrow phones
   ========================================================================== */

.servicesSection {
    min-height: 34rem;
    padding: 4.4rem 0.75rem 2.3rem;
    gap: 1.5rem;
}

.servicesSection::before {
    height: 4.6rem;
    background-size: auto 100%;
    background-position: center top;
}

.servicesSection::after {
    top: 45.5%;
    left: 50%;

    width: 52rem;
    max-width: none;
    aspect-ratio: 1728 / 760;

    background-size: contain;
    background-position: center center;

    transform: translate(-50%, -50%);
}

.servicesSection .servicesTop {
    max-width: 100%;
}

.servicesSection .servicesKicker {
    font-size: 0.95rem;
}

.servicesSection .servicesHeading {
    font-size: 1.65rem;
    line-height: 1.25;
}

.servicesSection .servicesDescription {
    max-width: 22rem;
    font-size: 1rem;
    line-height: 1.55;
}

.servicesSection .servicesCta {
    width: min(24rem, 82vw);
    height: 3.7rem;
    padding: 0 1.5rem;
    font-size: 1rem;
}

.servicesSection .servicesCtaArrow {
    font-size: 1.35rem;
}


/* ==========================================================================
   CONCEPT — narrow phones
   ========================================================================== */

.conceptSection {
    min-height: 31rem;
    padding: 13.2rem 1rem 2rem;
    background-position: center top;
}

.conceptSection .conceptInner {
    gap: 0.65rem;
}

.conceptSection .conceptKicker {
    font-size: 0.9rem;
}

.conceptSection .conceptLg {
    font-size: 2rem;
}

.conceptSection .conceptSm {
    font-size: 1.375rem;
}

.conceptSection .conceptDescription {
    line-height: 1.85;
}

.conceptSection .conceptEmph {
    font-size: 1.125rem;
}

.conceptSection .conceptLite {
    font-size: 0.875rem;
}

.conceptSection .conceptCta {
    width: 14rem;
    height: 3.2rem;
    padding: 0 1.5rem;
    font-size: 0.9375rem;
}


/* ==========================================================================
   OTHER WORKS — narrow phones
   ========================================================================== */

.otherworksSection {
    padding: 2.5rem 0.75rem 6.4rem;
    background-position: center top;
}

.otherworksSection::after {
    height: 5.2rem;
    background-size: auto 100%;
    background-position: center bottom;
}

.otherworksSection .otherworksInner {
    max-width: 100%;
    gap: 0.95rem;
}

.otherworksSection .otherworksKicker {
    font-size: 0.9375rem;
}

.otherworksSection .otherworksHeading {
    font-size: 1.25rem;
    line-height: 1.45;
}

.otherworksSection .otherworksAccent {
    font-size: 1.5rem;
}

.otherworksSection .otherworksGrid {
    gap: 1.6rem;
    max-width: 100%;
    margin-top: 1.4rem;
}

.otherworksSection .otherworksLabel {
    height: 3.25rem;
}

.otherworksSection .otherworksLabelTab {
    width: 2.25rem;
}

.otherworksSection .otherworksLabelText {
    font-size: 0.9375rem;
}

.otherworksSection .otherworksCardBody {
    height: 9.5rem;
    padding: 0.8rem;
}

.otherworksSection .otherworksCardDesc {
    margin: 0.85rem 0 0.85rem;
    font-size: 0.8125rem;
    line-height: 1.6;
}

.otherworksSection .otherworksCardCta {
    width: 13.5rem;
    height: 2.85rem;
    padding: 0 1.25rem;
    font-size: 1rem;
}

/* ==========================================================================
   FOOTER BRANCHES — narrow phones
   ========================================================================== */

.siteFooter .footerBranches {
    background-position: center top;
}

.siteFooter .footerBranches::before {
    background: rgba(255, 255, 255, 0.16);
}

.siteFooter .footerBranchesInner {
    padding: 3rem 0.75rem 3rem;
}

.siteFooter .footerMainLogo {
    width: 12rem;
    margin-bottom: 2rem;
}

.siteFooter .branchGrid {
    gap: 1.85rem;
}

.siteFooter .branchCard {
    width: 100%;
}

.siteFooter .branchLabel {
    min-width: 0;
    width: 51%;
    height: 4.1rem;
    margin: 0 0 -0.15rem 0;
    padding: 0 1rem;

    font-size: 1.2rem;
    letter-spacing: 0.1em;
}

.siteFooter .branchDetails {
    min-height: 9rem;
    padding: 1.3rem 1.25rem 1.15rem;

    font-size: 0.95rem;
    line-height: 1.75;
    letter-spacing: 0.025em;
}


/* ==========================================================================
   YOUTUBE — narrow phones
   ========================================================================== */

.youtubeSection .youtubeLink {
    height: 16.8rem;
    min-height: 16.8rem;

    background-size: auto 100%;
    background-position: center center;
}

.youtubeSection .youtubeLink::before {
    background-size: auto 100%;
    background-position: center center;
}

.youtubeSection .youtubeText {
    max-width: 18rem;
    padding: 2.7rem 0 0 8%;
}

.youtubeSection .youtubeKicker {
    margin-bottom: 0.55rem;
    font-size: 0.76rem;
    letter-spacing: 0.14em;
}

.youtubeSection .youtubeHeading {
    display: flex;
    align-items: baseline;
    gap: 0.18rem;
}

.youtubeSection .youtubeHeadingLg {
    font-size: 2.25rem;
}

.youtubeSection .youtubeHeadingSm {
    font-size: 1.05rem;
}

.youtubeSection .youtubeThumbs {
    top: 45.8%;
    height: 17%;
    opacity: 0.42;
}

.youtubeSection .youtubeThumbsTrack {
    animation-duration: 18s;
}

.youtubeSection .youtubeThumbsTrack img {
    width: 11rem;
}
/* ==========================================================================
   FOOTER CONTACT — narrow phones
   ========================================================================== */

.siteFooter .footerContact {
    padding: 2.8rem 1rem 2.5rem;
}

.siteFooter .footerContactInner {
    max-width: 100%;
}

.siteFooter .contactKicker {
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

.siteFooter .contactHeading {
    font-size: 1.85rem;
    margin-bottom: 1.25rem;
}

.siteFooter .contactPhone {
    gap: 0.55rem;
    margin-bottom: 1.45rem;
    font-size: 2.7rem;
    letter-spacing: 0.01em;
}

.siteFooter .contactPhoneIcon {
    width: 1.75rem;
}

.siteFooter .contactCta {
    width: min(25rem, 86vw);
    height: 4.25rem;
    padding: 0 1.35rem;
    gap: 0.9rem;

    font-size: 1.05rem;
    border-radius: 2.25rem;
}

.siteFooter .contactCtaIcon {
    width: 1rem;
}

.siteFooter .contactChar {
    width: 11.8rem;
    margin-top: 1.6rem;
}


/* ==========================================================================
   FOOTER NAV — narrow phones
   ========================================================================== */

.siteFooter .footerNav {
    padding: 1.8rem 1rem 1.9rem;
}

.siteFooter .footerNavInner {
    align-items: flex-start;
    gap: 1.25rem;
    text-align: left;
}

.siteFooter .footerSmallLogo {
    width: 8.35rem;
}

.siteFooter .footerPrivacy {
    align-self: center;
    margin-top: -4.5rem;
    margin-left: 5.5rem;
}

.siteFooter .footerPrivacy a {
    font-size: 0.95rem;
    font-weight: 700;
}


/* ==========================================================================
   FOOTER COPYRIGHT / BACK TO TOP — narrow phones
   ========================================================================== */

.siteFooter .footerCopyright {
    min-height: 3.85rem;
    padding: 0.8rem 4.3rem 0.8rem 1rem;
    justify-content: flex-start;
}

.siteFooter .copyrightText {
    font-size: 0.82rem;
    line-height: 1.35;
    letter-spacing: 0.04em;
    text-align: left;
}

.backToTopBtn {
    right: 1rem;
    bottom: 0.55rem;

    width: 3.35rem;
    height: 3.35rem;
}
    /* Subpage hero — phone sizing */
    .subHero { height: 12.5rem; }
    .subHero .subHeroTitle { font-size: 1.75rem; }
    .subHero .subHeroChar { right: 6%; height: 75%; max-width: 6rem; }

    /* Breadcrumbs — smallest */
    .breadcrumbs .breadcrumbsList {
        padding: 0.625rem 0.75rem;
        font-size: 0.75rem;
        gap: 0.25rem;
    }

    /* Section title */
    .secHeading { font-size: 1.5rem; }

    /* Philosophy */
    .philosophySection { padding: 2rem 0.75rem 2.5rem; }
    .philosophySection .philosophyCard { padding: 1.25rem 1rem; min-height: 8rem; }
    .philosophySection .philosophyCardTitle { font-size: 1.125rem; line-height: 1.4; }

    /* Greeting — phone sizing */
    .greetingSection { padding: 2rem 0.75rem 2.5rem; }
    .greetingSection .greetingText p { font-size: 0.8125rem; }
    .greetingSection .greetingText { gap: 1rem; }

    /* Profile */
    .profileSection { padding: 2rem 0.75rem 2.5rem; }
    .profileSection .profileRow { padding: 0.875rem 0.75rem; }
    .profileSection .profileLabel { font-size: 0.75rem; }
    .profileSection .profileValue { font-size: 0.8125rem; }

    /* Officers — 1 column on phone */
    #officersS { padding: 2rem 0.75rem 2.5rem; }
    #officersS .officerCard { flex-basis: 100%; }

    /* History — tighter timeline on phone */
    #historyS { padding: 2rem 0.75rem 2.5rem; }
    #historyS .historyColumn { padding-left: 3.5rem; }
    #historyS .historyColumn::before { left: 3rem; }
    #historyS .historyYear { left: -3.5rem; width: 2.75rem; font-size: 0.8125rem; }
    #historyS .historyItem::before { top: 0.625rem; width: 0.625rem; height: 0.625rem; left: -0.75rem; }
    #historyS .historyText { font-size: 0.75rem; }

    /* Subsidies */
    #subsidiesS { padding: 2rem 0.75rem 2.5rem; }
    #subsidiesS .subsidiesCellName { font-size: 0.75rem; }

    /* Group companies */
    #groupCompaniesS { padding: 2rem 0.75rem 2.5rem; }
    #groupCompaniesS .groupCompanyDesc { font-size: 0.8125rem; }

    /* Certifications — 1 column on phone */
    #certificationsS { padding: 2rem 0.75rem 2.5rem; }
    #certificationsS .certCard { flex-basis: 100%; }
    #certificationsS .certLogo { height: 5rem; }

    /* Download */
    #downloadS { padding: 2rem 0.75rem 2.5rem; }
    #downloadS .downloadBtn { font-size: 0.875rem; padding: 0.875rem 1.25rem; }

    /* Products page — phone paddings */
    #introS, #categoriesS, #productsS, #productServicesS, #inquiryCtaS {
        padding: 2rem 0.75rem 2.5rem;
    }
    #introS .introLead { font-size: 0.875rem; }

    /* Categories — 1 per row */
    #categoriesS .catCard { flex-basis: 100%; max-width: 22rem; margin: 0 auto; }
    #categoriesS .catCardImg { width: 10rem; height: 10rem; }

    /* Products — smaller circle */
    #productsS .prodCatImg { width: 11rem; }
    #productsS .prodCatHeading { font-size: 1.1875rem; }
    #productsS .prodCatDesc { font-size: 0.8125rem; }
    #productsS .prodName { font-size: 0.875rem; }
    #productsS .prodRow { padding: 0.75rem 0.125rem; }

    /* Services — 1 per row */
    #productServicesS .pServiceCard {
        flex-basis: 100%;
        border-left: none !important;
        border-bottom: 0.0625rem solid #dcdcdc;
        padding: 1.25rem 0.75rem;
    }
    #productServicesS .pServiceCard:last-child { border-bottom: none; }

    /* Product CTA */
    #inquiryCtaS .inquiryCtaHeading { font-size: 1.25rem; }
    #inquiryCtaS .inquiryCtaBtn { width: 100%; min-width: 0; }

    /* Cases — phone tightening */
    #casesS { padding: 2rem 0.75rem 2.5rem; }
    #casesS .caseCardBody { padding: 1rem 1.25rem 1.25rem; }
    #casesS .caseTitle { font-size: 1.125rem; }
    #casesS .caseSubtitle { font-size: 0.8125rem; }
    #casesS .caseCta {
        width: 100%;
        min-width: 0;
        align-self: stretch;
        font-size: 0.8125rem;
    }

    /* Case detail — 1 column gallery on phone */
    #caseHeadS, #caseGalleryS, #caseProductS, #caseBottomnavS {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    #caseHeadS .caseHeadTitle { font-size: 1.375rem; }
    #caseHeadS .caseHeadBadge { min-width: 8rem; padding: 0.4375rem 1rem; font-size: 0.8125rem; }

    #caseGalleryS .caseGalleryItem { flex-basis: 100%; }

    #caseProductS .caseProductPill { font-size: 1.0625rem; min-width: 12.5rem; }
    #caseProductS .caseProductCard { padding: 1.25rem; }
    #caseProductS .caseProductImages { max-height: 12rem; }
    #caseProductS .caseProductImages img { max-height: 12rem; }
    #caseProductS .caseProductBtn { font-size: 0.9375rem; min-width: 12rem; padding: 0.875rem 1.5rem; }

    #caseBottomnavS .caseBottomBtn { font-size: 0.875rem; padding: 0.875rem 1rem; border-radius: 2rem; }

    /* News list — phone sizing */
    #newsListS { padding: 2rem 0.75rem 2.5rem; }
    #newsListS .newsRow { padding: 0.75rem 0.875rem; gap: 0.625rem; }
    #newsListS .newsRowDate { font-size: 0.75rem; min-width: 4.75rem; }
    #newsListS .newsRowCategory { font-size: 0.625rem; min-width: 5.5rem; padding: 0.25rem 0.5rem; }
    #newsListS .newsRowTitle { font-size: 0.8125rem; }


    /* Single news post — phone */
    #articleS { padding: 1.5rem 0.75rem 2rem; }
    #articleS .articleMeta { flex-wrap: wrap; gap: 0.625rem; }
    #articleS .articleTitle { font-size: 1.125rem; padding-bottom: 1rem; }
    #articleS .articleBody { font-size: 0.8125rem; }

    #shareS { padding: 1.5rem 0.75rem 1.25rem; }
    #shareS .shareButtons { gap: 0.5rem; }
    #shareS .shareBtn { min-width: 6.5rem; font-size: 0.6875rem; padding: 0.5625rem 0.75rem; }

    #postNavS { padding: 1.25rem 0.75rem; }
    #postNavS .postNavBtn { padding: 0.875rem 1rem; }
    #postNavS .postNavTitle { font-size: 0.8125rem; }


    /* Withwater — phone */
    #cycleS, #solutionS { padding: 2rem 0.75rem 2.5rem; gap: 2rem; }
    .cycleBanner, .solutionBanner { padding: 0.75rem 1rem; border-radius: 1.5rem; }
    .cycleBannerTitle, .solutionBannerTitle { font-size: 0.9375rem; }
    .cycleDecor, .solutionDecor { display: none; }
    .cycleCardTitle, .solutionCardTitle { font-size: 1.125rem; }
    .cycleCardSubtitle { font-size: 0.8125rem; }
    .solutionCardSubtitle { font-size: 0.875rem; }
    .cycleCardCopy, .solutionCardCopy { font-size: 0.8125rem; line-height: 1.9; }
    .solutionFigure { padding: 0.75rem; }


    /* Permtest — phone */
    #permtestIntroS { padding: 2rem 0.75rem 1.5rem; }
    #permtestIntroS .permtestIntroTitle { font-size: 1.25rem; }
    #permtestIntroS .permtestIntroCopy { font-size: 0.8125rem; line-height: 1.9; }
    .pillBannerSection { padding: 2rem 0.75rem 2.5rem; }
    .pillBanner { padding: 0.75rem 1rem; border-radius: 1.5rem; }
    .pillBanner .pillBannerTitle { font-size: 0.9375rem; }
    .pillCard { padding: 1rem; }
    .pillCardTextImages .pillCardImg { flex-basis: 100%; }
    .pillCardImageText .pillCardList,
    .pillCardTextImages .pillCardCopy,
    .pillCardTextOnly,
    .pillSubCard .pillSubList,
    .pillSubCard .pillSubCopy { font-size: 0.8125rem; }


    /* Method — phone */
    .pageIntroSection { padding: 2rem 0.75rem 1.5rem; }
    .pageIntroSection .pageIntroTitle { font-size: 1.25rem; }
    .pageIntroSection .pageIntroCopy { font-size: 0.8125rem; line-height: 1.9; }

    #stepsS .methodStepCard { padding: 1rem; }
    #stepsS .methodStepHead { gap: 0.75rem; }
    #stepsS .methodStepNum { width: 2.25rem; height: 2.25rem; font-size: 1.125rem; }
    #stepsS .methodStepTitle { font-size: 0.9375rem; }
    #stepsS .methodStepEmph { font-size: 0.875rem; }
    #stepsS .methodStepList,
    #stepsS .methodStepNote { font-size: 0.75rem; line-height: 1.9; }

    #maintenanceS .maintenanceIntro,
    #maintenanceS .inspectionCopy,
    #maintenanceS .maintenanceNote { font-size: 0.8125rem; }
    #maintenanceS .maintenanceBoxLetter { top: 0.75rem; left: 0.75rem; width: 2.5rem; height: 2.5rem; font-size: 1.125rem; }
    #maintenanceS .maintenanceBox { padding: 0.875rem 1rem 0.875rem 3.5rem; }

    #inspectionS .inspectionCopy { font-size: 0.8125rem; }

    /* FAQ — compact phone layout */
    #faqTabsS { padding: 1.5rem 0.75rem 0.75rem; }
    #faqTabsS .faqTabsInner { gap: 0.375rem; }
    #faqTabsS .faqTab { min-width: 0; flex: 0 1 auto; padding: 0.5rem 0.875rem; font-size: 0.8125rem; }
    #faqListS { padding: 0.75rem 0.75rem 2.5rem; }
    #faqListS .faqList { gap: 0.75rem; }
    #faqListS .faqCatHead { margin: 1.25rem 0 0.25rem; }
    #faqListS .faqCatHeading { font-size: 1.125rem; }
    #faqListS .faqItem { padding: 0.875rem 1rem; gap: 0.625rem; border-radius: 0.625rem; }
    #faqListS .faqRow { gap: 0.625rem; }
    #faqListS .faqBadge { width: 1.75rem; height: 1.75rem; font-size: 0.875rem; }
    #faqListS .faqQuestion { padding-top: 0.125rem; font-size: 0.9375rem; line-height: 1.55; }
    #faqListS .faqAnswer { padding-top: 0.125rem; font-size: 0.8125rem; line-height: 1.8; }

    /* SDGs — compact phone layout */
    #sdgsIntroS { padding: 2rem 0.75rem 2.25rem; }
    #sdgsIntroS .sdgsIntroPlatform { max-width: 15rem; }
    #sdgsGoalsS { padding: 2rem 0.75rem 2.5rem; }
    #sdgsGoalsS .sdgsGoalCard { padding: 1.25rem 1rem; gap: 1rem; }
    #sdgsGoalsS .sdgsGoalMedia { max-width: 9rem; }
    #sdgsGoalsS .sdgsGoalMediaStack { flex-direction: column; max-width: 9rem; }
    #sdgsGoalsS .sdgsGoalMediaStack img { max-height: none; }
    #sdgsGoalsS .sdgsGoalBadge { min-width: 5.5rem; padding: 0.375rem 0.875rem; font-size: 0.8125rem; }
    #sdgsGoalsS .sdgsGoalTitle { font-size: 0.9375rem; line-height: 1.55; }
    #sdgsGoalsS .sdgsGoalDesc { font-size: 0.75rem; line-height: 1.9; }

    /* Tech guidelines — compact phone */
    #designFlowS { padding: 1.75rem 0.75rem 2.25rem; }
    #designFlowS .designFlowNote { font-size: 0.75rem; margin-top: -0.5rem; }
    #designFlowS .designFlowStep { padding: 0.875rem 1rem; gap: 0.875rem; border-radius: 0.625rem; }
    #designFlowS .designFlowNum { width: 2.25rem; height: 2.25rem; font-size: 1.0625rem; }
    #designFlowS .designFlowTitle { font-size: 0.9375rem; }
    #designFlowS .designFlowList { font-size: 0.75rem; line-height: 1.85; }
    #fieldTestS { padding: 1.75rem 0.75rem 2.25rem; gap: 1.25rem; }
    #fieldTestS .fieldTestDesc { font-size: 0.8125rem; line-height: 1.9; }
    #fieldTestS .fieldTestCta { min-width: 0; width: 100%; max-width: 18rem; padding: 0.875rem 1rem; font-size: 0.875rem; }

    /* Terminology — compact phone */
    #terminologyS { padding: 1.75rem 0.75rem 2.25rem; }
    #terminologyS .termCard { padding: 0.875rem 1rem; border-radius: 0.625rem; }
    #terminologyS .termTitle { font-size: 0.9375rem; }
    #terminologyS .termDesc { font-size: 0.75rem; line-height: 1.85; }
    #terminologyS .termSubList { gap: 0.375rem; }
    #terminologyS .termSubHead,
    #terminologyS .termSubUnit { font-size: 0.75rem; }

    /* Privacy — compact phone */
    #privacyS { padding: 1.75rem 0.75rem 2.25rem; }
    #privacyS .privacySubtitle { font-size: 1rem; }
    #privacyS .privacyIntro { font-size: 0.75rem; line-height: 1.85; }
    #privacyS .privacyItem { padding: 0.875rem 1rem; }
    #privacyS .privacyItemTitle { font-size: 0.875rem; }
    #privacyS .privacyItemDesc { font-size: 0.75rem; line-height: 1.85; }
    #privacyS .privacyContactTitle { font-size: 1rem; }
    #privacyS .privacyContactDesc { font-size: 0.75rem; }
    #privacyS .privacyContactCo { font-size: 0.9375rem; }
    #privacyS .privacyContactTel { font-size: 1.125rem; }

    /* Product detail pages — phone tweaks */
    .productPage .productOverview { padding: 1.5rem 0.75rem 1.5rem; gap: 1.25rem; }
    .productPage .productOverviewTitle { font-size: 1.25rem; }
    .productPage .productOverviewDesc { font-size: 0.8125rem; line-height: 1.85; }
    .productPage .productOverviewNote { font-size: 0.6875rem; padding: 0.625rem 0.75rem; }

    .productPage .productSpecs { padding: 0.25rem 0.75rem 0.875rem; }
    .productPage .productSpecsTitle { font-size: 0.9375rem; }
    .productPage .productSpecTable { font-size: 0.6875rem; min-width: 28rem; }
    .productPage .productSpecTable thead th,
    .productPage .productSpecTable tbody th,
    .productPage .productSpecTable tbody td { padding: 0.4375rem 0.375rem; }

    .productPage .productAcc { padding: 1.25rem 0.75rem 1rem; }
    .productPage .productAccHeading { font-size: 0.9375rem; }
    .productPage .productAccLead { font-size: 0.75rem; }
    .productPage .productAccMedia { max-width: 16rem; }

    .productPage .productImageLabeled { flex: 1 1 100%; }
    .productPage .productImageLabeled img { max-width: 18rem; }
    .productPage .productImageLabeledLabel { font-size: 0.8125rem; }

    .productPage .productPdfRow { gap: 0.5rem; }
    .productPage .productPdfBtn { flex: 1 1 100%; padding: 0.625rem 0.875rem; font-size: 0.75rem; }

    .productPage .productInstallations { padding: 1.5rem 0.75rem 1.5rem; }
    .productPage .productInstallationsTitle { font-size: 1rem; }
    .productPage .productInstallationsTable { font-size: 0.6875rem; min-width: 26rem; }
    .productPage .productInstallationsTable thead th,
    .productPage .productInstallationsTable tbody td { padding: 0.5rem 0.625rem; }

    .productPage .productRelated { padding: 1.5rem 0.75rem 0.5rem; }
    .productPage .productRelatedTitle { font-size: 1rem; }
    .productPage .productRelatedCard { padding: 0.75rem 1rem; border-left-width: 0.25rem; }
    .productPage .productRelatedCardTitle { font-size: 0.875rem; }
    .productPage .productRelatedCardLink { padding-top: 0.625rem; font-size: 0.75rem; }

    .productPage .productBackWrap { padding: 0.875rem 0.75rem 2rem; }
    .productPage .productBack { padding: 0.75rem 1rem; font-size: 0.875rem; }

    /* Contact / brochure form pages — phone */
    .contactPage .phoneBanner { padding: 1rem 0.75rem; }
    .contactPage .phoneBannerLabel { font-size: 0.8125rem; }
    .contactPage .phoneBannerNumber { font-size: 1.5rem; }
    .contactPage .phoneBannerHours { font-size: 0.75rem; }

    .contactPage .stepBarItem { font-size: 0.6875rem; padding: 0.5rem 0.25rem; }
    .contactPage .stepBarArrow { font-size: 0.875rem; }

    .contactPage .contactFormSection { padding: 0.5rem 0.75rem 2rem; }
    .contactPage .contactFormLabel { font-size: 0.875rem; }
    .contactPage .contactFormInput .wpcf7-form-control,
    .contactPage input[type="text"]:not(.wpcf7-submit),
    .contactPage input[type="email"]:not(.wpcf7-submit),
    .contactPage input[type="tel"]:not(.wpcf7-submit),
    .contactPage select,
    .contactPage textarea { padding: 0.75rem 0.875rem; font-size: 0.875rem; }

    .contactPage .thanksHeading { font-size: 1.0625rem; }
    .contactPage .thanksPhoneBox { padding: 1.125rem 1rem; }
    .contactPage .thanksPhoneNumber { font-size: 1.375rem; }
}