/* =========================================================================
   ProSeg · Base
   Reset, element defaults, typography scale, layout primitives, utilities
   and accessibility primitives.
   ========================================================================= */

/* ---------- 1. Reset ---------- */

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

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Anchor targets must clear the sticky header. */
    scroll-padding-top: calc(var(--header-h) + var(--sp-6));
}

body {
    min-height: 100vh;
    background: var(--bg-body);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* `clip` (not `hidden`) prevents horizontal scroll without creating a
       scroll container, which would break the sticky header. */
    overflow-x: clip;
}

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

img {
    height: auto;
}

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

button {
    background: none;
    border: 0;
    cursor: pointer;
}

ul[class],
ol[class] {
    list-style: none;
    padding: 0;
}

a {
    color: var(--blue-600);
    text-decoration: none;
}

table {
    border-collapse: collapse;
}

/* ---------- 2. Typography ---------- */

h1,
h2,
h3,
h4,
h5 {
    font-weight: 700;
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-snug);
    text-wrap: balance;
    color: var(--text);
}

h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: 800;
}

h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-title);
    letter-spacing: var(--tracking-tight);
}

h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-title);
}

h4 {
    font-size: var(--fs-h4);
    line-height: 1.35;
}

p {
    max-width: var(--measure);
    text-wrap: pretty;
}

strong,
b {
    font-weight: 700;
}

code,
kbd,
samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

hr {
    border: 0;
    height: 1px;
    background: var(--line);
}

/* ---------- 3. Accessibility primitives ---------- */

.skip-link {
    position: fixed;
    left: var(--sp-4);
    top: var(--sp-4);
    z-index: 200;
    transform: translateY(calc(-100% - var(--sp-6)));
    padding: var(--sp-3) var(--sp-5);
    background: var(--white);
    color: var(--navy-900);
    font-size: var(--fs-sm);
    font-weight: 700;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-md);
    transition: transform var(--dur-base) var(--ease-out);
}

.skip-link:focus {
    transform: translateY(0);
}

:focus-visible {
    outline: 2px solid var(--blue-500);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

.on-dark :focus-visible,
.site-footer :focus-visible,
.site-header :focus-visible {
    outline-color: var(--blue-400);
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- 4. Layout primitives ---------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    padding-block: var(--section-y);
    position: relative;
}

.section--plain {
    background: var(--canvas);
}

.section--white {
    background: var(--surface);
}

/* Applied to any block that sits on a dark surface. Keeps text, links and
   eyebrows legible without each section re-declaring colours. */
.on-dark {
    color: var(--text-invert-soft);
}

.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4 {
    color: var(--text-invert);
}

.on-dark a {
    color: var(--blue-400);
}

.on-dark p,
.on-dark .lead,
.on-dark .visually-lead {
    color: var(--text-invert-soft);
}

.section-head {
    max-width: var(--container-narrow);
    margin-bottom: var(--sp-9);
}

.section-head p {
    margin-top: var(--sp-4);
    font-size: var(--fs-lead);
    line-height: var(--lh-loose);
    color: var(--text-soft);
}

/* ---------- 5. Text utilities ---------- */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--blue-600);
}

.eyebrow::before {
    content: "";
    width: 1.5rem;
    height: 1px;
    background: currentColor;
    opacity: 0.55;
}

.on-dark .eyebrow {
    color: var(--amber-500);
}

.lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-loose);
    color: var(--text-soft);
}

.muted {
    color: var(--text-mute);
}

.mono {
    font-family: var(--font-mono);
    font-feature-settings: "tnum" 1;
}

.measure {
    max-width: var(--measure);
}

.measure-lead {
    max-width: var(--measure-lead);
}

.visually-lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-loose);
    color: var(--text-soft);
}

.text-gradient {
    background: linear-gradient(100deg, #ffffff 20%, #b9cdfd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- 5.1 Spacing utilities ---------- */

.mt-4 {
    margin-top: var(--sp-4);
}

.mt-5 {
    margin-top: var(--sp-5);
}

.mt-6 {
    margin-top: var(--sp-6);
}

/* ---------- 6. Reveal on scroll ---------- */

.reveal {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity var(--dur-slow) var(--ease-out),
        transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ---------- 7. Reduced motion ---------- */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* ---------- 8. Print ---------- */

@media print {
    .site-header,
    .site-footer,
    .hero__panel,
    .skip-link {
        display: none !important;
    }

    body {
        background: #fff;
    }
}