/* MDES design system — tokens and shared primitives, site-wide.
 *
 * Values come from the MDES Figma handoff ("MDES Final.fig", frame Left-Align).
 * That frame is a fixed 1920px canvas; the gutter and type sizes below are the
 * fluid equivalents of its fixed values. The whole site is dark: there is one
 * palette, no light variant and no theme toggle.
 */

:root {
    /* Surfaces */
    --l-bg: rgb(10, 10, 18);
    --l-surface: rgb(23, 26, 38);
    --l-black: rgb(0, 0, 0);
    --l-border: rgb(33, 37, 56);
    --l-plate: rgb(0, 6, 25);

    /* Ink */
    --l-accent: rgb(139, 106, 191);
    --l-accent-hover: rgb(169, 142, 214);
    --l-text: rgb(169, 175, 197);
    --l-text-strong: rgb(209, 215, 237);
    --l-text-muted: rgb(109, 115, 137);
    --l-white: rgb(255, 255, 255);
    --l-rule: rgb(143, 151, 176);

    /* Layout: a 1520px content column inside a 200px gutter at 1920px wide.
     * --l-measure is the narrower cap used for long-form prose pages. */
    --l-content: 1520px;
    --l-measure: 1100px;
    --l-gutter: clamp(20px, 10.42vw, 200px);

    /* Type */
    --l-font: "Space Grotesk", "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --l-font-display: Cabin, "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --l-h1: clamp(34px, 3.65vw, 70px);
    --l-h2: clamp(28px, 2.5vw, 48px);
    --l-h3: clamp(22px, 1.67vw, 32px);
    --l-lead: clamp(16px, 1.04vw, 20px);
    --l-body: clamp(15px, 0.94vw, 18px);

    /* Renders checkboxes, text inputs, scrollbars and autofill natively dark. */
    color-scheme: dark;
}

/* ------------------------------------------------------------------- base */

body {
    background: var(--l-bg);
    color: var(--l-text);
    font-family: var(--l-font);
    font-size: var(--l-body);
    line-height: 1.6;
}

a {
    color: var(--l-accent);
}

a:hover {
    color: var(--l-accent-hover);
}

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

hr {
    border: 0;
    border-top: 1px solid var(--l-border);
}

/* Long-form pages carry prose straight out of MDX and slots. */
strong,
b {
    color: var(--l-text-strong);
}

code,
pre {
    background: var(--l-surface);
    color: var(--l-text-strong);
}

/* ----------------------------------------------------------------- layout */

/* The content column shared by the header, the footer and every page body,
 * so the left edge lines up from the logo down to the copyright. */
.l-container {
    width: 100%;
    max-width: calc(var(--l-content) + 2 * var(--l-gutter));
    margin: 0 auto;
    padding-inline: var(--l-gutter);
    box-sizing: border-box;
}

/* Cap running prose at a readable measure inside that column. */
.l-prose {
    max-width: var(--l-measure);
}

/* --------------------------------------------------------------- headings */

.l-h2 {
    font-size: var(--l-h2);
    font-weight: 700;
    line-height: 1.15;
    color: var(--l-accent);
}

.l-h2--white {
    color: var(--l-white);
}

/* ---------------------------------------------------------------- buttons */

.l-button {
    display: inline-flex;
    flex-direction: row;
    gap: 9.99px;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding: 10px 32px;
    border: 0;
    border-radius: 8px;
    box-sizing: border-box;
    background: var(--l-accent);
    box-shadow: inset 0 0 0 2px var(--l-accent);
    font-family: inherit;
    font-size: clamp(16px, 1.04vw, 20px);
    font-weight: 400;
    line-height: 30px;
    color: var(--l-white);
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.15s ease-out;
}

.l-button:hover,
.l-button:focus-visible {
    filter: brightness(1.12);
    color: var(--l-white);
}

.l-button--strong {
    font-weight: 700;
}

.l-button__icon {
    flex-shrink: 0;
}

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

/* The subpages open on a full-bleed photograph. This fades its lower edge into
 * the page so a bright image (the office shot on About Us) still reads as part
 * of a dark page instead of a pasted-in rectangle. */
.l-hero-band {
    position: relative;
}

.l-hero-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10, 10, 18, 0.55) 0%,
        rgba(10, 10, 18, 0.35) 45%,
        rgb(10, 10, 18) 100%
    );
    pointer-events: none;
}

/* ------------------------------------------------------- landing page only */

/* The landing page builds its rhythm from flex gaps rather than text margins,
 * so it resets them; the prose pages keep normal paragraph spacing. */
.landing h1,
.landing h2,
.landing h3 {
    margin: 0;
    line-height: 1.15;
}

.landing p {
    margin: 0;
    font-size: var(--l-body);
    line-height: 1.6;
    color: var(--l-text);
}