/*
|--------------------------------------------------------------------------
| BASE — resets, fonts, typography, links, forms, tables, accessibility
|--------------------------------------------------------------------------
|
| WHAT THIS FILE IS
|   How raw HTML looks before any class is applied. If a page uses a plain
|   <p>, <ul> or <table>, this file is what styles it.
|
| SAFE TO EDIT
|   Type sizes, colours, spacing. Do not remove the :focus-visible rules or
|   the .visually-hidden / .skip-link blocks — they are accessibility
|   requirements, not decoration.
*/

/* ---------------------------------------------------------------
 | Self-hosted Poppins. No third-party request, so no consent
 | question and no render-blocking round trip to Google.
 | swap = text is visible immediately in the fallback face.
 --------------------------------------------------------------- */
@font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/poppins-300.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/poppins-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/poppins-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/poppins-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/poppins-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Poppins";
    src: url("/assets/fonts/poppins-800.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;   /* the sticky header must not cover anchors */
}

body {
    margin: 0;
    background: var(--canvas);
    color: var(--slate);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
}

/* Stop a long unbroken string (a URL in a table cell) blowing out the layout. */
h1, h2, h3, h4, p, li, td, th, dd, dt {
    overflow-wrap: break-word;
}

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

/* ---------------------------------------------------------------
 | Typography
 --------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-4);
    color: var(--ink);
    font-weight: 700;
    line-height: var(--lh-heading);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

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

h2 { font-size: var(--fs-section); }
h3 { font-size: var(--fs-md); }
h4 { font-size: var(--fs-base); }

p {
    margin: 0 0 var(--space-4);
}

p:last-child,
ul:last-child,
ol:last-child {
    margin-bottom: 0;
}

.lead {
    font-size: 1.0625rem;
    color: var(--slate);
}

small,
.text-sm {
    font-size: var(--fs-sm);
}

strong,
b {
    font-weight: 600;
    color: var(--ink);
}

/* The pill label that sits above almost every heading on the site. */
.eyebrow {
    margin: 0 0 var(--space-3);
    color: var(--blue);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
}

.eyebrow-invert {
    color: var(--text-invert-soft);
}

blockquote {
    margin: 0;
}

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

code,
kbd,
samp {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 0.9em;
}

/* ---------------------------------------------------------------
 | Lists
 --------------------------------------------------------------- */
ul, ol {
    margin: 0 0 var(--space-4);
    padding-left: 1.25rem;
}

li + li {
    margin-top: var(--space-2);
}

/* Any list marked role="list" is a layout list, not prose: no bullets. */
ul[role="list"],
ol[role="list"] {
    padding-left: 0;
    list-style: none;
}

/* ---------------------------------------------------------------
 | Links and focus
 --------------------------------------------------------------- */
a {
    color: var(--blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--t-fast);
}

a:hover {
    color: var(--ink);
}

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

/* Keyboard users land here first; it is off-screen until focused. */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: var(--z-skip);
    padding: var(--space-3) var(--space-5);
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    background: var(--ink);
    color: var(--text-invert);
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
    color: var(--text-invert);
}

/* Available to assistive technology, invisible on screen. */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------------------------------------------------------------
 | Forms
 --------------------------------------------------------------- */
input,
select,
textarea,
button {
    font: inherit;
    color: inherit;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="url"],
select,
textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--ink);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

input::placeholder,
textarea::placeholder {
    color: var(--slate-soft);
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--slate-soft);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px var(--blue-tint);
    outline: none;
}

textarea {
    min-height: 9rem;
    resize: vertical;
}

label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--ink);
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* The red asterisk on a required field, announced as "required". */
.req {
    color: var(--red);
    margin-left: 0.15em;
}

input[type="checkbox"],
input[type="radio"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--blue);
    flex: none;
}

button {
    cursor: pointer;
}

/* ---------------------------------------------------------------
 | Tables
 --------------------------------------------------------------- */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

caption {
    margin-bottom: var(--space-3);
    color: var(--slate-soft);
    font-size: var(--fs-sm);
    text-align: left;
}

th,
td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

thead th {
    color: var(--ink);
    font-weight: 600;
    white-space: nowrap;
}

tbody tr:last-child td {
    border-bottom: 0;
}

/* ---------------------------------------------------------------
 | Icons
 --------------------------------------------------------------- */
.icon {
    width: 20px;
    height: 20px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 26px; height: 26px; }
.icon-accent { color: var(--blue); }

/* ---------------------------------------------------------------
 | Progressive enhancement helpers
 |   .js-only    hidden until main.js confirms JavaScript is running
 |   .no-js-only the fallback shown when it is not
 --------------------------------------------------------------- */
.no-js .js-only { display: none !important; }
.js .no-js-only { display: none !important; }

/* ---------------------------------------------------------------
 | Motion: one staggered reveal on load, and nothing at all for
 | anyone who has asked their system to reduce motion.
 --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] {
        opacity: 0;
        transform: translateY(var(--reveal-shift));
    }

    .js [data-reveal].is-revealed {
        opacity: 1;
        transform: none;
        transition: opacity 420ms ease, transform 420ms ease;
    }
}

@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;
    }
}