/* ==========================================================================
   RADIOGRAPHIC — COMPLETE DESIGN SYSTEM
   ========================================================================== */

:root {

    /* ----------------------------------------------------------------------
       Core colors
       ---------------------------------------------------------------------- */

    --bg: #F6F8F9;
    --bg-raised: #FFFFFF;
    --bg-sunken: #EEF2F4;

    --ink: #0E1620;
    --ink-soft: #3B4653;

    --navy: #0B1A2E;
    --navy-2: #122A47;

    --blue: #1D4E89;
    --blue-soft: #E7EEF6;

    --teal: #2FB8AE;
    --teal-ink: #0E5C56;

    --muted: #6B7580;

    --line: #DEE4E8;
    --line-strong: #C7D0D6;

    --danger: #B3432B;

    /* ----------------------------------------------------------------------
       Signature density scale
       ---------------------------------------------------------------------- */

    --d1: #0B0D10;
    --d2: #191C21;
    --d3: #262B32;
    --d4: #333A43;
    --d5: #414A55;
    --d6: #4F5A66;
    --d7: #5E6A77;
    --d8: #6D7A88;
    --d9: #828E9A;
    --d10: #98A3AD;
    --d11: #AFB8C0;
    --d12: #C6CCD2;
    --d13: #DBDFE3;
    --d14: #E9ECEE;
    --d15: #F4F5F6;
    --d16: #FFFFFF;

    /* ----------------------------------------------------------------------
       Typography
       ---------------------------------------------------------------------- */

    --font-display:
        "IBM Plex Sans",
        "Inter",
        system-ui,
        sans-serif;

    --font-body:
        "Inter",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;

    --font-mono:
        "IBM Plex Mono",
        ui-monospace,
        "SF Mono",
        monospace;

    --step-0:
        clamp(0.9rem, 0.87rem + 0.15vw, 1rem);

    --step-1:
        clamp(1.05rem, 1rem + 0.25vw, 1.2rem);

    --step-2:
        clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);

    --step-3:
        clamp(1.7rem, 1.5rem + 1vw, 2.2rem);

    --step-4:
        clamp(2.4rem, 2rem + 2vw, 3.4rem);

    --step-5:
        clamp(3rem, 2.3rem + 3.5vw, 4.6rem);

    /* ----------------------------------------------------------------------
       Layout
       ---------------------------------------------------------------------- */

    --maxw: 1240px;

    --gutter:
        clamp(
            1.25rem,
            4vw,
            3rem
        );

    --radius-s: 6px;
    --radius-m: 12px;
    --radius-l: 20px;

    --ease:
        cubic-bezier(
            .2,
            .7,
            .2,
            1
        );

    /* ----------------------------------------------------------------------
       Shadows
       ---------------------------------------------------------------------- */

    --shadow-1:
        0 1px 2px
        rgba(11, 26, 46, 0.06),
        0 1px 1px
        rgba(11, 26, 46, 0.04);

    --shadow-2:
        0 8px 30px
        rgba(11, 26, 46, 0.10);

    --shadow-3:
        0 20px 60px
        rgba(11, 26, 46, 0.18);

    color-scheme: light;
}


/* ==========================================================================
   DARK THEME
   ========================================================================== */

[data-theme="dark"] {

    --bg: #0A0F16;
    --bg-raised: #101823;
    --bg-sunken: #0C1219;

    --ink: #EAEEF2;
    --ink-soft: #AEB8C4;

    --navy: #0B1A2E;
    --navy-2: #16314F;

    --blue: #5C8FCB;
    --blue-soft: #12233A;

    --teal: #45D6C9;
    --teal-ink: #A9F1EA;

    --muted: #7C8896;

    --line: #202A36;
    --line-strong: #2C3947;

    --shadow-1:
        0 1px 2px
        rgba(0, 0, 0, 0.4);

    --shadow-2:
        0 8px 30px
        rgba(0, 0, 0, 0.45);

    --shadow-3:
        0 20px 70px
        rgba(0, 0, 0, 0.6);

    color-scheme: dark;
}


/* ==========================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: var(--bg);
    color: var(--ink);

    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.55;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    transition:
        background .25s var(--ease),
        color .25s var(--ease);

    overflow-x: hidden;
}

img,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    color: inherit;
}

a {
    color: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

::selection {
    background: var(--teal);
    color: var(--navy);
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: fixed;
    left: 1rem;
    top: -4rem;

    z-index: 2000;

    padding: .75rem 1.1rem;

    border-radius: var(--radius-s);

    background: var(--navy);
    color: #fff;

    font-size: .9rem;
    font-weight: 600;

    transition:
        top .2s var(--ease);
}

.skip-link:focus {
    top: 1rem;
}

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(
        0,
        0,
        0,
        0
    );

    white-space: nowrap;
    border: 0;
}


/* ==========================================================================
   LAYOUT
   ========================================================================== */

.wrap {
    width: min(
        100%,
        var(--maxw)
    );

    margin-inline: auto;
    padding-inline: var(--gutter);
}

section {
    padding:
        clamp(
            3.5rem,
            7vw,
            5.5rem
        )
        0;
}

section.alt,
.alt {
    background: var(--bg-sunken);
}


/* ==========================================================================
   DENSITY SCALE
   ========================================================================== */

.density-rule {
    display: flex;

    width: 100%;
    height: 4px;

    overflow: hidden;

    border-radius: 2px;
}

.density-rule span {
    flex: 1 1 0;
}

.density-rule span:nth-child(1) {
    background: var(--d1);
}

.density-rule span:nth-child(2) {
    background: var(--d2);
}

.density-rule span:nth-child(3) {
    background: var(--d3);
}

.density-rule span:nth-child(4) {
    background: var(--d4);
}

.density-rule span:nth-child(5) {
    background: var(--d5);
}

.density-rule span:nth-child(6) {
    background: var(--d6);
}

.density-rule span:nth-child(7) {
    background: var(--d7);
}

.density-rule span:nth-child(8) {
    background: var(--d8);
}

.density-rule span:nth-child(9) {
    background: var(--d9);
}

.density-rule span:nth-child(10) {
    background: var(--d10);
}

.density-rule span:nth-child(11) {
    background: var(--d11);
}

.density-rule span:nth-child(12) {
    background: var(--d12);
}

.density-rule span:nth-child(13) {
    background: var(--d13);
}

.density-rule span:nth-child(14) {
    background: var(--d14);
}

.density-rule span:nth-child(15) {
    background: var(--d15);
}

.density-rule span:nth-child(16) {
    background: var(--d16);
}

.density-rule.tight {
    width: 64px;
}

.eyebrow {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin-bottom: 1.1rem;
}

.eyebrow-label {
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 600;

    letter-spacing: .14em;
    text-transform: uppercase;

    color: var(--teal-ink);
}


/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.15;
    color: var(--ink);
    letter-spacing: -0.01em;
}

h1 {
    font-size: var(--step-5);
}

h2 {
    font-size: var(--step-3);
}

h3 {
    font-size: var(--step-2);
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;

    margin-bottom: 2.4rem;

    flex-wrap: wrap;
}

.section-head h2 {
    max-width: 20ch;
}

.section-head .lead,
.lead {
    max-width: 42ch;

    color: var(--ink-soft);
    font-size: .98rem;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
    --btn-bg: var(--navy);
    --btn-fg: #fff;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;

    padding: .8rem 1.3rem;

    border: 1px solid transparent;
    border-radius: 999px;

    background: var(--btn-bg);
    color: var(--btn-fg);

    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;

    cursor: pointer;

    transition:
        transform .18s var(--ease),
        box-shadow .18s var(--ease),
        background .18s var(--ease),
        border-color .18s var(--ease);
}

.btn svg {
    width: 16px;
    height: 16px;
    flex: none;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
}

.btn:active {
    transform: translateY(0);
}

.btn.secondary {
    --btn-bg: transparent;
    --btn-fg: var(--ink);

    border-color: var(--line-strong);
}

.btn.secondary:hover {
    background: var(--blue-soft);
    border-color: var(--teal);
}

.btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 500;

    padding: 1.1rem 0;

    border-bottom: 1px solid transparent;

    transition:
        background .25s var(--ease),
        border-color .25s var(--ease),
        padding .25s var(--ease),
        backdrop-filter .25s var(--ease);
}

.site-nav.solid {
    background:
        color-mix(
            in srgb,
            var(--bg) 88%,
            transparent
        );

    backdrop-filter:
        blur(14px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(14px)
        saturate(140%);

    border-bottom-color:
        var(--line);

    padding: .8rem 0;
}

.nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1.5rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: .6rem;

    min-width: 0;

    text-decoration: none;
}

.brand-mark {
    width: 30px;
    height: 30px;
    flex: none;
}

.brand-text,
.mobile-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
}

.brand-role {
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .08em;
    color: var(--muted);
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.9rem;
}

.nav-links a {
    position: relative;

    padding-block: .3rem;

    color: var(--ink-soft);

    font-size: .92rem;
    font-weight: 500;
    text-decoration: none;
}

.nav-links a:hover,
.nav-links a[aria-current="true"] {
    color: var(--ink);
}

.nav-links a[aria-current="true"]::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: -6px;

    height: 2px;

    border-radius: 2px;

    background: var(--teal);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: .7rem;
}

.theme-toggle {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border: 1px solid var(--line-strong);
    border-radius: 999px;

    background: var(--bg-raised);

    cursor: pointer;
}

.theme-toggle svg {
    width: 17px;
    height: 17px;
}

.theme-toggle .icon-moon {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: block;
}

.nav-toggle {
    display: none;
    place-items: center;

    width: 40px;
    height: 40px;

    border: 1px solid var(--line-strong);
    border-radius: var(--radius-s);

    background: var(--bg-raised);

    cursor: pointer;
}

.nav-toggle svg {
    width: 19px;
    height: 19px;
}


/* ==========================================================================
   MOBILE MENU
   ========================================================================== */

.mobile-panel {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: flex;
    flex-direction: column;

    padding: var(--gutter);

    background: var(--bg);

    opacity: 0;
    pointer-events: none;

    transform: translateY(-8px);

    transition:
        opacity .22s var(--ease),
        transform .22s var(--ease);
}

.mobile-panel.open {
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.mobile-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 2.2rem;
}

.mobile-links {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.mobile-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 1.05rem .2rem;

    border-bottom: 1px solid var(--line);

    color: var(--ink);

    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 600;

    text-decoration: none;
}

.mobile-links svg {
    width: 16px;
    height: 16px;
    opacity: .4;
}

.mobile-panel-foot {
    display: flex;
    flex-direction: column;
    gap: .9rem;

    margin-top: auto;
    padding-top: 2rem;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
    position: relative;

    overflow: hidden;

    padding:
        clamp(4rem, 8vw, 6.5rem)
        0
        clamp(3rem, 6vw, 4rem);

    background:
        radial-gradient(
            70% 60% at 85% 0%,
            color-mix(
                in srgb,
                var(--teal) 14%,
                transparent
            ),
            transparent 60%
        ),
        radial-gradient(
            60% 50% at 0% 100%,
            color-mix(
                in srgb,
                var(--blue) 10%,
                transparent
            ),
            transparent 65%
        );
}

.hero-bg-grid {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .12;

    background-image:
        linear-gradient(
            to right,
            var(--line) 1px,
            transparent 1px
        ),
        linear-gradient(
            to bottom,
            var(--line) 1px,
            transparent 1px
        );

    background-size: 56px 56px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );
}

.hero-grid {
    position: relative;
    z-index: 1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, .95fr);

    align-items: center;

    gap:
        clamp(
            2rem,
            5vw,
            4rem
        );
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;

    margin-bottom: 1.4rem;
    padding: .4rem .75rem;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--teal) 35%,
            var(--line)
        );

    border-radius: 999px;

    background: var(--blue-soft);

    color: var(--teal-ink);

    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.status-dot {
    width: 6px;
    height: 6px;

    flex: none;

    border-radius: 50%;

    background: var(--teal);
}

@media (prefers-reduced-motion: no-preference) {

    .status-dot {
        animation:
            pulse-dot
            2.4s
            ease-in-out
            infinite;
    }
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}

.hero h1 {
    max-width: 14ch;
    margin-bottom: 1.1rem;
}

.hero h1 em {
    color: var(--blue);
    font-style: normal;
}

[data-theme="dark"] .hero h1 em {
    color: var(--teal);
}

.hero-sub {
    max-width: 46ch;
    margin-bottom: 2rem;

    color: var(--ink-soft);

    font-size: var(--step-1);
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;

    margin-bottom: 2.2rem;
}

.hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
}

.hero-meta-item {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.hero-meta-item strong {
    font-family: var(--font-display);
    font-size: 1.15rem;
}

.hero-meta-item span {
    color: var(--muted);
    font-size: .78rem;
}


/* ==========================================================================
   WINDOWING CARD
   ========================================================================== */

.window-card {
    position: relative;

    width: 100%;
    max-width: 520px;

    padding: 1.4rem;

    border:
        1px solid
        rgba(255, 255, 255, .08);

    border-radius: var(--radius-l);

    background: var(--navy);

    box-shadow: var(--shadow-3);

    overflow: hidden;
}

.window-viewport {
    position: relative;

    overflow: hidden;

    aspect-ratio: 400 / 310;

    border-radius: var(--radius-m);

    background: #05070a;

    isolation: isolate;
}

.window-viewport svg {
    display: block;

    width: 100%;
    height: 100%;

    transform-origin: center;

    transition:
        filter 120ms linear;
}

.window-hud {
    position: absolute;

    top: .75rem;
    left: .8rem;
    right: .8rem;

    z-index: 4;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 1rem;

    color:
        rgba(
            255,
            255,
            255,
            .62
        );

    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .06em;
    text-transform: uppercase;

    pointer-events: none;
}

.window-hud > span {
    padding: .25rem .45rem;

    border-radius: 4px;

    background:
        rgba(
            0,
            0,
            0,
            .48
        );

    backdrop-filter: blur(4px);
}

.scan-line-overlay {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    z-index: 5;

    height: 2px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--teal),
            transparent
        );

    opacity: .7;
}

@media (prefers-reduced-motion: no-preference) {

    .scan-line-overlay {
        animation:
            scan-window
            4s
            ease-in-out
            infinite;
    }
}

@keyframes scan-window {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform:
            translateY(
                calc(100% - 2px)
            );
    }
}

.window-controls {
    display: flex;
    flex-direction: column;
    gap: .8rem;

    padding-top: 1.1rem;
}

.window-row {
    display: grid;

    grid-template-columns:
        4.5rem
        3.4rem
        minmax(0, 1fr);

    align-items: center;

    gap: .7rem;
}

.window-row label {
    color:
        rgba(
            255,
            255,
            255,
            .56
        );

    font-family: var(--font-mono);
    font-size: .66rem;
    line-height: 1;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.window-value {
    min-width: 3rem;

    text-align: right;

    color:
        rgba(
            255,
            255,
            255,
            .75
        );

    font-family: var(--font-mono);
    font-size: .68rem;
}

.window-row input[type="range"] {
    width: 100%;
    height: 4px;

    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #111,
            #fff
        );

    cursor: pointer;
}

.window-row input[type="range"]::-webkit-slider-thumb {
    width: 17px;
    height: 17px;

    appearance: none;
    -webkit-appearance: none;

    border:
        2px solid
        #fff;

    border-radius: 50%;

    background: var(--teal);

    box-shadow:
        0 3px 10px
        rgba(
            0,
            0,
            0,
            .3
        );
}

.window-row input[type="range"]::-moz-range-thumb {
    width: 13px;
    height: 13px;

    border:
        2px solid
        #fff;

    border-radius: 50%;

    background: var(--teal);
}

.window-row input[type="range"]:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 5px;
}

.window-caption {
    margin-top: 1rem;

    color:
        rgba(
            255,
            255,
            255,
            .62
        );

    font-size: .78rem;
    line-height: 1.6;
}

.window-caption strong {
    color: #fff;
}

.dicom-meta-display {
    position: absolute;

    left: .8rem;
    bottom: .7rem;

    z-index: 4;

    padding: .4rem .55rem;

    border-radius: 4px;

    background:
        rgba(
            0,
            0,
            0,
            .48
        );

    color:
        rgba(
            255,
            255,
            255,
            .4
        );

    font-family: var(--font-mono);
    font-size: .56rem;
    line-height: 1.45;
    letter-spacing: .04em;

    pointer-events: none;
}


/* ==========================================================================
   LIVE TICKER
   ========================================================================== */

.ticker {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);

    background: var(--bg-raised);
}

.ticker-wrap {
    width: min(
        100%,
        var(--maxw)
    );

    margin-inline: auto;

    padding:
        .9rem
        var(--gutter);

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 1.2rem;
}

.ticker-label {
    color: var(--muted);

    font-family: var(--font-mono);
    font-size: .66rem;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ticker-stage {
    position: relative;

    min-width: 0;
    min-height: 1.8rem;

    overflow: hidden;
}

.ticker-item {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;

    gap: .65rem;

    opacity: 0;

    transform:
        translateY(
            6px
        );

    transition:
        opacity .35s var(--ease),
        transform .35s var(--ease);

    pointer-events: none;
}

.ticker-item.active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.ticker-item a {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--ink);

    font-size: .88rem;
    font-weight: 500;

    text-decoration: none;
}

.ticker-item a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ticker-tag {
    flex: none;

    padding:
        .18rem
        .5rem;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--teal) 35%,
            var(--line)
        );

    border-radius: 999px;

    background: var(--blue-soft);

    color: var(--teal-ink);

    font-family: var(--font-mono);
    font-size: .61rem;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.ticker-controls {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.ticker-btn {
    display: grid;
    place-items: center;

    width: 29px;
    height: 29px;

    border:
        1px solid
        var(--line-strong);

    border-radius: 50%;

    background: transparent;

    cursor: pointer;
}

.ticker-btn:hover {
    border-color: var(--teal);
    background: var(--blue-soft);
}

.ticker-btn svg {
    width: 12px;
    height: 12px;
}

.ticker-dots {
    display: flex;
    align-items: center;

    gap: .3rem;

    margin-inline: .3rem;
}

.ticker-dots button {
    width: 6px;
    height: 6px;

    padding: 0;

    border: 0;
    border-radius: 999px;

    background: var(--line-strong);

    cursor: pointer;
}

.ticker-dots button[aria-current="true"] {
    width: 16px;

    background: var(--teal);
}


/* ==========================================================================
   PROFILE
   ========================================================================== */

.profile-grid {
    display: grid;

    grid-template-columns:
        .8fr
        1.2fr;

    gap:
        clamp(
            2rem,
            5vw,
            4rem
        );
}

.profile-name {
    margin-bottom: 1rem;
}

.profile-summary {
    margin-bottom: 1.2rem;

    color: var(--ink-soft);
}

.specialty-tags {
    display: flex;
    flex-wrap: wrap;

    gap: .55rem;

    margin-top: 1.6rem;
}

.specialty-tags span {
    padding:
        .4rem
        .8rem;

    border:
        1px solid
        var(--line-strong);

    border-radius: 999px;

    color: var(--ink-soft);

    font-size: .82rem;
}

.philosophy {
    margin-top: 1.8rem;

    padding:
        clamp(
            1.6rem,
            4vw,
            2.4rem
        );

    border-radius: var(--radius-l);

    background: var(--navy);
    color: #fff;
}

.philosophy p {
    color: #fff;

    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.6;
}

.philosophy cite {
    display: block;

    margin-top: 1rem;

    color:
        rgba(
            255,
            255,
            255,
            .6
        );

    font-size: .8rem;
    font-style: normal;
}

.credential-list {
    display: flex;
    flex-direction: column;
}

.credential-item {
    display: grid;

    grid-template-columns:
        90px
        minmax(0, 1fr);

    gap: 1rem;

    padding: 1.1rem 0;

    border-top:
        1px solid
        var(--line);
}

.credential-item:last-child {
    border-bottom:
        1px solid
        var(--line);
}

.credential-item time {
    color: var(--muted);

    font-family: var(--font-mono);
    font-size: .78rem;
}

.credential-item h4 {
    margin-bottom: .25rem;
    font-size: 1rem;
}

.credential-item p {
    color: var(--ink-soft);
    font-size: .9rem;
}


/* ==========================================================================
   EXPERTISE
   ========================================================================== */

.expertise-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 1.2rem;
}

.expertise-card {
    width: 100%;

    padding: 1.5rem;

    border:
        1px solid
        var(--line);

    border-radius: var(--radius-m);

    background: var(--bg-raised);

    text-align: left;

    cursor: pointer;

    transition:
        border-color .2s var(--ease),
        box-shadow .2s var(--ease);
}

.expertise-card:hover {
    border-color:
        var(--line-strong);

    box-shadow:
        var(--shadow-1);
}

.expertise-icon {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    margin-bottom: 1rem;

    border-radius:
        var(--radius-s);

    background: var(--blue-soft);

    color: var(--blue);
}

[data-theme="dark"] .expertise-icon {
    color: var(--teal);
}

.expertise-icon svg {
    width: 22px;
    height: 22px;
}

.expertise-card h3 {
    margin-bottom: .4rem;

    font-size: 1.05rem;
}

.expertise-card .summary {
    color: var(--ink-soft);
    font-size: .88rem;
}

.expertise-card .toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 1rem;
}

.expertise-card .toggle-row svg {
    width: 16px;
    height: 16px;

    color: var(--muted);

    transition:
        transform .25s var(--ease);
}

.expertise-card[aria-expanded="true"]
.expertise-card .toggle-row svg {
    transform: rotate(45deg);
}

.expertise-more {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows .3s var(--ease);
}

.expertise-card[aria-expanded="true"]
.expertise-more {
    grid-template-rows: 1fr;
}

.expertise-more-inner {
    overflow: hidden;
}

.expertise-more ul {
    display: flex;
    flex-direction: column;

    gap: .5rem;

    margin-top: .9rem;
    padding-top: .9rem;

    border-top:
        1px solid
        var(--line);
}

.expertise-more li {
    display: flex;

    gap: .55rem;

    color: var(--ink-soft);

    font-size: .86rem;
}

.expertise-more li svg {
    flex: none;

    width: 14px;
    height: 14px;

    margin-top: .2rem;

    color: var(--teal);
}


/* ==========================================================================
   CONSULTANCY
   ========================================================================== */

.consult-layout {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        clamp(
            2rem,
            5vw,
            4rem
        );

    align-items: start;
}

.consultancy-lead {
    margin-bottom: 2rem;
}

.consult-areas {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.consult-area {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding: 1rem 0;

    border-top:
        1px solid
        var(--line);

    font-weight: 500;
}

.consult-area:last-child {
    border-bottom:
        1px solid
        var(--line);
}

.consult-area > span:last-child {
    display: grid;
    place-items: center;
}

.consult-area svg {
    width: 16px;
    height: 16px;

    color: var(--muted);
}

.consult-panel {
    padding:
        clamp(
            1.6rem,
            4vw,
            2.2rem
        );

    border:
        1px solid
        var(--line);

    border-radius:
        var(--radius-l);

    background:
        var(--bg-raised);

    box-shadow:
        var(--shadow-1);
}

.avail-row {
    display: flex;
    align-items: center;

    gap: .6rem;

    margin-bottom: 1.4rem;
}

.avail-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--teal);
}

.avail-row span:last-child {
    color: var(--ink-soft);
    font-size: .85rem;
}

.consult-panel h3 {
    margin-bottom: .55rem;
}

.consult-panel > p {
    margin-bottom: 1.4rem;

    color: var(--ink-soft);
    font-size: .9rem;
}

.consult-submit-trigger {
    width: 100%;
}


/* ==========================================================================
   KNOWLEDGE HUB
   ========================================================================== */

.hub-toolbar {
    display: flex;
    align-items: stretch;

    gap: .8rem;

    margin-bottom: 1.1rem;

    flex-wrap: wrap;
}

.search-field {
    flex: 1 1 280px;

    min-width: 0;

    display: flex;
    align-items: center;

    gap: .6rem;

    padding:
        .7rem
        .9rem;

    border:
        1px solid
        var(--line-strong);

    border-radius:
        var(--radius-s);

    background:
        var(--bg-raised);

    transition:
        border-color .18s var(--ease),
        box-shadow .18s var(--ease);
}

.search-field:focus-within {
    border-color:
        var(--teal);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--teal) 14%,
            transparent
        );
}

.search-field svg {
    flex: none;

    width: 17px;
    height: 17px;

    color: var(--muted);
}

.search-field input {
    width: 100%;
    min-width: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: var(--ink);

    font-family: var(--font-body);
    font-size: .92rem;
}

.search-field input::placeholder {
    color: var(--muted);
}

#hubFilters {
    display: flex;
    align-items: center;

    gap: .45rem;

    flex-wrap: wrap;
}

.filter-chip {
    padding:
        .6rem
        .9rem;

    border:
        1px solid
        var(--line-strong);

    border-radius: 999px;

    background:
        var(--bg-raised);

    color:
        var(--ink-soft);

    font-size: .78rem;

    cursor: pointer;

    transition:
        background .18s var(--ease),
        color .18s var(--ease),
        border-color .18s var(--ease);
}

.filter-chip:hover {
    border-color: var(--teal);
    color: var(--ink);
}

.filter-chip[aria-pressed="true"] {
    border-color: var(--navy);

    background: var(--navy);
    color: #fff;
}

.hub-results-meta {
    min-height: 1.3rem;

    margin-bottom: 1rem;

    color: var(--muted);

    font-family: var(--font-mono);
    font-size: .65rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.hub-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 1.2rem;
}

.article-card {
    display: flex;

    min-width: 0;

    flex-direction: column;

    gap: .8rem;

    padding: 1.4rem;

    border:
        1px solid
        var(--line);

    border-radius:
        var(--radius-m);

    background:
        var(--bg-raised);

    transition:
        border-color .2s var(--ease),
        box-shadow .2s var(--ease),
        transform .2s var(--ease);
}

.article-card:hover {
    border-color:
        var(--line-strong);

    box-shadow:
        var(--shadow-1);

    transform:
        translateY(-2px);
}

.article-meta {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: .8rem;

    color: var(--muted);

    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.article-meta span:first-child {
    color: var(--teal-ink);
}

.article-card h3 {
    font-size: 1.02rem;
    line-height: 1.35;
}

.article-card p {
    flex: 1;

    color: var(--ink-soft);

    font-size: .87rem;
    line-height: 1.6;
}

.article-foot {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 1rem;

    padding-top: .8rem;

    border-top:
        1px solid
        var(--line);

    color: var(--muted);

    font-size: .75rem;
}

.article-read {
    flex: none;

    border: 0;

    background: transparent;

    color: var(--blue);

    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 600;

    cursor: pointer;
}

[data-theme="dark"]
.article-read {
    color: var(--teal);
}

.article-read:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hub-empty {
    display: none;

    padding: 3rem 1rem;

    color: var(--muted);

    text-align: center;
}

.hub-empty.show {
    display: block;
}

.hub-empty svg {
    width: 34px;
    height: 34px;

    margin:
        0
        auto
        1rem;

    opacity: .5;
}


/* ==========================================================================
   RESOURCES
   ========================================================================== */

.resource-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 1rem;
}

.resource-card {
    display: flex;
    flex-direction: column;

    gap: .9rem;

    padding: 1.3rem;

    border:
        1px solid
        var(--line);

    border-radius:
        var(--radius-m);

    background:
        var(--bg-raised);

    color: inherit;

    text-decoration: none;

    transition:
        border-color .2s var(--ease),
        transform .2s var(--ease),
        box-shadow .2s var(--ease);
}

.resource-card:hover {
    border-color: var(--teal);

    box-shadow:
        var(--shadow-1);

    transform:
        translateY(-2px);
}

.resource-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.resource-icon {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 8px;

    background: var(--blue-soft);
    color: var(--blue);
}

[data-theme="dark"]
.resource-icon {
    color: var(--teal);
}

.resource-icon svg {
    width: 18px;
    height: 18px;
}

.resource-ext {
    width: 15px;
    height: 15px;

    color: var(--muted);
}

.resource-cat {
    color: var(--teal-ink);

    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.resource-card h4 {
    margin-top: .3rem;

    font-size: .95rem;
}

.resource-card p {
    color: var(--ink-soft);
    font-size: .82rem;
}

.resource-leaving {
    color: var(--muted);
    font-size: .7rem;
}


/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 1.1rem;
}

.contact-card {
    display: flex;
    flex-direction: column;

    gap: .9rem;

    padding: 1.4rem;

    border:
        1px solid
        var(--line);

    border-radius:
        var(--radius-m);

    background:
        var(--bg-raised);
}

.contact-card .k {
    color: var(--muted);

    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.contact-card .v {
    font-family:
        var(--font-display);

    font-size: 1.05rem;
}

.contact-card a.v {
    color: var(--blue);
    text-decoration: none;
}

[data-theme="dark"]
.contact-card a.v {
    color: var(--teal);
}

.contact-card a.v:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-note {
    margin-top: 2rem;
}


/* ==========================================================================
   BULLETIN
   ========================================================================== */

.bulletin {
    background:
        linear-gradient(
            135deg,
            var(--navy),
            var(--navy-2)
        );

    color: #fff;
}

.bulletin-row {
    display: flex;
    align-items: center;

    gap: 1.6rem;

    min-height: 5.5rem;

    flex-wrap: wrap;
}

.bulletin-label {
    flex: none;

    color:
        rgba(
            255,
            255,
            255,
            .5
        );

    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.bulletin-stage {
    position: relative;

    flex: 1 1 340px;

    min-width: 0;
    min-height: 2.4rem;

    overflow: hidden;
}

.bulletin-item {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;

    gap: .8rem;

    opacity: 0;

    transform:
        translateY(
            6px
        );

    transition:
        opacity .35s var(--ease),
        transform .35s var(--ease);
}

.bulletin-item.active {
    opacity: 1;
    transform: none;
}

.bulletin-status {
    flex: none;

    padding:
        .2rem
        .55rem;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .25
        );

    border-radius: 999px;

    color:
        rgba(
            255,
            255,
            255,
            .75
        );

    font-family: var(--font-mono);
    font-size: .63rem;
}

.bulletin-item a {
    overflow: hidden;

    color: #fff;

    font-size: .88rem;
    font-weight: 500;

    text-decoration: none;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulletin-item a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bulletin-item time {
    flex: none;

    color:
        rgba(
            255,
            255,
            255,
            .45
        );

    font-family: var(--font-mono);
    font-size: .72rem;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

footer {
    border-top:
        1px solid
        var(--line);

    background:
        var(--bg-sunken);
}

.footer-grid {
    display: grid;

    grid-template-columns:
        1.4fr
        1fr
        1fr
        1fr;

    gap: 2.5rem;

    padding-block:
        clamp(
            3rem,
            6vw,
            4.5rem
        )
        2rem;
}

.footer-brand .brand-name {
    color: var(--ink);
}

.footer-brand p {
    max-width: 32ch;

    margin-top: .9rem;

    color: var(--ink-soft);
    font-size: .9rem;
}

.footer-col h5 {
    margin-bottom: 1rem;

    color: var(--muted);

    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.footer-col ul {
    display: flex;
    flex-direction: column;

    gap: .65rem;
}

.footer-col a {
    color: var(--ink-soft);

    font-size: .9rem;
    text-decoration: none;
}

.footer-col a:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.disclaimer {
    padding-block: 1.6rem;

    border-top:
        1px solid
        var(--line);

    color: var(--muted);

    font-size: .78rem;
    line-height: 1.6;
}

.disclaimer strong {
    color: var(--ink-soft);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 1rem;

    padding-block: 1.3rem;

    border-top:
        1px solid
        var(--line);

    color: var(--muted);

    font-size: .78rem;
}

.legal {
    display: flex;
    gap: 1.3rem;
}

.legal-link {
    color: var(--muted);

    text-decoration: none;

    cursor: pointer;
}

.legal-link:hover {
    color: var(--ink);
}


/* ==========================================================================
   GENERAL MODAL SYSTEM
   ========================================================================== */

.modal-backdrop {
    position: fixed;
    inset: 0;

    z-index: 800;

    background:
        rgba(
            6,
            10,
            16,
            .55
        );

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    opacity: 0;
    pointer-events: none;

    transition:
        opacity .25s var(--ease);
}

.modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.modal {
    position: fixed;

    left: 50%;
    top: 50%;

    z-index: 801;

    width:
        min(
            560px,
            92vw
        );

    max-height: 88vh;

    overflow: auto;

    padding:
        clamp(
            1.5rem,
            4vw,
            2.2rem
        );

    border:
        1px solid
        var(--line);

    border-radius:
        var(--radius-l);

    background:
        var(--bg-raised);

    box-shadow:
        var(--shadow-3);

    transform:
        translate(
            -50%,
            -46%
        )
        scale(.98);

    opacity: 0;
    pointer-events: none;

    transition:
        transform .25s var(--ease),
        opacity .25s var(--ease);
}

.modal.open {
    opacity: 1;
    pointer-events: auto;

    transform:
        translate(
            -50%,
            -50%
        )
        scale(1);
}

.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 1rem;

    margin-bottom: 1.4rem;
}

.modal-kicker,
.legal-modal-kicker {
    display: block;

    margin-bottom: .35rem;

    color: var(--teal-ink);

    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.modal-head h3 {
    font-size: 1.3rem;
}

.modal-head p {
    margin-top: .3rem;

    color: var(--ink-soft);

    font-size: .88rem;
}

.modal-close {
    display: grid;
    place-items: center;

    flex: none;

    width: 36px;
    height: 36px;

    border:
        1px solid
        var(--line-strong);

    border-radius: 50%;

    background: transparent;

    color: var(--muted);

    cursor: pointer;
}

.modal-close:hover {
    border-color: var(--teal);
    color: var(--ink);
}

.modal-close svg {
    width: 16px;
    height: 16px;
}


/* ==========================================================================
   LEGAL MODALS
   ========================================================================== */

.legal-modal {
    width:
        min(
            680px,
            92vw
        );

    max-height: 88vh;

    padding: 0;

    overflow-y: auto;
}

.modal-container {
    padding:
        clamp(
            1.4rem,
            4vw,
            2.2rem
        );
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 1.2rem;

    padding-bottom: 1.1rem;

    border-bottom:
        1px solid
        var(--line);
}

.modal-header h2 {
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.2;
}

.modal-body {
    padding-top: 1.2rem;
}

.modal-body p {
    margin-bottom: 1rem;

    color: var(--ink-soft);

    font-size: .9rem;
    line-height: 1.75;
}

.modal-body p:last-child {
    margin-bottom: 0;
}

.modal-overlay {
    display: none;
}


/* ==========================================================================
   CONSULTANCY FORM
   ========================================================================== */

.form-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 1rem;
}

.field {
    display: flex;
    flex-direction: column;

    gap: .4rem;

    margin-bottom: 1rem;
}

.field.full {
    grid-column: 1 / -1;
}

.field label {
    font-size: .8rem;
    font-weight: 600;
}

.field input,
.field select,
.field textarea {
    width: 100%;

    border:
        1px solid
        var(--line-strong);

    border-radius:
        var(--radius-s);

    padding:
        .7rem
        .8rem;

    background:
        var(--bg);

    color:
        var(--ink);

    font:
        inherit;

    font-size: .92rem;

    outline: none;

    transition:
        border-color .18s var(--ease),
        box-shadow .18s var(--ease);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--teal);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--teal) 12%,
            transparent
        );
}

.field textarea {
    min-height: 110px;
    resize: vertical;
}

.form-note {
    display: flex;

    gap: .6rem;

    margin-bottom: 1.2rem;
    padding: .8rem;

    border-radius:
        var(--radius-s);

    background:
        var(--bg-sunken);

    color:
        var(--muted);

    font-size: .8rem;
}

.form-note svg {
    flex: none;

    width: 16px;
    height: 16px;

    margin-top: .1rem;
}

.form-submit {
    width: 100%;
}

.form-disclaimer {
    margin-top: .9rem;

    color: var(--muted);

    font-size: .76rem;

    text-align: center;
}

.form-success {
    display: none;

    padding: 2rem 0;

    text-align: center;
}

.form-success.show {
    display: block;
}

.form-success svg {
    width: 42px;
    height: 42px;

    margin: 0 auto 1rem;

    color: var(--teal);
}

.form-success h3 {
    margin-bottom: .5rem;
}

.form-success p {
    color: var(--ink-soft);
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: .001ms !important;

        scroll-behavior: auto !important;
    }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {

    .nav-links {
        gap: 1.2rem;
    }

    .expertise-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .resource-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .hub-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .footer-grid {
        grid-template-columns:
            1.2fr
            1fr
            1fr;
    }

    .footer-grid
    .footer-col:last-child {
        grid-column:
            1 / -1;
    }
}


@media (max-width: 900px) {

    .nav-links {
        display: none;
    }

    .nav-consultancy {
        display: none;
    }

    .nav-toggle {
        display: grid;
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-content {
        max-width: 760px;
    }

    .window-card {
        order: -1;

        max-width: 560px;

        justify-self: center;
    }

    .profile-grid {
        grid-template-columns: 1fr;
    }

    .consult-layout {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 700px) {

    .section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .section-head .lead {
        max-width: 100%;
    }

    .ticker-wrap {
        grid-template-columns:
            minmax(0, 1fr)
            auto;
    }

    .ticker-label {
        display: none;
    }

    .ticker-item a {
        font-size: .82rem;
    }

    .expertise-grid,
    .hub-grid {
        grid-template-columns: 1fr;
    }

    .resource-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .field.full {
        grid-column: auto;
    }

    .footer-grid {
        grid-template-columns:
            1fr
            1fr;
    }

    .footer-grid
    .footer-col:last-child {
        grid-column:
            1 / -1;
    }

    .bulletin-row {
        align-items: flex-start;
        flex-direction: column;

        padding-block: 1.5rem;
    }

    .bulletin-stage {
        width: 100%;
        flex-basis: auto;
    }

    .article-foot {
        align-items: flex-start;
        flex-direction: column;
    }
}


@media (max-width: 520px) {

    .hero {
        padding-top: 3rem;
    }

    .hero h1 {
        font-size:
            clamp(
                2.5rem,
                12vw,
                3.5rem
            );
    }

    .hero-meta {
        flex-direction: column;
        gap: .9rem;
    }

    .window-card {
        padding: 1rem;
    }

    .window-row {
        grid-template-columns:
            4rem
            3rem
            minmax(0, 1fr);
    }

    .window-caption {
        font-size: .74rem;
    }

    .resource-grid,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid
    .footer-col:last-child {
        grid-column: auto;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .legal {
        gap: 1rem;
    }

    .consult-panel,
    .legal-modal {
        border-radius:
            var(--radius-m);
    }

    .modal {
        width: 94vw;
        max-height: 90vh;
    }

    .modal-header,
    .modal-head {
        gap: .75rem;
    }
}