/* =========================================================================
   Airyx — a digital marketing agency, on top of Default.

   ART DIRECTION
   Flat, confident, a little brutalist: light grey paper (#E4E4E4), white
   cards, near-black text (#252525) and two loud accents — electric blue
   (#0000FF) for anything pressable, lime (#B5DA47) for numbers and badges.
   Geologica (a geometric grotesk with a wide weight range) carries both
   headings and body text; Stengazeta, a rough stencil display face, is used
   sparingly for one or two accent words per page — never for anything that
   has to stay legible at small sizes.

   Shape language: modest radii (default 10px, editable), thin 1px borders
   rather than heavy shadows, pill buttons by default. No full-bleed dark
   sections: the seed keeps every block's background at "none" or "soft" —
   this stylesheet keeps the "dark" tone readable but muted for the rare
   case an editor picks it, rather than the inky near-black slab Default
   uses.

   Loaded LAST (after the site's compiled design tokens, same order as
   Default's own base.twig), so a colour/font/radius the owner changes in
   «Дизайн → Настройки шаблона» always wins over the defaults below.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Fonts — self-hosted, split by unicode-range (see assets/fonts/*-LICENSE.txt).
   ------------------------------------------------------------------------- */

@font-face {
    font-family: 'Ax Geologica';
    src: url('/themes/airyx/assets/fonts/geologica-cyrillic-wght-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Ax Geologica';
    src: url('/themes/airyx/assets/fonts/geologica-latin-wght-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Ax Stengazeta';
    src: url('/themes/airyx/assets/fonts/stengazeta-latin-wght-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cyrillic Stengazeta: same family name, second source. If the font agent
   shipped a genuine cyrillic subset this file exists and wins for cyrillic
   text; if not, the latin file above still covers the font-family so the
   page never falls back to a missing font silently for Latin words like
   "AIRYX". */
@font-face {
    font-family: 'Ax Stengazeta';
    src: url('/themes/airyx/assets/fonts/stengazeta-cyrillic-wght-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* -------------------------------------------------------------------------
   Tokens — remap Default's generic design tokens onto the Airyx palette.
   Every design-schema control below has a plain :root default here; the
   site's compiled design CSS (loaded before this file) overrides the same
   custom properties when the owner has changed them.
   ------------------------------------------------------------------------- */

:root {
    /* -- design-schema controls: defaults (see theme.json → design.controls) */
    --airyx-accent: #0000ff;
    --airyx-lime: #b5da47;
    --airyx-font-display: 'Ax Geologica', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --airyx-font-body: 'Ax Geologica', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --airyx-radius: 10px;

    /* -- surfaces */
    --c-bg: #e4e4e4;
    --c-surface: #ffffff;
    --c-surface-sunk: #d8d8d8;
    --c-text: #252525;
    --c-text-strong: #0e0e0e;
    --c-text-muted: #5a5a5a;
    --c-text-faint: #838383;
    --c-border: #c9c9c9;
    --c-border-strong: #9c9c9c;

    /* -- accent (blue) */
    --c-accent: var(--airyx-accent);
    --c-accent-hover: #0000cc;
    --c-accent-soft: #e3e3ff;
    --c-accent-contrast: #ffffff;

    /* -- mark (lime) — always paired with dark text, never used as small
       foreground text on its own (fails contrast at that yellow-green hue) */
    --c-mark: var(--airyx-lime);
    --c-mark-text: #1c2400;
    --c-mark-soft: #eef7d6;

    /* -- "dark" tone: kept deliberately un-black — the brief asked to avoid
       heavy dark full-bleed sections, so the rare cms-tone-dark instance
       reads as ink-blue rather than a black wall */
    --c-slab: #14143a;
    --c-slab-text: #f2f2ff;
    --c-slab-muted: #b9b9e0;

    --c-danger: #c81e1e;
    --c-success: #1f6b3b;

    /* -- type */
    --font-ui: var(--airyx-font-body);
    --font-display: var(--airyx-font-display);
    --font-prose: var(--airyx-font-body);

    /* -- shape: --airyx-radius drives the whole scale */
    --r-xs: calc(var(--airyx-radius) * 0.3);
    --r-sm: calc(var(--airyx-radius) * 0.6);
    --r-md: var(--airyx-radius);
    --r-lg: calc(var(--airyx-radius) * 1.8);
    --r-pill: 999px;

    --shadow-lift: 0 1px 0 rgba(37, 37, 37, 0.08);
    --shadow-md: 0 1px 0 rgba(37, 37, 37, 0.1);
}

/* html[data-airyx-buttons="square"] flattens the pill; the button system
   already reads --r-pill for .cms-btn, so redefine it per-attr instead of
   touching every button rule directly. */
html[data-airyx-buttons="square"] { --r-pill: var(--r-sm); }

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */

html.ax { background: var(--c-bg); }
body.ax-body { background: var(--c-bg); color: var(--c-text); }

h1, h2, h3, h4, h5, h6,
.cms-hero__title, .cms-section__title, .cms-heading__title,
.cms-cta__title, .cms-quote__text, .cms-stat__value {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* One accent word per page may opt into the stencil display face, e.g. a
   theme_attrs-driven choice or a block that sets this class through a
   field value the editor typed (never hardcoded copy). */
.ax-display-accent {
    font-family: 'Ax Stengazeta', var(--font-display);
    font-weight: 400;
    text-transform: lowercase;
}

a { color: var(--c-accent); }
a:hover { color: var(--c-accent-hover); }

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

/* -------------------------------------------------------------------------
   Buttons & cards
   ------------------------------------------------------------------------- */

.cms-btn {
    font-family: var(--font-ui);
    font-weight: 500;
    text-transform: none;
    border-width: 1px;
}
.cms-btn--primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-contrast); }
.cms-btn--primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }
.cms-btn--ghost { background: transparent; border-color: var(--c-text); color: var(--c-text); }
.cms-btn--ghost:hover { background: var(--c-text); color: var(--c-bg); }

.cms-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    box-shadow: none;
    border-radius: var(--r-md);
}
html[data-airyx-cards="soft"] .cms-card {
    background: var(--c-surface-sunk);
    border-color: transparent;
}
.cms-card:hover { border-color: var(--c-border-strong); box-shadow: none; transform: none; }

/* -------------------------------------------------------------------------
   Section heading (the engine-owned `_title`/`_subtitle` on every block)
   ------------------------------------------------------------------------- */

.cms-section__head { margin-bottom: var(--s-6); }
.cms-section__title {
    font-size: var(--t-2xl);
    line-height: var(--lh-tight);
    max-width: 44rem;
}
.cms-section__head--left .cms-section__title,
.cms-section__head--left { margin-inline: 0; text-align: left; }
.cms-section__subtitle { color: var(--c-text-muted); font-size: var(--t-md); }

html[data-airyx-density="compact"] .cms-pt-md { padding-top: var(--s-5); }
html[data-airyx-density="compact"] .cms-pb-md { padding-bottom: var(--s-5); }
html[data-airyx-density="relaxed"] .cms-pt-md { padding-top: var(--s-8); }
html[data-airyx-density="relaxed"] .cms-pb-md { padding-bottom: var(--s-8); }

/* Softer "dark"/"primary"/"accent" tone sections — never a pure-black wall */
.cms-tone-dark { background: var(--c-slab); color: var(--c-slab-text); }
.cms-tone-dark .cms-section__subtitle { color: var(--c-slab-muted); }
.cms-tone-primary { background: var(--c-accent); color: var(--c-accent-contrast); }
.cms-tone-accent { background: var(--c-mark); color: var(--c-mark-text); }
.cms-tone-soft { background: var(--c-surface-sunk); }

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */

.site-header {
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
}
html[data-airyx-header="floating"] .site-header {
    margin: var(--s-4) var(--gutter) 0;
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    background: var(--c-surface);
}
.hdr-row--top {
    background: transparent;
    border-bottom: 1px solid var(--c-border);
    font-size: var(--t-xs);
}
html[data-airyx-announcement="off"] .hdr-row--top,
html[data-airyx-announcement="false"] .hdr-row--top { display: none; }

html[data-airyx-upper-nav="on"] .hdr-nav__link,
html[data-airyx-upper-nav="true"] .hdr-nav__link {
    text-transform: uppercase;
    font-size: var(--t-xs);
    letter-spacing: 0.04em;
}

.hdr-logo__name { font-family: var(--font-display); font-weight: 400; }
.hdr-burger { border-radius: var(--r-sm); }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.site-footer { background: var(--c-text); color: #f1f1f1; }
.site-footer .ftr-col__title { color: #ffffff; font-family: var(--font-display); font-weight: 400; }
.site-footer .ftr-menu__link,
.site-footer .ftr-about,
.site-footer .ftr-contacts,
.site-footer .ftr-text { color: #d3d3d3; }
.site-footer .ftr-menu__link:hover { color: var(--c-mark); }
.site-footer .ftr-brand__name { font-family: var(--font-display); color: #ffffff; }
.ftr-bottom { border-top: 1px solid rgba(255, 255, 255, 0.15); }
.ftr-bottom__copy, .ftr-bottom__company { color: #9c9c9c; }
.ftr-bottom__links a { color: #9c9c9c; }
.ftr-bottom__links a:hover { color: var(--c-mark); }

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.cms-hero__eyebrow {
    color: var(--c-accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--t-xs);
}
.cms-hero__title { font-size: var(--t-3xl); max-width: 26ch; }
.cms-hero__lead { color: var(--c-text-muted); max-width: 42ch; }
.cms-hero__bullets { color: var(--c-text-muted); }
.cms-hero__bullet-icon { color: var(--c-accent); }

/* -------------------------------------------------------------------------
   Stats — the consolidated numbers strip (350+, 87%, 520+ млн ₽, 10+ лет)
   ------------------------------------------------------------------------- */

.cms-stat__num { color: var(--c-accent); font-family: var(--font-display); }
.cms-stat__suffix { color: var(--c-accent); }
.cms-stats--divided .cms-stat { border-color: var(--c-border); }
.cms-stats--tile .cms-stat { background: var(--c-mark); color: var(--c-mark-text); border-radius: var(--r-md); }
.cms-stats--tile .cms-stat .cms-stat__num,
.cms-stats--tile .cms-stat .cms-stat__suffix { color: var(--c-mark-text); }

/* -------------------------------------------------------------------------
   Features / services grid (numbered "( 1 )" style matches the brief)
   ------------------------------------------------------------------------- */

.cms-feature--numbered .cms-feature__num {
    font-family: var(--font-display);
    color: var(--c-border-strong);
    font-size: var(--t-lg);
}
.cms-feature--card { border-radius: var(--r-md); }
.cms-badge-icon--circle { background: var(--c-accent-soft); color: var(--c-accent); }

/* -------------------------------------------------------------------------
   Steps (process)
   ------------------------------------------------------------------------- */

.cms-step__marker {
    background: var(--c-accent);
    color: var(--c-accent-contrast);
    border-radius: var(--r-pill);
}
.cms-step__duration { color: var(--c-accent); }

/* -------------------------------------------------------------------------
   Gallery / cases
   ------------------------------------------------------------------------- */

.cms-photo { border-radius: var(--r-md); overflow: hidden; }
.cms-photo__caption { color: var(--c-text-muted); }
.cms-photo__zoom { background: var(--c-accent); color: #fff; }

/* -------------------------------------------------------------------------
   Price list (Услуги page)
   ------------------------------------------------------------------------- */

.cms-prices__title { font-family: var(--font-display); color: var(--c-accent); font-weight: 400; }
.cms-price__dots { border-bottom-color: var(--c-border-strong); }
.cms-price__value { color: var(--c-text-strong); font-weight: 600; }
.cms-price__order {
    background: var(--c-mark);
    color: var(--c-mark-text);
    border-radius: var(--r-pill);
}

/* Name+description, dots, price and the order pill share one flex row by
   default (Default's own CSS) — too tight below ~420px given the longer
   Russian labels here, so the row wraps and the button gets its own line
   rather than being clipped against the viewport edge. */
@media (max-width: 480px) {
    .cms-price { flex-wrap: wrap; row-gap: var(--s-2); }
    .cms-price__name { flex: 1 1 100%; }
    .cms-price__dots { display: none; }
    .cms-price__value { margin-inline-start: auto; }
    .cms-price__order { margin-inline-start: var(--s-2); }
}

/* -------------------------------------------------------------------------
   Team
   ------------------------------------------------------------------------- */

.cms-person__name { font-family: var(--font-display); font-weight: 400; }
.cms-person__role { color: var(--c-accent); }

/* -------------------------------------------------------------------------
   Testimonials / rating
   ------------------------------------------------------------------------- */

.cms-rating-summary__value { font-family: var(--font-display); color: var(--c-accent); }
.cms-stars__star { color: var(--c-mark); }
.cms-stars__star--off { color: var(--c-border); }
.cms-review--card { border-radius: var(--r-md); }

/* -------------------------------------------------------------------------
   Quote (director)
   ------------------------------------------------------------------------- */

.cms-quote__mark { color: var(--c-accent); }
.cms-quote__name { font-family: var(--font-display); }
.cms-quote--big .cms-quote__text { font-size: var(--t-xl); }

/* -------------------------------------------------------------------------
   Logos
   ------------------------------------------------------------------------- */

.cms-logo__name { font-family: var(--font-display); color: var(--c-text-muted); font-weight: 400; }

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */

.cms-form__label { color: var(--c-text); }
.cms-form__input, .cms-leadform__box {
    border-radius: var(--r-md);
}
.cms-form__input:focus { border-color: var(--c-accent); }
.cms-leadform__box { background: var(--c-surface); border: 1px solid var(--c-border); }

/* -------------------------------------------------------------------------
   Watermark — the oversized "AIRYX" wordmark behind the first screen
   (base.twig prints it once, right after the header, from `site.name`).
   Decorative: aria-hidden, no pointer events, never affects layout height
   or reading order. Hidden below ~760px — at that width it would either
   force a horizontal scrollbar or shrink into illegibility, and the page
   loses nothing real by leaving it out (it repeats the name already in the
   header/logo next to it).
   ------------------------------------------------------------------------- */

.ax-watermark {
    position: absolute;
    inset: 0 0 auto 0;
    height: clamp(320px, 42vw, 760px);
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.ax-watermark::before {
    content: attr(data-text);
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(8rem, 22vw, 26rem);
    line-height: 1;
    color: var(--c-text);
    opacity: 0.05;
    white-space: nowrap;
    letter-spacing: -0.02em;
}
/* The hero (and whatever follows it) needs to sit above the watermark and
   have no opaque background of its own, or the watermark simply never
   shows — Default's hero/section backgrounds are already transparent by
   default (bg: none), so this only guards the stacking order. */
.ax-watermark + * { position: relative; z-index: 1; }

@media (max-width: 760px) {
    .ax-watermark { display: none; }
}

/* -------------------------------------------------------------------------
   Team — the one Stengazeta accent word outline.txt uses inside a content
   section rather than as full-bleed chrome ("владислав ушаков", node
   1:4471): a small lowercase flourish under the first team member's name.
   `.ax-accent-name` is only ever added by airyx.js, reading the real name
   text already in the card (never a second, hardcoded copy of it) — with
   JS off the card just shows the ordinary name heading, nothing is lost.
   ------------------------------------------------------------------------- */

.ax-accent-name {
    display: block;
    font-family: 'Ax Stengazeta', var(--font-display);
    font-weight: 400;
    font-size: var(--t-lg);
    text-transform: lowercase;
    color: var(--c-accent);
    letter-spacing: 0;
    margin-top: 0.15em;
}

/* -------------------------------------------------------------------------
   Entrance animation and hover microinteractions (assets/js/airyx.js).
   `.ax-will-animate` is only ever added by that script — a page rendering
   without it (or with it blocked) never has this "before" state and shows
   every section at rest, satisfying template-spec §8 ("works fully with
   JS disabled"). `.ax-in-view` is added once, the first time a section
   scrolls into range, and never removed.
   ------------------------------------------------------------------------- */

.ax-will-animate {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.ax-will-animate.ax-in-view {
    opacity: 1;
    transform: none;
}

/* Staggered reveal inside the three-line "statement wall" (outline.txt
   ~4174-4194): each heading carries its own `css_class` (an ordinary
   appearance field, set per block instance in the seed) so its reveal is
   delayed a little more than the one before it, and the three lines read
   in sequence rather than popping in together. */
.ax-wall-2.ax-will-animate { transition-delay: 0.12s; }
.ax-wall-3.ax-will-animate { transition-delay: 0.24s; }

/* Cards/photos/buttons: a short lift/scale on hover — CSS only, no motion
   until a pointer is actually over the element, so it does not compete
   with the entrance animation above and needs no separate reduced-motion
   opt-out beyond the blanket rule at the end of this file. */
.cms-card, .cms-photo, .cms-feature--card, .cms-person, .cms-review--card {
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.cms-card:hover, .cms-feature--card:hover, .cms-person:hover, .cms-review--card:hover {
    transform: translateY(-4px);
}
.cms-photo:hover { transform: scale(1.015); }
.cms-btn { transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.cms-btn:hover { transform: translateY(-1px); }
.cms-price__order { transition: transform 0.2s ease; }
.cms-price__order:hover { transform: scale(1.05); }

/* -------------------------------------------------------------------------
   Mobile safety — no horizontal scroll at 390px; every grid already wraps
   via cms-items--grid, this only guards against long unbroken strings
   (prices, case titles in Latin caps) forcing a scrollbar.
   ------------------------------------------------------------------------- */

html, body { max-width: 100%; overflow-x: hidden; }
.cms-hero__title, .cms-section__title, .cms-stat__num {
    overflow-wrap: break-word;
    word-break: break-word;
}

@media (max-width: 480px) {
    .cms-hero__title { font-size: var(--t-2xl); }
    .cms-section__title { font-size: var(--t-xl); }
}

/* -------------------------------------------------------------------------
   Reduced motion. airyx.js already refuses to run at all when this is set
   (so .ax-will-animate/.ax-in-view are never added — every section is at
   its normal opacity/position from the first paint, nothing to "jump" to).
   This block covers what CSS adds on its own regardless of JS: the hover
   lift/scale microinteractions and the marquee/entrance keyframes Default's
   own CSS defines for cms-anim-*/cms-items--marquee.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    * { scroll-behavior: auto !important; }

    .ax-will-animate {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .cms-card, .cms-photo, .cms-feature--card, .cms-person, .cms-review--card,
    .cms-btn, .cms-price__order {
        transition: none;
    }
    .cms-card:hover, .cms-feature--card:hover, .cms-person:hover, .cms-review--card:hover,
    .cms-photo:hover, .cms-btn:hover, .cms-price__order:hover {
        transform: none;
    }
}