/* ==========================================================================
   Global reset & base styles — shared across ALL screens.
   Screen-specific styles live in their own file (hero.css, main_screen.css…)
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* Kills the mobile browser's default blue/gray tap-highlight flash
       on clickable elements — we build our own press animations, and
       this one clashed with them everywhere on touch devices. */
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* legacy Edge/IE */
    -webkit-tap-highlight-color: transparent;
}

html::-webkit-scrollbar {
    display: none; /* Chrome, Safari, new Edge */
}

/* <picture> wrappers are purely a resource-selection mechanism (load
   only the asset matching the current breakpoint) — they carry no
   layout intent of their own, so they're made to disappear from the
   box tree entirely. Whatever class/positioning the real <img> inside
   had before still applies exactly as if the wrapper weren't there. */
picture {
    display: contents;
}

/* ==========================================================================
   Fluid scale system
   1rem = 10px at a 1920px viewport width. Every section's *.desktop.css
   file builds its sizes in rem, so the whole layout (widths, heights,
   gaps, font-sizes) scales proportionally down to 1280px, then locks.
   Tablet gets its own formula here once that design exists.
   ========================================================================== */
@media (min-width: 1280px) {
    html {
        font-size: clamp(6.6667px, 0.5208vw, 10px);
    }
}

/* Mobile — same idea, but the client's mockups are drawn at 393px
   (not at either edge of the breakpoint), so 1rem = 10px there instead
   of at the range's max like desktop's 1920 does. Fluid range is
   360-440px; anything narrower gets the device-guard "unsupported"
   screen instead (see css/device-guard.css), so the low end here is a
   defensive floor more than something visitors actually see.
   10 / 393 * 100 = 2.544529...vw; clamp bounds are that formula's own
   value at 360px and 440px. */
@media (max-width: 440px) {
    html {
        font-size: clamp(9.1603px, 2.5445vw, 11.1959px);
    }
}

body {
    font-family: 'Atyp Display', Arial, sans-serif;
    font-weight: 400;
    color: #0A0A0A;
    background-color: #FFFFFF;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    /* The font substitutes something that reads like a Latin "n" for
       the Cyrillic "н" in some words. Disabling ligatures didn't fix
       it — likely the font has a language-specific ("locl") glyph
       variant tied to lang="uk" that's the actual culprit, so that's
       disabled here too, forcing the font's default glyph shapes. */
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "calt" 0, "dlig" 0, "hlig" 0, "locl" 0;
}

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

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

button,
input,
textarea {
    font-family: inherit;
}

button {
    background: none;
    border: none;
    cursor: pointer;
}

ul,
ol {
    list-style: none;
}

/* Generic layout wrapper shared by every screen's inner content */
.container {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}