/* =========================================================================
   2S1 — студия сайтов (внутренняя тема сайта 2s1.ru).
   Дочерняя тема Default. Листы разных цветов, которые при прокрутке
   наезжают друг на друга; коллаж из демо в окнах браузера; крупный
   гротеск. Спецификация: doc/styles/studio2s1.md. Цен нет нигде.
   ========================================================================= */

@import url("../../../default/assets/css/theme.css");

/* --- fonts (files in assets/fonts) --------------------------------------- */
@font-face {
    font-family: 'S2 Wix';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/wix-madefor-display-cyrillic-wght-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'S2 Wix';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../fonts/wix-madefor-display-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'S2 Golos';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/golos-text-cyrillic-wght-normal.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'S2 Golos';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/golos-text-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
    --s2-pine: #1F4D3A;
    --s2-milk: #EFEBE3;
    --s2-ink: #151515;
    --s2-vermilion: #E5472C;
    --s2-sand: #D9C8A5;
    --s2-sheet-r: 32px;
    --s2-win-r: 10px;
    --s2-display: 'S2 Wix', 'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --s2-text: 'S2 Golos', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --s2-line: 1.5px solid color-mix(in srgb, currentColor 25%, transparent);
    --s2-shadow: 0 40px 70px -30px rgb(0 0 0 / .45);
    --s2-ease: cubic-bezier(.2, .7, .2, 1);

    --font-ui: var(--s2-text);
    --font-display: var(--s2-display);
    --font-prose: var(--s2-text);
    --font-ui: var(--s2-text);
    --f-head: var(--s2-display);
    --fw-heading: 800;
    --tr-tight: -0.03em;
    --r-btn: 10px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-pill: 8px;
    --card-radius: 10px;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root { color-scheme: light; }
}

/* A light tone's tokens: the milk sheet. The tones below redefine them. */
html:root,
.cms-section.cms-section--plain {
    --s2-fg: var(--s2-ink);
    --s2-num: color-mix(in srgb, var(--s2-milk) 92%, #000);
    --c-bg: var(--s2-milk);
    --c-surface: #fbf9f5;
    --c-surface-sunk: color-mix(in srgb, var(--s2-milk) 90%, #000);
    --c-text: var(--s2-ink);
    --c-text-strong: var(--s2-ink);
    --c-text-muted: color-mix(in srgb, var(--s2-ink) 68%, var(--s2-milk));
    --c-text-faint: color-mix(in srgb, var(--s2-ink) 52%, var(--s2-milk));
    --c-border: color-mix(in srgb, var(--s2-ink) 22%, transparent);
    --c-border-strong: color-mix(in srgb, var(--s2-ink) 45%, transparent);
    --c-accent: var(--s2-vermilion);
    --c-accent-hover: color-mix(in srgb, var(--s2-vermilion) 88%, #000);
    --c-accent-soft: color-mix(in srgb, var(--s2-ink) 8%, transparent);
    --c-accent-contrast: var(--s2-ink);
    --c-on-accent: var(--s2-ink);
    --c-mark: var(--s2-ink);
    --c-mark-text: var(--s2-ink);
    --c-mark-soft: color-mix(in srgb, var(--s2-ink) 8%, transparent);
    --section-bg: var(--s2-milk);
}

.cms-section.cms-tone-primary {   /* pine */
    --section-bg: var(--s2-pine);
    --s2-fg: var(--s2-milk);
    --s2-num: color-mix(in srgb, var(--s2-pine) 92%, #000);
    --c-bg: var(--s2-pine);
    --c-surface: color-mix(in srgb, var(--s2-pine) 86%, #fff);
    --c-surface-sunk: color-mix(in srgb, var(--s2-pine) 80%, #000);
    --c-text: var(--s2-milk);
    --c-text-strong: var(--s2-milk);
    --c-text-muted: color-mix(in srgb, var(--s2-milk) 76%, var(--s2-pine));
    --c-text-faint: color-mix(in srgb, var(--s2-milk) 58%, var(--s2-pine));
    --c-border: color-mix(in srgb, var(--s2-milk) 28%, transparent);
    --c-border-strong: color-mix(in srgb, var(--s2-milk) 55%, transparent);
    --c-accent: var(--s2-vermilion);
    --c-accent-hover: color-mix(in srgb, var(--s2-vermilion) 88%, #fff);
    --c-accent-soft: color-mix(in srgb, var(--s2-milk) 10%, transparent);
    --c-accent-contrast: var(--s2-ink);
    --c-on-accent: var(--s2-ink);
    --c-mark: var(--s2-milk);
    --c-mark-text: var(--s2-milk);
    --c-mark-soft: color-mix(in srgb, var(--s2-milk) 10%, transparent);
}
.cms-section.cms-tone-dark {      /* ink */
    --section-bg: var(--s2-ink);
    --s2-fg: var(--s2-milk);
    --s2-num: color-mix(in srgb, var(--s2-ink) 88%, #fff);
    --c-bg: var(--s2-ink);
    --c-surface: #232323;
    --c-surface-sunk: #0d0d0d;
    --c-text: var(--s2-milk);
    --c-text-strong: var(--s2-milk);
    --c-text-muted: color-mix(in srgb, var(--s2-milk) 74%, var(--s2-ink));
    --c-text-faint: color-mix(in srgb, var(--s2-milk) 55%, var(--s2-ink));
    --c-border: color-mix(in srgb, var(--s2-milk) 25%, transparent);
    --c-border-strong: color-mix(in srgb, var(--s2-milk) 55%, transparent);
    --c-accent: var(--s2-vermilion);
    --c-accent-hover: color-mix(in srgb, var(--s2-vermilion) 88%, #fff);
    --c-accent-soft: color-mix(in srgb, var(--s2-milk) 10%, transparent);
    --c-accent-contrast: var(--s2-ink);
    --c-on-accent: var(--s2-ink);
    --c-mark: var(--s2-milk);
    --c-mark-text: var(--s2-milk);
    --c-mark-soft: color-mix(in srgb, var(--s2-milk) 10%, transparent);
}
.cms-section.cms-tone-soft {      /* sand */
    --section-bg: var(--s2-sand);
    --s2-fg: var(--s2-ink);
    --s2-num: color-mix(in srgb, var(--s2-sand) 92%, #000);
    --c-bg: var(--s2-sand);
    --c-surface: color-mix(in srgb, var(--s2-sand) 55%, #fff);
    --c-surface-sunk: color-mix(in srgb, var(--s2-sand) 88%, #000);
    --c-text: var(--s2-ink);
    --c-text-strong: var(--s2-ink);
    --c-text-muted: color-mix(in srgb, var(--s2-ink) 72%, var(--s2-sand));
    --c-text-faint: color-mix(in srgb, var(--s2-ink) 58%, var(--s2-sand));
    --c-border: color-mix(in srgb, var(--s2-ink) 28%, transparent);
    --c-border-strong: color-mix(in srgb, var(--s2-ink) 55%, transparent);
    --c-accent: var(--s2-vermilion);
    --c-accent-hover: color-mix(in srgb, var(--s2-vermilion) 88%, #000);
    --c-accent-soft: color-mix(in srgb, var(--s2-ink) 8%, transparent);
    --c-accent-contrast: var(--s2-ink);
    --c-on-accent: var(--s2-ink);
    --c-mark: var(--s2-ink);
    --c-mark-text: var(--s2-ink);
    --c-mark-soft: color-mix(in srgb, var(--s2-ink) 8%, transparent);
}
.cms-section.cms-tone-accent {    /* the quiz sheet: deep ink over a blurred photo, vermilion for actions */
    --section-bg: #17171a;
    --s2-tint: #121214;
    --s2-photo: url('../img/quiz.jpg');
    --s2-fg: var(--s2-milk);
    --s2-num: rgba(255, 255, 255, .05);
    --c-bg: #17171a;
    --c-surface: color-mix(in srgb, var(--s2-milk) 7%, transparent);
    --c-surface-sunk: color-mix(in srgb, var(--s2-milk) 14%, transparent);
    --c-text: color-mix(in srgb, var(--s2-milk) 92%, transparent);
    --c-text-strong: var(--s2-milk);
    --c-text-muted: color-mix(in srgb, var(--s2-milk) 74%, transparent);
    --c-text-faint: color-mix(in srgb, var(--s2-milk) 56%, transparent);
    --c-border: color-mix(in srgb, var(--s2-milk) 22%, transparent);
    --c-border-strong: color-mix(in srgb, var(--s2-milk) 55%, transparent);
    --c-accent: var(--s2-vermilion);
    --c-accent-hover: color-mix(in srgb, var(--s2-vermilion) 88%, #fff);
    --c-accent-soft: color-mix(in srgb, var(--s2-vermilion) 22%, transparent);
    --c-accent-contrast: #fff;
    --c-on-accent: #fff;
    --c-mark: var(--s2-vermilion);
    --c-mark-text: var(--s2-milk);
    --c-mark-soft: color-mix(in srgb, var(--s2-vermilion) 20%, transparent);
    background-image:
        linear-gradient(180deg, rgba(18, 18, 20, .82), rgba(18, 18, 20, .9)),
        var(--s2-photo);
    background-size: cover;
    background-position: center;
}

body {
    background: var(--s2-milk);
    color: var(--s2-ink);
    font-family: var(--s2-text);
    font-size: 1.0625rem;
    -webkit-font-smoothing: antialiased;
}
::selection { background: var(--s2-vermilion); color: var(--s2-ink); }

:is(h1, h2, h3, h4) {
    font-family: var(--s2-display);
    font-weight: 800;
    letter-spacing: -0.03em;
}

.cms-section__title {
    font-family: var(--s2-display);
    font-size: clamp(36px, 4.6vw, 76px);
    font-weight: 800;
    line-height: .98;
    letter-spacing: -0.03em;
    color: var(--s2-fg);
    margin-block: 0 var(--s-6);
}
.cms-section__subtitle {
    font-size: clamp(1.05rem, 1rem + .4vw, 1.35rem);
    color: var(--c-text-muted);
    max-width: 40rem;
}
.cms-section__head { max-width: 62rem; }

a { text-underline-offset: .2em; }

/* -------------------------------------------------------------------------
   2. Buttons
   ------------------------------------------------------------------------- */
.s2-btn,
.cms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-height: 3.25rem;
    padding: .8em 1.6em;
    border: 1.5px solid transparent;
    border-radius: 10px;
    font-family: var(--s2-text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s var(--s2-ease), background .2s, color .2s, border-color .2s;
}
.s2-btn--cta,
.cms-btn--primary {
    background: var(--s2-vermilion);
    color: var(--s2-ink);
    border-color: var(--s2-vermilion);
}
.s2-btn--cta:hover,
.cms-btn--primary:hover { background: color-mix(in srgb, var(--s2-vermilion) 86%, #fff); border-color: transparent; transform: translateY(-2px); }
.cms-tone-accent .cms-btn--primary { background: var(--s2-vermilion); color: #fff; border-color: var(--s2-vermilion); }
.cms-tone-accent .cms-btn--primary:hover { background: color-mix(in srgb, var(--s2-vermilion) 86%, #fff); }
.s2-btn--line,
.cms-btn--ghost {
    background: transparent;
    color: var(--s2-fg);
    border-color: color-mix(in srgb, currentColor 45%, transparent);
}
.s2-btn--line:hover,
.cms-btn--ghost:hover { border-color: currentColor; transform: translateY(-2px); }
.s2-btn--ink { background: var(--s2-ink); color: var(--s2-milk); border-color: var(--s2-ink); }
.s2-btn--ink:hover { transform: translateY(-2px); background: #000; }

:focus-visible { outline: 2px solid var(--s2-vermilion); outline-offset: 3px; }

/* -------------------------------------------------------------------------
   3. Header and footer (drawn by Default from «Настройки сайта»)
   ------------------------------------------------------------------------- */
.site-header,
.site-header .hdr-row {
    background: var(--s2-pine);
    color: var(--s2-milk);
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    --c-text: var(--s2-milk);
    --c-text-strong: var(--s2-milk);
    --c-text-muted: color-mix(in srgb, var(--s2-milk) 78%, var(--s2-pine));
    --c-border: color-mix(in srgb, var(--s2-milk) 28%, transparent);
}
.site-header a { color: var(--s2-milk); }
.site-header .hdr-nav__link { font-weight: 500; font-size: .98rem; }
.site-header .hdr-nav__link:hover { text-decoration: underline; text-underline-offset: .3em; }
.site-header .hdr-button {
    border-radius: 10px;
    font-weight: 600;
    background: var(--s2-vermilion);
    color: var(--s2-ink);
    border-color: var(--s2-vermilion);
}
.site-header .logo__name, .site-header .hdr-logo__name { font-family: var(--s2-display); font-weight: 800; letter-spacing: -.03em; font-size: 1.5rem; }
.hdr-burger { color: var(--s2-milk); }

.site-footer,
.site-footer.site-footer--dark {
    background: var(--s2-pine);
    background-image: none;
    color: var(--s2-milk);
    --c-text: var(--s2-milk);
    --c-text-strong: var(--s2-milk);
    --c-text-muted: color-mix(in srgb, var(--s2-milk) 74%, var(--s2-pine));
    --c-border: color-mix(in srgb, var(--s2-milk) 25%, transparent);
    position: relative;
    z-index: 2;
    border-radius: var(--s2-sheet-r) var(--s2-sheet-r) 0 0;
    margin-top: calc(var(--s2-sheet-r) * -1);
}
.site-footer a { color: var(--s2-milk); }
.site-footer h2, .site-footer h3, .site-footer .ftr-col__title {
    font-family: var(--s2-display);
    font-weight: 800;
    letter-spacing: -.01em;
}

/* -------------------------------------------------------------------------
   4. Sheets: every landing section is a coloured sheet
   ------------------------------------------------------------------------- */
.landing { counter-reset: s2sheet; display: block; }

.landing > .cms-section {
    counter-increment: s2sheet;
    background-color: var(--section-bg);
    color: var(--s2-fg);
    border-radius: var(--s2-sheet-r) var(--s2-sheet-r) 0 0;
    overflow: clip;
    isolation: isolate;
}
.landing > .cms-section:first-child { border-radius: 0; }
.landing > .cms-section + .cms-section { margin-top: calc(var(--s2-sheet-r) * -1); }
.landing > .cms-section:has(+ .cms-section) { padding-bottom: calc(var(--s2-pb, 0px) + var(--s2-sheet-r)); }
.cms-pb-none { --s2-pb: 0px; }
.cms-pb-xs { --s2-pb: var(--sp-xs); }
.cms-pb-sm { --s2-pb: var(--sp-sm); }
.cms-pb-md { --s2-pb: var(--sp-md); }
.cms-pb-lg { --s2-pb: var(--sp-lg); }
.cms-pb-xl { --s2-pb: var(--sp-xl); }

/* The huge section number, tone on tone, cut by the sheet's edge. */
.landing > .cms-section:not(:first-child)::before {
    content: counter(s2sheet, decimal-leading-zero);
    position: absolute;
    right: -.03em;
    top: -.2em;
    z-index: 0;
    font-family: var(--s2-display);
    font-size: clamp(120px, 16vw, 260px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.05em;
    color: var(--s2-num);
    pointer-events: none;
    user-select: none;
}
/* Entrance: a section's content rises into place the first time it is
   seen (site.js adds .s2-rise only with script, never for reduced motion). */
.s2-rise {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}
.s2-rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .s2-rise { opacity: 1; transform: none; transition: none; }
}


/* Inner pages: a sheet-less first block starts below the header with air. */
.cms-section__inner { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   5. Browser window
   ------------------------------------------------------------------------- */
.s2win {
    display: block;
    background: #fff;
    border-radius: var(--s2-win-r);
    overflow: hidden;
    box-shadow: var(--s2-shadow);
    color: #4b473f;
}
.s2win__bar {
    display: flex;
    align-items: center;
    height: 28px;
    padding: 0 12px;
    background: #f3f0ea;
    border-bottom: 1px solid rgb(0 0 0 / .08);
}
.s2win__url {
    font-family: var(--s2-text);
    font-size: 11.5px;
    line-height: 1;
    color: #6b665c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.s2win__view { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #e7e2d8; }
.s2win__img, .s2win__view img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* -------------------------------------------------------------------------
   6. First screen
   ------------------------------------------------------------------------- */
.cms-block.s2h {
    position: relative;
    min-height: max(680px, calc(100svh - var(--hdr-h, 72px)));
    display: grid;
    grid-template-rows: 1fr auto;
    padding: clamp(2rem, 5vw, 4.5rem) max(var(--gutter), calc((100vw - var(--w-wide)) / 2)) clamp(1.5rem, 3vw, 2.5rem);
}
.s2h__copy { position: relative; z-index: 3; align-self: center; max-width: 80rem; }
.s2h__eyebrow {
    margin: 0 0 1.4rem;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
.s2h__title {
    margin: 0;
    font-size: clamp(52px, 6.6vw, 118px);
    font-weight: 800;
    line-height: .92;
    letter-spacing: -.03em;
    text-transform: none;
    color: var(--s2-milk);
}
.s2h__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: clamp(1.6rem, 3vw, 3rem); }
.s2h__link { font-weight: 500; font-size: 1.1rem; color: var(--s2-milk); text-decoration: underline; text-decoration-thickness: 1.5px; }
.s2h__note { position: relative; z-index: 3; margin: clamp(1.2rem, 2.5vw, 2rem) 0 0; font-size: .85rem; color: var(--c-text-muted); }

.cms-block.s2h.s2h--text { min-height: 0; display: block; padding-block: clamp(3rem, 7vw, 7rem) clamp(3rem, 6vw, 5.5rem); }
.s2h--text .s2h__title { max-width: 16ch; white-space: normal; font-size: clamp(48px, 7vw, 112px); }
.s2h--text .s2h__copy { padding-top: 0; align-self: auto; }
.s2h__wins { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.s2h__win { position: absolute; margin: 0; width: var(--w, 24vw); transform: rotate(var(--r, 0deg)); transition: transform .5s var(--s2-ease); }
.s2h__win .s2win__view { aspect-ratio: 16 / 10; }
.s2win__tag {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: .3em .7em;
    border-radius: 8px;
    background: var(--s2-ink);
    color: var(--s2-milk);
    font-size: .75rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s, transform .3s;
}
.s2h__win:hover { transform: rotate(0deg) translateY(-8px); }
.s2h__win:hover .s2win__tag { opacity: 1; transform: none; }

@media (min-width: 900px) {
    .s2h__wins { pointer-events: auto; }
    .s2h__win--1 { --w: 19vw; --r: -3deg; left: 2.5%;  top: 2%; }
    .s2h__win--2 { --w: 25vw; --r: 2deg;   left: 33%;   top: -7%; }
    .s2h__win--3 { --w: 24vw; --r: 3.5deg; right: -3%;  top: 4%; }
    .s2h__win--4 { --w: 20vw; --r: -2.5deg; right: 2%;  top: 44%; }
    .s2h__win--5 { --w: 24vw; --r: -3deg;  left: 36%;   bottom: -17%; }
    .s2h__win--6 { --w: 21vw; --r: 3deg;   right: 20%;  bottom: -15%; }
    .s2h__win--7 { --w: 17vw; --r: 2deg;   left: -3%;   bottom: -20%; }
    .s2h__win:nth-child(n+2) { margin-top: 0; }
    .s2h__copy { padding-top: 9vw; }
    .s2h:not(.s2h--text) .s2h__title { white-space: nowrap; }
}
@media (max-width: 899px) {
    .s2h { min-height: 0; display: block; padding-bottom: 2rem; }
    .s2h__title { font-size: clamp(44px, 14vw, 72px); }
    .s2h__wins {
        position: static;
        display: flex;
        gap: 14px;
        margin: 2rem calc(var(--gutter) * -1) 0;
        padding: 6px var(--gutter) 24px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        pointer-events: auto;
        scrollbar-width: none;
    }
    .s2h__wins::-webkit-scrollbar { display: none; }
    .s2h__win { position: relative; flex: 0 0 74vw; width: 74vw; scroll-snap-align: start; transform: rotate(var(--r, 0deg)); }
    .s2h__win--odd, .s2h__win:nth-child(odd) { --r: -1.5deg; }
    .s2h__win:nth-child(even) { --r: 1.5deg; }
    .s2h__note { margin-top: .5rem; }
}

/* -------------------------------------------------------------------------
   7. Demo gallery
   ------------------------------------------------------------------------- */
.s2d__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.s2d__chips[hidden] { display: none; }
.s2d__chip {
    padding: .55em 1em;
    border: var(--s2-line);
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: 500 .95rem var(--s2-text);
    cursor: pointer;
    transition: background .2s, color .2s;
}
.s2d__chip:hover { border-color: currentColor; }
.s2d__chip.is-on { background: var(--s2-milk); color: var(--s2-ink); border-color: var(--s2-milk); }
.cms-tone-dark .s2d__chip.is-on { background: var(--s2-milk); }
.cms-tone-soft .s2d__chip.is-on, .cms-section--plain .s2d__chip.is-on { background: var(--s2-ink); color: var(--s2-milk); border-color: var(--s2-ink); }
.s2d__sep { width: 1.5px; height: 1.4rem; background: currentColor; opacity: .25; margin-inline: 6px; }

.s2d__grid { display: grid; gap: clamp(1.5rem, 3vw, 2.8rem) clamp(1.2rem, 2.5vw, 2.2rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.s2d__card { display: block; color: inherit; text-decoration: none; transition: transform .35s var(--s2-ease); }
.s2d__card[hidden] { display: none; }
.s2d__card:hover, .s2d__card:focus-visible { transform: translateY(-6px); }
.s2d__card .s2win { transform: rotate(var(--r, 0deg)); transition: transform .4s var(--s2-ease); }
.s2d__card:nth-child(3n+1) .s2win { --r: -1deg; }
.s2d__card:nth-child(3n+2) .s2win { --r: .7deg; }
.s2d__card:nth-child(3n) .s2win { --r: -.5deg; }
.s2d__card:hover .s2win, .s2d__card:focus-visible .s2win { transform: rotate(0); }
.s2d__shot { transition: object-position 6s linear; }
.s2d__shot.is-tall { object-position: 50% 0; }
.s2d__card:hover .s2d__shot.is-tall, .s2d__card:focus-visible .s2d__shot.is-tall { object-position: 50% 100%; }
.s2d__blank { position: absolute; inset: 0; }
.s2d__cap { display: grid; grid-template-columns: 1fr auto; gap: 2px 1rem; align-items: baseline; padding-top: 1rem; }
.s2d__name { font: 800 1.25rem/1.15 var(--s2-display); letter-spacing: -.02em; }
.s2d__niche { grid-column: 1; font-size: .92rem; color: var(--c-text-muted); }
.s2d__open { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .92rem; font-weight: 600; white-space: nowrap; border-bottom: 1.5px solid currentColor; }
.s2d__more { margin: clamp(2rem, 4vw, 3.2rem) 0 0; }
.s2d__empty, .s2d__none {
    margin: 0;
    padding: clamp(2rem, 5vw, 4rem);
    border: var(--s2-line);
    border-style: dashed;
    border-radius: 10px;
    font-size: 1.15rem;
    color: var(--c-text-muted);
}

/* -------------------------------------------------------------------------
   8. Rows (what we make, who it is for, the cabinet)
   ------------------------------------------------------------------------- */
.s2r__list { list-style: none; margin: 0; padding: 0; counter-reset: s2row; border-top: var(--s2-line); }
.s2r__item { counter-increment: s2row; border-bottom: var(--s2-line); }
.s2r__row {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem clamp(1rem, 2.5vw, 2.5rem);
    padding: clamp(1.1rem, 2.2vw, 1.9rem) 0;
    color: inherit;
    text-decoration: none;
    transition: padding .3s var(--s2-ease);
}
a.s2r__row:hover { padding-left: 1rem; }
.s2r__no::before { content: counter(s2row, decimal-leading-zero); font: 700 1rem var(--s2-display); opacity: .6; }
.s2r__title { display: block; font: 800 clamp(1.7rem, 3.6vw, 3rem)/1.02 var(--s2-display); letter-spacing: -.03em; }
.s2r__text { display: block; margin-top: .5rem; max-width: 40rem; font-size: .98rem; color: var(--c-text-muted); }
.s2r__term { font-size: .92rem; font-weight: 500; white-space: nowrap; }
.s2r__arrow { font-size: 1.8rem; transition: transform .3s var(--s2-ease); }
a.s2r__row:hover .s2r__arrow { transform: translateX(8px); }
@media (max-width: 700px) {
    .s2r__row { grid-template-columns: 2.2rem minmax(0, 1fr) auto; }
    .s2r__term { grid-column: 2; grid-row: 2; }
    .s2r__arrow { grid-row: 1; grid-column: 3; }
}

/* -------------------------------------------------------------------------
   9. Features as typography
   ------------------------------------------------------------------------- */
.s2f__list { list-style: none; margin: 0; padding: 0; }
.s2f__item { border-top: var(--s2-line); }
.s2f__item:last-child { border-bottom: var(--s2-line); }
.s2f__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .5rem clamp(1.5rem, 4vw, 4rem);
    align-items: center;
    padding: clamp(1rem, 2vw, 1.6rem) 0;
    color: inherit;
    text-decoration: none;
    outline-offset: -2px;
}
.s2f__word { display: block; font: 800 clamp(34px, 4.6vw, 64px)/1.02 var(--s2-display); letter-spacing: -.035em; transition: color .25s; }
.s2f__row:hover .s2f__word, .s2f__row:focus-visible .s2f__word { color: var(--s2-sand); }
/* The description is always there: hovering never changes the height. */
.s2f__more { display: block; }
.s2f__more-in { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.s2f__text { flex: 1 1 16rem; max-width: 34rem; margin: 0; font-size: 1.05rem; line-height: 1.5; color: var(--c-text-muted); }
.s2f__shot { flex: 0 0 9rem; }
.s2f__img { display: block; width: 100%; border-radius: 6px; }
@media (max-width: 760px) {
    .s2f__row { grid-template-columns: 1fr; }
    .s2f__word { font-size: clamp(32px, 9vw, 48px); }
}

/* -------------------------------------------------------------------------
   10. Steps
   ------------------------------------------------------------------------- */
.s2p__list { list-style: none; margin: 0; padding: 0; border-top: var(--s2-line); }
.s2p__item { display: grid; grid-template-columns: clamp(4.5rem, 12vw, 11rem) minmax(0, 1fr) auto; gap: 1rem clamp(1rem, 3vw, 3rem); align-items: baseline; padding: clamp(1.4rem, 3vw, 2.4rem) 0; border-bottom: var(--s2-line); }
.s2p__no { font: 800 clamp(2.4rem, 8vw, 7.5rem)/.9 var(--s2-display); white-space: nowrap; letter-spacing: -.05em; color: var(--s2-sand); }
.s2p__title { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.05; }
.s2p__text { margin: .7rem 0 0; max-width: 42rem; color: var(--c-text-muted); }
.cms-section--plain .s2p__no, .cms-tone-soft .s2p__no { color: var(--s2-pine); }
.s2p__term { font-size: .95rem; font-weight: 600; white-space: nowrap; padding: .4em .9em; border: var(--s2-line); border-radius: 8px; }
@media (max-width: 700px) {
    .s2p__item { grid-template-columns: 4rem minmax(0, 1fr); }
    .cms-section--plain .s2p__no, .cms-tone-soft .s2p__no { color: var(--s2-pine); }
.s2p__term { grid-column: 2; justify-self: start; }
}

/* -------------------------------------------------------------------------
   11. Partner terms
   ------------------------------------------------------------------------- */
.s2t { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; }
.s2t__big { margin: 0; font: 800 clamp(120px, 22vw, 340px)/.8 var(--s2-display); letter-spacing: -.06em; }
.s2t__caption { margin: 1.2rem 0 0; max-width: 24rem; font-size: 1.15rem; font-weight: 500; }
.s2t__side { display: grid; gap: 2rem; justify-items: start; }
.s2t__table { margin: 0; width: 100%; border-top: var(--s2-line); }
.s2t__row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: 1rem 0; border-bottom: var(--s2-line); }
.s2t__row dt { font-weight: 700; }
.s2t__row dd { margin: 0; color: var(--c-text-muted); }
@media (max-width: 800px) { .s2t { grid-template-columns: 1fr; } .s2t__row { grid-template-columns: 1fr; gap: .2rem; } }

/* -------------------------------------------------------------------------
   12. Closing call
   ------------------------------------------------------------------------- */
.cms-block--studio2s1_cta .s2c__lead { margin: 0 0 2rem; max-width: 36rem; font-size: 1.3rem; }
.s2c__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.cms-section:has(> .cms-section__inner > .cms-block--studio2s1_cta) .cms-section__title { font-size: clamp(48px, 8vw, 128px); line-height: .92; }

/* -------------------------------------------------------------------------
   13. Default's blocks on the sheets: FAQ, forms, text, contacts
   ------------------------------------------------------------------------- */
.cms-card { border-radius: 10px; border: var(--s2-line); box-shadow: none; background: transparent; }
.cms-card:hover { transform: none; box-shadow: none; }

.cms-faq__item, .cms-faq details { border-color: color-mix(in srgb, currentColor 25%, transparent); }
.cms-faq summary, .cms-faq__question { font-family: var(--s2-display); font-weight: 700; letter-spacing: -.01em; font-size: 1.25rem; }

.cms-form__input, .cms-field__input,
.cms-section input[type="text"], .cms-section input[type="tel"], .cms-section input[type="email"], .cms-section textarea, .cms-section select {
    border-radius: 8px;
    border: 1.5px solid color-mix(in srgb, var(--s2-ink) 35%, transparent);
    background: #fbf9f5;
    color: var(--s2-ink);
    font-family: var(--s2-text);
    font-size: 1rem;
    padding: .85em 1em;
}
/* Fields on dark sheets (pine, ink, the quiz's photo sheet): stronger than the light rule above. */
.cms-section:is(.cms-tone-dark, .cms-tone-primary, .cms-tone-accent) :is(.cms-form__input, input[type="text"], input[type="tel"], input[type="email"], textarea, select) {
    background: color-mix(in srgb, var(--s2-milk) 8%, transparent);
    color: var(--s2-milk);
    border: 1px solid color-mix(in srgb, var(--s2-milk) 30%, transparent);
}
.cms-section:is(.cms-tone-dark, .cms-tone-primary, .cms-tone-accent) :is(.cms-form__input, input, textarea)::placeholder { color: color-mix(in srgb, var(--s2-milk) 55%, transparent); }
.cms-section:is(.cms-tone-dark, .cms-tone-primary, .cms-tone-accent) :is(.cms-form__input, input, textarea, select):focus { border-color: var(--s2-vermilion); outline: 2px solid color-mix(in srgb, var(--s2-vermilion) 40%, transparent); outline-offset: 1px; }
.cms-section:is(.cms-tone-dark, .cms-tone-primary, .cms-tone-accent) select option { color: var(--s2-ink); }
.cms-form__label { font-weight: 600; font-size: .95rem; }

.cms-block--text .cms-prose, .cms-prose { font-size: 1.1rem; line-height: 1.65; }
.cms-prose h2, .cms-prose h3 { font-family: var(--s2-display); letter-spacing: -.02em; }
.cms-prose h2 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin-top: 2.2em; }
.cms-prose a { text-decoration: underline; }

.cms-block--contacts .cms-contact, .cms-block--contacts .cms-card { background: transparent; }

/* The quiz box has no card of its own: the sheet is the card. */
.cms-block--quiz .cms-quiz.cms-card:not(.cms-card--plain) { background: transparent; border: 0; box-shadow: none; padding: 0; }

/* -------------------------------------------------------------------------
   Photo sheets: blurred studio photos under a deep tint (assets/img). Only
   on dark sheets, so the light type keeps its contrast.
   ------------------------------------------------------------------------- */
.cms-section.cms-tone-dark:has(.cms-block--studio2s1_cta) { --s2-photo: url('../img/cta.jpg'); }
.cms-section.cms-tone-dark:has(.cms-block--studio2s1_process) { --s2-photo: url('../img/process.jpg'); }
.cms-section.cms-tone-primary:has(.cms-block--contact_form) { --s2-photo: url('../img/partner.jpg'); --s2-tint: var(--s2-pine); }
.cms-section.cms-tone-dark:has(.cms-block--studio2s1_cta),
.cms-section.cms-tone-dark:has(.cms-block--studio2s1_process),
.cms-section.cms-tone-primary:has(.cms-block--contact_form) {
    background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--s2-tint, var(--s2-ink)) 82%, transparent), color-mix(in srgb, var(--s2-tint, var(--s2-ink)) 92%, transparent)),
        var(--s2-photo);
    background-size: cover;
    background-position: center;
}