/* ============================================================
   BEINC — Footer (shared across all pages)
   Desktop-first. Tablet (<=1023px) + phone (<=767px) overrides.
   ============================================================ */




/* ── SECTION SHELL ────────────────────────────────────────── */
.footer {
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: 0 var(--pad-x);
    overflow: hidden;
    background: var(--color-black2);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-normal);
    isolation: isolate; /* contain z-index stacking */
    /* Sits above the brand-cube section's fixed canvas (z:2) on pages
       that host both. The cube's `is-active` class is sticky (JS never
       removes it), so without this z-index the cube canvas would bleed
       through the footer once the user scrolls past the cube section.
       Safe on every page — z-index only matters on overlap, and nav
       (z:1000) still sits above. */
    z-index: 6;
}

.footer * { box-sizing: border-box; }

/* ── BACKDROP LAYERS (shape, brand element, hover grid) ───── */

/* Bottom-aligned blurred Beinc footer shape — full viewport width, ignores section padding.
   Default (desktop ≥1024px) tuned at 1920×839. Tablet/mobile overrides further down. */
.footer__shape {
    position: absolute;
    left: 50%;
    bottom: -48px;
    width: 100vw;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
}
.footer__shape img {
    display: block;
    width: 100%;
    height: auto;
}

/* Short-height desktops (e.g. laptops with browser chrome cropping vh): pull the
   shape down further so its proportions don't dominate the disclaimer row. */
@media (min-width: 1024px) and (max-height: 700px) {
    .footer__shape { bottom: -93px; }
}

/* Animated brand element — sits at the boundary between rows */
.footer__brand-element {
    position: absolute;
    left: 50%;
    top: 60%; /* boundary between 60vh pages row and 40vh disclaimer row */
    width: 600px;
    transform: translate(-50%, -50%);
    color: var(--color-darkgreyish); /* #3C3B3A */
    pointer-events: none;
    z-index: 3;
}
.footer__brand-element svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Dashed grid revealed around mouse (desktop + tablet only) — sits behind every other footer layer */
.footer__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        repeating-linear-gradient(to right, #353535 0 1px, transparent 1px 6px),
        repeating-linear-gradient(to bottom, #353535 0 1px, transparent 1px 6px);
    /* 6px dashes will be masked into a grid pattern via the second layer below */
    /* Simpler approach: SVG pattern */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M0 0 L0 40' stroke='%23353535' stroke-width='1' stroke-dasharray='2 2' fill='none'/><path d='M0 0 L40 0' stroke='%23353535' stroke-width='1' stroke-dasharray='2 2' fill='none'/></svg>");
    background-size: 40px 40px;
    background-position: center center;
    -webkit-mask-image: radial-gradient(circle 200px at var(--mx, -1000px) var(--my, -1000px), #000 0%, transparent 100%);
            mask-image: radial-gradient(circle 200px at var(--mx, -1000px) var(--my, -1000px), #000 0%, transparent 100%);
    transition: opacity 0.2s;
}
@media (max-width: 767px) {
    .footer__grid { display: none; }
}


/* ── PAGES MAIN ROW (desktop + tablet) ───────────────────── */

.footer__pages-row--desktop {
    position: relative;
    z-index: 4;
    height: 60vh;
    padding: var(--pad-x) 0;
    display: grid;
    /* minmax(0, 1fr) keeps cols at equal thirds and prevents overflowing children
       (the services grid) from forcing column expansion. The services grid will
       intentionally bleed into the empty inner halves of the side cols. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: var(--space-9);
    align-items: start;
}

/* Use display: contents on cols so col-blocks participate directly in the row grid */
.footer__col {
    display: contents;
}

.footer__col--explore .footer__col-block--top    { grid-column: 1; grid-row: 1; }
.footer__col--explore .footer__col-block--bottom { grid-column: 1; grid-row: 3; }

.footer__col--services {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    gap: var(--space-5);
}

.footer__col--get-involved .footer__col-block--top    { grid-column: 3; grid-row: 1; text-align: right; }
.footer__col--get-involved .footer__col-block--bottom { grid-column: 3; grid-row: 3; text-align: right; }


/* Headings (Indivisible Medium 20px — section-specific value) */
.footer__heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: 20px;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-snug);
    color: var(--color-white);
    margin-bottom: var(--space-4);
}
.footer__heading--center {
    text-align: center;
}


/* Lists */
.footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}


/* Pillar links (Explore / Get involved / The boring bit) — w/ active square indicator.
   Link is inline-block so the text aligns with the column edge.
   Indicator is absolute so it doesn't take up layout space — it floats outside the link. */
.footer__link {
    position: relative;
    display: inline-block;
    color: var(--color-white);
    font-size: var(--text-xs);
    text-decoration: none;
    line-height: var(--leading-snug);
    padding: 2px 0;
    transition: opacity 0.2s;
}
.footer__link:hover { opacity: 0.7; }

/* Active indicator square — hidden by default; positioned outside the link via data-side */
.footer__indicator {
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    background: var(--color-white);
    opacity: 0;
    transition: opacity 0.2s;
    transform: translateY(-50%);
    pointer-events: none;
}
.footer__link[data-side="left"]  .footer__indicator { right: calc(100% + var(--space-3)); }
.footer__link[data-side="right"] .footer__indicator { left:  calc(100% + var(--space-3)); }
.footer__link.is-active .footer__indicator { opacity: 1; }


/* Contact Us list */
.footer__list--contact { gap: var(--space-2); }
.footer__contact-link {
    color: var(--color-white);
    font-size: var(--text-xs);
    text-decoration: none;
    line-height: var(--leading-snug);
    transition: opacity 0.2s;
}
.footer__contact-link:hover { opacity: 0.7; }
.footer__contact-link--static { cursor: default; }
.footer__contact-link--static:hover { opacity: 1; }


/* ── SERVICES GRID (col 2) ─────────────────────────────────── */

/* Col itself is 1fr (one third of pages row) but we let its content (the services
   grid) overflow visibly into the side cols' empty inner halves. */
.footer__col--services {
    width: 100%;
    overflow: visible;
}

.footer__services-grid {
    /* min-width drives the grid wider than the column, forcing overflow into siblings.
       Tunable knob — bump up if service text wraps, down if collisions appear. */
    width: 100%;
    min-width: 580px;
    background: var(--color-black2);
    border: 1px dashed var(--color-grid);
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    overflow: hidden;
}

.footer__services-row {
    display: grid;
    position: relative;
}
.footer__services-row--top {
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px dashed var(--color-grid);
}
.footer__services-row--bottom {
    grid-template-columns: repeat(3, 1fr);
}

.footer__service {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 12px;
    color: var(--color-white);
    font-size: var(--text-xs);
    text-align: center;
    text-decoration: none;
    font-family: var(--font-body);
    letter-spacing: var(--tracking-body);
    line-height: var(--leading-snug);
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
}

/* Vertical dashed divider between cells — shorter than full row, vertically centered */
.footer__service::after {
    content: '';
    position: absolute;
    right: 0;
    top: 25%;
    bottom: 25%;
    border-right: 1px dashed var(--color-grid);
    pointer-events: none;
}
.footer__services-row > .footer__service:last-child::after { display: none; }

.footer__service:hover {
    background: var(--color-black);
}
.footer__service.is-active,
.footer__service.is-active:hover {
    background: var(--color-white);
    color: var(--color-black2);
}


/* ── DISCLAIMER MAIN ROW ──────────────────────────────────── */

.footer__disclaimer-row {
    position: relative;
    z-index: 5;
    height: 40vh;
    /* Break out of the footer's horizontal padding so the disclaimer
       fills the viewport width. 50% - 50vw guarantees we land at viewport
       x=0 regardless of containing-block math. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: var(--pad-x);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: var(--space-9);
    align-items: stretch;
    /* Background + backdrop-filter live on .footer__disclaimer-row__glass
       so they can be selectively masked around the cursor on hover. */
}


/* Glass layer — owns the disclaimer's frosted-glass effect (bg tint + blur).
   Sits behind the disclaimer's content cols (z-index: -1) and IN FRONT of
   the fluid canvas (z-index: -2), so the canvas colours read as a frosted,
   blurred ambient background. No mask: the cursor-driven un-blur reveal
   was retired in favour of the fluid simulation. */
.footer__disclaimer-row__glass {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none; /* mouse events pass through to the fluid canvas behind */
    background: rgba(255, 251, 240, 0.1);
    -webkit-backdrop-filter: blur(13px);
            backdrop-filter: blur(13px);
}


/* ── Fluid canvas (Setaprint-style WebGL fluid sim) ──
   Scoped to the disclaimer area only. Sits at z-index: -2, BEHIND the glass
   (-1), so the disclaimer's backdrop-filter softens its colours into a
   frosted ambient haze. Visible (opacity 1) only while .footer.is-disclaimer-hover
   is present — fades cleanly in and out. Pointer-events: auto so the WebGL
   library can hook mousemove for splatting; the glass above has
   pointer-events: none so events pass through to the canvas. */
.footer__fluid-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    /* pointer-events: none so cursor passes through to the disclaimer's
       interactive content (subscribe form, back-to-top, links, socials).
       footer.js forwards every disclaimer-row mousemove to the canvas as
       a synthetic event so splats keep firing even while the cursor is
       over content elements. */
    pointer-events: none;
    opacity: 0;
    /* 0.6s fade so splats gracefully ease in (on enter) and ease out (on
       leave). The fluid sim's dissipation stays at the default rate during
       this fade so colours visibly soften with the opacity transition;
       the JS in footer.js spikes dissipation only AFTER the canvas is
       fully invisible, to wipe the buffer for a clean next entry. */
    transition: opacity 0.6s var(--ease-primary);
    display: block;
}
.footer.is-disclaimer-hover .footer__fluid-canvas {
    opacity: 1;
}
@media (max-width: 767px) {
    .footer__fluid-canvas { display: none; }
}

/* Top dashed line — spans full disclaimer-row width (= viewport width) */
.footer__disclaimer-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--color-greyish);
}

.footer__disclaimer-col {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.footer__disclaimer-col--left  { align-items: flex-start; }
.footer__disclaimer-col--center {
    align-items: center;
    justify-content: flex-start; /* heading + subscribe at top, copyright pushed to bottom via auto margin */
    gap: var(--space-4);
}
.footer__disclaimer-col--right { align-items: flex-end; }

/* Bottom group (legal-mobile + copyright) — pushed to the bottom of the center col on
   desktop + tablet via auto margin. Mobile uses grid placement instead. */
.footer__legal-group {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}


/* ── Back to top button ──
   Two stacked containers, 4px rounded:
     · top  = small greyish box holding the up-arrow icon
     · body = taller white-cream box holding the rotated "Back to top" label
   Hover swaps the body to black2 (text → cream) and the arrow box to cream.
   The arrow itself stays black2 throughout but smoothly scales up.
   The button shell has no background/border — just structures the two boxes. */
.footer__back-to-top {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch; /* arrow box + label stretch to share the same width */
    gap: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}

/* Arrow container (top box) — only the TOP corners are rounded; the bottom
   sits flush against the label below. The label also overlaps by 2px so
   there's no chance of a hairline gap on subpixel layouts. */
.footer__back-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: var(--color-greyish);
    border-radius: var(--radius) var(--radius) 0 0;
    transition: background 0.3s ease;
}
.footer__back-arrow img {
    width: 10px;
    height: 14px;
    display: block;
    /* SVG fill is #191716 (= --color-black2) natively, so no filter needed.
       The rotation aims the right-pointing arrow upward; scale on hover
       grows it for the "cool animation" feel — eased to feel deliberate. */
    transform: rotate(-90deg);
    transition: transform 0.4s var(--ease-primary);
}

/* Body container (bottom box) — rotated label.
   All 4 corners rounded (only the arrow box has its bottom corners squared).
   margin-top: -4px makes the label overlap the arrow box generously, so the
   arrow's now-square bottom edge is fully hidden behind the label and there
   is no visible gap or hairline between the two on any rendering pipeline.
   Because the label is later in the DOM than the arrow box, it paints ON TOP
   of the arrow at the overlap area — its rounded top corners give the seam
   a subtle "tab" feel where the arrow peeks slightly behind. */
.footer__back-label {
    margin-top: -4px;
    padding: 16px 8px;
    background: var(--color-white);
    color: var(--color-black2);
    border-radius: var(--radius);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-tight);
    /* Vertical text reading bottom-to-top */
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    line-height: 1;
    text-align: center;
    transition: background 0.3s ease, color 0.3s ease;
}

/* Hover state */
.footer__back-to-top:hover .footer__back-label {
    background: var(--color-black2);
    color: var(--color-white);
}
.footer__back-to-top:hover .footer__back-arrow {
    background: var(--color-white);
}
.footer__back-to-top:hover .footer__back-arrow img {
    transform: rotate(-90deg) scale(1.3);
}


/* Subscribe form */
.footer__stay-ahead { margin-bottom: 0; }

.footer__subscribe {
    display: flex;
    align-items: center;
    background: var(--color-white);
    border-radius: var(--radius);
    padding: 4px;
    width: 100%;
    max-width: 380px;
    gap: 0;
    /* Anchor for the absolutely-positioned animation overlay (.footer__subscribe-expand).
       Box-shadow transition powers the .is-error red flash on invalid submits. */
    position: relative;
    transition: box-shadow 0.4s ease-out;
}
.footer__subscribe-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--color-black2);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-body);
    padding: 8px 12px;
}
.footer__subscribe-input::placeholder {
    color: var(--color-greyish);
}
.footer__subscribe-btn {
    background: var(--color-black2);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-tight);
    /* 1px dashed transparent reserves the border space so hover doesn't shift layout. */
    border: 1px dashed transparent;
    border-radius: calc(var(--radius) - 2px);
    padding: 10px 18px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.footer__subscribe-btn:hover {
    background: var(--color-white);
    color: var(--color-black2);
    border-color: var(--color-greyish);
}

/* ── Invalid-email feedback — red flash + GSAP shake (JS-driven). ── */
.footer__subscribe.is-error {
    box-shadow: 0 0 0 2px var(--color-red-brand);
    transition: box-shadow 0.1s ease-out;
}

/* ── Submit animation overlay.
   Grows leftward from the button's position on submit, holds the
   dynamic status text + reset icon. Initial width is set by JS. ── */
.footer__subscribe-expand {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    width: 0;
    background: var(--color-black2);
    border-radius: calc(var(--radius) - 2px);
    overflow: hidden;
    visibility: hidden;
    will-change: width;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.footer__subscribe-expand.is-active {
    visibility: visible;
}
.footer__subscribe-expand-text {
    flex: 0 0 auto;
    padding-left: 18px;
    color: var(--color-white);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-tight);
    white-space: nowrap;
}
.footer__subscribe-reset {
    flex: 0 0 auto;
    margin-right: 12px;
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    transform: scale(0) rotate(-180deg);
    will-change: transform;
}
.footer__subscribe-reset svg {
    width: 100%;
    height: 100%;
    display: block;
}
.footer__subscribe-reset svg path {
    fill: currentColor;
}


/* Copyright */
.footer__copyright {
    color: var(--color-white);
    font-size: var(--text-xs);
    text-align: center;
    margin: 0;
}


/* Socials */
.footer__socials {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
}
.footer__socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: opacity 0.2s;
}
.footer__socials a:hover { opacity: 0.7; }
.footer__socials img {
    display: block;
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1); /* recolor to white-cream */
}


/* Legal links (Privacy / Terms) */
.footer__legal {
    color: var(--color-white);
    font-size: var(--text-xs);
    text-decoration: none;
    transition: opacity 0.2s;
}
.footer__legal:hover { opacity: 0.7; }

/* Mobile-only legal links wrapper — hidden on desktop + tablet */
.footer__legal-mobile {
    display: none;
}


/* ── MOBILE PAGES ROW (hidden on desktop + tablet) ────────── */

.footer__pages-row--mobile { display: none; }


/* ============================================================
   SHARED — Below 1200px (tablet + mobile)
   The services grid 4-col / 3-col layout only fits ≥1200px. On both tablet
   and mobile we swap to a 2-col arrangement: top row's 4 items become 2×2,
   bottom row's 3 items have the last (Name Ideation) span both cols.
   This block is shared so the mobile services accordion inherits the same
   structure without duplicating rules.
   ============================================================ */
@media (max-width: 1199px) {

    .footer__services-row--top,
    .footer__services-row--bottom {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Horizontal divider between row--top and row--bottom */
    .footer__services-row--top {
        border-bottom: 1px dashed var(--color-grid);
    }

    /* Top row (4 in 2 cols → 2 sub-rows): items 1,2 get bottom border.
       Bottom row (3 in 2 cols, last spans): items 1,2 get bottom border. */
    .footer__services-row--top .footer__service:nth-child(-n+2),
    .footer__services-row--bottom .footer__service:nth-child(-n+2) {
        border-bottom: 1px dashed var(--color-grid);
    }

    /* Item 3 of bottom row spans full width (Name Ideation alone) */
    .footer__services-row--bottom .footer__service:nth-child(3) {
        grid-column: 1 / -1;
    }

    /* Vertical dividers — only odd children (col 1) get them; the spanning item has none */
    .footer__services-row .footer__service::after { display: none; }
    .footer__services-row .footer__service:nth-child(odd)::after { display: block; }
    .footer__services-row--bottom .footer__service:nth-child(3)::after { display: none; }
}


/* ============================================================
   TABLET + SMALL DESKTOP (768px – 1199px)
   Tablet-only positioning tweaks (services grid min-width, page-row gaps,
   shape, brand element). 2-col grid layout itself is in the shared block above.
   ============================================================ */
@media (max-width: 1199px) and (min-width: 768px) {

    /* Smaller min-width than desktop's 580px — 2-col cells are proportionally
       wider, so a smaller grid still fits the text comfortably. */
    .footer__services-grid { min-width: 380px; }

    /* Reduce gaps for tighter tablet layout */
    .footer__pages-row--desktop { column-gap: var(--space-6); }
    .footer__disclaimer-row { column-gap: var(--space-5); }

    /* Footer shape — wider, no negative bottom on tablet (tuned at 1023×839) */
    .footer__shape {
        bottom: 0;
        width: 153vw;
    }

    /* Brand element — smaller on tablet (tuned at 1023×839) */
    .footer__brand-element {
        width: 349px;
    }
}


/* ============================================================
   PHONE (<=767px)
   ============================================================ */
@media (max-width: 767px) {

    /* Pages row swaps to mobile-only accordion layout */
    .footer__pages-row--desktop { display: none; }

    .footer__pages-row--mobile {
        /* Flex column so the contact block can use auto margins to vertically
           center itself in the leftover space below the accordions. */
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 4;
        min-height: 70vh;
        /* 12vh top push so the first accordion sits well clear of the nav,
           bottom keeps the regular section padding. */
        padding: 12vh 0 var(--pad-x);
    }

    /* Disclaimer row on mobile: 2 grid rows ("U" layout — subscribe forms the
       base, with back-to-top / legal / socials sitting centered above it).
       Row 1 (1fr)  = back-to-top (col 1) | legal+copyright (col 2) | socials (col 3),
                      all vertically centered in the available space.
       Row 2 (auto) = subscribe (full-width across all 3 cols), pinned to the bottom. */
    .footer__disclaimer-row {
        height: auto;
        min-height: 30vh;
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: 1fr auto;
        column-gap: var(--space-3);
        row-gap: var(--space-4);
        align-items: stretch;
    }

    /* Stay ahead heading hidden on mobile */
    .footer__stay-ahead { display: none; }

    /* Center col dissolves so its children participate directly in the disclaimer-row grid.
       This lets the subscribe form span all 3 cols at the bottom while the legal group sits
       in row 1 col 2 alongside back-to-top (left) and socials (right). */
    .footer__disclaimer-col--center {
        display: contents;
    }

    /* Subscribe form: row 2, full width across all cols (sits at the bottom of the row) */
    .footer__disclaimer-col--center > .footer__subscribe {
        grid-row: 2;
        grid-column: 1 / -1;
        max-width: none;
        width: 100%;
    }

    /* iOS Safari auto-zooms any text input whose computed font-size is below 16px.
       Bump just the email field to 16px on mobile to kill the focus zoom — desktop
       keeps --text-xs from the base rule. */
    .footer__subscribe-input {
        font-size: 16px;
    }

    /* Legal group (Privacy + Terms + Copyright): row 1 col 2, vertically centered */
    .footer__disclaimer-col--center > .footer__legal-group {
        grid-row: 1;
        grid-column: 2;
        margin-top: 0; /* desktop's auto-margin no longer applies; grid handles placement */
        align-self: center;
        justify-self: center;
        gap: var(--space-2);
    }

    /* Side cols sit in row 1 alongside the legal group, all vertically centered */
    .footer__disclaimer-col--left  { grid-row: 1; grid-column: 1; align-self: center; }
    .footer__disclaimer-col--right { grid-row: 1; grid-column: 3; align-self: center; }

    /* Hide the side-col legal links on mobile (Privacy in col1, Terms in col3) */
    .footer__legal--left,
    .footer__legal--right {
        display: none;
    }

    /* Privacy + Terms inside the legal group — stacked vertically, centered */
    .footer__legal-mobile {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
    }

    .footer__copyright {
        text-align: center;
    }


    /* Brand element smaller on mobile */
    .footer__brand-element {
        width: 160px;
        top: 70%; /* now boundary is at 70vh */
    }

    /* Footer shape — overflows viewport width on mobile (tuned at 500×839) */
    .footer__shape {
        bottom: 0;
        width: 225vw;
    }


    /* ── ACCORDIONS ── */
    .footer__accordions {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .footer__accordion {
        border-bottom: 1px dashed var(--color-grid);
    }

    .footer__accordion-trigger {
        width: 100%;
        background: transparent;
        border: none;
        padding: var(--space-4) 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--color-white);
        cursor: pointer;
        font-family: var(--font-heading);
        font-weight: var(--font-weight-medium);
        font-size: 20px;
        letter-spacing: var(--tracking-tight);
        text-align: left;
    }

    .footer__accordion-icon {
        display: inline-flex;
        width: 14px;
        height: 14px;
        transform: rotate(90deg); /* arrow points down by default (closed) */
        transition: transform 0.3s var(--ease-primary);
    }
    .footer__accordion-icon img {
        width: 100%;
        height: 100%;
        display: block;
        filter: brightness(0) invert(1);
    }
    .footer__accordion[aria-expanded="true"] .footer__accordion-icon,
    .footer__accordion.is-open .footer__accordion-icon {
        transform: rotate(-90deg); /* arrow points up (open) */
    }

    /* Accordion open/close — max-height approach.
       The grid-template-rows: 0fr → 1fr trick was tried but in this layout
       (flex-column .footer__list / .footer__services-grid as the inner
       child) the 0fr track wasn't fully collapsing, leaving a sliver of
       content visible under the closed label. max-height is bullet-proof:
       closed is a guaranteed 0px.
       Cap is tightened from the old 600px → 320px, so the easing curve runs
       against ~content-height + a small buffer instead of wasting half the
       duration on empty space. The tallest accordion is "Our services" at
       ~210px (4 cell-rows + margin); 320px is a comfortable ceiling. */
    .footer__accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .footer__accordion.is-open .footer__accordion-content {
        max-height: 320px;
    }
    .footer__accordion-content .footer__list {
        padding: 0 0 var(--space-4) 0;
    }


    /* ── SERVICES GRID INSIDE "OUR SERVICES" ACCORDION ──
       2-col layout inherited from the shared (max-width: 1199px) block above.
       Mobile-specific overrides:
       - min-width: 0   — kill desktop's 580px so grid fits inside narrow accordion
       - tighter cell padding — keep the open accordion compact
       - min-height: 44px — meets WCAG / iOS 44pt minimum touch target. */
    .footer__pages-row--mobile .footer__services-grid {
        min-width: 0;
        margin-bottom: var(--space-4);
    }
    .footer__pages-row--mobile .footer__service {
        padding: 14px 10px;
        min-height: 44px;
    }


    /* Mobile contact block — vertically centered in the gap between the
       last accordion bottom and the disclaimer row top.
       margin-block: auto on a flex column child distributes leftover free
       space equally above and below it, so the block stays centered in
       whatever room is left no matter how many accordions are open.
       padding-block guarantees internal breathing room so the text never
       sits flush against neighbouring edges when accordions are wide open. */
    .footer__contact-mobile {
        margin-block: auto;
        padding-block: var(--space-5);
        text-align: center;
    }
    .footer__list--contact-mobile {
        align-items: center;
    }
    .footer__list--contact-mobile li {
        width: 100%;
        text-align: center;
    }


    /* Back to top: tighter padding + smaller arrow on mobile */
    .footer__back-arrow { padding: 6px; }
    .footer__back-arrow img { width: 10px; height: 14px; }
    .footer__back-label  { padding: 12px 6px; }


    /* Socials horizontal isn't needed; keep stacked, smaller */
    .footer__socials { gap: var(--space-2); }
    .footer__socials a { width: 22px; height: 22px; }
    .footer__socials img { width: 18px; height: 18px; }
}