/* =====================================================================
   Web Centrix Technologies

   Design principles applied here:
     · colour is an accent, never a filler — no gradient cards or bands
     · structure comes from hairlines and white space, not shadows
     · one display face (Instrument Serif) for headlines only, Inter for
       everything functional
     · tight radii (6px) and restrained motion

   01. Tokens
   02. Reset & base
   03. Typography
   04. Layout utilities
   05. Buttons
   06. Header & navigation
   07. Hero
   08. Forms
   09. Services
   10. Process
   11. Editorial blocks
   12. Marquee
   13. Accordion
   14. Service page parts
   15. Closing band
   16. Footer
   17. Modal
   18. Floating actions
   19. Motion
   20. Responsive
   ===================================================================== */

/* ----------------------------------------------------------------
   01. Tokens
   ---------------------------------------------------------------- */
:root {
    /* neutrals — warm-leaning, so the page reads less "corporate blue" */
    --bg:          #ffffff;
    --bg-alt:      #f7f7f8;
    --bg-tint:     #f1f1f3;

    --ink:         #0f1115;
    --ink-2:       #454a54;
    --ink-3:       #6b7280;
    /* 3.4:1 on white — passes AA for large text and non-text marks.
       Body-size muted copy uses --ink-3 (4.8:1) instead. */
    --ink-4:       #848b96;

    --line:        #e7e7ea;
    --line-2:      #d6d6db;

    /* accent — links, marks, one rule. Never a background fill. */
    --accent:      #1d4ed8;
    --accent-deep: #1e3a8a;
    --accent-soft: rgba(29, 78, 216, 0.06);

    /* dark band */
    --dark:        #0f1115;
    --dark-2:      #191c22;
    --dark-line:   rgba(255, 255, 255, 0.12);
    --dark-ink:    #e8e8ea;
    --dark-mute:   #9ca3af;

    /* type */
    --font-display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* rhythm */
    --container:   1180px;
    --container-narrow: 760px;
    --gutter:      28px;
    --section-y:   clamp(72px, 9vw, 132px);

    --radius:      6px;
    --radius-lg:   10px;
    --radius-pill: 999px;

    --ease:        cubic-bezier(0.22, 1, 0.36, 1);

    --shadow-card: 0 1px 2px rgba(15, 17, 21, 0.04);
    --shadow-lift: 0 18px 40px -24px rgba(15, 17, 21, 0.22);
}

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

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    background-color: var(--bg);
    color: var(--ink-2);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    font-feature-settings: "cv05" 1, "ss03" 1;
}

body.is-locked { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

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

p { text-wrap: pretty; }

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

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

.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 200;
    padding: 12px 20px;
    border-radius: var(--radius);
    background: var(--ink);
    color: #fff;
    font-weight: 500;
    transition: top 0.25s var(--ease);
}
.skip-link:focus { top: 16px; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ----------------------------------------------------------------
   03. Typography
   ---------------------------------------------------------------- */
h1, h2, h3, h4 {
    color: var(--ink);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

/* display face: headlines only */
h1, h2 { font-family: var(--font-display); }

h1 { font-size: clamp(3rem, 6.4vw, 4.75rem); }
h2 { font-size: clamp(2.125rem, 4vw, 3.25rem); }

/* functional headings stay in Inter */
h3, h4 {
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
}

h3 { font-size: 1.0625rem; }

.display-em {
    font-style: italic;
    color: var(--ink);
}

.lead {
    font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 62ch;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 22px;
}

.eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--accent);
    flex: none;
}

.eyebrow--center { justify-content: center; }

.accent { color: var(--accent); }

a.accent { font-weight: 500; }
a.accent:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------------
   04. Layout utilities
   ---------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }

.section--tight { padding-block: clamp(56px, 6.5vw, 92px); }

.section--tint { background: var(--bg-alt); }

.section--ruled { border-top: 1px solid var(--line); }

.section-head { margin-bottom: clamp(40px, 5vw, 64px); max-width: 64ch; }

.section-head--center { text-align: center; margin-inline: auto; }

.section-head p {
    color: var(--ink-2);
    margin-top: 18px;
    font-size: 1.0625rem;
}

.grain { display: none; }
.glow  { display: none; }

/* ----------------------------------------------------------------
   05. Buttons
   ---------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: var(--radius);
    background: var(--ink);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    border: 1px solid var(--ink);
    transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
                color 0.25s var(--ease), transform 0.25s var(--ease);
}

.btn .icon { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }

.btn:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.btn:hover .icon { transform: translate(2px, -2px); }

.btn:active { transform: translateY(1px); }

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-2);
}

.btn--ghost:hover {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}

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

.btn--lg { padding: 15px 26px; font-size: 1rem; }

/* text link with an arrow */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--accent);
}

.link-arrow .icon { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }

.link-arrow:hover .icon { transform: translateX(4px); }

/* ----------------------------------------------------------------
   06. Header & navigation
   ---------------------------------------------------------------- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    padding-block: 20px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid transparent;
    transition: padding 0.35s var(--ease), border-color 0.35s var(--ease),
                background-color 0.35s var(--ease);
}

.site-header.is-stuck {
    padding-block: 12px;
    border-bottom-color: var(--line);
    background: rgba(255, 255, 255, 0.94);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink);
    white-space: nowrap;
}

.brand__mark {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--radius);
    background: var(--ink);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
}

.brand__suffix { color: var(--ink-3); font-weight: 400; }

.nav { display: flex; align-items: center; gap: 2px; }

.nav__link {
    position: relative;
    padding: 8px 13px;
    font-size: 0.9375rem;
    font-weight: 450;
    color: var(--ink-2);
    border-radius: var(--radius);
    transition: color 0.2s var(--ease);
}

.nav__link::after {
    content: "";
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 3px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease);
}

.nav__link:hover,
.nav__link.is-active { color: var(--ink); }

.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }

.site-header__actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
    display: none;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    color: var(--ink);
    background: #fff;
}

.nav-toggle .icon { width: 20px; height: 20px; }
.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 99;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 24px;
    padding: 104px var(--gutter) 40px;
    background: var(--bg);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 0.5s var(--ease), visibility 0.5s;
}

.mobile-nav.is-open { transform: translateY(0); visibility: visible; }

.mobile-nav__list { display: grid; align-content: start; }

.mobile-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 2px;
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(12px);
}

.mobile-nav.is-open .mobile-nav__link { animation: nav-in 0.45s var(--ease) forwards; }

.mobile-nav__link .icon { width: 18px; height: 18px; color: var(--ink-4); }

.mobile-nav__meta {
    display: grid;
    gap: 6px;
    color: var(--ink-3);
    font-size: 0.9375rem;
}

@keyframes nav-in { to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------
   07. Hero
   ---------------------------------------------------------------- */
.hero {
    position: relative;
    padding-top: clamp(132px, 15vw, 176px);
    padding-bottom: clamp(64px, 7vw, 96px);
    border-bottom: 1px solid var(--line);
}

.hero__bg { display: none; }

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    gap: clamp(40px, 6vw, 88px);
    align-items: start;
}

.hero__title { margin-bottom: 24px; }

.hero__title-ghost {
    display: block;
    color: var(--ink);
}

.hero__title-main {
    display: block;
    font-style: italic;
    color: var(--ink);
}

.hero__lead { color: var(--ink-2); max-width: 54ch; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 44px;
    border-top: 1px solid var(--line);
}

.stat { padding: 22px 20px 0 0; }

.stat + .stat { padding-left: 24px; border-left: 1px solid var(--line); }

.stat__value {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 2.6vw, 2.25rem);
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.stat__label {
    margin-top: 8px;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--ink-3);
}

/* highlight chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    font-size: 0.8125rem;
    color: var(--ink-2);
}

.chip .icon { flex: none; width: 13px; height: 13px; color: var(--accent); }

.chip--link { transition: border-color 0.25s var(--ease), color 0.25s var(--ease); }
.chip--link:hover { border-color: var(--ink); color: var(--ink); }

/* breadcrumb */
.breadcrumb { margin-bottom: 28px; }

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--ink-3);
}

.breadcrumb li + li::before { content: "/"; margin-right: 8px; color: var(--line-2); }

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

.breadcrumb [aria-current="page"] { color: var(--ink); }

/* ----------------------------------------------------------------
   08. Forms
   ---------------------------------------------------------------- */
.form-card {
    position: relative;
    padding: clamp(26px, 3vw, 34px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow-lift);
}

.form-card::before { display: none; }

.form-card__head { margin-bottom: 24px; }

.form-card__head h2 {
    font-family: var(--font-body);
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    margin-bottom: 6px;
}

.form-card__head p { font-size: 0.875rem; color: var(--ink-3); }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.field { position: relative; display: grid; }

.field--full { grid-column: 1 / -1; }

.field label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink-3);
    margin-bottom: 6px;
}

.field label .req { color: var(--accent); }

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 11px 13px;
    border-radius: var(--radius);
    border: 1px solid var(--line-2);
    background: #fff;
    color: var(--ink);
    font-size: 0.9375rem;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    appearance: none;
}

.field textarea { min-height: 96px; resize: vertical; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-4); }

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(15, 17, 21, 0.06);
}

.field--select .icon {
    position: absolute;
    right: 13px;
    bottom: 13px;
    width: 14px;
    height: 14px;
    color: var(--ink-4);
    pointer-events: none;
}

.field select option { background: #fff; color: var(--ink); }

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
    border-color: #b91c1c;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.08);
}

.field__error { margin-top: 6px; font-size: 0.75rem; color: #b91c1c; }

.field--action { grid-column: 1 / -1; }
.field--action .btn { width: 100%; margin-top: 4px; }

.hp-field {
    position: absolute !important;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.form-note {
    margin-top: 14px;
    font-size: 0.75rem;
    color: var(--ink-3);
    text-align: center;
}

.form-status {
    display: none;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: var(--radius);
    font-size: 0.875rem;
    border: 1px solid transparent;
}

.form-status.is-visible { display: block; }

.form-status.is-success {
    background: var(--bg-alt);
    border-color: var(--line-2);
    color: var(--ink);
}

.form-status.is-error {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #991b1b;
}

.btn.is-loading { pointer-events: none; opacity: 0.7; }
.btn.is-loading .icon--send { display: none; }
.btn__spinner { display: none; width: 16px; height: 16px; animation: spin 0.8s linear infinite; }
.btn.is-loading .btn__spinner { display: block; }

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

.lead-band__inner { max-width: 1000px; margin-inline: auto; }

/* compact variant — mid-page band */
.form-card--compact {
    padding: clamp(28px, 3.4vw, 40px);
    border-radius: var(--radius-lg);
    border-color: var(--line-2);
    box-shadow: none;
    background: #fff;
}

.form-card--compact .form-card__head { margin-bottom: 22px; max-width: 54ch; }

.form-card--compact .form-card__head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-weight: 400;
    letter-spacing: -0.02em;
}

.form-card--compact .form-card__head p { font-size: 0.9375rem; }

.form-card--compact .form-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: end;
    gap: 12px;
}

.form-card--compact .field--action { grid-column: auto; }
.form-card--compact .field--action .btn { width: auto; margin-top: 0; white-space: nowrap; }
.form-card--compact .form-note { text-align: left; margin-top: 14px; }

/* dark variant — closing band */
.form-card--dark {
    padding: clamp(26px, 3vw, 34px);
    border-color: var(--dark-line);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: none;
}

.form-card--dark .field label { color: var(--dark-mute); }
.form-card--dark .field label .req { color: #93c5fd; }

.form-card--dark .field input,
.form-card--dark .field select,
.form-card--dark .field textarea {
    border-color: var(--dark-line);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

.form-card--dark .field input::placeholder,
.form-card--dark .field textarea::placeholder { color: rgba(255, 255, 255, 0.35); }

.form-card--dark .field input:focus,
.form-card--dark .field select:focus,
.form-card--dark .field textarea:focus {
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.form-card--dark .field select option { background: var(--dark-2); color: #fff; }
.form-card--dark .field--select .icon { color: rgba(255, 255, 255, 0.45); }
.form-card--dark .field__error { color: #fca5a5; }
.form-card--dark .form-note { color: var(--dark-mute); }
.form-card--dark .form-note .accent { color: #93c5fd; }

.form-card--dark .btn {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
}

.form-card--dark .btn:hover { background: var(--dark-ink); border-color: var(--dark-ink); }

.form-card--dark .form-status.is-success {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--dark-line);
    color: #fff;
}

.form-card--dark .form-status.is-error {
    background: rgba(185, 28, 28, 0.18);
    border-color: rgba(252, 165, 165, 0.4);
    color: #fecaca;
}

/* ----------------------------------------------------------------
   09. Services
   ---------------------------------------------------------------- */
.services__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(26px, 3vw, 34px);
    background: #fff;
    transition: background-color 0.3s var(--ease);
}

.service-card:hover { background: var(--bg-alt); }

.service-card__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    color: var(--ink);
    transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.service-card__icon .icon { width: 18px; height: 18px; }

.service-card:hover .service-card__icon { border-color: var(--ink); color: var(--accent); }

.service-card__arrow {
    position: absolute;
    top: clamp(26px, 3vw, 34px);
    right: clamp(26px, 3vw, 34px);
    color: var(--ink-4);
    transition: transform 0.35s var(--ease), color 0.3s var(--ease);
}

.service-card__arrow .icon { width: 16px; height: 16px; }

.service-card:hover .service-card__arrow { color: var(--ink); transform: translate(2px, -2px); }

.service-card__title { margin-top: 22px; font-size: 1.0625rem; }

.service-card__excerpt {
    margin-top: 9px;
    font-size: 0.9062rem;
    color: var(--ink-3);
}

.service-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}

.service-card__tags li {
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: var(--ink-3);
}

.service-card__tags li::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--accent);
    vertical-align: middle;
}

.service-card__media { display: none; }

.service-card__link { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; }

/* ----------------------------------------------------------------
   10. Process
   ---------------------------------------------------------------- */
.process__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 56px);
}

.process__grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.step {
    position: relative;
    padding-top: 26px;
    border-top: 1px solid var(--ink);
    text-align: left;
    background: none;
}

.step::after { display: none; }

.step__no {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.step__icon { display: none; }

.step__title { margin-top: 16px; font-size: 1.0625rem; }

.step__body { margin-top: 10px; font-size: 0.9062rem; color: var(--ink-3); }

/* ----------------------------------------------------------------
   11. Editorial blocks
   ---------------------------------------------------------------- */
.editorial {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(32px, 6vw, 80px);
    align-items: start;
}

.editorial__aside .eyebrow { margin-bottom: 18px; }

.editorial__aside h2 { margin-bottom: 20px; }

.editorial__body p { color: var(--ink-2); }

.editorial__body p + p { margin-top: 16px; }

.editorial__body strong { color: var(--ink); font-weight: 600; }

/* three-column principles */
.principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(26px, 4vw, 52px);
}

.principle { padding-top: 24px; border-top: 1px solid var(--line); }

.principle__no {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.principle h3 { margin-top: 14px; }

.principle p { margin-top: 10px; font-size: 0.9062rem; color: var(--ink-3); }

/* checked point lists */
.point-list { display: grid; gap: 0; }

.point-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9375rem;
    color: var(--ink-2);
}

.point-list li:first-child { border-top: 1px solid var(--line); }

.point-list .icon { flex: none; width: 16px; height: 16px; margin-top: 4px; color: var(--accent); }

/* ----------------------------------------------------------------
   12. Marquee
   ---------------------------------------------------------------- */
.marquee {
    background: var(--bg);
    color: var(--ink-3);
    border-block: 1px solid var(--line);
    padding-block: 16px;
    overflow: hidden;
    position: relative;
    --marquee-duration: 40s;
}

.marquee__track { display: flex; width: max-content; animation: marquee var(--marquee-duration) linear infinite; }

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group { display: flex; align-items: center; gap: 52px; padding-right: 52px; }

.marquee__item {
    display: inline-flex;
    align-items: center;
    gap: 52px;
    font-size: 0.8125rem;
    font-weight: 450;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.marquee__item::before {
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--line-2);
}

@keyframes marquee { to { transform: translateX(-50%); } }

/* ----------------------------------------------------------------
   13. Accordion
   ---------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }

.accordion__item { border-bottom: 1px solid var(--line); }

.accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 22px 0;
    text-align: left;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    color: var(--ink);
    transition: color 0.25s var(--ease);
}

.accordion__trigger:hover { color: var(--accent); }

.accordion__trigger .icon {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--ink-4);
    transition: transform 0.35s var(--ease), color 0.25s var(--ease);
}

.accordion__item.is-open .accordion__trigger .icon { transform: rotate(90deg); color: var(--accent); }

.accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s var(--ease);
}

.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }

.accordion__panel > div { overflow: hidden; }

.accordion__panel p {
    padding: 0 0 24px;
    font-size: 0.9375rem;
    color: var(--ink-3);
    max-width: 64ch;
}

/* ----------------------------------------------------------------
   14. Service page parts
   ---------------------------------------------------------------- */
.hero--service { padding-top: clamp(120px, 13vw, 156px); }

.hero--service .hero__title-ghost,
.hero--service .hero__title-main { font-size: clamp(2.5rem, 5vw, 3.75rem); }

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(26px, 3.4vw, 46px);
}

.feature { padding-top: 24px; border-top: 1px solid var(--line); }

.feature__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    color: var(--ink);
}

.feature__icon .icon { width: 17px; height: 17px; }

.feature__title { margin-top: 18px; }

.feature__body { margin-top: 9px; font-size: 0.9062rem; color: var(--ink-3); }

.faq {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(32px, 6vw, 80px);
    align-items: start;
}

.faq__intro .btn { margin-top: 26px; }

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.related-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 3vw, 32px);
    background: #fff;
    transition: background-color 0.3s var(--ease);
}

.related-card:hover,
.related-card:focus-within { background: var(--bg-alt); }

.related-card__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    color: var(--ink);
}

.related-card__icon .icon { width: 17px; height: 17px; }

.related-card__title { margin-top: 18px; }

.related-card__body { margin-top: 9px; font-size: 0.875rem; color: var(--ink-3); }

.related-card__more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--accent);
}

.related-card__more .icon { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }

.related-card:hover .related-card__more .icon { transform: translateX(4px); }

.related-card__link { position: absolute; inset: 0; }

/* 404 */
.error-page { text-align: center; }

.error-page__code { font-size: clamp(4rem, 12vw, 7rem); line-height: 1; margin-bottom: 12px; }

.error-page__lead { max-width: 46ch; margin: 16px auto 0; color: var(--ink-2); }

.error-page__actions { justify-content: center; }

.error-page__services {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 44px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
}

/* ----------------------------------------------------------------
   15. Closing band
   ---------------------------------------------------------------- */
.cta {
    position: relative;
    background: var(--dark);
    color: var(--dark-ink);
    padding-block: clamp(72px, 9vw, 120px);
    overflow: hidden;
}

.cta h2 { color: #fff; }

.cta .eyebrow { color: var(--dark-mute); }
.cta .eyebrow::before { background: rgba(255, 255, 255, 0.4); }

.cta__ghost { display: none; }

.cta__lead { color: var(--dark-mute); max-width: 48ch; margin-top: 20px; }

.cta--form__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
}

.cta--form h2 { max-width: 15ch; }

.cta--form__points { display: grid; margin-top: 30px; }

.cta--form__points li {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 0;
    border-bottom: 1px solid var(--dark-line);
    font-size: 0.9375rem;
    color: var(--dark-ink);
}

.cta--form__points li:first-child { border-top: 1px solid var(--dark-line); }

.cta--form__points .icon { flex: none; width: 15px; height: 15px; color: #93c5fd; }

.cta--form__contact {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 28px;
    font-size: 0.9375rem;
}

.cta--form__contact a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--dark-mute);
    transition: color 0.25s var(--ease);
}

.cta--form__contact a:hover { color: #fff; }

.cta--form__contact .icon { width: 15px; height: 15px; }

/* ----------------------------------------------------------------
   16. Footer
   ---------------------------------------------------------------- */
.site-footer {
    background: var(--dark);
    color: var(--dark-mute);
    border-top: 1px solid var(--dark-line);
    padding-top: clamp(52px, 6vw, 76px);
}

.site-footer h2, .site-footer h4 { color: #fff; }

.footer__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--dark-line);
}

.site-footer .brand { color: #fff; }
.site-footer .brand__mark { background: #fff; color: var(--ink); }
.site-footer .brand__suffix { color: var(--dark-mute); }

.footer__socials { display: flex; gap: 8px; }

.footer__socials a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    border: 1px solid var(--dark-line);
    color: var(--dark-mute);
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.footer__socials a:hover { color: #fff; border-color: rgba(255, 255, 255, 0.4); }

.footer__socials .icon { width: 16px; height: 16px; }

.footer__main {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 0.55fr));
    gap: clamp(32px, 4vw, 64px);
    padding-block: clamp(44px, 5vw, 64px);
}

.footer__headline {
    font-size: clamp(2rem, 3.6vw, 2.75rem);
    max-width: 14ch;
    margin-bottom: 28px;
    color: #fff;
}

.footer__contacts { display: grid; gap: 0; max-width: 46ch; }

.contact-pill {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 0;
    border-bottom: 1px solid var(--dark-line);
    font-size: 0.9375rem;
    color: var(--dark-ink);
    border-radius: 0;
    transition: color 0.25s var(--ease);
}

.contact-pill:first-child { border-top: 1px solid var(--dark-line); }

.contact-pill .icon { flex: none; width: 15px; height: 15px; color: var(--dark-mute); }

a.contact-pill:hover { color: #fff; }

.footer__col h4 {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--dark-mute);
    margin-bottom: 18px;
}

.footer__col li + li { margin-top: 10px; }

.footer__col a {
    font-size: 0.9375rem;
    color: var(--dark-ink);
    transition: color 0.25s var(--ease);
}

.footer__col a:hover { color: #fff; }

.footer__col a[aria-current="page"] { color: #fff; }

.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    padding-block: 22px;
    border-top: 1px solid var(--dark-line);
    font-size: 0.8125rem;
}

.footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__legal a:hover { color: #fff; }

/* ----------------------------------------------------------------
   17. Modal
   ---------------------------------------------------------------- */
.modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 24px;
}

.modal[hidden] { display: none; }

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 17, 21, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}

.modal.is-open .modal__backdrop { opacity: 1; }

.modal__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    width: min(900px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: 0 40px 90px -40px rgba(15, 17, 21, 0.6);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.modal.is-open .modal__dialog { opacity: 1; transform: none; }

.modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-2);
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.modal__close .icon { width: 16px; height: 16px; }
.modal__close:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.modal__aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 34px 30px;
    background: var(--dark);
    color: var(--dark-ink);
}

.modal__aside-eyebrow {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--dark-mute);
}

.modal__aside-line {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
}

.modal__aside-points { display: grid; margin-top: auto; }

.modal__aside-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--dark-line);
    font-size: 0.875rem;
}

.modal__aside-points li:first-child { border-top: 1px solid var(--dark-line); }

.modal__aside-points .icon { flex: none; width: 14px; height: 14px; color: #93c5fd; }

.modal__aside-contact { display: grid; gap: 10px; font-size: 0.875rem; }

.modal__aside-contact a {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--dark-mute);
    transition: color 0.25s var(--ease);
}

.modal__aside-contact a:hover { color: #fff; }
.modal__aside-contact .icon { width: 14px; height: 14px; flex: none; }

.modal__body { padding: 6px; }

.form-card--flat {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 30px 28px;
}

/* ----------------------------------------------------------------
   18. Floating actions
   ---------------------------------------------------------------- */
.floaters {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 90;
    display: grid;
    gap: 10px;
    justify-items: center;
}

.floater {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    border: 1px solid var(--line-2);
    background: #fff;
    color: var(--ink-2);
    box-shadow: var(--shadow-card);
    transition: color 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.3s var(--ease);
}

.floater .icon { width: 19px; height: 19px; }

.floater:hover { color: var(--ink); border-color: var(--ink); }

.floater--top { opacity: 0; pointer-events: none; }

.floater--top.is-visible { opacity: 1; pointer-events: auto; }

.scroll-progress {
    position: fixed;
    inset: 0 auto auto 0;
    z-index: 110;
    height: 2px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--accent);
}

/* ----------------------------------------------------------------
   19. Motion
   ---------------------------------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-revealed { opacity: 1; transform: none; }

[data-reveal="left"]  { transform: translateY(16px); }
[data-reveal="right"] { transform: translateY(16px); }
[data-reveal="zoom"]  { transform: translateY(16px); }

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

    [data-reveal] { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------
   20. Responsive
   ---------------------------------------------------------------- */
@media (max-width: 1080px) {
    .services__grid,
    .feature-grid,
    .related-grid,
    .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .process__grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    :root { --gutter: 22px; }

    .nav,
    .site-header__actions .btn { display: none; }

    .nav-toggle { display: grid; }

    .hero__inner,
    .editorial,
    .faq,
    .cta--form__inner,
    .footer__main { grid-template-columns: minmax(0, 1fr); }

    .cta--form h2 { max-width: none; }

    .process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .form-card--compact .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-card--compact .field--action { grid-column: 1 / -1; }
    .form-card--compact .field--action .btn { width: 100%; }

    .footer__headline { max-width: none; }
}

@media (max-width: 680px) {
    .services__grid,
    .feature-grid,
    .related-grid,
    .principles,
    .process__grid,
    .process__grid--four { grid-template-columns: minmax(0, 1fr); }

    .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .stat + .stat { padding-left: 0; border-left: 0; }

    .stat:nth-child(2) { padding-left: 20px; border-left: 1px solid var(--line); }

    .hero__actions .btn { flex: 1 1 auto; }

    .form-card--compact .form-grid { grid-template-columns: minmax(0, 1fr); }

    .footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer__brand-col { grid-column: 1 / -1; }

    .modal { padding: 0; place-items: end stretch; }

    .modal__dialog {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        max-height: 92vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .modal__aside { padding: 24px 24px 20px; gap: 14px; }
    .modal__aside-points, .modal__aside-contact { display: none; }

    .form-card--flat { padding: 24px 20px 28px; }
}

@media (max-width: 480px) {
    .form-grid { grid-template-columns: minmax(0, 1fr); }

    .footer__main { grid-template-columns: minmax(0, 1fr); }

    .footer__bottom { justify-content: center; text-align: center; }

    .floaters { right: 14px; bottom: 14px; }
}

@media print {
    .site-header, .floaters, .marquee, .scroll-progress, .modal { display: none !important; }
    body { background: #fff; color: #000; }
}