/* =================================================================
   Dana Duhok — Layout (Modern medical / health-tech)
   Segmented "bento" glass navbar — three detached capsules (brand ·
   nav · actions) with a magic-pill indicator, a cursor spotlight, an
   animated glow-ring logo and a shine-sweep CTA; deep-navy footer.
   ================================================================= */

.site-main { display: block; min-height: 60vh; padding-top: 120px; position: relative; z-index: 1; }

/* Home: the hero slideshow sits directly beneath the floating (fixed) nav —
   no blank band above it. Cancel .site-main's top padding for the slideshow
   only (negative margin = the 120px pad above), so the slide rises to the top
   and the transparent bar floats over it; its copy is vertically centred and
   stays clear. The bento-hero fallback (slideshow off) keeps the padding and
   so still clears the nav. */
.site-main.page-home > .slideshow { margin-top: -120px; }

/* =================================================================
   Header — segmented bento
   ================================================================= */
.site-header {
    position: fixed; inset: 0 0 auto 0;
    z-index: 100;
    padding: 20px 0 0;
    background: transparent;
    pointer-events: none;                 /* let the gaps between pods click through */
    transition: padding .3s cubic-bezier(.4,.5,.15,1);
}
.site-header__inner { pointer-events: none; }

/* Scrim removed — navbar is fully transparent (no background). */
.site-header::before { content: none; }

.nav-bento {
    pointer-events: none;
    display: flex; align-items: stretch; justify-content: space-between;
    gap: 12px;
    transition: gap .3s cubic-bezier(.4,.5,.15,1), padding .3s cubic-bezier(.4,.5,.15,1);
}

/* A single floating pod — frosted-glass capsule (fill, hairline border, lift, blur) */
.nav-pod {
    pointer-events: auto;
    position: relative;
    flex: 0 0 auto;                       /* never squeeze a pod's contents */
    display: flex; align-items: center;
    padding: 8px 12px;
    border-radius: var(--nav-radius, 999px);
    background: var(--c-header-bg);
    border: 1px solid var(--nav-border-color, var(--c-header-border));
    box-shadow: var(--nav-shadow, var(--shadow-md));
    backdrop-filter: saturate(160%) blur(var(--nav-blur, 18px));
    -webkit-backdrop-filter: saturate(160%) blur(var(--nav-blur, 18px));
    transition: padding .3s cubic-bezier(.4,.5,.15,1), box-shadow .3s ease,
                background-color .3s ease, transform .3s cubic-bezier(.34,.62,.2,1);
}
/* sheen removed with the capsule background */
.nav-pod::after { content: none; }
.nav-pod--brand   { padding-right: 18px; padding-left: 10px; }
.nav-pod--nav     { padding: 6px 7px; }   /* spotlight is clipped by border-radius, no overflow:hidden (would clip links) */
.nav-pod--actions { gap: 6px; }

/* Cursor-follow spotlight inside the nav capsule (vars set by ui.js) */
.nav-pod--nav::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%),
                color-mix(in srgb, var(--c-primary) 22%, transparent), transparent 60%);
    opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: 0;
}
.nav-pod--nav.is-lit::before { opacity: 1; }

.site-header.is-scrolled { padding-top: 12px; }
.site-header.is-scrolled .nav-bento { gap: 9px; }

/* ---- Overflow safety ----
   The fixed header escapes body's `overflow-x: clip`, so if a pod is wider
   than the viewport it paints off-screen ("the navbar goes outside the view").
   Keep the action buttons intact and let the brand shrink/truncate instead, so
   the bar can never exceed the viewport on any device or design. */
.nav-bento { min-width: 0; max-width: 100%; }
.nav-pod { min-width: 0; }
.nav-pod--actions { flex-shrink: 0; }
.nav-pod--brand { min-width: 0; flex-shrink: 1; }
.nav-pod--brand .brand,
.nav-pod--brand .brand__text { min-width: 0; max-width: 100%; }
.brand__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The broad `.nav-pod { min-width: 0 }` above lets any grid item shrink below
   its content. That's wanted for the brand, but on the grid designs (bento /
   split) it also lets the centred menu pod's `auto` track collapse, so a long
   link row overlaps the brand and actions. Pin the menu pod to its content
   width on those designs: at >1200px (where the inline menu is shown) it always
   fits, and at <=1200px the menu pod is display:none anyway. (The 'centered'
   design stacks its pods in a flex column, so its menu pod is content-sized
   already and needs no pin.) */
.site-header[data-nav="bento"] .nav-pod--nav,
.site-header[data-nav="split"] .nav-pod--nav { min-width: max-content; }

/* ---- Brand ---- */
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--c-text); text-decoration: none; }
.brand:hover { color: var(--c-text); }
.brand__mark {
    position: relative;
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    background: var(--grad-primary);
    color: #fff;
    box-shadow: var(--shadow-btn);
    transition: transform .25s ease;
}
/* Animated conic glow-ring — a crisp gradient halo that spins on hover. */
.brand__mark::before {
    content: ""; position: absolute; inset: -2.5px; border-radius: inherit;
    padding: 2.5px;
    background: conic-gradient(from 0deg,
        var(--c-primary), var(--c-teal), var(--c-primary-2), var(--c-primary));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0; transition: opacity .3s ease;
    animation: brandRing 6s linear infinite;
}
.brand:hover .brand__mark::before { opacity: 1; }
.brand:hover .brand__mark { transform: rotate(-6deg) scale(1.05); }
@keyframes brandRing { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .brand__mark::before { animation: none; } }
.brand__mark svg { width: 23px; height: 23px; }
.brand__mark svg circle, .brand__mark svg path { stroke: #fff !important; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--font-display); font-weight: 800; font-size: 1.24rem; letter-spacing: -.03em; }
.brand__name em { font-style: normal; color: var(--c-primary); }
.brand__tag { font-size: .62rem; color: var(--c-text-3); letter-spacing: .14em; text-transform: uppercase; margin-top: 3px; }
.brand__logo { height: 40px; width: auto; max-width: 210px; display: none; object-fit: contain; }
html[data-mode="light"] .brand__logo--light { display: block; }
html[data-mode="dark"]  .brand__logo--dark  { display: block; }

/* ---- Nav + sliding "magic pill" indicator ---- */
.site-nav { position: relative; z-index: 1; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; position: relative; z-index: 1; }
.nav-link {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center;
    padding: var(--nav-link-pad, 9px 13px);
    border-radius: var(--nav-radius, 999px);
    color: var(--c-text-2);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--nav-link-size, .875rem);
    letter-spacing: -.005em;
    white-space: nowrap;
    transition: color .2s ease;
}
.nav-link:hover     { color: var(--c-accent-ink); }
.nav-link.is-active { color: var(--c-accent-ink); }

.nav-indicator {
    position: absolute; left: 0; top: var(--ind-y, 0);
    width: var(--ind-w, 0); height: var(--ind-h, 38px);
    transform: translateX(var(--ind-x, 0));
    background: var(--c-tint);
    border-radius: 999px;
    opacity: 0; z-index: 0; pointer-events: none;
    transition: transform .34s cubic-bezier(.34,.62,.2,1),
                width     .34s cubic-bezier(.34,.62,.2,1),
                opacity   .25s ease;
}
.nav-indicator.is-on { opacity: 1; }
/* No-JS fallback: tint the active link itself. */
.site-nav:not(.has-indicator) .nav-link.is-active { background: var(--c-tint); }

/* ---- Overflow menu button ----
   When an admin promotes only SOME menus to the inline bar (Admin → Navigation),
   the header is flagged data-overflow="1" and the hamburger (☰) button is revealed
   on EVERY design at all widths — the same button minimal/boxed use — so the links
   left out of the bar stay reachable inside the full-screen panel (#megaMenu).
   Specificity (0,2,0) beats the base `.menu-toggle{display:none}` (0,1,0). */
.site-header[data-overflow="1"] .menu-toggle { display: inline-flex; }

/* ---- Header actions (call · theme · CTA) ---- */
.site-header__actions { display: flex; align-items: center; gap: 8px; }
.icon-btn .ico-sun, .icon-btn .ico-moon { width: 18px; height: 18px; }
html[data-mode="light"] .icon-btn .ico-moon { display: none; }
html[data-mode="dark"]  .icon-btn .ico-sun  { display: none; }
/* glassy, borderless icon buttons inside the action pod */
.nav-call, .nav-mode { background: transparent; border-color: transparent; }
.nav-call:hover, .nav-mode:hover { background: var(--c-tint); border-color: transparent; color: var(--c-primary); }

/* CTA with a diagonal shine sweep on hover */
.nav-cta { --btn-h: 42px; padding: 0 18px; gap: 7px; overflow: hidden; isolation: isolate; }
.nav-cta > span, .nav-cta > svg { position: relative; z-index: 1; }
.nav-cta svg { transition: transform .22s ease; }
.nav-cta:hover svg { transform: translateX(3px); }
.nav-cta::after {
    content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; z-index: 0;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-18deg); transition: left .6s cubic-bezier(.4,.5,.15,1);
}
.nav-cta:hover::after { left: 130%; }

/* ---- Menu toggle — a modern morphing pill (icon + label) -------------------
   Shown when the inline rail collapses (mobile / overflow) and on the minimal
   & boxed designs at any width. The three bars morph into an X and the label
   swaps Menu↔Close via [aria-expanded]; frosted-glass fill, subtle lift on
   hover. It's a label-bearing pill now, not the old .icon-btn square. */
.menu-toggle {
    display: none; align-items: center; gap: 9px;
    height: 42px; padding: 0 17px;
    border-radius: 999px;
    background: var(--c-header-bg);
    border: 1px solid var(--nav-border-color, var(--c-header-border));
    box-shadow: var(--nav-shadow, var(--shadow-sm));
    backdrop-filter: saturate(160%) blur(var(--nav-blur, 12px));
    -webkit-backdrop-filter: saturate(160%) blur(var(--nav-blur, 12px));
    color: var(--c-text);
    font-family: var(--font-body); font-weight: 600; font-size: .9rem; letter-spacing: -.01em;
    cursor: pointer; white-space: nowrap;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease,
                box-shadow .25s ease, transform .25s cubic-bezier(.34,.62,.2,1);
}
.menu-toggle:hover {
    color: var(--c-accent-ink);
    background: var(--c-tint);
    border-color: color-mix(in srgb, var(--c-primary) 40%, transparent);
    box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--c-primary) 60%, transparent);
    transform: translateY(-1px);
}
.menu-toggle:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.menu-toggle__bars { display: flex; flex-direction: column; gap: 5px; flex: none; }
.menu-toggle__bars span { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s, opacity .25s; }
.menu-toggle__label { display: inline-flex; }
.menu-toggle[aria-expanded="true"] {
    color: var(--c-accent-ink); background: var(--c-tint);
    border-color: color-mix(in srgb, var(--c-primary) 40%, transparent);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Generic label swap on the .menu-toggle: show "Close" only while its overlay
   is open. (The swap-label spans live only inside #menuToggle, so the bare
   [aria-expanded] selector is safe.) */
.swap-label__open { display: none; }
[aria-expanded="true"] .swap-label__shut { display: none; }
[aria-expanded="true"] .swap-label__open { display: inline; }

/* ---- Overflow → the unified ☰ menu button -----------------------------------
   When an admin promotes only SOME menus to the inline rail, the rest stay
   reachable behind the SAME ☰ "Menu" button minimal/boxed use — shown on EVERY
   design, at every width, via the data-overflow flag (`[data-overflow="1"]
   .menu-toggle` rule ~line 176 above). One consistent menu button across all
   designs: an earlier in-rail "More" pill was deliberately dropped in favour of
   this, so there is NO second, differently-styled overflow affordance. The base
   `.menu-toggle{display:none}` is overridden by that data-overflow rule and by
   the per-design / responsive reveals, so no extra rule is needed here. */

/* ---- Mega-menu — full-screen overlay menu ---- */
body.nav-open { overflow: hidden; }
.mega-menu {
    position: fixed; inset: 0; z-index: 120;     /* above the fixed header (z-index:100) */
    pointer-events: auto;                          /* header sets pointer-events:none, which inherits — re-enable */
    background: var(--c-header-bg);
    backdrop-filter: saturate(160%) blur(24px);
    -webkit-backdrop-filter: saturate(160%) blur(24px);
    padding: 108px clamp(22px, 7vw, 60px) 40px;
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    animation: megaIn .32s cubic-bezier(.4,.5,.15,1);
}
.mega-menu[hidden] { display: none; }

/* Centring wrapper for the columns. */
.mega-menu__inner { width: 100%; max-width: 1180px; margin: 0 auto; }

/* Small "Menu" eyebrow sitting above the columns (the close pill is at top-right). */
.mega-menu__eyebrow {
    margin: 0 0 clamp(22px, 3.2vw, 38px);
    font-family: var(--font-display); font-weight: 700;
    font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--c-text-3);
}

/* Close button — a morphing-style pill (icon + "Close"). The open overlay
   covers the header, so this is the primary way to dismiss the menu (alongside
   backdrop tap + Esc); the X rotates and the pill lifts on hover. */
.mega-menu__close {
    position: absolute; top: clamp(18px, 2.4vw, 26px); right: clamp(16px, 6vw, 52px); z-index: 2;
    display: inline-flex; align-items: center; gap: 8px;
    height: 44px; padding: 0 18px 0 15px;
    color: var(--c-text);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    box-shadow: var(--shadow-md);
    font-family: var(--font-body); font-weight: 600; font-size: .9rem; letter-spacing: -.01em;
    cursor: pointer;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease,
                box-shadow .25s ease, transform .25s cubic-bezier(.34,.62,.2,1);
}
.mega-menu__close svg { width: 19px; height: 19px; transition: transform .3s cubic-bezier(.34,.62,.2,1); }
.mega-menu__close-label { display: inline; }
.mega-menu__close:hover,
.mega-menu__close:focus-visible {
    color: var(--c-accent-ink); border-color: var(--c-primary); background: var(--c-tint);
    box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--c-primary) 55%, transparent);
    transform: translateY(-1px);
}
.mega-menu__close:hover svg,
.mega-menu__close:focus-visible svg { transform: rotate(90deg); }
.mega-menu__close:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }

@keyframes megaIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes megaItem { to { opacity: 1; transform: none; } }

/* =================================================================
   Mega-menu — per-device tuning
   -----------------------------------------------------------------
   The overlay markup is shared; the columns auto-fit, so the layout adapts
   on its own. These queries just tune the inset + type scale per device:
   • Phones (<=600px): a single stacked column, calmer top inset.
   • Tablets (601–1023px): auto-fit gives 2–3 columns (handled by .mega-cols).
   • Computers (>=1024px): roomier gaps + larger link type on the wide canvas.
   ================================================================= */

/* Per-device top inset only. The responsive column count + type scale live in
   the columns block below — they must come *after* the base .mega-cols rule so
   that, at equal specificity, source order lets them win. */
@media (max-width: 600px) { .mega-menu { padding-top: 88px; } }
@media (min-width: 1024px) { .mega-menu { padding-top: clamp(120px, 13vh, 168px); } }

@media (prefers-reduced-motion: reduce) {
    .nav-indicator { transition: opacity .2s ease; }
    .mega-menu, .mega-col { animation: none; opacity: 1; transform: none; }
    .mega-link { transition: color .2s ease; }
    .mega-link__label::after { transition: none; }
}

/* =================================================================
   Navbar designs — admin-selectable header layouts
   -----------------------------------------------------------------
   The default 'bento' look is the base styling above. Each alternative
   is a pure-CSS reskin of the SAME markup, keyed off the data-nav
   attribute on .site-header (set by views/layouts/header.php from the
   admin "Navigation" page). The matching <body> gets a `.nav-design-<key>`
   class for layout-level tweaks (e.g. main padding). Adding a design:
   register it in nav_designs() (core/helpers.php) and add a block here.

   GLOBAL OPTIONS (also admin-managed) ride on the same header as
   data-scroll / data-width / data-corners / data-shadow / data-density /
   data-active / data-border + a .nav-uppercase class + inline --nav-blur /
   accent vars. They drive the --nav-* custom properties consumed by the
   base .nav-pod / .nav-link rules above, so they compose with every design.
   ================================================================= */

/* The cursor-follow spotlight only makes sense inside the bento capsule;
   on the flattened bar / outline / dense designs it paints a stray blob. */
.site-header:not([data-nav="bento"]) .nav-pod--nav::before { content: none; }

/* ---- Design: Bento (default) — center the menu pod ----
   space-between only centers the middle pod when the brand and actions pods
   are equal width; otherwise the menu drifts off-center. A 3-column grid
   (1fr auto 1fr) pins the nav capsule to the horizontal center while
   keeping the three capsules detached — brand hugs the left, actions the
   right. The side tracks use minmax(max-content,1fr) — NOT minmax(0,1fr) —
   so a wide menu can never squeeze a side track below its pod's width and
   make the actions pod overlap the menu (the bug minmax(0,…) caused with a
   long link list). When there's spare room the equal fr share still centres
   the menu; only when genuinely crowded does it lean, never overlap. */
.site-header[data-nav="bento"] .nav-bento {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    align-items: center;
}
.site-header[data-nav="bento"] .nav-pod--brand   { justify-self: start; }
.site-header[data-nav="bento"] .nav-pod--nav      { justify-self: center; }
.site-header[data-nav="bento"] .nav-pod--actions { justify-self: end; }

/* ---- Design: Unified Pill — everything fused into ONE floating capsule ---- */
.site-header[data-nav="pill"] { padding-top: 18px; }
.site-header[data-nav="pill"] .nav-bento {
    pointer-events: auto;
    display: flex; align-items: center; gap: 10px;
    max-width: 1120px; margin: 0 auto;
    padding: 7px 10px 7px 18px;
    border-radius: var(--nav-radius, 999px);
    background: var(--c-header-bg);
    border: 1px solid var(--nav-border-color, var(--c-header-border));
    box-shadow: var(--nav-shadow, var(--shadow-md));
    backdrop-filter: saturate(160%) blur(var(--nav-blur, 18px));
    -webkit-backdrop-filter: saturate(160%) blur(var(--nav-blur, 18px));
}
.site-header[data-nav="pill"] .nav-pod {
    background: transparent; border-color: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; padding: 0;
}
.site-header[data-nav="pill"] .nav-pod--nav     { flex: 1 1 auto; justify-content: center; }
.site-header[data-nav="pill"] .nav-pod--actions { gap: 6px; }

/* ---- Design: Classic bar — one solid glass bar pinned to the top ---- */
.site-header[data-nav="bar"] {
    padding-top: 0;
    pointer-events: auto;
    background: var(--c-header-bg);
    border-bottom: 1px solid var(--nav-border-color, var(--c-header-border));
    box-shadow: var(--nav-shadow, var(--shadow-sm));
    backdrop-filter: saturate(160%) blur(var(--nav-blur, 18px));
    -webkit-backdrop-filter: saturate(160%) blur(var(--nav-blur, 18px));
}
.site-header[data-nav="bar"] .site-header__inner,
.site-header[data-nav="bar"] .nav-bento { pointer-events: auto; }
.site-header[data-nav="bar"] .nav-bento { gap: 18px; padding: 9px 0; align-items: center; }
/* dissolve the individual capsules into one continuous bar */
.site-header[data-nav="bar"] .nav-pod {
    background: transparent; border-color: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    border-radius: 0; padding: 0;
}
.site-header[data-nav="bar"] .nav-pod--nav   { flex: 1 1 auto; justify-content: center; }
.site-header[data-nav="bar"] .nav-pod--actions { gap: 8px; }
.site-header.is-scrolled[data-nav="bar"] { padding-top: 0; }
.site-header.is-scrolled[data-nav="bar"] .nav-bento { padding-block: 6px; }

/* ---- Design: Elevated gradient — opaque app-style bar with a brand wash ---- */
.site-header[data-nav="elevated"] {
    padding-top: 0; pointer-events: auto;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 9%, var(--c-bg-1)) 0%, var(--c-bg-1) 100%);
    border-bottom: 1px solid var(--nav-border-color, var(--c-border));
    box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--c-primary) 38%, transparent), var(--nav-shadow, var(--shadow-md));
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-header[data-nav="elevated"] .site-header__inner,
.site-header[data-nav="elevated"] .nav-bento { pointer-events: auto; }
.site-header[data-nav="elevated"] .nav-bento { gap: 18px; padding: 10px 0; align-items: center; }
.site-header[data-nav="elevated"] .nav-pod {
    background: transparent; border-color: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; padding: 0;
}
.site-header[data-nav="elevated"] .nav-pod--nav { flex: 1 1 auto; justify-content: center; }
.site-header[data-nav="elevated"] .nav-cta { box-shadow: var(--shadow-btn); }
.site-header.is-scrolled[data-nav="elevated"] { box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--c-primary) 52%, transparent), var(--nav-shadow, var(--shadow-md)); }

/* ---- Design: Hairline outline — fill-less bar, underlined links, outline CTA ---- */
.site-header[data-nav="outline"] {
    padding-top: 0; pointer-events: auto;
    background: transparent;
    border-bottom: 1px solid var(--nav-border-color, var(--c-border-strong));
    box-shadow: none;
    transition: background-color .3s ease, backdrop-filter .3s ease, padding .3s cubic-bezier(.4,.5,.15,1);
}
.site-header[data-nav="outline"] .site-header__inner,
.site-header[data-nav="outline"] .nav-bento { pointer-events: auto; }
.site-header[data-nav="outline"] .nav-bento { gap: 20px; padding: 12px 0; align-items: center; }
.site-header[data-nav="outline"] .nav-pod {
    background: transparent; border-color: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; padding: 0;
}
.site-header[data-nav="outline"] .nav-pod--nav { flex: 1 1 auto; justify-content: center; }
.site-header[data-nav="outline"] .nav-indicator { display: none; }
.site-header[data-nav="outline"] .nav-link { border-radius: 0; border-bottom: 2px solid transparent; }
.site-header[data-nav="outline"] .nav-link:hover,
.site-header[data-nav="outline"] .nav-link.is-active { background: transparent; border-bottom-color: var(--c-primary); color: var(--c-accent-ink); }
.site-header[data-nav="outline"] .nav-cta { background: transparent; color: var(--c-accent-ink); border: 1.5px solid var(--c-primary); box-shadow: none; }
.site-header[data-nav="outline"] .nav-cta:hover { background: var(--c-tint); }
/* firm up to a frosted bar once scrolled */
.site-header.is-scrolled[data-nav="outline"] {
    background: var(--c-header-bg);
    backdrop-filter: saturate(160%) blur(var(--nav-blur, 14px));
    -webkit-backdrop-filter: saturate(160%) blur(var(--nav-blur, 14px));
}

/* ---- Design: Split island — flat brand + actions, floating centre menu pill ---- */
.site-header[data-nav="split"] { padding-top: 14px; }
.site-header[data-nav="split"] .nav-bento {
    display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
    align-items: center; gap: 14px;
}
.site-header[data-nav="split"] .nav-pod--brand,
.site-header[data-nav="split"] .nav-pod--actions {
    pointer-events: auto;
    background: transparent; border-color: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; padding: 0;
}
.site-header[data-nav="split"] .nav-pod--brand   { justify-self: start; }
.site-header[data-nav="split"] .nav-pod--actions { justify-self: end; gap: 6px; }
.site-header[data-nav="split"] .nav-pod--nav     { justify-self: center; }  /* keeps the base capsule chrome */

/* ---- Design: Floating corner controls — no bar at all. The brand floats as a
   chip in the top-left and a theme + menu cluster floats in the top-right; the
   inline link rail is hidden and every link opens in the full-screen panel
   (#mobileNav). Maximum negative space — two frosted chips drifting in the
   corners. (Shares the panel-only model of 'minimal' / 'boxed'.) ---- */
.site-header[data-nav="dense"] { padding-top: 16px; }
/* push the chips toward the true corners — the first selector (0,4,0) must beat
   the global [data-width="wide"/"full"] rules (0,3,0), which are always present
   and come later in source order; bar width is meaningless for a panel-only design. */
.site-header[data-nav="dense"][data-width] .site-header__inner,
.site-header[data-nav="dense"] .site-header__inner { max-width: none; }
.site-header[data-nav="dense"] .nav-bento { align-items: center; }
.site-header[data-nav="dense"] .nav-pod--nav { display: none; }           /* links live in the panel, not a rail */
.site-header[data-nav="dense"] .menu-toggle  { display: inline-flex; }    /* the ☰ that opens the panel */
.site-header[data-nav="dense"] .nav-call,
.site-header[data-nav="dense"] .nav-cta { display: none; }                /* phone + CTA route to the panel foot */
.site-header[data-nav="dense"] .nav-pod--actions { gap: 4px; }
/* the two corner chips: a stronger lift + a small hover pop so they read as
   detached floating controls rather than a bar. */
.site-header[data-nav="dense"] .nav-pod--brand,
.site-header[data-nav="dense"] .nav-pod--actions {
    box-shadow: var(--nav-shadow, var(--shadow-lg));
    transition: transform .25s cubic-bezier(.34,.62,.2,1), box-shadow .25s ease, background-color .3s ease;
}
.site-header[data-nav="dense"] .nav-pod--brand:hover,
.site-header[data-nav="dense"] .nav-pod--actions:hover { transform: translateY(-2px); box-shadow: var(--nav-shadow, var(--shadow-lg)); }

/* ---- Design: Top utility + masthead — a top utility row carries the brand at
   the START and contact · theme · CTA at the END; the menu sits centred on a
   second row beneath a full-width divider. An opaque, two-tier bar. Built as a
   2-col grid: [brand | actions] on row 1, the menu spanning + centred on row 2. */
.site-header[data-nav="centered"] {
    padding-top: 0; pointer-events: auto;
    background: var(--c-header-bg);
    border-bottom: 1px solid var(--nav-border-color, var(--c-header-border));
    box-shadow: var(--nav-shadow, var(--shadow-sm));
    backdrop-filter: saturate(160%) blur(var(--nav-blur, 16px));
    -webkit-backdrop-filter: saturate(160%) blur(var(--nav-blur, 16px));
}
.site-header[data-nav="centered"] .site-header__inner,
.site-header[data-nav="centered"] .nav-bento { pointer-events: auto; }
.site-header[data-nav="centered"] .nav-bento {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0 16px;
    padding: 0;
}
/* flat pods — this is a continuous masthead, not floating capsules */
.site-header[data-nav="centered"] .nav-pod {
    background: transparent; border-color: transparent; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; padding: 0;
}
/* row 1, start — the brand */
.site-header[data-nav="centered"] .nav-pod--brand {
    grid-column: 1; grid-row: 1; justify-self: start; padding: 8px 0;
}
/* row 1, end — the utility actions (contact · theme · CTA) */
.site-header[data-nav="centered"] .nav-pod--actions {
    grid-column: 2; grid-row: 1; justify-self: end; gap: 14px; padding: 8px 0;
}
/* row 2 — the menu: spans the full width with a divider above, links centred */
.site-header[data-nav="centered"] .nav-pod--nav {
    grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: center;
    border-top: 1px solid var(--nav-border-color, var(--c-header-border));
    padding: 6px 0;
}
/* two-tier bar — reserve its real height (row1 ~58px + row2 ~54-58px incl. the
   1px bottom border, allowing for 'spacious' density); opaque, so freeze on scroll. */
body.nav-design-centered .site-main { padding-top: 120px; }
.site-header.is-scrolled[data-nav="centered"] { padding-top: 0; }

/* ---- Design: Minimal — logo + a single pop-out menu button ---- */
/* Hide the inline link rail and reveal the menu pill at every width; all
   links live in the full-screen overlay (#megaMenu), which the shared JS
   opens on desktop too. Keep the theme toggle + CTA; drop the phone (it's in
   the overlay) to match the design's intent. */
.site-header[data-nav="minimal"] { padding-top: 14px; }
.site-header[data-nav="minimal"] .nav-pod--nav { display: none; }
.site-header[data-nav="minimal"] .menu-toggle  { display: inline-flex; }
.site-header[data-nav="minimal"] .nav-call     { display: none; }
.site-header[data-nav="minimal"] .nav-pod--actions { gap: 4px; }

/* ---- Design: Boxed launcher — a clean bar (logo · theme · CTA · "Menu" pill);
   every link lives in the boxed pop-out menu (#megaMenu restyled as tiles).
   The menu pill is already styled by the base .menu-toggle rule; here it just
   gets revealed and tinted with the brand accent to read as the primary CTA. */
.site-header[data-nav="boxed"] { padding-top: 14px; }
.site-header[data-nav="boxed"] .nav-pod--nav { display: none; }
.site-header[data-nav="boxed"] .nav-call     { display: none; }
.site-header[data-nav="boxed"] .nav-pod--actions { gap: 8px; }
.site-header[data-nav="boxed"] .menu-toggle {
    display: inline-flex;
    background: var(--c-tint); color: var(--c-accent-ink);
    border-color: color-mix(in srgb, var(--c-primary) 30%, transparent);
}
.site-header[data-nav="boxed"] .menu-toggle:hover { background: var(--c-accent-tint); color: var(--c-accent-ink); }

/* ---- Mega-menu columns: the #megaMenu overlay rendered as a clean, multi-
   column index of text links grouped by section. Shared by every nav design
   (it's the only menu for 'boxed'/'minimal'/'dense' on desktop, and the menu
   for every design once the inline rail collapses on smaller screens). Tokens-
   only, so it auto-themes light/dark and follows the admin brand accent. */
.mega-cols {
    display: grid; align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: clamp(30px, 4vw, 56px) clamp(24px, 4vw, 48px);
}
.mega-col { min-width: 0; }
/* section label — small uppercase caption with a hairline rule trailing it */
.mega-col__label {
    display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
    font-family: var(--font-display); font-weight: 700; font-size: .72rem;
    letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-3);
}
.mega-col__label::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }
.mega-col__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

/* each link: bold label + muted hint, an underline that grows from the left
   and a small slide on hover/active. No tiles, no icons, no borders. Colour is
   set on the label/hint <span>s (not the <a>) so the global anchor link colour
   can't bleed through and tint the labels. */
.mega-link {
    display: block; padding: 9px 0; text-decoration: none;
    transition: transform .22s cubic-bezier(.34,.62,.2,1);
}
.mega-link__label {
    position: relative; display: inline-block; color: var(--c-text);
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.15rem, 1.5vw, 1.35rem); letter-spacing: -.015em; line-height: 1.2;
    transition: color .2s ease;
}
.mega-link__label::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
    background: var(--c-primary); border-radius: 2px;
    transform: scaleX(0); transform-origin: left;
    transition: transform .28s cubic-bezier(.4,.5,.15,1);
}
.mega-link__hint {
    display: block; margin-top: 3px;
    font-family: var(--font-body); font-weight: 500; font-size: .82rem; color: var(--c-text-3);
}
.mega-link:hover, .mega-link:focus-visible { transform: translateX(5px); outline: none; }
.mega-link:hover .mega-link__label,
.mega-link:focus-visible .mega-link__label,
.mega-link.is-active .mega-link__label { color: var(--c-accent-ink); }
.mega-link:hover .mega-link__label::after,
.mega-link:focus-visible .mega-link__label::after,
.mega-link.is-active .mega-link__label::after { transform: scaleX(1); }
.mega-link:focus-visible .mega-link__label { outline: 2px solid var(--c-primary); outline-offset: 4px; border-radius: 2px; }

/* gentle staggered entrance, column by column */
.mega-col {
    opacity: 0; transform: translateY(12px);
    animation: megaItem .45s cubic-bezier(.4,.5,.15,1) forwards;
}
.mega-cols > .mega-col:nth-child(1)   { animation-delay: .04s; }
.mega-cols > .mega-col:nth-child(2)   { animation-delay: .10s; }
.mega-cols > .mega-col:nth-child(3)   { animation-delay: .16s; }
.mega-cols > .mega-col:nth-child(n+4) { animation-delay: .22s; }

/* Responsive column count + type scale — placed after the base .mega-cols rule
   so equal-specificity source order wins (no !important needed). Phones get a
   single clean column; the wide canvas gets roomier gaps + larger link type. */
@media (max-width: 600px) {
    .mega-cols { grid-template-columns: 1fr; gap: 28px; }
}
@media (min-width: 1024px) {
    .mega-cols { gap: clamp(40px, 4vw, 72px) clamp(32px, 4vw, 56px); }
    .mega-link__label { font-size: clamp(1.3rem, 1.7vw, 1.55rem); }
}

/* ---- Home hero slideshow: it is pulled up under the floating transparent
   designs (base rule, -120px). The OPAQUE top-bar designs would hide the top
   of the slide behind the bar, so for those the slide starts just below it.
   'dense' is now the transparent corner-controls design, so it floats like the
   base (no override). 'centered' is the opaque two-tier masthead, so its slide
   starts below the bar. */
body.nav-design-bar .site-main,
body.nav-design-elevated .site-main { padding-top: 76px; }
body.nav-design-bar .site-main.page-home > .slideshow,
body.nav-design-elevated .site-main.page-home > .slideshow,
body.nav-design-centered .site-main.page-home > .slideshow { margin-top: 0; }

/* =================================================================
   Navbar global options — compose with every design
   ================================================================= */

/* Scroll behaviour */
.site-header[data-scroll="static"] { position: absolute; }
.site-header[data-scroll="hide-on-scroll"] { transition: transform .35s cubic-bezier(.4,.5,.15,1), padding .3s cubic-bezier(.4,.5,.15,1); }
.site-header[data-scroll="hide-on-scroll"].is-hidden { transform: translateY(-115%); }
body.nav-open .site-header[data-scroll="hide-on-scroll"] { transform: none; }   /* never hide while the menu is open */

/* Bar width */
.site-header[data-width="wide"] .site-header__inner { max-width: 1440px; }
.site-header[data-width="full"] .site-header__inner { max-width: none; }

/* Corner style → drives --nav-radius on pods, links and the indicator */
.site-header[data-corners="rounded"] { --nav-radius: 20px; }
.site-header[data-corners="square"]  { --nav-radius: 8px; }
.site-header[data-corners="square"] .nav-indicator,
.site-header[data-corners="rounded"] .nav-indicator { border-radius: var(--nav-radius); }

/* Shadow / elevation → drives --nav-shadow (pods + the solid-bar designs) */
.site-header[data-shadow="none"] { --nav-shadow: none; }
.site-header[data-shadow="sm"]   { --nav-shadow: var(--shadow-sm); }
.site-header[data-shadow="lg"]   { --nav-shadow: var(--shadow-lg); }

/* Hairline border toggle → drives --nav-border-color (pods + bar bottom edge) */
.site-header[data-border="0"] { --nav-border-color: transparent; }

/* Menu density → drives the link padding + size */
.site-header[data-density="compact"]  { --nav-link-pad: 7px 10px;  --nav-link-size: .82rem; }
.site-header[data-density="spacious"] { --nav-link-pad: 11px 17px; --nav-link-size: .92rem; }

/* UPPERCASE links */
.site-header.nav-uppercase .nav-link { text-transform: uppercase; letter-spacing: .07em; font-size: calc(var(--nav-link-size, .875rem) - .055rem); }

/* Active-link indicator style: underline / none (default = the sliding pill) */
.site-header[data-active="underline"] .nav-indicator,
.site-header[data-active="none"] .nav-indicator { display: none; }
.site-header[data-active="none"] .nav-link.is-active { background: transparent; }
.site-header[data-active="underline"] .nav-link.is-active { background: transparent; }
.site-header[data-active="underline"] .nav-link::after {
    content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px;
    background: var(--c-accent-ink); border-radius: 2px;
    transform: scaleX(0); transform-origin: center; transition: transform .2s ease;
}
.site-header[data-active="underline"] .nav-link:hover::after,
.site-header[data-active="underline"] .nav-link.is-active::after { transform: scaleX(1); }

/* Dark-mode legibility: a stronger active tint + crisper solid-bar bottom edge */
html[data-mode="dark"] .site-header .nav-indicator { background: color-mix(in srgb, var(--c-primary) 30%, transparent); }
html[data-mode="dark"] .site-header[data-nav="bar"][data-border="1"],
html[data-mode="dark"] .site-header[data-nav="centered"][data-border="1"],
html[data-mode="dark"] .site-header[data-nav="elevated"][data-border="1"] { border-bottom-color: rgba(180,205,245,0.22); }

/* =================================================================
   Design × option reconciliations (avoid conflicting markers/sizes)
   ================================================================= */

/* The outline design draws its own underline via .nav-link border-bottom.
   When the 'underline' or 'none' active-indicator option is also chosen,
   suppress that border so we don't get a double underline (or a stray one
   under "no indicator"). The ::after underline (underline option) wins. */
.site-header[data-nav="outline"][data-active="underline"] .nav-link:hover,
.site-header[data-nav="outline"][data-active="underline"] .nav-link.is-active,
.site-header[data-nav="outline"][data-active="none"] .nav-link.is-active { border-bottom-color: transparent; }

/* 'No shadow' must also drop elevated's hardcoded brand-glow layer. */
.site-header[data-shadow="none"][data-nav="elevated"],
.site-header.is-scrolled[data-shadow="none"][data-nav="elevated"] { box-shadow: none; }

/* Active-link = "none": give a non-colour cue so it isn't colour-only (WCAG 1.4.1). */
.site-header[data-active="none"] .nav-link.is-active { font-weight: 800; }

/* Transparent fill-less designs float over the hero with no pod behind the
   text — add a subtle legibility halo (light in light mode, dark in dark mode)
   for the brand + links, dropped once outline firms to a frosted bar on scroll. */
.site-header[data-nav="outline"] .brand,
.site-header[data-nav="outline"] .nav-link,
.site-header[data-nav="split"] .nav-pod--brand .brand { text-shadow: 0 1px 3px rgba(255,255,255,.55); }
html[data-mode="dark"] .site-header[data-nav="outline"] .brand,
html[data-mode="dark"] .site-header[data-nav="outline"] .nav-link,
html[data-mode="dark"] .site-header[data-nav="split"] .nav-pod--brand .brand { text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.site-header.is-scrolled[data-nav="outline"] .brand,
.site-header.is-scrolled[data-nav="outline"] .nav-link { text-shadow: none; }

/* =================================================================
   Footer — "Spotlight": a near-black, spacious stage with one bold
   call-to-action. Same dramatic surface in light & dark mode.
   ================================================================= */
.site-footer {
    position: relative;
    margin-top: 120px;
    padding: 116px 0 40px;
    background: #0A0C12;          /* near-black in both modes */
    color: rgba(255,255,255,0.60);
    isolation: isolate;
    overflow: hidden;
}
/* Soft brand-accent glow rising behind the headline. */
.site-footer::before {
    content: "";
    position: absolute; left: 50%; top: -8%;
    width: min(960px, 92%); height: 380px; transform: translateX(-50%);
    background: radial-gradient(58% 100% at 50% 0%, color-mix(in srgb, var(--c-primary) 45%, transparent), transparent 72%);
    opacity: .6; filter: blur(6px); pointer-events: none; z-index: -1;
}
/* Hairline brand accent across the very top. */
.site-footer::after {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-primary) 75%, transparent), transparent);
}

/* ---- HERO: one inviting action, centred with room to breathe ---- */
.footer-lead { max-width: 940px; margin: 0 auto 88px; text-align: center; }
.footer-lead__kicker {
    display: inline-block; margin-bottom: 22px;
    font-size: .76rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
    color: color-mix(in srgb, var(--c-primary) 45%, #FFFFFF);
}
/* NOTE: hero links are scoped under .site-footer so they out-specify the
   global base.css `a:not(.btn){color:var(--c-primary)}` (0,1,1) — otherwise
   the headline + email would render dim brand-blue on the near-black stage. */
.site-footer .footer-lead__cta {
    display: inline-flex; align-items: center; gap: .3em;
    color: #fff; text-decoration: none;
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(2.5rem, 7vw, 5rem); line-height: 1.02; letter-spacing: -0.035em;
}
.site-footer .footer-lead__cta:hover { color: #fff; }
/* Brand underline grows under the words on hover; break pathological
   admin-set headlines instead of clipping them on narrow phones. */
.footer-lead__text {
    background-image: linear-gradient(var(--c-primary), var(--c-primary));
    background-repeat: no-repeat; background-position: 0 92%; background-size: 0% 4px;
    transition: background-size .4s cubic-bezier(.2,.8,.2,1);
    padding-bottom: .03em; overflow-wrap: anywhere;
}
.footer-lead__cta:hover .footer-lead__text { background-size: 100% 4px; }
.footer-lead__arrow {
    width: .82em; height: .82em; flex-shrink: 0;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.footer-lead__cta:hover .footer-lead__arrow { transform: translateX(.16em); }
.site-footer .footer-lead__mail {
    display: inline-block; margin-top: 26px;
    color: rgba(255,255,255,0.6); text-decoration: none;
    font-size: clamp(1.05rem, 2.2vw, 1.45rem);
    transition: color .2s ease;
}
.site-footer .footer-lead__mail:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }

/* ---- SECONDARY: brand block + link columns ---- */
.footer-rows {
    display: flex; flex-wrap: wrap; gap: 48px 64px; justify-content: space-between;
    padding-top: 56px; margin-bottom: 44px;
    border-top: 1px solid rgba(255,255,255,0.09);
}
.footer-brandblock { flex: 0 1 300px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
/* Reset the global navbar .brand__name nowrap+ellipsis so a long wordmark
   fallback (no logo) wraps in the footer column instead of being clipped. */
.footer-brandblock .brand, .footer-brandblock .brand__text { min-width: 0; max-width: 100%; }
.footer-brandblock .brand__name { color: #fff; white-space: normal; overflow: visible; text-overflow: clip; }
/* Near-black stage → force the light-ink logo (markup only emits --dark). */
.footer-brandblock .brand__logo--light { display: none !important; }
.footer-brandblock .brand__logo--dark  { display: block !important; max-height: 42px; width: auto; }
.footer-tagline { margin: 0; max-width: 34ch; color: rgba(255,255,255,0.5); font-size: .98rem; line-height: 1.7; }

/* Social buttons — ghost circles that light up brand on hover. */
.site-footer .social-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.site-footer .social-btn {
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.82);
    transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.site-footer .social-btn svg { width: 18px; height: 18px; display: block; }
.site-footer .social-btn:hover {
    background: var(--c-primary); color: #fff; border-color: var(--c-primary);
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--c-primary) 60%, transparent);
}

/* ---- Link columns ---- */
.footer-links {
    flex: 1 1 560px;
    display: flex; flex-wrap: wrap; gap: 36px 56px;
}
.footer-col { min-width: 140px; }
.footer-col--contact { min-width: 230px; }
.footer-title {
    font-family: var(--font-body); font-weight: 600;
    font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255,255,255,0.85); margin: 0 0 18px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col ul a {
    color: rgba(255,255,255,0.58); font-size: .95rem; display: inline-block;
    transition: color .18s ease;
}
.footer-col ul a:hover { color: #fff; }

/* Shared contact-list base (also used by the contact page). */
.contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.contact-list li { display: flex; gap: 12px; color: var(--c-text); }
.contact-list__icon { flex-shrink: 0; opacity: .8; }
.contact-list a { color: var(--c-text); }
.contact-list a:hover { color: var(--c-primary); }
.contact-list--lg li { font-size: 1.02rem; }
.contact-list__tag { opacity: .65; }

/* Contact list on the near-black footer — scoped under .site-footer so it
   out-specifies the base block above regardless of source order. */
.site-footer .contact-list { gap: 13px; }
.site-footer .contact-list li { align-items: center; min-width: 0; color: rgba(255,255,255,0.6); font-size: .92rem; line-height: 1.5; }
.site-footer .contact-list li > a,
.site-footer .contact-list li > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.site-footer .contact-list a { color: rgba(255,255,255,0.6); }
.site-footer .contact-list a:hover { color: #fff; }
.site-footer .contact-list .muted { color: rgba(255,255,255,0.42); }
.site-footer .contact-list__icon { display: inline-grid; place-items: center; opacity: 1; color: var(--c-primary); flex-shrink: 0; }
.site-footer .contact-list__icon .ico { width: 16px; height: 16px; }

/* ---- Bottom bar ---- */
.footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px 28px; flex-wrap: wrap;
    padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.09);
    color: rgba(255,255,255,0.4); font-size: .85rem;
}
.footer-bottom p { margin: 0; color: rgba(255,255,255,0.4); }
.footer-meta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer-meta .powered { color: rgba(255,255,255,0.5); }
.footer-dot { opacity: .5; }
.footer-developed { color: rgba(255,255,255,0.4); }
.muted-link { color: rgba(255,255,255,0.55); transition: color .18s ease; }
.muted-link:hover { color: color-mix(in srgb, var(--c-primary) 60%, #FFFFFF); }
.dot { opacity: .5; margin: 0 6px; }