/* zeadmin design system layer (release 2026-10-19). Loaded last on every page.
   Brand kept: Inter, blue accent, navy header and footer. System rules: flat fields (no gradients, glows,
   glass, grid-line backgrounds), surfaces separated by tone instead of shadows at rest, one button shape,
   readable labels instead of tracked-caps eyebrows, no decorative icon tiles or index numbers,
   full-ink running text, themed browser surfaces and focus. */
:root {
  --zd-ink: #101c2e;
  --zd-text: #22324a;
  --zd-muted: #46566c;
  --zd-ground: #ffffff;
  --zd-tint: #f2f5f9;
  --zd-tint-2: #e8eef6;
  --zd-navy: #0b1626;
  --zd-navy-2: #12223a;
  --zd-on-navy: #e6edf7;
  --zd-on-navy-muted: #b4c3d8;
  --zd-accent: #1d4ed8;
  --zd-accent-hover: #1740b0;
  --zd-accent-on-navy: #8fb6ff;
  --zd-radius-btn: 6px;
  --zd-radius-card: 14px;
  --zd-ease: cubic-bezier(.2, .7, .2, 1);
  --zv-muted: #46566c;
  --zr-text: #22324a;
}

/* ---------- Browser surfaces ---------- */
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
::selection { background: #cddcff; color: var(--zd-ink); }
input, textarea, select { caret-color: var(--zd-accent); }
html body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--zd-accent); outline-offset: 3px; border-radius: 4px; box-shadow: none;
}
html body :is(.zs-header, .zs-footer, .zhd-portal, .za-section--dark) :is(a, button, summary):focus-visible { outline-color: var(--zd-accent-on-navy); }
html body :is(table, .zp-calc, .zrv-card, .zhp-offer, .cs-costs) { font-variant-numeric: tabular-nums; }
html body ::placeholder { color: #5b6a80; opacity: 1; }

/* ---------- Header: plain bar, readable links, phone on desktop ---------- */
html body .zs-header { box-shadow: none; }
html body .zs-nav a { font-family: inherit; font-size: 15.5px; font-weight: 600; letter-spacing: 0; }
html body .zs-header__phone { display: none; color: var(--zd-on-navy); font-size: 15.5px; font-weight: 650; text-decoration: none; white-space: nowrap; }
html body .zs-header__phone:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
@media (min-width: 1180px) {
  html body .zs-header__inner { grid-template-columns: 1fr auto 1fr auto; }
  html body .zs-header__phone { display: inline-flex; align-items: center; justify-self: end; }
}

/* ---------- Buttons: one flat shape, no glow, no lift ---------- */
html body :is(.za-btn, .zhp-button, .zc-button, .cs-button, .zb-button, .zab-button, .zs-header__cta, .zr-form button, .zrv-submit) {
  border-radius: var(--zd-radius-btn); box-shadow: none; background-image: none;
  transition: background-color .16s var(--zd-ease), color .16s var(--zd-ease), border-color .16s var(--zd-ease);
}
html body :is(.za-btn, .zhp-button, .zc-button, .cs-button, .zs-header__cta):is(:hover, :focus-visible) { transform: none; box-shadow: none; }
html body :is(.za-btn--primary, .zhp-button:not(.zhp-button--light), .cs-button, .zs-header__cta) { background-color: var(--zd-accent); border-color: var(--zd-accent); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  html body :is(.za-btn--primary, .zhp-button:not(.zhp-button--light), .cs-button, .zs-header__cta):hover { background-color: var(--zd-accent-hover); border-color: var(--zd-accent-hover); }
}
html body :is(.za-btn--light, .za-btn--ghost, .zhp-button--light) { background: #fff; color: var(--zd-ink); border: 1.5px solid #b9c6d8; }
html body :is(.za-btn::after, .zhp-button::after, .zc-button::after, .zs-header__cta::after) { display: none; }

/* ---------- Flat fields: remove gradients, glows, glass, grid lines ---------- */
html body :is(.zhp-hero, .za-hero) { background: var(--zd-tint); }
html body main section.za-hero.zc-service-hero { background: var(--zd-tint) !important; color: var(--zd-ink); }
html body :is(.zp5-cases, .zhp-stats) { background: var(--zd-ground); }
html body :is(.zp5-cases, .zhd-portal, .zab-team, .zr-request, .zr-contacts, .zc-hero)::before { display: none !important; }
html body .zhd-portal, html body .zab-team { background: var(--zd-navy); }
html body .zv-summary-strip__inner { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; box-shadow: none; border: 0; border-radius: var(--zd-radius-card); }
html body .zv-card-glow::before, html body .zv-hero-media::before { display: none; }
html body .zv-hero-media, html body .za-hero .za-hero-card figure { transform: none !important; }

/* Service heroes join the light system (previously navy with a cyan glow). */
html body main .za-hero.zc-service-hero :is(h1, h2) { color: var(--zd-ink) !important; }
html body main .za-hero.zc-service-hero .za-hero__grid > div > p { color: var(--zd-text) !important; }
html body main .za-hero.zc-service-hero::before, html body main .za-hero.zc-service-hero::after { display: none !important; }
html body .za-hero.zc-service-hero .za-eyebrow { color: var(--zd-accent); }
html body .za-hero.zc-service-hero .za-btn--light { background: #fff; color: var(--zd-ink); }

/* ---------- Surfaces: tone steps instead of resting shadows ---------- */
html body main :is(.za-card, a.za-card.zc-link-card, .cs-project, .zrv-card, .zp5-case, .zc-faq, .zr-contact-panel) { box-shadow: none; }
html body main .za-card, html body main a.za-card.zc-link-card { border: 0; background: var(--zd-tint); border-radius: var(--zd-radius-card); }
html body main :is(.za-hero, .zv-tone-soft, .za-section:not(.za-section--white)) .za-card,
html body main :is(.za-hero, .za-section:not(.za-section--white)) a.za-card.zc-link-card { background: #fff; }
html body main .za-section--white .za-card, html body main .za-section--white a.za-card.zc-link-card { background: var(--zd-tint); }
@media (hover: hover) and (pointer: fine) {
  html body main a.za-card.zc-link-card { transition: background-color .16s var(--zd-ease); }
  html body main a.za-card.zc-link-card:hover { background: var(--zd-tint-2); box-shadow: none; transform: none; border-color: transparent; }
}
html body main a.za-card.zc-link-card:focus-visible { transform: none; box-shadow: none; }
/* Cards inside cards: inner ones lose their own chrome. */
html body main .za-card :is(.za-card, .zc-faq), html body main .zc-article .zc-faq { background: transparent; border: 0; border-radius: 0; padding-left: 0; padding-right: 0; box-shadow: none; }
html body main .zc-article .zc-faq { border-top: 1px solid #dfe5ee; }
html body main .zc-article .zc-table-wrap { box-shadow: none; }

/* Decorative keyword icons above card titles and their glow (generated by JS, not content). */
html body main .za-card > .zv-card-icon, html body main .zc-link-card > .zv-card-icon { display: none; }
/* Index numbers that carry no order information (process steps keep theirs). */
html body main :is(.zc-number, .zhd-portal__feature > span:first-child) { display: none; }
html body main .za-card:has(> .zc-number) { display: block; }
/* Tiny tracked caps become sentence-case labels; table headers keep their convention. */
html body :is(main, .zr-contacts) :is(span, small, p, b, strong, a, label, dt, dd, div):not(th):not(th *) { text-transform: none !important; letter-spacing: normal !important; }
/* Index numbers beside section headings carry no information. */
html body main .zc-section-head > span:first-child { display: none; }
html body main .zc-section-head { gap: 0; }

/* ---------- Labels above headings: sentence case at a readable size, no chip ---------- */
html body :is(.za-eyebrow, .zhp-kicker, .zc-eyebrow, .zr-request__eyebrow, .zc-kicker, .zv-kicker) {
  display: block; width: auto; padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none;
  font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.45;
}
html body :is(.zhp-kicker, .zc-eyebrow)::before { display: none; }
html body .zhp-kicker { color: var(--zd-accent); }
html body :is(.zhd-portal, .zr-contacts, .za-section--dark) .zhp-kicker { color: var(--zd-accent-on-navy); }
html body .case-story .cs-kicker { letter-spacing: 0; text-transform: none; font-size: 15px; }
html body .case-story .cs-result .cs-kicker, html body .case-story .cs-summary__label, html body .case-story .cs-facts dt { letter-spacing: .01em; text-transform: none; font-size: 13.5px; }
html body .case-story :is(.cs-step-task, .cs-step-solution) > h2::before { text-transform: none; letter-spacing: 0; font-size: 13.5px; }

/* ---------- Small and low-contrast text ---------- */
html body :is(.zc-request, .za-section--dark, .zab-education, .zhd-portal, .zr-contacts, .zab-team, .zc-section--dark) :is(.za-eyebrow, .zc-eyebrow, .zhp-kicker) { color: var(--zd-accent-on-navy); }
html body :is(small, .zc-consent-note) a.zn-inline-link { color: var(--zd-accent) !important; }
html body .zab-lead, html body .zhp-founder__facts span { color: var(--zd-text) !important; }
html body .zc-channel__action { color: var(--zd-accent) !important; }
html body .zhp-founder__mark { background: var(--zd-accent) !important; }
html body .zr-form ::placeholder, html body .zc-request ::placeholder { color: #5b6a80 !important; }
html body .zs-footer__bottom { color: #a9b8cd; }
html body .zs-footer__bottom a { color: #d3def0; }
html body :is(.zp5-cases__footer span, .zab-development__case small) { font-size: 13px !important; letter-spacing: normal; }
html body .zr-contact-panel__badge, html body .zs-contact-widget__toggle { box-shadow: 0 6px 18px rgba(8, 20, 38, .22); }
html body .zp5-case__meta, html body .zp5-case__meta :is(span, b) { font-size: 12.5px; letter-spacing: .01em; text-transform: none; }
html body .zp5-case__meta span { color: var(--zd-muted); }
html body .zp5-case__meta b { color: var(--zd-accent); }
html body .zhp-founder__head span, html body .zhp-founder__facts span { font-size: 12.5px; }
html body .zhp-founder__facts { color: var(--zd-text); }
html body .zc-premium-core__brand span { font-size: 12.5px; letter-spacing: .02em; }
html body .zc-premium-visual__caption p { color: var(--zd-text); }
html body #clients .zc-directory .zc-channel small, html body .zc-channel small { color: var(--zd-muted); }
html body :is(.zr-contact-panel, .zhd-portal, .zr-contacts) :is(small, .zr-contact-panel__note, span) { color: var(--zd-on-navy-muted); }
html body .zp-footnote { border-left: 0; padding: 14px 18px; border-radius: 10px; background: var(--zd-tint); }
html body .zp5-case__link { font-size: 14px; }

/* Brief and About: flat fields, no rings, no grid lines, no side bars. */
html body .zb-hero { background: var(--zd-navy) !important; }
html body .zb-hero::after, html body .zab-hero::before { display: none !important; }
html body .zb-section { background: var(--zd-tint) !important; }
html body .zab-hero { background: var(--zd-tint) !important; }
html body .zab-thesis { border-left: 0 !important; padding-left: 0 !important; }
html body :is(.zb-button, .zab-button) { box-shadow: none !important; }

/* Contacts: the decorative 3D tile goes; the hero text takes the width. Channel index numbers go. */
html body .zc-hero__grid > .zc-premium-visual { display: none; }
html body .zc-hero__grid { grid-template-columns: minmax(0, 1fr) !important; max-width: 820px; }
html body main .zc-channel__index { display: none; }
@media (min-width: 761px) { html body main .zc-channel { grid-template-columns: 200px minmax(0, 1fr) auto; } }
@media (max-width: 760px) { html body main .zc-channel { grid-template-columns: minmax(0, 1fr); } }
html body main :is(.zc-directory, .zc-channel) { box-shadow: none; }

/* Labels that used to be tracked micro-caps stay readable. */
html body main small, html body .zr-contacts small { font-size: max(13px, .8em); }
html body :is(.zc-hero-price > span, .zc-service-map__head small, .zc-delivery span, .zhd-portal__eyebrow, .zr-contact-panel span, .zr-contact-link span, .zc-channel small, .zv-summary-item small) { font-size: max(13.5px, 1em) !important; }

/* ---------- Type rhythm ---------- */
html body main :is(h1, h2, h3) { text-wrap: balance; }
html body main p { text-wrap: pretty; }
html body.zv-enabled main .zc-article h3 { margin: 1.8em 0 .6em; }
html body main .zc-hero h1, html body .zc-contacts-hero h1 { font-size: clamp(36px, 4.2vw, 54px); line-height: 1.08; }

/* ---------- Home: request block on light ground (ends the long dark tail) ---------- */
html body .zr-request { background: var(--zd-tint); color: var(--zd-ink); }
html body .zr-request .zr-contacts { background: var(--zd-navy); color: var(--zd-on-navy); }
html body .zr-request :is(h2, h3, strong, b, label):not(.zr-contacts *) { color: var(--zd-ink); }
html body .zr-request :is(p, li, small):not(.zr-contacts *) { color: var(--zd-text); }
html body .zr-request .zr-request__eyebrow { color: var(--zd-accent); }
html body .zr-request :is(.zr-step, .zr-request__steps > *, ol > li):not(.zr-contacts *) { background: #fff; border-color: transparent; box-shadow: none; }
html body .zr-request :is(.zr-request__panel, .zr-form):not(.zr-contacts *) { background: #fff; border: 0; box-shadow: none; }
html body .zr-request .zr-form :is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) { background: #fff !important; color: var(--zd-ink) !important; border: 1.5px solid #b9c6d8 !important; box-shadow: none !important; }
html body .zr-request .zr-form :is(label, label *, .zr-field, .zr-field *):not(input):not(textarea):not(a) { color: var(--zd-ink) !important; }
html body .zr-request .zr-form :is(.zr-field small, label small) { color: var(--zd-muted) !important; }
html body .zr-request a.zn-inline-link:not(.zr-contacts *) { color: var(--zd-accent); }

/* ---------- Motion: content visible by default; short, specific transitions ---------- */
@media (prefers-reduced-motion: reduce) {
  html body [data-reveal], html body .zv-motion { opacity: 1 !important; transform: none !important; transition: none !important; }
}