/* ==========================================================================
   Equil Global — design system. Written from scratch: no framework, no CDN,
   no cloned CSS. Order: fonts · tokens · reset · layout · type · components.
   Add a component here rather than inlining styles in a template — the
   Content-Security-Policy carries no 'unsafe-inline', so an inline style is
   silently dropped by the browser.

   Rules this file is built to (UI/UX Quick Reference):
   · every text/background pair clears 4.5:1; control borders clear 3:1
   · colour is never the only carrier of meaning — icons and text back it up
   · one 4px spacing rhythm, one fluid type scale, semantic tokens only
   · focus is always visible; nothing is hover-only; every target ≥44px
   · light and dark are defined together, not inverted after the fact
   · all motion is transform/opacity only and stops under reduced-motion
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Self-hosted, not Google-hosted: the CSP allows fonts only from 'self', and
   a third-party font request is a render-blocking round trip plus a privacy
   problem. Both families are variable (one file per subset covers every
   weight) and both carry Cyrillic — the site's primary language is Russian,
   which rules out most "modern" display faces.
   ------------------------------------------------------------------------ */
@font-face {
    font-family: "Manrope Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("../fonts/manrope-cyrillic-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Manrope Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-cyrillic-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens --------------------------------------------------------------- */
:root {
    color-scheme: light dark;

    /* Neutrals: cool steel with a blue cast, so the two accents stay the only
       saturated colours on the page. */
    --c-ink: #0b1220;
    --c-ink-soft: #3b4759;
    --c-muted: #5d6b7e;
    --c-line: #e1e7f0;
    --c-line-strong: #c3cddc;
    --c-control-line: #78869b;   /* input and control borders — must clear 3:1 */
    --c-surface: #ffffff;
    --c-surface-alt: #f6f8fc;
    --c-surface-sunk: #e9eef6;
    --c-surface-deep: #0a101b;

    /* Primary: turquoise. Carries navigation, links, the primary button —
       everything that means "this is clickable". Deliberately not the same hue
       family as --c-signal below, so the two never compete for that meaning. */
    --c-accent: #09748a;
    --c-accent-strong: #075e70;
    /* Text drawn ON the accent fill. It is a token because it flips with the
       theme: white on the light-mode fill, dark navy on the dark-mode fill.
       Hardcoding #fff gave 2:1 on the dark theme's button. */
    --c-on-accent: #ffffff;
    --c-accent-soft: #e6f5f5;
    --c-accent-line: #93cfc6;

    /* Signal: amber. Sequence markers and eyebrows only, never a link, so the
       two colours never compete for the same meaning. */
    --c-signal: #b45309;
    --c-signal-soft: #fdf3e7;

    --c-danger: #b3261e;
    --c-danger-soft: #fdeceb;
    --c-danger-line: #e3a9a5;
    --c-warning-bg: #fdf3e7;
    --c-warning-ink: #7c4a08;

    --c-focus: #09748a;

    --font-display: "Manrope Variable", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --font-sans: "Inter Variable", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Fluid type: one scale that interpolates between the 375px phone and the
       1440px desktop, so nothing needs a per-breakpoint font-size override.
       The base stays 16px on mobile — anything smaller makes iOS zoom a
       focused input. */
    --t-xs: 0.8125rem;
    --t-sm: 0.9375rem;
    --t-base: 1rem;
    --t-lg: clamp(1.0625rem, 0.99rem + 0.32vw, 1.25rem);
    --t-xl: clamp(1.25rem, 1.14rem + 0.47vw, 1.5rem);
    --t-2xl: clamp(1.5rem, 1.28rem + 0.94vw, 2rem);
    --t-3xl: clamp(1.875rem, 1.45rem + 1.8vw, 2.875rem);
    --t-4xl: clamp(2.25rem, 1.55rem + 2.98vw, 3.75rem);

    /* Spacing, 4px base */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;

    /* Section rhythm scales with the viewport rather than jumping at a breakpoint. */
    --s-section: clamp(3.5rem, 2.4rem + 4.6vw, 6.5rem);

    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    /* One elevation scale. Shadows are tinted with the ink colour, not black:
       a neutral-black shadow on a blue-grey ground reads as dirt. */
    --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.05), 0 1px 3px rgba(11, 18, 32, 0.06);
    --shadow-md: 0 4px 12px rgba(11, 18, 32, 0.07), 0 12px 28px rgba(11, 18, 32, 0.06);
    --shadow-lg: 0 8px 24px rgba(11, 18, 32, 0.10), 0 24px 56px rgba(11, 18, 32, 0.10);

    --container: 1200px;
    --header-h: 72px;

    /* One motion token set, so every transition shares a rhythm. Short for
       feedback that must feel instant, longer for something that travels. */
    --ease: cubic-bezier(0.2, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 0.12s;
    --dur: 0.2s;
    --dur-slow: 0.32s;
}

/* Dark is defined alongside light with its own contrast, not as an inversion:
   surfaces lift rather than darken, and the accents desaturate so they stay
   readable on a dark ground instead of glowing. */
@media (prefers-color-scheme: dark) {
    :root {
        --c-ink: #e8edf5;
        --c-ink-soft: #b6c2d2;
        --c-muted: #8b99ac;
        --c-line: #222d3d;
        --c-line-strong: #374559;
        --c-control-line: #607089;
        --c-surface: #0b111a;
        --c-surface-alt: #121a26;
        --c-surface-sunk: #18212f;
        --c-surface-deep: #060b12;

        --c-accent: #5fd1c4;
        --c-accent-strong: #8fe2d8;
        --c-on-accent: #0b111a;
        --c-accent-soft: #0f2b28;
        --c-accent-line: #1f5850;

        --c-signal: #eba35c;
        --c-signal-soft: #2a1e12;

        --c-danger: #f0a8a2;
        --c-danger-soft: #2b1310;
        --c-danger-line: #6b3833;
        --c-warning-bg: #2a1e12;
        --c-warning-ink: #f2cd9c;

        --c-focus: #5fd1c4;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6), 0 24px 56px rgba(0, 0, 0, 0.5);
    }
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--t-base);
    font-weight: 400;
    line-height: 1.65;
    color: var(--c-ink);
    background: var(--c-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "cv05" 1; /* Inter: a more legible lowercase l */
}

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

h1, h2, h3, h4, p, ul, ol, figure, dl { margin: 0; }

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

a {
    color: var(--c-accent);
    text-decoration: none;
    text-underline-offset: 0.2em;
}
a:hover { color: var(--c-accent-strong); text-decoration: underline; }

button { font: inherit; color: inherit; }

/* Long URLs, part numbers and pasted customer text must reflow, not overflow. */
p, li, dd, .prose { overflow-wrap: anywhere; }

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* --- Layout --------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    /* Gutters widen with the viewport rather than staying at a phone's 16px. */
    padding-inline: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
}

.section { padding-block: var(--s-section); }
.section--tight { padding-block: calc(var(--s-section) * 0.6); }
.section--alt { background: var(--c-surface-alt); border-block: 1px solid var(--c-line); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* 65–75 characters is the readable measure; prose is the only place it applies. */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-5); }
.prose ul { list-style: disc; padding-left: var(--s-5); }
.prose ol { list-style: decimal; padding-left: var(--s-5); }
.prose li + li { margin-top: var(--s-2); }
.prose strong { font-weight: 650; }

.section-head { max-width: 60ch; }
.section-head > * + * { margin-top: var(--s-3); }

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3, .h1, .h2, .h3 {
    font-family: var(--font-display);
    font-weight: 700;
    /* Optical correction: display type at these sizes needs negative tracking
       to stop the letterforms reading as loose. */
    letter-spacing: -0.02em;
    text-wrap: balance;
}

h1, .h1 { font-size: var(--t-3xl); line-height: 1.08; }
h2, .h2 { font-size: var(--t-2xl); line-height: 1.15; }
h3, .h3 { font-size: var(--t-lg); line-height: 1.3; letter-spacing: -0.01em; font-weight: 650; }

.lead {
    font-size: var(--t-lg);
    line-height: 1.55;
    color: var(--c-ink-soft);
    text-wrap: pretty;
}
.muted { color: var(--c-muted); }

/* The eyebrow is a pill, not loose caps: it reads as a label rather than as a
   stray line of small text above the headline. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-1) var(--s-3);
    border-radius: var(--radius-pill);
    background: var(--c-signal-soft);
    color: var(--c-signal);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.6;
}
.eyebrow::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    content: "";
    flex: none;
}

/* --- Header --------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--c-surface) 85%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* The border and shadow appear only once the page has scrolled under the bar,
   so the header reads as part of the hero at rest and as a separate layer in
   motion. site.js toggles the class; without JS the border is simply always
   off, which is the harmless state. */
.site-header.is-stuck {
    border-bottom-color: var(--c-line);
    box-shadow: var(--shadow-sm);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    /* The wordmark never shrinks: a header short of room collapses the nav to
       the mobile menu long before truncating the company's own name. min-width
       still allows the ellipsis as a last resort on a very narrow phone. */
    flex: 0 0 auto;
    min-width: 0;
    color: var(--c-ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -0.02em;
    text-decoration: none;
}
.brand:hover { color: var(--c-ink); text-decoration: none; }

.brand__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Original monogram — swap for an official logo file when the client supplies one. */
.brand__mark {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(29, 79, 215, 0.28);
}

/* Gradient stops are styled here rather than with a style="" attribute on the
   <stop>: the CSP carries no 'unsafe-inline' for styles, so an inline one is
   dropped and the mark renders solid black. */
.brand__mark-from { stop-color: var(--c-accent); }
.brand__mark-to { stop-color: var(--c-accent-strong); }

.brand--footer { color: #fff; }
.brand--footer .brand__mark { box-shadow: none; }

.site-nav {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
}

.site-nav__list { display: flex; align-items: center; gap: var(--s-2); }

.site-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;              /* the whole row is the target, not just the glyph */
    padding-inline: var(--s-3);
    border-radius: var(--radius-sm);
    color: var(--c-ink-soft);
    font-size: var(--t-sm);
    font-weight: 500;
    /* Russian nav labels are long. Without this the flex row shrinks them until
       "Главная" breaks mid-word into "Главна / я" — the row must overflow or
       collapse to the mobile menu instead of hyphenating the navigation. */
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.site-nav__link:hover {
    color: var(--c-ink);
    background: var(--c-surface-alt);
    text-decoration: none;
}

/* The current section is marked three ways — weight, colour and an underline
   bar — so the state survives both colour blindness and a greyscale print. */
.site-nav__link.is-current { color: var(--c-ink); font-weight: 700; }
.site-nav__link.is-current::after {
    position: absolute;
    left: var(--s-3);
    right: var(--s-3);
    bottom: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--c-signal);
    content: "";
}

.site-nav__aside { display: flex; align-items: center; gap: var(--s-4); }
/* "Оставить заявку" is two words and wrapped into two lines inside the pill. */
.site-nav__aside .button { white-space: nowrap; }

.site-header__phone {
    color: var(--c-ink);
    font-size: var(--t-sm);
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.lang-switch {
    display: flex;
    align-items: center;
    padding: 3px;
    gap: 2px;
    border-radius: var(--radius-pill);
    background: var(--c-surface-alt);
    border: 1px solid var(--c-line);
    font-size: var(--t-xs);
}
.lang-switch a,
.lang-switch__current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding-inline: var(--s-3);
    border-radius: var(--radius-pill);
    font-weight: 600;
    white-space: nowrap;
}
.lang-switch a { color: var(--c-muted); }
.lang-switch a:hover { color: var(--c-ink); background: var(--c-surface); text-decoration: none; }
.lang-switch__current { color: var(--c-on-accent); background: var(--c-accent); }

/* A 44px target is the rule; the switch pills sit inside one padded row that
   meets it, which is why the pills themselves may be 30px. */
.lang-switch { min-height: 38px; }

.nav-toggle {
    display: none;
    margin-left: auto;
    width: 44px;
    height: 44px;
    background: var(--c-surface-alt);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    margin-inline: auto;
    border-radius: 2px;
    background: var(--c-ink);
    content: "";
}
.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after { transform: translateY(4px); }

/* --- Buttons -------------------------------------------------------------- */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 48px;
    padding: var(--s-3) var(--s-6);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                transform var(--dur-fast) var(--ease);
}
.button:hover { text-decoration: none; }
/* Press feedback that does not move neighbouring content. */
.button:active { transform: translateY(1px); }

.button--primary {
    background: var(--c-accent);
    color: var(--c-on-accent);
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.12), 0 6px 16px rgba(29, 79, 215, 0.24);
}
.button--primary:hover {
    background: var(--c-accent-strong);
    color: var(--c-on-accent);
    box-shadow: 0 2px 4px rgba(11, 18, 32, 0.14), 0 10px 24px rgba(29, 79, 215, 0.3);
}

.button--ghost {
    border-color: var(--c-line-strong);
    color: var(--c-ink);
    background: var(--c-surface);
}
.button--ghost:hover { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-surface-alt); }

.button--onDeep { border-color: rgba(255, 255, 255, 0.35); color: #fff; background: transparent; }
.button--onDeep:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); color: #fff; }

.button--sm { min-height: 40px; padding: var(--s-2) var(--s-4); font-size: var(--t-xs); }

.button-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* --- Hero ----------------------------------------------------------------- */
/* No photograph: a stock container-port shot is someone else's rights problem
   and says nothing the copy does not. The depth comes from two soft colour
   fields and a faint engineering grid — drawn in CSS, so there is nothing to
   download and nothing to credit. */
.hero {
    position: relative;
    isolation: isolate;
    padding-block: clamp(3rem, 2rem + 4.5vw, 6rem) var(--s-section);
    background: var(--c-surface);
    overflow: hidden;
}
.hero::before {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(60% 70% at 78% 8%, color-mix(in srgb, var(--c-accent) 16%, transparent) 0%, transparent 60%),
        radial-gradient(50% 60% at 8% 0%, color-mix(in srgb, var(--c-signal) 9%, transparent) 0%, transparent 55%);
    content: "";
}
.hero::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    /* 1px lines on a 56px grid, faded out towards the bottom so the texture
       never competes with the copy sitting on it. */
    background-image:
        linear-gradient(to right, color-mix(in srgb, var(--c-ink) 6%, transparent) 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--c-ink) 6%, transparent) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 70%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent 70%);
    content: "";
}

.hero__grid {
    display: grid;
    gap: clamp(2rem, 1rem + 4vw, 4rem);
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
}

.hero__copy > * + * { margin-top: var(--s-4); }
.hero__title { font-size: var(--t-4xl); max-width: 16ch; }
.hero__lead { max-width: 54ch; }
.hero__points { margin-top: var(--s-5); }
.hero__actions { margin-top: var(--s-6); }

/* The six-step chain, rendered as a panel rather than as an image. */
.chain {
    position: relative;
    padding: var(--s-6);
    background: color-mix(in srgb, var(--c-surface) 82%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.chain__title {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-muted);
}
.chain__list { margin-top: var(--s-5); counter-reset: chain; }
.chain__item {
    position: relative;
    padding-left: calc(var(--s-6) + var(--s-3));
    padding-bottom: var(--s-5);
    counter-increment: chain;
}
.chain__item:last-child { padding-bottom: 0; }

.chain__item::before {
    position: absolute;
    left: 0;
    top: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--c-signal-soft);
    color: var(--c-signal);
    font-size: var(--t-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    content: counter(chain);
}
/* The connector line is the "chain": drawn between markers, stopped at the last. */
.chain__item:not(:last-child)::after {
    position: absolute;
    left: 14.5px;
    top: 32px;
    bottom: 2px;
    width: 1px;
    background: linear-gradient(to bottom, var(--c-signal), color-mix(in srgb, var(--c-signal) 15%, transparent));
    content: "";
}
.chain__item span { font-size: var(--t-sm); font-weight: 600; }

/* --- Cards ---------------------------------------------------------------- */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-6);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                transform var(--dur) var(--ease-out);
}
.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--c-accent-line);
    /* transform, not margin: a lift must not reflow the grid around it. */
    transform: translateY(-3px);
}

.card__title { font-size: var(--t-lg); }
.card__title a { color: var(--c-ink); }
/* The whole card is clickable via the title's stretched link, so a pointer
   anywhere on it opens the page — while the accessible name stays the title
   alone rather than the entire card's text. */
.card__title a::after { position: absolute; inset: 0; content: ""; }
.card__title a:hover { color: var(--c-accent); text-decoration: none; }
.card__body { color: var(--c-ink-soft); flex: 1; }

.card__more {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    margin-top: var(--s-1);
    color: var(--c-accent);
    font-size: var(--t-sm);
    font-weight: 600;
}
.card__more::after {
    /* A chevron drawn in CSS: no icon font, nothing to load. It slides on
       hover, which is decoration — the word beside it carries the meaning. */
    width: 7px;
    height: 7px;
    border: solid currentColor;
    border-width: 0 1.75px 1.75px 0;
    transform: rotate(-45deg);
    transition: transform var(--dur) var(--ease);
    content: "";
}
.card:hover .card__more::after { transform: rotate(-45deg) translate(2px, 2px); }

/* Service icon: line art on a tinted square. Decorative — the title carries
   the meaning, so the SVG itself is aria-hidden in the template. */
.card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background: var(--c-accent-soft);
    color: var(--c-accent);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.card:hover .card__icon { background: var(--c-accent); color: var(--c-on-accent); }
.card__icon svg { width: 24px; height: 24px; }

/* --- Industries grid -------------------------------------------------------
   Deliberately plainer than a .card: an industry has no page behind it, just an
   icon and a label, so it does not earn the card's border, shadow or hover lift
   — those signal "this leads somewhere", which would be a false affordance here. */
.industry {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-5) var(--s-3);
    text-align: center;
}
.industry__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--c-accent-soft);
    color: var(--c-accent);
}
.industry__icon svg { width: 28px; height: 28px; }
.industry__label { font-size: var(--t-sm); font-weight: 600; color: var(--c-ink-soft); }

/* --- Numbered process rail ------------------------------------------------ */
.rail { counter-reset: rail; }
.rail__step {
    position: relative;
    padding-left: clamp(3.25rem, 2.6rem + 2.6vw, 4.5rem);
    padding-bottom: var(--s-7);
    counter-increment: rail;
}
.rail__step:last-child { padding-bottom: 0; }

.rail__step::before {
    position: absolute;
    left: 0;
    top: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--c-accent-line);
    border-radius: 50%;
    background: var(--c-surface);
    color: var(--c-accent);
    font-family: var(--font-display);
    font-size: var(--t-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: var(--shadow-sm);
    content: counter(rail, decimal-leading-zero);
}
.rail__step:not(:last-child)::after {
    position: absolute;
    left: 22px;
    top: 44px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(to bottom, var(--c-accent-line), color-mix(in srgb, var(--c-accent-line) 10%, transparent));
    content: "";
}

.rail__title { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 650; letter-spacing: -0.01em; }
.rail__text { margin-top: var(--s-2); color: var(--c-ink-soft); max-width: 68ch; }

/* --- Tick / check lists --------------------------------------------------- */
.ticks > li {
    position: relative;
    padding-left: var(--s-6);
    color: var(--c-ink-soft);
}
.ticks > li + li { margin-top: var(--s-3); }
.ticks > li::before {
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--c-signal);
    content: "";
}

.ticks--check > li::before {
    top: 0.3em;
    left: 2px;
    width: 8px;
    height: 14px;
    background: none;
    border: solid var(--c-accent);
    border-width: 0 2px 2px 0;
    border-radius: 1px;
    transform: rotate(45deg);
}

/* --- Definition rows ------------------------------------------------------ */
.deflist { display: grid; gap: var(--s-4); }
.deflist__row {
    display: grid;
    grid-template-columns: minmax(140px, 190px) 1fr;
    gap: var(--s-4);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--c-line);
}
.deflist__row:last-child { border-bottom: 0; padding-bottom: 0; }
.deflist__key { font-size: var(--t-sm); color: var(--c-muted); }
.deflist__value { color: var(--c-ink); font-weight: 500; }

/* --- Callout -------------------------------------------------------------- */
.callout {
    position: relative;
    padding: var(--s-6);
    background: var(--c-accent-soft);
    border: 1px solid var(--c-accent-line);
    border-radius: var(--radius-lg);
}
.callout > * + * { margin-top: var(--s-3); }
.callout--signal {
    background: var(--c-signal-soft);
    border-color: color-mix(in srgb, var(--c-signal) 30%, transparent);
}

/* --- Panels (service aside) ----------------------------------------------- */
.panel {
    padding: var(--s-5);
    background: var(--c-surface-alt);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
}
.panel > * + * { margin-top: var(--s-3); }
.panel__title {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--c-muted);
}

/* --- Detail page layout --------------------------------------------------- */
.detail {
    display: grid;
    gap: clamp(2rem, 1rem + 4vw, 4rem);
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
}
.detail__main > * + * { margin-top: var(--s-7); }
.detail__aside { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
.detail__aside > * + * { margin-top: var(--s-4); }

/* --- Banners and badges --------------------------------------------------- */
.banner {
    padding: var(--s-2) var(--s-4);
    font-size: var(--t-sm);
    text-align: center;
    background: var(--c-warning-bg);
    color: var(--c-warning-ink);
}
.banner--warning { background: var(--c-warning-bg); color: var(--c-warning-ink); }

.badge-draft {
    display: inline-block;
    padding: 2px var(--s-2);
    font-size: var(--t-xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-accent-strong);
    background: var(--c-accent-soft);
    border-radius: var(--radius-sm);
}

/* --- Breadcrumbs ---------------------------------------------------------- */
.breadcrumbs {
    padding-block: var(--s-4);
    border-bottom: 1px solid var(--c-line);
    font-size: var(--t-xs);
}
.breadcrumbs__list { display: flex; flex-wrap: wrap; gap: var(--s-2); color: var(--c-muted); }
.breadcrumbs__list a { color: var(--c-muted); }
.breadcrumbs__list a:hover { color: var(--c-accent); }
.breadcrumbs__list li + li::before { content: "/"; margin-right: var(--s-2); color: var(--c-line-strong); }

/* --- Footer --------------------------------------------------------------- */
.site-footer {
    margin-top: var(--s-section);
    padding-block: var(--s-8) var(--s-5);
    background: var(--c-surface-deep);
    color: #c2ccd9;
    font-size: var(--t-sm);
}
.site-footer a { color: #e3e9f1; }
.site-footer a:hover { color: #fff; }

.site-footer__grid {
    display: grid;
    gap: var(--s-6);
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.site-footer__heading {
    margin-bottom: var(--s-4);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #94a2b4;
}
.site-footer__list > li + li { margin-top: var(--s-2); }
.site-footer__list--inline { display: flex; gap: var(--s-4); margin-top: var(--s-3); }
.site-footer__list--inline > li + li { margin-top: 0; }
.site-footer__tagline { margin-top: var(--s-4); max-width: 42ch; color: #a3b0c0; }

.site-footer__legal {
    margin-top: var(--s-7);
    padding-top: var(--s-5);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--t-xs);
    color: #94a2b4;
}
.site-footer__legal p + p { margin-top: var(--s-2); }

/* --- Contacts layout ------------------------------------------------------ */
.contacts {
    display: grid;
    gap: clamp(2rem, 1rem + 4vw, 4rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
}

/* The form sits in its own raised card so it reads as the thing to do on the
   page, not as another block of text. */
.form-card {
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* --- Forms ---------------------------------------------------------------- */
.form { margin-top: var(--s-5); }
.form > * + * { margin-top: var(--s-5); }

.form__grid {
    display: grid;
    gap: var(--s-5);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.form__grid > * + * { margin-top: 0; }

.form__row { display: flex; flex-direction: column; gap: var(--s-2); }

.form__label { font-size: var(--t-sm); font-weight: 600; }
.form__hint { color: var(--c-muted); font-weight: 400; }
.form__req { color: var(--c-signal); font-weight: 700; }

.form__input {
    width: 100%;
    min-height: 48px;
    padding: var(--s-3) var(--s-4);
    font: inherit;
    font-size: var(--t-base); /* 16px: anything smaller makes iOS zoom on focus */
    color: var(--c-ink);
    background: var(--c-surface);
    border: 1px solid var(--c-control-line);
    border-radius: var(--radius);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form__input:hover { border-color: var(--c-ink-soft); }
.form__input:focus-visible {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.form__input[readonly] { background: var(--c-surface-sunk); color: var(--c-ink-soft); }
.form__input--area { resize: vertical; min-height: 9rem; line-height: 1.6; }
.form__input[aria-invalid="true"] { border-color: var(--c-danger); }

.form__check { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-sm); }
.form__check input { width: 20px; height: 20px; margin-top: 0.2rem; flex: none; accent-color: var(--c-accent); }

/* An error is red AND prefixed with a mark, so it never relies on colour. */
.form__error { color: var(--c-danger); font-size: var(--t-sm); font-weight: 600; }
.form__error:empty { display: none; }
.form__error:not(:empty)::before { content: "! "; font-weight: 700; }

.form__summary:not(:empty) {
    padding: var(--s-4) var(--s-5);
    color: var(--c-danger);
    background: var(--c-danger-soft);
    border: 1px solid var(--c-danger-line);
    border-radius: var(--radius);
    font-size: var(--t-sm);
}
.form__summary ul { display: grid; gap: var(--s-2); }
.form__summary a { color: var(--c-danger); text-decoration: underline; }

/* Honeypot: out of sight for people, still in the DOM for bots to fill. */
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* --- Notices -------------------------------------------------------------- */
.notice { padding: var(--s-6); border-radius: var(--radius-lg); border: 1px solid var(--c-line); }
.notice > * + * { margin-top: var(--s-3); }
.notice--success { background: var(--c-accent-soft); border-color: var(--c-accent-line); }
.notice--error { background: var(--c-danger-soft); border-color: var(--c-danger-line); }

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

.skip-link {
    position: absolute;
    left: var(--s-4);
    top: -4rem;
    z-index: 30;
    padding: var(--s-3) var(--s-5);
    background: var(--c-surface);
    border: 2px solid var(--c-accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-3); }

/* --- Responsive ----------------------------------------------------------- */
/* Between the desktop layout and the mobile menu the header runs out of room
   before the nav does. Shed the optional pieces in order of how little they
   cost: the phone number first (it is repeated in the footer, on /contacts and
   in the mobile menu), then the nav's own breathing room. */
@media (max-width: 1240px) {
    .site-header__phone { display: none; }
    .site-nav__link { padding-inline: var(--s-2); }
    .site-nav__aside { gap: var(--s-3); }
}

@media (max-width: 1040px) {
    .hero__grid { grid-template-columns: 1fr; }
    .hero__title { max-width: 20ch; }
    .detail { grid-template-columns: 1fr; }
    .detail__aside { position: static; }
}

@media (max-width: 900px) {
    .nav-toggle { display: block; }

    .site-nav {
        position: absolute;
        inset: var(--header-h) 0 auto 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: var(--s-4);
        padding: var(--s-5) clamp(1rem, 0.6rem + 1.8vw, 2.5rem) var(--s-6);
        background: var(--c-surface);
        border-bottom: 1px solid var(--c-line);
        box-shadow: var(--shadow-lg);
    }
    .site-nav.is-open { display: flex; }

    .site-nav__list { flex-direction: column; align-items: stretch; gap: var(--s-1); }
    .site-nav__link { font-size: var(--t-base); padding-inline: var(--s-4); }
    .site-nav__link.is-current::after { left: var(--s-4); right: auto; width: 18px; }
    .site-nav__aside { flex-wrap: wrap; gap: var(--s-3); }
    .site-nav__aside .button { flex: 1; }

    /* The open mobile menu has room again, and it is the only place the phone
       number appears in the chrome on a phone — where tapping it is the most
       likely action on the page. */
    .site-header__phone { display: inline-flex; align-items: center; min-height: 44px; }

    .contacts { grid-template-columns: 1fr; }
    .deflist__row { grid-template-columns: 1fr; gap: var(--s-1); }
}