/* ==========================================================================
   tablet.css — tablet range: ≤1280px.
   Engages hamburger menu, stacks footer / branches / forms to single column.
   Covers tablet AND mobile (style-mobile.css narrows further at ≤480px).
   ========================================================================== */

/* ==========================================================================
   HEADER + HERO — tablet/mobile base: ≤1280px
   Put this in tablet.css
   ========================================================================== */

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

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

    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    .desktop {
        display: none !important;
    }

    .mobile {
        display: block;
    }

    body.navOpen {
        overflow: hidden;
        touch-action: none;
    }

    /* Header */
    header.siteHeader {
        position: sticky;
        top: 0;
        background: var(--color-yellow);
        box-shadow: none;
    }

    .siteHeader .headerInner.mobile {
        display: flex;
        align-items: center;
        justify-content: space-between;

        min-height: var(--header-h);
        padding: 1.25rem 1.75rem;
        box-sizing: border-box;

        grid-template-columns: none;
        grid-template-rows: none;
    }

    .siteHeader .headerInner.mobile .logoArea {
        position: static;
        grid-column: auto;
        grid-row: auto;

        width: 13.75rem;
    }

    .siteHeader .hamburgerBtn {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        width: 3rem;
        height: 2.35rem;
        padding: 0.35rem;
        box-sizing: border-box;

        background: transparent;
        border: none;
        cursor: pointer;

        position: relative;
        z-index: calc(var(--z-menu) + 10);
        -webkit-tap-highlight-color: transparent;
    }

    .siteHeader .hamburgerBar {
        display: block;
        width: 100%;
        height: 0.2rem;

        background: var(--color-logo);
        border-radius: 0.125rem;

        transition:
            transform 0.3s var(--ease),
            opacity 0.2s var(--ease);
        transform-origin: center;
    }

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

    .siteHeader .hamburgerBtn.isActive .hamburgerBar:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

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

    /* Mobile menu */
    .siteHeader .mobileMenu {
        display: block;

        position: fixed;
        top: 0;
        right: 0;
        z-index: var(--z-menu);

        width: min(85%, 22rem);
        max-width: 100%;
        height: 100dvh;

        padding: 6rem 1.5rem 2rem;
        box-sizing: border-box;

        background: var(--color-yellow);
        box-shadow: -0.25rem 0 1.25rem rgba(0, 0, 0, 0.18);

        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;

        transform: translateX(100%);
        transition: transform 0.35s var(--ease);
    }

    .siteHeader .mobileMenu.isOpen {
        transform: translateX(0);
    }

    .siteHeader .mobileMenu ul {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;

        margin: 0;
        padding: 0;
        list-style: none;
    }

    .siteHeader .mobileMenu li {
        border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.08);
    }

    .siteHeader .mobileMenu a {
        display: block;

        padding: 0.875rem 0.5rem;

        color: var(--color-text);
        font-size: 1.0625rem;
        font-weight: 500;
        line-height: 1.5;
        text-decoration: none;

        transition:
            background 0.2s var(--ease),
            padding-left 0.2s var(--ease),
            color 0.2s var(--ease);
    }

    .siteHeader .mobileMenu a:hover,
    .siteHeader .mobileMenu a:focus,
    .siteHeader .mobileMenu li.active a {
        padding-left: 1rem;
        background: var(--color-yellow-alt);
        color: var(--color-logo);
    }

    body.navOpen::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: var(--z-backdrop);

        background: rgba(0, 0, 0, 0.45);
        animation: fadeIn 0.3s var(--ease) forwards;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Hero */
    .heroTop {
        aspect-ratio: auto;
        height: clamp(30rem, calc(100svh - var(--header-h)), 37.5rem);
        min-height: 30rem;
        background: #42c4c9;
    }

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

    .heroTop .heroImage {
        object-fit: cover;
        object-position: center center;
    }

    .heroTop .heroContent {
        justify-content: center;
        gap: 1.5rem;

        padding: 6.25rem 1.5rem 2rem;
    }

    .heroTop .heroTitle {
        font-size: clamp(3.8rem, 10vw, 5rem);
        letter-spacing: 0.04em;
    }

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

    .heroTop .heroCta {
        width: min(20.5rem, 78vw);
        height: 4.25rem;
        padding: 0 1.25rem;

        font-size: 1.05rem;
        border-radius: 1.85rem;
        gap: 0.75rem;
    }

    .heroTop .heroCtaArrow {
        border-top-width: 0.5rem;
        border-bottom-width: 0.5rem;
        border-left-width: 0.75rem;
    }

    /* 7. Backdrop behind the menu panel */
    body.navOpen::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: var(--z-backdrop);
        animation: fadeIn 0.3s var(--ease) forwards;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

     /* ======================================================================
       NEWS — tablet/mobile base
       ====================================================================== */

    .newsSection {
        padding: 3rem 1.25rem 7.25rem;
    }

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

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

    .newsSection .newsKicker {
        font-size: 0.9rem;
        margin-bottom: 0.35rem;
    }

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

    .newsSection .newsCarousel {
        max-width: 58rem;
        gap: 0.75rem;
    }

    .newsSection .newsViewport {
        overflow: hidden;
    }

    .newsSection .newsTrack {
        gap: 1rem;
    }

    .newsSection .newsCard {
        flex-basis: calc((100% - 1rem) / 2);
        min-height: 15.5rem;
        padding: 1.15rem 1rem 1rem;
    }

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

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

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

    .newsSection .newsExcerpt {
        font-size: 0.8rem;
        line-height: 1.75;
    }

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

    .newsSection .newsArrow {
        width: 2.2rem;
        height: 4rem;
    }


    /* ======================================================================
       ABOUT — tablet/mobile base
       ====================================================================== */

    .aboutSection {
        padding: 3.4rem 1.25rem 4.75rem;
    }

    .aboutSection .aboutWave {
        display: none;
    }

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

    .aboutSection .aboutKicker {
        font-size: 0.9rem;
        margin-bottom: 0.65rem;
    }

    .aboutSection .aboutLogo {
        width: 14rem;
        margin-bottom: 1.35rem;
    }

    .aboutSection .aboutHeading {
        margin-bottom: 1.35rem;
        line-height: 1.12;
    }

    .aboutSection .aboutWordSm {
        font-size: clamp(1.65rem, 4.2vw, 2.5rem);
    }

    .aboutSection .aboutWordLg {
        font-size: clamp(2.25rem, 6vw, 3.5rem);
    }

    .aboutSection .aboutDescription {
        max-width: 38rem;
        font-size: 0.95rem;
        line-height: 1.75;
    }


    /* ======================================================================
       VIDEO — tablet/mobile base
       ====================================================================== */

    .videoSection {
        min-height: 34rem;
    }

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

    .videoSection::after {
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.9) 0%,
                rgba(0, 0, 0, 0.72) 48%,
                rgba(0, 0, 0, 0.45) 100%
            );
    }

    .videoSection .videoContent {
        max-width: 30rem;
        margin-left: 3rem;
        padding: 6.5rem 0 5rem;
    }

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

    .videoSection .videoHeadingLarge {
        font-size: clamp(3.5rem, 8vw, 5rem);
    }

    .videoSection .videoHeadingSmall {
        font-size: clamp(1.45rem, 3.4vw, 2rem);
    }

    .videoSection .videoDescription {
        font-size: 0.95rem;
        line-height: 2;
        letter-spacing: 0.06em;
    }

    .videoSection .videoCta {
        width: 16rem;
        height: 3.8rem;
        margin-top: 2.2rem;
        padding: 0 1.6rem;
        font-size: 1rem;
        border-radius: 0.58rem;
    }

    .videoSection .videoCtaArrow {
        font-size: 0.95rem;
    }
/* ==========================================================================
   SERVICES/PRODUCTS — tablet/mobile base
   ========================================================================== */

.servicesSection {
    min-height: 39rem;
    padding: 5.6rem 1rem 2.6rem;
    justify-content: space-between;
    gap: 2rem;
}

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

.servicesSection::after {
    top: 47%;
    width: 66rem;
    max-width: none;
    aspect-ratio: 1728 / 760;
    background-size: contain;
}

.servicesSection .servicesTop {
    max-width: 42rem;
}

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

.servicesSection .servicesHeading {
    font-size: 2rem;
}

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

.servicesSection .servicesCta {
    width: 24rem;
    height: 4rem;
    padding: 0 2rem;
    font-size: 1.25rem;
}

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


/* ==========================================================================
   CONCEPT — tablet/mobile base
   ========================================================================== */

.conceptSection {
    min-height: 31rem;
    padding: 13.5rem 1.25rem 2.4rem;

    justify-content: center;
    align-items: flex-end;

    background-position: center top;
    background-size: cover;
}

.conceptSection::before {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.16) 40%,
            rgba(255, 255, 255, 0.6) 100%
        );
}

.conceptSection .conceptInner {
    align-items: center;
    width: 100%;
    max-width: 100%;
    gap: 0.7rem;
    text-align: center;
}

.conceptSection .conceptKicker {
    align-self: center;
    font-size: 0.95rem;
}

.conceptSection .conceptHeading {
    text-align: center;
}

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

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

.conceptSection .conceptDescription {
    text-align: center;
    line-height: 1.8;
}

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

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

.conceptSection .conceptCta {
    align-self: center;
    width: 14rem;
    height: 3.25rem;
    padding: 0 2rem;
    font-size: 1rem;
}


/* ==========================================================================
   OTHER WORKS — tablet/mobile base
   ========================================================================== */

.otherworksSection {
    padding: 3rem 1rem 7rem;
    background-position: center top;
    background-size: cover;
}

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

.otherworksSection .otherworksInner {
    max-width: 36rem;
    gap: 1rem;
}

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

.otherworksSection .otherworksHeading {
    font-size: 1.5rem;
    line-height: 1.4;
}

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

.otherworksSection .otherworksGrid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    max-width: 28rem;
    margin-top: 1.6rem;
}

.otherworksSection .otherworksLabel {
    height: 3.5rem;
}

.otherworksSection .otherworksLabelTab {
    width: 2.5rem;
}

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

.otherworksSection .otherworksCardBody {
    height: 11rem;
}

.otherworksSection .otherworksCardDesc {
    min-height: 0;
    margin: 1rem 0 0.95rem;
    font-size: 0.875rem;
}

.otherworksSection .otherworksCardCta {
    width: 14rem;
    height: 3rem;
    font-size: 1.1rem;
    border-radius: 0.65rem;
}/* ==========================================================================
   FOOTER BRANCHES — tablet/mobile base
   ========================================================================== */

.siteFooter .footerBranches {
    min-height: 0;
    background-position: center center;
}

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

.siteFooter .footerBranchesInner {
    min-height: 0;
    max-width: 44rem;
    padding: 3.5rem 1.25rem 3.5rem;
}

.siteFooter .footerMainLogo {
    width: 14rem;
    margin-bottom: 2.5rem;
}

.siteFooter .branchGrid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;

    max-width: 100%;
    margin: 0 auto;
}

.siteFooter .branchCard {
    width: 100%;
    max-width: none;
    margin: 0;
    position: static;
}

.siteFooter .branchCard.branchCardHq,
.siteFooter .branchCard.branchCardObihiro,
.siteFooter .branchCard.branchCardKanto,
.siteFooter .branchCard.branchCardKuriyama {
    margin: 0;
}

.siteFooter .branchLabel {
    min-width: 18rem;
    height: 4.4rem;
    margin: 0 0 -0.25rem 0;
    padding: 0 1.5rem;

    font-size: 1.45rem;
}

.siteFooter .branchDetails {
    width: 100%;
    min-height: 9.5rem;
    padding: 1.55rem 1.5rem 1.35rem;

    font-size: 1rem;
    line-height: 1.75;
}


/* ==========================================================================
   YOUTUBE — tablet/mobile base
   ========================================================================== */

.youtubeSection .youtubeLink {
    aspect-ratio: auto;
    height: 25rem;
    min-height: 25rem;
    max-height: none;

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

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

.youtubeSection .youtubeText {
    max-width: 26rem;
    padding: 5rem 0 0 8%;
}

.youtubeSection .youtubeKicker {
    margin-bottom: 0.55rem;
    font-size: 0.95rem;
}

.youtubeSection .youtubeHeading {
    flex-wrap: nowrap;
}

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

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

.youtubeSection .youtubeThumbs {
    top: 45.5%;
    height: 17.5%;
}

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

.youtubeSection .youtubeThumbsTrack img {
    width: 14rem;
}
/* ==========================================================================
   FOOTER CONTACT — tablet/mobile base
   ========================================================================== */

.siteFooter .footerContact {
    min-height: 0;
    padding: 3.4rem 1.25rem 2.7rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.siteFooter .footerContact::before {
    display: none;
}

.siteFooter .footerContactInner {
    max-width: 34rem;
}

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

.siteFooter .contactHeading {
    font-size: 2.35rem;
    margin-bottom: 1.35rem;
}

.siteFooter .contactPhone {
    gap: 0.75rem;
    margin-bottom: 1.6rem;
    font-size: 3.5rem;
}

.siteFooter .contactPhoneIcon {
    width: 2.55rem;
}

.siteFooter .contactCta {
    width: min(30rem, 92vw);
    height: 4.75rem;
    padding: 0 2rem;
    gap: 1.1rem;

    font-size: 1.25rem;
    border-radius: 2.4rem;
}

.siteFooter .contactCtaIcon {
    width: 1.25rem;
}

.siteFooter .contactChar {
    position: static;
    width: 13rem;
    margin: 1.8rem auto 0;
}


/* ==========================================================================
   FOOTER NAV — tablet/mobile base
   ========================================================================== */

.siteFooter .footerNav {
    padding: 2.1rem 1.25rem 2.1rem;
}

.siteFooter .footerNavInner {
    max-width: 34rem;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;

    text-align: center;
}

.siteFooter .footerSmallLogo {
    width: 9.5rem;
}

.siteFooter .footerLinks.desktop {
    display: none !important;
}

.siteFooter .footerPrivacy {
    display: block;
}

.siteFooter .footerPrivacy a {
    display: inline-block;
    padding: 0.35rem 0.75rem;

    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

.siteFooter .footerPrivacy a:hover {
    color: var(--color-logo);
}


/* ==========================================================================
   FOOTER COPYRIGHT / BACK TO TOP — tablet/mobile base
   ========================================================================== */

.siteFooter .footerCopyright {
    min-height: 4rem;
    padding: 0.9rem 5rem 0.9rem 1.25rem;

    justify-content: flex-start;
}

.siteFooter .copyrightText {
    font-size: 0.85rem;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
}

.backToTopBtn {
    display: block;

    right: 1.25rem;
    bottom: 0.95rem;

    width: 3.65rem;
    height: 3.65rem;
}

body.navOpen .backToTopBtn {
    opacity: 0;
    pointer-events: none;
}
    /* Subpage hero — smaller on tablet, character moves further left */
    .subHero { height: 16rem; }
    .subHero .subHeroTitle { font-size: 2.25rem; }
    .subHero .subHeroKicker { font-size: 0.75rem; }
    .subHero .subHeroChar { right: 8%; height: 80%; max-width: 8rem; }

    /* Breadcrumbs */
    .breadcrumbs .breadcrumbsList {
        padding: 0.75rem 1rem;
        font-size: 0.8125rem;
        gap: 0.375rem;
    }

    /* Section title */
    .secTitle { margin: 0 auto 1.75rem; }
    .secHeading { font-size: 1.75rem; }
    .secKicker { font-size: 0.75rem; }

    /* Philosophy — 1 column on tablet */
    .philosophySection { padding: 2.5rem 1rem 3rem; }
    .philosophySection .philosophyCards {
        flex-direction: column;
        gap: 1rem;
        max-width: 32rem;
    }
    .philosophySection .philosophyCard {
        flex-basis: auto;
        min-height: 9rem;
        padding: 1.5rem 1.25rem;
    }
    .philosophySection .philosophyCardTitle { font-size: 1.25rem; }

    /* Greeting — tighter padding */
    .greetingSection { padding: 2.5rem 1rem 3rem; }
    .greetingSection .greetingByline { font-size: 0.875rem; }
    .greetingSection .greetingText p { font-size: 0.875rem; line-height: 1.8; }

    /* Profile — stack rows label over value to fit narrow screens */
    .profileSection { padding: 2.5rem 1rem 3rem; }
    .profileSection .profileRow {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
        padding: 1rem 1rem;
    }
    .profileSection .profileLabel {
        flex-basis: auto;
        font-size: 0.8125rem;
    }
    .profileSection .profileValue { font-size: 0.875rem; }
    .profileSection .profileNote {
        padding: 0.75rem 1rem 0.75rem 2rem;
    }
    .profileSection .profileNote p { font-size: 0.8125rem; }
    .profileSection .profileWatermark { display: none; }

    /* Officers — 2 columns on tablet */
    #officersS { padding: 2.5rem 1rem 3rem; }
    #officersS .officersGrid { gap: 1rem; }
    #officersS .officerCard { flex-basis: calc(50% - 0.5rem); max-width: none; min-height: 5rem; padding: 1.25rem 1.25rem 1.25rem 2.25rem; }
    #officersS .officerAccent { top: 1.25rem; height: 2.25rem; }

    /* History — 1 column on tablet */
    #historyS { padding: 2.5rem 1rem 3rem; }
    #historyS .historyColumns { flex-direction: column; gap: 2rem; }
    #historyS .historyColumn { max-width: 100%; padding-left: 4.5rem; }
    #historyS .historyColumn::before { left: 4rem; }
    #historyS .historyYear { left: -4.5rem; font-size: 0.9375rem; width: 3.5rem; }

    /* Subsidies — stack each row's cells vertically, hide header */
    #subsidiesS { padding: 2.5rem 1rem 3rem; }
    #subsidiesS .subsidiesHead { display: none; }
    #subsidiesS .subsidiesRow {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        padding: 0.875rem 1rem;
    }
    #subsidiesS .subsidiesCellYear { flex-basis: auto; font-size: 1rem; }
    #subsidiesS .subsidiesCellName { padding: 0; flex-basis: auto; }
    #subsidiesS .subsidiesCellOrg {
        flex-basis: auto;
        font-size: 0.75rem;
        font-weight: 700;
    }
    #subsidiesS .subsidiesCellOrg::before { content: "— "; }

    /* Group companies — 1 column on tablet */
    #groupCompaniesS { padding: 2.5rem 1rem 3rem; }
    #groupCompaniesS .groupCompanyCard { flex-basis: 100%; padding: 1.5rem 1.25rem 1.5rem 2.5rem; }
    #groupCompaniesS .groupCompanyName { font-size: 1.0625rem; }

    /* Certifications — 2 columns */
    #certificationsS { padding: 2.5rem 1rem 3rem; }
    #certificationsS .certificationsGrid { gap: 1.5rem; }
    #certificationsS .certCard { flex-basis: calc(50% - 0.75rem); max-width: none; }
    #certificationsS .certLogo { height: 6rem; }
    #certificationsS .certCaption { font-size: 0.8125rem; }

    /* Download — hide decor on tablet, button full width */
    #downloadS { padding: 2.5rem 1rem 3rem; }
    #downloadS .downloadDecor { display: none; }
    #downloadS .downloadBtn { padding: 1rem 1.5rem; font-size: 0.9375rem; }

    /* Products hero — character smaller, move toward right edge */
    .subHero.subHeroProducts .subHeroChar { right: 10%; max-width: 8rem; }

    /* Products page — overall padding */
    #introS, #categoriesS, #productsS, #productServicesS, #inquiryCtaS {
        padding: 2.5rem 1rem 3rem;
    }

    /* Categories — 2 per row on tablet */
    #categoriesS .catCard { flex-basis: 45%; max-width: none; }
    #categoriesS .catCardImg { width: 9rem; height: 9rem; }

    /* Products — stack image above text on tablet */
    #productsS .prodCat,
    #productsS .prodCatImgRight {
        flex-direction: column;
        gap: 1.5rem;
        padding: 2rem 1rem;
    }
    #productsS .prodCatImg { width: 14rem; max-width: 80%; margin: 0 auto; }
    #productsS .prodCatHeading { font-size: 1.375rem; }

    /* Product services — 2 per row */
    #productServicesS .pServicesRow { gap: 0.5rem 0; }
    #productServicesS .pServiceCard {
        flex-basis: 48%;
        border-right: none;
        border-bottom: 0.0625rem solid #dcdcdc;
        padding: 1.25rem 1rem;
    }
    #productServicesS .pServiceCard:nth-child(even) {
        border-left: 0.0625rem solid #dcdcdc;
    }
    #productServicesS .pServiceName { font-size: 1rem; }

    /* Product CTA */
    #inquiryCtaS .inquiryCtaBtn { min-width: 12rem; }

    /* Cases — 1 per row on tablet */
    #casesS { padding: 2.5rem 1rem 3rem; }
    #casesS .casesGrid { gap: 1.5rem; }
    #casesS .caseCard { flex-basis: 100%; }
    #casesS .caseCardBody { padding: 1.25rem 1.5rem 1.5rem; }
    #casesS .caseTitle { font-size: 1.25rem; }
    #casesS .caseCta { min-width: 12rem; padding: 0.625rem 1.5rem; }
    #casesS .caseBadge { min-width: 5rem; font-size: 0.75rem; }

    /* Case detail pages — 2-col gallery, stacked bottom nav */
    #caseHeadS, #caseGalleryS, #caseProductS, #caseBottomnavS {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    #caseHeadS { padding-top: 2rem; padding-bottom: 2rem; }
    #caseHeadS .caseHeadTitle { font-size: 1.75rem; }
    #caseHeadS .caseHeadSubtitle { font-size: 0.9375rem; }
    #caseHeadS .caseHeadBadge { font-size: 0.875rem; min-width: 10rem; }

    #caseGalleryS { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    #caseGalleryS .caseGalleryGrid { gap: 1rem; }
    #caseGalleryS .caseGalleryItem { flex-basis: 47%; max-width: none; min-width: 0; }

    #caseProductS { padding-top: 2.5rem; padding-bottom: 2.5rem; gap: 1.25rem; }
    #caseProductS .caseProductPill { font-size: 1.25rem; min-width: 16rem; padding: 0.875rem 1.5rem; }
    #caseProductS .caseProductCard { padding: 1.5rem; gap: 1.25rem; }

    #caseBottomnavS { padding-top: 2rem; padding-bottom: 2rem; }
    #caseBottomnavS .caseBottomBtn { flex-basis: 100%; font-size: 0.9375rem; padding: 1rem 1.5rem; }

    /* News list — wrap: date+pill on row 1, title on row 2 */
    #newsListS { padding: 2.5rem 1rem 3rem; }
    #newsListS .newsList { gap: 0.375rem; }
    #newsListS .newsRow {
        flex-wrap: wrap;
        row-gap: 0.5rem;
        padding: 0.875rem 1rem;
        min-height: 0;
    }
    #newsListS .newsRowTitle {
        flex: 1 0 100%;
        font-size: 0.875rem;
    }


    /* Single news post — stack post-nav vertically, list CTA between prev and next */
    #articleS { padding: 2rem 1rem 2.5rem; }
    #articleS .articleTitle { font-size: 1.25rem; }
    #articleS .articleBody { font-size: 0.875rem; }

    #shareS { padding: 2rem 1rem 1.5rem; }
    #shareS .shareBtn { min-width: 8.5rem; font-size: 0.75rem; padding: 0.625rem 1rem; }

    #postNavS { padding: 1.75rem 1rem; }
    #postNavS .postNavInner { flex-direction: column; gap: 0.75rem; align-items: stretch; }
    #postNavS .postNavBtn { flex-basis: auto; max-width: 100%; }
    #postNavS .postNavBtnList { min-height: 3.5rem; order: 0; }
    #postNavS .postNavBtnPrev { order: 1; }
    #postNavS .postNavBtnNext { order: 2; }
    #postNavS .postNavBtnEmpty { display: none; }


    /* Withwater — tighter cards + shift decor */
    #cycleS, #solutionS { padding: 2.5rem 1rem 3rem; gap: 2.5rem; }
    .cycleBanner, .solutionBanner { padding: 1rem 1.25rem; border-radius: 1.875rem; }
    .cycleBannerTitle, .solutionBannerTitle { font-size: 1.0625rem; }
    .cycleDecor, .solutionDecor { width: 5rem; top: 2.5rem; right: 4%; }
    .cycleCardTitle, .solutionCardTitle { font-size: 1.25rem; }
    .cycleCardSubtitle { font-size: 0.9375rem; }
    .solutionCardSubtitle { font-size: 1rem; }
    .cycleCardCopy, .solutionCardCopy { font-size: 0.875rem; line-height: 2; }
    .solutionFigure { padding: 1rem; }


    /* Permtest — stack card variants vertically on tablet */
    #permtestIntroS { padding: 2.5rem 1rem 2rem; }
    #permtestIntroS .permtestIntroTitle { font-size: 1.5rem; }
    #permtestIntroS .permtestIntroCopy { font-size: 0.875rem; line-height: 2; }
    .pillBannerSection { padding: 2.5rem 1rem 3rem; gap: 1.5rem; }
    .pillBanner { min-width: 0; width: 100%; max-width: 22rem; padding: 0.875rem 1.25rem; border-radius: 2rem; }
    .pillBanner .pillBannerTitle { font-size: 1rem; }
    .pillCard { padding: 1.5rem; }
    .pillCardImageText { flex-direction: column; gap: 1.5rem; }
    .pillCardImageText .pillCardMedia { flex-basis: auto; width: 100%; max-width: 22rem; margin: 0 auto; aspect-ratio: 1; }
    .pillCardImageText .pillCardHeading { font-size: 1rem; }
    .pillCardTextImages .pillCardImg { flex-basis: 47%; min-width: 0; }
    .pillCardTextOnly { padding: 1.25rem; font-size: 0.8125rem; }
    .pillSubCard { flex-direction: column; gap: 1.25rem; padding: 1.25rem; }
    .pillSubCard .pillSubMedia { flex-basis: auto; width: 100%; max-width: 20rem; }
    .pillSubCard .pillSubHeading { font-size: 1.125rem; }


    /* Method — stack step cards; shrink numbers */
    .pageIntroSection { padding: 2.5rem 1rem 2rem; }
    .pageIntroSection .pageIntroTitle { font-size: 1.5rem; }
    .pageIntroSection .pageIntroCopy { font-size: 0.875rem; line-height: 2; }

    #stepsS .methodStepCard { flex-direction: column; gap: 1.25rem; padding: 1.25rem; }
    #stepsS .methodStepMedia { flex-basis: auto; width: 100%; max-width: 22rem; margin: 0 auto; aspect-ratio: 380/260; }
    #stepsS .methodStepNum { width: 2.75rem; height: 2.75rem; font-size: 1.375rem; }
    #stepsS .methodStepTitle { font-size: 1.0625rem; }
    #stepsS .methodStepEmph { font-size: 0.9375rem; }

    /* Maintenance — stack boxes, horizontal scroll on tables */
    #maintenanceS .maintenanceBoxRow,
    #maintenanceS .maintenanceFlowRow { flex-direction: column; }
    #maintenanceS .maintenanceBox { min-height: 0; padding: 1rem 1.25rem 1rem 4.5rem; }
    #maintenanceS .maintenanceTable { font-size: 0.75rem; }
    #maintenanceS .maintenanceTable thead th,
    #maintenanceS .maintenanceTable tbody td { padding: 0.625rem 0.875rem; }

    /* FAQ — tabs wrap, smaller cards */
    #faqTabsS { padding: 1.75rem 1rem 0.875rem; }
    #faqTabsS .faqTabsInner { gap: 0.5rem; }
    #faqTabsS .faqTab { min-width: 6.5rem; padding: 0.625rem 1rem; font-size: 0.9375rem; border-width: 0.125rem; }
    #faqListS { padding: 1rem 1rem 3rem; }
    #faqListS .faqList { gap: 0.875rem; }
    #faqListS .faqCatHead { margin: 1.5rem 0 0.375rem; gap: 0.75rem; }
    #faqListS .faqCatBar { width: 0.3125rem; height: 1.625rem; }
    #faqListS .faqCatHeading { font-size: 1.25rem; }
    #faqListS .faqItem { padding: 1rem 1.25rem; gap: 0.75rem; }
    #faqListS .faqBadge { width: 2rem; height: 2rem; font-size: 0.9375rem; }
    #faqListS .faqQuestion { padding-top: 0.25rem; font-size: 1rem; line-height: 1.55; }
    #faqListS .faqAnswer { padding-top: 0.25rem; font-size: 0.875rem; line-height: 1.85; }

    /* SDGs — stack cards vertically, smaller icons */
    #sdgsIntroS { padding: 2.5rem 1rem 3rem; gap: 1.5rem; }
    #sdgsIntroS .sdgsIntroMedia { gap: 1rem; }
    #sdgsIntroS .sdgsIntroPlatform { max-width: 20rem; }
    #sdgsIntroS .sdgsIntroCopy { font-size: 0.8125rem; line-height: 1.9; }
    #sdgsGoalsS { padding: 2.5rem 1rem 3rem; gap: 1.25rem; }
    #sdgsGoalsS .sdgsGoalCard { flex-direction: column; padding: 1.5rem 1.25rem; gap: 1.25rem; border-radius: 0.75rem; }
    #sdgsGoalsS .sdgsGoalMedia { flex-basis: auto; width: 100%; max-width: 11rem; margin: 0 auto; }
    #sdgsGoalsS .sdgsGoalMediaStack { flex-direction: row; max-width: 22rem; }
    #sdgsGoalsS .sdgsGoalMediaStack img { max-height: 5rem; }
    #sdgsGoalsS .sdgsGoalBadge { min-width: 6.25rem; padding: 0.4375rem 1rem; font-size: 0.875rem; }
    #sdgsGoalsS .sdgsGoalTitle { font-size: 1.0625rem; }
    #sdgsGoalsS .sdgsGoalDesc { font-size: 0.8125rem; line-height: 1.9; }

    /* Tech guidelines — smaller cards, narrow CTA */
    #designFlowS { padding: 2.5rem 1rem 2.75rem; gap: 1rem; }
    #designFlowS .designFlowNote { font-size: 0.8125rem; }
    #designFlowS .designFlowStep { padding: 1rem 1.25rem; gap: 1rem; border-radius: 0.75rem; }
    #designFlowS .designFlowNum { width: 2.75rem; height: 2.75rem; font-size: 1.25rem; }
    #designFlowS .designFlowBody { padding-top: 0.125rem; gap: 0.375rem; }
    #designFlowS .designFlowTitle { font-size: 1rem; }
    #designFlowS .designFlowList { font-size: 0.8125rem; line-height: 1.85; }
    #fieldTestS { padding: 2.5rem 1rem 3rem; gap: 1.5rem; }
    #fieldTestS .fieldTestDesc { font-size: 0.875rem; line-height: 1.9; }
    #fieldTestS .fieldTestCta { min-width: 0; width: 100%; max-width: 22rem; padding: 1rem 1.25rem; font-size: 0.9375rem; }

    /* Terminology — smaller cards, smaller bar */
    #terminologyS { padding: 2.5rem 1rem 3rem; gap: 0.875rem; }
    #terminologyS .termCard { padding: 1rem 1.25rem; }
    #terminologyS .termHead { gap: 0.625rem; margin-bottom: 0.5rem; }
    #terminologyS .termBar { width: 0.3125rem; height: 1.5rem; }
    #terminologyS .termTitle { font-size: 1.0625rem; }
    #terminologyS .termDesc { font-size: 0.8125rem; line-height: 1.9; }
    #terminologyS .termSubList li::before { top: 0.625rem; }
    #terminologyS .termFigure { max-width: 26rem; }

    /* Privacy — smaller cards */
    #privacyS { padding: 2.5rem 1rem 3rem; gap: 0.875rem; }
    #privacyS .privacySubtitle { font-size: 1.125rem; }
    #privacyS .privacyIntro { font-size: 0.8125rem; line-height: 1.9; }
    #privacyS .privacyItem { padding: 1rem 1.25rem; border-radius: 0.625rem; }
    #privacyS .privacyItemHead { gap: 0.625rem; margin-bottom: 0.5rem; }
    #privacyS .privacyItemBar { width: 0.3125rem; height: 1.5rem; }
    #privacyS .privacyItemTitle { font-size: 0.9375rem; }
    #privacyS .privacyItemDesc { font-size: 0.8125rem; line-height: 1.9; }
    #privacyS .privacyNote { font-size: 0.75rem; }
    #privacyS .privacyContact { margin-top: 1.5rem; padding-top: 1.5rem; }
    #privacyS .privacyContactTitle { font-size: 1.125rem; }
    #privacyS .privacyContactDesc { font-size: 0.8125rem; line-height: 1.9; }
    #privacyS .privacyContactCo { font-size: 1rem; }
    #privacyS .privacyContactTel { font-size: 1.25rem; }

    /* Product detail pages — stack overview, scroll wide tables */
    .productPage .productOverview { flex-direction: column; padding: 2rem 1rem 1.75rem; gap: 1.5rem; }
    .productPage .productOverviewMedia { flex-basis: auto; width: 100%; }
    .productPage .productOverviewTitle { font-size: 1.5rem; }
    .productPage .productOverviewDesc { font-size: 0.875rem; line-height: 1.9; }
    .productPage .productOverviewNote { font-size: 0.75rem; }

    .productPage .productSpecs { padding: 0.5rem 1rem 1rem; overflow-x: auto; }
    .productPage .productSpecsTitle { font-size: 1.0625rem; }
    .productPage .productSpecTable { font-size: 0.75rem; min-width: 32rem; }
    .productPage .productSpecTable thead th,
    .productPage .productSpecTable tbody th,
    .productPage .productSpecTable tbody td { padding: 0.5rem 0.5rem; }

    .productPage .productAcc { padding: 1.5rem 1rem 1.25rem; }
    .productPage .productAccHeading { font-size: 1.0625rem; }
    .productPage .productAccLead { font-size: 0.8125rem; line-height: 1.85; }
    .productPage .productAccBody { flex-direction: column; gap: 1.25rem; }
    .productPage .productAccMedia { flex-basis: auto; width: 100%; max-width: 22rem; margin: 0 auto; }
    .productPage .productAccTable { width: 100%; overflow-x: auto; }

    .productPage .productImageRow { gap: 1rem; }

    .productPage .productPdfBtn { padding: 0.5rem 1rem; font-size: 0.8125rem; }

    .productPage .productInstallations { padding: 2rem 1rem 1.75rem; overflow-x: auto; }
    .productPage .productInstallationsTitle { font-size: 1.125rem; }
    .productPage .productInstallationsTable { font-size: 0.75rem; min-width: 32rem; }
    .productPage .productInstallationsTable thead th,
    .productPage .productInstallationsTable tbody td { padding: 0.625rem 0.75rem; }

    .productPage .productRelated { padding: 2rem 1rem 1rem; }
    .productPage .productRelatedTitle { font-size: 1.125rem; }
    .productPage .productRelatedGrid { gap: 1rem; }
    .productPage .productRelatedCard { flex: 1 1 100%; min-width: 0; padding: 0.875rem 1.125rem; }
    .productPage .productRelatedCardTitle { font-size: 0.9375rem; }

    .productPage .productBackWrap { padding: 1rem 1rem 2.5rem; }
    .productPage .productBack { min-width: 0; width: 100%; max-width: 20rem; padding: 0.875rem 1.25rem; font-size: 0.9375rem; }

    .productPage .productVariants { gap: 1rem; margin: 1.25rem 0; }
    .productPage .productVariant { flex: 1 1 100%; padding: 1rem; }
    .productPage .productVariantTitle { font-size: 0.9375rem; }

    .productPage .productGrid2x2 { gap: 0.75rem; }
    .productPage .productGrid3x1 { grid-template-columns: repeat(2, 1fr); }

    .productPage .featureGrid { grid-template-columns: 1fr; gap: 1rem; }
    .productPage .featureCard { padding: 1.25rem; }
    .productPage .featureCardTitle { font-size: 0.9375rem; }
    .productPage .featureCardBody { font-size: 0.8125rem; }

    .productPage .flowGrid { grid-template-columns: 1fr; gap: 1.5rem; }
    .productPage .flowColTitle { font-size: 0.9375rem; }
    .productPage .flowSteps li { padding: 0.75rem 0.875rem 0.75rem 2.625rem; font-size: 0.8125rem; }
    .productPage .flowSteps li::before { left: 0.625rem; top: 0.625rem; width: 1.375rem; height: 1.375rem; font-size: 0.75rem; }

    .productPage .caseRowTitle { font-size: 1rem; }
    .productPage .caseRowCompare { flex-direction: column; }
    .productPage .caseRowArrow { transform: rotate(90deg); font-size: 1.5rem; }

    .productPage .featureGrid.featureGrid3 { grid-template-columns: 1fr; }
    .productPage .exteriorCaseGrid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .productPage .exteriorCaseGrid figure.exteriorCaseMain { grid-row: auto; }

    /* Contact / brochure form pages — tablet */
    .contactPage .phoneBanner { padding: 1.25rem 1rem; }
    .contactPage .phoneBannerNumber { font-size: 1.875rem; }
    .contactPage .stepBar { padding: 0 1rem; gap: 0.375rem; }
    .contactPage .stepBarItem { flex: 1 1 0; min-width: 0; padding: 0.625rem 0.5rem; font-size: 0.75rem; }
    .contactPage .stepBarArrow { font-size: 1rem; }
    .contactPage .contactFormSection { padding: 0.75rem 1rem 2.5rem; }
    .contactPage .contactFormIntro { font-size: 0.8125rem; line-height: 1.85; margin-bottom: 1.5rem; }
    .contactPage .contactFormFields { gap: 1rem; }
    .contactPage .contactFormPostcode input[type="text"] { width: 7rem; }
    .contactPage .contactFormPrivacyBox { padding: 1rem 1.25rem; }
    .contactPage .contactFormPrivacyBox p { font-size: 0.75rem; }
    .contactPage .contactFormButtons input[type="submit"],
    .contactPage .contactFormButtons input[type="button"],
    .contactPage .contactFormButtons .wpcf7-submit { min-width: 0; width: 100%; max-width: 22rem; padding: 0.875rem 1.5rem; font-size: 0.9375rem; }

    .contactPage .thanksSection { padding: 2rem 1rem 2.5rem; }
    .contactPage .thanksHeading { font-size: 1.25rem; }
    .contactPage .thanksDesc { font-size: 0.8125rem; }
    .contactPage .thanksPhoneNumber { font-size: 1.75rem; }
    .contactPage .downloadCard { font-size: 0.875rem; padding: 1rem 1.25rem; }
    .productGrid2x2 figure {
        width: 100%; /* 1 column */
    }

    .productGrid2x2 img {
        height: auto;
    }
}