.ftr.v1 {

    /* Local sizing tokens (design px / 18) */
    --ftr-v1-pill-rds: 2.611rem;   /* 47px pill radius */
    --ftr-v1-pill-pd-v: 0.111rem;  /* 2px */
    --ftr-v1-pill-pd-h: 1.333rem;  /* 24px */
    --ftr-v1-so-sz: 2.222rem;      /* 40px social tile */
    --ftr-v1-so-rds: 0.444rem;     /* 8px social tile radius */
    --ftr-v1-col-gp: 1.333rem;     /* 24px nav item gap */
    --ftr-v1-tag-mx: 48rem;        /* 864px tagline column — wide enough for the
                                      horizontal CTA cluster (hours + v2 + v1) to
                                      sit on one row on desktop; was 553px. */
    background: color-mix(in srgb, var(--accent) 4%, var(--background) 100%);

    position: relative;
    overflow-x: clip;

    .mn_wd {
        position: relative;
        z-index: 1;
    }

    /* Tagline column constrained on desktop */
    .ftr-tag {
        @media screen and (min-width: 1280px) {
            max-width: var(--ftr-v1-tag-mx);
        }
    }

    /* CTA cluster (hours + v2 button). At ≥1280 the horizontal row gets its
       v2↔hours gap from the flex gap; below 1280 it becomes a block stack, but the
       HoursStatus root is display:contents so the utility stack margin lands on an
       ignored box — nudge the hours block itself to keep it off the v2 button. */
    .ftr-cta-alt {
        @media screen and (max-width: 1279px) {
            .hours-status-stack { margin-top: var(--grd-sp-sml); }
        }
    }

    /* When stacked (<1280) the v1 button follows directly after the hours; give it
       extra room above (more than the tight v2↔hours gap) so it reads as its own
       action, visually separated from the hours. */
    .ftr-cta-row {
        @media screen and (max-width: 1279px) {
            > .btn.v1 { margin-top: var(--grd-sp); }
        }
    }

    /* "PESTS OUT. / PEACE IN." — display role, tight leading.
       Artifact is Archivo-black 88px (not the 149px hero ramp); ls -1.76px = -0.02em
       (already the fnt_t-big default), leading 0.9, white. Pin size to 88px. */
    .ftr-tagline {
        --fnt-t-big-s: 4.889rem;   /* 88px */
        --fnt-t-big-lh: 0.9;
    }

    /* Footer logo — the light (white) brand lockup on the dark panel.
       Artifact corporate logo ≈ 334×75; size by height, keep aspect. */

    /* Right-side micrographics: row of 5 orange bug-boxes + "BUGOUT" wordmark
       (artifact Line). Right-aligned with the pill + micro lines. */
    .ftr-bugrow {
        justify-content: flex-end;
    }

    /* BugBox theme element (inline SVG, currentColor) — 44px boxes (artifact). Colored
       via the palette-adaptive --callout token so the boxes flip with data-colors. */
    .ftr-bugrow svg {
        display: block;
        width: 2.444rem;           /* 44px */
        height: 2.444rem;
        color: var(--callout);
    }

    /* Business-name wordmark — Archivo black 40px, orange (var(--lt-alt-accent) =
       --dk-lnk-hov on dark). Own line below the bug-box row, uppercased. */
    .ftr-bugout-wm {
        display: block;
        font-family: var(--fnt-t);
        text-transform: uppercase;
        color: var(--callout);

        @media screen and (min-width:1280px) {
            & {
                font-size: var(--fnt-t-1-sml-s-d);
            }
        }
    }

    /* Each micro line = text block, right-aligned to sit under the pill / bug row. */
    .ftr-micro-row {
        justify-content: flex-end;
    }

    /* Micrographic decorative lines under the license pill.
       Artifact: small compact micro chips (note role), not large lime sentences.
       Note role on this dark footer resolves to cream --dk-txt (muted), not lime. */
    .ftr-micro-lines {
        align-items: flex-end;
    }

    /* Micro lines — artifact: SUSE 16px, tracking 4px (0.25em), UPPERCASE, var(--lt-alt-accent),
       leading 1.4. fnt_t-nt is SUSE 16px already; add the missing tracking/case and
       pin color. var(--lt-alt-accent) on this dark palette is --dk-lnk-hov (the established orange
       token; --rust = var(--lt-lnk) is a different, browner red and was WRONG here).
       The global fnt_ rule paints via --title-color, so set that. */
    .ftr-micro-line {
        --fnt-t-nt-lh: 1.4;
        text-transform: uppercase;
        --title-color: var(--callout);
    }

    /* License pill — outlined orange chip.
       Artifact: SUSE 16px, tracking 4px (0.25em), UPPERCASE, var(--lt-alt-accent) text + var(--lt-alt-accent)
       border. fnt_t-k/clr-lnk were removed from the markup because on primary-dark
       --fnt-t-k and --link-color both resolve to lime (var(--lt-accent)) and fnt_t-k forces a
       38px size. var(--lt-alt-accent) = --dk-lnk-hov here. */
    .ftr-pill {
        display: inline-block;
        padding: var(--ftr-v1-pill-pd-v) var(--ftr-v1-pill-pd-h);
        border: var(--bdr-w) var(--bdr-stl) var(--callout);
        border-radius: var(--ftr-v1-pill-rds);
        font-family: var(--fnt-m);
        --fnt-t-nt-lh: 1.4;
        text-transform: uppercase;
        color: var(--callout);
    }

    /* Social tiles — bordered squares */
    .ftr-socials {
        .ftr-so-lk {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: var(--ftr-v1-so-sz);
            height: var(--ftr-v1-so-sz);
            border: var(--bdr-w) var(--bdr-stl) var(--bdr-clr);
            border-radius: var(--ftr-v1-so-rds);
        }
    }

    /* Nav columns */
    .ftr-nav-cols {
        column-gap: var(--flx-gap);
    }

    .ftr-nav-list {
        display: flex;
        flex-direction: column;
        gap: var(--ftr-v1-col-gp);
    }

    /* Nav item link — fnt_t-itm defaults to 24px; pin size. */
    .ftr-nav-list a {
        --fnt-t-itm-s: 1rem;
    }

    /* Column heading — SERVICES / COMPANY.
       Artifact: SUSE 16px, tracking 4px (0.25em), UPPERCASE, WHITE.
       .fnt_t-k would tint these lime (--fnt-t-k = --dk-callout) AND size them 38px
       (--fnt-t-k-s-d) — both wrong. Pin title color to white and size to 16px,
       widen tracking from the kicker 0.18em to the artifact 0.25em. */
    .ftr-col-h {
        display: block;
        --fnt-t-k-s: 0.889rem;      /* 16px */
        --title-color: var(--text-color);
    }

    /* Brand blurb — artifact: SUSE 16px white, leading 1.6 (fnt_t-nt defaults 1.2). */
    .ftr-blurb {
        --fnt-t-nt-lh: 1.6;
    }

    .ftr-addr {
        font-style: normal;
    }

    /* Bottom zone (logo + columns): artifact has NO divider line, just a 64px gap
       (Content5 gap-64) below the top zone. */
    .ftr-btm-zone {
        margin-top: 3.556rem;   /* 64px */
    }

    /* Bottom row — artifact BottomContent = 5 EQUAL columns with gap-32:
       Logo | (empty Spacer) | Services | Company | Located. Brand = 1/5 (blurb
       wraps), spacer = 1/5, nav = 3/5 holding the 3 equal columns. Previously the
       brand was `half` (50%) so the blurb spanned wide + the columns were crammed. */
    .ftr-btm {
        --flx-gap: 1.778rem;   /* 32px (artifact gap-32) — cascades to .ftr-nav-cols */
        align-items: flex-start;
    }

    .ftr-brand {
        flex: 1 1 0;
        min-width: 0;
    }

    .ftr-btm-spacer {
        flex: 1 1 0;
    }

    .ftr-nav {
        flex: 3 1 0;
        min-width: 0;
    }

    /* the 3 nav columns share the nav equally (each ≈ 1/5 of the row) */
    .ftr-nav-col {
        flex: 1 1 0;
        min-width: 0;
    }

    /* LOCATED column (artifact "Visit"): address lines white SUSE 16px / lh 1.6,
       phone lime Archivo 20px. Right-aligned on desktop via ta_r-1280. */
    .ftr-addr-line {
        --fnt-t-nt-lh: 1.6;
        --title-color: var(--text-color);
        color: var(--text-color);   /* white on dark */
        margin-block: 0;            /* kill default <p> top margin so all lines share uniform line-height spacing */
    }

    /* ── Mobile (below the 1280 stack breakpoint): center everything from the
       business-name wordmark down. The wordmark + micro block already center via
       the `ta_` utility; here we override the right-aligned micro lines and center
       the bottom zone (brand logo/blurb/socials + nav & address columns). The
       Scorpion credit bar below centers on its own via its `ta_*-1280` classes. */
    @media screen and (max-width: 1279px) {
        /* Tagline + CTA buttons */
        .ftr-tag { text-align: center; }
        .ftr-tag .flx { justify-content: center; }     /* CTA button row */

        /* Decorative bug-box row is hidden on mobile */
        .ftr-bugrow { display: none; }

        .ftr-micro-lines { align-items: center; }
        .ftr-micro-row { justify-content: center; }

        .ftr-brand { text-align: center; }
        .ftr-brand .ftr-lg { margin-inline: auto; }   /* fit-content logo block */
        .ftr-socials { justify-content: center; }      /* social tiles row */

        .ftr-nav-col { text-align: center; }           /* headings, links, address */
    }

}