/* ==========================================================================
   Components CSS — Walltopia v2
   Reusable visual components that appear across multiple pages.
   ========================================================================== */

/* === Buttons & Links === */

a.wt-link,
.projects-loop .projects-loop-container .facetwp-facet-load_more_projects .facetwp-load-more,
/* Formidable's own submit-button rule is `.frm_style_formidable-style.with_frm_style
   .frm_submit button` — 3 classes + 1 type = (0,3,1). `.frm_forms` is repeated on the
   same wrapper element (harmless, just adds specificity) to reach (0,4,0), which beats
   it outright instead of tying on source order. See decisions.md Formidable specificity fix. */
.frm_forms.frm_forms.with_frm_style.with_frm_style .frm_button_submit {
    line-height: 20px;
    padding: 15px 60px;
    border: 1px solid var(--wt-red);
    display: inline-block;
    text-align: center;
    color: var(--wt-red);
    background-color: var(--wt-white);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.6s ease;
}

a.wt-link:hover,
.projects-loop .projects-loop-container .facetwp-facet-load_more_projects .facetwp-load-more:hover,
.frm_forms.frm_forms.with_frm_style.with_frm_style .frm_button_submit:hover {
    color: var(--wt-white);
    background-color: var(--wt-red);
    border-color: var(--wt-red);
    text-decoration: none;
}

a.wt-link.background-red,
a.wt-link.secondary,
.info-block-container .content a.secondary {
    background-color: var(--wt-red);
    color: var(--wt-white);
}

a.wt-link.background-red:hover,
a.wt-link.secondary:hover,
.info-block-container .content a.secondary:hover {
    background-color: #c31a20;
}

a.wt-link.background-transparent,
.background-transparent {
    background-color: transparent;
}

.cta-button {
    display: block;
    float: right;
    padding: 0 25px;
    border: 1px solid var(--wt-white);
    border-radius: 12px;
}

.cta-button:hover {
    background-color: var(--wt-red);
    border-color: var(--wt-red);
    color: var(--wt-white);
}

.hover-effect { transition: all 0.6s ease; }
.hover-effect-fast { transition: all 0.3s ease; }

.wt-title {
    font-size: var(--wt-fs-h3);
    line-height: 1;
    margin: 0;
    text-transform: none; /* prod: Customizer un-uppercases .wt-title (old base was uppercase) */
    font-weight: 900;
    font-family: var(--wt-font-heading);
    font-style: normal;
    color: var(--wt-black);
}

/* === Above Header === */

.above-header {
    padding: 5px 0;
    display: table;
    width: 100%;
    font-size: 14px;
}

.above-header a {
    color: var(--wt-white);
    text-decoration: none;
    transition: all 0.6s ease;
}

.above-header a:hover { color: var(--wt-red); }

.above-header .socials { display: block; float: left; }

.above-header .socials .social-icon {
    width: 26px;
    height: 26px;
    line-height: 26px;
    font-size: 16px;
    display: block;
    float: left;
    padding: 0 3px;
    text-align: center;
}

.above-header .socials .social-icon i,
.above-header .socials .social-icon i:before {
    display: block;
    width: 100%;
    float: left;
    height: 26px;
    line-height: 26px;
}

.above-header .menu-top-menu-container { display: block; float: right; }

.above-header .menu-top-menu-container ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.above-header .menu-top-menu-container ul li {
    display: block;
    float: left;
    line-height: 26px;
    margin-right: 90px;
}

.above-header .menu-top-menu-container ul li a {
    display: block;
    float: left;
    line-height: 26px;
}

.above-header .menu-top-menu-container ul li a:hover,
.above-header .menu-top-menu-container ul li.current-menu-item a {
    color: #ff0000;
}

@media (max-width: 1023px) {
    .above-header .menu-top-menu-container { display: none; }
}

@media (max-width: 479px) {
    .full-width-container > .above-header.content-container { padding: 5px; }
    .above-header .cta-button { padding: 0 10px; }
}

/* === Header & Navigation === */

.site-header-outer-container::after {
    content: '';
    display: table;
    clear: both;
}

#masthead .width-100 {
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.1);
}

#masthead a { transition: all 0.6s ease; }
#masthead .site-logo--site-navigation--search { margin: 0; padding: 0; }

#masthead .site-logo { display: block; float: left; width: 194px; }
#masthead .site-logo a { display: block; float: left; width: 100%; padding: 34px 0; }
#masthead .site-logo .custom-logo { width: 194px; height: 26px; float: left; }

#masthead .desktop-navigation { display: block; float: right; width: calc(100% - 236px); }

#masthead .desktop-navigation nav,
#masthead .desktop-navigation .menu-main-menu-container { display: block; float: left; width: 100%; }

#masthead .desktop-navigation ul {
    display: flex;
    justify-content: flex-end;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#masthead .desktop-navigation ul li { display: block; float: left; position: relative; }

#masthead .desktop-navigation ul > li > a {
    color: var(--wt-black);
    line-height: 26px;
    display: block;
    float: left;
    margin: 0;
    padding: 34px 12px;
    text-transform: uppercase;
    font-weight: 600;
    position: relative;
    text-decoration: none;
    font-size: 16px;
}

#masthead .desktop-navigation ul li.current-menu-item > a,
#masthead .desktop-navigation ul > li > a:hover {
    background-color: var(--wt-red);
    color: var(--wt-white);
}

/* Dropdown submenus */
#masthead .desktop-navigation ul li > ul {
    display: none;
    position: absolute;
    width: 280px;
    top: 100%;
    left: 0;
    visibility: hidden;
    opacity: 0;
    white-space: normal;
    border-color: #dedede;
    border-style: solid;
    border-width: 0 1px 1px 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 99;
    background-color: #dedede;
    transition: transform 0.3s linear, opacity 0.3s linear, visibility 0.3s linear;
    transform: translateY(20px);
}

#masthead .desktop-navigation ul li > ul:before {
    content: '';
    position: absolute;
    bottom: -3px;
    left: -3px;
    right: -3px;
    height: 3px;
}

#masthead .desktop-navigation ul li:hover > ul {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.3s linear, opacity 0.3s linear, visibility 0.3s linear;
}

#masthead .desktop-navigation ul li > ul > li {
    border-top: 1px solid #dedede;
    display: block;
    width: 100%;
    float: left;
}

#masthead .desktop-navigation ul li > ul > li > a {
    display: block;
    width: 100%;
    float: left;
    background-color: #fff;
    color: #000;
    text-transform: none;
    line-height: 18px;
    font-size: 14px;
    font-weight: 400;
    padding: 12px 20px;
    text-decoration: none;
}

#masthead .desktop-navigation ul li > ul > li > a:hover {
    background-color: #ec1c24;
    color: #fff;
}

#masthead .desktop-navigation ul li > ul > li.current-menu-item > a {
    background-color: #dedede;
    color: #000;
}

/* Nested submenus */
#masthead .desktop-navigation ul li > ul > li > ul {
    left: 100%;
    top: 0;
    margin-top: -1px;
}

/* === Mega menu (Products, Services) — desktop only === */
@media (min-width: 1250px) {
    #masthead .desktop-navigation ul li.mega-menu {
        position: static;
    }

    #masthead .site-logo--site-navigation--search {
        position: relative;
    }

    #masthead .desktop-navigation ul li.mega-menu ul.sub-menu {
        width: 100%;
        left: 0;
        background-color: var(--wt-white);
    }

    #masthead .desktop-navigation ul#primary-menu > li.mega-menu ul.sub-menu {
        display: none;
    }

    #masthead .desktop-navigation ul#primary-menu > li.mega-menu:hover ul.sub-menu {
        display: block;
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

    #masthead .desktop-navigation ul li.mega-menu ul.sub-menu::after {
        content: '';
        display: table;
        clear: both;
    }

    #masthead .desktop-navigation ul li.mega-menu ul.sub-menu > li {
        width: 50%;
        float: left;
        border-right: 1px solid #dedede;
    }

    #masthead .desktop-navigation ul#primary-menu > li.mega-menu ul.sub-menu > li {
        padding: 0;
    }

    #masthead .desktop-navigation ul#primary-menu > li.mega-menu > ul.sub-menu > li > a {
        /* 700 not 800 — no 800 font file is hosted, see base.css @font-face note */
        font-weight: 700;
        font-size: 22px;
        color: var(--wt-white);
        padding: 99px 30px;
        width: 100%;
        background-size: cover;
        background-position: center;
        position: relative;
        text-transform: uppercase;
        text-decoration: none;
        display: block;
    }

    #masthead .desktop-navigation ul#primary-menu > li.mega-menu > ul.sub-menu > li > a span,
    #masthead .desktop-navigation ul#primary-menu > li.mega-menu > ul.sub-menu > li > a {
        position: relative;
        z-index: 2;
    }

    #masthead .desktop-navigation ul li.mega-menu ul.sub-menu > li:last-child {
        border-right: none;
    }

    #masthead .desktop-navigation ul li.mega-menu ul.sub-menu > li > ul.sub-menu {
        position: static;
        display: block;
        margin: 0;
        transform: none;
        opacity: 1;
        visibility: visible;
        border: none;
        background-color: var(--wt-white);
        width: 100%;
    }

    #masthead .desktop-navigation ul li.mega-menu ul.sub-menu > li > ul.sub-menu::after {
        content: '';
        display: table;
        clear: both;
    }

    #masthead .desktop-navigation ul li.mega-menu ul.sub-menu::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        display: block;
        background-color: var(--wt-white);
        height: 1px;
        width: 100%;
        z-index: 4;
    }

    #masthead .desktop-navigation ul li.mega-menu ul.sub-menu > li > ul.sub-menu > li {
        border-left: none;
        border-right: none;
        padding: 0;
        border-bottom: 1px solid #dedede;
        margin-top: -1px;
        width: 50%;
        float: left;
    }

    #masthead .desktop-navigation ul li.mega-menu ul.sub-menu > li > ul.sub-menu > li > a {
        padding: 15px 30px;
        font-size: 14px;
        font-weight: 400;
        color: #333;
        background-color: var(--wt-white);
        text-decoration: none;
        display: block;
    }

    #masthead .desktop-navigation ul li.mega-menu ul.sub-menu > li > ul.sub-menu > li > a:hover {
        background-color: var(--wt-red);
        color: var(--wt-white);
    }

    /* Mega column background images — position-based, not ID-based */
    #masthead .desktop-navigation ul li.mega-menu > ul.sub-menu > li:nth-child(1) > a {
        background-image: url(https://cdn.walltopia.com/wp-content/uploads/20251210164608/walltopia-climbing-gym-bgr-02.webp);
    }

    #masthead .desktop-navigation ul li.mega-menu > ul.sub-menu > li:nth-child(2) > a {
        background-image: url(https://cdn.walltopia.com/wp-content/uploads/20251210164603/walltopia-ropes-course-bgr-12.webp);
        background-position-y: -102px;
    }
}

#masthead .mobile-navigation { display: none; }

/* Search */
#masthead .search {
    display: block;
    float: right;
    width: 42px;
    padding: 0;
    position: relative;
    transition: all 0.6s ease;
}

#masthead .search:hover { background-color: var(--wt-red); }
#masthead .search:hover .searchform-trigger { color: var(--wt-white); }

#masthead .search .searchform-trigger {
    color: var(--wt-black);
    border: 0 none;
    background: transparent;
    width: 100%;
    display: block;
    float: left;
    line-height: 26px;
    margin: 0;
    padding: 34px 0;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    font-size: 24px;
}

#masthead .search .searchform-trigger:before {
    content: '\e82e';
    font-family: var(--wt-font-icons);
    width: 100%;
    display: block;
    float: left;
    text-align: center;
}

#masthead .search .searchform-trigger.form-opened:before {
    content: '\e835';
    line-height: 23px;
    margin-bottom: 3px;
    width: calc(100% - 2px);
    margin-right: 2px;
}

#masthead .search form {
    position: absolute;
    right: 0;
    top: 100%;
    width: 280px;
    background-color: var(--wt-white);
    padding: 20px;
    border: 1px solid var(--wt-gray-border);
    box-shadow: 1px 3px 12px 0 rgba(0, 0, 0, 0.3); /* .shdw's value — separates the panel from both light and image/dark heroes behind it */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s, transform 0.3s;
}

#masthead .search form.form-opened {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.5s, transform 0.5s;
}

#masthead .search form button[type="submit"] {
    -webkit-appearance: none;
    line-height: 40px;
    text-align: center;
    position: absolute;
    right: 20px;
    top: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    display: block;
    font-size: 24px;
    z-index: 2;
    border: 0 none;
    padding: 0;
    background: transparent;
    color: var(--wt-red);
    cursor: pointer;
}

#masthead .search form button[type="submit"]:before {
    content: '\e82e';
    font-family: var(--wt-font-icons);
}

#masthead .search form input[type="search"] {
    width: 100%;
    line-height: 18px;
    border: 1px solid var(--wt-gray-border);
    /* right padding (P2 follow-up): the submit icon button below is pinned
       flush to the form's right edge at a 40px width, overlapping the
       input's own rightmost 40px (local coords) — without clearance here
       the native ::-webkit-search-cancel-button (Chrome/Edge, once there's
       text) renders on top of it instead of beside it. 46px = 40px button
       zone + ~6px breathing room; left/top/bottom unchanged (M5 — was
       10px — 44px tap target: 18px line-height + 2*13 padding + ~2px border). */
    padding: 13px 46px 13px 10px;
    font-size: 16px;
    background-color: var(--wt-white);
    color: var(--wt-black);
    z-index: 1;
    border-radius: 4px;
    box-sizing: border-box;
}

#masthead .search form input[type="search"]:focus-visible {
    outline: 2px solid var(--wt-gray-text); /* P2 follow-up: red outline wasn't a visible focus indicator here cross-browser; --wt-gray-text (#666) clears WCAG 1.4.11's 3:1 non-text contrast against the white panel */
    outline-offset: 2px;
}

/* On-page search form (searchform.php — search.php no-results notice,
   404.php). Distinct markup from the header dropdown above — it sits in
   normal page flow, no popover positioning needed — but same visual
   language (white panel, gray border, red accent) since P2 (2026-10-07)
   recolored the dropdown to match. M5: ≥16px (iOS zoom), ≥44px tall,
   visible focus. */
.search-form {
    display: flex;
    gap: var(--wt-sp-xs);
    max-width: 400px;
}

.search-form .search-field {
    flex: 1 1 auto;
    font-size: var(--wt-fs-body);
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid var(--wt-gray-border);
    border-radius: 4px;
}

.search-form .search-field:focus-visible {
    outline: 2px solid var(--wt-gray-text); /* P2 follow-up: matches the header dropdown's search input — grey, not red (see base.css M6 comment) */
    outline-offset: 2px;
}

.search-form .search-submit {
    min-height: 44px;
    padding: 0 var(--wt-sp-md);
    border: 1px solid var(--wt-red);
    background-color: var(--wt-white);
    color: var(--wt-red);
    cursor: pointer;
}

.search-form .search-submit:hover {
    background-color: var(--wt-red);
    color: var(--wt-white);
}

/* Header stacking (M1c): the whole header paints above page content — hero
   sliders are z-index:9, hero titles 10. The open mobile menu's own
   z-index:999 is trapped inside .dl-menuwrapper's perspective-created
   stacking context, so the elevation has to live HERE: without it the open
   menu rendered behind any positioned hero/content below the header (home
   slider, big-title heroes, info blocks) — "hamburger doesn't open". The old
   theme did this via a .z-index-99 utility (global-styles.css) that v2 never
   ported; the class sat dead in header.php (same silent-missing family as
   the get_template_part lesson in CLAUDE.md). */
#header-container {
    position: relative;
    z-index: 99;
}

/* Fixed header */
#header-container.fixed-header {
    position: fixed;
    top: 0;
    z-index: 999;
    background-color: var(--wt-white);
    box-shadow: 0 0 2px 0 rgba(56, 69, 84, 0.2);
}

/* P3 task A: a `body.single-post #header-container` rule with this same
   box-shadow used to live here, ported verbatim from the old theme's
   style.css. Unlike .fixed-header's shadow (only active once JS adds the
   class on scroll), this one was unconditional at ≥1250px, so every single
   blog post painted a full-bleed ~2px grey shadow under (and around) the
   header that no other template has — "stray line" under the header,
   outside the content frame. Removed rather than scoped; nothing in the
   design calls for single posts to have their own static header treatment. */

#header-container.fixed-header #masthead .site-logo a,
#header-container.fixed-header #masthead .search .searchform-trigger,
#header-container.fixed-header #masthead .desktop-navigation ul > li > a {
    padding-top: 19px;
    padding-bottom: 19px;
}

/* M6: page scroll locked while the mobile menu panel is open
   (navigation.js toggles this on <body> on open/close). */
body.wt-menu-open {
    overflow: hidden;
}

/* Mobile nav breakpoint */
@media (max-width: 1249px) {
    #masthead { border-bottom: 1px solid #dfe5e8; }
    #masthead .desktop-navigation,
    #masthead .search { display: none; }
    #masthead .mobile-navigation { display: block; }
    #masthead .site-logo a { padding: 19px 0; }

    #header-container.fixed-header { box-shadow: none; }

    /* DL Menu */
    .dl-menuwrapper {
        width: calc(100% - 194px);
        max-width: unset;
        float: left;
        position: relative;
        perspective: 1000px;
        perspective-origin: 50% 200%;
        padding: 19px 0;
    }

    .dl-menuwrapper button {
        background: transparent;
        border: none;
        width: 26px;
        height: 26px;
        text-indent: -900em;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        outline: none;
        margin: 0;
        padding: 0;
        float: right;
    }

    .dl-menuwrapper button:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background: var(--wt-black);
        top: 5px;
        left: 0;
        box-shadow: 0 7px 0 var(--wt-black), 0 14px 0 var(--wt-black);
    }

    /* M6: the trigger's native outline is suppressed above; replace it
       on keyboard focus (F-20 — outline removed without a replacement). */
    .dl-menuwrapper button:focus-visible {
        outline: 2px solid var(--wt-focus-color);
        outline-offset: 2px;
    }

    .dl-menuwrapper ul {
        padding: 0;
        list-style: none;
        transform-style: preserve-3d;
    }

    .dl-menuwrapper li {
        position: relative;
        background: #f4f6f7;
        border-color: #dfe5e8;
        border-style: solid;
        border-width: 0 1px 1px 1px;
    }

    .dl-menuwrapper li a {
        display: block;
        position: relative;
        padding: 15px 20px;
        font-size: 16px;
        line-height: 20px;
        font-weight: 300;
        color: var(--wt-dark-bg);
        text-decoration: none;
        outline: none;
    }

    /* M6: same outline-removal-without-replacement as the trigger button
       above (F-20). Inset offset — these are full-width rows abutting the
       next item's border, an outside ring would overlap it. */
    .dl-menuwrapper li a:focus-visible {
        outline: 2px solid var(--wt-focus-color);
        outline-offset: -2px;
    }

    .dl-menuwrapper li.dl-back > a {
        padding-left: 30px;
        background: #dfe5e8;
    }

    .dl-menuwrapper li.dl-back:after,
    .dl-menuwrapper li > a:not(:only-child):after {
        position: absolute;
        top: 0;
        line-height: 50px;
        font-family: var(--wt-font-icons);
        speak: never;
        -webkit-font-smoothing: antialiased;
        content: '\e81f';
    }

    .dl-menuwrapper li.dl-back:after {
        left: 10px;
        color: var(--wt-dark-bg);
        font-size: 20px;
        content: '\e821';
    }

    .dl-menuwrapper li > a:after {
        right: 10px;
        color: var(--wt-dark-bg);
        font-size: 20px;
    }

    .dl-menuwrapper ul.sub-menu li { border-width: 0 0 1px 0; }
    .dl-menuwrapper ul.sub-menu li:last-child { border-width: 0; }

    .dl-menuwrapper .dl-menu {
        margin: 0;
        position: absolute;
        width: auto;
        top: calc(100% + 1px);
        right: 0;
        left: -194px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(10px);
        backface-visibility: hidden;
    }

    .dl-menuwrapper .dl-menu.dl-menu-toggle { transition: all 0.3s ease; }

    .dl-menuwrapper .dl-menu.dl-menuopen {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
        z-index: 999;
    }

    /* Mobile drill-down: exactly one level is ever "the current panel"
       (navigation.js tracks it with .dl-panel-active). Every li/sub-menu is
       hidden by default; the active panel's ul and all its own direct
       children show in full (siblings + its own injected Back row).
       Ancestor levels on the path down to the active panel get
       .dl-chain-open instead — they stay display:block (so the active
       panel nested inside them can render) but show only the one li
       leading further down: their own link and their own Back row stay
       hidden. Replaces the old dl-subview/dl-subviewopen scheme, which
       re-displayed an ancestor's ENTIRE child list (incl. its Back row)
       underneath whatever was drilled into further down — two "Back" rows
       stacked at 2+ levels deep (M9, decisions.md #41 addendum). */
    .dl-menuwrapper li .sub-menu,
    .dl-menuwrapper .dl-menu li { display: none; }

    .dl-menuwrapper .dl-panel-active > li { display: block; }
    .dl-menuwrapper ul.sub-menu.dl-panel-active { display: block; }

    .dl-menuwrapper li.dl-chain-open { display: block; }
    .dl-menuwrapper li.dl-chain-open > a { display: none; }
    .dl-menuwrapper ul.sub-menu.dl-chain-open { display: block; }

    .dl-menuwrapper > .sub-menu {
        position: absolute;
        width: 100%;
        top: 50px;
        left: 0;
        margin: 0;
    }

    /* DL menu animations */
    .dl-menu.dl-animate-out-2 { animation: MenuAnimOut2 0.3s ease-in-out; }
    .dl-menu.dl-animate-in-2 { animation: MenuAnimIn2 0.3s ease-in-out; }
    .dl-menuwrapper > .sub-menu.dl-animate-in-2 { animation: SubMenuAnimIn2 0.3s ease-in-out; }
    .dl-menuwrapper > .sub-menu.dl-animate-out-2 { animation: SubMenuAnimOut2 0.3s ease-in-out; }

    @keyframes MenuAnimOut2 {
        100% { transform: translateX(-100%); opacity: 0; }
    }
    @keyframes MenuAnimIn2 {
        0% { transform: translateX(-100%); opacity: 0; }
        100% { transform: translateX(0); opacity: 1; }
    }
    @keyframes SubMenuAnimIn2 {
        0% { transform: translateX(100%); opacity: 0; }
        100% { transform: translateX(0); opacity: 1; }
    }
    @keyframes SubMenuAnimOut2 {
        0% { transform: translateX(0); opacity: 1; }
        100% { transform: translateX(100%); opacity: 0; }
    }

    .no-js .dl-menuwrapper .dl-menu { position: relative; opacity: 1; transform: none; }
    .no-js .dl-menuwrapper li .sub-menu { display: block; }
    .no-js .dl-menuwrapper li.dl-back { display: none; }
}

/* === Page Headers / Hero Sections === */

.header-background {
    width: 100%;
    height: calc(100vh - 130px);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    background-color: #212331;
    position: relative;
    overflow: hidden;
}

.header-background:after {
    content: "";
    background: rgba(0, 0, 0, .2);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.header-background.background-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.header-background .big-title {
    width: 100%;
    max-width: 768px;
    color: var(--wt-white);
    font-size: 32px;
    line-height: 36px;
    font-weight: 900;
    letter-spacing: -1px;
    margin: 0 0 10px 0;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    z-index: 10;
    text-transform: uppercase;
}

.header-background .small-title {
    width: 100%;
    max-width: 768px;
    color: var(--wt-white);
    font-size: 24px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -1px;
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    z-index: 10;
}

.header-background .youtube-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.header-background iframe {
    transition: opacity 500ms ease-in-out;
    transition-delay: 250ms;
}

/*
 * YouTube background hero video (Step 20.10) — class added at runtime by
 * assets/js/youtube-bg.js when a [data-youtube] element resolves to a video ID.
 * No separate conditionally-loaded stylesheet: .header-background already
 * establishes position:relative + overflow:hidden above (line ~719), and
 * .big-title/.small-title/.go-to-content-link already sit above z-index:0 via
 * their own z-index (10/10/99), so only the container fill + iframe cover-scale
 * rules are new.
 */
.header-background .wt-ytbg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.header-background .wt-ytbg-container iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 56.25vw; /* 100 * 9 / 16 */
    min-width: 177.78vh; /* 100 * 16 / 9 — covers tall viewports */
    min-height: 100vh;
    border: 0;
    pointer-events: none;
}

.header-background #backgroundVideo {
    width: 100%;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.header-background .go-to-content-link {
    z-index: 99;
    color: var(--wt-white);
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 35px;
    position: absolute;
    top: calc(100% - 125px);
    left: 50%;
    margin-left: -25px;
    display: inline-block;
    text-align: center;
}

.page-title-block .small-title p {
    width: 100%;
    display: block;
    color: var(--wt-white);
    font-size: 25px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -1px;
    margin: 20px 0 0 0;
    text-align: left;
    z-index: 10;
}

/* Big header */
.big-header {
    height: 610px;
    max-height: 610px;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}

.big-header .tinted-area { background-color: rgba(0, 0, 0, .4); }

.big-header .tinted-area .slide-title {
    color: var(--wt-white);
    letter-spacing: -1px;
    text-transform: uppercase;
    font-size: 34px;
    font-weight: 900;
    margin: 0;
    text-shadow: 0 3px 4px rgba(0, 0, 0, .56);
}

.big-header .big-title {
    width: 100%;
    max-width: 768px;
    color: var(--wt-white);
    font-size: 32px;
    line-height: 36px;
    font-weight: 900;
    letter-spacing: -1px;
    margin: 0 auto 10px auto;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    z-index: 10;
    text-transform: uppercase;
}

.big-header.even-bigger-title .big-title { font-size: 48px; line-height: 58px; }

.big-header .small-title {
    width: 100%;
    max-width: 768px;
    color: var(--wt-white);
    font-size: 24px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -1px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    z-index: 10;
}

.big-header .small-title p { margin: 0; }

/* Small header */
.small-header .big-title {
    font-size: 50px;
    font-weight: 900;
    color: var(--wt-black);
    margin: 0;
    line-height: 1;
    letter-spacing: -2px;
}

.small-header .small-title {
    color: var(--wt-black);
    font-size: 17px;
    line-height: 24px;
    font-weight: normal;
}

.small-header .small-title p { margin: 0; }

/* .dark-background small-headers (events, wall types) sit on a dark fill,
 * not an image — title stays white. Higher specificity than the base rule
 * above via the extra .dark-background class, no !important needed. Search
 * results used this pattern too until P2 (2026-10-07), which moved it to
 * the plain white small-header all other archive/listing templates use. */
.small-header.dark-background .big-title,
.small-header.dark-background .small-title {
    color: var(--wt-white);
}

@media (max-width: 1249px) {
    .header-background { height: calc(100vh - 100px); max-height: 500px; }
    .big-header { height: 500px; }
    .big-header .tinted-area .slide-title { font-size: 30px; }
}

@media (max-width: 767px) {
    /* M8 (F-15): was a straight anti-step — 36px here was BIGGER than the
       32px desktop base. .big-header .big-title (same desktop size, same
       hero-over-image pattern) gets the same fix — it had no mobile step
       of its own at all before this. even-bigger-title's own, larger base
       (48px) steps proportionally below. */
    .header-background .big-title,
    .big-header .big-title { font-size: 28px; line-height: 34px; }
    .big-header.even-bigger-title .big-title { font-size: 42px; line-height: 51px; }
    .header-background .small-title { font-size: 22px; }
    .page-title-block .small-title p { font-size: 18px; }
    .small-header .big-title { font-size: 30px; }
}

@media (max-width: 767px) {
    .header-background #backgroundVideo { width: auto; height: 100vh; }
}

@media (max-width: 479px) {
    .header-background .big-title,
    .big-header .big-title { font-size: 24px; line-height: 29px; }
    .big-header.even-bigger-title .big-title { font-size: 36px; line-height: 44px; }
    .header-background .small-title,
    .page-title-block .small-title p { font-size: 16px; }
    .small-header .big-title { font-size: 26px; } /* M8: was unstepped past the 30px tablet value */
    .big-header { height: 400px; }
    .big-header .tinted-area .slide-title { font-size: 26px; }
}

/* === Footer === */

/* Old theme: literal 0 left/right at every width (desktop alignment relies
   entirely on .one-fourth's own 20px column padding). M9 added the token
   here unconditionally to fix phones, where .one-fourth's own column
   padding (the only other source of edge inset) also drops to 0 (@media
   max-width:479px below) — but that put the token's inset on DESKTOP too,
   double-stacked on top of .one-fourth's own padding, visibly offsetting
   the footer columns inward vs the page content above (P1, 2026-10-07).
   Fix: 0 here (desktop, matches old theme); the token applies only at
   phone/tablet (max-width:767px below, decisions.md #41 ladder), keeping
   M9's phone fix. */
footer.site-footer { display: table; padding: 100px 0 50px 0; }

footer.site-footer .one-fourth {
    margin: 0;
    padding: 0 20px 50px 20px;
    color: var(--wt-footer-text);
}

footer.site-footer .one-fourth .widget-title {
    font-size: 16px;
    line-height: 1;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 0 40px 0;
    color: var(--wt-white);
}

footer.site-footer .one-fourth .widget-title:after { content: none; display: none; }

footer.site-footer .one-fourth ul.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0 none;
    text-transform: none;
}

footer.site-footer .one-fourth ul.menu li { border: 0 none; margin: 0 0 15px 0; }
footer.site-footer .one-fourth ul.menu li:last-child { border: 0 none; margin: 0; }

/* M7 (mobile-audit F-13): padding + an equal negative margin grows the tap
   target to the 44px floor without moving anything — the link's margin
   box (what the surrounding li margin sees) stays the same size as before. */
footer.site-footer .one-fourth ul.menu li a {
    display: inline-block;
    padding: 10px 0;
    margin: -10px 0;
}

footer.site-footer .one-fourth a {
    padding: 0;
    color: var(--wt-footer-text);
    text-transform: none;
    text-decoration: none;
    font-weight: normal;
}

footer.site-footer .one-fourth a:hover { color: var(--wt-white); }

/* Social icon rows (Custom HTML widgets emit <nav class="nav nav-socials">
   with inline-SVG links) — ported Step 20.14 from old theme style.css:3195-3197.
   Flex row keeps each brand's icons horizontal under its label. */
.site-footer .nav-socials {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
}

/* M7 (mobile-audit F-13): +4px padding top/bottom offset by an equal
   negative margin — grows the tap target toward 44px without changing the
   row's rendered height (margin box stays 36px, same as before). */
.site-footer .nav-socials a {
    padding: 12px 16px 12px 0;
    margin: -4px 0;
    display: inline-block;
}

.site-footer .nav-socials svg {
    display: block;
    width: auto;
    height: 20px;
}

/* Staging's footer widgets are configured with the [social_icons] shortcode
   instead of the Custom HTML markup above — inc/shortcodes.php emits
   div.social-links with bare <a><i class="icon-*"></i></a> children, which
   had no CSS at all and rendered as a vertical stack. Same flex-row
   treatment as .nav-socials, own rule so it doesn't inherit that block's
   padding-based spacing. */
.site-footer .social-links {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

/* M7 (mobile-audit F-13): the icon glyph itself stays its natural size —
   min-width/height only pad the invisible flex box toward the 24px floor
   (CLAUDE.md), matching the .socials a.social-icon treatment above. */
.site-footer .social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 24px;
}

.footer-credits p { color: var(--wt-footer-text); }
.footer-credits a { padding: 0; color: var(--wt-footer-text); text-decoration: none; }
.footer-credits a:hover { color: var(--wt-white); }
.footer-credits img { max-width: 160px; display: inline-block; vertical-align: middle; }

@media (max-width: 767px) {
    footer.site-footer { padding-left: var(--wt-container-padding); padding-right: var(--wt-container-padding); }
    footer.site-footer .one-fourth { width: 50%; }
}

@media (max-width: 479px) {
    footer.site-footer .one-fourth { width: 100%; padding: 0 0 50px 0; }
}

/* === Social Icons === */

.social-icon { display: block; float: left; }

/* Icon row on `gap` (M1c) — same conversion as the card grids: gap = 2 × the
   old 10px icon margin, no ±10px bleed on the row. */
footer.site-footer .socials {
    display: flex;
    flex-wrap: wrap;
    float: left;
    gap: 10px 20px;
    /* 35px = the old 25px row margin + the last icon row's own 10px bottom margin */
    margin: 0 0 35px 0;
    width: 100%;
}

footer.site-footer .socials a.social-icon {
    width: 22px;
    height: 22px;
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
}

/* M7 (mobile-audit F-13): 22px icons packed on a 10px/20px gap — a full
   44px hit box per icon would overlap neighbours, so this grows to the
   24px floor (CLAUDE.md) instead; the 1px overflow per side is well under
   either gap. */
footer.site-footer .socials a.social-icon::after {
    content: "";
    position: absolute;
    inset: -1px;
}

footer.site-footer .socials a.social-icon i {
    width: 22px;
    font-size: 13px;
    height: 22px;
    line-height: 22px;
    color: var(--wt-dark-bg);
    display: block;
    border-radius: 50%;
    text-align: center;
}

footer.site-footer .socials a.social-icon i:before { line-height: 22px; text-align: center; }

footer.site-footer .socials a.facebook i { background-color: #4e64b5; }
footer.site-footer .socials a.linkedin i { background-color: #0288d1; }
footer.site-footer .socials a.twitter i { background-color: #00aced; }
footer.site-footer .socials a.instagram i { background-color: #9a8f62; }
footer.site-footer .socials a.youtube i { background-color: #c82929; }
footer.site-footer .socials a.social-icon:hover i { background-color: var(--wt-footer-text); }

/* === Back to Top === */

.cd-top {
    display: inline-block;
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: 20px;
    left: 20px;
    border: 1px solid rgba(255, 255, 255, .15);
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    background: var(--wt-dark-bg) url('../../images/up-arrow.svg') no-repeat center 50%;
    background-size: 15px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s 0s, visibility 0s 0.3s;
    border-radius: 3px;
    z-index: 1000;
}

.cd-top.cd-is-visible,
.cd-top.cd-fade-out { visibility: visible; opacity: 1; transition: opacity 0.3s 0s, visibility 0s 0s; }

.cd-top:hover { background-color: #333; opacity: 1; }

/* M6: on phones/tablets it sits over the third-party chat bubble's corner
   and over article text; native browser/OS quick-scroll-to-top covers the
   same job there. Unchanged from the tablet/laptop breakpoint up. */
@media (max-width: 767px) {
    .cd-top { display: none; }
}

@media (min-width: 1024px) {
    .cd-top { height: 50px; width: 50px; left: 30px; bottom: 30px; }
}

/* === Breadcrumbs === */

.breadbrumbs-list { width: 100%; display: block; }
#breadcrumbs { font-size: 14px; }

/* === Info Blocks === */

.info-block-container {
    width: 100%;
    display: block;
    float: left;
    padding: var(--wt-sp-2xl); /* 50px — decisions.md #36 adoption candidate */
    position: relative;
}

/* !important: old theme specificity override for .no-margin-padding */
.info-block-container.no-margin-padding,
.block.no-margin-padding {
    box-shadow: none !important;
    padding: 0 !important;
}

.info-block-container .content { width: calc(100% - var(--wt-media-col) - 50px); }

/* Prod effective: the Customizer overrides the old 28px/uppercase/-1px rule
   to 32px/title-case at every viewport width (its override carries no media
   query, so it also beats the old <=480px 24px variant). */
.info-block-container .content h2 {
    font-size: var(--wt-fs-h2-content);
    margin: 0 0 var(--wt-sp-xl) 0;
    line-height: normal;
    letter-spacing: 0;
    font-weight: var(--wt-fw-heading);
    text-transform: none;
    font-family: var(--wt-font-heading);
}

.info-block-container .content p { display: block; width: 100%; margin: 0 0 var(--wt-sp-xs) 0; } /* prod keeps 15px inside .content while global p is 25px */
.info-block-container .content p:only-child,
.info-block-container .content p:last-child { margin: 0; }

/* The wysiwyg text wrapper (.full-width-container) carries no margin of its
   own, and the :last-child reset above zeroes its last <p>'s bottom margin —
   closing the gap before an immediately-following .wt-link button
   (info-block, info-block-multiple, tabs-block). Gap lives on the button
   side so the :only-child/:last-child reset above stays untouched. Value is
   prod's effective one (Customizer Additional CSS: `.info-block-container
   .content a { margin-top: 20px }`, unconditional — the old theme's own
   style.css only varied this at narrow breakpoints, e.g. 25px at <=479px,
   but the Customizer rule loads after it and ties on specificity, so it won
   site-wide; this rule's 4-class specificity intentionally beats that
   generic phone-width `.content a` rule below for the same reason). Scoped
   to the wrapper, not a bare `* + .wt-link`, so a paragraph that already
   carries its own !important margin utility (e.g. sample-project.php's
   margin-bottom-40, info-block-multiple's subtitle margin-bottom-25) is
   untouched — this selector simply never matches there. */
.info-block-container .content .full-width-container + .wt-link { margin-top: var(--wt-sp-sm); }

.info-block-container .scroll-area-container { max-height: 360px; overflow-y: auto; }
.info-block-container .scroll-area-container-264 { max-height: 264px; overflow-y: auto; }

/* === Text + media column row ===
   An info block that renders a media child (.image, .video, gallery
   .slides-images-in-tab, in-content .tabs-container) lays out as a wrapping
   flex row — same pattern as .reverse-order below — with the 50px gutter
   from column-gap. Vertical rhythm stays margin-based (no row-gap), so
   stacked spacing is unchanged. Replaces the old float:left/float:right +
   margin-left:50px layout. :has() scopes it to containers that actually
   render a media child: .info-block is reused by blocks without one
   (columns-content, related-content, png-block) and industry-products.php
   emits no block class at all. */
.info-block-container:has(> .image, > .video, > .slides-images-in-tab, > .tabs-container) {
    display: flex;
    flex-wrap: wrap;
    column-gap: 50px;
    align-items: flex-start;
}

/* Default media column width (--wt-media-col, base.css). :where() keeps the
   default at (0,0,0) so every sizing modifier wins on plain specificity —
   .width-100 (base.css, the factory-slider full-width strip), .width-50
   (equal columns, below), .video-100, the <=1100px stacking rules — with no
   per-variant override rules and no !important. The .content width above is
   what remains next to it after the 50px gap. */
:where(.info-block-container .image,
       .info-block-container .video,
       .info-block-container .slides-images-in-tab,
       .info-block-container.tabs-in-content .tabs-container) {
    width: var(--wt-media-col);
}

.info-block-container .video.video-100 { width: 100%; }
.info-block-container.factory-slider .factory-title { margin-bottom: 50px; }

.info-block-container.big .content { width: 100%; }
.info-block-container.big .content p { margin: 0 0 25px 0; }
.info-block-container.big .content a { position: relative; left: 0; bottom: 0; margin-top: 50px; }
.info-block-container.big .image { width: 100%; }

.info-block-container ul,
.info-block-container ol { margin: 0 0 15px; padding: 0; list-style-position: inside; }
.info-block-container ul li { margin-bottom: 10px; }
.info-block-container ul li:last-child { margin-bottom: 0; }

.shdw { box-shadow: 1px 3px 12px 0 rgba(0, 0, 0, 0.3); }
.noshdw { box-shadow: none; }
.txtshdw { text-shadow: 2px 2px 4px rgb(20, 20, 20); }

/* 1100px kept as a documented ladder exception (M1): the fixed 710px media
   column (--wt-media-col, decisions.md #37) leaves only ~260-340px for the
   text column between 1024-1099px if this moved to the 1023px laptop step —
   too narrow for comfortable paragraph text. Measured, not an oversight. */
@media (max-width: 1100px) {
    .info-block-container .content { width: 100%; margin-bottom: 50px; }
    .info-block-container .image,
    .info-block-container .video,
    .info-block-container .slides-images-in-tab,
    .info-block-container.tabs-in-content .tabs-container { width: 100%; }
    /* !important: override inline max-height set by JS */
    .info-block-container .scrollable-content[style] { max-height: unset !important; }
    .info-block-container .content h2 { margin: 0 0 var(--wt-sp-md) 0; }
}

@media (max-width: 1023px) {
    /* M8 (Жоро, mobile pass): the 50px side padding read as a large indent
       on the "About" heading on wall-type/industry tab panels. Stepped down
       on the token scale rather than left flat from desktop to phone. */
    .info-block-container { padding: var(--wt-sp-2xl) var(--wt-sp-lg); }
}

@media (max-width: 767px) {
    .info-block-container .content h2 { margin: 0 0 var(--wt-sp-2xl) 0; }
    .info-block-container .scroll-area-container,
    .info-block-container .scroll-area-container-264 { max-height: unset; }
    .info-block-container.factory-slider .content { width: 100%; margin-top: 50px; margin-bottom: 25px; }
    /* M8: .wt-title's old literal 24px override is gone — it already read
       var(--wt-fs-h3) at desktop (decisions.md #36), so it now steps with
       the token at the phone breakpoint (base.css) instead of a separate
       literal at this one. */
}

@media (max-width: 479px) {
    /* M8: one more step down, tokens instead of literals — was a flat
       50/25/25/25. --wt-container-padding already contributes 25px from
       .content-container on top of this, so the smaller side value here
       keeps the "About" heading from reading over-indented. */
    .info-block-container { padding: var(--wt-sp-xl) var(--wt-sp-sm) var(--wt-sp-md) var(--wt-sp-sm); margin-bottom: 25px; }
    .info-block-container .content { margin-bottom: 25px; }
    .info-block-container .content h2 { margin: 0 0 var(--wt-sp-md) 0; } /* 24px size variant dropped — dead on prod (Customizer wins) */
    .info-block-container .content a { margin: 25px 0 0 0; width: 100%; }
    .info-block-container.big .content { margin-bottom: 25px; }
    .info-block-container.factory-slider { margin: 0; padding: 0; }
}

/* Equal-width columns (ACF "equal_width_columns" -> .width-50 on both
   .content and the image): calc(50% - 25px) each + the flex row's 50px
   column-gap = 100%. Side-by-side only above the 1100px media-row exception
   above, stacked at/below it — matching the fixed-media-column behavior.
   M1b: this used to be `@media (min-width: 768px)`, which overlapped the
   `@media (max-width: 1100px)` stacking rule's 768-1100px range. Both rules
   targeted the same elements, but `.content.width-50`/`.image.width-50`
   (3 classes, specificity 0,3,0) always out-specified the plain
   `.info-block-container .content`/`.image` stacking rule (0,2,0), so the
   columns never actually stacked between 768-1100px as the old comment
   here claimed. Fix per decisions.md #35 (remove the competing mechanism,
   don't out-specify it): give this rule its own non-overlapping range
   instead — >=1101px, immediately above the stacking breakpoint — so the
   two rules never compete for the same viewport width. */
@media (min-width: 1101px) {
    .info-block-container .content.width-50,
    .info-block-container .image.width-50,
    .info-block-container .slides-images-in-tab.width-50 {
        width: calc(50% - 25px);
    }
}

/* Admin option "reverse_order": image left, text right (DOM stays text-first,
   so the visual swap is `order`, not a markup change). The flex row itself
   now comes from the media-row rule above; this only adds the 25px row gap
   (prod spacing when the pair wraps) and the order swap. When both columns
   cannot fit on one line (<=1100px, for both the .width-50 pairs and the
   fixed 710px image — M1b: unified after the equal-width-columns fix above)
   they wrap to a single column with the image FIRST — same as prod at
   <=480px. */
.info-block-container.reverse-order {
    gap: 25px 50px;
}

.info-block-container.reverse-order .content {
    order: 2;
    margin-bottom: 0;
}

/* === Features Block (acf-blocks/features-block.php) ===
   Ported from old theme style.css .features-blocks. Variants = every
   content_background_color choice in the ACF field. Row/col sizing is
   scoped here (the unsized .col + .width-N pair is not in grid.css). */

.info-block-container.features-blocks { padding: 0; }
.features-blocks .row { margin-left: -25px; margin-right: -25px; }
.features-blocks .row > .col { padding: 25px; margin-bottom: 30px; }

/* Below 768px columns stack (width-N would otherwise squeeze 4 across) */
@media (max-width: 767px) {
    .features-blocks .row > .col { width: 100%; }
}
@media (min-width: 768px) {
    .features-blocks .row > .col { flex: 1 0 0%; }
}

.features-blocks .features-block {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    min-height: 210px;
    margin-bottom: 25px;
}
.features-blocks .features-block.rounded-corners { border-radius: 10px; min-height: 110px; }
.features-blocks .features-block .inner-content { width: 100%; padding: 1rem; text-align: center; }

.features-blocks .features-block.graphite  { background-color: var(--wt-block-graphite); }
.features-blocks .features-block.granite   { background-color: var(--wt-block-granite); }
.features-blocks .features-block.limestone { background-color: var(--wt-block-limestone); }
.features-blocks .features-block.sandstone { background-color: var(--wt-block-sandstone); }
.features-blocks .features-block.deep-blue { background-color: var(--wt-block-deep-blue); }
.features-blocks .features-block.aqua      { background-color: var(--wt-block-aqua); }
.features-blocks .features-block.red       { background-color: var(--wt-block-red); }
.features-blocks .features-block.light     { background-color: var(--wt-block-light); }

.features-blocks .features-block h2,
.features-blocks .features-block h3,
.features-blocks .features-block h4,
.features-blocks .features-block h5 { margin-bottom: 5px; }

/* White text on dark variants */
.features-blocks .features-block:is(.graphite, .granite, .deep-blue, .red, .aqua) :is(h2, h3, h4, h5, h6, li, p) { color: var(--wt-white); }

/* === Models Block (acf-blocks/models-block.php) === */

.info-block-container.models-block .content { width: 100%; margin-bottom: 0; }
.info-block-container.models-block .content p { margin: 0 0 25px 0; }
.info-block-container.models-block .content p:only-child,
.info-block-container.models-block .content p:last-child { margin: 0; }

.info-block-container.models-block .models-container {
    margin: 0 calc(-1 * var(--wt-container-padding)) calc(-1 * var(--wt-sp-md)) calc(-1 * var(--wt-container-padding));
    width: auto;
    height: calc(100% + var(--wt-sp-md));
}

/* Children float — clearfix so the container doesn't collapse */
.info-block-container.models-block .models-container::after {
    content: '';
    display: table;
    clear: both;
}

.info-block-container.models-block .single-model {
    display: block;
    float: left;
    width: 25%;
    height: auto;
    margin: 0;
    padding: 25px;
}

.info-block-container.models-block .single-model:nth-child(4n+5) { clear: left; }

.info-block-container.models-block .single-model.wide,
.info-block-container.models-block .single-model.square,
.info-block-container.models-block .single-model.horizontal { width: 33.3%; }

.info-block-container.models-block .single-model.horizontal:nth-child(4n+5),
.info-block-container.models-block .single-model.square:nth-child(4n+5),
.info-block-container.models-block .single-model.wide:nth-child(4n+5) { clear: none; }

.info-block-container.models-block .single-model.horizontal:nth-child(3n+4),
.info-block-container.models-block .single-model.square:nth-child(3n+4),
.info-block-container.models-block .single-model.wide:nth-child(3n+4) { clear: left; }

.info-block-container.models-block .single-model .model-link {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    line-height: unset;
    border: 0 none;
    position: relative;
    left: unset;
    bottom: unset;
}

.info-block-container.models-block .single-model .model-link .image {
    display: block;
    float: left;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    overflow: hidden;
    margin: 0;
}

.info-block-container.models-block .single-model .model-link .image img {
    transition: all 0.3s ease;
    padding: 15px 0;
}

.info-block-container.models-block .single-model .model-link:hover .image img { transform: scale(1.03); }
.info-block-container.models-block .single-model.horizontal .model-link:hover .image img { transform: none; }

.info-block-container.models-block .single-model .model-link .name {
    display: block;
    width: 100%;
    float: left;
    margin: 0;
    padding: 0 5px;
    background: #e8f1f1;
    line-height: 30px;
    height: 30px;
    color: #5d5d5d;
    font-weight: normal;
    text-transform: none;
    font-size: 16px;
    font-family: var(--wt-font-body);
    letter-spacing: -0.5px;
    z-index: 2;
    text-align: center;
}

@media (max-width: 1023px) {
    .info-block-container.models-block .single-model { width: 33.3%; }
}

@media (max-width: 767px) {
    .info-block-container.models-block .single-model { width: 50%; }
}

@media (max-width: 479px) {
    .info-block-container.models-block .single-model { width: 100%; }
}

/* === Related Projects === */

/* Card grid on `gap` (M1c): the container is a grid and the between-card
   gutter comes from column-gap = 2 × the old 25px card margin, so cards sit
   flush with the container's padding box at every width. The old mechanism
   (cards carrying their own 25px side margins, canceled by a negative-margin
   bleed on .no-margin-padding variants) is gone — side padding absorbs the
   old 25px padding + 25px card margin, vertical rhythm stays on the cards'
   own top/bottom margins. .no-margin-padding (zeroed padding) now lands the
   cards flush with the content edge with no bleed needed. */
.related-projects-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(2 * var(--wt-sp-md));
    float: left;
    padding: 50px 50px 25px 50px;
    margin: 0 0 -25px 0; /* cancels the last row's 25px bottom margin, as before */
}

/* Non-card children (title, "See all" button row, carousel wrapper) span
   the full row. */
.related-projects-container > :not(.single-related-project) { grid-column: 1 / -1; }

.related-projects-container .title {
    line-height: 1;
    font-size: var(--wt-fs-h3);
    letter-spacing: -1px;
    margin: 25px 0 20px 0;
    width: 100%;
}

.related-projects-container .single-related-project {
    height: 300px;
    margin: 25px 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    position: relative;
}

.related-projects-container .single-related-project:hover .item-title,
.related-projects-container .single-related-project:hover .item-location {
    transform: scale(1.15);
    transition: all 0.3s ease-out;
}

.related-projects-container .single-related-project a {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding: 25px;
}

.related-projects-container .single-related-project a:after {
    content: "";
    background-color: rgba(0, 0, 0, .5);
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.related-projects-container .single-related-project .item-title {
    font-family: var(--wt-font-heading);
    font-weight: 700;
    color: var(--wt-white);
    letter-spacing: -1px;
    font-size: var(--wt-fs-h4);
    margin: 0;
    line-height: 1;
    z-index: 10;
    transition: all 0.3s ease-out;
}

.related-projects-container .single-related-project .item-location {
    color: #cecece;
    font-weight: normal;
    margin: 5px 0 0 0;
    line-height: 1;
    z-index: 10;
    transition: all 0.3s ease-out;
}

/* Carousel variant — no carousel JS runs in v2 (slick was never ported), so
   .carousel-on renders as a static 3-column grid: the .related-projects-carousel
   wrapper spans the container's full row (non-card child above) and is itself
   the 3-track grid. */
.related-projects-container.carousel-on .related-projects-carousel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: calc(2 * var(--wt-sp-md));
}
.related-projects-container.carousel-on .single-related-project { height: 300px; }
.related-projects-container.carousel-on .slick-prev { left: 25px; }
.related-projects-container.carousel-on .slick-next { right: 25px; }

@media (max-width: 767px) {
    .related-projects-container,
    .related-projects-container.carousel-on .related-projects-carousel { grid-template-columns: 1fr; }
    .related-projects-container .single-related-project { height: 220px; }
}

@media (max-width: 479px) {
    .related-projects-container { padding: 25px; }
    /* font-size no longer repeated here — both .title (h3) and .item-title
       (h4) already read their tokens, which step at this breakpoint
       (base.css, M8). The extra leading on .title stays literal — not a
       token value, a deliberate adjustment for the wrapped two-line case. */
    .related-projects-container .title { margin: 0 0 20px 0; line-height: 29px; }
    .related-projects-container .single-related-project { margin: 25px 0 0 0; height: 160px; }
}

/* === Related Industries ===
   Ported from old theme style.css:1648-1665 in Step 20.13, alongside
   template-parts/shortcode-related-industries.php. Without these rules the
   tiles are background-image-only divs with no intrinsic height — the block
   renders as nothing at all. */

/* Card grid on `gap` (M1c) — same conversion as .related-projects-container:
   column-gap replaces the tiles' old 25px side margins, side padding absorbs
   the old 25px padding + 25px margin inset. */
.related-industries-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: calc(2 * var(--wt-sp-md));
    float: left;
    padding: 100px 50px 0 50px;
    margin: 0 0 -25px 0; /* cancels the last row's 25px bottom margin, as before */
}

.related-industries-container > :not(.single-related-industry) { grid-column: 1 / -1; }

.related-industries-container .title {
    line-height: 1;
    font-size: var(--wt-fs-h3);
    letter-spacing: -1px;
    margin: 0 0 20px 0;
    width: 100%;
}

.related-industries-container .single-related-industry {
    height: 300px;
    margin: 25px 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    position: relative;
}

.related-industries-container .single-related-industry a {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}

.related-industries-container .single-related-industry a:after {
    content: "";
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}

.related-industries-container .single-related-industry .item-title {
    font-family: var(--wt-font-heading);
    font-weight: 700;
    color: var(--wt-white);
    letter-spacing: -1px;
    font-size: var(--wt-fs-h4);
    margin: 0;
    line-height: 1;
    z-index: 10;
    transition: all 0.3s ease-out;
}

.related-industries-container .single-related-industry:hover .item-title {
    transform: scale(1.15, 1.15);
}

@media (max-width: 1023px) {
    /* Tiles go flush with the content edge below the laptop step (the old
       version did this with a container bleed canceling the tiles' margins;
       with the grid it's just zeroed side padding). */
    .related-industries-container {
        margin: 0 0 -25px 0;
        padding: 100px 0 0 0;
    }
}

@media (max-width: 767px) {
    .related-industries-container { grid-template-columns: 1fr; }
}

@media (max-width: 479px) {
    .related-industries-container { padding: 50px 0 0 0; }
    .related-industries-container .title { margin: 0 0 20px 0; line-height: 29px; }
    .related-industries-container .single-related-industry { margin: 25px 0 0 0; }
}

/* === Custom Loops === */

/* Card grid on `gap` (M1c): column-gap = 2 × the old 25px item margin. The
   old container bleed (±--wt-container-padding canceling the items' side
   margins) is gone, so the cards sit flush with the content edge at every
   width — including 768-1023px, where the old version dropped the bleed but
   kept the margins, insetting the cards 25px. */
.custom-loop-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: calc(2 * var(--wt-sp-md));
    float: left;
    padding: 0;
    margin: 0;
}

/* Non-card children (e.g. the products-grid block title) span the full row. */
.custom-loop-container > :not(.single-item) { grid-column: 1 / -1; }

.custom-loop-container .single-item {
    height: 210px;
    margin: 25px 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    position: relative;
}

.custom-loop-container .single-item:hover .item-title {
    transform: scale(1.15);
    transition: all 0.3s ease-out;
}

.custom-loop-container .single-item a {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding: 50px;
}

.custom-loop-container .single-item a:after {
    content: "";
    background-color: rgba(0, 0, 0, .5);
    z-index: 1;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.custom-loop-container .single-item .item-title {
    font-family: var(--wt-font-heading);
    font-weight: 700;
    color: var(--wt-white);
    letter-spacing: -1px;
    font-size: var(--wt-fs-h4);
    margin: 0;
    line-height: 1;
    z-index: 10;
    transition: all 0.3s ease-out;
    position: relative;
}

/* News loop — card grid on `gap` (M1c): column-gap = 2 × the old 25px card
   margin, no container bleed, cards flush with the content edge. Overrides
   the .vertical-align-child-elements-the-easy-way flex utility the [news]
   shortcode / home-news markup still carries (this file loads after base.css). */
.news-loop-container {
    width: 100%;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: calc(2 * var(--wt-sp-md));
    align-items: stretch;
}

.news-loop-container > :not(.single-item) { grid-column: 1 / -1; }

.news-loop-container .single-item {
    margin: 0 0 25px 0;
    height: auto;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
}

.news-loop-container .single-item .single-item-image-borders { width: 100%; height: 210px; overflow: hidden; }

.news-loop-container .single-item .single-item-image-borders .single-item-image {
    width: 100%;
    height: 210px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: all 0.3s ease-out;
}

.news-loop-container .single-item .single-item-data {
    padding: 25px;
    position: relative;
    height: calc(100% - 210px);
}

.news-loop-container .single-item .single-item-data .single-item-title {
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
    font-weight: 700;
    text-align: left;
    border-bottom: 1px solid #707070;
}

.news-loop-container .single-item .single-item-data .single-item-title a {
    color: var(--wt-dark);
    font-size: 18px;
    /* Title Case, not uppercase, in every context this card appears in
       (blog index, home news block, [news] shortcode, related-content) —
       production's Customizer Additional CSS overrides the old theme's
       uppercase the same way, unscoped by context. Explicit "none" is
       required here: text-transform inherits, and base.css's global
       `h4 { text-transform: uppercase; }` would otherwise win on this
       anchor's parent h4.single-item-title. */
    text-transform: none;
    text-decoration: none;
    line-height: 20px;
    min-height: 60px;
}

.news-loop-container .single-item .single-item-data .read-more {
    width: calc(100% - 50px);
    display: inline-block;
    color: var(--wt-dark);
    line-height: 1;
    text-decoration: underline;
    margin: 0;
    position: absolute;
    right: 25px;
    left: 25px;
    bottom: 25px;
    z-index: 1;
}

/* M7 (mobile-audit F-12): the card has a single destination (title and
   "Read more" both link the same post), so the title link is stretched to
   cover the whole text block instead of leaving only the 17px-tall "Read
   more" line tappable. Resolves against .single-item-data (already
   position:relative, above), not the full card — the thumbnail strip
   keeps its own hover-zoom only. Used by archive.php, search.php,
   template-parts/content/card-news.php and the related-content block's
   `post` variant (all share this markup). */
.news-loop-container .single-item .single-item-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.news-loop-container .single-item .single-item-data .excerpts { margin: 0 0 40px 0; }
.news-loop-container .single-item .single-item-data .excerpts p { margin: 0; overflow: hidden; }

.news-loop-container .single-item:hover .single-item-image { transform: scale(1.15); }

/* Newsroom variant — blog index, category/tag/date and event archives.
   v2 archives emit cards as direct children of .newsroom (the grid above);
   search.php wraps them in a .facetwp-template div, which spans the outer
   grid's full row and repeats the same tracks itself. */
.news-loop-container.newsroom { margin-top: 50px; }

.news-loop-container.newsroom .facetwp-template {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: inherit;
    column-gap: inherit;
    align-items: stretch;
}

.news-loop-container.newsroom .single-item { margin: 0 0 50px 0; }

@media (max-width: 767px) {
    /* plain news loop drops to 1 column, newsroom archives keep 2 */
    .news-loop-container { grid-template-columns: 1fr; }
    .news-loop-container.newsroom { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
    .news-loop-container.newsroom { grid-template-columns: 1fr; }
}

/* Testimonials archive + related-content grid card, projects archive:
   see templates.css (per-CPT/archive concern — testimonials moved in Step
   B2-4; the projects-archive rules that used to be duplicated here were
   deleted in M1c, templates.css was already the superset copy). */

@media (max-width: 1023px) {
    .custom-loop-container { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    /* ex-600px tier merged here (M1 ladder consolidation, no 600px step left):
       .custom-loop-container drops to 1-col and the projects-loop sidebar now
       stacks starting at 767px instead of 600px — the 2-col / side-by-side
       window (previously 601-1023 / 601-767) now starts at 768px. Flagged for
       a visual check in the 600-767px range. */
    .custom-loop-container { grid-template-columns: 1fr; }
    .custom-loop-container .single-item { margin: 0 0 50px 0; height: 300px; }
}

@media (max-width: 479px) {
    .custom-loop-container .single-item { margin: 0 0 21px 0; height: 300px; }
    /* .item-title already reads var(--wt-fs-h4), which steps to 20px at
       this breakpoint (base.css, M8) — no literal needed here any more. */
}

/* === Selling Points / Features === */

.selling-points-container {
    width: 100%;
    display: block;
    float: left;
    padding: 50px 50px 28px 50px;
    position: relative;
}

.selling-points-container img.logo { max-width: 250px; margin: 0 auto 28px auto; float: none; }
.selling-points-container .title { font-size: var(--wt-fs-h3); margin: 0 0 28px 0; line-height: 1; letter-spacing: -1px; }
/* Card grid on `gap` (M1c): one equal column per point (grid-auto-flow
   replaces the old :nth-last-child width ladder), column-gap = 2 × the old
   22px item margin. 22px is this component's own gutter unit from the old
   theme, not a token-scale value. */
.selling-points-container .margin-fix {
    width: 100%;
    margin: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    column-gap: 44px;
}

.selling-points-container .single-selling-point {
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    border-radius: 0 8px 8px 8px;
    margin: 22px 0;
    padding: 20px;
    position: relative;
    background-color: #eee;
}

.selling-points-container .single-selling-point:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 25px;
    background-color: var(--wt-red);
}

@media (max-width: 767px) {
    .selling-points-container .margin-fix {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 24px;
    }
    .selling-points-container .single-selling-point { margin: 12px 0; }
}

@media (max-width: 479px) {
    .selling-points-container { padding: 44px 25px 22px 25px; }
    .selling-points-container .margin-fix { grid-template-columns: 1fr; }
}

/* === Tabs ===
   One shared tab-bar mechanism (decisions.md #41, M2,
   cc-prompts/2026-10-05-m2-tabs.md): ul.main-site-tabs-navigation is a flex
   row that scrolls horizontally when its tabs don't fit, at every width —
   no breakpoint-driven structural switch, no :nth-last-child width ladder.
   Desktop keeps today's look (white bar, shadow, red active tab); tab
   widths become proportional to label length instead of forced-equal
   (accepted in #41), because flex-grow fills any leftover row space rather
   than dividing it into equal per-count percentages.
   Used by: wall-type/ACF/industry tabs (#tabs-improved — see
   inc/acf-tab-renderer.php, single-wt_industry.php) and the in-content
   tabs_block layout (acf-blocks/tabs-block.php, below). Home page tabs
   (#tabs.home-page-tabs, further down) share the same JS controller but
   keep their own underline-text skin — never reported broken on mobile
   (mobile-audit-REPORT.md, "Also verified ✓"). */

.tabbed-content { padding-top: 0; z-index: 20; position: relative; }

#tabs { padding: 0; margin: -50px 0 0 0; display: block; width: 100%; float: left; }

ul.main-site-tabs-navigation {
    display: flex;
    margin: 0; /* the nav/panel gap lives on the panels (padding-top below), so it exists with or without a nav */
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    box-shadow: 1px 3px 12px 0 rgba(0, 0, 0, 0.3);
}
ul.main-site-tabs-navigation::-webkit-scrollbar { display: none; }

/* Overflow hint — edge fade toggled by tabs.js from scrollLeft/scrollWidth.
   Not a breakpoint: the row can overflow at any width once there are
   enough tabs or long enough labels (e.g. DE). No arrows needed. */
ul.main-site-tabs-navigation.can-scroll-right {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
}
ul.main-site-tabs-navigation.can-scroll-left {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px);
    mask-image: linear-gradient(90deg, transparent, #000 36px);
}
ul.main-site-tabs-navigation.can-scroll-left.can-scroll-right {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}

ul.main-site-tabs-navigation li {
    list-style: none;
    flex: 1 0 auto; /* fill the row when labels fit; never shrink below content — the row scrolls instead */
    margin: 0;
    padding: 0;
    text-align: center;
    scroll-snap-align: start;
}

ul.main-site-tabs-navigation li a {
    width: 100%;
    display: block;
    border: 0 none;
    color: var(--wt-black);
    background-color: var(--wt-white);
    font-size: 17px;
    line-height: 20px;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap; /* labels never truncate/ellipsize — the row scrolls instead */
    margin: 0;
    padding: 40px 20px; /* >=44px effective tap target at every width (CLAUDE.md) */
    transition: background-color 0.3s ease, color 0.3s ease;
}

ul.main-site-tabs-navigation li a:hover,
ul.main-site-tabs-navigation li.ui-tabs-active a,
ul.main-site-tabs-navigation li.active a {
    background-color: var(--wt-red);
    border-bottom: 0 none;
    color: var(--wt-white);
}

ul.main-site-tabs-navigation li a:focus-visible {
    outline: 3px solid var(--wt-block-deep-blue);
    outline-offset: -3px;
}

/* Secondary tabs (M9, decisions.md #41 addendum) — tabs_block
   (acf-blocks/tabs-block.php) always adds this modifier, whether standalone
   or nested inside a primary #tabs-improved panel (e.g. prod's
   /products/trampolines/ "Models" tab, with its own Sunrise/Tropic/Aqua
   tabs). Same scrollable flex row and JS as the primary skin above — only
   size/color change, via the tokens shared with the WooCommerce product
   tabs (base.css, woocommerce-single.css) so the two stay identical. */
ul.main-site-tabs-navigation.wt-tabs--secondary {
    box-shadow: none;
}

ul.main-site-tabs-navigation.wt-tabs--secondary li a {
    padding: 0.75rem 1rem; /* >=44px effective tap target (CLAUDE.md), matches WC tabs */
    font-size: 14px;
    line-height: var(--wt-lh-body); /* unitless — same as WC tabs, which never override body's inherited value */
    color: var(--wt-tab-secondary-text);
    background-color: var(--wt-tab-secondary-bg);
}

ul.main-site-tabs-navigation.wt-tabs--secondary li a:hover,
ul.main-site-tabs-navigation.wt-tabs--secondary li.ui-tabs-active a,
ul.main-site-tabs-navigation.wt-tabs--secondary li.active a {
    background-color: var(--wt-tab-secondary-active-bg);
    color: var(--wt-tab-secondary-active-text);
}

/* In-content tabs_block panels — same active/inactive toggle as
   #tabs-improved, scoped to its own markup (.tabs-content > section.tab). */
.tabs-content > section.tab {
    display: none;
}
.tabs-content > section.tab.tab-panel-active {
    display: block;
}

.main-site-tabs-navigation-content {
    width: 100%;
    height: auto;
    float: left;
    border: 0 none;
    padding: 0;
    margin: 0;
    display: none;
    transition: all 0.6s ease;
}

#tabs-navigation {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--wt-white);
}

#tabs-improved { padding: 0; margin: -50px 0 0 0; display: block; width: 100%; float: left; }

/* Desktop: zero the pull-up. Old theme's equivalent desktop override
   (@media min-width:1251px { margin:0 !important }) — without it, hero-less
   ACF pages (page-acf.php with hide_header) pull #tabs-improved up over the
   site header/nav at desktop widths. Same specificity as the base rule
   above; wins by being later in the cascade. Step 20.12b. */
@media (min-width: 1250px) {
    #tabs-improved { margin-top: 0; }
}

/* Tab panels — hidden by default, active panel contains floats.
   Every panel carries the gap below the nav/hero as padding-top (B3-5d):
   prod got that ~100px from the floated nav UL's margin-bottom — which on
   single-tab pages came from an EMPTY floated UL intruding into the first
   heading's line box. One unconditional source instead, nav or no nav.
   The #tabs-navigation override zeroes it on the nav itself — same
   three-rule specificity pattern as the display set (no :not(#id)). */
#tabs-improved > div[id] {
    display: none;
    padding-top: var(--wt-sp-4xl);
}
#tabs-improved > div.tab-panel-active {
    display: flow-root;
    width: 100%;
}
#tabs-improved > #tabs-navigation {
    display: block;
    padding-top: 0;
}

/* bg-color panels (ACF tab_group `background_color` field) — a class from
   the renderer instead of an inline style attribute (M2, F-22). The
   `::before` full-bleed color strip (inc/acf-tab-renderer.php) still needs
   a per-instance <style> block — the color itself is dynamic — but the
   padding/position/clear that used to be an inline style attribute live
   here now, on the token scale where one fits. */
#tabs-improved > div[id].tab-panel--tinted {
    padding-top: var(--wt-sp-2xl); /* 50px — matches the old inline value exactly */
    padding-bottom: 80px; /* legacy value; no token on the scale is within the <=2px snap allowance */
    position: relative;
    clear: left;
}

@media (max-width: 1249px) {
    #tabs,
    #tabs-improved { margin: -25px 0 0 0; }
}

@media (max-width: 767px) {
    /* reduced panel gap on mobile (was the nav's 50px mobile margin) */
    #tabs-improved > div[id] { padding-top: var(--wt-sp-2xl); }
}

/* Home page tabs */
/* Home page section titles (news, projects, map, logos blocks).
   Promoted h3→h2 for heading sequence (Step 23); the class pins the
   previous h3 rendering (24px, UA 1em margins) so nothing moves. */
/* B3-5: prod renders these as h3 (29px/900, margin 0 0 25px — the base h3
   look). The element is an h2 (Step 23 outline promotion), so only the size
   needs overriding; weight and margin now come from the base rules. */
.home-section-title {
    font-size: var(--wt-fs-h3);
}

#tabs.home-page-tabs { margin: 100px 0 75px 0; }
#tabs.home-page-tabs ul {
    display: flex;
    flex-wrap: wrap; /* M2: replaces the deleted :nth-last-child ladder — equal split for any tab count, same 50/50 look at 2 tabs */
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#tabs.home-page-tabs ul li { flex: 1 1 0; min-width: 0; text-align: center; font-size: 48px; }

#tabs.home-page-tabs ul li a {
    color: #999;
    line-height: 1;
    display: inline-block;
    position: relative;
}

#tabs.home-page-tabs ul li a:focus-visible {
    outline: 3px solid var(--wt-block-deep-blue);
    outline-offset: 4px;
}

#tabs.home-page-tabs ul li a:after {
    content: "";
    background-color: transparent;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    top: 100%;
    height: 3px;
    margin-top: 5px;
}

#tabs.home-page-tabs ul li a:hover,
#tabs.home-page-tabs ul li.ui-tabs-active a,
#tabs.home-page-tabs ul li.active a { color: var(--wt-black); }

#tabs.home-page-tabs ul li a:hover:after,
#tabs.home-page-tabs ul li.ui-tabs-active a:after,
#tabs.home-page-tabs ul li.active a:after { background-color: var(--wt-red); }

/* Homepage tab panels — float containment */
.home-page-tabs > div[id] {
    display: none;
}

.home-page-tabs > div.tab-panel-active {
    display: flow-root;
}

@media (max-width: 1023px) {
    #tabs.home-page-tabs ul li { font-size: 38px; }
}

@media (max-width: 767px) {
    #tabs.home-page-tabs ul li { flex-basis: 100%; font-size: 34px; }
    #tabs.home-page-tabs ul li a { margin: 0 0 30px 0; }
}

/* ========================================================================
   Homepage sections — stacking context fix

   The home page tabs container (#tabs.home-page-tabs) is tall (the active
   panel can be 2000px+), and following sections (#testimonials,
   #projects-map, #home_logos) have solid backgrounds. Without explicit
   z-index on the tabs container, children of later sections can hit-test
   in front of tab links, blocking clicks on inactive tabs (e.g.
   "Industries" tab unclickable, covered by H3 inside #testimonials).

   Fix: give #tabs its own stacking context (z-index: 10) and pin the
   following homepage sections behind it (z-index: 1 each). Matches the
   old theme's approach in style.css (`.tabbed-content z-index: 20`).
   ======================================================================== */

#tabs.home-page-tabs {
    position: relative;
    z-index: 10;
}

#testimonials,
#projects-map,
#home_logos {
    position: relative;
    z-index: 1;
    /* #tabs is floated (float: left) — without clearing, these sections'
       boxes flow UP alongside the float and the grey band ::before paints
       over the tabs. Old theme: style.css `#testimonials,#projects-map,
       #home_logos {clear: left;}`. */
    clear: left;
}

/* Full-bleed grey band (old theme style.css). The sections sit inside
   .content-container (max 1250px); the ::before stretches the background to
   the viewport edges — page-home.php's overflow:hidden wrapper clips the
   overshoot. Children need position:relative so their own backgrounds paint
   above the absolutely-positioned ::before. */
#testimonials.background-e9f1f1::before,
#projects-map.background-e9f1f1::before,
#home_logos.background-e9f1f1::before {
    content: '';
    display: block;
    position: absolute;
    left: -9999px;
    right: -9999px;
    top: 0;
    height: 100%;
    background-color: #e9f1f1;
}

#testimonials.background-e9f1f1 > div,
#projects-map.background-e9f1f1 > *,
#home_logos.background-e9f1f1 > * {
    position: relative;
}

/* === Slick Slider === */

.slick-slider { position: relative; display: block; box-sizing: border-box; user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; }

.slick-slider .slick-track,
.slick-slider .slick-list { transform: translate3d(0, 0, 0); }

.slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; }
.slick-track:before,
.slick-track:after { display: table; content: ''; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }

.slick-slide { display: none; float: left; height: 100%; min-height: 1px; }
.slick-slide img { display: block; }
.slick-initialized .slick-slide { display: block; }
.slick-arrow.slick-hidden { display: none; }

/* Slick theme */
.slick-prev,
.slick-next {
    font-size: 20px;
    line-height: 0;
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: rgba(0, 0, 0, .5);
    z-index: 10;
    text-indent: 20000px;
    overflow: hidden;
    transition: all 0.6s ease;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus { color: var(--wt-white); outline: none; background: var(--wt-red); }

/* M6: outline:none above with no replacement (F-20) — restore it for keyboard focus. */
.slick-prev:focus-visible,
.slick-next:focus-visible {
    outline: 2px solid var(--wt-focus-color);
    outline-offset: 2px;
}

.slick-prev:before,
.slick-next:before {
    font-family: var(--wt-font-icons);
    font-size: 20px;
    line-height: 40px;
    opacity: 1;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: block;
    width: 100%;
    float: left;
    text-indent: 0;
}

.slick-prev { left: 0; right: unset; }
.slick-prev:before { content: "\e84e"; }
.slick-next { right: 0; left: unset; }
.slick-next:before { content: "\e84f"; }

.slick-dotted.slick-slider { margin-bottom: 0; }

.slick-dots {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    width: 100%;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    font-size: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

/* M6: outline:none above with no replacement (F-20) — restore it for keyboard focus. */
.slick-dots li button:focus-visible {
    outline: 2px solid var(--wt-focus-color);
    outline-offset: 2px;
}

.slick-dots li button:before {
    font-family: var(--wt-font-icons);
    content: "\e833";
    font-size: 12px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before { opacity: .75; color: black; }

/* === Homepage testimonials slider card ===
   Ported from old theme style.css (.testimonials-loop-container block).
   The v2 slider is Swiper, not slick — Swiper-specific overrides (nav
   buttons, pagination) live in sliders.css. Quote icon keeps the wt-icons
   glyph (\e829) rather than an inline SVG: the font is already loaded
   globally (nav, slick arrows), so the glyph adds zero payload and matches
   production pixel-for-pixel. */

.testimonials-loop-container .single-testimonial {
    background-color: #fff;
    padding: 25px 25px 0 25px;
    position: relative;
    overflow: hidden;
}

.testimonials-loop-container .single-testimonial::before {
    content: "\e829";
    font-family: var(--wt-font-icons);
    color: var(--wt-red);
    position: absolute;
    left: 25px;
    top: 15px;
    font-size: 22px;
}

.testimonials-loop-container .single-testimonial .title {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0;
    font-style: italic;
    font-weight: 700;
    margin: 18px 0 25px 0;
}

.testimonials-loop-container .single-testimonial .content {
    font-size: 16px;
    margin: 0 0 50px 0;
}

.testimonials-loop-container .single-testimonial .content p { margin: 0; }

.testimonials-loop-container .single-testimonial .testimonial-read-more {
    display: inline-block;
    color: #000;
    text-decoration: underline;
}

.testimonials-loop-container .single-testimonial .testimonial-read-more:hover {
    color: #666;
    text-decoration: underline;
}

/* M7 (mobile-audit F-13): "read more" is the card's only link — stretch it
   across the whole slide (.single-testimonial is already position:relative,
   above) instead of leaving only its own text line tappable. */
.testimonials-loop-container .single-testimonial .testimonial-read-more::after {
    content: "";
    position: absolute;
    inset: 0;
}

.testimonials-loop-container .single-testimonial .dark-part {
    /* bleeds against the card's own 25px padding (.single-testimonial),
       not the page container — --wt-sp-md, not --wt-container-padding. */
    background-color: #2c2e3d;
    margin: 0 calc(-1 * var(--wt-sp-md));
    width: calc(100% + 2 * var(--wt-sp-md));
    padding: var(--wt-sp-md);
}

.testimonials-loop-container .single-testimonial .dark-part .author {
    margin: 0;
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: 0;
}

.testimonials-loop-container .single-testimonial .dark-part .author-position {
    margin: 0;
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    letter-spacing: 0;
}

/* === Home Page Components === */

/* Slider */
.slider-container { width: 100%; display: block; float: left; z-index: 9; position: relative; }

.slider-container .single-slider-container {
    height: 610px;
    width: 100%;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.slider-container .single-slider-container .slider-url {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slider-container .single-slider-container .tinted-area {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .4);
    padding: 11px 0;
}

.slider-container .single-slider-container .tinted-area .slide-title {
    width: auto;
    display: block;
    float: left;
    color: var(--wt-white);
    letter-spacing: -1px;
    text-transform: none;
    font-size: 30px;
    line-height: 40px;
    font-weight: 900;
    margin: 0;
}

.slider-container .single-slider-container .tinted-area .slide-text {
    width: auto;
    display: block;
    float: left;
    margin: 0;
    color: var(--wt-white);
    font-size: 30px;
    line-height: 40px;
    font-family: var(--wt-font-heading);
}

@media (max-width: 1249px) {
    .slider-container .single-slider-container { height: 500px; }
}

@media (max-width: 767px) {
    .slider-container .single-slider-container .tinted-area .slide-title,
    .slider-container .single-slider-container .tinted-area .slide-text { width: 100%; font-size: 25px; }
    .slider-container .single-slider-container .tinted-area .slide-text.separator { display: none; }
}

@media (max-width: 479px) {
    /* M8: missing phone step added, same proportional reduction as the
       other hero-title families in this file. */
    .slider-container .single-slider-container .tinted-area .slide-title,
    .slider-container .single-slider-container .tinted-area .slide-text { font-size: 22px; line-height: 1.3; }
}

/* FacetWP map data source — visually hidden, accessible to FacetWP JS */
#projects-map {
    position: relative;
}

#projects-map .hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* FacetWP map facet's own "Enable map filtering" opt-in button — production
   hides it outright (style.css: .facetwp-facet.facetwp-type-map
   .facetwp-map-filtering{display:none}). It only lets a visitor toggle
   filter-by-map-bounds; hiding it just means that mode never activates. */
#projects-map .facetwp-map-filtering {
    display: none;
}

/* Earth globe */
.earth-container { max-width: 1200px; }

/* Partners logos */
.partners-logos img { width: 100%; height: auto; float: left; padding: 20px; }

/* Formidable contact form — Montserrat + Send button.
   .frm_forms is Formidable's own stable wrapper class, present on every
   rendered form regardless of which page/template embeds the shortcode
   (this contact form appears in ACF WYSIWYG content across several
   product/landing pages, not just one), so it stays here in the global
   components.css button/typography component rather than a conditional
   file. CSS-only, no template override, per decisions.md. Browsers don't
   inherit body font-family into form controls by default, hence the
   explicit input/textarea/select/button list.

   Font (M5): Montserrat, not Open Sans — verified against production's
   blog-sidebar "Contact form" widget (same form id=2 embed), which renders
   every one of these elements in Montserrat; the separate legacy
   /contact-us/ page renders the same form in Open Sans, but that page is
   being retired (decisions.md #41 Part 3) and isn't the reference here.

   Specificity fix: Formidable's own CSS sets font-family on several of
   these elements too, at up to (0,3,1) (e.g.
   `.frm_style_formidable-style.with_frm_style .frm_submit button`).
   `.frm_forms` and `.with_frm_style` are both already present together on
   the same form wrapper, so repeating them (no functional effect, same
   element) bumps our compound to (0,4,0) — verified live to beat every
   competing Formidable rule outright rather than tying on source order. */
.frm_forms.frm_forms.with_frm_style.with_frm_style,
.frm_forms.frm_forms.with_frm_style.with_frm_style input,
.frm_forms.frm_forms.with_frm_style.with_frm_style textarea,
.frm_forms.frm_forms.with_frm_style.with_frm_style select,
.frm_forms.frm_forms.with_frm_style.with_frm_style button,
.frm_forms.frm_forms.with_frm_style.with_frm_style label,
.frm_forms.frm_forms.with_frm_style.with_frm_style .frm_form_title {
    font-family: var(--wt-font-heading);
}

/* Form title (P3 task B): Formidable's own admin-ajax.php CSS sets
   `.with_frm_style h3.frm_form_title { font-size: var(--title-size) }`,
   where --title-size is an admin-configured custom property on the form
   wrapper — verified live at 40px, i.e. the same value as --wt-fs-h1. Where
   this title is visible (the blog sidebar's "Contact us" widget) it reads
   larger than the post title itself. Sized like the sidebar's other widget
   heading (.widget-title, an h4) instead, using the same specificity-beating
   selector as above. Where the title is hidden (contact-us-acf's
   screen-reader-only <legend>, a main-content context with its own ACF
   heading) this has no visible effect. */
.frm_forms.frm_forms.with_frm_style.with_frm_style .frm_form_title {
    font-size: var(--wt-fs-h4);
}

/* iOS focus-zoom fix (M5, mobile-audit F-8 / contact-acf C-1): Formidable's
   own styles render text inputs/select/textarea at 14px. Set to the body
   token everywhere (not just ≤479px) — one value, same rule the "fix, don't
   copy" / token-driven CSS convention favors over a width-gated override,
   and it's already ≥16px so there's nothing to gate. min-height covers the
   44px tap-target floor (CLAUDE.md) regardless of line-height quirks. */
.frm_forms.frm_forms.with_frm_style.with_frm_style input[type="text"],
.frm_forms.frm_forms.with_frm_style.with_frm_style input[type="email"],
.frm_forms.frm_forms.with_frm_style.with_frm_style input[type="tel"],
.frm_forms.frm_forms.with_frm_style.with_frm_style textarea,
.frm_forms.frm_forms.with_frm_style.with_frm_style select {
    font-size: var(--wt-fs-body);
    min-height: 44px;
    box-sizing: border-box;
}

/* The Send button is already 52px tall (15px 60px padding, verified live) —
   comfortably over the 44px floor — so it needs no min-height/font-size
   override here; its font-size is set by Formidable's own generated CSS
   (admin-ajax.php) at a specificity this scope could not beat live even
   with !important testing, so it's left alone rather than shipping a rule
   with no effect. Font-family (Montserrat) still applies via the rule
   above, which does take effect. */

/* Checkbox/radio labels: Formidable sets their font-size via its own
   --check-font-size custom property (`.with_frm_style { --check-font-size:
   13px }`, specificity (0,1,0)); redefining the variable's value inside our
   already-higher-specificity scope above beats it without fighting
   font-size directly. Body token (17px) — matches production's checkbox-
   label size measured live on walltopia.com (M5c; M5's 14px small-token
   guess was never checked against prod). */
.frm_forms.frm_forms.with_frm_style.with_frm_style {
    --check-font-size: var(--wt-fs-body);
}

/* Checkbox/radio row tap target (CLAUDE.md): Formidable wraps each option
   as `label > input + text`. Checkbox/radio lists use the 24px WCAG 2.5.8
   floor, not the 44px standalone-control target (M5c amendment) — row
   pitch measured live on production is exactly 24px (label line-height),
   with rows packed edge-to-edge and no inter-row margin. flex + min-height
   grows the hit area to the full row width without touching the visual
   checkbox or text size. Applies to every checkbox/radio group in every
   Formidable form, not just the product-interest list. */
.frm_forms.frm_forms.with_frm_style.with_frm_style .frm_checkbox label,
.frm_forms.frm_forms.with_frm_style.with_frm_style .frm_radio label {
    display: flex;
    align-items: flex-start;
    min-height: 24px;
}

/* M5c follow-up: align-items: flex-start above keeps the hanging indent on
   a wrapped second line (it sits in the text's own flex item, under the
   text, not under the checkbox) but needs the checkbox nudged down to stay
   centered on the FIRST line instead of the whole (possibly multi-line)
   label box. 13px = this checkbox's rendered size (measured live, both
   here and on production). The em line precedes the 1lh line as a fallback
   for browsers without line-height units support (pre-Chromium 128/pre-
   Safari 16.4) — invalid `1lh` there leaves the em value in place. For a
   single-line label this is mathematically identical to align-items:
   center (half the line's leftover space above an item exactly as tall as
   the line itself), so single-line rows are unchanged. */
.frm_forms.frm_forms.with_frm_style.with_frm_style .frm_checkbox label input[type="checkbox"],
.frm_forms.frm_forms.with_frm_style.with_frm_style .frm_radio label input[type="radio"] {
    flex-shrink: 0;
    margin-top: calc((1.41em - 13px) / 2);
    margin-top: calc((1lh - 13px) / 2);
}

/* Visible keyboard focus on every control (M5) — Formidable's own styles
   don't draw one. */
.frm_forms.frm_forms.with_frm_style.with_frm_style input:focus-visible,
.frm_forms.frm_forms.with_frm_style.with_frm_style textarea:focus-visible,
.frm_forms.frm_forms.with_frm_style.with_frm_style select:focus-visible,
.frm_forms.frm_forms.with_frm_style.with_frm_style button:focus-visible {
    outline: 2px solid var(--wt-red);
    outline-offset: 2px;
}

/* Formidable "Which product are you interested in?" checkbox list
   (field key field_yi8az) — renders as one long single column by default.
   Retargeted per live staging DOM inspection (Step 20.12b correction):
   no .frm_opt_container in the actual markup. Real chain is
   label > div.frm_checkbox (per item) > div.frm_form_field
   (frm_required_field frm_top_container frm12 frm_first vertical_radio)
   > div.frm_fields_container. Scoped via :has() to this field only so
   other Formidable checkbox/radio groups keep single-column. */
.frm_form_field:has([id^="field_yi8az"]) {
    column-count: 2;
    column-gap: 2rem;
}

.frm_form_field:has([id^="field_yi8az"]) > .frm_primary_label {
    column-span: all;
}

.frm_form_field:has([id^="field_yi8az"]) .frm_checkbox {
    break-inside: avoid;
}

/* M5: moved from the tablet step (767px) to the phone step (479px) of the
   M1 ladder — two-column field pairs (first/last name, email/phone; see
   the frm6 override below) and this checkbox list now stay two-column from
   tablet up, stacking only at phone width. */
@media (max-width: 479px) {
    .frm_form_field:has([id^="field_yi8az"]) {
        column-count: 1;
    }
}

/* M5: two-column field pairs (first/last name, email/phone — both use
   Formidable's own `.frm6` = `grid-column: span 6` half-width class) must
   stay two-column from the tablet step up; Formidable's own responsive CSS
   already collapses every field to full width below 600px
   (`.frm_fields_container > .frm_form_field { grid-column: 1 / span 12
   !important }`), which is narrower than this project's phone step (479px)
   — so 480–599px would otherwise stack early. `!important` is normally
   banned (CLAUDE.md) outside legacy-compat.css/utility classes, but beating
   a vendor rule that is itself `!important` has no non-`!important` route;
   scoped to exactly this one property/selector. */
@media (min-width: 480px) and (max-width: 767px) {
    .frm_fields_container > .frm_form_field.frm6 {
        grid-column: 1 / span 6 !important;
    }
}