/* 1. Reset and base */
*,
*::before,
*::after { box-sizing: border-box; }

html {
    color-scheme: light;
    scroll-behavior: smooth;
    text-size-adjust: 100%;
}

body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
textarea { resize: vertical; }
[hidden] { display: none !important; }

/* 2. Design tokens */
:root {
    --color-brand: #ed1c24;
    --color-primary: #a91924;
    --color-primary-dark: #7d1118;
    --color-primary-active: #680c12;
    --color-primary-soft: #fcedee;
    --color-accent: #2f6f4e;
    --color-accent-dark: #24583e;
    --color-accent-soft: #eaf3ee;
    --color-logo-gray: #b7c4c4;
    --color-text: #24282a;
    --color-text-muted: #596164;
    --color-background: #ffffff;
    --color-surface: #f4f7f7;
    --color-surface-strong: #e7ecec;
    --color-border: #d2d9d9;
    --color-border-strong: #aeb9b9;
    --color-footer: #202526;
    --color-footer-muted: #c9d0d0;
    --color-focus: #155eef;
    --color-error: #b42318;
    --color-error-soft: #fef3f2;
    --color-success: #1e6243;
    --color-white: #ffffff;

    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-size-xs: 0.8125rem;
    --font-size-sm: 0.9375rem;
    --font-size-base: 1rem;
    --font-size-lead: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
    --font-size-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.625rem);
    --font-size-h2: clamp(1.75rem, 1.4rem + 1.45vw, 2.75rem);
    --font-size-h1: clamp(2.35rem, 1.75rem + 3vw, 4.75rem);
    --line-height-body: 1.65;
    --line-height-heading: 1.1;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-section: clamp(3.75rem, 8vw, 7rem);

    --container: 76rem;
    --container-wide: 90rem;
    --container-narrow: 54rem;
    --gutter: clamp(1rem, 3vw, 2rem);

    --radius-small: 0.375rem;
    --radius-medium: 0.75rem;
    --radius-large: 1.25rem;
    --radius-pill: 999px;

    --shadow-small: 0 0.35rem 1.15rem rgb(29 37 38 / 8%);
    --shadow-medium: 0 1rem 2.5rem rgb(29 37 38 / 12%);
    --shadow-header: 0 0.35rem 1.5rem rgb(29 37 38 / 9%);
    --transition-fast: 160ms ease;
    --transition-base: 240ms ease;
}

/* 3. Typography */
body {
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    text-rendering: optimizeLegibility;
}

::selection { background: var(--color-primary); color: var(--color-white); }

h1, h2, h3, h4 {
    color: var(--color-text);
    font-weight: 780;
    line-height: var(--line-height-heading);
    letter-spacing: -0.025em;
    text-wrap: balance;
}

h1 { max-width: 18ch; font-size: var(--font-size-h1); letter-spacing: -0.045em; }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: 1.125rem; }
p, li { text-wrap: pretty; }
strong { font-weight: 750; }
small { font-size: var(--font-size-xs); }
code { font-family: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace; font-size: 0.875em; }

a {
    color: var(--color-primary);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
}

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

:focus-visible {
    outline: 0.1875rem solid var(--color-focus);
    outline-offset: 0.1875rem;
}

/* 4. Layout */
.container,
.container--wide,
.container--narrow {
    --container-width: var(--container);

    width: min(calc(100% - (var(--gutter) * 2)), var(--container-width));
    margin-inline: auto;
}

.container--wide { --container-width: var(--container-wide); }
.container--narrow { --container-width: var(--container-narrow); }
main { min-height: 45vh; }
.section { padding-block: var(--space-section); }
.section--surface { border-block: 0.0625rem solid var(--color-border); background: var(--color-surface); }
.grid { display: grid; gap: var(--space-5); }
.grid--cards, .grid--benefits { grid-template-columns: minmax(0, 1fr); }
.component-block { margin-top: var(--space-7); }
.component-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.component-row > * { flex: 1 1 13rem; }
.flow { --flow-space: var(--space-4); }
.flow > * + * { margin-top: var(--flow-space); }

.skip-link {
    position: fixed;
    z-index: 1000;
    top: var(--space-2);
    left: var(--space-2);
    padding: var(--space-3) var(--space-4);
    transform: translateY(-160%);
    border-radius: var(--radius-small);
    background: var(--color-text);
    color: var(--color-white);
    font-weight: 700;
    text-decoration: none;
}

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

/* 5. Components */
.eyebrow {
    color: var(--color-primary);
    font-size: var(--font-size-xs);
    font-weight: 800;
    letter-spacing: 0.11em;
    line-height: 1.35;
    text-transform: uppercase;
}

.section-heading { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-heading .eyebrow + h2,
.section-heading .eyebrow + h3 { margin-top: var(--space-3); }
.section-heading__text { max-width: 65ch; margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-lead); }
.section-heading--centered { margin-inline: auto; text-align: center; }

.button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.72rem 1.2rem;
    border: 0.125rem solid transparent;
    border-radius: var(--radius-small);
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.button--primary { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-white); box-shadow: 0 0.35rem 0.9rem rgb(125 17 24 / 18%); }
.button--secondary { border-color: var(--color-primary); background: var(--color-white); color: var(--color-primary); }
.button--ghost { border-color: var(--color-border-strong); background: transparent; color: var(--color-text); }
.button--light { border-color: var(--color-white); background: var(--color-white); color: var(--color-primary-dark); }
.button:active { box-shadow: none; }
.button--primary:active { border-color: var(--color-primary-active); background: var(--color-primary-active); color: var(--color-white); }
.button--secondary:active { border-color: var(--color-primary-dark); background: var(--color-primary-soft); color: var(--color-primary-dark); }
.button--ghost:active { border-color: var(--color-text); background: var(--color-surface-strong); color: var(--color-text); }
.button--light:active { border-color: var(--color-border); background: var(--color-surface-strong); color: var(--color-primary-active); }
.button:disabled,
.button[aria-disabled="true"] { border-color: var(--color-border); background: var(--color-surface-strong); color: #687174; box-shadow: none; cursor: not-allowed; opacity: 1; }

.text-link { display: inline-flex; min-height: 2.75rem; align-items: center; gap: var(--space-2); font-weight: 750; }

.site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    border-bottom: 0.0625rem solid var(--color-border);
    background: rgb(255 255 255 / 98%);
    box-shadow: var(--shadow-header);
}

.site-header__inner {
    display: flex;
    min-height: 5rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding-block: 0.65rem;
}

.brand { display: inline-flex; width: min(11.5rem, 60vw); flex: 0 1 auto; flex-direction: column; justify-content: center; color: var(--color-text); text-decoration: none; }
.brand__logo { width: 100%; max-height: 3.45rem; object-fit: contain; object-position: left center; }
.brand__text { font-weight: 800; letter-spacing: 0.04em; }
.brand__tagline { color: var(--color-text-muted); font-size: var(--font-size-xs); }

.nav-toggle {
    display: inline-flex;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.5rem 0.7rem;
    border: 0.0625rem solid var(--color-border-strong);
    border-radius: var(--radius-small);
    background: var(--color-background);
    color: var(--color-text);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.nav-toggle__label { font-size: var(--font-size-sm); font-weight: 750; }
.nav-toggle__icon { display: grid; width: 1.25rem; gap: 0.25rem; }
.nav-toggle__icon span { display: block; width: 100%; height: 0.125rem; border-radius: var(--radius-pill); background: currentColor; transform-origin: center; transition: transform var(--transition-fast), opacity var(--transition-fast); }
.nav-toggle:active { border-color: var(--color-primary-dark); background: var(--color-primary-soft); color: var(--color-primary-dark); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:first-child { transform: translateY(0.375rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon span:last-child { transform: translateY(-0.375rem) rotate(-45deg); }

.site-nav { width: 100%; max-height: calc(100dvh - 5rem); overflow-y: auto; border-top: 0.0625rem solid var(--color-border); }
.js .site-nav[data-open="false"] { display: none; }
.site-nav__list, .site-nav__submenu, .site-footer__links, .breadcrumbs__list { list-style: none; }
.site-nav__list { display: grid; gap: var(--space-1); padding-block: var(--space-3) var(--space-4); }

.site-nav a,
.site-nav summary {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-small);
    color: var(--color-text);
    font-weight: 680;
    text-decoration: none;
}

.site-nav a[aria-current="page"],
.site-nav summary.is-current { background: var(--color-primary-soft); color: var(--color-primary-dark); font-weight: 780; }
.site-nav details[open] > summary { background: var(--color-surface); }
.site-nav details[open] > summary.is-current { background: var(--color-primary-soft); }
.site-nav summary { justify-content: space-between; gap: var(--space-2); cursor: pointer; list-style: none; }
.site-nav summary::-webkit-details-marker { display: none; }
.site-nav__chevron { width: 0.55rem; height: 0.55rem; flex: 0 0 auto; transform: translateY(-0.1rem) rotate(45deg); border-right: 0.125rem solid currentColor; border-bottom: 0.125rem solid currentColor; transition: transform var(--transition-fast); }
.site-nav details[open] .site-nav__chevron { transform: translateY(0.1rem) rotate(225deg); }
.site-nav__submenu { display: grid; gap: var(--space-1); padding: var(--space-1) 0 var(--space-3) var(--space-4); }
.site-nav__submenu a { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 580; }
.site-nav__cta { margin-top: var(--space-2); }
.site-nav__cta .button { justify-content: center; color: var(--color-white); }
.site-nav__cta .button[aria-current="page"] { background: var(--color-primary-dark); color: var(--color-white); }

.breadcrumbs { margin-bottom: var(--space-5); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumbs li:not(:last-child)::after { width: 0.38rem; height: 0.38rem; transform: rotate(-45deg); border-right: 0.0625rem solid var(--color-border-strong); border-bottom: 0.0625rem solid var(--color-border-strong); content: ""; }
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs [aria-current="page"] { color: var(--color-text); font-weight: 700; }

.page-intro {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(4rem, 10vw, 8rem);
    border-bottom: 0.0625rem solid var(--color-border);
    background: linear-gradient(120deg, rgb(244 247 247 / 100%) 0%, rgb(255 255 255 / 98%) 68%), var(--color-background);
}

.page-intro::before { position: absolute; z-index: -1; top: -9rem; right: -8rem; width: clamp(18rem, 42vw, 34rem); aspect-ratio: 1; border: clamp(1.2rem, 3vw, 2.25rem) solid rgb(183 196 196 / 28%); border-radius: 50%; content: ""; }
.page-intro::after { position: absolute; z-index: -1; top: 0; left: 0; width: clamp(4.5rem, 11vw, 9rem); height: 0.3rem; background: var(--color-brand); content: ""; }
.page-intro .eyebrow { margin-bottom: var(--space-4); }
.page-intro__summary { max-width: 62ch; margin-top: var(--space-5); color: var(--color-text-muted); font-size: var(--font-size-lead); }
.page-intro__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.page-intro__actions .button { flex: 1 1 13rem; }

.card {
    position: relative;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    padding: clamp(1.35rem, 3vw, 2rem);
    overflow: hidden;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-background);
    box-shadow: var(--shadow-small);
    transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.card::before { position: absolute; top: 0; left: 0; width: 4.5rem; height: 0.25rem; background: var(--color-brand); content: ""; }
.card__kicker { color: var(--color-primary); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.card__title { margin-top: var(--space-4); }
.card__link { color: var(--color-text); text-decoration: none; }
.card__link::after { position: absolute; inset: 0; content: ""; }
.card__text { margin-top: var(--space-4); color: var(--color-text-muted); }
.card__action { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-5); color: var(--color-primary); font-size: var(--font-size-sm); font-weight: 780; }
.card__action span { font-size: 1.2em; transition: transform var(--transition-fast); }
.card:focus-within { border-color: var(--color-focus); box-shadow: 0 0 0 0.1875rem rgb(21 94 239 / 18%), var(--shadow-small); }

.benefit-card { padding: var(--space-5); border-left: 0.1875rem solid var(--color-accent); background: var(--color-accent-soft); }
.benefit-card__number { display: block; margin-bottom: var(--space-4); color: var(--color-accent-dark); font-size: var(--font-size-xs); font-weight: 850; letter-spacing: 0.1em; }
.benefit-card h3 { font-size: 1.25rem; }
.benefit-card p { margin-top: var(--space-3); color: var(--color-text-muted); }

.form-card { padding: clamp(1.25rem, 4vw, 2.5rem); border: 0.0625rem solid var(--color-border); border-radius: var(--radius-large); background: var(--color-background); box-shadow: var(--shadow-small); }
.form-grid { display: grid; gap: var(--space-5); }
.form-field { display: grid; align-content: start; gap: var(--space-2); }
.form-field label, .form-legend { color: var(--color-text); font-size: var(--font-size-sm); font-weight: 750; }
.field-optional { margin-left: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 500; }

input,
select,
textarea {
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 0.8rem;
    border: 0.0625rem solid var(--color-border-strong);
    border-radius: var(--radius-small);
    background: var(--color-background);
    color: var(--color-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}

textarea { min-height: 8rem; }
input::placeholder, textarea::placeholder { color: #687174; opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 0.1875rem rgb(21 94 239 / 20%); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--color-error); background: var(--color-error-soft); }
.field-help, .field-error, .form-note { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.field-error { color: var(--color-error); font-weight: 650; }

.check-field { display: grid; grid-template-columns: 1.5rem 1fr; align-items: start; gap: var(--space-3); margin-top: var(--space-5); color: var(--color-text-muted); font-size: var(--font-size-sm); cursor: pointer; }
.check-field input { width: 1.5rem; min-height: 1.5rem; margin: 0; accent-color: var(--color-primary); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }

.contact-cta { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3.25rem, 7vw, 5rem); background: var(--color-primary-dark); color: var(--color-white); }
.contact-cta::after { position: absolute; z-index: -1; right: -6rem; bottom: -12rem; width: 24rem; aspect-ratio: 1; border: 2rem solid rgb(255 255 255 / 7%); border-radius: 50%; content: ""; }
.contact-cta__inner { display: grid; gap: var(--space-6); }
.contact-cta h2 { color: var(--color-white); }
.contact-cta p { max-width: 62ch; margin-top: var(--space-3); color: #f2dfe1; }

.site-footer { padding-top: clamp(3.5rem, 8vw, 6rem); background: var(--color-footer); color: var(--color-footer-muted); }
.site-footer__grid { display: grid; gap: var(--space-7) var(--space-6); }
.site-footer__about { max-width: 34rem; }
.site-footer__about p + p { margin-top: var(--space-2); }
.site-footer__brand { display: inline-flex; border-radius: var(--radius-small); color: var(--color-white); text-decoration: none; }
.site-footer__logo-surface { display: inline-flex; max-width: 12.5rem; padding: 0.35rem 0.55rem; border-radius: var(--radius-small); background: var(--color-white); }
.site-footer__logo-surface img { width: 100%; max-height: 3.65rem; object-fit: contain; }
.site-footer__tagline { color: var(--color-white); font-weight: 750; }
.site-footer__title { color: var(--color-white); font-size: var(--font-size-base); font-weight: 800; letter-spacing: 0.025em; }
.site-footer__links { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.site-footer a { color: var(--color-footer-muted); }
.site-footer address { max-width: 30ch; font-style: normal; }
.site-footer__legal { margin-top: var(--space-7); padding-block: var(--space-5); border-top: 0.0625rem solid rgb(255 255 255 / 16%); color: var(--color-footer-muted); font-size: var(--font-size-xs); }

/* Design-system demonstration */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--space-4); }
.swatch { display: flex; min-height: 8rem; flex-direction: column; justify-content: flex-end; gap: var(--space-1); padding: var(--space-4); border: 0.0625rem solid rgb(36 40 42 / 14%); border-radius: var(--radius-medium); font-weight: 750; }
.swatch code { font-weight: 550; }
.swatch--brand { background: var(--color-brand); color: #000000; }
.swatch--primary { background: var(--color-primary); color: var(--color-white); }
.swatch--accent { background: var(--color-accent); color: var(--color-white); }
.swatch--charcoal { background: var(--color-text); color: var(--color-white); }
.swatch--surface { background: var(--color-surface); color: var(--color-text); }
.foundation-grid { display: grid; gap: var(--space-6); }
.type-sample, .spacing-sample { padding: clamp(1.25rem, 3vw, 2rem); border: 0.0625rem solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-background); }
.type-sample h3, .spacing-sample h3 { margin-bottom: var(--space-5); }
.type-sample__display { max-width: 18ch; font-size: var(--font-size-h2); font-weight: 780; letter-spacing: -0.035em; line-height: var(--line-height-heading); }
.type-sample__lead { max-width: 52ch; color: var(--color-text-muted); font-size: var(--font-size-lead); }
.spacing-scale { display: grid; gap: var(--space-3); list-style: none; }
.spacing-scale li { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.spacing-scale span { display: block; width: var(--sample-width); height: 0.75rem; max-width: 100%; border-radius: var(--radius-pill); background: var(--color-accent); }
.spacing-scale__2 { --sample-width: var(--space-2); }
.spacing-scale__3 { --sample-width: var(--space-3); }
.spacing-scale__4 { --sample-width: var(--space-4); }
.spacing-scale__5 { --sample-width: var(--space-5); }
.spacing-scale__6 { --sample-width: var(--space-6); }
.spacing-scale__7 { --sample-width: var(--space-7); }

/* 6. Utilities */
.visually-hidden { position: absolute; width: 0.0625rem; height: 0.0625rem; padding: 0; margin: -0.0625rem; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent-dark); }

/* 7. Page foundations */
.home-hero { display: grid; min-height: min(48rem, calc(100svh - 5rem)); align-items: center; }
.home-hero h1 { max-width: 16ch; }
.home-hero__layout { display: grid; gap: var(--space-7); }
.home-hero__content { max-width: 49rem; }
.home-hero__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    padding: var(--space-3);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-large);
    background: rgb(255 255 255 / 88%);
    box-shadow: var(--shadow-small);
    list-style: none;
}
.home-hero__facts li { min-width: 0; padding: var(--space-4); border-left: 0.1875rem solid var(--color-brand); }
.home-hero__facts li:last-child { grid-column: 1 / -1; }
.home-hero__facts strong { display: block; color: var(--color-text); font-size: clamp(1.2rem, 1rem + 1vw, 1.75rem); line-height: 1.15; }
.home-hero__facts span { display: block; margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); line-height: 1.4; }

.home-intro { display: grid; gap: var(--space-6); }
.home-intro__heading { max-width: 40rem; }
.home-intro__heading h2 { margin-top: var(--space-3); }
.home-intro__content { max-width: 42rem; color: var(--color-text-muted); }
.home-intro__lead { color: var(--color-text); font-size: var(--font-size-lead); font-weight: 650; }

.home-area-grid { display: grid; gap: var(--space-5); }
.home-area-card {
    position: relative;
    display: flex;
    min-height: 100%;
    flex-direction: column;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    overflow: hidden;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-large);
    background: var(--color-background);
    box-shadow: var(--shadow-small);
}
.home-area-card::before { position: absolute; inset: 0 auto 0 0; width: 0.3rem; background: var(--color-primary); content: ""; }
.home-area-card--green { border-color: #bdd3c6; background: var(--color-accent-soft); }
.home-area-card--green::before { background: var(--color-accent); }
.home-area-card__kicker { color: var(--color-primary); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.home-area-card--green .home-area-card__kicker { color: var(--color-accent-dark); }
.home-area-card h3 { max-width: 25ch; margin-top: var(--space-3); }
.home-area-card > p:not(.home-area-card__kicker) { margin-top: var(--space-4); color: var(--color-text-muted); }
.home-area-card__list { display: grid; gap: var(--space-2); margin-block: var(--space-5); list-style: none; }
.home-area-card__list li { position: relative; padding-left: 1.45rem; }
.home-area-card__list li::before { position: absolute; top: 0.65em; left: 0.1rem; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-primary); content: ""; }
.home-area-card--green .home-area-card__list li::before { background: var(--color-accent); }
.home-area-card .text-link { align-self: flex-start; margin-top: auto; }

.home-section-action { display: flex; justify-content: center; margin-top: var(--space-7); }
.home-section-action .button { width: 100%; }

.home-history { border-block: 0.0625rem solid #394143; background: var(--color-footer); color: var(--color-footer-muted); }
.home-history__inner { display: grid; gap: var(--space-7); }
.home-history__stat { padding-left: var(--space-5); border-left: 0.35rem solid var(--color-brand); }
.home-history__stat strong { display: block; color: var(--color-white); font-size: clamp(4rem, 2.5rem + 8vw, 8rem); font-weight: 820; letter-spacing: -0.065em; line-height: 0.9; }
.home-history__stat span { display: block; margin-top: var(--space-3); color: var(--color-footer-muted); font-size: var(--font-size-lead); font-weight: 700; }
.home-history .eyebrow { color: #ffabb0; }
.home-history h2 { max-width: 18ch; margin-top: var(--space-3); color: var(--color-white); }
.home-history__content > p:last-child { max-width: 58ch; margin-top: var(--space-5); }

.home-sector-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); list-style: none; }
.home-sector-list li {
    position: relative;
    min-height: 3.25rem;
    padding: 0.8rem 1rem 0.8rem 2.6rem;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-background);
    font-weight: 680;
}
.home-sector-list li::before { position: absolute; top: 1.1rem; left: 1rem; width: 0.65rem; height: 0.65rem; border: 0.15rem solid var(--color-accent); border-radius: 50%; content: ""; }

.home-principle { max-width: 58rem; margin-top: var(--space-7); padding: clamp(1.5rem, 4vw, 2.5rem); border-left: 0.3rem solid var(--color-brand); background: var(--color-primary-soft); }
.home-principle p { color: var(--color-primary-dark); font-size: var(--font-size-lead); font-weight: 720; }
.home-principle cite { display: block; margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); font-style: normal; }

.home-contact { display: grid; gap: var(--space-6); }
.home-contact__heading { max-width: 40rem; }
.home-contact__heading h2 { margin-top: var(--space-3); }
.home-contact__heading > p:not(.eyebrow) { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-lead); }
.home-contact__heading .text-link { margin-top: var(--space-5); }
.home-contact__details { padding: clamp(1.25rem, 4vw, 2rem); border: 0.0625rem solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-background); box-shadow: var(--shadow-small); }
.home-contact__details > div + div { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 0.0625rem solid var(--color-border); }
.home-contact__details dt { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.home-contact__details dd { margin-top: var(--space-2); color: var(--color-text); font-size: var(--font-size-lead); font-weight: 680; }
.home-contact__details address { font-style: normal; }

.lead-text { color: var(--color-text); font-size: var(--font-size-lead); font-weight: 650; }

.about-story,
.about-authorization,
.about-values,
.service-overview,
.services-method {
    display: grid;
    gap: var(--space-6);
}

.about-story__content,
.service-overview__content { max-width: 48rem; }

.about-story__fact {
    padding: clamp(1.5rem, 5vw, 2.5rem);
    border: 0.0625rem solid var(--color-border);
    border-left: 0.3rem solid var(--color-brand);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
}

.about-story__fact strong {
    display: block;
    color: var(--color-primary-dark);
    font-size: clamp(4rem, 2.8rem + 7vw, 7.5rem);
    font-weight: 820;
    letter-spacing: -0.065em;
    line-height: 0.9;
}

.about-story__fact span {
    display: block;
    margin-top: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-lead);
    font-weight: 700;
    line-height: 1.35;
}

.about-authorization__body {
    padding: clamp(1.25rem, 4vw, 2rem);
    border-left: 0.3rem solid var(--color-primary);
    background: var(--color-background);
    color: var(--color-text-muted);
    box-shadow: var(--shadow-small);
}

.about-purpose-grid {
    display: grid;
    gap: var(--space-5);
}

.about-purpose {
    padding: clamp(1.25rem, 4vw, 2rem);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-background);
    box-shadow: var(--shadow-small);
}

.about-purpose h3 { color: var(--color-primary-dark); }
.about-purpose p { margin-top: var(--space-4); color: var(--color-text-muted); }

.about-values__intro { max-width: 36rem; }
.about-values__intro h2 { margin-top: var(--space-3); }
.about-values__intro p:not(.eyebrow) { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-lead); }

.about-values__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    list-style: none;
}

.about-values__list li {
    position: relative;
    min-height: 3.25rem;
    padding: var(--space-3) var(--space-4) var(--space-3) 2.75rem;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-background);
    color: var(--color-text);
    font-weight: 720;
}

.about-values__list li::before {
    position: absolute;
    top: 1.15rem;
    left: 1rem;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--color-accent);
    content: "";
}

.institutional-principle {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-left: 0.3rem solid var(--color-brand);
    background: var(--color-primary-soft);
}

.institutional-principle p {
    color: var(--color-primary-dark);
    font-size: var(--font-size-lead);
    font-weight: 720;
}

.institutional-principle cite { display: block; margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); font-style: normal; }

.service-overview__areas {
    display: grid;
    gap: var(--space-4);
}

.service-area-link {
    position: relative;
    display: grid;
    min-height: 7rem;
    align-content: center;
    padding: var(--space-5);
    overflow: hidden;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-background);
    color: var(--color-text);
    text-decoration: none;
    box-shadow: var(--shadow-small);
}

.service-area-link::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.3rem;
    background: var(--color-primary);
    content: "";
}

.service-area-link--green::before { background: var(--color-accent); }
.service-area-link span { font-size: var(--font-size-h3); font-weight: 780; line-height: 1.15; }
.service-area-link small { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 650; line-height: 1.45; }

.services-method__body {
    max-width: 48rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-lead);
}

/* 8. Interaction states */
@media (hover: hover) {
    a:hover { color: var(--color-primary-dark); }
    .button--primary:hover { border-color: var(--color-primary-dark); background: var(--color-primary-dark); color: var(--color-white); }
    .button--secondary:hover { border-color: var(--color-primary-dark); background: var(--color-primary-soft); color: var(--color-primary-dark); }
    .button--ghost:hover { border-color: var(--color-text-muted); background: var(--color-surface); color: var(--color-text); }
    .button--light:hover { border-color: var(--color-surface-strong); background: var(--color-surface-strong); color: var(--color-primary-dark); }
    .brand:hover, .site-footer__brand:hover { color: inherit; }
    .nav-toggle:hover { border-color: var(--color-primary); background: var(--color-primary-soft); }
    .site-nav a:hover, .site-nav summary:hover { background: var(--color-surface); color: var(--color-primary-dark); }
    .site-nav__cta .button:hover { background: var(--color-primary-dark); color: var(--color-white); }
    .breadcrumbs a:hover { color: var(--color-primary); }
    .card:hover { transform: translateY(-0.2rem); border-color: var(--color-border-strong); box-shadow: var(--shadow-medium); }
    .card:hover .card__action span { transform: translateX(0.2rem); }
    .service-area-link:hover { transform: translateY(-0.2rem); border-color: var(--color-border-strong); box-shadow: var(--shadow-medium); }
    .site-footer a:hover { color: var(--color-white); }
}

/* 9. Responsive */
@media (min-width: 42rem) {
    .grid--benefits, .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-hero__facts li:last-child { grid-column: auto; }
    .home-section-action .button { width: auto; }
    .home-sector-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-purpose-grid,
    .service-overview__areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-values__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .foundation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-field--full { grid-column: 1 / -1; }
    .contact-cta__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .page-intro__actions .button, .component-row > * { flex: 0 0 auto; }
}

@media (min-width: 56rem) {
    .grid--cards, .grid--benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-intro { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: var(--space-8); }
    .home-area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-history__inner { grid-template-columns: minmax(15rem, 0.7fr) minmax(0, 1.3fr); align-items: center; }
    .home-sector-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-contact { grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.8fr); align-items: center; gap: var(--space-8); }
    .about-story { grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.75fr); align-items: center; gap: var(--space-8); }
    .about-authorization,
    .about-values,
    .service-overview,
    .services-method { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; gap: var(--space-8); }
    .about-values__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
    .site-header__inner { min-height: 5.5rem; flex-wrap: nowrap; }
    .brand { width: 10.5rem; flex: 0 0 auto; }
    .nav-toggle { display: none; }
    .site-nav, .js .site-nav[data-open="false"] { display: block; width: auto; max-height: none; margin-left: auto; overflow: visible; border-top: 0; }
    .site-nav__list { display: flex; align-items: center; gap: 0.1rem; padding: 0; }
    .site-nav a, .site-nav summary { padding-inline: 0.62rem; font-size: 0.875rem; }
    .site-nav__services { position: relative; }
    .site-nav__submenu { position: absolute; top: calc(100% + 0.55rem); left: 0; width: min(23rem, 80vw); padding: var(--space-3); border: 0.0625rem solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-background); box-shadow: var(--shadow-medium); }
    .site-nav__submenu::before { position: absolute; top: -0.55rem; left: 0; width: 100%; height: 0.6rem; content: ""; }
    .site-nav__submenu a { font-size: var(--font-size-sm); }
    .site-nav__cta { margin: 0 0 0 var(--space-2); }
    .site-nav__cta .button { padding-inline: 0.9rem; }
    .home-hero__layout { grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.55fr); align-items: center; gap: clamp(3rem, 7vw, 7rem); }
    .home-hero__facts { grid-template-columns: minmax(0, 1fr); }
    .home-hero__facts li:last-child { grid-column: auto; }
    .site-footer__grid { grid-template-columns: minmax(16rem, 1.5fr) repeat(2, minmax(9rem, 1fr)); }
    .site-footer__grid--with-contact { grid-template-columns: minmax(16rem, 1.5fr) repeat(3, minmax(9rem, 1fr)); }
}

/* 10. Motion and high-contrast preferences */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

@media (forced-colors: active) {
    .button, .nav-toggle, input, select, textarea, .card, .form-card, .home-hero__facts, .home-area-card, .home-sector-list li, .home-contact__details, .about-story__fact, .about-authorization__body, .about-purpose, .about-values__list li, .institutional-principle, .service-area-link { border: 0.125rem solid ButtonText; }
    :focus-visible { outline-color: Highlight; }
}