@view-transition{navigation:auto}
.nav{view-transition-name:gmax-nav}
footer{view-transition-name:gmax-footer}
@media (prefers-reduced-motion:reduce){.nav,footer{view-transition-name:none}}
/* ── Canonical site footer — SINGLE SOURCE for all 6 pages (index + 5 subpages). ──────────────
   Every page links THIS file; never re-declare footer rules inline anywhere else. The footer
   HTML is byte-identical across pages and is asserted by tools/footer-check.mjs before any
   "done". (Master Brain — Software Engineering #2: one canonical source, drift machine-detected;
   Reference-Clone Elite Site step 6: shared LINKED nav/footer files.) */
footer{background:#0A0A0B;color:rgba(255,255,255,.6);padding:clamp(60px,6.5vw,100px) 0 40px}   /* Tier-0: TRUE near-black (not navy) */
html[data-theme="dark"] footer{background:#070708}
footer .fcols{display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(40px,6vw,90px);align-items:start}
footer .fbrand{display:flex;flex-direction:column;align-items:flex-start}
footer .fwm{margin:0 0 4px;align-self:flex-start}   /* GMAX 3D mark (same as the bottom-right contact badge), left-aligned to the text (Max 2026-08-22) */
footer .fwm .brand-3d-footer{width:340px;height:92px;aspect-ratio:340/92;transform:translateX(-92px)}   /* 3D GMAX logo (gmax-logo-dark.glb); width+height+aspect-ratio reserve the box before the GLB loads so the footer never shifts; translateX pulls the centered render to the text's left edge (baked GLB padding) */
footer .fwm{transition:none}   /* wrapper never animates size/layout — only the model-viewer's own opacity fades in when ready */
/* No-WebGL / pre-upgrade fallback: paint the SAME footer poster (matched to the model's 52% framing, identical
   aspect → center/contain fills the box exactly) as a CSS background on the element itself. model-viewer does NOT
   render its own poster div when WebGL is unavailable, so this guarantees a clean static logo with no blank space
   or layout movement. Cleared once the GLB loads (.footer-3d-on) so the live model shows alone. Mirrors the nav. */
footer .fwm .brand-3d-footer{background:url(logo/poster-footer-dark.png?v=1) no-repeat center/contain}
footer .fwm .brand-3d-footer.footer-3d-on{background-image:none}
footer .fmotto{margin-top:11px;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.6);letter-spacing:-.01em}
footer .fwm .brand-badge{height:104px}
footer .fpills{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
footer .fpill{display:inline-flex;align-items:center;padding:11px 20px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#fff;font-size:15px;font-weight:500;text-decoration:none;transition:border-color .25s,background .25s,transform .4s var(--ease)}
footer .fpill:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.05);transform:translateY(-1px)}
footer .fmeta{margin-top:13px;font-size:14px;line-height:1.6;color:rgba(255,255,255,.42);max-width:44ch}   /* Max 2026-08-22: closer to the logo (was 22px) */
footer .fnav{display:grid;grid-template-columns:repeat(2,max-content);gap:14px clamp(36px,4.5vw,76px);justify-content:end;align-content:start;margin-top:32px}   /* block stays far right (justify-content:end); links left-align within content-width columns so first letters share an X axis. margin-top:2px lines the nav top up with the brand-mark top (design pass 2026-08-22) */
footer .fnav a{color:rgba(255,255,255,.78);text-decoration:none;font-size:clamp(18px,1.4vw,22px);font-weight:500;letter-spacing:-.02em;justify-self:start;text-align:left;transition:color .2s}
footer .fnav a:hover{color:#fff}
footer .fbar{margin-top:clamp(46px,5vw,72px);padding-top:26px;border-top:1px solid rgba(255,255,255,.09);display:flex;justify-content:space-between;align-items:center;gap:18px 24px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.4)}
footer .flegal{display:inline-flex;align-items:center;gap:22px;flex-wrap:wrap}
footer .flegal a{color:rgba(255,255,255,.62);text-decoration:none;transition:color .2s}
footer .flegal a:hover{color:#fff}
footer .fcopy{color:rgba(255,255,255,.38)}
footer .fsocial{display:inline-flex;gap:12px}
footer .fbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);transition:background .25s,transform .4s var(--ease)}
footer .fbtn svg{width:18px;height:18px;fill:rgba(255,255,255,.82)}
footer .fbtn:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
footer .fbtn:hover svg{fill:#fff}
@media (max-width:820px){footer .fcols{grid-template-columns:1fr;gap:44px}footer .fnav{justify-content:start;margin-top:0}footer .fnav a{justify-self:start}}

/* ── Language switcher (nav) — Max 2026-08-20 ───────────────────────────── */
.lang-switch{position:relative;display:inline-flex;align-items:center}
.lang-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid color-mix(in srgb,var(--ink,#17171B) 16%,transparent);border-radius:999px;padding:5px 9px 5px 6px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink,#17171B);transition:border-color .2s,background .2s}
.lang-btn:hover{border-color:var(--ink,#17171B)}
.lang-btn:focus-visible{outline:2px solid var(--ink,#17171B);outline-offset:2px}
.flag{width:20px;height:20px;border-radius:50%;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);flex:none}
.flag-de{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='1' y='0' fill='%23000'/%3E%3Crect width='5' height='1' y='1' fill='%23D00'/%3E%3Crect width='5' height='1' y='2' fill='%23FFCE00'/%3E%3C/svg%3E")}
.flag-nl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Crect width='5' height='1' y='0' fill='%23AE1C28'/%3E%3Crect width='5' height='1' y='1' fill='%23FFF'/%3E%3Crect width='5' height='1' y='2' fill='%2321468B'/%3E%3C/svg%3E")}
.flag-gb{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23FFF' stroke-width='6'/%3E%3Cpath d='M0,0 60,30M60,0 0,30' stroke='%23C8102E' stroke-width='3'/%3E%3Crect x='25' width='10' height='30' fill='%23FFF'/%3E%3Crect y='10' width='60' height='10' fill='%23FFF'/%3E%3Crect x='27' width='6' height='30' fill='%23C8102E'/%3E%3Crect y='12' width='60' height='6' fill='%23C8102E'/%3E%3C/svg%3E")}
.lang-caret{width:12px;height:12px;color:var(--muted,#5B5B63);transition:transform .2s}
.lang-switch.open .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:158px;background:var(--paper,#fff);border:1px solid color-mix(in srgb,var(--ink,#17171B) 12%,transparent);border-radius:13px;box-shadow:0 22px 44px -18px rgba(15,15,20,.28);padding:6px;display:none;flex-direction:column;gap:2px;z-index:60}
.lang-switch.open .lang-menu{display:flex}
.lang-menu button{display:inline-flex;align-items:center;gap:11px;background:none;border:0;border-radius:9px;padding:10px 12px;cursor:pointer;font:inherit;font-size:14px;font-weight:500;color:var(--ink,#17171B);text-align:left;width:100%;transition:background .18s}
.lang-menu button:hover{background:color-mix(in srgb,var(--ink,#17171B) 7%,transparent)}
.lang-menu button[aria-current="true"]{font-weight:650}
@media (max-width:760px){.lang-switch{display:none}}