/* ============================================================
   ALLY_MONDAY — SITE HEADER + SITE FOOTER
   ------------------------------------------------------------
   First-party presentation layer for this template's own
   partials/site_header.php and partials/site_footer.php.
   Structure and navigation logic live in those files and in the
   shared navigation engine — this file is PRESENTATION ONLY.

   ── ALLY IDENTITY ──────────────────────────────────────────
   NAVY + BLUE + WHITE + COOL NEUTRAL. Navy is the structure,
   white is the content, blue is the only accent, cool blue-grey
   carries muted text. There is deliberately NO terracotta/orange
   anywhere in the header or footer.

   WHY THIS FILE DEFINES ITS OWN PALETTE (§1a) INSTEAD OF
   RE-POINTING A GLOBAL TOKEN:
   this template's --mt-accent (00-tokens.css, #E85D2F terracotta)
   is the orange source. That token file IS template-scoped — it
   only loads for ally_monday, so editing it could not affect
   fable5 / AnuAi / engineering-one. But it is shared by every
   OTHER ally_monday module (Hero, Services, About, CTA, Programs,
   Projects, Process Flow, Testimonials, Trust Bar…), which are all
   outside this task's scope and legitimately still use terracotta.
   Re-valuing --mt-accent would silently restyle the whole site.
   So the Ally header/footer palette is established HERE, at the
   correct template-AND-component-scoped level, and this file makes
   ZERO references to --mt-accent. Nothing below can emit orange.

   ── HEADER vs FOOTER ───────────────────────────────────────
   They share the system but are deliberately not identical:
   HEADER = lighter navy, compact, tight rhythm, navigation-focused.
   FOOTER = deeper navy, generous spacing, layered surfaces,
   information-focused.

   ── STUDIO READINESS ───────────────────────────────────────
   §1a is the raw palette; §1b is the semantic layer every rule
   below actually reads. A future Studio presentation layer can
   restyle the header/footer by re-declaring any variable in §1 —
   colour, spacing, radius, shadow, CTA treatment — and never needs
   to touch a selector or the PHP structure. Values are chosen in
   exactly one place; no rule below §1 hardcodes a colour.
============================================================ */


/* ============================================================
   §1a  ALLY PALETTE — raw values, chosen once.
============================================================ */
body.tpl-plusfab_industrial {
    /* PLUSFAB PALETTE (2026-10-01). The --ally-* variable NAMES are kept
       on purpose -- 103 existing rules across 10 module files read them --
       only the VALUES change: navy -> graphite, blue -> copper/steel.
       Renaming is a later, optional cleanup. */

    /* Graphite scale (was navy) — light (header) to deep (footer base) */
    --ally-navy-600: #2B3035;  /* graphite light: dropdown    */
    --ally-navy-700: #1E2226;  /* GRAPHITE (brand primary)    */
    --ally-navy-800: #1A1D21;  /* footer raised panels/chips  */
    --ally-navy-900: #131619;  /* DEEP GRAPHITE: footer, Hero */

    /* Accent (was blue) — restrained copper; steel for icons on dark */
    --ally-blue-300: #C5CBD0;  /* brushed steel: icons on dark          */
    --ally-blue-400: #B8733A;  /* copper: markers, rules, hover lines   */
    --ally-blue-500: #9C5F2D;  /* dark copper: accent TEXT on light (~5:1) */

    /* Neutrals */
    --ally-white:       #FFFFFF;
    --ally-grey-200:    #E1E4E7;  /* steel mist: near-white, CTA hover */
    --ally-grey-400:    #B9BFC5;  /* muted text on dark                */
    --ally-grey-500:    #8A939B;  /* stainless: subtle / legal text    */

    /* White transparencies — separators and glass surfaces (dark-surface
       contexts only: the Footer, and the Header's own dark dropdown flyout,
       which stays dark by deliberate choice — see §5's own note). */
    --ally-line-faint:  rgba(255, 255, 255, 0.07);
    --ally-line:        rgba(255, 255, 255, 0.11);
    --ally-line-strong: rgba(255, 255, 255, 0.18);
    --ally-wash:        rgba(255, 255, 255, 0.06);

    /* Header Direction 1 — "Confident Light Brand" (2026-09-19): the
       Header surface moved from navy to white/light (§1b), so it needs
       the INVERSE of the white-transparency trio above — navy at low
       alpha, for separators/washes that read on a LIGHT surface. Mirrors
       the exact naming + alpha steps of --ally-line*/--ally-wash above,
       just navy-tinted instead of white-tinted; a genuinely new, missing
       semantic concept (this file had no light-surface separator/wash
       before this pass), not a scattered one-off value. */
    --ally-hairline-faint:  rgba(30, 34, 38, 0.06);   /* graphite at 6%  */
    --ally-hairline:        rgba(30, 34, 38, 0.10);   /* graphite at 10% */
    --ally-hairline-strong: rgba(30, 34, 38, 0.18);   /* graphite at 18% */
    --ally-blue-wash:       rgba(184, 115, 58, 0.08); /* copper at 8% — hover/focus wash on light surfaces */
}


/* ============================================================
   §1b  SEMANTIC PRESENTATION VARIABLES — what the rules read.
   Override these to restyle. Nothing below hardcodes a colour.
============================================================ */
body.tpl-plusfab_industrial {
    /* —— Header: surface ——
       Direction 1 — "Confident Light Brand" (2026-09-19): the Header
       moves from a solid navy block to a light/white surface, creating a
       deliberate LIGHT HEADER -> DARK HERO -> LIGHT TRUST BAR sequence.
       Only the values below changed — the raw-palette -> semantic-token
       -> component-rule chain is unchanged, and no component rule below
       §2 was touched for this. */
    --mt-header-bg:            var(--ally-white);
    --mt-header-height:        88px;   /* PlusFab: slightly tighter bar */
    --mt-header-divider:       var(--ally-hairline);
    --mt-header-shadow:        inset 0 -1px 0 var(--mt-header-divider);
    /* Scroll elevation kept the same neutral dark shadow colour (never
       tied to the header's own surface colour), intensity reduced from
       the navy-bar tuning (.40) to a value that reads as a considered
       lift, not a heavy shadow, under a light bar. */
    --mt-header-shadow-scroll: inset 0 -1px 0 var(--mt-header-divider),
                               0 8px 24px rgba(6, 12, 24, 0.14);

    /* —— Header: navigation ——
       Hierarchy is now carried by weight + the blue underline, not by a
       resting/hover colour split — both the resting and emphasised nav
       text read as the SAME confident navy on a light surface (this is
       why --mt-header-fg and --mt-header-fg-muted intentionally share one
       value below; the two semantic names are kept so a future edit can
       re-diverge them without touching any component rule). */
    --mt-header-fg:            var(--ally-navy-700);
    --mt-header-fg-muted:      var(--ally-navy-700);
    --mt-header-accent:        var(--ally-blue-400);
    /* PlusFab: no hover wash / pill -- hover is a steel underline (§4b). */
    --mt-header-hover-bg:      transparent;
    --mt-header-link-px:       var(--mt-space-4, 16px);
    --mt-header-link-py:       var(--mt-space-3, 12px);
    --mt-header-link-radius:   0;

    /* —— Header: CTA — solid navy on white: the brand colour becomes
       the primary action, inverted from the prior white-on-navy
       treatment now that the surface itself is light. Still zero
       decoration — one solid fill, one hover step, same pill shape. —— */
    --mt-header-cta-bg:        var(--ally-navy-700);
    --mt-header-cta-bg-hover:  var(--ally-navy-600);
    --mt-header-cta-fg:        var(--ally-white);
    /* PlusFab: square-ish (6px, same as the Hero buttons), flat. */
    --mt-header-cta-radius:    var(--mt-radius-sm, 6px);
    --mt-header-cta-shadow:    none;

    /* —— Header: dropdown —— PlusFab: a white flyout with a steel
       border (was a dark navy flyout). */
    --mt-dropdown-bg:          var(--ally-white);
    --mt-dropdown-fg:          #3E444A;
    --mt-dropdown-fg-hover:    #16191C;
    --mt-dropdown-hover-bg:    #F3F4F5;
    --mt-dropdown-border:      #E1E4E7;
    --mt-dropdown-radius:      var(--mt-radius-xs, 4px);
    --mt-dropdown-shadow:      0 16px 40px rgba(19, 22, 25, 0.12);

    /* —— Footer: surface — deeper than the header, on purpose —— */
    --mt-footer-bg:            var(--ally-navy-900);
    --mt-footer-panel-bg:      var(--ally-navy-800);
    --mt-footer-py:            var(--mt-space-20, 80px);
    --mt-footer-divider:       var(--ally-line-faint);
    --mt-footer-divider-hard:  var(--ally-line);

    /* —— Footer: text —— */
    --mt-footer-fg:            var(--ally-grey-400);
    --mt-footer-fg-strong:     var(--ally-white);
    --mt-footer-heading:       var(--ally-grey-500);
    --mt-footer-legal:         var(--ally-grey-500);

    /* —— Footer: accents + controls —— */
    --mt-footer-accent:        var(--ally-blue-400);
    --mt-footer-icon:          var(--ally-blue-300);
    --mt-footer-chip-bg:       var(--ally-navy-800);
    --mt-footer-chip-border:   var(--ally-line);
    --mt-footer-chip-hover:    var(--ally-blue-500);
    --mt-footer-radius:        var(--mt-radius-md, 10px);
}


/* ============================================================
   §2  HEADER — shell
   Three nested boxes take the same surface so the bar reads as
   one solid plane: <header> → .fixed-header-stack → .navbar.
   The .navbar is innermost and is what the visitor actually
   sees; the ancestors are painted so the fixed/spacer area never
   flashes a different colour.
============================================================ */
body.tpl-plusfab_industrial header.mt-site-header,
body.tpl-plusfab_industrial .site-header.mt-site-header {
    background: var(--mt-header-bg);
}

body.tpl-plusfab_industrial .mt-site-header .fixed-header-stack {
    background: var(--mt-header-bg);
}

body.tpl-plusfab_industrial .mt-site-header__bar {
    min-height: var(--mt-header-height);
    padding: 0;
    background: var(--mt-header-bg);
    box-shadow: var(--mt-header-shadow);
    transition: box-shadow var(--mt-duration-normal, 240ms) var(--mt-ease-default, ease);
}

/* Elevation on scroll. `.scrolled` is toggled on the .navbar by the
   shared web/assets/js/main.js — an existing hook, no JS change. */
body.tpl-plusfab_industrial .mt-site-header__bar.scrolled {
    box-shadow: var(--mt-header-shadow-scroll);
}

body.tpl-plusfab_industrial .header-spacer {
    height: var(--mt-header-height);
}

body.tpl-plusfab_industrial .mt-site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--mt-space-4, 16px);
}


/* ============================================================
   §3  HEADER — logo
============================================================ */
body.tpl-plusfab_industrial .mt-site-header__logo {
    display: flex;
    align-items: center;
    padding: 0;
    margin-right: var(--mt-space-3, 12px);
}
body.tpl-plusfab_industrial .mt-site-header__logo .site-logo {
    /* Direction 1: enlarged from 42px so the mark has real presence at
       the new 92px header height. The logo file itself is unchanged —
       its white background (previously a visible box on the dark
       header) is now simply the header's own surface colour. */
    max-height: 60px;
    width: auto;
    display: block;
}


/* ============================================================
   §4  HEADER — navigation
   Direction 1 (2026-09-19, supersedes the original dark-header note):
   hierarchy is carried by weight and the blue underline, never by hue —
   resting AND active links are the same confident navy, hover adds a
   soft blue-tinted wash, and the active item additionally gets
   semibold weight plus a short blue underline.
============================================================ */
body.tpl-plusfab_industrial .mt-site-header__nav {
    align-items: center;
    gap: var(--mt-space-2, 8px);
}

body.tpl-plusfab_industrial .mt-site-header__nav .nav-link {
    position: relative;
    display: block;
    color: var(--mt-header-fg-muted);
    font-size: var(--mt-text-base, 1rem);
    font-weight: var(--mt-weight-medium, 500);
    letter-spacing: 0.01em;
    padding: var(--mt-header-link-py) var(--mt-header-link-px);
    border-radius: var(--mt-header-link-radius);
    transition: color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease),
                background-color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease);
}

body.tpl-plusfab_industrial .mt-site-header__nav .nav-link:hover {
    color: var(--mt-header-fg);
    background: var(--mt-header-hover-bg);
}

body.tpl-plusfab_industrial .mt-site-header__nav .nav-link.active {
    color: var(--mt-header-fg);
    font-weight: var(--mt-weight-semibold, 600);
}

/* The one accent marker in the navigation. */
body.tpl-plusfab_industrial .mt-site-header__nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: var(--mt-header-link-px);
    right: var(--mt-header-link-px);
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--mt-header-accent);
}

body.tpl-plusfab_industrial .mt-site-header__nav .nav-link:focus-visible {
    color: var(--mt-header-fg);
    outline: 2px solid var(--mt-header-accent);
    outline-offset: 2px;
}

/* Bootstrap's caret on .dropdown-toggle — align and soften it. */
body.tpl-plusfab_industrial .mt-site-header__nav .dropdown-toggle::after {
    margin-left: 0.4em;
    vertical-align: 0.15em;
    opacity: 0.65;
}


/* ============================================================
   §5  HEADER — dropdown menu
   Direction 1 (2026-09-19): left dark on purpose. An elevated dark
   flyout beneath a light nav bar is a deliberate, common, legible
   pattern — not an oversight — and it means the dropdown's own tokens
   (--mt-dropdown-*, still built on --ally-navy-600 / --ally-line /
   --ally-wash) needed no change at all for this pass.
============================================================ */
body.tpl-plusfab_industrial .mt-site-header .dropdown-menu {
    margin-top: var(--mt-space-2, 8px);
    padding: var(--mt-space-2, 8px);
    background: var(--mt-dropdown-bg);
    border: 1px solid var(--mt-dropdown-border);
    border-radius: var(--mt-dropdown-radius);
    box-shadow: var(--mt-dropdown-shadow);
}

body.tpl-plusfab_industrial .mt-site-header .dropdown-item {
    color: var(--mt-dropdown-fg);
    font-size: var(--mt-text-sm, 0.9rem);
    padding: var(--mt-space-2, 8px) var(--mt-space-3, 12px);
    border-radius: var(--mt-radius-sm, 6px);
    transition: color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease),
                background-color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease);
}

body.tpl-plusfab_industrial .mt-site-header .dropdown-item:hover,
body.tpl-plusfab_industrial .mt-site-header .dropdown-item:focus,
body.tpl-plusfab_industrial .mt-site-header .dropdown-item.active {
    background: var(--mt-dropdown-hover-bg);
    color: var(--mt-dropdown-fg-hover);
}

/* Current service reads as current without shouting. */
body.tpl-plusfab_industrial .mt-site-header .dropdown-item.active {
    box-shadow: inset 2px 0 0 var(--mt-header-accent);
}


/* ============================================================
   §6  HEADER — CTA
   Rendered by the shared navigation engine as
   li.nav-item.ms-lg-2 > a.btn.btn-primary.btn-sm — styled here,
   never re-marked-up.
============================================================ */
body.tpl-plusfab_industrial .mt-site-header__nav .nav-item.ms-lg-2 .btn-primary {
    background: var(--mt-header-cta-bg);
    border-color: var(--mt-header-cta-bg);
    color: var(--mt-header-cta-fg);
    border-radius: var(--mt-header-cta-radius);
    padding: 0.65rem var(--mt-space-6, 24px);
    font-size: var(--mt-text-base, 1rem);
    font-weight: var(--mt-weight-semibold, 600);
    letter-spacing: 0.01em;
    box-shadow: var(--mt-header-cta-shadow);
    transition: transform var(--mt-duration-normal, 240ms) var(--mt-ease-default, ease),
                background-color var(--mt-duration-normal, 240ms) var(--mt-ease-default, ease);
}

body.tpl-plusfab_industrial .mt-site-header__nav .nav-item.ms-lg-2 .btn-primary:hover,
body.tpl-plusfab_industrial .mt-site-header__nav .nav-item.ms-lg-2 .btn-primary:focus-visible {
    background: var(--mt-header-cta-bg-hover);
    border-color: var(--mt-header-cta-bg-hover);
    color: var(--mt-header-cta-fg);
    transform: translateY(-1px);
}

body.tpl-plusfab_industrial .mt-site-header__nav .nav-item.ms-lg-2 .btn-primary:focus-visible {
    outline: 2px solid var(--mt-header-accent);
    outline-offset: 3px;
}

body.tpl-plusfab_industrial .mt-site-header__nav .nav-item.ms-lg-2 .btn-primary:active {
    transform: translateY(0);
}


/* ============================================================
   §7  HEADER — mobile toggler + collapsed panel
============================================================ */
body.tpl-plusfab_industrial .mt-site-header .navbar-toggler {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--ally-hairline-strong);
    border-radius: var(--mt-radius-md, 10px);
}
body.tpl-plusfab_industrial .mt-site-header .navbar-toggler:focus {
    box-shadow: 0 0 0 3px var(--ally-blue-wash);
}
/* Direction 1: navy-lined icon — the header is light now, so the prior
   white-lined icon (tuned for a navy bar) would be invisible. Same SVG,
   same stroke width/opacity, navy instead of white. */
body.tpl-plusfab_industrial .mt-site-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(20, 33, 61, 0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 991px) {
    body.tpl-plusfab_industrial .mt-site-header__collapse {
        background: var(--mt-header-bg);
        border-top: 1px solid var(--mt-header-divider);
        margin-top: var(--mt-space-3, 12px);
        padding: var(--mt-space-3, 12px) 0 var(--mt-space-4, 16px);
    }

    /* Stacked links get a full-width touch target and a hairline
       between them instead of the desktop pill hover. */
    body.tpl-plusfab_industrial .mt-site-header__nav .nav-link {
        border-radius: 0;
        padding: var(--mt-space-3, 12px) var(--mt-space-2, 8px);
        border-bottom: 1px solid var(--ally-hairline-faint);
    }
    body.tpl-plusfab_industrial .mt-site-header__nav .nav-link:hover {
        background: transparent;
        color: var(--mt-header-accent);
    }
    /* An underline doesn't read in a stacked list — use a left rule. */
    body.tpl-plusfab_industrial .mt-site-header__nav .nav-link.active::after {
        left: calc(var(--mt-space-2, 8px) * -1);
        right: auto;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        width: 2px;
        height: 18px;
    }

    body.tpl-plusfab_industrial .mt-site-header .dropdown-menu {
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0 0 var(--mt-space-2, 8px) var(--mt-space-4, 16px);
    }
    /* Direction 1 fix: the dropdown-menu above goes transparent on mobile
       and sits directly on the (now light) collapse panel — but
       .dropdown-item's own colour, --mt-dropdown-fg, is a light grey-blue
       tuned for the dark dropdown flyout (§5). Left unchanged, mobile
       Service-domain sub-links would render nearly illegible on the light
       panel. Re-point to the same navy/blue the surrounding stacked
       nav-links already use — no new token, same mobile-nav language. */
    body.tpl-plusfab_industrial .mt-site-header .dropdown-item {
        color: var(--mt-header-fg-muted);
    }
    body.tpl-plusfab_industrial .mt-site-header .dropdown-item:hover,
    body.tpl-plusfab_industrial .mt-site-header .dropdown-item:focus,
    body.tpl-plusfab_industrial .mt-site-header .dropdown-item.active {
        background: transparent;
        color: var(--mt-header-accent);
    }

    body.tpl-plusfab_industrial .mt-site-header__nav .nav-item.ms-lg-2 {
        margin-top: var(--mt-space-4, 16px);
    }
    body.tpl-plusfab_industrial .mt-site-header__nav .nav-item.ms-lg-2 .btn-primary {
        display: block;
        text-align: center;
    }
}


/* ============================================================
   §7b  PLUSFAB HEADER (2026-10-01) -- presentation layer.
   Same markup, same navigation engine; typography + markers only.
   Archivo uppercase navigation, graphite on white, a steel underline
   on hover and a square copper underline on the active item (the one
   accent), a flat graphite CTA, and a graphite menu icon.
============================================================ */
body.tpl-plusfab_industrial .mt-site-header__bar {
    border-bottom: 1px solid #E1E4E7;
    box-shadow: none;
}
body.tpl-plusfab_industrial .mt-site-header__bar.scrolled {
    box-shadow: 0 6px 20px rgba(19, 22, 25, 0.08);
}

body.tpl-plusfab_industrial .mt-site-header__logo .site-logo {
    max-height: 56px;
}

body.tpl-plusfab_industrial .mt-site-header__nav { gap: 0; }

body.tpl-plusfab_industrial .mt-site-header__nav .nav-link {
    font-family: var(--mt-font-heading);
    font-size: 0.8rem;
    font-weight: var(--mt-weight-semibold, 600);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ally-navy-700);
}

/* Hover: a steel underline, drawn by the same ::after the active marker
   uses (square ends, no radius). */
body.tpl-plusfab_industrial .mt-site-header__nav .nav-link::after {
    content: "";
    position: absolute;
    left: var(--mt-header-link-px);
    right: var(--mt-header-link-px);
    bottom: 4px;
    height: 2px;
    border-radius: 0;
    background: transparent;
    transition: background-color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease);
}
body.tpl-plusfab_industrial .mt-site-header__nav .nav-link:hover::after {
    background: #C5CBD0;
}
body.tpl-plusfab_industrial .mt-site-header__nav .nav-link.active::after {
    bottom: 4px;
    border-radius: 0;
    background: var(--mt-header-accent);
}
/* Bootstrap draws the dropdown caret with ::after; keep it a caret. */
/* The shared 02-layout.css draws that caret as a 6x6 bordered box
   rotated 45deg -- restore exactly its size here. */
body.tpl-plusfab_industrial .mt-site-header__nav .dropdown-toggle::after,
body.tpl-plusfab_industrial .mt-site-header__nav .dropdown-toggle:hover::after,
body.tpl-plusfab_industrial .mt-site-header__nav .dropdown-toggle.active::after {
    position: static;
    left: auto;
    right: auto;
    width: 6px;
    height: 6px;
    background: none;
}
/* 02-layout.css also draws its own (graphite) active underline with
   ::before -- one marker only: the copper ::after above. */
body.tpl-plusfab_industrial .mt-site-header__nav .nav-link::before { display: none; }

/* CTA: flat graphite, square-ish, uppercase Archivo -- same family as
   the Hero's buttons. */
body.tpl-plusfab_industrial .mt-site-header__nav .nav-item.ms-lg-2 {
    margin-left: var(--mt-space-4, 16px) !important;
}
body.tpl-plusfab_industrial .mt-site-header__nav .nav-item.ms-lg-2 .btn-primary {
    font-family: var(--mt-font-heading);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.8rem 1.35rem;
}
body.tpl-plusfab_industrial .mt-site-header__nav .nav-item.ms-lg-2 .btn-primary:hover,
body.tpl-plusfab_industrial .mt-site-header__nav .nav-item.ms-lg-2 .btn-primary:focus-visible {
    background: var(--ally-navy-900);
    border-color: var(--ally-navy-900);
    transform: none;
}

/* Dropdown: white flyout, steel border, copper marker on the current
   item (tokens in §1b). */
body.tpl-plusfab_industrial .mt-site-header .dropdown-item {
    border-radius: 0;
}

/* Menu toggler: graphite lines, 6px corners. */
body.tpl-plusfab_industrial .mt-site-header .navbar-toggler {
    border-color: #C5CBD0;
    border-radius: var(--mt-radius-sm, 6px);
}
body.tpl-plusfab_industrial .mt-site-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(30, 34, 38, 0.9)' stroke-linecap='square' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 991px) {
    body.tpl-plusfab_industrial .mt-site-header__logo .site-logo { max-height: 48px; }
    /* Stacked menu: left-aligned full-width rows with steel hairlines
       (the shared 02-layout.css centers them and paints the active item
       with a grey block). */
    body.tpl-plusfab_industrial .mt-site-header__nav {
        align-items: stretch;
        text-align: left;
    }
    body.tpl-plusfab_industrial .mt-site-header__nav .nav-link {
        font-size: 0.85rem;
        padding: var(--mt-space-4, 16px) var(--mt-space-2, 8px);
        border-bottom: 1px solid #E1E4E7;
    }
    body.tpl-plusfab_industrial .mt-site-header__nav .nav-link.active,
    body.tpl-plusfab_industrial .mt-site-header__nav .nav-link:hover {
        background: transparent;
    }
    /* Stacked list: no underline; the active item keeps the copper
       left rule from §7. */
    body.tpl-plusfab_industrial .mt-site-header__nav .nav-link:hover::after { background: transparent; }
    body.tpl-plusfab_industrial .mt-site-header__nav .nav-link.active::after {
        background: var(--mt-header-accent);
    }
    body.tpl-plusfab_industrial .mt-site-header__nav .nav-link:hover { color: var(--mt-accent-hover); }
    body.tpl-plusfab_industrial .mt-site-header__nav .nav-item.ms-lg-2 { margin-left: 0 !important; }
}


/* ============================================================
   §8  FOOTER — shell
   A deeper navy than the header, with a hard top edge, so the
   page closes on a distinctly lower surface level.
============================================================ */
body.tpl-plusfab_industrial .mt-site-footer {
    position: relative;
    background: var(--mt-footer-bg);
    color: var(--mt-footer-fg);
    padding: var(--mt-footer-py) 0 var(--mt-space-6, 24px);
    border-top: 1px solid var(--mt-footer-divider-hard);
}

body.tpl-plusfab_industrial .mt-site-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: var(--mt-space-12, 48px) var(--mt-space-10, 40px);
    padding-bottom: var(--mt-space-12, 48px);
}


/* ============================================================
   §9  FOOTER — brand column
============================================================ */
body.tpl-plusfab_industrial .mt-site-footer__name {
    color: var(--mt-footer-fg-strong);
    font-weight: var(--mt-weight-bold, 700);
    font-size: var(--mt-text-lg, 1.125rem);
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin-bottom: var(--mt-space-4, 16px);
}

body.tpl-plusfab_industrial .mt-site-footer__statement {
    font-size: var(--mt-text-sm, 0.9rem);
    line-height: 1.75;
    color: var(--mt-footer-fg);
    max-width: 40ch;
    margin-bottom: var(--mt-space-6, 24px);
}

/* Contact lines — each icon sits in a raised navy chip so the
   column scans as a list rather than loose runs of text. */
body.tpl-plusfab_industrial .mt-site-footer__line {
    display: flex;
    align-items: center;
    gap: var(--mt-space-3, 12px);
    font-size: var(--mt-text-sm, 0.9rem);
    color: var(--mt-footer-fg);
    margin: 0 0 var(--mt-space-3, 12px);
}
body.tpl-plusfab_industrial .mt-site-footer__line i {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--mt-footer-radius);
    background: var(--mt-footer-chip-bg);
    border: 1px solid var(--mt-footer-chip-border);
    color: var(--mt-footer-icon);
    font-size: 0.76rem;
}
body.tpl-plusfab_industrial .mt-site-footer__line a {
    color: inherit;
    text-decoration: none;
    transition: color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease);
}
body.tpl-plusfab_industrial .mt-site-footer__line a:hover {
    color: var(--mt-footer-fg-strong);
}

body.tpl-plusfab_industrial .mt-site-footer__whatsapp {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-2, 8px);
    margin-top: var(--mt-space-1, 4px);
    padding: var(--mt-space-2, 8px) var(--mt-space-4, 16px);
    border-radius: var(--mt-radius-full);
    background: var(--mt-footer-chip-bg);
    border: 1px solid var(--mt-footer-chip-border);
    color: var(--mt-footer-fg-strong);
    font-size: var(--mt-text-sm, 0.9rem);
    font-weight: var(--mt-weight-medium, 500);
    text-decoration: none;
    transition: background-color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease),
                border-color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease);
}
/* Kept inside the Ally palette (no WhatsApp brand green) so the
   footer holds to navy/blue/white/neutral. Flip this one variable
   if brand-accurate green is ever wanted. */
body.tpl-plusfab_industrial .mt-site-footer__whatsapp i {
    color: var(--mt-footer-icon);
}
body.tpl-plusfab_industrial .mt-site-footer__whatsapp:hover {
    background: var(--ally-navy-700);
    border-color: var(--ally-line-strong);
}

body.tpl-plusfab_industrial .mt-site-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-2, 8px);
    margin-top: var(--mt-space-6, 24px);
}
body.tpl-plusfab_industrial .mt-site-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--mt-radius-full);
    background: var(--mt-footer-chip-bg);
    border: 1px solid var(--mt-footer-chip-border);
    color: var(--mt-footer-fg-strong);
    text-decoration: none;
    transition: background-color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease),
                border-color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease);
}
body.tpl-plusfab_industrial .mt-site-footer__social a:hover {
    background: var(--mt-footer-chip-hover);
    border-color: var(--mt-footer-chip-hover);
    color: var(--ally-white);
}


/* ============================================================
   §10  FOOTER — link columns
   Headings are small, wide-tracked and quiet; a short blue rule
   marks each column start.
============================================================ */
body.tpl-plusfab_industrial .mt-site-footer__heading {
    position: relative;
    font-size: var(--mt-text-xs, 0.75rem);
    font-weight: var(--mt-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--mt-footer-heading);
    padding-bottom: var(--mt-space-4, 16px);
    margin-bottom: var(--mt-space-5, 20px);
}
body.tpl-plusfab_industrial .mt-site-footer__heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--mt-footer-accent);
}

body.tpl-plusfab_industrial .mt-site-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--mt-space-3, 12px);
}
body.tpl-plusfab_industrial .mt-site-footer__links a {
    color: var(--mt-footer-fg);
    font-size: var(--mt-text-sm, 0.9rem);
    text-decoration: none;
    transition: color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease);
}
body.tpl-plusfab_industrial .mt-site-footer__links a:hover {
    color: var(--mt-footer-fg-strong);
}


/* ============================================================
   §11  FOOTER — location panel
   The map is desaturated toward the footer's own register so it
   reads as part of the design, not a pasted-in widget.
============================================================ */
body.tpl-plusfab_industrial .mt-site-footer__map {
    border-radius: var(--mt-footer-radius);
    overflow: hidden;
    border: 1px solid var(--mt-footer-chip-border);
    background: var(--mt-footer-panel-bg);
    margin-bottom: var(--mt-space-4, 16px);
}
body.tpl-plusfab_industrial .mt-site-footer__map iframe {
    display: block;
    width: 100%;
    height: 170px;
    border: 0;
    filter: grayscale(0.35) contrast(0.95) brightness(0.95);
}


/* ============================================================
   §12  FOOTER — base row
============================================================ */
body.tpl-plusfab_industrial .mt-site-footer__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mt-space-3, 12px);
    padding-top: var(--mt-space-6, 24px);
    border-top: 1px solid var(--mt-footer-divider);
    font-size: var(--mt-text-xs, 0.75rem);
    color: var(--mt-footer-legal);
}
body.tpl-plusfab_industrial .mt-site-footer__base a {
    color: var(--mt-footer-fg);
    text-decoration: none;
    transition: color var(--mt-duration-fast, 160ms) var(--mt-ease-default, ease);
}
body.tpl-plusfab_industrial .mt-site-footer__base a:hover {
    color: var(--mt-footer-fg-strong);
}


/* ============================================================
   §13  FOOTER — responsive stacking
============================================================ */
@media (max-width: 1199px) {
    body.tpl-plusfab_industrial .mt-site-footer__grid {
        grid-template-columns: 1.4fr 1fr 1.2fr;
    }
    body.tpl-plusfab_industrial .mt-site-footer__map-col {
        grid-column: span 3;
    }
    body.tpl-plusfab_industrial .mt-site-footer__map iframe {
        height: 210px;
    }
}

@media (max-width: 991px) {
    body.tpl-plusfab_industrial .mt-site-footer {
        padding-top: var(--mt-space-12, 48px);
    }
    body.tpl-plusfab_industrial .mt-site-footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--mt-space-10, 40px) var(--mt-space-8, 32px);
    }
    body.tpl-plusfab_industrial .mt-site-footer__brand,
    body.tpl-plusfab_industrial .mt-site-footer__map-col {
        grid-column: span 2;
    }
}

@media (max-width: 575px) {
    body.tpl-plusfab_industrial .mt-site-footer__grid {
        grid-template-columns: 1fr;
    }
    body.tpl-plusfab_industrial .mt-site-footer__brand,
    body.tpl-plusfab_industrial .mt-site-footer__map-col {
        grid-column: span 1;
    }
    body.tpl-plusfab_industrial .mt-site-footer__statement {
        max-width: none;
    }
    body.tpl-plusfab_industrial .mt-site-footer__base {
        flex-direction: column;
        text-align: center;
    }
}


/* ============================================================
   §14  PLUSFAB FOOTER (2026-10-01) -- presentation layer, appended
   (wins by source order). Same markup, same data, same columns.
   Deep graphite with steel hairlines and restrained copper: Archivo
   brand name + headings (headings carry the copper rule used by every
   PlusFab section label), square steel icon tiles with copper glyphs,
   steel links that turn white on hover, a square steel-outline WhatsApp
   button (WhatsApp green kept on the icon only, for recognisability), a
   greyscale steel-framed map (colour returns on hover -- CSS filter
   only, the map itself is untouched), square social icons, and a
   steel-ruled base row.
============================================================ */
body.tpl-plusfab_industrial .mt-site-footer {
    background: var(--ally-navy-900);                     /* #131619 */
    color: #B9BFC5;
    border-top: 1px solid rgba(197, 203, 208, 0.14);
    padding-top: var(--mt-space-20, 80px);
}

/* -- Grid: the base declares FOUR tracks, but the footer only renders
   the optional services column when service links exist. With three
   columns (brand / navigation / location) the fourth track sat empty and
   squeezed the map into a narrow third track -- use three tracks then.
   The four-column layout still applies whenever the services column
   renders. -- */
@media (min-width: 1200px) {
    body.tpl-plusfab_industrial .mt-site-footer__grid:not(:has(> :nth-child(4))) {
        grid-template-columns: 1.5fr 0.9fr 1.4fr;
        gap: var(--mt-space-12, 48px) var(--mt-space-16, 64px);
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    body.tpl-plusfab_industrial .mt-site-footer__grid:not(:has(> :nth-child(4))) {
        grid-template-columns: 1.4fr 0.9fr 1.4fr;
    }
    body.tpl-plusfab_industrial .mt-site-footer__grid:not(:has(> :nth-child(4))) .mt-site-footer__map-col {
        grid-column: auto;
    }
}
/* Tablet: brand across the top, navigation beside location (not
   navigation alone in half the width). */
@media (min-width: 576px) and (max-width: 991px) {
    body.tpl-plusfab_industrial .mt-site-footer__grid:not(:has(> :nth-child(4))) {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
    }
    body.tpl-plusfab_industrial .mt-site-footer__grid:not(:has(> :nth-child(4))) .mt-site-footer__map-col {
        grid-column: auto;
    }
}

/* -- Brand -- */
body.tpl-plusfab_industrial .mt-site-footer__name {
    font-family: var(--mt-font-heading);
    font-size: 1.2rem;
    font-weight: var(--mt-weight-bold, 700);
    letter-spacing: -0.005em;
    color: #FFFFFF;
    margin-bottom: var(--mt-space-4, 16px);
}
body.tpl-plusfab_industrial .mt-site-footer__statement {
    font-size: 0.92rem;
    line-height: 1.75;
    color: #B9BFC5;
    max-width: 44ch;
}

/* -- Contact lines: square steel icon tiles, copper glyphs -- */
body.tpl-plusfab_industrial .mt-site-footer__line {
    font-size: 0.92rem;
    color: #C5CBD0;
}
body.tpl-plusfab_industrial .mt-site-footer__line i {
    width: 32px;
    height: 32px;
    border-radius: 2px;
    background: var(--ally-navy-800);
    border: 1px solid rgba(197, 203, 208, 0.20);
    color: var(--mt-accent);
    font-size: 0.78rem;
}
body.tpl-plusfab_industrial .mt-site-footer__line a:hover { color: #FFFFFF; }

/* -- WhatsApp: square steel-outline button (destination and behaviour
   unchanged); WhatsApp green on the glyph only. -- */
body.tpl-plusfab_industrial .mt-site-footer__whatsapp {
    margin-top: var(--mt-space-3, 12px);
    padding: 0.7rem 1.1rem;
    border-radius: var(--mt-radius-sm, 6px);
    background: transparent;
    border: 1px solid rgba(197, 203, 208, 0.35);
    color: #FFFFFF;
    font-family: var(--mt-font-heading);
    font-size: 0.78rem;
    font-weight: var(--mt-weight-semibold, 600);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
body.tpl-plusfab_industrial .mt-site-footer__whatsapp i {
    color: #25D366;
    font-size: 1rem;
}
body.tpl-plusfab_industrial .mt-site-footer__whatsapp:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #FFFFFF;
    color: #FFFFFF;
}
body.tpl-plusfab_industrial .mt-site-footer__whatsapp:focus-visible,
body.tpl-plusfab_industrial .mt-site-footer__social a:focus-visible,
body.tpl-plusfab_industrial .mt-site-footer a:focus-visible {
    outline: 2px solid var(--mt-accent);
    outline-offset: 3px;
}

/* -- Social icons (rendered only when social links are configured):
   square, thin steel border, graphite surface, copper on hover. -- */
body.tpl-plusfab_industrial .mt-site-footer__social a {
    width: 38px;
    height: 38px;
    border-radius: var(--mt-radius-sm, 6px);
    background: var(--ally-navy-800);
    border: 1px solid rgba(197, 203, 208, 0.22);
    color: #C5CBD0;
}
body.tpl-plusfab_industrial .mt-site-footer__social a:hover {
    background: var(--ally-navy-800);
    border-color: var(--mt-accent);
    color: var(--mt-accent);
}

/* -- Column headings: Archivo, uppercase steel, copper rule BEFORE the
   label (the PlusFab section-label treatment), replacing the rule
   underneath. -- */
body.tpl-plusfab_industrial .mt-site-footer__heading {
    display: flex;
    align-items: center;
    gap: var(--mt-space-3, 12px);
    font-family: var(--mt-font-heading);
    font-size: 0.75rem;
    font-weight: var(--mt-weight-semibold, 600);
    letter-spacing: 0.16em;
    color: #C5CBD0;
    padding-bottom: 0;
    margin-bottom: var(--mt-space-6, 24px);
}
body.tpl-plusfab_industrial .mt-site-footer__heading::after { content: none; }
body.tpl-plusfab_industrial .mt-site-footer__heading::before {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 2px;
    background: var(--mt-accent);
}

/* -- Links -- */
body.tpl-plusfab_industrial .mt-site-footer__links { gap: var(--mt-space-3, 12px); }
body.tpl-plusfab_industrial .mt-site-footer__links a {
    font-size: 0.92rem;
    color: #B9BFC5;
}
body.tpl-plusfab_industrial .mt-site-footer__links a:hover { color: #FFFFFF; }

/* -- Map: steel frame, greyscale to sit in the graphite palette;
   colour returns on hover/focus so it stays fully usable. -- */
body.tpl-plusfab_industrial .mt-site-footer__map {
    border-radius: 2px;
    border: 1px solid rgba(197, 203, 208, 0.22);
    background: var(--ally-navy-800);
}
body.tpl-plusfab_industrial .mt-site-footer__map iframe {
    height: 190px;
    filter: grayscale(1) contrast(1.02) brightness(0.92);
    transition: filter var(--mt-duration-normal, 240ms) var(--mt-ease-default, ease);
}
body.tpl-plusfab_industrial .mt-site-footer__map:hover iframe,
body.tpl-plusfab_industrial .mt-site-footer__map:focus-within iframe {
    filter: none;
}

/* -- Base row -- */
body.tpl-plusfab_industrial .mt-site-footer__grid { padding-bottom: var(--mt-space-16, 64px); }
body.tpl-plusfab_industrial .mt-site-footer__base {
    padding-top: var(--mt-space-6, 24px);
    border-top: 1px solid rgba(197, 203, 208, 0.14);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: #8A939B;
}
body.tpl-plusfab_industrial .mt-site-footer__base a { color: #C5CBD0; }
body.tpl-plusfab_industrial .mt-site-footer__base a:hover { color: var(--mt-accent); }

@media (max-width: 991px) {
    body.tpl-plusfab_industrial .mt-site-footer { padding-top: var(--mt-space-16, 64px); }
    body.tpl-plusfab_industrial .mt-site-footer__grid { padding-bottom: var(--mt-space-12, 48px); }
}

@media (max-width: 575px) {
    body.tpl-plusfab_industrial .mt-site-footer { padding-top: var(--mt-space-12, 48px); }
    body.tpl-plusfab_industrial .mt-site-footer__grid { gap: var(--mt-space-10, 40px); }
    body.tpl-plusfab_industrial .mt-site-footer__map iframe { height: 200px; }
    body.tpl-plusfab_industrial .mt-site-footer__base { gap: var(--mt-space-2, 8px); line-height: 1.6; }
}