/*
 * Schouten IT Secure Compliance — shared design system
 * Loaded on every active route. Tailwind (CDN) supplies layout utilities;
 * this file owns tokens, typography and components.
 *
 * Note: Tailwind injects its preflight after this file, so components use
 * class selectors (and compound selectors for buttons) to stay authoritative.
 *
 * Contents
 *   1. Tokens                    9. Content components
 *   2. Base                     10. Service index (homepage)
 *   3. Layout                   11. Forms & notices
 *   4. Typography               12. Contact block
 *   5. Icons                    13. Footer
 *   6. Buttons & links          14. Scroll reveal
 *   7. Header & navigation      15. Motion & print
 *   8. Hero                     16. Fallback when the Tailwind CDN is unreachable
 *
 * Colour roles
 *   Navy   #0D233A  headlines, key sections, primary actions
 *   Blue   #4FAFEB  SITSC brand blue: decorative on light, text/graphics on navy only
 *                   (2.4:1 on white, so it never carries text on light surfaces)
 *   Mid    #4F73BF  supporting accents; --c-accent is its AA-safe darker derivative
 *   Soft   #F3F7FA  section backgrounds
 *   Slate  #64748B  understated elements; --c-muted is its AA-safe derivative for text
 */

/* ------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------ */
:root {
    /* Brand palette */
    --c-navy: #0D233A;
    --c-navy-2: #12304F;
    --c-navy-3: #1B3F66;
    --c-brand: #4FAFEB;
    --c-brand-soft: #9BD2F6;
    --c-secondary: #4F73BF;
    --c-soft: #F3F7FA;
    --c-slate: #64748B;

    /* Semantic roles (names kept for every existing page) */
    --c-bg: #FFFFFF;
    --c-surface: var(--c-soft);
    --c-ink: var(--c-navy);
    --c-body: #3E4C5F;
    --c-muted: #56677C;
    --c-line: #DCE4EC;
    --c-line-strong: #C3CFDB;
    --c-field: #66758A;
    --c-accent: #3A5A9F;
    --c-accent-hover: var(--c-navy);
    --c-accent-tint: #E6EEF8;
    --c-focus: #3A5A9F;
    --c-success: #1D7144;
    --c-success-ink: #0F4A2A;
    --c-success-tint: #EEF7F1;
    --c-danger: #A8322D;
    --c-danger-ink: #7A1F1B;
    --c-danger-tint: #FBF1F0;
    --c-info-tint: #EAF4FC;

    /* Buttons (re-pointed inside navy surfaces) */
    --btn-bg: var(--c-navy);
    --btn-fg: #FFFFFF;
    --btn-bg-hover: var(--c-navy-3);
    --btn-bg-active: #081829;

    --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --fs-display: clamp(2.25rem, 1.35rem + 3.1vw, 3.5rem);
    --fs-h1: clamp(2.125rem, 1.45rem + 2.4vw, 3.25rem);
    --fs-h2: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
    --fs-h3: 1.25rem;
    --fs-pull: clamp(1.25rem, 1.08rem + 0.6vw, 1.625rem);
    --fs-lead: clamp(1.125rem, 1.03rem + 0.32vw, 1.3125rem);
    --fs-body: 1.0625rem;
    --fs-sm: 0.9375rem;
    --fs-xs: 0.8125rem;

    --container: 1240px;
    --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.5rem);
    --section-y: clamp(4rem, 2.6rem + 4.6vw, 7rem);
    --header-h: 72px;

    --radius: 4px;
    --radius-lg: 6px;
    --radius-sm: 2px;

    --shadow-sm: 0 1px 2px rgba(13, 35, 58, 0.05);
    --shadow-md: 0 1px 2px rgba(13, 35, 58, 0.06), 0 18px 36px -20px rgba(13, 35, 58, 0.24);

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 180ms;
    --dur-reveal: 560ms;
}

@media (min-width: 1024px) {
    :root { --header-h: 84px; }
}

/* Navy surfaces re-point the semantic tokens, so every component inside
   (headings, lists, rules, buttons, focus) adapts without extra rules. */
.section--navy,
.panel--navy {
    --c-ink: #FFFFFF;
    --c-body: #C9D6E3;
    --c-muted: #A9BBCD;
    --c-line: rgba(255, 255, 255, 0.16);
    --c-line-strong: rgba(255, 255, 255, 0.32);
    --c-field: #8FA5BC;
    --c-accent: var(--c-brand);
    --c-accent-hover: #FFFFFF;
    --c-accent-tint: rgba(79, 175, 235, 0.14);
    --c-focus: var(--c-brand);
    --btn-bg: var(--c-brand);
    --btn-fg: var(--c-navy);
    --btn-bg-hover: #7CC4F3;
    --btn-bg-active: #9BD2F6;
    background-color: var(--c-navy);
    color: var(--c-body);
}

/* ------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------ */
html {
    -webkit-text-size-adjust: 100%;
}

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

body.site {
    margin: 0;
    background-color: var(--c-bg);
    color: var(--c-body);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

[hidden] { display: none !important; }

[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

[tabindex="-1"]:focus { outline: none; }

::selection { background: var(--c-accent-tint); color: var(--c-ink); }

:focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 3px;
}

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

.skip-link {
    position: absolute;
    left: var(--gutter);
    top: -100px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--c-navy);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 500;
    border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

/* Language switching */
html[lang="en"] .lang-nl { display: none !important; }
html[lang="nl"] .lang-en { display: none !important; }

/* ------------------------------------------------------------------
   3. Layout
   ------------------------------------------------------------------ */
.container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--rule { border-top: 1px solid var(--c-line); }
.section--surface {
    background-color: var(--c-surface);
    --c-line: #D5DFE9;
}

.divider-top {
    margin-top: clamp(3rem, 2rem + 3vw, 4.5rem);
    padding-top: clamp(2.5rem, 1.8rem + 2vw, 3.5rem);
    border-top: 1px solid var(--c-line);
}

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 1.6rem + 2.8vw, 4rem); }
.section-head > * + * { margin-top: 1rem; }

.rule { border: 0; border-top: 1px solid var(--c-line); margin: 0; }

.measure { max-width: 65ch; }
.measure-sm { max-width: 52ch; }

.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.5rem; }

/* Raised content surface */
.panel {
    background-color: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.panel--navy {
    background-color: var(--c-navy);
    border-color: var(--c-navy);
    box-shadow: var(--shadow-md);
}

/* ------------------------------------------------------------------
   4. Typography
   ------------------------------------------------------------------ */
.display,
.h1,
.h2,
.h3,
.h4 {
    color: var(--c-ink);
    font-weight: 500;
    text-wrap: balance;
}

.display {
    font-size: var(--fs-display);
    line-height: 1.07;
    letter-spacing: -0.03em;
}

.h1 {
    font-size: var(--fs-h1);
    line-height: 1.08;
    letter-spacing: -0.026em;
}

.h2 {
    font-size: var(--fs-h2);
    line-height: 1.14;
    letter-spacing: -0.022em;
}

.h3 {
    font-size: var(--fs-h3);
    line-height: 1.35;
    letter-spacing: -0.01em;
    font-weight: 600;
}

.h4 {
    font-size: 1.0625rem;
    line-height: 1.45;
    font-weight: 600;
}

/* Sub-section heading: sits between .h2 and .h3 */
.h-sub {
    color: var(--c-ink);
    font-size: clamp(1.375rem, 1.18rem + 0.65vw, 1.75rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.016em;
    text-wrap: balance;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--c-accent);
}
.eyebrow::before {
    content: "";
    flex: 0 0 auto;
    width: 28px;
    height: 2px;
    background: var(--c-brand);
}

.lead {
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--c-body);
    text-wrap: pretty;
}

.statement {
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: var(--c-ink);
    font-weight: 400;
    letter-spacing: -0.005em;
    text-wrap: pretty;
}

.pull {
    font-size: var(--fs-pull);
    line-height: 1.45;
    color: var(--c-ink);
    font-weight: 400;
    letter-spacing: -0.012em;
    text-wrap: pretty;
}

blockquote.pull,
.quote {
    border-left: 3px solid var(--c-brand);
    padding-left: clamp(1rem, 0.6rem + 1.2vw, 1.5rem);
}

.quote {
    color: var(--c-ink);
    font-size: var(--fs-lead);
    line-height: 1.55;
    text-wrap: pretty;
}

.text-sm { font-size: var(--fs-sm); line-height: 1.6; }
.nowrap { white-space: nowrap; }
.text-muted { color: var(--c-muted); }
.text-ink { color: var(--c-ink); }
/* Tailwind generates its own .text-muted/.text-ink from the shared config and loads after this
   file; inside token-scoped surfaces the more specific selector keeps the surface's colours. */
.section--navy .text-muted,
.panel--navy .text-muted { color: var(--c-muted); }
.section--navy .text-ink,
.panel--navy .text-ink { color: var(--c-ink); }

.prose { text-wrap: pretty; }
.prose > * + * { margin-top: 1rem; }
.prose strong { color: var(--c-ink); font-weight: 600; }

.text-link {
    color: var(--c-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(58, 90, 159, 0.4);
    transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
}
.text-link:hover {
    color: var(--c-accent-hover);
    text-decoration-color: currentColor;
}

/* ------------------------------------------------------------------
   5. Icons
   ------------------------------------------------------------------ */
.icon {
    display: inline-block;
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}

/* ------------------------------------------------------------------
   6. Buttons & links
   ------------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.btn .icon { transition: transform 220ms var(--ease); }
.btn:hover .icon-arrow { transform: translateX(3px); }

.btn.btn--primary {
    background-color: var(--btn-bg);
    border-color: var(--btn-bg);
    color: var(--btn-fg);
}
.btn.btn--primary:hover { background-color: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.btn.btn--primary:active { background-color: var(--btn-bg-active); border-color: var(--btn-bg-active); }

.btn.btn--secondary {
    background-color: #fff;
    border-color: var(--c-line-strong);
    color: var(--c-navy);
}
.btn.btn--secondary:hover { border-color: var(--c-navy); }

.btn.btn--sm {
    min-height: 40px;
    padding: 0.5rem 1.125rem;
    font-size: var(--fs-sm);
}

.btn.btn--block { width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] { cursor: progress; opacity: 0.85; }

.btn__busy { display: none; }
.btn[aria-busy="true"] .btn__idle { display: none; }
.btn[aria-busy="true"] .btn__busy { display: inline-flex; align-items: center; gap: 0.625rem; }

.spinner {
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
    color: var(--c-ink);
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    transition: color var(--dur-fast) ease;
}
.link-arrow .icon { transition: transform 220ms var(--ease); color: var(--c-accent); }
.link-arrow:hover { color: var(--c-accent); }
.link-arrow:hover .icon-arrow { transform: translateX(3px); }
.link-arrow:hover .icon-arrow-down { transform: translateY(2px); }

.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.75rem;
}

/* ------------------------------------------------------------------
   7. Header & navigation
   ------------------------------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: #fff;
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 1px 0 rgba(13, 35, 58, 0.02), 0 10px 24px -22px rgba(13, 35, 58, 0.35);
}

.no-js .site-header { position: relative; }

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
}
.brand img { height: 38px; width: auto; }

@media (min-width: 1024px) {
    .brand img { height: 48px; }
}

.header-tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nav {
    display: none;
    align-items: center;
    gap: 2rem;
}

.nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--c-body);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-fast) ease;
}
.nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 2px;
    background: var(--c-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms var(--ease);
}
.nav__link:hover { color: var(--c-navy); }
.nav__link:hover::after { transform: scaleX(1); }

.lang-switch {
    display: inline-flex;
    align-items: center;
    margin-left: 0.25rem;
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
}

.lang-switch__sep { color: var(--c-line-strong); padding-inline: 1px; }

.lang-switch button {
    min-width: 40px;
    min-height: 40px;
    padding: 0 0.5rem;
    color: var(--c-muted);
    background: none;
    border: 0;
    border-radius: var(--radius-sm);
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    transition: color var(--dur-fast) ease;
}
.lang-switch button:hover { color: var(--c-navy); }

html[lang="nl"] .lang-btn-nl,
html[lang="en"] .lang-btn-en {
    color: var(--c-navy);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--c-brand);
    text-underline-offset: 6px;
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--c-navy);
    background: #fff;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--dur-fast) ease;
}
.menu-toggle:hover { border-color: var(--c-navy); }
.menu-toggle .icon { width: 20px; height: 20px; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: inline-block; }
.no-js .menu-toggle { display: none; }

.mobile-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 18px 32px -24px rgba(13, 35, 58, 0.4);
}
.js .mobile-menu:not(.is-open) { display: none; }
.no-js .mobile-menu { position: static; box-shadow: none; }

.mobile-menu__inner {
    display: flex;
    flex-direction: column;
    padding-block: 0.5rem 1.5rem;
}

.mobile-menu__link {
    display: flex;
    align-items: center;
    min-height: 52px;
    color: var(--c-navy);
    font-size: 1.0625rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--c-line);
}
.mobile-menu__link:hover { color: var(--c-accent); }

.mobile-menu .btn { margin-top: 1.25rem; }

@media (min-width: 1024px) {
    .nav { display: flex; }
    .menu-toggle,
    .mobile-menu { display: none !important; }
}

@media (pointer: coarse) {
    .lang-switch button { min-width: 44px; min-height: 44px; }
}

/* ------------------------------------------------------------------
   8. Hero
   ------------------------------------------------------------------ */
.hero {
    padding-top: clamp(3rem, 1.4rem + 5vw, 6rem);
    padding-bottom: clamp(3.5rem, 1.8rem + 5.2vw, 6.5rem);
    border-bottom: 1px solid var(--c-line);
}

.hero__grid {
    display: grid;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .hero__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
        gap: 5rem;
        align-items: end;
    }
    .hero__grid--center { align-items: center; }
}

.hero__intro > .eyebrow + * { margin-top: 1.25rem; }
.hero__intro > .display + *,
.hero__intro > .h1 + * { margin-top: 1.5rem; }
.hero__intro > .statement + p { margin-top: 1rem; }
.hero__intro > .actions { margin-top: 2.25rem; }

.crumb {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 32px;
    color: var(--c-muted);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--dur-fast) ease;
}
.crumb .icon { transition: transform 220ms var(--ease); }
.crumb:hover { color: var(--c-navy); }
.crumb:hover .icon { transform: translateX(-3px); }

.hero__intro > .crumb + * { margin-top: 1.5rem; }

/* Secondary hero column */
.aside-note {
    border-top: 1px solid var(--c-line);
    padding-top: 1.5rem;
}

@media (min-width: 1024px) {
    .aside-note {
        border-top: 0;
        border-left: 1px solid var(--c-line);
        padding-top: 0;
        padding-left: 2rem;
    }
}

.aside-note__title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--c-ink);
    margin-bottom: 1rem;
}

.aside-note p { font-size: var(--fs-sm); line-height: 1.65; }
.aside-note p + p { margin-top: 0.875rem; }
.aside-note .aside-note__close { color: var(--c-ink); font-weight: 500; }
.aside-note .aside-note__lead { display: block; margin-bottom: 0.125rem; color: var(--c-ink); font-weight: 600; }

.aside-points > div { padding-block: 0.875rem; border-top: 1px solid var(--c-line); }
.aside-points > div:first-child { padding-top: 0; border-top: 0; }
.aside-points dt { color: var(--c-ink); font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; }
.aside-points dd { margin-top: 0.125rem; font-size: var(--fs-sm); line-height: 1.6; }
.aside-note .aside-note__foot {
    margin-top: 0.5rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--c-line);
    color: var(--c-muted);
    font-size: var(--fs-xs);
    line-height: 1.6;
}

/* Abstract supporting visual: layered planes, decorative only */
.hero__visual {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: clamp(250px, 56vw, 380px);
    background-color: var(--c-navy);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.hero__visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Hero with a supporting visual (any page): headline left, visual right */
.hero--visual {
    padding-top: clamp(2.5rem, 1.2rem + 4vw, 5rem);
    padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
    border-bottom: 0;
}

.hero--visual .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "visual";
    gap: 2.5rem;
    align-items: center;
}
.hero--visual .hero__intro { grid-area: intro; }
.hero--visual .hero__visual { grid-area: visual; }

@media (min-width: 1024px) {
    .hero--visual .hero__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        grid-template-areas: "intro visual";
        gap: 4rem 5rem;
    }
    .hero--visual .hero__visual {
        height: auto;
        aspect-ratio: 520 / 600;
    }
}

/* Homepage hero: adds the capability strip beneath headline and visual */
.hero--home .hero__grid { grid-template-areas: "intro" "visual" "aside"; }
.hero--home .aside-note { grid-area: aside; }

@media (min-width: 1024px) {
    .hero--home .hero__grid { grid-template-areas: "intro visual" "aside aside"; }
    .hero--home .aside-note {
        display: grid;
        grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 3fr));
        grid-template-rows: auto 1fr;
        column-gap: 0;
        margin-top: 0.5rem;
        padding: 2rem 0 0;
        border-left: 0;
        border-top: 2px solid var(--c-navy);
    }
    .hero--home .aside-note__title { grid-column: 1; grid-row: 1; margin: 0; padding-right: 2rem; }
    .hero--home .aside-note .aside-note__foot {
        grid-column: 1;
        grid-row: 2;
        margin-top: 0.75rem;
        padding: 0 2rem 0 0;
        border-top: 0;
    }
    .hero--home .aside-points { display: contents; }
    .hero--home .aside-points > div {
        grid-row: 1 / span 2;
        padding: 0 1.75rem;
        border-top: 0;
        border-left: 1px solid var(--c-line);
    }
    .hero--home .aside-points > div:first-child { padding-top: 0; }
    .hero--home .aside-points > div:nth-child(1) { grid-column: 2; }
    .hero--home .aside-points > div:nth-child(2) { grid-column: 3; }
    .hero--home .aside-points > div:nth-child(3) { grid-column: 4; }
    .hero--home .aside-points dt { font-size: 1.0625rem; }
    .hero--home .aside-points dd { margin-top: 0.375rem; }
}

/* ------------------------------------------------------------------
   9. Content components
   ------------------------------------------------------------------ */

/* Key facts / definition rows */
.facts { display: grid; }
.facts > div {
    display: grid;
    gap: 0.25rem;
    padding-block: 1rem;
    border-top: 1px solid var(--c-line);
}
.facts > div:last-child { border-bottom: 1px solid var(--c-line); }
.facts dt { font-size: var(--fs-sm); color: var(--c-muted); }
.facts dd { color: var(--c-ink); font-weight: 500; line-height: 1.5; }

/* Topic rows: title + text, separated by thin rules */
.rows > * {
    padding-block: 1.5rem;
    border-top: 1px solid var(--c-line);
}
.rows > *:last-child { border-bottom: 1px solid var(--c-line); }
.rows--flush > *:last-child { border-bottom: 0; }

.row-item { display: grid; gap: 0.375rem; }

@media (min-width: 768px) {
    .row-item--split {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 2rem;
        align-items: baseline;
    }
}

.row-item__title { color: var(--c-ink); font-weight: 600; font-size: 1.0625rem; line-height: 1.45; }

/* Numbered rows (ordered topic lists): numeral comes from a CSS counter */
.rows--numbered { counter-reset: row; }
.rows--numbered > .row-item {
    counter-increment: row;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    column-gap: 0.5rem;
}
.rows--numbered > .row-item::before {
    content: counter(row, decimal-leading-zero);
    grid-row: 1 / span 2;
    padding-top: 0.2em;
    color: var(--c-accent);
    font-size: var(--fs-sm);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.rows--numbered > .row-item > * { grid-column: 2; }

/* Columns with a top rule */
.columns {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .columns--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; }
    .columns--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; }
}

@media (min-width: 1024px) {
    .columns--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.columns.columns--compact { gap: 2rem; }
@media (min-width: 640px) {
    .columns.columns--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.column {
    border-top: 2px solid var(--c-ink);
    padding-top: 1.5rem;
}
.column > * + * { margin-top: 0.75rem; }

.index-num {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Lists */
.list-dash > li {
    position: relative;
    padding-left: 1.5rem;
}
.list-dash > li + li { margin-top: 0.625rem; }
.list-dash > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.82em;
    width: 0.75rem;
    height: 2px;
    background: var(--c-brand);
}

.list-ruled > li {
    position: relative;
    padding: 0.875rem 0 0.875rem 1.5rem;
    border-top: 1px solid var(--c-line);
    color: var(--c-ink);
}
.list-ruled > li:last-child { border-bottom: 1px solid var(--c-line); }
.list-ruled > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(0.875rem + 0.82em);
    width: 0.75rem;
    height: 2px;
    background: var(--c-brand);
}

/* Ruled list laid out in columns (roles, results) */
@media (min-width: 640px) {
    .list-ruled--cols {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 2.5rem;
        border-bottom: 1px solid var(--c-line);
    }
    .list-ruled--cols > li:last-child { border-bottom: 0; }
}

@media (min-width: 1024px) {
    .list-ruled--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.list-mark > li {
    position: relative;
    padding-left: 1.75rem;
    color: var(--c-ink);
}
.list-mark > li + li { margin-top: 0.625rem; }
.list-mark > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.3em;
    width: 1rem;
    height: 1rem;
    -webkit-mask: var(--mark) center / contain no-repeat;
    mask: var(--mark) center / contain no-repeat;
}
.list-mark--yes > li::before {
    --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-color: var(--c-accent);
}
.list-mark--no > li::before {
    --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-color: var(--c-danger);
}

/* Terms (inline chips for frameworks and roles) */
.terms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.terms > li {
    padding: 0.3125rem 0.75rem;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
    background-color: #fff;
    color: var(--c-ink);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.4;
}
.terms--lg { gap: 0.75rem; }
.terms--lg > li {
    padding: 0.625rem 1.125rem;
    border-color: var(--c-navy);
    font-size: 1.0625rem;
    letter-spacing: -0.005em;
}

/* Clients: plain-text names (no logos), each marked with a brand-blue bar */
.clients {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2.5rem;
}
.clients > li {
    padding-left: 0.875rem;
    border-left: 2px solid var(--c-brand);
    color: var(--c-ink);
    font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.35;
}

/* Client logos: shown unaltered (no filters, no recolouring); heights are set per logo for equal optical weight */
.clients--logos { align-items: center; gap: 1.5rem 3rem; }
.clients--logos > li {
    display: flex;
    align-items: center;
    padding-left: 0;
    border-left: 0;
}
.clients__logo {
    display: block;
    width: auto;
    height: calc(var(--logo-h, 40px) * 0.85);
    max-width: 100%;
}
@media (min-width: 640px) {
    .clients__logo { height: var(--logo-h, 40px); }
}

/* Steps */
.steps { counter-reset: step; }
.step {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0 1rem;
    padding-block: 1.75rem;
    border-top: 1px solid var(--c-line);
}
.step:last-child { border-bottom: 1px solid var(--c-line); }
.step__num {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--c-accent);
    font-variant-numeric: tabular-nums;
    line-height: 1.75;
}
.step__body > * + * { margin-top: 0.5rem; }

@media (min-width: 768px) {
    .step { grid-template-columns: 5rem minmax(0, 4fr) minmax(0, 7fr); gap: 0 2rem; }
    .step__body { display: contents; }
    .step__body > * + * { margin-top: 0; }
}

/* Price */
.price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    color: var(--c-ink);
}
.price__amount {
    font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.price__note { font-size: var(--fs-sm); color: var(--c-muted); }

/* Approach: strategic decisions connected to operational execution */
.approach__axis {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--c-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.approach__axis-line {
    position: relative;
    flex: 1 1 auto;
    height: 1px;
    background: var(--c-line-strong);
}
.approach__axis-line::after {
    content: "";
    position: absolute;
    right: 0;
    top: -3px;
    width: 7px;
    height: 7px;
    border-top: 1px solid var(--c-slate);
    border-right: 1px solid var(--c-slate);
    transform: rotate(45deg);
    transform-origin: center;
}

.approach__list {
    position: relative;
    display: grid;
    gap: 0;
    margin-top: 1.75rem;
    padding-left: 2rem;
}
.approach__list::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 0.75rem;
    bottom: 0.75rem;
    width: 1px;
    background: var(--c-line-strong);
}
.approach__item {
    position: relative;
    padding-block: 0.625rem;
    color: var(--c-ink);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.4;
}
.approach__item::before {
    content: "";
    position: absolute;
    left: calc(-2rem + 0px);
    top: 1.05rem;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--c-navy);
    box-shadow: 0 0 0 4px #fff;
}
.approach__item:first-child::before,
.approach__item:last-child::before { background: var(--c-brand); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--c-navy); }

@media (min-width: 768px) {
    .approach__list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        margin-top: 2.25rem;
        padding-left: 0;
    }
    .approach__list::before {
        left: 0;
        right: 0;
        top: 5px;
        bottom: auto;
        width: auto;
        height: 1px;
    }
    .approach__item { padding: 1.75rem 1.5rem 0 0; }
    .approach__item::before { left: 0; top: 0; }
}

/* Profile: principal consultant statement */
.profile {
    display: grid;
    gap: 0.75rem 1.5rem;
    padding: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
    background-color: var(--c-navy-2);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-lg);
}
.profile__label {
    color: var(--c-accent);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.profile__role {
    color: var(--c-ink);
    font-size: var(--fs-lead);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.012em;
}
.profile__text { color: var(--c-body); max-width: 56ch; }
.profile__body { display: grid; gap: 0.75rem; align-content: start; min-width: 0; }

/* Owner portrait: photo on a solid Soft White background, image left / text right from 640px */
.profile--photo { align-items: start; }
.profile__figure { margin: 0; width: 7.5rem; }
.profile__photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: var(--c-soft);
    border-radius: var(--radius);
}
.profile__caption {
    margin-top: 0.5rem;
    color: var(--c-muted);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.04em;
}
@media (min-width: 640px) {
    .profile--photo { grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: 2rem; }
    .profile__figure { width: auto; }
}

/* Compact owner note (Security Reality Check panel) */
.owner {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
.owner > p { margin: 0; }
.owner__photo {
    display: block;
    width: 4.5rem;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: var(--c-soft);
    border-radius: var(--radius);
}

/* ------------------------------------------------------------------
   10. Service index (homepage)
   ------------------------------------------------------------------ */
.services { counter-reset: svc; }

.service-group {
    display: grid;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid var(--c-line);
    border-top: 2px solid var(--c-navy);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    counter-increment: svc;
}
.service-group + .service-group { margin-top: 1.5rem; }

.service-group__title {
    padding: 1.5rem 1.5rem 0;
    color: var(--c-ink);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.012em;
}
.service-group__title::before {
    content: counter(svc, decimal-leading-zero);
    display: block;
    margin-bottom: 0.5rem;
    color: var(--c-accent);
    font-size: var(--fs-sm);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

@media (min-width: 1024px) {
    .service-group {
        grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    }
    .service-group__title {
        padding: 2rem 2rem 2rem 2rem;
        border-right: 1px solid var(--c-line);
    }
}

.service-list > li + li { border-top: 1px solid var(--c-line); }
.service-list > li:first-child { margin-top: 0.5rem; }
@media (min-width: 1024px) {
    .service-list > li:first-child { margin-top: 0; }
}

.service-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.375rem 1.5rem;
    padding: 1.5rem;
    color: inherit;
    text-decoration: none;
    transition: background-color var(--dur-fast) ease;
}
.service-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--c-brand);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 240ms var(--ease);
}

.service-row__name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    color: var(--c-ink);
    font-size: 1.1875rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.01em;
    transition: color var(--dur-fast) ease;
}

.service-row__meta {
    display: inline-block;
    padding: 0.0625rem 0.5rem;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--radius-sm);
    color: var(--c-muted);
    font-size: var(--fs-xs);
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1.6;
}

.service-row__desc {
    grid-column: 1 / 2;
    color: var(--c-body);
    font-size: 1rem;
    line-height: 1.6;
}

.service-row__arrow {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    display: inline-flex;
    color: var(--c-navy);
    transition: transform 240ms var(--ease), color var(--dur-fast) ease;
}
.service-row__arrow .icon { width: 20px; height: 20px; }

.service-row:hover { background-color: var(--c-soft); }
.service-row:hover::before { transform: scaleY(1); }
.service-row:hover .service-row__name,
.service-row:hover .service-row__arrow { color: var(--c-accent); }
.service-row:hover .service-row__arrow { transform: translateX(4px); }
.service-row:focus-visible { outline-offset: -3px; }

@media (min-width: 768px) {
    .service-row {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) auto;
        gap: 2rem;
        align-items: baseline;
        padding: 1.75rem 2rem;
    }
    .service-row__desc { grid-column: 2; }
    .service-row__arrow { grid-column: 3; grid-row: 1; align-self: center; }
    .service-row__name { flex-direction: column; align-items: flex-start; gap: 0.375rem; }
}

/* ------------------------------------------------------------------
   11. Forms & notices
   ------------------------------------------------------------------ */
.form-panel {
    background-color: #fff;
    border: 1px solid var(--c-line);
    border-top: 3px solid var(--c-navy);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.form-panel.form-panel--white { background-color: #fff; }

.form-panel__intro { color: var(--c-body); }
.form-panel__intro + .btn { margin-top: 1.5rem; }

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

@media (min-width: 640px) {
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.25rem; }
    .form-grid .field--full { grid-column: 1 / -1; }
}

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

.field__label {
    color: var(--c-ink);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.4;
}
.field__req { color: var(--c-muted); font-weight: 400; }

.field__control {
    width: 100%;
    min-height: 48px;
    padding: 0.625rem 0.875rem;
    background-color: #fff;
    border: 1px solid var(--c-field);
    border-radius: var(--radius);
    color: var(--c-navy);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.field__control:hover { border-color: var(--c-navy); }
.field__control:focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 0;
    border-color: var(--c-focus);
}
.field__control:user-invalid {
    border-color: var(--c-danger);
    box-shadow: inset 3px 0 0 var(--c-danger);
}

select.field__control {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%230D233A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 16px 16px;
    cursor: pointer;
}

.form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 1.75rem;
}
.form-footer__note { font-size: var(--fs-xs); color: var(--c-muted); }

/* Collapsible form panel (progressive: open by default without JS) */
.js [data-form-panel]:not(.is-open) { display: none; }
.no-js [data-form-open] { display: none; }
[data-form-panel].is-open { animation: panel-in 440ms var(--ease) both; }
.form-panel__intro ~ [data-form-panel] { margin-top: 1.75rem; }

@keyframes panel-in {
    from { opacity: 0; transform: translate3d(0, 12px, 0); }
    to { opacity: 1; transform: none; }
}

/* Feedback notices: info (sending), success, error. Icon comes from a mask. */
.notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-left: 3px solid var(--c-secondary);
    border-radius: var(--radius-sm);
    background-color: var(--c-info-tint);
    color: var(--c-navy);
    font-size: var(--fs-sm);
    line-height: 1.55;
}
.notice::before {
    content: "";
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.1em;
    background-color: currentColor;
    -webkit-mask: var(--notice-icon) center / contain no-repeat;
    mask: var(--notice-icon) center / contain no-repeat;
    --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 6v4.5l3 1.8' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='10' cy='10' r='7.25' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E");
}
.notice + form,
[data-form-feedback]:not(:empty) { margin-bottom: 1.5rem; }
.notice--success { background-color: var(--c-success-tint); border-left-color: var(--c-success); color: var(--c-success-ink); }
.notice--success::before {
    --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.25' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M6.5 10.3l2.4 2.4 4.6-4.9' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.notice--error { background-color: var(--c-danger-tint); border-left-color: var(--c-danger); color: var(--c-danger-ink); }
.notice--error::before {
    --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.75l8 14H2l8-14z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M10 8v3.5M10 14.1v.1' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.notice:focus { outline: none; }

/* ------------------------------------------------------------------
   12. Contact block
   ------------------------------------------------------------------ */
.contact-details { display: grid; gap: 0; }
.contact-details > div {
    display: grid;
    gap: 0.125rem;
    padding-block: 0.875rem;
    border-top: 1px solid var(--c-line);
}
.contact-details > div:last-child { border-bottom: 1px solid var(--c-line); }
.contact-details dt { font-size: var(--fs-sm); color: var(--c-muted); }
.contact-details dd a {
    color: var(--c-navy);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--dur-fast) ease;
}
.contact-details dd a:hover { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ------------------------------------------------------------------
   13. Footer
   ------------------------------------------------------------------ */
.site-footer {
    background-color: #fff;
    border-top: 1px solid var(--c-line);
    padding-top: clamp(3rem, 2rem + 3vw, 4.5rem);
    padding-bottom: 2rem;
}

.footer-grid {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .footer-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; }
}

@media (min-width: 1024px) {
    .footer-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); }
}

.footer-brand img { height: 44px; width: auto; }
.footer-tagline { margin-top: 1.25rem; font-size: var(--fs-sm); color: var(--c-body); max-width: 36ch; }

.footer-title {
    margin-bottom: 0.75rem;
    color: var(--c-navy);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.footer-links { display: grid; }
@media (min-width: 640px) and (max-width: 1023px) {
    .footer-links--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
}

.footer-links a,
.footer-links span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: var(--c-body);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: color var(--dur-fast) ease;
}
.footer-links a:hover { color: var(--c-navy); text-decoration: underline; text-decoration-color: var(--c-brand); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.footer-links a[aria-current="page"] { color: var(--c-navy); font-weight: 500; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem);
    padding-top: 1.5rem;
    border-top: 1px solid var(--c-line);
    color: var(--c-muted);
    font-size: var(--fs-xs);
}

/* ------------------------------------------------------------------
   14. Scroll reveal (progressive enhancement)
   Content is only hidden once site.js has confirmed IntersectionObserver
   works and added .reveal-ready to <html>.
   ------------------------------------------------------------------ */
.reveal-ready .reveal {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
        opacity var(--dur-reveal) var(--ease),
        transform var(--dur-reveal) var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
}

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

/* ------------------------------------------------------------------
   15. Motion & print preferences
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
    .reveal-ready .reveal { opacity: 1; transform: none; }
    .spinner { border-right-color: currentColor; opacity: 0.6; }
}

@media print {
    .site-header,
    .mobile-menu { position: static; }
    .reveal { opacity: 1 !important; transform: none !important; }
    .hero__visual { display: none; }
}

/* ------------------------------------------------------------------
   16. Fallback when the Tailwind CDN is unreachable
   Corporate proxies and firewalls (common at the regulated organisations
   SITSC serves) often block third-party script hosts. These rules mirror
   the few Tailwind utilities and preflight resets the pages rely on, at
   the same (zero-extra) specificity, so layout stays intact without the
   CDN. When the CDN does load, its identical declarations simply apply on
   top. Do not add visual styling here.
   ------------------------------------------------------------------ */
:where(body.site) *,
:where(body.site) ::before,
:where(body.site) ::after { box-sizing: border-box; }

:where(body.site) :is(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; }
:where(body.site) :is(h1, h2, h3, h4, h5, h6, p, blockquote, dl, dd, figure, ol, ul) { margin: 0; }
:where(body.site) :is(ol, ul) { list-style: none; padding: 0; }
:where(body.site) a { color: inherit; text-decoration: inherit; }
:where(body.site) :is(img, svg) { display: block; }
:where(body.site) img { max-width: 100%; height: auto; }
:where(body.site) :is(button, input, select, textarea) { font: inherit; color: inherit; margin: 0; }
:where(body.site) button { background-color: transparent; padding: 0; cursor: pointer; }

.grid { display: grid; }
.gap-x-16 { column-gap: 4rem; }
.gap-y-8 { row-gap: 2rem; }
.gap-y-10 { row-gap: 2.5rem; }
.gap-y-12 { row-gap: 3rem; }
.gap-y-14 { row-gap: 3.5rem; }
.gap-y-16 { row-gap: 4rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; }
.font-medium { font-weight: 500; }

@media (min-width: 1024px) {
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .lg\:col-span-4 { grid-column: span 4 / span 4; }
    .lg\:col-span-5 { grid-column: span 5 / span 5; }
    .lg\:col-span-6 { grid-column: span 6 / span 6; }
    .lg\:col-span-7 { grid-column: span 7 / span 7; }
    .lg\:col-span-8 { grid-column: span 8 / span 8; }
    .lg\:col-start-6 { grid-column-start: 6; }
    .lg\:col-start-7 { grid-column-start: 7; }
    .lg\:col-start-8 { grid-column-start: 8; }
}