/* davvvNET v2 — styles extracted from production index.html */

/* davvv.net - soft slate (white brand pill sits naturally) */

:root {
    /* Lifted charcoal — still dark, not pure black */
    --bg: #1c2130;
    --bg-elevated: #262c3d;
    --bg-panel: #2a3144;
    --surface-light: #f4f6fa;
    --surface-light-soft: #e8ecf4;
    --text: #eef1f7;
    --text-muted: #9aa3b8;
    --text-faint: #7e879c;
    --accent: #6b95f0;
    --accent-soft: rgba(107, 149, 240, 0.12);
    --border: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.16);
    --glow-blue: rgba(100, 140, 230, 0.18);
    --glow-violet: rgba(150, 100, 210, 0.12);
    --glow-warm: rgba(255, 255, 255, 0.04);
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --max: 920px;
    --radius: 12px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.18);
}

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

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden; /* 100vw full-bleed sticky header must not force a horizontal bar */
    /* Sticky nav height — kept in sync by script so in-page jumps clear the bar */
    scroll-padding-top: var(--sticky-offset, 12.5rem);
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
 * Atmospheric paint — shared by fixed .page-bg and the sticky header window
 * so the clip strip is pixel-identical (no background-attachment: fixed).
 */
.page-bg,
.site-header-atmosphere-fill {
    background:
        radial-gradient(ellipse 90% 55% at 40% -5%, var(--glow-blue), transparent 58%),
        radial-gradient(ellipse 55% 45% at 100% 25%, var(--glow-violet), transparent 52%),
        radial-gradient(ellipse 45% 40% at 0% 75%, rgba(70, 100, 180, 0.12), transparent 50%),
        radial-gradient(ellipse 70% 50% at 50% 100%, var(--glow-warm), transparent 55%),
        linear-gradient(180deg, #222836 0%, var(--bg) 28%, #181d2a 100%);
}

.page-bg::before,
.site-header-atmosphere-fill::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 10%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black 10%, transparent 75%);
    opacity: 0.55;
}

.page-bg::after,
.site-header-atmosphere-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.028;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 180px 180px;
}

.page-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* Layout shell — centered column */
.shell {
    width: min(100% - 2.5rem, var(--max));
    margin: 0 auto;
    padding: 2.25rem 0 2.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* multipage: tighter under sticky header */
    min-height: 100vh;
    text-align: left;
}

/*
 * Sticky white nav (all viewports) with normal document scroll.
 * Atmosphere is NOT painted with background-attachment: fixed (iOS ignores that
 * on sticky boxes → solid band). Instead a full-viewport clone of .page-bg is
 * clipped to the header and shifted so it stays locked to the viewport — same
 * continuous glows as the page, on every browser.
 */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    text-align: left;
    /* Break out of .shell to full viewport width for the clip strip */
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
    /* Align pill with shell column; +6px bottom buffer so content/titles
       clip slightly before the pill edge (not flush against it) */
    padding: 0.35rem calc(50vw - 50%) calc(0.25rem + 6px);
    background: transparent;
}

/* Clip window: only the header box shows the atmosphere fill */
.site-header-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/*
 * Full-viewport atmosphere (same paint as .page-bg). top shifts with
 * --header-viewport-top so fill origin stays at viewport (0,0) while the
 * sticky header moves or sticks.
 */
.site-header-atmosphere-fill {
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--viewport-height, 100vh);
    top: calc(-1 * var(--header-viewport-top, 0px));
    pointer-events: none;
}

.site-header .brand-pill {
    position: relative;
    z-index: 1;
    width: 100%;
    background: #ffffff;
    background-image: linear-gradient(180deg, #ffffff 0%, var(--surface-light) 100%);
}

/* Desktop: slightly roomier strip under the pill */
@media (min-width: 900px) {
    .site-header {
        padding: 0.4rem calc(50vw - 50%) calc(0.3rem + 6px);
    }
}

/* Brand pill — logo + CTAs on top, in-page nav underneath */
.brand-pill {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    /* Tight: logo PNG already has transparent padding */
    padding: 0.35rem 0.95rem 0.35rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--surface-light) 100%);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 10px 32px rgba(0, 0, 0, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    /* Host for optional right-side brand glow (::after) */
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/*
 * EXPERIMENTAL — soft right-side color wash on the white nav pill.
 * Balances the logo’s magenta→blue gradient (left) with a whisper of blue/violet
 * (and a trace of logo magenta) fading in from the far right only.
 *
 * REVERT: delete this entire comment + .brand-pill::after + .brand-pill > * rules
 * below, and remove position/overflow/isolation from .brand-pill above if unused.
 */
.brand-pill::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    /*
     * ~Right half of the pill (starts ~mid, past About).
     * Intensity tuned so the wash is clearly visible on white without a hot
     * far-right blob. Support/Login use solid white chips above this layer.
     */
    background:
        /* Main blue/violet pool — anchor mid-right so energy spans ~half */
        radial-gradient(
            ellipse 120% 140% at 72% 50%,
            rgba(95, 140, 235, 0.2) 0%,
            rgba(115, 110, 205, 0.12) 34%,
            rgba(107, 149, 240, 0.055) 58%,
            transparent 78%
        ),
        /* Logo magenta whisper — upper mid-right */
        radial-gradient(
            ellipse 75% 105% at 80% 14%,
            rgba(200, 70, 165, 0.1) 0%,
            rgba(180, 90, 170, 0.045) 42%,
            transparent 66%
        ),
        /* Horizontal scaffold: clean left → visible mid → soft (not hot) edge */
        linear-gradient(
            90deg,
            transparent 0%,
            transparent 40%,
            rgba(107, 149, 240, 0.045) 50%,
            rgba(100, 140, 220, 0.1) 72%,
            rgba(95, 135, 215, 0.12) 100%
        );
}

.brand-pill > * {
    position: relative;
    z-index: 1;
}

/* Support / Login stay above the wash; frosted, not solid white chips */
.page-nav-actions {
    position: relative;
    z-index: 2;
}

.brand-pill .page-nav-icon {
    /* Soft frost over the gradient — quieter than opaque white tiles */
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(15, 23, 42, 0.09);
    box-shadow: none;
}

.brand-pill .page-nav-icon:hover {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(15, 23, 42, 0.14);
    color: #111827;
}

.brand-pill .page-nav-icon.page-nav-portal {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(15, 23, 42, 0.09);
}

.brand-pill .page-nav-icon.page-nav-portal:hover {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(15, 23, 42, 0.14);
}

.brand-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1.25rem;
    width: 100%;
}

/* Wraps logo + mobile utility icons; desktop flattens so brand sits with CTAs */
.brand-logo-row {
    display: contents;
}

.brand {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    flex-shrink: 0;
    border-radius: 6px;
    transition: opacity 0.25s var(--ease);
    /* Crop built-in transparent padding on the logo PNG */
    margin: -0.35rem 0 -0.4rem -0.2rem;
}

.brand:hover {
    opacity: 0.92;
}

.brand:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.brand img {
    display: block;
    width: min(288px, 50vw);
    max-width: 100%;
    height: auto;
    background: transparent;
}

/* Header CTAs — matched pair on white paper (solid + outline, equal weight) */
.brand-actions {
    margin: 0 0 0 auto;
    padding: 0 0 0 0.9rem;
    border-left: 1px solid rgba(15, 23, 42, 0.08);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.brand-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 1.95rem;
    padding: 0.38rem 0.8rem;
    border-radius: 7px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color 0.15s var(--ease),
        background 0.15s var(--ease),
        border-color 0.15s var(--ease),
        box-shadow 0.15s var(--ease);
}

.brand-cta-primary {
    color: #f8fafc;
    background: #1c2130;
    border-color: #1c2130;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.brand-cta-primary:hover {
    color: #fff;
    background: #2a3144;
    border-color: #2a3144;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14);
}

.brand-cta-primary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.brand-cta-secondary {
    color: #2a3344;
    background: #fff;
    border-color: rgba(15, 23, 42, 0.14);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.brand-cta-secondary:hover {
    color: #111827;
    background: #f8fafc;
    border-color: rgba(15, 23, 42, 0.22);
}

.brand-cta-secondary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Tall phone only: Support + Login icons beside logo (see max-width 639 below). */
.brand-mobile-portal {
    display: none;
}

/* In-page nav — lives inside the white brand pill */
.page-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 0.35rem;
    margin: 0.28rem 0 0;
    padding: 0.28rem 0 0;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    width: 100%;
}

.page-nav-main,
.page-nav-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
}

.page-nav-main {
    justify-content: center;
}

/*
 * Section links — compact rectangles (enterprise), not bubble pills.
 * Soft 6px radius: cleaner than chips, softer than hard squares.
 */
.page-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.22rem 0.5rem;
    font-size: 0.74rem;
    font-weight: 550;
    font-family: inherit;
    letter-spacing: -0.012em;
    color: #4b5568;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    transition:
        color 0.15s var(--ease),
        border-color 0.15s var(--ease),
        background 0.15s var(--ease);
}

.page-nav-link:hover {
    color: #111827;
    border-color: rgba(15, 23, 42, 0.1);
    background: rgba(15, 23, 42, 0.05);
}

/* Active section — same chip as mobile tap/hover, persistent on desktop too */
.page-nav-link[aria-current="true"],
.page-nav-link[aria-current="page"] {
    color: #111827;
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(15, 23, 42, 0.08);
    font-weight: 600;
}

.page-nav-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Home in section nav on all breakpoints (logo still scrolls to #top) */
.page-nav-home {
    display: inline-flex;
}

/* Hidden by default; shown from 640px up (wide phone / tablet / desktop) */
.page-nav-actions {
    display: none;
}

.page-nav-desktop {
    display: inline-flex;
}

/*
 * Icon utilities (Support / Login) — match text-link row height & weight.
 * Was 1.7rem chips + solid white (taller/heavier than .page-nav-link).
 */
.page-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* ~line-box of 0.74rem text + 0.22rem pad — not a tall tile */
    width: 1.38rem;
    height: 1.38rem;
    padding: 0;
    border-radius: 5px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: transparent;
    color: #5a6374;
    text-decoration: none;
    transition:
        color 0.15s var(--ease),
        border-color 0.15s var(--ease),
        background 0.15s var(--ease);
}

.page-nav-icon svg {
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    flex-shrink: 0;
    /* Full opacity so stroke weight matches bold “?” */
    opacity: 1;
}

/* Support: bold “?” — clearer than a stroke help-circle at 1.38rem */
.page-nav-icon-glyph {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    font-family: inherit;
    /* Optical vertical center in the chip */
    transform: translateY(0.03em);
}

.page-nav-icon:hover {
    color: #111827;
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(15, 23, 42, 0.05);
}

.page-nav-icon:hover svg {
    opacity: 1;
}

.page-nav-icon:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.page-nav-icon.page-nav-portal {
    border-color: rgba(15, 23, 42, 0.08);
    background: transparent;
}

.page-nav-icon.page-nav-portal:hover {
    border-color: rgba(15, 23, 42, 0.12);
    background: rgba(15, 23, 42, 0.05);
}

/*
 * Wide phone / small tablet (and desktop): section links left, utility icons right.
 * Must come AFTER base .page-nav-actions { display: none } so it wins the cascade.
 */
@media (min-width: 640px) {
    .brand-logo-row {
        display: contents;
    }

    .page-nav {
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem 0.75rem;
    }

    .page-nav-main {
        justify-content: flex-start;
        flex: 1 1 auto;
        min-width: 0;
    }

    .page-nav-actions {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex: 0 0 auto;
        margin-left: auto;
        padding-left: 0.45rem;
        border-left: 1px solid rgba(15, 23, 42, 0.08);
        gap: 0.2rem;
    }
}

@media (min-width: 900px) {
    .page-nav {
        gap: 0.5rem 0.85rem;
    }

    .page-nav-main {
        gap: 0.1rem;
    }
}

@media (max-width: 639px) {
    .shell {
        width: min(100% - 2rem, var(--max));
        margin-left: auto;
        margin-right: auto;
    }

    .brand-pill {
        padding: 0.45rem 0.7rem 0.4rem;
    }

    /*
     * Tall phone stack (tight, balanced):
     *  1) Logo + Support/Login icons
     *  2) Demo | Meeting (side-by-side)
     *  3) Get started · Services · Work · About
     */
    .brand-top {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
    }

    .brand-logo-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.65rem;
        width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }

    .brand-mobile-portal {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.3rem;
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
    }

    /* Slightly larger than desktop for touch; still not chunky tiles */
    .brand-mobile-portal .page-nav-icon {
        width: 1.55rem;
        height: 1.55rem;
    }

    .brand-mobile-portal .page-nav-icon svg {
        width: 0.88rem;
        height: 0.88rem;
    }

    .brand {
        width: auto;
        max-width: calc(100% - 4.5rem);
        justify-content: flex-start;
        margin: -0.15rem 0 -0.15rem -0.1rem;
    }

    .brand img {
        width: min(220px, 58vw);
        margin: 0;
    }

    .brand-actions {
        width: 100%;
        margin: 0;
        padding: 0.45rem 0 0;
        border-left: none;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
        flex-direction: row;
        align-items: stretch;
        gap: 0.35rem;
    }

    .brand-cta {
        flex: 1 1 0;
        width: auto;
        min-height: 1.7rem;
        padding: 0.28rem 0.45rem;
        font-size: 0.7rem;
        border-radius: 6px;
        box-sizing: border-box;
        justify-content: center;
    }

    .page-nav {
        margin-top: 0.3rem;
        padding-top: 0.3rem;
        justify-content: center;
        gap: 0.2rem;
    }

    .page-nav-link {
        font-size: 0.7rem;
        padding: 0.22rem 0.45rem;
    }
}

/* Stack sections with clear chapter rhythm */
main {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

@media (min-width: 640px) {
    main {
        gap: 2.15rem;
    }
}

/*
 * In-page anchors clear the sticky header via html scroll-padding-top
 * (--sticky-offset, measured live). Keep element scroll-margin at 0 so
 * padding + margin never double up on some browsers.
 */
#services,
#work,
#about,
#data-analytics,
#integrations,
#getstarted,
#contact {
    scroll-margin-top: 0;
}

/* Intro */
.intro {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.eyebrow {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

.intro h1 {
    margin: 0;
    font-size: clamp(1.65rem, 4.2vw, 2.15rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--text);
}

.lede {
    margin: 0.15rem 0 0;
    max-width: 38em;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--text-muted);
}

/* Hero CTAs */
.intro-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.75rem;
    margin-top: 0.35rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.65rem 1.15rem;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-decoration: none;
    border-radius: 9px;
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        background 0.2s var(--ease),
        border-color 0.2s var(--ease),
        color 0.2s var(--ease),
        box-shadow 0.2s var(--ease),
        transform 0.2s var(--ease);
}

.btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.btn-primary {
    color: #2c3344;
    border-color: rgba(255, 255, 255, 0.65);
    background: linear-gradient(180deg, #ffffff 0%, var(--surface-light) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 4px 14px rgba(0, 0, 0, 0.16);
}

.btn-primary:hover {
    background: linear-gradient(180deg, #ffffff 0%, #eef2f8 100%);
    border-color: #fff;
    color: #1a2030;
    box-shadow:
        0 1px 0 #fff inset,
        0 6px 18px rgba(0, 0, 0, 0.2);
}

.btn-ghost {
    color: var(--text);
    border-color: var(--border-strong);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.btn-ghost:hover {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
}

.btn-accent {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.2);
    background: linear-gradient(180deg, rgba(62, 72, 98, 0.98) 0%, rgba(40, 47, 64, 0.99) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.1) inset,
        0 0 0 1px rgba(107, 149, 240, 0.12),
        0 4px 16px rgba(0, 0, 0, 0.28);
}

.btn-accent:hover {
    color: #fff;
    border-color: rgba(160, 185, 235, 0.4);
    background: linear-gradient(180deg, rgba(72, 84, 112, 1) 0%, rgba(48, 56, 78, 1) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 0 0 1px rgba(107, 149, 240, 0.2),
        0 6px 20px rgba(0, 0, 0, 0.34);
}

.btn-block {
    width: 100%;
}

.btn[disabled],
.btn.is-loading {
    opacity: 0.72;
    cursor: wait;
    pointer-events: none;
}

/* Intro proof chips */
.intro-proof {
    list-style: none;
    margin: 0.15rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.55rem;
}

.intro-proof li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
}

.intro-proof li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.8;
    flex-shrink: 0;
}

/* Soft chapter break before catalog content */
.chapter {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

/*
 * Multi-page: first block under sticky header (no chapter top pad/border).
 */
main > .chapter:first-child,
main > section:first-child.chapter {
    padding-top: 0;
    border-top: none;
}

.chapter-lede {
    margin: 0;
    max-width: 40em;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-muted);
}

/* Services */
.services {
    /* gap/padding come from .chapter when combined */
}

.section-label {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.section-label .rule {
    display: block;
    width: 1.5rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
}

.section-label h2 {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Stacked CTA: lead → helper → button (button sits under the reply line) */
.services-inquiry {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0.1rem 0 0.5rem;
    padding: 0.15rem 0 1rem;
    border: none;
    border-bottom: 1px solid var(--border);
    background: none;
    box-shadow: none;
}

.services-inquiry-lead {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--text);
}

.services-inquiry-text {
    margin: 0;
    max-width: 32em;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-faint);
}

.services-inquiry .btn {
    margin-top: 0.35rem;
    flex: 0 0 auto;
    min-height: 2.55rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

/* Title above pillar cards — same type as .feature-title higher on the page */
.services-offerings-title {
    margin: 0.15rem 0 0;
}

.service-group-label {
    margin: 0.35rem 0 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.service-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.75rem;
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.service-list--pillars {
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 820px) {
    .service-list--pillars {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.85rem;
        align-items: stretch;
    }
}

.service-list--pillars > li,
.service-list--emergency > li {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    padding: 1.15rem 1.2rem;
    border: 1px solid rgba(107, 149, 240, 0.28);
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse 120% 90% at 0% 0%, rgba(107, 149, 240, 0.12), transparent 55%),
        linear-gradient(180deg, rgba(52, 62, 88, 0.72) 0%, rgba(38, 44, 61, 0.88) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        var(--shadow-soft),
        0 0 0 1px rgba(107, 149, 240, 0.05),
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
    transition:
        background 0.2s var(--ease),
        border-color 0.2s var(--ease),
        box-shadow 0.2s var(--ease);
}

.service-list--pillars > li:hover {
    border-color: rgba(107, 149, 240, 0.45);
    background:
        radial-gradient(ellipse 120% 90% at 0% 0%, rgba(107, 149, 240, 0.16), transparent 55%),
        linear-gradient(180deg, rgba(58, 70, 100, 0.8) 0%, rgba(42, 49, 68, 0.92) 100%);
}

/* Equal-height pillars: body grows, explore link sits on a shared baseline */
.service-list--pillars > li > p {
    flex: 1 1 auto;
}

.service-list--pillars .service-more {
    margin-top: auto;
    padding-top: 0.35rem;
}

.service-list--support {
    gap: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(44, 50, 68, 0.55) 0%, rgba(36, 42, 58, 0.72) 100%);
    box-shadow: var(--shadow-soft), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    overflow: hidden;
}

.service-list--support > li {
    display: grid;
    gap: 0.3rem;
    padding: 0.95rem 1.15rem;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: background 0.2s var(--ease);
}

.service-list--support > li:last-child {
    border-bottom: 0;
}

.service-list--support > li:hover {
    background: rgba(255, 255, 255, 0.035);
}

.service-list--emergency {
    margin-top: 0.15rem;
}

.service-list--emergency > .service-emergency {
    border-color: rgba(230, 140, 100, 0.38);
    background: linear-gradient(
        180deg,
        rgba(62, 48, 42, 0.55) 0%,
        rgba(42, 44, 58, 0.85) 48%,
        rgba(38, 44, 61, 0.9) 100%
    );
    box-shadow:
        var(--shadow-soft),
        0 0 0 1px rgba(230, 140, 100, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.service-list--emergency > .service-emergency:hover {
    border-color: rgba(240, 160, 110, 0.5);
}

.service-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.service-list h3 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
}

.service-list--pillars h3 {
    font-size: 0.98rem;
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.service-price {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--accent);
    white-space: nowrap;
}

.service-list p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.service-list--support p {
    font-size: 0.84rem;
    line-height: 1.5;
}

.service-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s var(--ease), gap 0.2s var(--ease);
}

.service-more:hover {
    color: #8eb4ff;
    gap: 0.5rem;
}

.service-more:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.service-emergency-points {
    margin: 0.35rem 0 0;
    padding: 0 0 0 1.15rem;
    display: grid;
    gap: 0.35rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.service-emergency-points li {
    display: list-item;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.service-emergency-points li:hover {
    background: none;
    border: 0;
}

.service-buy {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
}

.service-buy .btn {
    min-height: 2.75rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.service-buy-hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-faint);
}

.pricing-note {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--text-faint);
}

.pricing-note strong {
    color: var(--text-muted);
    font-weight: 600;
}

/* Work showcase — sample dashboards & deliverables */
.work {
    /* layout via .chapter */
}

.work-title {
    margin: 0;
    font-size: clamp(1.15rem, 2.8vw, 1.35rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--text);
}

/* Work category filters — keep the showcase scannable */
.work-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.15rem 0 0;
    padding: 0;
    list-style: none;
}

.work-filter {
    margin: 0;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    cursor: pointer;
    transition:
        background 0.18s var(--ease),
        border-color 0.18s var(--ease),
        color 0.18s var(--ease),
        box-shadow 0.18s var(--ease);
}

.work-filter:hover {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
}

.work-filter:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.work-filter[aria-pressed="true"] {
    color: var(--text);
    border-color: rgba(107, 149, 240, 0.55);
    background: linear-gradient(180deg, rgba(55, 70, 110, 0.55) 0%, rgba(42, 49, 68, 0.75) 100%);
    box-shadow: 0 0 0 1px rgba(107, 149, 240, 0.12);
}

.work-filter-count {
    display: inline-block;
    margin-left: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-faint);
    opacity: 0.9;
}

.work-filter[aria-pressed="true"] .work-filter-count {
    color: rgba(180, 200, 245, 0.9);
}

.work-grid {
    list-style: none;
    margin: 0.15rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.work-card[hidden] {
    display: none !important;
}

@media (min-width: 700px) {
    .work-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.1rem;
    }

    /* First card spans full width as a featured sample */
    .work-grid .work-card-featured {
        grid-column: 1 / -1;
    }
}

.work-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(48, 55, 74, 0.72) 0%, rgba(38, 44, 61, 0.78) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-soft), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
    overflow: hidden;
    transition:
        background 0.2s var(--ease),
        border-color 0.2s var(--ease),
        box-shadow 0.2s var(--ease);
}

.work-card:hover {
    background: linear-gradient(180deg, rgba(54, 62, 84, 0.82) 0%, rgba(42, 49, 68, 0.88) 100%);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.22),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.work-card-featured {
    border-color: rgba(107, 149, 240, 0.32);
    background: linear-gradient(180deg, rgba(55, 70, 110, 0.5) 0%, rgba(38, 44, 61, 0.85) 100%);
    box-shadow:
        var(--shadow-soft),
        0 0 0 1px rgba(107, 149, 240, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

.work-card-featured:hover {
    background: linear-gradient(180deg, rgba(60, 78, 120, 0.58) 0%, rgba(42, 49, 68, 0.9) 100%);
    border-color: rgba(107, 149, 240, 0.48);
}

/* Dual-image showcase (portal + report, etc.) */
.work-card-dual {
    grid-column: 1 / -1;
}

@media (min-width: 700px) {
    /* Dual cards stack images + body vertically (override featured side-by-side) */
    .work-card-dual.work-card-featured {
        display: flex;
        flex-direction: column;
    }

    .work-card-dual.work-card-featured .work-body {
        padding: 1.2rem 1.35rem 1.35rem;
    }
}

.work-media-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-bottom: 1px solid var(--border);
    background:
        linear-gradient(180deg, rgba(20, 24, 36, 0.95) 0%, rgba(16, 20, 30, 0.98) 100%);
}

@media (min-width: 700px) {
    .work-media-pair {
        grid-template-columns: 1fr 1fr;
    }

    .work-media-pair .work-media:first-child {
        border-right: 1px solid var(--border);
    }

    /* Three-shot showcase (e.g. EHR collector: config · extract · load) */
    .work-media-pair.work-media-triple {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .work-media-pair.work-media-triple .work-media:not(:last-child) {
        border-right: 1px solid var(--border);
    }
}

@media (min-width: 700px) and (max-width: 999px) {
    /* Stack third shot under pair on mid widths so crops stay readable */
    .work-media-pair.work-media-triple {
        grid-template-columns: 1fr 1fr;
    }

    .work-media-pair.work-media-triple .work-media:nth-child(3) {
        grid-column: 1 / -1;
        border-right: none;
        border-top: 1px solid var(--border);
    }

    .work-media-pair.work-media-hex {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .work-media-pair.work-media-hex .work-media:not(:nth-child(3n)) {
        border-right: 1px solid var(--border);
    }

    .work-media-pair.work-media-hex .work-media:nth-child(n + 4) {
        border-top: 1px solid var(--border);
    }
}

@media (min-width: 700px) and (max-width: 999px) {
    .work-media-pair.work-media-hex {
        grid-template-columns: 1fr 1fr;
    }

    .work-media-pair.work-media-hex .work-media:nth-child(n + 3) {
        border-top: 1px solid var(--border);
    }
}

.work-media-pair .work-media {
    border-bottom: none;
    background: transparent;
    /* Extra bottom air so captions aren't glued to screenshots */
    padding: 0.75rem 0.75rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.work-media-pair .work-media-btn {
    flex: 0 0 auto;
}

.work-media-caption {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.85rem 0.1rem 0.1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.3;
}

.work-media-caption::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--accent);
    opacity: 0.85;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Screenshot frame — full dashboard visible, no crop */
.work-media {
    display: block;
    position: relative;
    margin: 0;
    padding: 0.65rem 0.65rem 0.55rem;
    background:
        linear-gradient(180deg, rgba(20, 24, 36, 0.95) 0%, rgba(16, 20, 30, 0.98) 100%);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

.work-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    object-position: center center;
    /* Windows 11 window chrome radius (~8px), not softer macOS rounding */
    border-radius: 8px;
    background: #0e121c;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 8px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.work-card:hover .work-media img {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.09),
        0 12px 28px rgba(0, 0, 0, 0.4);
}

@media (min-width: 700px) {
    .work-card-featured {
        display: grid;
        grid-template-columns: 1.45fr 1fr;
        align-items: stretch;
    }

    .work-card-featured .work-media {
        border-bottom: none;
        border-right: 1px solid var(--border);
        display: flex;
        align-items: center;
        padding: 0.85rem;
        min-height: 100%;
    }

    .work-card-featured .work-media img {
        /* Keep native 16:10 — never force a wider crop */
        aspect-ratio: 16 / 10;
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
    }

    .work-card-featured .work-body {
        justify-content: center;
        padding: 1.35rem 1.4rem 1.4rem;
    }
}

.work-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.1rem 1.2rem 1.2rem;
}

.work-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.work-tags li {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
}

.work-card h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text);
}

.work-card p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-muted);
}

/* Live Power BI Service demos (public view links) */
.work-actions {
    margin: 0.35rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Button-style CTA — kill iOS Safari default blue link/visited colors */
.work-pbi-link,
.work-pbi-link:link,
.work-pbi-link:visited,
.work-pbi-link:hover,
.work-pbi-link:active,
.work-pbi-link:focus {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.48rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: #f0f4fc;
    -webkit-text-fill-color: #f0f4fc; /* iOS Safari otherwise paints system blue */
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: 8px;
    border: 1px solid rgba(160, 185, 235, 0.55);
    background: linear-gradient(180deg, rgba(72, 84, 112, 0.98) 0%, rgba(42, 50, 68, 0.99) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 0 0 1px rgba(107, 149, 240, 0.15),
        0 3px 12px rgba(0, 0, 0, 0.25);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, color 0.15s ease;
}

.work-pbi-link:hover,
.work-pbi-link:active {
    color: #ffffff;
    -webkit-text-fill-color: #ffffff;
    border-color: rgba(180, 200, 240, 0.7);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.16) inset,
        0 0 0 1px rgba(107, 149, 240, 0.25),
        0 6px 18px rgba(0, 0, 0, 0.3);
}

.work-pbi-link:focus-visible {
    outline: 2px solid rgba(160, 185, 235, 0.85);
    outline-offset: 2px;
}

.work-pbi-link-ext {
    font-size: 0.95em;
    opacity: 0.95;
    color: inherit;
    -webkit-text-fill-color: inherit;
}

/*
 * Phones: intentional text link (space), not the desktop pill button.
 * Override iOS system blue so it stays readable on dark work cards.
 */
@media (max-width: 640px) {
    .work-pbi-link,
    .work-pbi-link:link,
    .work-pbi-link:visited,
    .work-pbi-link:hover,
    .work-pbi-link:active,
    .work-pbi-link:focus {
        display: inline;
        gap: 0.2rem;
        padding: 0;
        font-size: 0.875rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        line-height: 1.45;
        color: #d4e0f8;
        -webkit-text-fill-color: #d4e0f8;
        text-decoration: underline;
        text-decoration-color: rgba(212, 224, 248, 0.55);
        text-underline-offset: 0.18em;
        border: none;
        border-radius: 0;
        background: none;
        box-shadow: none;
        -webkit-tap-highlight-color: rgba(212, 224, 248, 0.15);
    }

    .work-pbi-link:hover,
    .work-pbi-link:active {
        color: #ffffff;
        -webkit-text-fill-color: #ffffff;
        text-decoration-color: rgba(255, 255, 255, 0.75);
        border: none;
        background: none;
        box-shadow: none;
        transform: none;
    }

    .work-pbi-link-ext {
        opacity: 0.85;
    }
}


.work-note {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-faint);
}

.work-note .service-more {
    display: inline-flex;
    margin-left: 0.35rem;
    vertical-align: baseline;
}

/* Click-to-expand work samples */
.work-media-btn {
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    font: inherit;
    color: inherit;
    text-align: left;
    border-radius: 8px;
}

.work-media-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.work-media-btn .work-zoom-hint {
    position: absolute;
    right: 0.55rem;
    bottom: 0.55rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: rgba(238, 241, 247, 0.88);
    background: rgba(12, 16, 28, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
    opacity: 0.72;
    pointer-events: none;
    transition:
        opacity 0.2s var(--ease),
        color 0.2s var(--ease),
        background 0.2s var(--ease),
        border-color 0.2s var(--ease),
        transform 0.2s var(--ease);
}

.work-media-btn .work-zoom-hint svg {
    display: block;
    width: 0.95rem;
    height: 0.95rem;
}

.work-card:hover .work-zoom-hint,
.work-media-btn:focus-visible .work-zoom-hint {
    opacity: 1;
    color: #fff;
    background: rgba(18, 24, 40, 0.88);
    border-color: rgba(107, 149, 240, 0.45);
    transform: scale(1.06);
}

/* Lightbox modal — mobile: full usable area; desktop: near-viewport */
.work-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem;
    background: rgba(8, 11, 18, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.22s var(--ease),
        visibility 0.22s var(--ease);
}

.work-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.work-lightbox-dialog {
    position: relative;
    width: min(100%, 1120px);
    max-height: min(94vh, 900px);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.7rem 0.7rem 0.75rem;
    border-radius: 14px;
    border: 1px solid var(--border-strong);
    background: linear-gradient(180deg, rgba(42, 49, 68, 0.96) 0%, rgba(28, 33, 48, 0.98) 100%);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.45),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
    transform: translateY(10px) scale(0.98);
    transition: transform 0.22s var(--ease);
}

.work-lightbox.is-open .work-lightbox-dialog {
    transform: translateY(0) scale(1);
}

.work-lightbox-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0.15rem;
    flex-shrink: 0;
}

.work-lightbox-caption {
    margin: 0;
    min-width: 0;
}

.work-lightbox-caption strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text);
}

.work-lightbox-caption span {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.work-lightbox-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    transition:
        color 0.2s var(--ease),
        background 0.2s var(--ease),
        border-color 0.2s var(--ease);
}

.work-lightbox-close:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
}

.work-lightbox-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.work-lightbox-stage {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #0c101a;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: auto;
    padding: 0.4rem;
    gap: 0.35rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 140, 180, 0.55) rgba(12, 16, 26, 0.9);
}

.work-lightbox-arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: rgba(20, 24, 36, 0.9);
    color: var(--text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.work-lightbox-arrow:hover {
    background: rgba(60, 78, 120, 0.95);
    border-color: rgba(107, 149, 240, 0.5);
    color: #fff;
}

.work-lightbox-arrow:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.work-lightbox-arrow[hidden] {
    display: none !important;
}

.work-lightbox-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 1rem;
    padding: 0 0.15rem;
    flex-shrink: 0;
}

.work-lightbox-counter {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.work-lightbox-counter[hidden] {
    display: none !important;
}

.work-lightbox-stage::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.work-lightbox-stage::-webkit-scrollbar-track {
    background: rgba(8, 12, 20, 0.95);
    border-radius: 999px;
    margin: 4px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.work-lightbox-stage::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(130, 150, 195, 0.55) 0%, rgba(90, 110, 155, 0.65) 100%);
    border-radius: 999px;
    border: 2px solid rgba(12, 16, 26, 0.9);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}

.work-lightbox-stage::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(150, 170, 220, 0.7) 0%, rgba(107, 149, 240, 0.75) 100%);
}

.work-lightbox-stage::-webkit-scrollbar-thumb:active {
    background: rgba(107, 149, 240, 0.85);
}

.work-lightbox-stage::-webkit-scrollbar-corner {
    background: transparent;
}

.work-lightbox-stage img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    /*
     * Constrain to the stage (flex area), NOT the viewport.
     * Viewport-based max-height (78vh / 96vh - rem) can exceed the stage when the
     * caption is multi-line (e.g. Mining featured). Flex align-items:center then
     * clipped the top — Power BI title bar looked cut off. Short captions often fit.
     */
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.work-lightbox-hint {
    margin: 0;
    text-align: right;
    font-size: 0.72rem;
    color: var(--text-faint);
    flex-shrink: 0;
}

.work-lightbox-footer .work-lightbox-hint {
    margin-left: auto;
}

body.work-lightbox-open {
    overflow: hidden;
}

/* Desktop: use nearly the full viewport for dashboard detail */
@media (min-width: 900px) {
    .work-lightbox {
        padding: clamp(0.5rem, 1.2vh, 1rem) clamp(0.65rem, 1.5vw, 1.25rem);
    }

    .work-lightbox-dialog {
        width: min(96vw, 1760px);
        max-width: 96vw;
        max-height: 96vh;
        height: min(96vh, 1200px);
        gap: 0.5rem;
        padding: 0.75rem 0.85rem 0.65rem;
    }

    .work-lightbox-stage {
        flex: 1 1 auto;
        min-height: 0;
        padding: 0.35rem;
    }

    .work-lightbox-stage img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
    }
}

@media (min-width: 1500px) {
    .work-lightbox-dialog {
        width: min(97vw, 1920px);
        max-width: 97vw;
        height: min(96vh, 1400px);
    }

    .work-lightbox-stage img {
        max-height: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .work-lightbox,
    .work-lightbox-dialog,
    .work-media-btn .work-zoom-hint {
        transition: none;
    }

    .work-lightbox.is-open .work-lightbox-dialog {
        transform: none;
    }
}

/* Feature blocks - data analytics, integrations (SEO depth) */
.feature {
    /* layout via .chapter; tighten inner stack slightly */
    gap: 0.95rem;
}

.feature-title {
    margin: 0;
    font-size: clamp(1.15rem, 2.8vw, 1.35rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--text);
}

.feature-lede {
    margin: 0;
    max-width: 42em;
    font-size: 0.975rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.feature-lede strong {
    color: var(--text);
    font-weight: 600;
}

.feature-points {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.feature-points li {
    padding: 1rem 1.15rem;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(48, 55, 74, 0.65) 0%, rgba(38, 44, 61, 0.75) 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

@media (min-width: 700px) {
    .feature-points {
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
    }
}

.feature-points h4 {
    margin: 0 0 0.3rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.feature-points p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.feature-points strong {
    color: var(--text);
    font-weight: 600;
}

.feature-seo {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-faint);
}

/* Price line sits under related-topics blurb (not inline at the end) */
.feature-seo-price {
    margin: 0.55rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* About */
.about-prose {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    /* Full content width — align with founder card and multipage sections */
    max-width: none;
    width: 100%;
}

.about-prose p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.about-prose p strong {
    color: var(--text);
    font-weight: 600;
}

.about-founder {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    margin: 0.35rem 0 0;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(48, 55, 74, 0.65) 0%, rgba(38, 44, 61, 0.78) 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

.about-founder-photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    background: #2a3144;
}

.about-founder-copy {
    flex: 1;
    min-width: min(100%, 16rem);
}

.about-founder-copy h4 {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    color: var(--text);
}

.about-founder-copy .role {
    margin: 0 0 0.45rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.about-founder-copy .creds {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.about-founder-copy a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(107, 149, 240, 0.35);
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.about-founder-copy a:hover {
    color: #9bb8f5;
    border-bottom-color: rgba(155, 184, 245, 0.6);
}

.about-founder-copy a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Lead generation / engage */
.engage {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}

.engage-title {
    margin: 0;
    font-size: clamp(1.15rem, 2.8vw, 1.35rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--text);
}

.engage-lede {
    margin: 0;
    max-width: 42em;
    font-size: 0.975rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.lead-doors {
    display: grid;
    gap: 0.85rem;
    margin-top: 0.2rem;
}

@media (min-width: 640px) {
    .lead-doors {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}

.lead-door {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.2rem 1.25rem 1.25rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(48, 55, 74, 0.72) 0%, rgba(38, 44, 61, 0.78) 100%);
    box-shadow: var(--shadow-soft), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
    transition:
        border-color 0.2s var(--ease),
        background 0.2s var(--ease),
        box-shadow 0.2s var(--ease);
}

.lead-door:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: linear-gradient(180deg, rgba(52, 60, 80, 0.8) 0%, rgba(40, 47, 64, 0.85) 100%);
}

.lead-door-featured {
    border-color: rgba(107, 149, 240, 0.35);
    background: linear-gradient(180deg, rgba(55, 70, 110, 0.55) 0%, rgba(38, 44, 61, 0.85) 100%);
    box-shadow:
        var(--shadow-soft),
        0 0 0 1px rgba(107, 149, 240, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.lead-door-featured:hover {
    border-color: rgba(107, 149, 240, 0.5);
}

.lead-door-kicker {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

.lead-door h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
}

.lead-door > p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-muted);
    flex: 1;
}

.lead-door-points {
    list-style: none;
    margin: 0.15rem 0 0.35rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.lead-door-points li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.lead-door-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.75;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.lead-door .btn {
    margin-top: 0.25rem;
    align-self: flex-start;
}

.lead-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0.15rem 0 0;
    padding: 0;
    list-style: none;
}

.lead-trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-faint);
}

.lead-trust li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.7;
    flex-shrink: 0;
}

/* Inline engage hint (form lives in modal) */
.lead-modal-hint {
    margin: 0.85rem 0 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: center;
}

.lead-modal-hint a {
    color: var(--accent);
    text-decoration: none;
}

.lead-modal-hint a:hover {
    text-decoration: underline;
}

.lead-modal-hint-btn {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: inherit;
    color: var(--accent);
    cursor: pointer;
    text-decoration: none;
}

.lead-modal-hint-btn:hover {
    text-decoration: underline;
}

.lead-modal-hint-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Contact form modal */
.contact-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.22s var(--ease),
        visibility 0.22s var(--ease);
}

.contact-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.contact-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 11, 18, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.contact-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 640px);
    max-height: min(92vh, 820px);
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 1.15rem 1.2rem 1.25rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(48, 55, 74, 0.97) 0%, rgba(32, 38, 54, 0.99) 100%);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.5),
        0 1px 0 rgba(255, 255, 255, 0.06) inset;
    transform: translateY(10px) scale(0.98);
    transition: transform 0.22s var(--ease);
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 140, 180, 0.55) rgba(12, 16, 26, 0.9);
}

.contact-modal.is-open .contact-modal-dialog {
    transform: translateY(0) scale(1);
}

.contact-modal-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.contact-modal-head {
    margin-bottom: 0 !important;
    min-width: 0;
    flex: 1 1 auto;
}

.contact-modal-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0;
    padding: 0;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
    transition:
        color 0.2s var(--ease),
        background 0.2s var(--ease),
        border-color 0.2s var(--ease);
}

.contact-modal-close:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
}

.contact-modal-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

body.contact-modal-open {
    overflow: hidden;
}

@media (min-width: 640px) {
    .contact-modal {
        padding: 1.25rem;
    }

    .contact-modal-dialog {
        width: min(100%, 680px);
        padding: 1.35rem 1.4rem 1.4rem;
    }
}

.lead-panel-head {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.05rem;
}

.lead-panel-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text);
}

.lead-panel-head p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.intent-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 1.1rem;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

.intent-option {
    position: relative;
}

.intent-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.intent-option span {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition:
        color 0.2s var(--ease),
        border-color 0.2s var(--ease),
        background 0.2s var(--ease),
        box-shadow 0.2s var(--ease);
}

.intent-option:hover span {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
}

.intent-option input:focus-visible + span {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.intent-option input:checked + span {
    color: var(--text);
    border-color: rgba(107, 149, 240, 0.55);
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px rgba(107, 149, 240, 0.12);
}

.form-grid {
    display: grid;
    gap: 0.85rem;
}

@media (min-width: 640px) {
    .form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .form-span-2 {
        grid-column: 1 / -1;
    }
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* .field { display:flex } must not override the HTML hidden attribute */
.field[hidden] {
    display: none !important;
}

.field label {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.field label .req {
    color: var(--accent);
    margin-left: 0.15rem;
}

.field label .opt-label {
    font-weight: 400;
    letter-spacing: 0;
    color: var(--text-faint);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 0.62rem 0.75rem;
    /*
     * 16px minimum: iOS Safari auto-zooms focused controls under 16px and often
     * leaves the page zoomed after the contact modal closes (see zoombug1.png).
     */
    font-size: 16px;
    font-family: inherit;
    line-height: 1.4;
    color: var(--text);
    background: rgba(12, 16, 28, 0.45);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
    transition:
        border-color 0.2s var(--ease),
        background 0.2s var(--ease),
        box-shadow 0.2s var(--ease);
    appearance: none;
    -webkit-appearance: none;
}

.field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%239aa3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.1rem;
}

.field textarea {
    min-height: 6.5rem;
    resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--text-faint);
    opacity: 0.85;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
    border-color: rgba(255, 255, 255, 0.22);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: rgba(107, 149, 240, 0.55);
    background: rgba(16, 22, 38, 0.55);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid {
    border-color: rgba(230, 120, 120, 0.65);
    box-shadow: 0 0 0 3px rgba(230, 120, 120, 0.12);
}

.field-hint {
    margin: 0;
    font-size: 0.72rem;
    color: var(--text-faint);
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.1rem;
    margin-top: 1.1rem;
}

.form-note {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-faint);
    max-width: 28em;
}

.form-note a {
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.form-note a:hover {
    color: var(--text);
    border-bottom-color: rgba(255, 255, 255, 0.28);
}

.form-status {
    margin: 0.85rem 0 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--text-muted);
    min-height: 1.25em;
}

.form-status[data-tone="error"] {
    color: #f0a0a0;
}

.form-status[data-tone="success"] {
    color: #9ed4b0;
}

.lead-success {
    display: none;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.35rem 0 0.15rem;
}

.lead-success.is-visible {
    display: flex;
}

.lead-success h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}

.lead-success p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text-muted);
    max-width: 36em;
}

.lead-success a {
    color: var(--accent);
    text-decoration: none;
}

.lead-success a:hover {
    text-decoration: underline;
}

.lead-form.is-hidden {
    display: none;
}

/* Closing re-engage band (after long content) */
.reengage {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.3rem;
    border: 1px solid rgba(107, 149, 240, 0.3);
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse 80% 120% at 100% 0%, rgba(107, 149, 240, 0.14), transparent 55%),
        linear-gradient(180deg, rgba(48, 55, 74, 0.8) 0%, rgba(38, 44, 61, 0.88) 100%);
    box-shadow: var(--shadow-soft), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

@media (min-width: 700px) {
    .reengage {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        padding: 1.35rem 1.5rem;
    }
}

.reengage-copy {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.reengage-kicker {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}

.reengage-copy h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
}

.reengage-copy p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
    max-width: 36em;
}

.reengage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    flex-shrink: 0;
}

/* Footer */
.site-footer {
    margin-top: 0.35rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
    border-top: 1px solid var(--border-strong);
    padding-top: 1.2rem;
    padding-bottom: 0.25rem;
}

.footer-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 1.25rem;
    width: 100%;
}

.footer-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1.15rem;
}

.footer-meta {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-faint);
    letter-spacing: 0.01em;
}

.footer-meta a {
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.footer-meta a:hover {
    color: var(--text);
    border-bottom-color: rgba(255, 255, 255, 0.22);
}

.footer-meta a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Status / uptime tracker pill */
.status-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.32rem 0.65rem 0.32rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    text-decoration: none;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
    transition:
        color 0.2s var(--ease),
        border-color 0.2s var(--ease),
        background 0.2s var(--ease);
}

.status-link:hover {
    color: var(--text);
    border-color: rgba(110, 200, 140, 0.4);
    background: rgba(80, 180, 110, 0.08);
}

.status-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* LinkedIn footer pill */
.social-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.7rem 0.32rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    text-decoration: none;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
    transition:
        color 0.2s var(--ease),
        border-color 0.2s var(--ease),
        background 0.2s var(--ease);
}

.social-link:hover {
    color: var(--text);
    border-color: rgba(10, 102, 194, 0.55);
    background: rgba(10, 102, 194, 0.12);
}

.social-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.social-link-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 3px;
    display: grid;
    place-items: center;
    background: #0a66c2;
    color: #fff;
}

.social-link-icon svg {
    width: 10px;
    height: 10px;
    display: block;
}

.social-link:hover .social-link-icon {
    background: #0c7adb;
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #5dcc86;
    box-shadow: 0 0 0 3px rgba(93, 204, 134, 0.18);
    animation: status-pulse 2.4s ease-in-out infinite;
}

.status-label {
    color: inherit;
}

.status-hint {
    color: var(--text-faint);
    font-weight: 400;
    font-size: 0.7rem;
}

@media (max-width: 420px) {
    .status-hint {
        display: none;
    }
}

@keyframes status-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 3px rgba(93, 204, 134, 0.18);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 0 5px rgba(93, 204, 134, 0.1);
        opacity: 0.85;
    }
}

@media (prefers-reduced-motion: reduce) {
    .status-dot {
        animation: none;
    }
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem 0.75rem;
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--text-faint);
}

.footer-legal a {
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
    white-space: nowrap;
}

.footer-legal a:hover {
    color: var(--text);
    border-bottom-color: rgba(255, 255, 255, 0.22);
}

.footer-legal a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.footer-legal a[aria-current="page"] {
    color: var(--text);
    border-bottom-color: rgba(255, 255, 255, 0.28);
}

.footer-legal .sep {
    color: var(--text-faint);
    opacity: 0.5;
    user-select: none;
}

.footer-label-short {
    display: none;
}

.footer-label-full {
    display: inline;
}

/*
 * Footer credit: gradient only on the brand line; “All Rights Reserved.”
 * always sits on its own plain line (all breakpoints).
 */
.footer-copy {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    font-size: 0.75rem;
    line-height: 1.5;
    letter-spacing: 0.01em;
    text-align: right;
    font-weight: 500;
    color: var(--text-faint);
}

.footer-copy-main {
    background: linear-gradient(90deg, #9a3a78 0%, #5c4fa8 42%, #2f6fad 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 500;
}

.footer-copy-main > *,
.footer-copy-main em {
    color: inherit;
    -webkit-text-fill-color: inherit;
    background: none;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .footer-copy-main {
        color: #5a7aaa;
        background: none;
        -webkit-text-fill-color: currentColor;
    }
}

.footer-copy-year {
    font-weight: 650;
    letter-spacing: -0.01em;
}

.footer-copy-brand {
    margin-left: 0.4em;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.footer-copy-sep {
    margin: 0 0.4em;
    opacity: 0.85;
    user-select: none;
}

.footer-copy-entity {
    font-style: italic;
    font-weight: 550;
}

.footer-copy-rights {
    display: block;
    font-weight: 500;
    color: var(--text-faint);
    -webkit-text-fill-color: var(--text-faint);
    background: none;
}

/* Optional footer brand mark — remove .footer-brand + CSS to revert */
.footer-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0.35rem 0 0;
    padding: 0.15rem 0 0;
}

.footer-brand img {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: contain;
    opacity: 0.95;
    border-radius: 8px;
    transition: opacity 0.2s var(--ease);
}

.footer-brand a {
    line-height: 0;
    border-radius: 8px;
}

.footer-brand a:hover img {
    opacity: 0.95;
}

.footer-brand a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Mobile: legal links + copyright on their own row under status/LinkedIn, centered */
@media (max-width: 639px) {
    .footer-top {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }

    .footer-left {
        justify-content: center;
        width: 100%;
    }

    .footer-legal {
        width: 100%;
        margin-left: 0;
        justify-content: center;
        text-align: center;
        gap: 0.35rem 0.55rem;
    }

    .footer-label-full {
        display: none;
    }

    .footer-label-short {
        display: inline;
    }

    .footer-copy {
        text-align: center;
        width: 100%;
        align-items: center;
    }

    .footer-brand {
        margin-top: 0.5rem;
    }
}

/* Responsive */
@media (min-width: 640px) {
    .shell {
        width: min(100% - 3.5rem, var(--max));
        margin-left: auto;
        margin-right: auto;
        padding: 2.75rem 0 3.25rem;
        gap: 1.15rem;
    }

    .brand img {
        width: 300px; /* tight; logo PNG has built-in padding */
    }

    .brand-pill {
        padding: 0.35rem 1.05rem 0.3rem 0.95rem;
    }

    .brand-actions {
        padding-left: 1rem;
    }

    .page-nav {
        margin-top: 0.28rem;
        padding-top: 0.28rem;
        gap: 0.25rem;
    }

    .page-nav-link {
        font-size: 0.75rem;
        padding: 0.22rem 0.5rem;
    }

    .service-list--pillars > li,
    .service-list--emergency > li {
        gap: 0.5rem;
        padding: 1.2rem 1.3rem;
    }

    .service-list--support > li {
        padding: 1rem 1.25rem;
    }

    .service-head {
        gap: 0.5rem 1.5rem;
    }
}

@media (min-width: 900px) {
    .shell {
        padding-top: 3.25rem;
        gap: 1.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .brand,
    .brand-cta,
    .service-list--pillars > li,
    .service-list--support > li,
    .service-list--emergency > li,
    .work-card,
    .work-media img,
    .work-filter,
    .btn,
    .page-nav-link,
    .page-nav-icon,
    .service-more,
    .lead-door,
    .intent-option span,
    .field input,
    .field select,
    .field textarea {
        transition: none;
    }
}

/* —— Client login page —— */
.login-page {
    min-height: 100vh;
    min-height: 100dvh;
    /* Vertical spacing knobs (easy to tune without hunting the cascade) */
    --login-logo-card-gap: calc(0.55rem + 10px);
    --login-form-footer-gap: 100px; /* ~5× the prior 20px breathing room */
}

.login-shell {
    /* Match main site .shell — centered column; narrower for pure sign-in.
       Stack packs from the top so free space falls below the footer (not a
       tall void between the form and footer). */
    width: min(100% - 2.5rem, 720px);
    margin: 0 auto;
    padding: 1rem 0 1.15rem;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* No flex gap — header/main/footer spacing is explicit margins */
    gap: 0;
    text-align: left;
    box-sizing: border-box;
}

.login-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem 1.25rem;
    flex: 0 0 auto;
    margin-bottom: 0.65rem;
}

/* White pill = same width as login card; logo uses same scale as index .brand img */
.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    max-width: 440px; /* same as .login-card */
    /* Gap to card comes from .login-main gap (not margin) — easier to tune */
    margin: 0 auto;
    padding: 0.7rem 1.05rem;
    background: #fff;
    border-radius: 16px; /* match .login-card */
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 10px 28px rgba(0, 0, 0, 0.2),
        0 2px 6px rgba(0, 0, 0, 0.08);
    line-height: 0;
    transition: opacity 0.2s var(--ease);
}

.login-brand:hover {
    opacity: 0.96;
}

.login-brand:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

/* Keep in sync with .brand img (index header) */
.login-brand img {
    display: block;
    width: min(288px, 50vw);
    max-width: 100%;
    height: auto;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.login-header-link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.login-header-link:hover {
    color: var(--text);
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.login-main {
    /* Do not grow — growing + footer margin-top:auto created a huge void under the form */
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 0;
    padding: 0.15rem 0 0;
    /* Space between logo pill and login card */
    gap: var(--login-logo-card-gap);
}

.login-card {
    width: 100%;
    max-width: 440px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background:
        linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, transparent 42%),
        linear-gradient(180deg, rgba(52, 60, 82, 0.88) 0%, rgba(36, 42, 58, 0.94) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 20px 50px rgba(0, 0, 0, 0.28),
        0 4px 14px rgba(0, 0, 0, 0.16);
    padding: 1.55rem 1.45rem 1.45rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.login-card-head {
    margin-bottom: 1.25rem;
}

.login-card-eyebrow {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8b94a8;
}

.login-card h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: #e8ecf4;
}

.login-card-sub {
    margin: 0.4rem 0 0;
    font-size: 0.875rem;
    color: #8b94a8;
    line-height: 1.5;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}

.login-field label,
.login-label-row label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 550;
    color: #b0b8c8;
}

.login-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.login-label-row label {
    margin-bottom: 0;
}

.login-field input[type="email"],
.login-field input[type="password"],
.login-field input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    min-height: 2.85rem;
    padding: 0.7rem 0.9rem;
    font: inherit;
    font-size: 0.9375rem;
    color: #eef1f7;
    background: rgba(12, 16, 28, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    outline: none;
    transition:
        border-color 0.15s var(--ease),
        box-shadow 0.15s var(--ease),
        background 0.15s var(--ease);
}

.login-field input::placeholder {
    color: #6d768a;
}

.login-field input:hover {
    border-color: rgba(255, 255, 255, 0.18);
}

.login-field input:focus {
    border-color: rgba(107, 149, 240, 0.65);
    box-shadow: 0 0 0 3px rgba(107, 149, 240, 0.18);
    background: rgba(12, 16, 28, 0.55);
}

.login-password-wrap {
    position: relative;
}

.login-password-wrap input {
    padding-right: 4.25rem;
}

.login-show-pass {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: #8b94a8;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
}

.login-show-pass:hover {
    color: #cdd4e0;
    background: rgba(255, 255, 255, 0.05);
}

.login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.login-check {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #8b94a8;
    cursor: pointer;
    user-select: none;
}

.login-check input {
    width: 0.95rem;
    height: 0.95rem;
    accent-color: #6b95f0;
}

.login-submit {
    width: 100%;
    min-height: 2.95rem;
    margin-top: 0.15rem;
    font-size: 0.9375rem;
}

.login-form-note {
    margin: 0;
    min-height: 1.25em;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #8b94a8;
}

.login-form-note.is-info {
    color: #a8b8d8;
}

.login-form-note.is-error {
    color: #f0b4b4;
}

.login-form-note.is-error .login-error-code {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: #8b94a8;
    font-variant-numeric: tabular-nums;
}

.login-field input.is-invalid {
    border-color: rgba(239, 100, 100, 0.55);
    box-shadow: 0 0 0 3px rgba(239, 100, 100, 0.12);
}

.login-submit.is-loading {
    opacity: 0.78;
    cursor: wait;
    pointer-events: none;
}

/* In-card text links (footer copy, etc.) — inherit form scale, not body 16px */
.login-text-link {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.45;
    color: #a8b0c0;
    text-decoration: none;
    border-bottom: 1px solid rgba(168, 176, 192, 0.3);
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.login-text-link:hover {
    color: #d0d6e0;
    border-bottom-color: rgba(208, 214, 224, 0.45);
}

/*
  Forgot password sits in the label row next to "Password" (0.8125rem).
  Scope it to the row so size is structural, not a one-off fight with body rem.
*/
.login-label-row .login-text-link {
    flex-shrink: 0;
    align-self: baseline;
    font-size: 0.75rem; /* 12px — between tiny and field labels (0.8125rem) */
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.25;
    color: #7e879c;
    border-bottom-color: rgba(126, 135, 156, 0.32);
}

.login-label-row .login-text-link:hover {
    color: #a8b0c0;
    border-bottom-color: rgba(168, 176, 192, 0.45);
}

.login-card-foot {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.login-card-foot p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #8b94a8;
}

.login-secure-line {
    margin-top: 0.75rem !important;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem !important;
    color: #6f788c !important;
}

.login-lock {
    display: inline-flex;
    color: #7e879c;
}

.login-lock svg {
    width: 14px;
    height: 14px;
}

.login-footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.25rem;
    border-top: 1px solid var(--border);
    flex: 0 0 auto;
    /* Space under the login card before footer links */
    margin-top: var(--login-form-footer-gap);
}

/* Desktop login footer: right-aligned (matches main site footer) */
.login-footer-links {
    margin-left: auto;
    justify-content: flex-end;
    width: auto;
    max-width: 100%;
}

.login-footer .footer-copy {
    text-align: right;
}

@media (min-width: 640px) {
    .login-shell {
        width: min(100% - 3.5rem, 720px);
        margin-left: auto;
        margin-right: auto;
        padding: 1.15rem 0 1.35rem;
        gap: 0;
    }

    .login-brand,
    .login-card {
        max-width: 460px;
    }

    .login-brand {
        padding: 0.75rem 1.15rem;
    }

    /* Match .brand img @ 640px+ (index header) */
    .login-brand img {
        width: 300px;
    }

    .login-card {
        padding: 1.45rem 1.5rem 1.35rem;
    }

    .login-main {
        /* Slight top inset so the pair isn’t glued to “Back to home” */
        padding-top: 0.35rem;
        padding-bottom: 0;
    }
}

/* Short laptop / small desktop heights: keep logo + form + footer on one screen */
@media (max-height: 820px) {
    .login-page {
        --login-logo-card-gap: calc(0.4rem + 10px);
        /* Still clearly separated, slightly tighter on short viewports */
        --login-form-footer-gap: 72px;
    }

    .login-shell {
        padding-top: 0.75rem;
        padding-bottom: 0.85rem;
        gap: 0;
    }

    .login-header {
        margin-bottom: 0.5rem;
    }

    .login-main {
        padding-top: 0.15rem;
        padding-bottom: 0;
    }

    .login-brand {
        padding: 0.5rem 0.95rem;
    }

    .login-brand img {
        width: min(260px, 42vw);
    }

    .login-card {
        padding: 1.15rem 1.25rem 1.1rem;
    }

    .login-card-head {
        margin-bottom: 0.85rem;
    }

    .login-footer {
        gap: 0.4rem;
    }
}

/* Mobile login only: center legal links + copyright (must come after desktop rules) */
@media (max-width: 639px) {
    .login-shell {
        width: min(100% - 2rem, 720px);
        margin-left: auto;
        margin-right: auto;
        padding: 1.25rem 0 1.75rem;
    }

    .login-brand {
        padding: 0.85rem 1rem;
    }

    /* Match .brand img on mobile (index header) */
    .login-brand img {
        width: min(268px, 100%);
        margin: 0 auto;
    }

    .login-footer-links.footer-legal,
    .login-footer .login-footer-links {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        justify-content: center;
        text-align: center;
    }

    .login-footer .footer-copy {
        width: 100%;
        text-align: center;
    }
}

/* —— Legal pages (ToS / Privacy) — quieter than home CTAs; soft slate, not link-blue —— */
.legal-page main {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/*
 * Soften intro hierarchy vs pure white home hero.
 * Title + lede are deliberately smaller than .intro h1 / .lede (marketing scale).
 */
.legal-page .intro .eyebrow {
    color: var(--text-faint);
}

.legal-page .intro h1 {
    font-size: clamp(1.35rem, 3.2vw, 1.65rem);
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #d8dee9;
    font-weight: 600;
}

.legal-page .intro .lede {
    margin-top: 0.1rem;
    max-width: 40em;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #8b94a8;
}

.legal-page .intro-proof li {
    color: #8b94a8;
}

.legal-page .intro-proof li::before {
    background: #7e879c;
    opacity: 0.7;
}

/* TOC: muted chips, never browser/link blue */
.legal-toc-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.legal-toc-nav a,
.legal-toc-nav a:link,
.legal-toc-nav a:visited {
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.68rem;
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #8b94a8 !important;
    text-decoration: none !important;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: none;
    transition:
        color 0.15s var(--ease),
        border-color 0.15s var(--ease),
        background 0.15s var(--ease);
}

.legal-toc-nav a:hover,
.legal-toc-nav a:focus-visible {
    color: #c5ccd8 !important;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none !important;
}

.legal-toc-nav a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.22);
    outline-offset: 2px;
}

.legal-sections {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.legal-block {
    scroll-margin-top: 1.25rem;
    padding: 1.15rem 1.25rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(42, 48, 64, 0.78) 0%, rgba(34, 40, 55, 0.82) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

/* Section titles: soft gray, not bright white */
.legal-block h2 {
    margin: 0 0 0.55rem;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #c5ccd8;
}

.legal-block h3 {
    margin: 0.85rem 0 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #b0b8c8;
}

/* Body copy: muted slate */
.legal-block p,
.legal-block li {
    font-size: 0.875rem;
    line-height: 1.65;
    color: #8b94a8;
}

.legal-block p {
    margin: 0 0 0.65rem;
}

.legal-block p:last-child {
    margin-bottom: 0;
}

.legal-block ul,
.legal-block ol {
    margin: 0 0 0.65rem;
    padding-left: 1.2rem;
}

.legal-block ul:last-child,
.legal-block ol:last-child {
    margin-bottom: 0;
}

.legal-block li {
    margin-bottom: 0.3rem;
}

.legal-block li:last-child {
    margin-bottom: 0;
}

/* Emphasis: slightly brighter gray, still not pure white */
.legal-block strong {
    color: #b8c0ce;
    font-weight: 600;
}

/* In-body links: underline + muted, accent only on hover */
.legal-block a,
.legal-block a:link,
.legal-block a:visited {
    color: #a8b0c0;
    text-decoration: none;
    border-bottom: 1px solid rgba(168, 176, 192, 0.35);
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.legal-block a:hover,
.legal-block a:focus-visible {
    color: #cdd4e0;
    border-bottom-color: rgba(205, 212, 224, 0.5);
}

/* Callouts: neutral panel, not blue wash */
.legal-callout {
    margin: 0.75rem 0 0;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.18);
    font-size: 0.84rem;
    line-height: 1.55;
    color: #8b94a8;
}

.legal-callout:first-child {
    margin-top: 0;
}

.legal-callout strong {
    color: #b8c0ce;
    font-weight: 600;
}

.legal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    padding-top: 0.25rem;
}

.legal-page .legal-actions .btn-ghost {
    color: #a8b0c0;
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
}

.legal-page .legal-actions .btn-ghost:hover {
    color: #d0d6e0;
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
}

@media (min-width: 700px) {
    .legal-sections {
        gap: 0.85rem;
    }

    .legal-block {
        padding: 1.2rem 1.35rem 1.25rem;
    }
}

/* Contact submit: in-button spinner */
.btn-spinner {
    display: none;
    width: 1.05rem;
    height: 1.05rem;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    border-radius: 50%;
    flex-shrink: 0;
    animation: btn-spin 0.7s linear infinite;
}
.btn.is-loading {
    opacity: 1;
    cursor: wait;
    pointer-events: none;
}
.btn.is-loading .btn-spinner {
    display: inline-block;
}
.btn.is-loading .btn-label {
    font-weight: 650;
}
@keyframes btn-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-spinner {
        animation: none;
        border-top-color: rgba(255, 255, 255, 0.35);
        border-right-color: #fff;
    }
}

.contact-mode-badge {
    margin: 0 0 1rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: #f0c8b0;
    background: rgba(62, 48, 42, 0.55);
    border: 1px solid rgba(230, 140, 100, 0.4);
    border-radius: 8px;
}
.contact-mode-badge[hidden],
.contact-emergency-fields[hidden],
#intent-group-standard[hidden] {
    display: none !important;
}
.contact-emergency-fields { margin-top: 0.25rem; }
/* Isolated emergency modal */
#emergency-modal.contact-modal--emergency .contact-modal-dialog {
    max-height: min(98vh, 1100px);
    width: min(100%, 720px);
}
@media (min-width: 640px) {
    #emergency-modal.contact-modal--emergency .contact-modal-dialog {
        width: min(100%, 760px);
        max-height: min(98vh, 1100px);
    }
}
#emergency-modal .form-grid { gap: 0.7rem; }
#emergency-modal #em-symptoms { min-height: 4.25rem; }
#emergency-modal #em-access { min-height: 3.25rem; }

/* Home — Featured projects (2 randomized showcase samples) */
.featured-projects {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* No .chapter border-top — continuous with Get started above */
    border-top: none;
    padding-top: 0;
}
.featured-grid {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
}
@media (min-width: 700px) {
    .featured-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}
.featured-card {
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(48, 55, 74, 0.72) 0%, rgba(38, 44, 61, 0.78) 100%);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.featured-card:hover {
    border-color: rgba(255, 255, 255, 0.22);
    background: linear-gradient(180deg, rgba(54, 62, 84, 0.85) 0%, rgba(42, 49, 68, 0.9) 100%);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}
/* Match work showcase: padded frame + contain (not edge-to-edge cover crop) */
/* Match work showcase: padded frame + contain (not edge-to-edge cover crop) */
.featured-media {
    display: block;
    position: relative;
    margin: 0;
    padding: 0.65rem 0.65rem 0.55rem;
    background:
        linear-gradient(180deg, rgba(20, 24, 36, 0.95) 0%, rgba(16, 20, 30, 0.98) 100%);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.featured-media-btn {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    font: inherit;
    color: inherit;
}
.featured-media-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 8px;
}
.featured-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    object-position: center center;
    border-radius: 8px;
    background: #0e121c;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 8px 24px rgba(0, 0, 0, 0.35);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.featured-card:hover .featured-media img {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.09),
        0 12px 28px rgba(0, 0, 0, 0.4);
}
.featured-media-btn .work-zoom-hint {
    position: absolute;
    right: 0.85rem;
    bottom: 0.8rem;
}
.featured-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.95rem 1.05rem 1.1rem;
}
.featured-kicker {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}
.featured-body h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--text);
}
.featured-body p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.55;
    color: var(--text-muted);
}
.featured-more {
    margin: 0.85rem 0 0;
}
.featured-pricing {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.featured-pricing strong {
    color: var(--text);
    font-weight: 650;
}
.featured-pricing-sep {
    margin: 0 0.4rem;
    color: var(--text-faint);
}
.featured-pricing a {
    color: var(--accent);
    font-weight: 550;
    text-decoration: none;
    border-bottom: 1px solid rgba(107, 149, 240, 0.3);
}
.featured-pricing a:hover {
    border-bottom-color: rgba(107, 149, 240, 0.65);
}

/* Access / callout note — soft site chrome, not system-blue mailto */
.news-article-body > .news-access-note {
    margin: 0.15rem 0 0.25rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.12));
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.news-article-body > .news-access-note strong {
    display: block;
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text);
}
.news-article-body > .news-access-note p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-muted);
}
.news-article-body > .news-access-note a,
.news-article-body > .news-access-note a:link,
.news-article-body > .news-access-note a:visited {
    color: var(--text);
    -webkit-text-fill-color: var(--text);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.news-article-body > .news-access-note a:hover,
.news-article-body > .news-access-note a:active {
    color: #f0f4fc;
    -webkit-text-fill-color: #f0f4fc;
    border-bottom-color: rgba(240, 244, 252, 0.55);
}

/* —— News (blog) —— */
.news-lede {
    margin: 0;
    max-width: 42em;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text-muted);
}
.news-grid {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
}
@media (min-width: 700px) {
    .news-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}
.news-card {
    margin: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(48, 55, 74, 0.72) 0%, rgba(38, 44, 61, 0.78) 100%);
    overflow: hidden;
    box-shadow: var(--shadow-soft), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.news-card[hidden] { display: none !important; }
.news-card:hover {
    border-color: rgba(107, 149, 240, 0.35);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.05) inset;
}
.news-card-media {
    display: block;
    margin: 0;
    padding: 0.55rem 0.55rem 0.45rem;
    background: linear-gradient(180deg, rgba(20, 24, 36, 0.95) 0%, rgba(16, 20, 30, 0.98) 100%);
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
}
.news-card-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    object-position: center center;
    border-radius: 8px;
    background: #0e121c;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.3);
}
.news-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.95rem 1.05rem 1.1rem;
    flex: 1;
}
.news-card-date {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.news-card-body h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--text);
}
.news-card-body h3 a {
    color: inherit;
    text-decoration: none;
}
.news-card-body h3 a:hover {
    color: #c5d4f5;
}
.news-card-body > p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-muted);
    flex: 1;
}
.news-card-more {
    margin-top: 0.25rem;
}
.news-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1rem;
    margin: 0.85rem 0 0;
}
.news-pagination[hidden] { display: none !important; }
.news-pagination .btn {
    min-height: 2.4rem;
}
.news-page-status {
    font-size: 0.8125rem;
    color: var(--text-muted);
    min-width: 6.5rem;
    text-align: center;
}
/* Article page */
.news-article-back {
    margin: 0 0 0.35rem;
}
.news-article-back a {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
.news-article-back a:hover { color: #8eb4ff; }
.news-article-meta {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.news-article-title {
    margin: 0.25rem 0 0;
    font-size: clamp(1.35rem, 3.2vw, 1.75rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text);
}
.news-article-hero {
    margin: 0.5rem 0 0;
    padding: 0.65rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(20, 24, 36, 0.95) 0%, rgba(16, 20, 30, 0.98) 100%);
}
.news-article-hero .work-media-btn {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}
.news-article-hero img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    border-radius: 8px;
    background: #0e121c;
}
/* Video hero / in-body video (walkthrough posts) */
.news-article-hero--video {
    margin: 0.5rem 0 0;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    overflow: hidden;
    background: #0c1018;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.news-video-wrap {
    position: relative;
    width: 100%;
    background: #0a0e16;
    line-height: 0;
}
.news-video-wrap video {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(72vh, 720px);
    background: #000;
}
.news-article-hero--video figcaption,
.news-video figcaption {
    margin: 0;
    padding: 0.75rem 1rem 0.9rem;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--text-muted);
    background: linear-gradient(180deg, rgba(32, 38, 54, 0.95) 0%, rgba(24, 30, 44, 0.98) 100%);
    border-top: 1px solid var(--border);
}
.news-article-body > .news-video {
    margin: 0.35rem 0 0.5rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    overflow: hidden;
    background: #0c1018;
}
.news-article-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.35rem;
    max-width: 46em;
}
.news-article-body > p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-muted);
}
.news-article-body > p strong { color: var(--text); font-weight: 600; }
.news-article-body > p a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid rgba(107, 149, 240, 0.35);
}
.news-article-body > p a:hover {
    color: #9bb8f5;
    border-bottom-color: rgba(155, 184, 245, 0.6);
}
/* Access / callout note — soft site chrome, not system-blue mailto */
.news-article-body > .news-access-note {
    margin: 0.15rem 0 0.25rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border-strong, rgba(255, 255, 255, 0.12));
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
.news-article-body > .news-access-note strong {
    display: block;
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text);
}
.news-article-body > .news-access-note p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-muted);
}
.news-article-body > .news-access-note a,
.news-article-body > .news-access-note a:link,
.news-article-body > .news-access-note a:visited {
    color: var(--text);
    -webkit-text-fill-color: var(--text);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.news-article-body > .news-access-note a:hover,
.news-article-body > .news-access-note a:active {
    color: #f0f4fc;
    -webkit-text-fill-color: #f0f4fc;
    border-bottom-color: rgba(240, 244, 252, 0.55);
}
.news-article-h3 {
    margin: 0.55rem 0 0;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text);
}
.news-article-list {
    margin: 0;
    padding: 0 0 0 1.2rem;
    display: grid;
    gap: 0.4rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-muted);
}
.news-article-list li::marker {
    color: var(--accent);
}
.news-code-block {
    margin: 0.65rem 0 0.15rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: #1e1e1e;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.04) inset;
    overflow: hidden;
}
.news-code-label {
    margin: 0 !important;
    padding: 0.7rem 1rem 0.55rem !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    line-height: 1.3 !important;
    color: #f3f6fb !important;
    background: linear-gradient(180deg, #2a2d33 0%, #23262c 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.news-code {
    margin: 0;
    padding: 0.95rem 1.1rem 1.1rem;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: #1e1e1e;
    box-shadow: none;
    font-size: 0.8rem;
    line-height: 1.55;
    color: #d4d4d4;
    -webkit-text-fill-color: initial;
}
.news-code code {
    font-family: "Cascadia Code", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    white-space: pre;
    color: inherit;
    tab-size: 4;
}
.news-code .dax-cmt { color: #6a9955; font-style: italic; }
.news-code .dax-str { color: #ce9178; }
.news-code .dax-num { color: #b5cea8; }
.news-code .dax-kw  { color: #569cd6; font-weight: 600; }
.news-code .dax-fn  { color: #dcdcaa; }
.news-code .dax-col { color: #9cdcfe; }
.news-code .dax-id  { color: #4fc1ff; }
.news-code .dax-op  { color: #d4d4d4; }
/* DAX tokens — approximate Power BI / VS Code dark */
.news-code .dax-cmt { color: #6a9955; font-style: italic; }
.news-code .dax-str { color: #ce9178; }
.news-code .dax-num { color: #b5cea8; }
.news-code .dax-kw  { color: #569cd6; font-weight: 600; }
.news-code .dax-fn  { color: #dcdcaa; }
.news-code .dax-col { color: #9cdcfe; }
.news-code .dax-id  { color: #4fc1ff; }
.news-code .dax-op  { color: #d4d4d4; }
.news-figure-grid {
    list-style: none;
    margin: 0.15rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .news-figure-grid { grid-template-columns: 1fr 1fr; }
}
.news-figure {
    margin: 0;
    padding: 0.55rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(42, 48, 64, 0.7) 0%, rgba(34, 40, 55, 0.82) 100%);
}
.news-figure .work-media-btn {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}
.news-figure img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: contain;
    border-radius: 6px;
    background: #0e121c;
}
.news-figure figcaption {
    margin: 0.5rem 0.15rem 0.1rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-faint);
}
.news-article-share {
    margin: 0.5rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
    font-size: 0.8125rem;
    color: var(--text-faint);
}
.news-article-share code {
    font-size: 0.78rem;
    color: var(--text-muted);
    word-break: break-all;
}