/* VK Sans Display, converted from the TTFs the site had to WOFF2 — 57% smaller,
   and the only render-blocking asset on the page. font-display:swap so text is
   readable while it loads rather than invisible. */
@font-face {
    font-family: "VK Sans Display";
    src: url("../fonts/VKSansDisplay-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "VK Sans Display";
    src: url("../fonts/VKSansDisplay-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

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

html { scroll-behavior: smooth; }

/* Anchored sections must not land under the fixed header. */
[id] { scroll-margin-top: calc(var(--scc-header-h) + 1rem); }

/* `body[class]` = (0,1,1), which is what Elementor's kit uses on bare elements.
   A plain `body` selector loses that tie on load order. */
body[class] {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--scc-bg);
    color: var(--scc-text);
    font-family: var(--scc-font);
    font-size: var(--scc-text-body);
    font-weight: var(--scc-weight-regular);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.scc-main { flex: 1 0 auto; }

/* The kit gives every heading a font-size, weight, transform and letter-spacing
   at (0,1,1). Answer ALL of them, not just the ones that visibly broke — an
   unanswered text-transform is how headings ended up shouting on the last build. */
.scc-main h1, .scc-main h2, .scc-main h3,
.scc-main h4, .scc-main h5, .scc-main h6 {
    margin: 0 0 0.6em;
    color: var(--scc-text-strong);
    font-family: var(--scc-font);
    font-weight: var(--scc-weight-bold);
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
}

.scc-main h1 { font-size: var(--scc-text-h1); }
.scc-main h2 { font-size: var(--scc-text-h2); }
.scc-main h3 { font-size: var(--scc-text-h3); }

.scc-main p,
.scc-main li {
    color: var(--scc-text);
    font-size: var(--scc-text-body);
    line-height: 1.65;
}

.scc-main p { margin: 0 0 1.1em; }

/* hello-elementor's reset underlines every `a` at (0,0,1) and loads after this
   file, so a bare-element rule here would lose the tie. */
.scc-main a,
.scc-header a,
.scc-footer a {
    color: var(--scc-accent);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.scc-main a:hover,
.scc-main a:focus-visible {
    color: var(--scc-text-strong);
}

/* Content width plus its gutters: border-box means padding comes OUT of a
   max-width, which is how columns ended up squeezed on the last build.

   House rule, learned here: block comments go ABOVE the selector, never between
   declarations. A multi-line comment inside a block was swallowing every
   declaration after it by the time the CSS reached the browser. */
.scc-container {
    width: 100%;
    max-width: calc(var(--scc-container) + 2 * var(--scc-gutter));
    margin-inline: auto;
    padding-inline: var(--scc-gutter);
}

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

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

.scc-skip {
    position: absolute;
    inset-inline-start: -9999px;
    top: 0;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background: var(--scc-text-strong);
    color: var(--scc-bg);
}
.scc-skip:focus { inset-inline-start: 0; }

/* Doubled class = (0,2,0), enough to clear the kit's bare `button` rule, which
   otherwise repaints these as transparent outlined boxes. */
.btn.btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border: none;
    border-radius: var(--scc-radius);
    background: var(--scc-accent);
    color: var(--scc-bg);
    font-family: var(--scc-font);
    font-size: var(--scc-text-body);
    font-weight: var(--scc-weight-bold);
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    text-decoration: none;
    cursor: pointer;
}

/* The kit's `button:hover` is (0,2,1) and beats the resting rule above, so the
   hover state needs answering separately or the button grows a border on hover. */
.btn.btn--primary:hover,
.btn.btn--primary:focus-visible {
    background: var(--scc-text-strong);
    border: none;
    color: var(--scc-bg);
}