/* ==========================================================================
   Reset & base typography
   ========================================================================== */

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

/* The original stylesheet set font-family on the universal selector, which made
   a real type scale impossible. Fonts are now inherited from body instead. */

html {
    -webkit-text-size-adjust: 100%;
    /* Was on body, where it has no effect in most browsers. */
    scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    background-color: var(--light-bg);
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    color: var(--ink-1);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    font-weight: 700;
    /* Kills orphans site-wide for two declarations. */
    text-wrap: balance;
}

p { text-wrap: pretty; }

/* Numerals must not shift width while the counter animation runs. */
.tabular,
[data-count],
.trust-stat h3, .mini-stat strong, .fp-metric strong,
.mockup-kpi strong, .work-metric, .process-num, .price-name {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

::selection      { background: var(--primary-color); color: #fff; }
::-moz-selection { background: var(--primary-color); color: #fff; }

h1 { font-size: var(--fs-4xl); font-weight: 800; }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-base); }

p { line-height: var(--lh-base); }

a { color: var(--primary-color); }

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

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

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

ul, ol { list-style: none; }

/* --- Focus ---------------------------------------------------------------
   One ring, used everywhere, offset from the element with a soft halo.
   The original site had no visible focus style at all. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 4px rgba(13, 71, 161, 0.14);
}
:focus:not(:focus-visible) { outline: none; }

/* Skip link for keyboard and screen-reader users. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: calc(var(--z-modal) + 1);
    background: var(--primary-color);
    color: var(--white);
    padding: var(--sp-3) var(--sp-5);
    border-radius: 0 0 var(--radius-md) 0;
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus {
    left: 0;
}

/* Visually hidden but available to assistive tech. */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Icons (SVG sprite) -------------------------------------------------
   Sized by width/height, not font-size. Stroke weight is corrected per size:
   a constant stroke reads thin at 16px and heavy at 28px. */
.icon {
    width: var(--icon-md);
    height: var(--icon-md);
    display: inline-block;
    vertical-align: -0.2em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}
.icon-sm { width: var(--icon-sm); height: var(--icon-sm); stroke-width: 2; }
.icon-lg { width: var(--icon-lg); height: var(--icon-lg); stroke-width: 1.6; }
.icon-xl { width: 40px; height: 40px; stroke-width: 1.5; }
.icon-fill { fill: currentColor; stroke: none; }

/* --- Links in copy --- */
.prose a, p > a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(13, 71, 161, 0.35);
    transition: text-decoration-color var(--dur-2) var(--ease-out);
}
.prose a:hover, p > a:not([class]):hover { text-decoration-color: currentColor; }

/* --- Scrollbar (pointer devices only) --- */
@media (pointer: fine) {
    * { scrollbar-width: thin; scrollbar-color: var(--slate-300) transparent; }
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: var(--slate-300);
        border-radius: 8px;
        /* Border matching the page colour creates the inset-pill look. */
        border: 3px solid var(--plane-0);
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }
}