/* ==========================================================================
   Yana Freelancit — shared design system
   Dark scheme: tokens, typography, header, buttons, the «Про мене» block,
   work strip, FAQ, footer. Loaded first on every page.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

/* --- Fonts ----------------------------------------------------------------
   Four typefaces, each with one job:
   Display — wide light grotesque: headings and figures;
   Mont    — body text, Light for lead paragraphs;
   Accent  — serif italic, only single words in key headings;
   Label   — monospaced caps for small captions and buttons.
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Display';
    src: url('../fonts/CyGrotesk-KeyRegular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Accent';
    src: url('../fonts/cormorant-400i-cyrillic.woff2') format('woff2');
    font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Accent';
    src: url('../fonts/cormorant-400i-latin.woff2') format('woff2');
    font-weight: 400; font-style: italic; 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+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Accent';
    src: url('../fonts/cormorant-500i-cyrillic.woff2') format('woff2');
    font-weight: 500; font-style: italic; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Accent';
    src: url('../fonts/cormorant-500i-latin.woff2') format('woff2');
    font-weight: 500; font-style: italic; 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+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Label';
    src: url('../fonts/plexmono-400-cyrillic.woff2') format('woff2');
    font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Label';
    src: url('../fonts/plexmono-400-latin.woff2') format('woff2');
    font-weight: 400; 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+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Label';
    src: url('../fonts/plexmono-500-cyrillic.woff2') format('woff2');
    font-weight: 500; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Label';
    src: url('../fonts/plexmono-500-latin.woff2') format('woff2');
    font-weight: 500; 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+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Mont';
    src: url('../fonts/Montserrat-Light.woff2') format('woff2');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Mont';
    src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Mont';
    src: url('../fonts/Montserrat-Medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Mont';
    src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
/* Fallback while Montserrat is still loading: system Arial (Roboto, Helvetica)
   stretched to Montserrat's width, which is 11–13 % wider on the site's text.
   Without it lines wrapped differently on the font swap, the hero paragraph changed
   height and the block jumped (CLS 0.11 in PageSpeed on mobile). Line metrics match
   Montserrat: ascender 968, descender 251 per 1000, no line gap. */
@font-face {
    font-family: 'Mont Fallback';
    src: local('Arial'), local('ArialMT'), local('Roboto'), local('Helvetica Neue'), local('Helvetica');
    size-adjust: 111.5%;
    ascent-override: 86.8%;
    descent-override: 22.5%;
    line-gap-override: 0%;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
    --bg:        #08080A;
    --surface:   #131316;
    --surface-2: #1B1B20;

    --line:        rgba(239, 238, 234, 0.12);
    --line-strong: rgba(239, 238, 234, 0.26);

    --text:       #EFEEEA;
    --text-dim:   rgba(239, 238, 234, 0.62);
    --text-faint: rgba(239, 238, 234, 0.40);

    /* Warm tones: accents, not backgrounds. */
    --sand:  #DDD7C9;
    --blush: #E9D2CE;

    --accent:      #C63F7F;
    --accent-soft: rgba(198, 63, 127, 0.16);

    /* Glow under cards. */
    --glow-violet: rgba(126, 79, 179, 0.55);
    --glow-blue:   rgba(79, 107, 179, 0.55);

    --font-display: 'Display', 'Mont', system-ui, sans-serif;
    --font-accent:  'Accent', Georgia, serif;
    /* Captions use Montserrat, like buttons. */
    --font-label:   'Mont', 'Mont Fallback', system-ui, sans-serif;
    --font-body:    'Mont', 'Mont Fallback', system-ui, sans-serif;

    /* Plain silver finish for the italic accent words. */
    --silver: linear-gradient(100deg, #C2BFC6 0%, #F7F6F3 42%, #DCDAD8 72%, #BDBAC0 100%);

    /* Type scale. Every size on the site comes from here.
       Nothing is smaller than 12 px. */
    --fs-label: 13px;                          /* caps: captions, buttons, menu */
    --fs-btn:   12px;                          /* button labels: small, with air around */
    --fs-small: 15px;                          /* lists in cards, notes */
    --fs-text:  16px;                          /* body text */
    --fs-row:   clamp(17px, 1.8vw, 21px);      /* list rows: course picker, FAQ, modules */
    --fs-lead:  clamp(17px, 1.7vw, 19px);      /* lead paragraphs */
    --fs-num:   clamp(22px, 2.1vw, 27px);      /* inline figures and prices */
    --fs-h3:    clamp(22px, 2.2vw, 28px);      /* card and lesson titles */
    --fs-h2:    clamp(32px, 3.8vw, 50px);      /* section headings */

    --measure: 1280px;
    --gutter: clamp(20px, 5vw, 64px);
    --step: clamp(64px, 9vw, 132px);
    --radius: 28px;
    --radius-sm: 16px;
}

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

*, *::before, *::after { box-sizing: border-box; }
/* The grotesque has a single 400 weight: without this h3 rendered in faux bold
   and heading weight varied from block to block. */
html { -webkit-text-size-adjust: 100%; font-synthesis-weight: none; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Double-tap on mobile doesn't zoom the page: quick taps on buttons and
   carousels caused accidental zoom. Pinch zoom stays — review screenshots have
   small text that people zoom in to read. */
html { touch-action: manipulation; }

/* Android browsers (Instagram's in-app one too) flash a translucent box over the
   tapped element. A whole portfolio service row is one <summary>, so the flash
   covered half the screen. Keyboard focus is unaffected: it uses :focus-visible. */
html { -webkit-tap-highlight-color: transparent; }

img { display: block; max-width: 100%; height: auto; }

/* The work shown is Yana's portfolio: images can't be dragged, opened in a new tab
   or saved from the context menu (right click, long press on mobile). Clicks pass to
   the parent, so images inside links, carousels and videos work as before.
   This guards against casual copying, not deliberate copying: the file can still
   be taken from the page source. */
img {
    pointer-events: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

a { color: inherit; }

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

/* Anchor jumps (#program, #price, #faq) land below the 62 px sticky header. */
[id] { scroll-margin-top: 80px; }

.wrap {
    width: 100%;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Words that must wrap together on narrow screens, so none is left alone on a line. */
.nowrap { white-space: nowrap; }

/* --- Typography ----------------------------------------------------------- */

.poster {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin: 0;
}

/* A single serif-italic word inside a heading. Cormorant's x-height is
   40% of the size, the grotesque's is 53% (canvas measurement on the live
   fonts), so the italic is 53/40 ≈ 1.33× larger to match x-heights. */
.poster em, .section-title em, .accent {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 500;
    font-size: 1.33em;
    letter-spacing: -0.01em;
    line-height: 0.9;
    background: var(--silver);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: 0.06em;   /* italic overhangs its box; without this the gradient is clipped */
}

.eyebrow {
    font-family: var(--font-label);
    font-weight: 500;
    font-size: 14px;   /* label above a heading — larger than other captions */
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sand);
    margin: 0 0 18px;
}

.lead {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: var(--text-dim);
    margin: 0;
}

/* --- Hero glow (home and courses) ----------------------------------------
   "Silk": diagonal folds of light — wine and pink bands of varying
   width, like highlights on satin. A mask fades the layer at the edges; it
   slowly drifts (40 s each way) and gently pulses in brightness. Smooth
   gradients only, no noise. Moved via transform, so the layer never repaints.
   On mobile the background is a photo, so no glow is needed. */
.hero::before, .chero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -22%;
    width: min(1500px, 130vw);
    aspect-ratio: 1.25;
    background:
        linear-gradient(122deg,
            transparent 14%,
            rgba(120, 32, 90, 0.62) 22%,
            transparent 28%,
            rgba(198, 63, 127, 0.58) 36%,
            rgba(244, 150, 196, 0.34) 39%,
            transparent 45%,
            rgba(98, 30, 100, 0.60) 53%,
            transparent 59%,
            rgba(214, 82, 146, 0.44) 66%,
            transparent 72%,
            rgba(120, 32, 90, 0.40) 79%,
            transparent 86%);
    /* The radial mask fades the edges, the vertical one the bottom: otherwise
       the layer hit the section's lower edge and ended in a hard line. */
    -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%), linear-gradient(#000 35%, transparent 72%);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(closest-side, #000 40%, transparent 100%), linear-gradient(#000 35%, transparent 72%);
    mask-composite: intersect;
    filter: blur(16px);
    pointer-events: none;
    z-index: 0;
    animation: hero-silk 40s ease-in-out infinite alternate;
}
.hero::after, .chero::after {
    content: '';
    position: absolute;
    top: -10%;
    right: 2%;
    width: min(620px, 60vw);
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(198, 63, 127, 0.22), transparent);
    filter: blur(30px);
    pointer-events: none;
    z-index: 0;
    animation: hero-breathe 12s ease-in-out infinite alternate;
}
@keyframes hero-silk {
    from { transform: translate(0, 0) rotate(0deg) scale(1); }
    to   { transform: translate(-7%, 5%) rotate(5deg) scale(1.08); }
}
@keyframes hero-breathe {
    from { opacity: 0.55; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1.06); }
}
@media (max-width: 720px) {
    .hero::before, .chero::before, .hero::after, .chero::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero::before, .chero::before, .hero::after, .chero::after { animation: none; }
}

/* --- Sections ------------------------------------------------------------- */

.section { padding: var(--step) 0 calc(var(--step) * 0.6); position: relative; }
.section--tight { padding: calc(var(--step) * 0.62) 0; }
/* Two sections in a row: one's bottom and the next one's top added up to
   2 × step (259 px at 1440) — a void between the end of the text and the
   next heading's rule. The second gets a quarter-step top: ~165 px at 1440. */
.section:not(.section--panel) + .section:not(.section--panel),
.reel-band + .section:not(.section--panel) { padding-top: calc(var(--step) * 0.25); }

/* A panel slightly lighter than the background instead of a colour field:
   on a dark scheme this is what reads as a change of section. */
.section--panel { background: var(--surface); }

/* Heading on the left, note on the right, with the note's last line on
   the same baseline as the heading's last line. Plain baseline aligned
   the first lines, and a two-line note hung below. */
.section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 36ch);
    column-gap: clamp(24px, 4vw, 64px);
    row-gap: 12px;
    align-items: end;             /* fallback for older browsers */
    align-items: last baseline;
    border-top: 1px solid var(--line-strong);
    padding-top: clamp(20px, 2.4vw, 28px);
    margin-bottom: clamp(30px, 4vw, 52px);
}

.section-title {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.022em;
    font-size: var(--fs-h2);
    line-height: 1.05;
    margin: 0;
}
.section-note {
    font-family: var(--font-body);
    font-size: var(--fs-text);
    line-height: 1.5;
    color: var(--text-dim);
    margin: 0;
}
/* Without a note the heading needn't reserve room for the right column. */
.section-head > .section-title:only-child { grid-column: 1 / -1; }
@media (max-width: 720px) {
    .section-head { grid-template-columns: minmax(0, 1fr); }
}

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

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(8, 8, 10, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 62px;
}
/* The logo doesn't shrink: the header squeezed its width at a fixed
   height and the wordmark got squashed (by half at 390 px). */
.wordmark { display: block; flex: none; }
.wordmark img { max-width: none; }
.wordmark img { height: 28px; width: auto; }

.site-nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 32px); }
.site-nav a {
    font-weight: 500;
    font-family: var(--font-label);
    font-size: var(--fs-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-dim);
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
}
.site-nav a:hover { color: var(--text); border-bottom-color: var(--line-strong); }
.site-nav .is-accent { color: var(--accent); }
.site-nav .is-accent:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* --- Buttons -------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Right padding is reduced by the letter-spacing: tracking also trails
       the last letter, and without this the text sat left of centre. */
    /* 12 px text: the 15 px line keeps the height, 43 px padding the width. */
    padding: 16px calc(43px - 0.05em) 16px 43px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--fs-btn);
    line-height: 15px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover { background: rgba(239, 238, 234, 0.1); border-color: var(--text); }

.btn--accent {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.btn--accent:hover { background: #d9528e; border-color: #d9528e; }

.btn--light { background: var(--text); border-color: var(--text); color: var(--bg); }
.btn--light:hover { background: #fff; border-color: #fff; color: var(--bg); }

/* --- About ---------------------------------------------------------------- */

.about-section { padding-bottom: calc(var(--step) * 0.55); }

.about {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 80px);
    align-items: center;
}
.about__photo img {
    width: 100%;
    /* 4:3, not square: a half-screen square was almost twice as tall as
       the text beside it (≈790 px vs ≈460 at 1920). */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 20%;   /* face centred in frame */
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--surface);
}
.about__text {
    padding-right: max(var(--gutter), calc((100vw - var(--measure)) / 2 + var(--gutter)));
}
.about__name { font-size: var(--fs-h2); margin-bottom: 18px; }
.about__lead { max-width: 34ch; margin-bottom: 26px; }
.about__link { margin: 28px 0 0; }

.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.facts li {
    padding-left: 20px;
    position: relative;
    font-size: var(--fs-small);
    line-height: 1.55;
    max-width: 46ch;
    color: var(--text-dim);
}
.facts li b { color: var(--text); }
.facts li::before {
    content: '';
    position: absolute; left: 0; top: 0.72em;
    width: 10px; height: 1px; background: var(--accent);
}
.price { display: flex; align-items: baseline; gap: 10px; }
.price__now {
    font-family: var(--font-display);
    font-size: var(--fs-num);
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.price__was { font-size: 14px; color: var(--text-faint); text-decoration: line-through; }

/* --- Student work strip --------------------------------------------------- */

.strip {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.strip img {
    flex: 0 0 clamp(158px, 20vw, 236px);
    min-width: 0;
    aspect-ratio: 9 / 16;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-sm);
    scroll-snap-align: start;
    background: var(--surface);
}
/* Reviews are landscape chat screenshots, 678×599. Cropped to 9:16 only
   the middle remained and the text was cut off on both sides. */
.strip--reviews img {
    flex-basis: clamp(260px, 28vw, 340px);
    aspect-ratio: 678 / 599;
    /* Removes the screenshot's dark chat background so it blends into the
       page. The bubble background is #1A1A1A (10% lightness); contrast(1.3)
       takes it to black, and screen blends black into the page background. */
    background: none;
    filter: contrast(1.3);
    mix-blend-mode: screen;
}
/* The strip can be dragged with a mouse — site.js. */
@media (pointer: fine) {
    .strip { cursor: grab; }
    .strip img { -webkit-user-drag: none; user-select: none; }
}
.strip.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.strip::-webkit-scrollbar { height: 4px; }
.strip::-webkit-scrollbar-track { background: var(--surface); }
.strip::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

/* --- Student case studies --------------------------------------------------
   Card: photo (640×413 frame, corners rounded in CSS), name, status pill,
   story, link to the case. Three per row; an incomplete last row is
   centred. On phones and tablets —
   a swipeable carousel. */
.cases {
    --cases-gap: clamp(16px, 2vw, 26px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--cases-gap);
}
.case {
    flex: 0 0 calc((100% - 2 * var(--cases-gap)) / 3);
    min-width: 0;            /* a long word must not stretch the card and break the row */
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px) 0;
    display: flex;
    flex-direction: column;
    transition: scale 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
/* A black shadow is invisible on a near-black background, so a faint light halo is added under the card. */
@media (hover: hover) and (min-width: 768px) {
    .case { position: relative; }
    .case:hover {
        z-index: 1;          /* otherwise the next row covers the shadow */
        scale: 1.02;
        border-color: rgba(255, 255, 255, 0.16);
        box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.9), 0 28px 56px -22px rgba(255, 255, 255, 0.22);
    }
}
.case__photo { width: 100%; height: auto; aspect-ratio: 640 / 413; object-fit: cover; border-radius: var(--radius-sm); }
.case__name {
    margin: clamp(18px, 2vw, 26px) 0 0;
    font-family: var(--font-display);
    font-weight: 400;
    /* A long first name plus surname (or handle) wraps to a second line,
       so the name stays large. On one line the longest only fits at a
       size of about 9% of the card width (20–28 px). */
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
/* First name on line one, surname or handle on line two, the same on every card. */
.case__last { display: block; }
/* A handle takes the surname's place at the same size, but lowercase so it reads as a handle. */
.case__handle { text-transform: none; letter-spacing: -0.03em; }
.case__badge {
    align-self: flex-start;
    margin: 14px 0 0;
    padding: 6px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 300;
    color: var(--text-dim);
}
.case__text {
    margin: clamp(18px, 2vw, 26px) 0 clamp(22px, 2.4vw, 30px);
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--text-dim);
}
.case__link {
    margin-top: auto;
    padding: 18px 0 20px;
    border-top: 1px solid var(--line-strong);
    text-align: center;
    font-size: var(--fs-text);
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    transition: color 0.2s ease;
}
.case__link:hover { color: var(--accent); }
@media (max-width: 1000px) {
    /* Carousel: a card is 82% of the screen and the next one peeks in, signalling it scrolls. */
    .cases {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin: 0 calc(-1 * var(--gutter));
        padding: 0 var(--gutter) 6px;
        scroll-padding: 0 var(--gutter);
        scrollbar-width: none;
    }
    .cases::-webkit-scrollbar { display: none; }
    .case { flex: 0 0 min(82%, 360px); scroll-snap-align: start; }
}
/* --- Legal pages (/oferta/, /privacy/) ------------------------------------
   Text for reading: narrow column, regular size, sections with a rule. */
.legal__wrap { max-width: 820px; }
.legal__title { margin-top: 6px; }
.legal__sub { margin: 14px 0 0; }
.legal__body { margin-top: clamp(28px, 4vw, 48px); color: var(--text-dim); font-size: var(--fs-text); line-height: 1.65; }
.legal__body h2 {
    margin: clamp(36px, 4vw, 52px) 0 16px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-h3);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--text);
}
.legal__body p { margin: 0 0 14px; }
.legal__body ul { margin: 0 0 14px; padding-left: 20px; }
.legal__body li { margin-bottom: 6px; }
.legal__body b { color: var(--text); font-weight: 500; }
.legal__body a { color: var(--text); text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
.legal__formula {
    padding: 14px 18px;
    border-left: 2px solid var(--accent);
    background: var(--surface);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text);
}
.colophon a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 0.25em; }
.colophon a:hover { color: var(--text); }

/* --- 404 -------------------------------------------------------------------
   Narrow column, like the legal pages; courses as pills, so that any
   outdated URL is one step away from them. */
.notfound { min-height: 62vh; }
.notfound__wrap { max-width: 820px; }
.notfound .lead { margin: 16px 0 0; max-width: 46ch; }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.notfound__courses {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: clamp(36px, 5vw, 56px);
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
.notfound__courses a {
    padding: 9px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: var(--fs-small);
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.notfound__courses a:hover { color: var(--text); border-color: var(--accent); }

/* --- FAQ ------------------------------------------------------------------ */

.faq { border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(17px, 2.2vw, 25px) 0;
    background: none;
    border: 0;
    font-family: var(--font-body);
    font-size: var(--fs-row);
    line-height: 1.3;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.faq__sign { flex: 0 0 auto; width: 22px; height: 22px; position: relative; }
.faq__sign::before, .faq__sign::after {
    content: '';
    position: absolute;
    background: var(--text-dim);
    transition: transform 0.26s ease;
}
.faq__sign::before { left: 0; right: 0; top: 50%; height: 1px; }
.faq__sign::after  { top: 0; bottom: 0; left: 50%; width: 1px; }
.faq__item.is-open .faq__sign::after { transform: scaleY(0); }

.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
    margin: 0 0 20px;
    max-width: 68ch;
    font-size: var(--fs-text);
    line-height: 1.6;
    color: var(--text-dim);
}

/* --- Closing and contacts ------------------------------------------------- */

/* The gap from the last question to the photo below was ~215 px (section
   bottom + footer top) — halved. */
main > .section:last-child { padding-bottom: calc(var(--step) * 0.5); }
footer.section--tight { padding-top: calc(var(--step) * 0.31); }
.closing { text-align: center; position: relative; }
.closing__face {
    width: 128px; height: 128px;
    object-fit: cover;
    border-radius: 999px;   /* separate face crop — about-face.webp */
    margin: 0 auto 26px;
    border: 1px solid var(--line-strong);
}
.closing .section-title { margin-bottom: 14px; }
.closing p { margin: 0 auto 8px; max-width: 46ch; }
.closing .btn { margin-top: 30px; }

.contacts {
    margin-top: clamp(44px, 6vw, 80px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
.socials { display: flex; gap: 12px; }
.socials a {
    width: 44px; height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    display: grid; place-items: center;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.socials a:hover { background: rgba(239, 238, 234, 0.1); border-color: var(--text); }
/* Icons share the text colour via currentColor: coloured logos would
   clash with the dark palette. On hover they brighten with the border. */
.socials a { color: var(--text-dim); }
.socials a:hover { color: var(--text); }
.socials__icon { width: 18px; height: 18px; fill: currentColor; }
.colophon { font-family: var(--font-label); font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }

/* --- Carousels -----------------------------------------------------------
   Yana's work, student work, design examples. They scroll on their own and
   can be stopped, held, or flung either way — motion is driven by
   site.js. The CSS animation below is a fallback if the script fails to load.
   -------------------------------------------------------------------------- */

.reel-band { padding: clamp(30px, 4vw, 56px) 0 calc(var(--step) * 0.6); position: relative; z-index: 1; }
.reel-band .wrap { margin-bottom: 22px; }
.reel-band .eyebrow { margin-bottom: 0; }
/* Label left, link to the portfolio section right, on one line down to 360 px. */
.reel-band__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.reel-band__more { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; white-space: nowrap; }
.reel-band__more:hover { color: var(--text); }

.reel {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: reel-slide 64s linear infinite;
}
.reel-viewport { overflow: hidden; }
.reel-viewport:hover .reel { animation-play-state: paused; }
.reel.is-driven { animation: none; will-change: transform; }

/* Script-driven: draggable by mouse and finger. pan-y leaves vertical page
   scrolling to the browser. */
.reel-viewport.is-live { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.reel-viewport.is-dragging { cursor: grabbing; }
.reel-viewport.is-live img { pointer-events: none; -webkit-user-drag: none; }

/* Carousel inside the text column; edge to edge on mobile, like the top one. */
.reel-viewport--inset { border-radius: var(--radius-sm); }
@media (max-width: 720px) {
    .reel-viewport--inset { margin: 0 calc(-1 * var(--gutter)); border-radius: 0; }
}
.reel img {
    flex: 0 0 clamp(158px, 17vw, 236px);
    min-width: 0;
    aspect-ratio: 9 / 16;
    height: auto;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--surface);
}
/* Carousel with mixed aspect ratios (5:7 and narrower): one height — the
   same as the 9:16 carousel — and width per image; cropping to 9:16 cut
   off the edges. */
.reel--natural img {
    flex: 0 0 auto;
    width: auto;
    height: clamp(281px, 30.2vw, 420px);
    aspect-ratio: auto;
    object-fit: contain;
}
@keyframes reel-slide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (max-width: 720px) {

    .reel-band { padding-top: var(--step); }
}

@media (prefers-reduced-motion: reduce) {
    .reel { animation: none; }
}

/* --- Mobile layout --------------------------------------------------------
   Designed separately: on a narrow screen the hero is a full-width image
   with a dark overlay and text on top.
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
    .about { grid-template-columns: 1fr; }
    .about__photo img { aspect-ratio: 4 / 3; object-position: 50% 20%; border-radius: 0; }
    .about__text { padding-right: var(--gutter); padding-left: var(--gutter); }
}

@media (max-width: 1000px) {
    .eyebrow { font-size: var(--fs-label); letter-spacing: 0.1em; }   /* 14 px wrapped in a narrow column */
}
@media (max-width: 380px) {
    .eyebrow { letter-spacing: 0.05em; }
}

@media (max-width: 720px) {
    .site-nav { gap: 12px; }
    .site-header__inner { gap: 12px; }
    .site-nav a { font-size: 11px; letter-spacing: 0.06em; }
    .wordmark img { height: 22px; }
}
/* Narrow phone: the logo and four items don't fit. «Питання» is
   hidden — the FAQ is at the bottom of the page; «Написати» stays. */
@media (max-width: 411px) {
    .site-nav a[href$="#faq"], .site-nav a[href$="#questions"] { display: none; }
}
@media (max-width: 340px) {
    .wordmark img { height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Fingers need to hit targets: enlarge the touch area without moving the layout.
   Standard technique — padding plus an equal negative margin. */
@media (pointer: coarse) {
    .site-nav a { padding-block: 11px; margin-block: -11px; }
    .wordmark   { padding-block: 13px; margin-block: -13px; }
    .socials a  { width: 46px; height: 46px; }
}