/* Токени — з дизайн-системи Христини (17.10.2026). Сітка, композиція й анімації — за брифом (Fiasco, Kit Studio, TinyWins). */
:root {
  --paper: #FFFFFF;
  --surface: #F5F5F4;
  --blank: #E6E5E2; /* plain stand-in for pictures she has not designed yet */
  --line: #E7E5E4;
  --ink: #1C1A2E;
  --muted: #5E5A6E;
  --lilac: #F3C7FA;
  --accent: #FE4F4E; /* red: arrow cursor and the email button */
  --lilac-soft: #FAE9FD;
  --on-ink: #FFFFFF;
  --on-ink-muted: #A9A6B8;

  --space-8: 8px;
  --space-16: 16px;
  --space-32: 32px;
  --space-64: 64px;
  --radius-sm: 8px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --radius-img: 8px;           /* кути всіх зображень і відео (TinyWins: 8px) */

  /* DM Sans не має кирилиці: українські літери домальовує Onest, схожий гротеск */
  --font-sans: "DM Sans", "Onest", system-ui, sans-serif;

  --margin: var(--space-32);   /* поля сторінки (Fiasco) */
  --gap: var(--space-32);      /* проміжок між картками */
  --section: 120px;            /* великі секції (Fiasco); мінімум space-64 */

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-flip: cubic-bezier(0.165, 0.84, 0.44, 1); /* power4.out, as in the TinyWins work grid: What I offer cards */
  --ease-anticipate: cubic-bezier(0.7, -0.4, 0.3, 1.4);
  --scrim: rgba(28, 26, 46, 0.86);
  --focus: #5B3FE0;
  --shadow-sheet: 0 0 80px rgba(28, 26, 46, 0.14);
  color-scheme: light;
}
@media (max-width: 767px) { :root { --margin: var(--space-16); --gap: var(--space-16); --section: var(--space-64); } }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--blank); }
body {
  margin: 0; background: var(--blank); color: var(--ink);
  font: 400 17px/26px var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
h1, h2, h3, p { margin: 0; font-weight: 400; text-wrap: balance; }
ul { list-style: none; margin: 0; padding: 0; }

/* Type styles from the design system */
.hero { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; }
.display { font-size: clamp(32px, 2.8vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.heading { font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; }
.title { font-size: 20px; line-height: 26px; font-weight: 600; }
.small { font-size: 14px; line-height: 20px; }
.label { font-size: 13px; line-height: 16px; font-weight: 600; }

/* ---------- Placeholders (until the real file loads) ---------- */
.placeholder { position: absolute; inset: 0; background: var(--surface); overflow: hidden; }
.placeholder--reel { background: var(--ink); }
.placeholder span {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  background: var(--c); border-radius: 0;
  animation: drift var(--t, 6s) var(--ease-in-out) infinite alternate;
}
.placeholder span.disc { border-radius: 50%; }
.placeholder__note { position: absolute; left: 50%; top: 12%; transform: translateX(-50%); font-size: 14px; font-weight: 600; color: var(--on-ink); opacity: 0.7; white-space: nowrap; }
@keyframes drift { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }
.has-media > .placeholder, .has-media .placeholder { display: none; }
/* Until her own pictures and videos arrive, every empty slot on the site is one plain grey, no shapes (as on the home page) */
.placeholder { background: var(--blank) !important; }
.placeholder > * { display: none !important; }

/* ---------- Letter roll (Fiasco nav/footer links) ---------- */
.roll { display: inline-flex; overflow: hidden; text-decoration: none; color: inherit; font-size: 17px; line-height: 1.1; font-weight: 600; padding-block: 2px; }
.roll__l { display: inline-block; position: relative; white-space: pre; transition: transform 0.7s var(--ease-anticipate); transition-delay: calc(var(--i) * 20ms); }
.roll__l::after { content: attr(data-l); position: absolute; left: 0; top: 100%; padding-top: 2px; }
.roll:hover .roll__l, .roll:focus-visible .roll__l { transform: translateY(calc(-100% - 2px)); }

/* ---------- Cursor (design system: square, Kit Studio) ---------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
  body:not(.has-cursor) .cursor { display: none; }
  .cursor {
    position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
    width: 16px; height: 16px; background: var(--ink);
    transform: translate(-50%, -50%);
    display: flex; align-items: center; justify-content: center;
    transition: width .25s ease-out, height .25s ease-out, background-color .25s ease-out, opacity .25s ease-out;
  }
  .cursor span { opacity: 0; font-size: 28px; line-height: 1; color: var(--ink); transition: opacity .2s ease-out; }
  /* Arrow over projects (Kit Studio): small 40×33 rectangle, Kit's easing. */
  .cursor.big { width: 40px; height: 33px; background: var(--accent);
    transition: width .28s cubic-bezier(.625,.05,0,1), height .28s cubic-bezier(.625,.05,0,1), background-color .28s cubic-bezier(.625,.05,0,1), opacity .25s ease-out; }
  .cursor.big span { opacity: 1; font-size: 20px; }
  .cursor.on-dark:not(.big) { background: var(--on-ink); }
  /* Links and menu (Case Studio): same size, see-through lilac; in the footer it stays ink, just see-through. */
  .cursor.hover { background: var(--lilac); opacity: 0.5; }
  .cursor.hover.in-footer { background: var(--ink); }
}

/* ---------- 1. Header (Fiasco) ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  padding: calc(env(safe-area-inset-top, 0px) + 24px) var(--margin) 24px;
  color: var(--ink);
  transition: transform 0.8s var(--ease-in-out), background-color 0.8s var(--ease-in-out), box-shadow 0.8s var(--ease-in-out), color 0.4s var(--ease-in-out);
}
.nav.is-hidden { transform: translateY(-180%); }
.nav.is-raised { background: var(--paper); box-shadow: 0 4px 40px rgba(28, 26, 46, 0.06); }
.nav__name { text-decoration: none; white-space: nowrap; color: var(--ink); }
/* Over a dark service hero the header is white; it turns ink again once it gets a background or leaves the hero. */
.nav__name { transition: color 0.4s var(--ease-in-out); }
.nav.on-dark:not(.is-raised), .nav.on-dark:not(.is-raised) .nav__name { color: #fff; }
.nav__links { display: flex; gap: 40px; }
@media (max-width: 560px) { .nav__links { gap: var(--space-16); } .nav__name { font-size: 17px; } .nav .roll { font-size: 15px; } }

/* ---------- Page sheet ---------- */
.sheet {
  position: relative; z-index: 2; background: var(--paper);
  border-radius: 0;
  box-shadow: var(--shadow-sheet);
}

/* ---------- 2. Intro (Fiasco hero; showreel slides over it, Kit) ---------- */
.intro {
  position: sticky; top: 0; z-index: 0;
  /* Sized for one sentence: just enough room below the header, then the showreel slides over it. */
  min-height: clamp(380px, 56vh, 600px); min-height: clamp(380px, 56svh, 600px);
  display: flex; align-items: center; justify-content: center;
  padding: 140px var(--margin) var(--space-64);
}
.intro__text {
  width: 90%; max-width: 1180px; text-align: center;
  font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em;
}
@media (max-width: 767px) { .intro { min-height: 0; padding-top: 120px; } .intro__text { width: 100%; } }

/* ---------- 3. Showreel (TinyWins) ---------- */
.reel-stage { position: relative; z-index: 1; height: 250vh; background: var(--paper); }
.reel-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; padding: var(--margin); }
.reel {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background: var(--ink); color: var(--on-ink); border-radius: var(--radius-img);
  transform-origin: 50% 50%; will-change: transform;
}
.reel__inner { position: absolute; inset: 0; transform: translateY(-20%) scale(1.2); will-change: transform; }
.reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: var(--space-8);
  /* Liquid Glass (iOS 26 "Button / On Dark" from Khrystyna's Figma): blurs whatever plays behind it. */
  padding: 14px 21px; border: 0; border-radius: var(--radius-pill);
  color: #FFFFFF;
  background: rgba(51, 51, 51, 0.3);
  -webkit-backdrop-filter: blur(6px) saturate(1.6) brightness(1.2);
  backdrop-filter: blur(6px) saturate(1.6) brightness(1.2);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.1),
    inset 0 0 16px rgba(242, 242, 242, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font: 600 17px/20px var(--font-sans); letter-spacing: -0.1px;
  cursor: pointer; transition: background-color 0.3s ease-out, box-shadow 0.3s ease-out, opacity 0.4s ease-out;
}
.play:hover { background: rgba(255, 255, 255, 0.14); box-shadow: 0 0 2px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.1),
    inset 0 0 16px rgba(242, 242, 242, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.play__icon { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
@media (max-width: 767px) {
  .reel-stage { height: auto; }
  .reel-sticky { position: relative; height: auto; }
  .reel { aspect-ratio: 4 / 5; height: auto; }
  .reel__inner { transform: none; }
}

/* ---------- 4. Selected works — heading (Fiasco) ---------- */
.works-head { position: relative; z-index: 1; background: var(--paper); padding: var(--section) var(--margin) var(--space-64); display: flex; flex-direction: column; align-items: center; gap: var(--space-16); text-align: center; }
.eyebrow { color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.works-head__title { max-width: 940px; }
.works-head__title { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.2; }
@media (max-width: 767px) { .works-head__title { font-size: 26px; } }

/* ---------- 5. Selected works — projects (Fiasco uneven pinboard) ---------- */
.works {
  position: relative; z-index: 1; background: var(--paper);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap);
  padding: 0 var(--margin) var(--section); align-items: start;
}
.works__col { display: flex; flex-direction: column; gap: 160px; }
.works__col--b { padding-top: 240px; }
.tile { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); width: var(--w, 100%); margin-left: var(--push, 0); }
.tile--narrow { --push: 6%; }
@media (min-width: 1440px) { .tile--narrow { --push: 13%; } }
.tile__frame { position: relative; aspect-ratio: var(--ratio, 4 / 3); max-width: 100%; overflow: hidden; border-radius: var(--radius-img); background: var(--surface); }
.tile__frame img, .tile__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile__over { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s ease-out; }
.tile__over::after { content: ""; position: absolute; inset: 0; background: rgba(28, 26, 46, 0.1); }
.tile:hover .tile__over, .tile:focus-visible .tile__over { opacity: 1; }
.tile__title { margin-top: var(--space-16); align-self: flex-start;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 0.3s var(--ease-out); }
.tile:hover .tile__title, .tile:focus-visible .tile__title { background-size: 100% 2px; }
.tile__line { margin-top: var(--space-8); color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-16); }
.pill { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--blank); color: var(--ink); font-weight: 400; } /* same weight wherever a pill sits */
@media (max-width: 767px) {
  .works { grid-template-columns: 1fr; gap: var(--space-64); }
  .works__col { gap: var(--space-64); }
  .works__col--b { padding-top: 0; }
  .tile { --w: 100% !important; --push: 0 !important; }
  .tile__title { font-size: 22px; line-height: 28px; }
}

/* ---------- 6. Selected clients (Kit Studio) ---------- */
.clients { position: relative; z-index: 1; background: var(--ink); color: var(--on-ink); padding: 200px var(--margin) 120px; border-radius: 0; }
.clients__label { color: var(--on-ink-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 40px; }
.clients__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.clients__list { display: flex; flex-direction: column; gap: 4px; }
.client { font-size: 24px; line-height: 1.15; font-weight: 600; color: var(--on-ink); transition: color 0.25s ease-out; padding-block: 4px; }
.clients__list .client.is-active { color: var(--lilac); }
.clients__media { position: sticky; top: 120px; aspect-ratio: 4 / 5; max-width: 100%; border-radius: var(--radius-img); overflow: hidden; }
.clients__media > div { position: absolute; inset: 0; opacity: 0; }
.clients__media > div.is-active { opacity: 1; }
.clients__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .clients { padding-top: 104px; } .clients__body { grid-template-columns: 1fr; } .clients__media { display: none; } }

/* ---------- 7. Lilac CTA sheet + footer (Fiasco layers) ---------- */
.cta-sheet {
  position: sticky; bottom: 0; z-index: 1;
  min-height: 80vh; min-height: 80svh;
  background: var(--ink); color: var(--on-ink);
  border-radius: var(--radius-img); /* rounded like the pictures */
  box-shadow: var(--shadow-sheet);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 36px; text-align: center;
  padding: 80px var(--margin);
}
.cta-sheet__text { max-width: 12ch; font-size: clamp(36px, 4.4vw, 64px); }
.cta-sheet__mail { font-size: 17px; font-weight: 600; text-decoration: none; padding: 16px 28px; border-radius: var(--radius-pill); background: var(--accent); color: var(--ink); transition: background-color 0.25s ease-out; }
.cta-sheet__mail:hover { background: #FF7170; }

.footer {
  position: sticky; bottom: 0; z-index: 0;
  background: var(--blank); color: var(--ink);
  padding: 80px var(--margin) calc(env(safe-area-inset-bottom, 0px) + 24px);
  display: flex; flex-direction: column; gap: 80px;
}
.footer__top { display: flex; flex-wrap: wrap; gap: 40px 120px; align-items: flex-start; }
.footer__links { display: flex; flex-direction: column; gap: 12px; }
.footer__small { margin-left: auto; color: var(--muted); }
.footer__name { font-size: clamp(56px, 15.8vw, 272px); line-height: 0.95; font-weight: 700; letter-spacing: -0.03em; user-select: none; color: var(--ink); }
.footer__line { display: block; white-space: nowrap; }
/* Letters glide between weights (variable DM Sans): near the cursor a letter thins and leans, then eases back. Widths stay fixed so nothing shuffles. */
.fl { display: inline-block; font-weight: 700; text-align: center; transform-origin: 50% 90%; will-change: transform; }
/* Header name: same motion around its 600 weight (main.js eases each letter every frame). */
.fl--nav { font-weight: 600; }

/* ---------- Shared frame (pictures and loops on inner pages) ---------- */
.frame { position: relative; aspect-ratio: var(--ratio, 16 / 9); max-width: 100%; overflow: hidden; border-radius: var(--radius-img); background: var(--surface); }
.frame img, .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nav .roll[aria-current="page"] { opacity: 0.5; }

/* ---------- Project page: Fiasco case study ---------- */
/* Hero cover sticks to the top; the white sheet with the intro slides over it. */
.case__cover { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100svh; }
.case__cover .frame { height: 100%; aspect-ratio: auto; border-radius: 0; } /* full-bleed cover runs edge to edge */
.case__sheet { position: relative; z-index: 1; background: var(--paper); box-shadow: var(--shadow-sheet); padding-bottom: var(--section); }

.case__intro { padding: var(--space-64) var(--margin) var(--section); display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--space-32); align-items: start; }
.case__back { grid-column: 1 / -1; justify-self: start; text-decoration: none; color: var(--muted); transition: color 0.25s ease-out; }
.case__back:hover { color: var(--ink); }
.case__lead { grid-column: 3 / 10; display: flex; flex-direction: column; gap: var(--space-16); }
.case__title { font-size: clamp(32px, 3.3vw, 48px); line-height: 1.1; }
.case__desc { font-size: 20px; line-height: 30px; color: var(--muted); max-width: 34em; margin-top: var(--space-8); }
.case__info { grid-column: 12 / -1; margin: 0; padding-top: 34px; display: flex; flex-direction: column; gap: var(--space-32); }
.case__info dt { color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-8); }
.case__info dd { margin: 0; font-weight: 600; }
.case__info .pills { margin-top: 0; }

.case__image { padding: 0 var(--margin); }

/* Sections: text starts at column 3 (Fiasco); images run full width or pair up inside columns 3–14. */
.case__body { padding: var(--section) var(--margin) 0; display: flex; flex-direction: column; gap: var(--section); }
.case-part { display: flex; flex-direction: column; gap: var(--space-64); }
.case-text, .case-pair { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--gap); }
.case-text > * { grid-column: 3 / 10; }
.case-part__title { display: flex; align-items: baseline; gap: var(--space-16); margin-bottom: var(--space-16); }
.case-part__num { color: var(--muted); letter-spacing: 0.04em; }
.case-part__text { font-size: 18px; line-height: 28px; color: var(--muted); max-width: 60ch; }
.case-pair { row-gap: var(--gap); align-items: end; }
.case-pair--8-4 > :first-child { grid-column: 3 / 11; }
.case-pair--8-4 > :last-child { grid-column: 11 / 15; }
.case-pair--6-6 > :first-child { grid-column: 3 / 9; }
.case-pair--6-6 > :last-child { grid-column: 9 / 15; }
.case-pair--7-5 > :first-child { grid-column: 3 / 10; }
.case-pair--7-5 > :last-child { grid-column: 10 / 15; }

@media (max-width: 767px) {
  .case__cover { height: 70vh; height: 70svh; }
  .case__intro { grid-template-columns: 1fr; padding-top: var(--space-32); padding-bottom: var(--space-64); }
  .case__lead, .case__info { grid-column: 1 / -1; }
  .case__info { padding-top: 0; flex-direction: row; flex-wrap: wrap; gap: var(--space-16) var(--space-32); }
  .case__desc { font-size: 17px; line-height: 26px; }
  .case__body { gap: var(--space-64); }
  .case-part { gap: var(--space-16); }
  .case-text, .case-pair { grid-template-columns: 1fr; }
  .case-pair > * { grid-column: 1 / -1 !important; }
  .case-part__title { font-size: 24px; }
  .case-part__text { font-size: 17px; line-height: 26px; }
}

.more { padding: var(--section) var(--margin) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--space-32); }
.more__label { grid-column: 1 / 4; }
.more__grid { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.card { display: flex; flex-direction: column; gap: var(--space-8); text-decoration: none; color: var(--ink); }
.card__title { margin-top: var(--space-8); align-self: flex-start; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 0.3s var(--ease-out); }
.card:hover .card__title, .card:focus-visible .card__title { background-size: 100% 2px; }
.card__line { color: var(--muted); }

/* ---------- About page ---------- */
.about { padding-bottom: var(--section); }
.about__intro { min-height: 70vh; min-height: 70svh; padding: 160px var(--margin) var(--section); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-16); text-align: center; }
.about__statement { max-width: 1100px; font-size: clamp(36px, 4.2vw, 60px); }
.about__headline { max-width: 52em; margin-top: var(--space-8); font-size: 17px; line-height: 26px; color: var(--muted); }
.about__headline:empty { display: none; }
.about__bio-row { padding: 0 var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.about__portrait { grid-column: 1 / 6; }
.about__bio { grid-column: 7 / 12; display: flex; flex-direction: column; gap: var(--space-16); font-size: 20px; line-height: 30px; }
.about__block { padding: var(--section) var(--margin) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--space-32); }
.about__block > .eyebrow { grid-column: 1 / 4; padding-top: 10px; }
.services { grid-column: 4 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16) var(--gap); }
.services .service { padding-bottom: var(--space-16); border-bottom: 1px solid var(--line); }
.jobs { grid-column: 4 / -1; display: flex; flex-direction: column; }
.job { display: grid; grid-template-columns: 2fr 3fr 3fr; gap: var(--gap); align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line); }
.job:first-child { border-top: 1px solid var(--line); }
.job__years { color: var(--muted); font-variant-numeric: tabular-nums; }
.job__role { color: var(--muted); }
.about__contact { padding: var(--section) var(--margin) 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-16); text-align: center; }
.about__mail { text-decoration: none; overflow-wrap: anywhere; background: linear-gradient(var(--lilac), var(--lilac)) 0 92% / 0 0.3em no-repeat; transition: background-size 0.4s var(--ease-out); }
.about__mail:hover, .about__mail:focus-visible { background-size: 100% 0.3em; }
.about__line { color: var(--muted); }

/* ---------- What I offer (home, TinyWins): dark band, big title + lead, four cards of different widths ---------- */
.offer { position: relative; z-index: 1; background: var(--paper); color: var(--ink); padding: var(--section) var(--margin); }
/* Title: same size and spacing as the Selected works heading */
.offer__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); text-align: center; margin-bottom: var(--space-64); }
.offer__title { max-width: 940px; }
.offer__row { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.45fr; gap: var(--space-16); } /* tighter, like the TinyWins work pairs */
.offer-card { display: flex; flex-direction: column; gap: var(--space-16); text-decoration: none; color: var(--ink); }
.offer-card__media { height: clamp(300px, 31vw, 460px); isolation: isolate; }
/* Until a card has its own picture: one plain neutral colour, no shapes */
.offer-card__media .placeholder { background: var(--blank) !important; }
.offer-card__media .placeholder > * { display: none; }
/* Hover (TinyWins): only the picture grows, slowly and a little; the frame stays put */
.offer-card__media > * { transition: transform 1.2s var(--ease-out); }
.offer-card:hover .offer-card__media > *, .offer-card:focus-visible .offer-card__media > * { transform: scale(1.05); }
.offer-card__title { display: flex; align-items: baseline; gap: 10px; font-size: 20px; line-height: 26px; font-weight: 500; }
.offer-card__num { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; }
.offer-card__text { color: var(--muted); max-width: 34ch; margin-top: calc(var(--space-8) * -1); }
/* Hover video: fades in over the static cover once it starts, fades out when the card is left */
.offer-card__media .offer-card__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s ease-out, transform 0.5s var(--ease-flip); }
.offer-card__media .offer-card__clip.is-playing { opacity: 1; }
/* Description: hidden until the card is hovered, then fades up gently (space is kept, so nothing jumps) */
@media (hover: hover) and (pointer: fine) {
  .offer-card__text { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }
  .offer-card:hover .offer-card__text, .offer-card:focus-visible .offer-card__text { opacity: 1; transform: none; }
}
/* Experiment (20.10): with a mouse on wide screens the four cards start equal; the hovered one widens to the Motion Design width
   (1.7 parts of 5.15), the other three narrow to share the rest, so the row keeps its total width. main.js sets .is-active. */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .offer__row { display: flex; align-items: flex-start; }
  /* Widths are eased by main.js frame by frame (measured from Khrystyna's TinyWins recording), not by a CSS transition */
  .offer-card { flex: 1.2875 1 0; min-width: 0; }
  /* Picture zoom runs on the same curve and duration as the widening, so the two move as one */
  .offer-card__media > * { transition: transform 0.5s var(--ease-flip); }
  /* Title is set to the narrow card width, so it wraps the same way in every state and never jumps */
  .offer-card__title { width: calc((100vw - 2 * var(--margin) - 3 * var(--space-16)) * 0.2233); }
  .offer-card.is-active .offer-card__media > * { transform: scale(1.05); }
  /* Description is set at its open width (so it never rewraps mid-motion) and fades in once the card has mostly opened */
  .offer-card__text { width: 34ch; max-width: none; pointer-events: none; transition: opacity 0.35s ease-out, transform 0.35s ease-out; }
  .offer-card.is-active .offer-card__text { opacity: 1; transform: none; transition: opacity 0.5s var(--ease-flip) 0.12s, transform 0.58s var(--ease-flip) 0.12s; }
  /* Titles and descriptions rewrap as cards change width; room for a 2-line title and 3-line description keeps the section height steady */
  .offer-card { min-height: calc(clamp(300px, 31vw, 460px) + 136px); }
}
@media (max-width: 1023px) { .offer__row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .offer__head { margin-bottom: var(--space-32); }
  /* Phones: cards scroll sideways, like the More work strip */
  .offer__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-16); margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); }
  .offer-card { flex: 0 0 80%; scroll-snap-align: start; }
  .offer-card__media { height: 360px; }
}

/* ---------- Service pages: project-page hero + intro, then a story of text and work ---------- */
.svc-services { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.svc-story { padding: var(--section) var(--margin) 0; display: flex; flex-direction: column; gap: var(--space-64); }
.svc-text__body { grid-column: 3 / 10; }
.svc-steps { margin: var(--space-16) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 18px; line-height: 28px; }
.svc-steps li { position: relative; padding-left: 22px; }
.svc-steps li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 8px; height: 8px; background: var(--lilac); }
.svc-tools { margin-top: var(--space-16); color: var(--ink); }
.svc-media { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--gap); align-items: end; }
.svc-media--one > * { grid-column: 1 / -1; }
.svc-media--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-fig { margin: 0; }
/* Annotations: small and secondary to the picture */
.svc-cap { display: flex; flex-wrap: wrap; gap: 4px var(--space-32); padding-top: 12px; font-size: 13px; line-height: 18px; color: var(--muted); }
.svc-cap__item { display: inline-flex; gap: 6px; }
.svc-cap__key { font-weight: 600; color: var(--ink); text-transform: uppercase; letter-spacing: 0.04em; font-size: 13px; line-height: 18px; margin-right: 6px; } /* label size from the type scale */
.svc-cap__item .svc-cap__key { margin-right: 0; }
a.svc-cap__val { color: inherit; text-decoration: underline; text-decoration-color: var(--lilac); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.service__others { padding: var(--section) var(--margin) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.service__others > .eyebrow { grid-column: 1 / 4; padding-top: 10px; }
.service__list { grid-column: 4 / -1; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.service__link { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: padding-left .4s var(--ease-out); }
.service__link:hover, .service__link:focus-visible { padding-left: 12px; }
@media (max-width: 767px) {
  .svc-story { gap: var(--space-32); }
  .svc-text__body { grid-column: 1 / -1; }
  .svc-steps { font-size: 17px; line-height: 26px; }
  .svc-media { grid-template-columns: 1fr; }
  .svc-media > * { grid-column: 1 / -1 !important; }
  .service__others > .eyebrow, .service__list { grid-column: 1 / -1; }
  .service__list { padding-top: var(--space-16); }
}

/* ---------- Policies page (About grid: label left, text right) ---------- */
.policies { padding-bottom: var(--section); }
.policies__intro { min-height: 0; padding-bottom: 0; }
.policy > .eyebrow { padding-top: var(--space-16); border-top: 1px solid var(--line); }
.policy__text p { text-wrap: pretty; }
.policy { padding-top: var(--space-64); }
.policy__text { grid-column: 4 / 11; display: flex; flex-direction: column; gap: var(--space-16); font-size: 18px; line-height: 28px; padding-top: var(--space-16); border-top: 1px solid var(--line); }
.policy__text a { color: inherit; text-decoration: underline; text-decoration-color: var(--lilac); text-decoration-thickness: 0.15em; text-underline-offset: 0.2em; }

@media (max-width: 767px) {
  .more__label, .more__grid,
  .about__portrait, .about__bio, .about__block > .eyebrow, .services, .jobs, .policy__text { grid-column: 1 / -1; grid-row: auto; }
  .policy { row-gap: var(--space-16); }
  .policy > .eyebrow { border-top: 0; padding-top: 0; }
  .policy__text { font-size: 17px; line-height: 26px; }
  .more__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-16); margin-inline: calc(var(--margin) * -1); padding-inline: var(--margin); }
  .card { flex: 0 0 80%; scroll-snap-align: start; }
  .about__intro { min-height: 0; padding-top: 140px; }
  .about__bio-row { row-gap: var(--space-32); }
  .about__bio { font-size: 17px; line-height: 26px; }
  .services { grid-template-columns: 1fr; }
  .services .service { font-size: 22px; line-height: 28px; }
  .job { grid-template-columns: 1fr; gap: 4px; }
  .about__mail { font-size: 32px; }
}

/* ---------- Lightbox ---------- */
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: var(--margin); border: 0; background: transparent; color: var(--on-ink); }
.lightbox::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox__frame { position: relative; width: min(100%, 1600px); aspect-ratio: 16 / 9; max-height: 100%; background: var(--ink); border-radius: var(--radius-img); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.lightbox__frame video { width: 100%; height: 100%; object-fit: contain; }
.lightbox__empty { font-size: 22px; font-weight: 600; opacity: 0.8; }
.lightbox__close { position: absolute; top: var(--margin); right: var(--margin); width: 48px; height: 48px; border: 0; border-radius: var(--radius-pill); background: var(--lilac); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }

/* ---------- Reveal (design system: 300–500 ms, soft ease-out) ---------- */
.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out); transition-delay: calc(var(--i, 0) * 0.1s); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .reel-stage { height: auto; }
  .reel-sticky { position: relative; }
  .reel { aspect-ratio: 16 / 9; height: auto; }
  .reel__inner { transform: none; }
}

/* Showreel is live; until the video loads the frame is plain grey. */
.reel { background: var(--blank); }
.reel .placeholder--reel { display: none !important; }
.works .tile__frame { background: var(--blank); }

/* Logofolio-style case (content.js projects[].clients): logo animation full width, two branding pictures side by side under it. */
.case__body--clients .case-part.lf-client { gap: var(--gap); }
.case__body--clients .case-part.lf-client > .case-text { margin-bottom: calc(var(--space-64) - var(--gap)); }
.lf-client__pair.case-pair--6-6 > :first-child { grid-column: 1 / 9; }
.lf-client__pair.case-pair--6-6 > :last-child { grid-column: 9 / -1; }

/* Service and project pages: same shorter 2:1 hero (her wish, 2026-11-04). */
.case .case__cover { width: 100%; height: auto; aspect-ratio: 2 / 1; max-height: 75vh; max-height: 75svh; }