/* ===========================================================================
   Theme 4 — Glass Noir
   ---------------------------------------------------------------------------
   Deep charcoal with layered frosted panels and a compact floating navigation.

   Two rules govern this theme:
     1. Every glass surface declares an opaque colour first and only then adds
        the translucent treatment, so a browser without backdrop-filter — and
        a low-powered phone where it is disabled — still gets a solid panel.
     2. Text contrast is never traded for the glass effect. The blur sits
        behind the panel, not behind the type.
   =========================================================================== */

[data-theme="glass-noir"] {
    --color-background:       #09090B;
    --color-background-alt:   #101014;
    --color-surface:          #17171B;
    --color-surface-elevated: #1F1F25;
    --color-text:             #FAFAFC;
    --color-text-muted:       #B7B7BE;
    --color-border:           #2E2E34;
    --color-border-strong:    #4A4A52;

    --color-action:           #F3F3F5;
    --color-action-text:      #0B0B0D;
    --color-action-edge:      #B9B9BE;
    --color-action-highlight: #FFFFFF;

    --color-secondary-bg:     #17171B;
    --color-secondary-text:   #F5F5F7;
    --color-secondary-border: #55555E;

    --color-focus:            #FFFFFF;
    --color-focus-outer:      #62626A;
    --color-shadow:           #000000;
    --shadow-alpha:           0.52;

    --border-radius: 14px;
    --line-height: 1.66;

    /* Glass values, kept in one place so the fallbacks stay in step. */
    --glass-fill: rgba(255, 255, 255, 0.075);
    --glass-fill-strong: rgba(255, 255, 255, 0.12);
    --glass-edge: rgba(255, 255, 255, 0.18);
}

/* ---------------------------------------------------- background shapes */

/* Quiet geometry, fixed behind the content. Pure CSS: no image request, and
   nothing that repaints during a scroll. */
[data-theme="glass-noir"] body {
    background-color: var(--color-background);
    background-image:
        radial-gradient(46rem 46rem at 82% -8%, rgba(255, 255, 255, 0.055), transparent 62%),
        radial-gradient(38rem 38rem at 6% 42%, rgba(255, 255, 255, 0.04), transparent 60%),
        linear-gradient(180deg, #101014 0%, #09090B 42%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* ----------------------------------------------- floating navigation bar */

[data-theme="glass-noir"] .site-header {
    position: sticky;
    top: 0;
    padding-block: var(--space-sm);
    background: transparent;
    border-bottom: 0;
}

[data-theme="glass-noir"] .site-header__inner {
    /* Opaque first — the fallback for browsers without backdrop-filter. */
    background: #16161A;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding-inline: clamp(1rem, 2.5vw, 1.75rem);
    min-height: 3.75rem;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
    [data-theme="glass-noir"] .site-header__inner {
        background: var(--glass-fill-strong);
        border-color: var(--glass-edge);
        -webkit-backdrop-filter: blur(18px) saturate(150%);
        backdrop-filter: blur(18px) saturate(150%);
    }
}

[data-theme="glass-noir"] .brand__mark {
    border-radius: 12px;
    border-color: var(--glass-edge);
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="glass-noir"] .brand__name { font-size: 1rem; letter-spacing: 0.02em; }

[data-theme="glass-noir"] .site-nav__link { font-size: 0.82rem; letter-spacing: 0.01em; border-bottom: 0; }

[data-theme="glass-noir"] .site-nav__link.is-current {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding-inline: 0.85rem;
    border-bottom: 0;
}

[data-theme="glass-noir"] .nav-toggle { border-radius: 999px; border-color: var(--glass-edge); }

@media (max-width: 860px) {
    [data-theme="glass-noir"] .site-nav {
        inset: 5.25rem var(--gutter) auto;
        bottom: auto;
        max-height: calc(100vh - 7rem);
        border-radius: 20px;
        border: 1px solid var(--color-border);
        background: #16161A;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
        transform: translateY(-12px) scale(0.98);
        opacity: 0;
        padding: var(--space-md);
    }

    [data-theme="glass-noir"] .site-nav.is-open { transform: translateY(0) scale(1); opacity: 1; }

    @supports (backdrop-filter: blur(12px)) {
        [data-theme="glass-noir"] .site-nav {
            background: rgba(22, 22, 26, 0.86);
            -webkit-backdrop-filter: blur(22px);
            backdrop-filter: blur(22px);
        }
    }

    [data-theme="glass-noir"] .site-nav__link { font-size: var(--step-0); padding: var(--space-sm) var(--space-xs); }
    [data-theme="glass-noir"] .site-nav__item + .site-nav__item { border-top-color: var(--color-border); }
}

/* --------------------------------------------------------- glass panels */

[data-theme="glass-noir"] .card,
[data-theme="glass-noir"] .enquiry,
[data-theme="glass-noir"] .detail__aside,
[data-theme="glass-noir"] .site-footer__disclaimer,
[data-theme="glass-noir"] .form__group--consent,
[data-theme="glass-noir"] .empty-state {
    background: #15151A;                     /* opaque fallback */
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
}

@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
    [data-theme="glass-noir"] .card,
    [data-theme="glass-noir"] .enquiry,
    [data-theme="glass-noir"] .detail__aside,
    [data-theme="glass-noir"] .site-footer__disclaimer,
    [data-theme="glass-noir"] .form__group--consent {
        background: var(--glass-fill);
        border-color: var(--glass-edge);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
    }
}

[data-theme="glass-noir"] .card:hover {
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55);
}

[data-theme="glass-noir"] .card__image { filter: grayscale(1) contrast(1.05) brightness(0.95); }

/* Blur is expensive on a low-powered phone; drop it below the breakpoint and
   keep the solid panels, which look intentional rather than degraded. */
@media (max-width: 720px) {
    [data-theme="glass-noir"] .card,
    [data-theme="glass-noir"] .enquiry,
    [data-theme="glass-noir"] .detail__aside,
    [data-theme="glass-noir"] .site-footer__disclaimer {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: #15151A;
    }
}

/* ------------------------------------------------------------------ hero */

[data-theme="glass-noir"] .section--hero { padding-block: clamp(3rem, 8vw, 6.5rem); }

[data-theme="glass-noir"] .hero__title {
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.04;
}

[data-theme="glass-noir"] .hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--glass-edge);
    letter-spacing: 0.14em;
    font-size: 0.68rem;
}

[data-theme="glass-noir"] .hero__image {
    border-radius: 20px;
    border: 1px solid var(--glass-edge);
    filter: grayscale(1) contrast(1.08);
    box-shadow: 0 36px 80px rgba(0, 0, 0, 0.65);
}

[data-theme="glass-noir"] .portrait-placeholder {
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--glass-edge);
}

/* ------------------------------------------------------------ surfaces */

[data-theme="glass-noir"] .page-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent);
    border-bottom: 1px solid var(--color-border);
}

[data-theme="glass-noir"] .section--credentials,
[data-theme="glass-noir"] .section--contact-preview { background: transparent; }

[data-theme="glass-noir"] .form__input {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-border-strong);
    border-radius: 10px;
}
[data-theme="glass-noir"] .form__input::placeholder { color: #85858E; }

[data-theme="glass-noir"] .filters__field input[type="search"] {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--color-border-strong);
    border-radius: 999px;
}

[data-theme="glass-noir"] .site-footer {
    background: rgba(9, 9, 11, 0.9);
    border-top: 1px solid var(--color-border);
}

[data-theme="glass-noir"] .notice { color: #131316; border-radius: 10px; }
[data-theme="glass-noir"] .notice__title { color: #0A0A0C; }

[data-theme="glass-noir"] .disclaimer__dialog {
    background: #16161B;
    border: 1px solid var(--glass-edge);
    border-radius: 20px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
}

@supports (backdrop-filter: blur(12px)) {
    [data-theme="glass-noir"] .disclaimer__dialog {
        background: rgba(24, 24, 29, 0.92);
        -webkit-backdrop-filter: blur(24px);
        backdrop-filter: blur(24px);
    }
}

/* ----------------------------------------------- dimensional 3D controls */

[data-theme="glass-noir"] .btn { border-radius: 999px; }

[data-theme="glass-noir"] .btn--primary {
    background: linear-gradient(180deg, #FFFFFF, #EDEDF0);
    box-shadow:
        inset 0 1px 0 #FFFFFF,
        0 var(--btn-depth) 0 var(--color-action-edge),
        0 calc(var(--btn-depth) * 2.4) calc(var(--btn-depth) * 4) rgba(0, 0, 0, 0.52);
}

[data-theme="glass-noir"] .btn--secondary {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 calc(var(--btn-depth) - 2px) 0 rgba(0, 0, 0, 0.85),
        0 calc(var(--btn-depth) * 2) calc(var(--btn-depth) * 3) rgba(0, 0, 0, 0.45);
}

[data-theme="glass-noir"] .chip { border-radius: 999px; border-color: var(--color-border-strong); }
[data-theme="glass-noir"] .chip.is-active { color: #0B0B0D; }
[data-theme="glass-noir"] .pagination__link { border-radius: 999px; border-color: var(--color-border); }
[data-theme="glass-noir"] .pagination__link.is-current { color: #0B0B0D; }
[data-theme="glass-noir"] .back-to-top { border-radius: 999px; }

[data-theme="glass-noir"] .timeline__item::before { background: var(--color-background); border-color: #E6E6EA; }

/* ------------------------------------------------- premium detail layer */

/* Luminous edges and frosted chips, each with an opaque fallback so a
   browser without backdrop-filter still gets a solid, readable surface. */
[data-theme="glass-noir"] .section__eyebrow { color: #9A9AA3; }
[data-theme="glass-noir"] .section__eyebrow::before {
    border-top-color: rgba(255, 255, 255, 0.3);
    width: 2rem;
}

[data-theme="glass-noir"] .credential-strip {
    border-top-color: rgba(255, 255, 255, 0.14);
    gap: var(--space-sm);
}

[data-theme="glass-noir"] .credential {
    padding: 0.65rem 1rem;
    border-radius: 14px;
    background: #15151A;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

@supports (backdrop-filter: blur(12px)) {
    [data-theme="glass-noir"] .credential {
        background: rgba(255, 255, 255, 0.06);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
}

[data-theme="glass-noir"] .card--practice .card__index { color: rgba(255, 255, 255, 0.07); }
[data-theme="glass-noir"] .card--practice:hover .card__index { color: rgba(255, 255, 255, 0.13); }

[data-theme="glass-noir"] .card--practice .card__icon {
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
}

[data-theme="glass-noir"] .site-footer__wordmark { color: rgba(255, 255, 255, 0.06); }

[data-theme="glass-noir"] .pull-quote,
[data-theme="glass-noir"] .prose blockquote.pull {
    border-top-color: rgba(255, 255, 255, 0.28);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="glass-noir"] .process__step::before {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.22);
}

[data-theme="glass-noir"] .fact-grid,
[data-theme="glass-noir"] .fact-grid__row,
[data-theme="glass-noir"] .faq,
[data-theme="glass-noir"] .faq__item { border-color: rgba(255, 255, 255, 0.1); }

/* The mobile nav panel must fit the *visible* viewport, not the taller one
   that 100vh reports while the browser chrome is showing. */
@supports (height: 100dvh) {
    @media (max-width: 860px) {
        [data-theme="glass-noir"] .site-nav { max-height: calc(100dvh - 7rem); }
    }
}