/* =========================================================================
   Кадр — a theme for a creative agency / production studio.
   Child of «Default»: its stylesheet is imported first, this file restyles.

   ART DIRECTION
   Black and white with one loud colour — the red-orange of a camera's REC
   light (#FF4410). Paper is a slightly warm off-white, ink is near-black;
   the accent is never text on paper (it fails contrast), only fills,
   numbers on black and the cursor label.

   Type: Unbounded — wide, geometric, with a real Cyrillic — set very large
   and tight for everything that is a statement; Manrope for reading and
   for the small uppercase labels that act as the page's "technical
   captions" ((01), MSK 14:32, 4K · 24 FPS).

   Structure: no cards, no shadows, no radii (except pills). Hairlines, an
   asymmetric 12-column grid with offset rows, pictures as large as the
   screen allows. Sections are counted like takes: (01), (02)…

   Motion: marquees, a pointer label and a one-time rise of headings —
   every one of them off under prefers-reduced-motion.
   ========================================================================= */

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

/* --- fonts (shipped with the default theme) ------------------------------ */
@font-face {
    font-family: 'Kadr Display';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../../../default/assets/fonts/unbounded-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: 'Kadr Display';
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
    src: url("../../../default/assets/fonts/unbounded-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: 'Kadr Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../../../default/assets/fonts/manrope-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: 'Kadr Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../../../default/assets/fonts/manrope-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;
}

/* Alternatives offered in the design settings; downloaded only when chosen. */
@font-face {
    font-family: 'Kadr Onest';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../../../default/assets/fonts/onest-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: 'Kadr Onest';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../../../default/assets/fonts/onest-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: 'Kadr Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../../../default/assets/fonts/inter-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: 'Kadr Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../../../default/assets/fonts/inter-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;
}

/* The owner's design settings (theme.json → design.controls, «Дизайн →
   Настройки шаблона»). Core prints the chosen values as :root{--kadr-…}
   after this file, so these are only the defaults; the tokens below
   derive from them. */
:root {
    --kadr-accent: #ff4410;
    --kadr-accent-text: #c43200;
    --kadr-font-display: 'Kadr Display', 'Unbounded', 'Arial Black', system-ui, sans-serif;
    --kadr-font-body: 'Kadr Sans', 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --kadr-radius: 0px;
}

/* -------------------------------------------------------------------------
   1. Tokens. `:root:root` outranks the site's /design.css (printed after
   this file): Кадр is an opinionated theme and keeps its own palette.
   ------------------------------------------------------------------------- */
:root:root {
    --k-ink: #0c0c0c;
    --k-ink-2: #1a1a1a;
    --k-paper: #f2f0eb;
    --k-paper-2: #e7e4dc;
    --k-accent: var(--kadr-accent);
    --k-accent-ink: var(--kadr-accent-text);     /* the accent as text on paper, 5:1 */
    --k-grey: #6b6a66;
    --k-grey-light: #a3a19b;
    --k-line: rgb(12 12 12 / 0.16);
    --k-line-light: rgb(242 240 235 / 0.2);

    --c-bg: var(--k-paper);
    --c-surface: #faf9f6;
    --c-surface-sunk: var(--k-paper-2);
    --c-text: #161616;
    --c-text-strong: var(--k-ink);
    --c-text-muted: #55544f;
    --c-text-faint: #7c7b76;
    --c-border: var(--k-line);
    --c-border-strong: rgb(12 12 12 / 0.4);
    --c-accent: var(--k-accent);
    --c-accent-hover: var(--k-ink);
    --c-accent-soft: #ffe1d6;
    --c-accent-contrast: var(--k-ink);
    --c-link: var(--k-ink);
    --c-link-hover: var(--k-accent-ink);
    --c-mark: var(--k-accent);
    --c-mark-text: var(--k-accent-ink);
    --c-mark-soft: #ffe1d6;
    --c-slab: var(--k-ink);
    --c-slab-text: var(--k-paper);
    --c-slab-muted: var(--k-grey-light);

    --font-display: var(--kadr-font-display);
    --font-ui: var(--kadr-font-body);
    --font-prose: var(--font-ui);
    --fw-heading: 700;

    --r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-btn: 999px;
    --card-radius: 0; --card-shadow: none; --card-bg: transparent;
    --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-lift: none;

    --w-container: 100rem;
    --w-wide: 120rem;
    --w-prose: 44rem;
    --gutter: clamp(1rem, 3.4vw, 3.25rem);
    --k-head: 4.75rem;              /* the fixed header's height */
    --k-ease: cubic-bezier(0.2, 0.7, 0.1, 1);

    --sp-sm: clamp(2.5rem, 2rem + 2.5vw, 4rem);
    --sp-md: clamp(4rem, 3rem + 5vw, 8rem);
    --sp-lg: clamp(5.5rem, 4rem + 7vw, 11rem);
    --sp-xl: clamp(7rem, 5rem + 10vw, 14rem);

    color-scheme: light;
    scroll-padding-top: var(--k-head);
}

/* The dark "take": sections toned dark, the footer, the case's black bands. */
:root .cms-tone-dark,
:root .cms-on-dark,
.k-ink {
    --section-bg: var(--k-ink);
    --c-bg: var(--k-ink);
    --c-surface: var(--k-ink-2);
    --c-surface-sunk: #151515;
    --c-text: #e9e7e1;
    --c-text-strong: var(--k-paper);
    --c-text-muted: var(--k-grey-light);
    --c-text-faint: #85837d;
    --c-border: var(--k-line-light);
    --c-border-strong: rgb(242 240 235 / 0.45);
    --c-accent: var(--k-accent);
    --c-accent-hover: var(--k-paper);
    --c-accent-contrast: var(--k-ink);
    --c-link: var(--k-paper);
    --c-link-hover: var(--k-accent);
    --c-mark-text: var(--k-accent);
    color-scheme: dark;
}
:root .cms-tone-soft { --section-bg: var(--k-paper-2); --c-bg: var(--k-paper-2); }
:root .cms-tone-primary,
:root .cms-tone-accent {
    --section-bg: var(--k-accent);
    --c-bg: var(--k-accent);
    --c-text: var(--k-ink);
    --c-text-strong: var(--k-ink);
    --c-text-muted: #3b1305;
    --c-border: rgb(12 12 12 / 0.25);
    --c-accent: var(--k-ink);
    --c-accent-hover: var(--k-paper);
    --c-accent-contrast: var(--k-paper);
    --c-link: var(--k-ink);
}

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */
body {
    background: var(--k-paper);
    color: var(--c-text);
    font-family: var(--font-ui);
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
    counter-reset: ksec;
}
::selection { background: var(--k-accent); color: var(--k-ink); }
:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 3px; border-radius: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; }
a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--k-accent); }
html.k-menu-open { overflow: hidden; }

.k-wrap { max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--gutter); }
.k-hl { font-style: normal; color: var(--k-accent); }
.cms-tone-soft .k-hl { color: var(--k-accent-ink); }
.cms-tone-accent .k-hl, .cms-tone-primary .k-hl, .k-strip .k-hl { color: var(--k-paper); }

.k-label {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-muted);
}
.k-label a { color: inherit; text-decoration: none; }
.k-label a:hover { color: var(--c-text-strong); }
.k-label--light { color: var(--k-grey-light); }

.k-dot {
    display: inline-block;
    width: 0.32em;
    height: 0.32em;
    margin-left: 0.08em;
    border-radius: 50%;
    background: var(--k-accent);
    vertical-align: baseline;
}
.k-rec {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0.55rem;
    border-radius: 50%;
    background: var(--k-accent);
    vertical-align: 0.05em;
}
@media (prefers-reduced-motion: no-preference) {
    .k-rec { animation: k-blink 1.6s steps(2, jump-none) infinite; }
}
@keyframes k-blink { 50% { opacity: 0.15; } }

/* Buttons: pills. Primary is the accent with ink text (the accent never
   carries white text — it would fail contrast). */
:root .cms-btn,
.k-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 3.25rem;
    padding: 0 1.6rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s var(--k-ease), color 0.25s var(--k-ease), border-color 0.25s var(--k-ease);
}
:root .cms-btn--primary,
.k-btn--accent { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-accent-contrast); }
:root .cms-btn--primary:hover,
.k-btn--accent:hover { background: var(--c-text-strong); border-color: var(--c-text-strong); color: var(--c-bg); }
:root .cms-tone-accent .cms-btn--primary:hover,
:root .cms-tone-primary .cms-btn--primary:hover { background: var(--k-paper); border-color: var(--k-paper); color: var(--k-ink); }
:root .cms-btn--ghost { background: transparent; border-color: currentColor; color: var(--c-text-strong); }
:root .cms-btn--ghost:hover { background: var(--c-text-strong); border-color: var(--c-text-strong); color: var(--c-bg); }
.k-btn--ink { background: var(--k-ink); border-color: var(--k-ink); color: var(--k-paper); }
.k-btn--ink:hover { background: var(--k-paper); border-color: var(--k-paper); color: var(--k-ink); }
.k-btn--line { background: transparent; border-color: currentColor; color: var(--c-text-strong); }
.k-btn--line:hover { background: var(--c-text-strong); color: var(--c-bg); }
.k-btn--xl { min-height: 4.25rem; padding: 0 2.25rem; font-size: 1.0625rem; }
.k-btn__arrow { font-size: 1.2em; line-height: 1; transition: transform 0.3s var(--k-ease); }
.k-btn:hover .k-btn__arrow { transform: translateX(0.3rem); }

/* A link set as a big pill: "Все проекты →". */
.k-bigbtn {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.1rem 1.1rem 1.1rem 2rem;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    color: var(--c-text-strong);
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1rem + 0.6vw, 1.6rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-decoration: none;
    transition: background-color 0.3s var(--k-ease), color 0.3s var(--k-ease);
}
.k-bigbtn__arrow {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--k-accent);
    color: var(--k-ink);
    font-size: 1.3rem;
    transition: transform 0.4s var(--k-ease);
}
.k-bigbtn:hover { background: var(--c-text-strong); color: var(--c-bg); }
.k-bigbtn:hover .k-bigbtn__arrow { transform: rotate(-45deg); }

.k-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.k-links--col { flex-direction: column; }
.k-links a { color: inherit; text-decoration: none; }
.k-links a:hover { color: var(--k-accent); }

.k-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.k-tags li {
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--c-border-strong);
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
}

.k-empty { padding: var(--sp-md) var(--gutter); max-width: var(--w-wide); margin-inline: auto; }
.k-empty__title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 700; }

/* -------------------------------------------------------------------------
   3. Header — wordmark, timecode, menu button. Blended with `difference`
   so it reads on black, paper and photographs alike.
   ------------------------------------------------------------------------- */
.k-hdr {
    position: fixed;
    inset: 0 0 auto;
    z-index: 60;
    color: #fff;
    mix-blend-mode: difference;
    pointer-events: none;
}
.k-hdr__bar {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 1.5rem;
    height: var(--k-head);
    padding-inline: var(--gutter);
}
.k-hdr__bar > * { pointer-events: auto; }
.k-hdr__logo {
    display: inline-flex;
    align-items: baseline;
    color: inherit;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-decoration: none;
    text-transform: uppercase;
}
.k-hdr__logo .k-dot { background: currentColor; }
.k-hdr__logo-img { max-height: 2.25rem; width: auto; filter: brightness(0) invert(1); }
.k-hdr__tagline,
.k-hdr__clock {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
.k-hdr__tagline { justify-self: center; opacity: 0.85; }
.k-hdr__clock .k-rec { background: currentColor; }
.k-burger {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 2.75rem;
    padding: 0 0.6rem 0 1.25rem;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.k-burger__lines {
    display: grid;
    gap: 5px;
    place-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: currentColor;
}
.k-burger__lines span { display: block; width: 0.9rem; height: 1.5px; background: #000; transition: transform 0.3s var(--k-ease); }
.k-burger:hover .k-burger__lines span:first-child { transform: translateX(-2px); }
.k-burger:hover .k-burger__lines span:last-child { transform: translateX(2px); }
.k-hdr-actions { display: none; }

@media (max-width: 60rem) {
    .k-hdr__tagline { display: none; }
    .k-hdr__bar { grid-template-columns: auto 1fr auto; }
    .k-hdr__clock { justify-self: end; }
}
@media (max-width: 30rem) {
    .k-hdr__clock { display: none; }
    .k-hdr__bar { grid-template-columns: 1fr auto; }
    .k-burger__label { display: none; }
    .k-burger { padding: 0.4rem; border: 0; }
    .k-burger__lines { width: 2.5rem; height: 2.5rem; }
}

/* The full-screen menu. */
.k-menu {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0 var(--gutter);
    border: 0;
    background: var(--k-ink);
    color: var(--k-paper);
    overflow-y: auto;
}
.k-menu:popover-open { display: grid; grid-template-rows: auto 1fr auto; }
.k-menu::backdrop { background: transparent; }
.k-menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--k-head); }
.k-menu__brand { font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; text-transform: uppercase; }
.k-menu__close {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 2.75rem;
    padding: 0 0.6rem 0 1.25rem;
    border: 1.5px solid var(--k-paper);
    border-radius: 999px;
    background: transparent;
    color: var(--k-paper);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.k-menu__x { position: relative; width: 2rem; height: 2rem; border-radius: 50%; background: var(--k-accent); }
.k-menu__x::before,
.k-menu__x::after { content: ''; position: absolute; inset: 50% 25%; height: 1.5px; background: var(--k-ink); transform: rotate(45deg); }
.k-menu__x::after { transform: rotate(-45deg); }
.k-menu__body {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(16rem, 1fr);
    gap: 2rem var(--gutter);
    align-items: end;
    padding-block: 2rem 3rem;
}
.k-menu__list { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.k-menu__item { border-top: 1px solid var(--k-line-light); }
.k-menu__item:last-child { border-bottom: 1px solid var(--k-line-light); }
.k-menu__link {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-block: 0.35rem 0.5rem;
    color: var(--k-paper);
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 1rem + 5.2vw, 6.25rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
    text-decoration: none;
    transition: color 0.3s var(--k-ease), transform 0.45s var(--k-ease);
}
.k-menu__num { padding-top: 0.6em; font-family: var(--font-ui); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; color: var(--k-grey-light); }
.k-menu__link:hover,
.k-menu__link[aria-current] { color: var(--k-accent); transform: translateX(1rem); }
.k-menu__link:hover .k-menu__num { color: var(--k-accent); }
.k-menu__sub { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0 0 0.9rem 2.6rem; padding: 0; list-style: none; }
.k-menu__sub a { color: var(--k-grey-light); text-decoration: none; }
.k-menu__sub a:hover { color: var(--k-accent); }
.k-menu__aside { display: grid; gap: 1rem; align-content: end; justify-items: start; }
.k-menu__mail { color: var(--k-paper); font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 1vw, 2rem); font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.k-menu__mail:hover { color: var(--k-accent); }
.k-menu__phone { color: var(--k-paper); font-size: 1.125rem; font-weight: 600; text-decoration: none; }
.k-menu__addr { color: var(--k-grey-light); font-size: 0.9375rem; }
.k-menu__ticker { margin-inline: calc(-1 * var(--gutter)); }
@media (max-width: 48rem) {
    .k-menu__body { grid-template-columns: 1fr; align-items: start; }
}
@media (prefers-reduced-motion: no-preference) {
    .k-menu:popover-open { animation: k-menu-in 0.55s var(--k-ease); }
    .k-menu:popover-open .k-menu__item { animation: k-rise 0.7s var(--k-ease) backwards; }
    .k-menu:popover-open .k-menu__item:nth-child(2) { animation-delay: 0.05s; }
    .k-menu:popover-open .k-menu__item:nth-child(3) { animation-delay: 0.1s; }
    .k-menu:popover-open .k-menu__item:nth-child(4) { animation-delay: 0.15s; }
    .k-menu:popover-open .k-menu__item:nth-child(5) { animation-delay: 0.2s; }
    .k-menu:popover-open .k-menu__item:nth-child(6) { animation-delay: 0.25s; }
    .k-menu:popover-open .k-menu__item:nth-child(n+7) { animation-delay: 0.3s; }
}
@keyframes k-menu-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes k-rise { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------------------
   4. Marquee
   ------------------------------------------------------------------------- */
.k-marquee { overflow: hidden; max-width: 100%; contain: inline-size; user-select: none; }
.k-marquee__track { display: flex; width: max-content; }
.k-marquee__group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0 clamp(1.25rem, 2.5vw, 2.5rem);
    margin: 0;
    padding: 0 clamp(1.25rem, 2.5vw, 2.5rem) 0 0;
    list-style: none;
}
.k-marquee__item { white-space: nowrap; }
.k-marquee__sep { color: var(--k-accent); }
@media (prefers-reduced-motion: no-preference) {
    .k-marquee__track { animation: k-marquee var(--k-speed, 28s) linear infinite; }
    .k-marquee:hover .k-marquee__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
    .k-marquee__group + .k-marquee__group { display: none; }
}
@keyframes k-marquee { to { transform: translateX(-50%); } }

.k-marquee--accent {
    padding-block: clamp(0.8rem, 1.4vw, 1.25rem);
    background: var(--k-accent);
    color: var(--k-ink);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}
.k-marquee--accent .k-marquee__sep { color: var(--k-ink); }
.k-marquee--menu {
    padding-block: 0.9rem;
    border-top: 1px solid var(--k-line-light);
    color: var(--k-grey-light);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.k-marquee--big {
    font-family: var(--font-display);
    font-size: clamp(3rem, 1.5rem + 7vw, 9rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}
.k-marquee--outline .k-marquee__item {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--c-text-strong);
    transition: color 0.3s var(--k-ease);
}
.k-marquee--outline .k-marquee__item:hover { color: var(--c-text-strong); }
.k-marquee--outline .k-marquee__sep { font-size: 0.4em; }

/* -------------------------------------------------------------------------
   5. Sections: counted like takes, heading on a hairline.
   ------------------------------------------------------------------------- */
:root .cms-section__inner { max-width: var(--w-container); }
:root .cms-w-wide > .cms-section__inner { max-width: var(--w-wide); }
:root .cms-w-narrow > .cms-section__inner { max-width: 60rem; }

:root .cms-section__head {
    counter-increment: ksec;
    display: grid;
    grid-template-columns: minmax(7rem, 1fr) minmax(0, 4fr);
    column-gap: var(--gutter);
    max-width: none;
    margin-block-end: clamp(2.5rem, 5vw, 5rem);
    padding-top: 1.1rem;
    border-top: 1px solid var(--c-border-strong);
    text-align: left;
}
:root .cms-section__head::before {
    content: '(' counter(ksec, decimal-leading-zero) ')';
    grid-row: 1 / span 2;
    padding-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--c-text-muted);
}
:root .cms-section__title {
    grid-column: 2;
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 1.2rem + 4.6vw, 6rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.045em;
    text-wrap: balance;
}
:root .cms-section__subtitle {
    grid-column: 2;
    max-width: 38rem;
    margin-top: 1.25rem;
    color: var(--c-text-muted);
    font-size: clamp(1rem, 0.95rem + 0.35vw, 1.25rem);
}
@media (max-width: 40rem) {
    :root .cms-section__head { grid-template-columns: 1fr; }
    :root .cms-section__head::before { grid-row: auto; padding: 0 0 1rem; }
    :root .cms-section__title,
    :root .cms-section__subtitle { grid-column: 1; }
}

/* A page built from blocks starts under the fixed header. */
.landing > .cms-section:first-child:not(.cms-tone-dark) { padding-top: calc(var(--k-head) + var(--sp-md)); }
.page:not(.k-page):not(.page--landing):not(.page--page) .site-main { padding-top: var(--k-head); }

/* -------------------------------------------------------------------------
   6. Blocks
   ------------------------------------------------------------------------- */

/* --- hero: the manifesto --- */
.cms-section:has(> .cms-section__inner > .k-hero) { padding-top: 0; padding-bottom: 0; }
.cms-section:has(> .cms-section__inner > .k-hero) > .cms-section__inner { max-width: none; padding-inline: 0; }
.cms-block.k-hero { display: flex; flex-direction: column; }
.k-hero__main {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: clamp(1.5rem, 3vw, 3rem);
    width: 100%;
    max-width: var(--w-wide);
    margin-inline: auto;
    padding: calc(var(--k-head) + clamp(2rem, 6vw, 5rem)) var(--gutter) clamp(2.5rem, 5vw, 4.5rem);
}
.k-hero--large .k-hero__main,
.k-hero--full .k-hero__main { min-height: min(100svh, 68rem); }
.k-hero--large.k-hero--media .k-hero__main,
.k-hero--full.k-hero--media .k-hero__main { min-height: min(92svh, 60rem); }
.k-hero--medium .k-hero__main { min-height: min(78svh, 50rem); }
.k-hero--small .k-hero__main,
.k-hero--auto .k-hero__main { min-height: 0; padding-top: calc(var(--k-head) + clamp(3rem, 9vw, 8rem)); }
.k-hero__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.k-hero__note { margin: 0; color: var(--c-text-muted); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.k-hero__title {
    max-width: 16ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 0.6rem + 8.4vw, 11.5rem);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.055em;
    color: var(--c-text-strong);
    text-wrap: balance;
    hyphens: manual;
}
.k-hero--small .k-hero__title,
.k-hero--auto .k-hero__title { max-width: 20ch; font-size: clamp(2.4rem, 0.8rem + 6.4vw, 8.5rem); }
.k-hero__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem var(--gutter);
    align-items: end;
    padding-top: clamp(1.25rem, 2vw, 2rem);
    border-top: 1px solid var(--c-border);
}
.k-hero__lead { max-width: 36rem; margin: 0; color: var(--c-text); font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.4rem); line-height: 1.45; }
.k-hero__text { max-width: 36rem; margin-top: 1rem; color: var(--c-text-muted); }
.k-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.k-hero__still { position: relative; margin: 0; background: #000; }
.k-hero__img { width: 100%; height: min(78svh, 56vw); object-fit: cover; }
.k-hero__frame {
    position: absolute;
    inset: clamp(1rem, 2.5vw, 2.25rem);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    pointer-events: none;
    background:
        linear-gradient(#fff, #fff) top left / 1.75rem 2px no-repeat,
        linear-gradient(#fff, #fff) top left / 2px 1.75rem no-repeat,
        linear-gradient(#fff, #fff) top right / 1.75rem 2px no-repeat,
        linear-gradient(#fff, #fff) top right / 2px 1.75rem no-repeat,
        linear-gradient(#fff, #fff) bottom left / 1.75rem 2px no-repeat,
        linear-gradient(#fff, #fff) bottom left / 2px 1.75rem no-repeat,
        linear-gradient(#fff, #fff) bottom right / 1.75rem 2px no-repeat,
        linear-gradient(#fff, #fff) bottom right / 2px 1.75rem no-repeat;
}
.k-hero__frame span:first-child::before { content: ''; display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.5rem; border-radius: 50%; background: var(--k-accent); }
@media (max-width: 40rem) {
    .k-hero__row { grid-template-columns: 1fr; }
    .k-hero__img { height: 62svh; }
}

/* --- heading: the statement --- */
.cms-block.k-statement { display: grid; text-align: left; align-items: start; grid-template-columns: minmax(7rem, 1fr) minmax(0, 4fr); gap: 1rem var(--gutter); }
.k-statement__label { padding-top: 0.6rem; }
.k-statement__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 0.9rem + 2.9vw, 4rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.035em;
    text-indent: clamp(0rem, 12vw, 14rem);
    text-wrap: pretty;
}
.k-statement--small .k-statement__title { font-size: clamp(1.35rem, 1rem + 1.4vw, 2.25rem); text-indent: 0; }
.k-statement--large .k-statement__title { font-size: clamp(1.9rem, 0.9rem + 4.2vw, 5.5rem); line-height: 1.04; }
.k-statement__sub { max-width: 40rem; margin-top: 1.5rem; color: var(--c-text-muted); font-size: 1.125rem; }
.k-statement__text { max-width: 40rem; margin-top: 1.5rem; color: var(--c-text-muted); }
@media (max-width: 40rem) {
    .cms-block.k-statement { grid-template-columns: 1fr; }
    .k-statement__title { text-indent: 0; }
}

/* --- works: the asymmetric grid --- */
.k-works__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(3rem, 6vw, 6.5rem) var(--gutter);
    margin: 0;
    padding: 0;
    list-style: none;
}
.k-works__item { grid-column: 1 / -1; min-width: 0; }
.k-works__item--a { grid-column: 1 / span 7; }
.k-works__item--b { grid-column: 9 / span 4; margin-top: clamp(4rem, 12vw, 14rem); }
.k-works__item--c { grid-column: 2 / span 5; }
.k-works__item--d { grid-column: 7 / span 6; margin-top: clamp(3rem, 9vw, 10rem); }
.k-works__item--e { grid-column: 1 / -1; }
.k-works__item--f { grid-column: 1 / span 4; }
.k-works__item--g { grid-column: 5 / span 4; margin-top: clamp(2rem, 6vw, 7rem); }
.k-works__item--h { grid-column: 9 / span 4; }
.k-works__more { display: flex; justify-content: center; margin-top: clamp(3.5rem, 7vw, 7rem); }

.k-card { position: relative; display: flex; flex-direction: column; gap: 1rem; }
.k-card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--k-ink-2); }
.k-card--b .k-card__media,
.k-card--c .k-card__media,
.k-card--f .k-card__media,
.k-card--g .k-card__media,
.k-card--h .k-card__media { aspect-ratio: 4 / 5; }
.k-card--d .k-card__media { aspect-ratio: 16 / 10; }
.k-card--e .k-card__media { aspect-ratio: 21 / 9; }
.k-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--k-ease), filter 0.6s var(--k-ease); }
.k-card__blank { display: grid; place-items: center; height: 100%; color: var(--k-grey); font-family: var(--font-display); font-size: 6rem; }
.k-card__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.35rem 0.75rem 0.35rem 0.6rem;
    border-radius: 999px;
    background: var(--k-ink);
    color: var(--k-paper);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.k-card__badge::before { content: ''; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.45rem; border-radius: 50%; background: var(--k-accent); }
.k-card__caption { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.25rem 1rem; align-items: baseline; }
.k-card__idx { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: var(--c-text-muted); }
.k-card__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 0.9rem + 1.1vw, 2rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
}
.k-card--e .k-card__title,
.k-card--a .k-card__title { font-size: clamp(1.35rem, 0.9rem + 1.6vw, 2.6rem); }
.k-card__link { color: var(--c-text-strong); text-decoration: none; }
.k-card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.k-card__meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem 0.9rem; margin: 0; color: var(--c-text-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-align: right; }
.k-card__tagline { max-width: 40rem; margin: 0; padding-left: 0; color: var(--c-text-muted); font-size: 0.9375rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.k-card:hover .k-card__img { transform: scale(1.045); }
.k-card:hover .k-card__link { color: var(--k-accent-ink); }
.k-card:focus-within .k-card__media { outline: 2px solid var(--k-accent); outline-offset: 4px; }
.cms-tone-dark .k-card:hover .k-card__link { color: var(--k-accent); }

@media (max-width: 48rem) {
    .k-works__grid { gap: 3rem 0; }
    .k-works__item[class*='k-works__item--'] { grid-column: 1 / -1; margin-top: 0; }
    .k-card--e .k-card__media, .k-card--d .k-card__media { aspect-ratio: 4 / 3; }
    .k-card__caption { grid-template-columns: auto minmax(0, 1fr); }
    .k-card__meta { grid-column: 2; justify-content: flex-start; text-align: left; }
}

/* --- services: the index --- */
.k-svc__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--c-border-strong); }
.k-svc__row {
    position: relative;
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1.7fr) minmax(0, 1fr) minmax(8rem, auto) 3.5rem;
    gap: 0.5rem var(--gutter);
    align-items: center;
    padding: clamp(1.5rem, 2.6vw, 2.5rem) 0;
    border-top: 1px solid var(--c-border-strong);
    isolation: isolate;
}
.k-svc__row::before {
    content: '';
    position: absolute;
    inset: 0 calc(-1 * var(--gutter));
    z-index: -1;
    background: var(--k-accent);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.45s var(--k-ease);
}
.k-svc__num { align-self: start; padding-top: 0.6rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; color: var(--c-text-muted); }
.k-svc__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 0.9rem + 2.1vw, 3.25rem); font-weight: 700; line-height: 1; letter-spacing: -0.045em; }
.k-svc__link { color: var(--c-text-strong); text-decoration: none; }
.k-svc__link::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.k-svc__text { margin: 0; max-width: 30rem; color: var(--c-text-muted); font-size: 0.975rem; line-height: 1.5; }
.k-svc__price { margin: 0; font-weight: 800; font-size: 1rem; text-align: right; white-space: nowrap; }
.k-svc__price span { display: block; color: var(--c-text-muted); font-weight: 600; font-size: 0.8125rem; }
.k-svc__arrow {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: 1.25rem;
    transition: transform 0.45s var(--k-ease), background-color 0.3s;
}
.k-svc__peek {
    position: absolute;
    top: 50%;
    right: 20%;
    z-index: 1;
    width: clamp(10rem, 16vw, 17rem);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate(0, -50%) rotate(-5deg) scale(0.85);
    transition: opacity 0.35s var(--k-ease), transform 0.5s var(--k-ease);
}
.k-svc__peek img { width: 100%; height: 100%; object-fit: cover; }
.k-svc__more { display: flex; justify-content: center; margin-top: clamp(3rem, 6vw, 5rem); }
@media (hover: hover) and (pointer: fine) {
    .k-svc__row:hover::before { transform: scaleY(1); }
    .k-svc__row:hover .k-svc__num,
    .k-svc__row:hover .k-svc__text,
    .k-svc__row:hover .k-svc__price span { color: var(--k-ink); }
    .k-svc__row:hover .k-svc__link,
    .k-svc__row:hover .k-svc__price { color: var(--k-ink); }
    .k-svc__row:hover .k-svc__arrow { transform: rotate(-45deg); background: var(--k-ink); color: var(--k-accent); border-color: var(--k-ink); }
    .k-svc__row:hover .k-svc__peek { opacity: 1; transform: translate(0, -50%) rotate(-5deg) scale(1); }
}
@media (max-width: 60rem) {
    .k-svc__row { grid-template-columns: 2.25rem minmax(0, 1fr) 2.75rem; column-gap: 0.75rem; }
    .k-svc__title { font-size: clamp(1.3rem, 5.4vw, 2.4rem); }
    .k-svc__arrow { width: 2.75rem; height: 2.75rem; }
    .k-svc__text, .k-svc__price { grid-column: 2; text-align: left; }
    .k-svc__arrow { grid-column: 3; grid-row: 1; }
    .k-svc__peek { display: none; }
}

/* --- clients: a running line of names, or a ruled grid --- */
.cms-section:has(.k-logos--marquee) > .cms-section__inner { max-width: none; padding-inline: 0; }
.cms-section:has(.k-logos--marquee) .cms-section__head { margin-inline: var(--gutter); }
.k-logos--marquee { border-block: 1px solid var(--c-border-strong); padding-block: clamp(1rem, 2vw, 2rem); }
.k-logos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-border-strong); border-left: 1px solid var(--c-border-strong); }
.k-logos__cell { display: grid; place-items: center; min-height: 8rem; padding: 1.5rem; border-right: 1px solid var(--c-border-strong); border-bottom: 1px solid var(--c-border-strong); }
.k-logos__cell a { color: inherit; text-decoration: none; }
.k-logos__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; text-align: center; }
.k-logos__img { max-height: 3.5rem; width: auto; filter: grayscale(1); mix-blend-mode: multiply; }

/* --- numbers --- */
.k-stats__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.k-stats__row--1 { grid-template-columns: 1fr; }
.k-stats__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-stats__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-stat { display: flex; flex-direction: column; gap: 0.75rem; padding: 0 clamp(1rem, 2vw, 2rem) 0.5rem; border-left: 1px solid var(--c-border-strong); }
.k-stat__idx { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; color: var(--c-text-muted); }
.k-stat__value {
    display: flex;
    align-items: flex-start;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3.25rem, 1.2rem + 6.4vw, 9.5rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.06em;
    color: var(--c-text-strong);
    font-variant-numeric: tabular-nums;
}
.k-stat__suffix { margin-left: 0.04em; color: var(--k-accent); font-size: 0.5em; line-height: 1; }
.cms-tone-soft .k-stat__suffix, .k-stats:not(.cms-tone-dark *) .k-stat__suffix { color: var(--k-accent-ink); }
.cms-tone-dark .k-stat__suffix { color: var(--k-accent); }
.k-stat__label { margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--c-border); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.k-stat__text { margin: 0; color: var(--c-text-muted); font-size: 0.9375rem; line-height: 1.5; }
@media (max-width: 60rem) {
    .k-stats__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
}

/* --- process --- */
.k-steps__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem var(--gutter); margin: 0; padding: 0; list-style: none; }
.k-steps__list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-steps__list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-steps__list--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.k-step { display: flex; flex-direction: column; gap: 1rem; }
.k-step__rule { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 1rem; border-bottom: 3px solid var(--c-text-strong); }
.k-step__num { font-family: var(--font-display); font-size: clamp(3rem, 2rem + 3vw, 5.5rem); font-weight: 800; line-height: 0.85; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px var(--c-text-strong); }
.k-step:hover .k-step__num { color: var(--k-accent); -webkit-text-stroke-color: var(--k-accent); }
.k-step__time { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-muted); }
.k-step__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 700; letter-spacing: -0.03em; }
.k-step__text { color: var(--c-text-muted); font-size: 0.975rem; }
@media (max-width: 60rem) { .k-steps__list[class] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 36rem) { .k-steps__list[class] { grid-template-columns: 1fr; } }

/* --- ledger (timeline): awards, history --- */
.k-ledger__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--c-border-strong); }
.k-ledger__row {
    display: grid;
    grid-template-columns: minmax(6rem, 1fr) minmax(0, 2.4fr) minmax(0, 1.6fr) auto;
    gap: 0.35rem var(--gutter);
    align-items: baseline;
    padding: 1.35rem 0;
    border-top: 1px solid var(--c-border-strong);
    transition: padding 0.35s var(--k-ease), color 0.25s;
}
.k-ledger__date { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.k-ledger__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.15rem, 0.9rem + 1vw, 1.9rem); font-weight: 700; letter-spacing: -0.03em; }
.k-ledger__text { margin: 0; color: var(--c-text-muted); }
.k-ledger__thumb img { width: 4rem; height: 3rem; object-fit: cover; }
@media (hover: hover) {
    .k-ledger__row:hover { padding-inline: 1rem; }
    .k-ledger__row:hover .k-ledger__title { color: var(--k-accent-ink); }
    .cms-tone-dark .k-ledger__row:hover .k-ledger__title { color: var(--k-accent); }
}
@media (max-width: 48rem) {
    .k-ledger__row { grid-template-columns: 4.5rem minmax(0, 1fr); }
    .k-ledger__text { grid-column: 2; }
    .k-ledger__thumb { display: none; }
}

/* --- team --- */
:root .team-block .cms-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4.5rem) var(--gutter); }
:root .team-block .cms-items > :nth-child(3n + 2) { margin-top: clamp(0rem, 6vw, 6rem); }
@media (max-width: 60rem) { :root .team-block .cms-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } :root .team-block .cms-items > :nth-child(3n + 2) { margin-top: 0; } }
@media (max-width: 34rem) { :root .team-block .cms-items { grid-template-columns: 1fr; } }
:root .team-block__more { display: flex; justify-content: center; margin-top: clamp(3rem, 6vw, 5rem); }
.k-team__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4.5rem) var(--gutter); margin: 0; padding: 0; list-style: none; }
.k-team__grid > li:nth-child(3n + 2) { margin-top: clamp(0rem, 6vw, 6rem); }
@media (max-width: 60rem) { .k-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .k-team__grid > li:nth-child(3n + 2) { margin-top: 0; } }
@media (max-width: 34rem) { .k-team__grid { grid-template-columns: 1fr; } }
.k-person { position: relative; display: flex; flex-direction: column; gap: 1rem; }
.k-person__photo { position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: var(--k-paper-2); }
.k-person__photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); transition: filter 0.6s var(--k-ease), transform 1s var(--k-ease); }
.k-person:hover .k-person__photo img { filter: none; transform: scale(1.03); }
.k-person__blank { display: grid; place-items: center; height: 100%; font-family: var(--font-display); font-size: 5rem; color: var(--k-grey-light); }
.k-person__badge { position: absolute; left: 0.75rem; bottom: 0.75rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--k-accent); color: var(--k-ink); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.k-person__body { padding-top: 0.9rem; border-top: 1px solid var(--c-border-strong); }
.k-person__name { margin: 0; font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 0.6vw, 1.6rem); font-weight: 700; letter-spacing: -0.03em; }
.k-person__link { color: var(--c-text-strong); text-decoration: none; }
.k-person__link::after { content: ''; position: absolute; inset: 0; }
.k-person__role { margin: 0.35rem 0 0; color: var(--c-text-muted); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.k-person__excerpt { margin: 0.75rem 0 0; color: var(--c-text-muted); font-size: 0.9375rem; }

/* --- call to action --- */
.k-cta__media { margin: 0 0 2rem; }
.k-cta__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 0.8rem + 8vw, 11rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.055em;
    text-wrap: balance;
}
.k-cta__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem var(--gutter); align-items: end; margin-top: clamp(2rem, 4vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--c-border-strong); }
.k-cta__sub, .k-cta__text { max-width: 34rem; margin: 0; color: var(--c-text-muted); font-size: 1.125rem; }
.k-cta__note { margin: 1rem 0 0; color: var(--c-text-faint); font-size: 0.875rem; }
.k-cta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 1rem 1.5rem; }
.k-cta__mail { color: var(--c-text-strong); font-family: var(--font-display); font-size: clamp(1.25rem, 0.8rem + 2vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--k-accent); text-underline-offset: 0.2em; }
.k-cta__mail:hover { color: var(--k-accent); }
@media (max-width: 48rem) { .k-cta__row { grid-template-columns: 1fr; } .k-cta__actions { justify-content: flex-start; } }

/* Default blocks that keep their own markup: quieter corners and type. */
:root .cms-card { border-radius: 0; }
:root .cms-prose h2, :root .cms-prose h3 { font-family: var(--font-display); letter-spacing: -0.03em; }

/* -------------------------------------------------------------------------
   7. Archive pages: the title as wide as the page
   ------------------------------------------------------------------------- */
.k-pagehead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: 1.5rem var(--gutter);
    align-items: end;
    max-width: var(--w-wide);
    margin-inline: auto;
    padding: calc(var(--k-head) + clamp(3rem, 8vw, 7rem)) var(--gutter) clamp(2.5rem, 5vw, 4.5rem);
}
.k-pagehead .k-label { grid-column: 1 / -1; }
.k-pagehead__title {
    grid-column: 1 / -1;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 0.4rem + 10.2vw, 14rem);
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -0.06em;
    overflow-wrap: break-word;
}
.k-pagehead__lead { grid-column: 2; }
.k-pagehead__count { margin-left: 0.15em; font-size: 0.2em; font-weight: 700; letter-spacing: 0; vertical-align: top; color: var(--k-accent-ink); }
.k-pagehead__lead { margin: 0; color: var(--c-text-muted); font-size: 1.0625rem; line-height: 1.5; }
@media (max-width: 48rem) { .k-pagehead { grid-template-columns: 1fr; } .k-pagehead__lead { grid-column: 1; } }

.k-archive, .k-journal, .k-team, .k-services { padding-bottom: var(--sp-lg); }
.k-archive > .k-works__grid,
.k-team > .k-team__grid,
.k-services > .k-svc { max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--gutter); }
.k-services > .k-strip { margin-top: var(--sp-md); }

.k-filter { max-width: var(--w-wide); margin: 0 auto clamp(2.5rem, 5vw, 4.5rem); padding: 1.1rem var(--gutter) 0; }
.k-filter__list { display: flex; flex-wrap: wrap; gap: 0.25rem 0; margin: 0; padding: 1.1rem 0 0; list-style: none; border-top: 1px solid var(--c-border-strong); }
.k-filter__list li + li::before { content: '/'; margin: 0 0.6em; color: var(--c-text-faint); font-family: var(--font-display); font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.75rem); }
.k-filter__link { color: var(--c-text-muted); font-family: var(--font-display); font-size: clamp(1.1rem, 0.9rem + 0.9vw, 1.75rem); font-weight: 600; letter-spacing: -0.03em; text-decoration: none; transition: color 0.2s; }
.k-filter__link sup { margin-left: 0.2em; font-size: 0.5em; font-weight: 700; }
.k-filter__link:hover { color: var(--c-text-strong); }
.k-filter__link[aria-current] { color: var(--c-text-strong); text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--k-accent); text-underline-offset: 0.25em; }
/* Filtered in place: the asymmetric rhythm would leave holes — go even. */
.k-archive:has(.k-filter__link[data-pf-cat]:not([data-pf-cat=''])[aria-current]) .k-works__item[class*='k-works__item--'] { grid-column: span 6; margin-top: 0; }
.k-archive:has(.k-filter__link[data-pf-cat]:not([data-pf-cat=''])[aria-current]) .k-card__media { aspect-ratio: 4 / 3; }
@media (max-width: 48rem) {
    .k-archive:has(.k-filter__link[data-pf-cat]:not([data-pf-cat=''])[aria-current]) .k-works__item[class*='k-works__item--'] { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------------------
   8. The case study
   ------------------------------------------------------------------------- */
.k-case__hero {
    padding: calc(var(--k-head) + clamp(3rem, 8vw, 7rem)) var(--gutter) clamp(2.5rem, 5vw, 4rem);
    background: var(--k-ink);
    color: var(--k-paper);
}
.k-case__hero > * { max-width: var(--w-wide); margin-inline: auto; }
.k-case__crumbs { color: var(--k-grey-light); }
.k-case__crumbs a:hover { color: var(--k-paper); }
.k-case__title {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--k-paper);
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 0.6rem + 7.8vw, 10.5rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.055em;
    text-wrap: balance;
}
.k-case__tagline { margin-top: 1.75rem; max-width: 46rem; color: #cfcdc6; font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem); line-height: 1.45; margin-left: 0; }
.k-case__hero .k-case__tagline { margin-inline: auto 0; margin-left: max(0px, calc((100% - var(--w-wide)) / 2)); }
.k-case__meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem var(--gutter);
    margin-top: clamp(2.5rem, 5vw, 4.5rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--k-line-light);
}
.k-case__meta dt { color: var(--k-grey-light); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.k-case__meta dd { margin: 0.4rem 0 0; font-size: 1.0625rem; font-weight: 700; }
.k-case__meta a { color: var(--k-paper); }
@media (max-width: 48rem) { .k-case__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.k-case__cover { margin: 0; background: var(--k-ink); }
.k-case__cover-img { width: 100%; height: min(92svh, 58vw); object-fit: cover; }
@media (max-width: 40rem) { .k-case__cover-img { height: auto; aspect-ratio: 4 / 5; } }

.k-case__overview,
.k-story {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr);
    gap: 1.5rem var(--gutter);
    padding-block: clamp(4rem, 8vw, 8rem) 0;
}
.k-case__side { padding-top: 0.5rem; }
.k-case__lead {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 0.9rem + 2.3vw, 3.2rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.035em;
    color: var(--c-text-strong);
    text-wrap: pretty;
}
.k-case__main .k-tags { margin-top: 2rem; }
.k-case__facts { display: grid; gap: 1.5rem; margin-top: clamp(2.5rem, 4vw, 3.5rem); justify-items: start; }
.k-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9rem, 40%), 1fr)); gap: 1.5rem var(--gutter); width: 100%; margin: 0; }
.k-facts__row { padding-top: 0.9rem; border-top: 1px solid var(--c-border-strong); }
.k-facts dt { color: var(--c-text-muted); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.k-facts dd { margin: 0.35rem 0 0; font-size: 1.0625rem; font-weight: 700; }

.k-case__metrics { margin-top: clamp(4rem, 8vw, 8rem); padding: clamp(3rem, 6vw, 5.5rem) var(--gutter); background: var(--k-ink); color: var(--k-paper); }
.k-case__metrics > * { max-width: var(--w-wide); margin-inline: auto; }
.k-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem var(--gutter); margin-top: 2.5rem; padding: 0; list-style: none; }
.k-metrics--1 { grid-template-columns: 1fr; }
.k-metrics--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-metrics--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-metrics__item { display: flex; flex-direction: column; gap: 1rem; padding-left: 1.25rem; border-left: 1px solid var(--k-line-light); }
.k-metrics__value { color: var(--k-accent); font-family: var(--font-display); font-size: clamp(2.5rem, 1rem + 4vw, 6rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.06em; }
.k-metrics__label { color: #cfcdc6; font-size: 0.9375rem; line-height: 1.4; max-width: 18rem; }
@media (max-width: 60rem) { .k-metrics[class] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .k-metrics[class] { grid-template-columns: 1fr; } }

.k-story__head { display: flex; flex-direction: column; gap: 0.75rem; }
.k-story__num { color: var(--k-accent-ink); font-family: var(--font-display); font-size: clamp(2.5rem, 2rem + 2vw, 4rem); font-weight: 800; line-height: 0.85; letter-spacing: -0.06em; }
.k-story__title { margin: 0; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); }
.k-story__body { max-width: 46rem; font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.2rem); line-height: 1.65; }
.k-story__body > p:first-child { font-size: 1.15em; color: var(--c-text-strong); }
:root .k-story__body ul { padding-left: 0; list-style: none; }
:root .k-story__body li { position: relative; padding-left: 2rem; }
:root .k-story__body li::before { content: '→'; position: absolute; left: 0; color: var(--k-accent-ink); font-weight: 800; }
@media (max-width: 48rem) {
    .k-case__overview, .k-story { grid-template-columns: 1fr; }
}

.k-media { margin-top: clamp(4rem, 8vw, 8rem); }
ul.k-media__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); margin: 0; padding: 0 var(--gutter); list-style: none; }
.k-media__item { margin: 0; }
.k-media__link { display: block; overflow: hidden; background: var(--k-ink-2); }
.k-media__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 1s var(--k-ease); }
.k-media__link:hover .k-media__img { transform: scale(1.03); }
.k-media--mosaic .k-media__item:first-child,
.k-media--stack .k-media__item { grid-column: 1 / -1; margin-inline: calc(-1 * var(--gutter)); }
.k-media--mosaic .k-media__item:first-child .k-media__img,
.k-media--stack .k-media__img { aspect-ratio: 16 / 8; }
.k-media--mosaic .k-media__item:nth-child(n+2):last-child:nth-child(even) { grid-column: 1 / -1; }
.k-media--mosaic .k-media__item:nth-child(n+2):last-child:nth-child(even) .k-media__img { aspect-ratio: 16 / 9; }
.k-media__caption { margin: 0.75rem 0 0; padding-inline: var(--gutter); color: var(--c-text-muted); font-size: 0.8125rem; }
@media (max-width: 40rem) {
    .k-media__list { grid-template-columns: 1fr; }
    .k-media--mosaic .k-media__item:first-child .k-media__img, .k-media--stack .k-media__img { aspect-ratio: 4 / 3; }
}

.k-section { padding-block: clamp(4rem, 8vw, 8rem) 0; }
.k-section__title { margin-bottom: 2rem; font-size: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.k-ba-grid { display: grid; gap: var(--gutter); }
.k-ba-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 48rem) { .k-ba-grid--2 { grid-template-columns: 1fr; } }

.k-film { margin-top: clamp(4rem, 8vw, 8rem); background: var(--k-ink); }
.k-film__frame { position: relative; aspect-ratio: 16 / 9; max-height: 92svh; margin-inline: auto; overflow: hidden; }
.k-film__frame iframe, .k-film__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.k-film__facade { position: absolute; inset: 0; display: grid; place-items: center; color: var(--k-ink); text-decoration: none; }
.k-film__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.8; transition: opacity 0.4s, transform 1.2s var(--k-ease); }
.k-film__facade:hover .k-film__poster { opacity: 1; transform: scale(1.02); }
.k-film__play {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(7rem, 12vw, 11rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--k-accent);
    text-align: center;
    transition: transform 0.45s var(--k-ease);
}
.k-film__play::before { content: ''; position: absolute; top: 50%; left: 50%; border-style: solid; border-width: 0.8rem 0 0.8rem 1.35rem; border-color: transparent transparent transparent var(--k-ink); transform: translate(-35%, -50%); }
.k-film__play-label { position: absolute; top: calc(100% + 1rem); width: max-content; color: var(--k-paper); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.k-film__facade:hover .k-film__play { transform: scale(1.08); }

.k-review { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr); gap: 1.5rem var(--gutter); padding-block: clamp(4rem, 8vw, 8rem) 0; }
.k-review > .k-label { padding-top: 0.75rem; }
.k-review__fig { margin: 0; }
.k-review__text {
    position: relative;
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 0.9rem + 2vw, 2.75rem);
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.035em;
    color: var(--c-text-strong);
    text-indent: -0.45em;
}
.k-review__text::before { content: '«'; color: var(--k-accent-ink); }
.k-review__text::after { content: '»'; color: var(--k-accent-ink); }
.k-review__author { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.k-review__photo { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.k-review__name { display: block; font-weight: 800; }
.k-review__role { display: block; color: var(--c-text-muted); font-size: 0.875rem; }
@media (max-width: 48rem) { .k-review { grid-template-columns: 1fr; } }

.k-case__blocks { margin-top: var(--sp-md); }

.k-credits { margin-top: clamp(4rem, 8vw, 8rem); padding: clamp(3.5rem, 7vw, 6rem) var(--gutter); background: var(--k-ink); color: var(--k-paper); text-align: center; }
.k-credits__list { display: grid; gap: 0.6rem; max-width: 46rem; margin: 2.5rem auto 0; padding: 0; list-style: none; }
.k-credits__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.k-credits__role { color: var(--k-grey-light); text-align: right; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding-top: 0.2rem; }
.k-credits__name { text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: -0.02em; }
.k-credits__row:only-child .k-credits__name, .k-credits__name:only-child { grid-column: 1 / -1; text-align: center; }

.k-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem var(--gutter);
    align-items: center;
    padding: clamp(3rem, 6vw, 5.5rem) var(--gutter);
    background: var(--k-accent);
    color: var(--k-ink);
}
.k-credits + .k-strip { margin-top: 0; }
.k-case > .k-strip { margin-top: clamp(4rem, 8vw, 8rem); }
.k-credits ~ .k-strip { margin-top: 0; }
.k-strip__title { margin: 0; color: var(--k-ink); font-size: clamp(2rem, 1rem + 4vw, 5.5rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.05em; }
.k-strip__lead { margin: 1rem 0 0; max-width: 36rem; font-size: 1.125rem; }
.k-strip__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; }
.k-strip__more { color: var(--k-ink); font-weight: 700; }
@media (max-width: 48rem) { .k-strip { grid-template-columns: 1fr; } .k-strip__actions { align-items: flex-start; } }

.k-next { background: var(--k-ink); color: var(--k-paper); }
.k-next__link {
    position: relative;
    display: block;
    overflow: hidden;
    padding: clamp(4rem, 9vw, 9rem) var(--gutter) clamp(3rem, 6vw, 5rem);
    color: var(--k-paper);
    text-decoration: none;
    isolation: isolate;
}
.k-next__title {
    display: block;
    max-width: 14ch;
    margin-top: 1.5rem;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 0.8rem + 7vw, 9.5rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.055em;
    transition: color 0.3s;
}
.k-next__img { position: absolute; inset: 0; z-index: -1; opacity: 0.22; transition: opacity 0.6s var(--k-ease), transform 1.2s var(--k-ease); }
.k-next__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.k-next__link:hover .k-next__img { opacity: 0.5; transform: scale(1.03); }
.k-next__link:hover .k-next__title { color: var(--k-accent); }
.k-next__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.25rem var(--gutter); border-top: 1px solid var(--k-line-light); font-size: 0.875rem; font-weight: 700; }
.k-next__foot a { color: var(--k-grey-light); text-decoration: none; }
.k-next__foot a:hover { color: var(--k-accent); }

/* -------------------------------------------------------------------------
   9. Journal
   ------------------------------------------------------------------------- */
.k-post-meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0; color: var(--c-text-muted); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.k-lead-post {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 2rem var(--gutter);
    align-items: end;
    max-width: var(--w-wide);
    margin: 0 auto clamp(3rem, 6vw, 5rem);
    padding-inline: var(--gutter);
}
.k-lead-post__media { overflow: hidden; aspect-ratio: 4 / 3; background: var(--k-ink-2); }
.k-lead-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--k-ease); }
.k-lead-post:hover .k-lead-post__media img { transform: scale(1.04); }
.k-lead-post__title { margin: 1.25rem 0 0; font-size: clamp(1.75rem, 1rem + 2.6vw, 3.75rem); line-height: 1; letter-spacing: -0.045em; }
.k-lead-post__link { color: var(--c-text-strong); text-decoration: none; }
.k-lead-post__link::after { content: ''; position: absolute; inset: 0; }
.k-lead-post:hover .k-lead-post__link { color: var(--k-accent-ink); }
.k-lead-post__excerpt { margin: 1.25rem 0 0; color: var(--c-text-muted); font-size: 1.0625rem; }
@media (max-width: 48rem) { .k-lead-post { grid-template-columns: 1fr; } }

ol.k-index { max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--gutter); list-style: none; }
.k-index__row {
    position: relative;
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr) auto;
    gap: 0.5rem var(--gutter);
    align-items: baseline;
    padding: clamp(1.4rem, 2.4vw, 2.2rem) 0;
    border-top: 1px solid var(--c-border-strong);
}
.k-index__row:last-child { border-bottom: 1px solid var(--c-border-strong); }
.k-index__date { color: var(--c-text-muted); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.k-index__title { margin: 0; font-size: clamp(1.25rem, 0.8rem + 1.8vw, 2.6rem); line-height: 1.05; letter-spacing: -0.04em; }
.k-index__link { color: var(--c-text-strong); text-decoration: none; }
.k-index__link::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.k-index__meta { color: var(--c-text-muted); font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
.k-index__peek { position: absolute; right: 12%; top: 50%; z-index: 1; width: 14rem; aspect-ratio: 4 / 3; overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(-50%) rotate(4deg) scale(0.85); transition: opacity 0.35s var(--k-ease), transform 0.5s var(--k-ease); }
.k-index__peek img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
    .k-index__row:hover .k-index__link { color: var(--k-accent-ink); }
    .k-index__row:hover .k-index__peek { opacity: 1; transform: translateY(-50%) rotate(4deg) scale(1); }
}
@media (max-width: 40rem) {
    .k-index__row { grid-template-columns: 1fr auto; }
    .k-index__title { grid-column: 1 / -1; grid-row: 2; }
    .k-index__peek { display: none; }
}

.k-post__head { max-width: var(--w-wide); margin-inline: auto; padding: calc(var(--k-head) + clamp(3rem, 7vw, 6rem)) var(--gutter) clamp(2.5rem, 5vw, 4rem); }
.k-post__title { max-width: 18ch; margin: 1.5rem 0 0; font-size: clamp(2.25rem, 0.8rem + 5.6vw, 7.25rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.05em; text-wrap: balance; }
.k-post__sub { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem var(--gutter); align-items: end; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid var(--c-border-strong); }
.k-post__lead { max-width: 44rem; margin: 0; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.45rem); line-height: 1.45; color: var(--c-text-strong); }
@media (max-width: 40rem) { .k-post__sub { grid-template-columns: 1fr; } }
.k-post__cover { margin: 0; background: var(--k-ink); }
.k-post__cover img { width: 100%; height: min(80svh, 50vw); object-fit: cover; }
@media (max-width: 40rem) { .k-post__cover img { height: auto; aspect-ratio: 4 / 3; } }
.k-post__body { max-width: 44rem; margin: clamp(3rem, 6vw, 5.5rem) auto 0; padding-inline: var(--gutter); box-sizing: content-box; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.72; }
:root .k-post__body > * + * { margin-top: 1.35rem; }
:root .k-post__body :is(p, li) { font-size: 1em; line-height: 1.72; }
:root .k-post__body > p:first-child { font-size: 1.2em; line-height: 1.55; color: var(--c-text-strong); }
:root .k-post__body h2 { margin-top: 3.5rem; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.05; letter-spacing: -0.04em; }
:root .k-post__body h3 { margin-top: 2.5rem; font-size: 1.4rem; }
:root .k-post__body blockquote {
    margin: 3rem 0;
    padding: 0 0 0 1.75rem;
    border-left: 6px solid var(--k-accent);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1rem + 1.4vw, 2.1rem);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--c-text-strong);
}
:root .k-post__body blockquote p { margin: 0; }
:root .k-post__body ul { padding-left: 0; list-style: none; }
:root .k-post__body li { position: relative; padding-left: 2rem; }
:root .k-post__body li::before { content: '→'; position: absolute; left: 0; color: var(--k-accent-ink); font-weight: 800; }
:root .k-post__body img { width: 100%; height: auto; }
.k-post__blocks { margin-top: var(--sp-md); }
.k-more { margin-top: var(--sp-lg); padding-bottom: var(--sp-lg); }
.k-more > .k-label { max-width: var(--w-wide); margin: 0 auto 1.5rem; padding-inline: var(--gutter); }

/* -------------------------------------------------------------------------
   10. Footer — giant
   ------------------------------------------------------------------------- */
.k-ftr { overflow: hidden; background: var(--k-ink); color: var(--k-paper); }
.k-ftr a { color: inherit; }
.k-ftr__cta { display: grid; justify-items: start; gap: 1.5rem; max-width: var(--w-wide); margin-inline: auto; padding: clamp(5rem, 11vw, 11rem) var(--gutter) clamp(3.5rem, 7vw, 6rem); }
.k-ftr__lead { margin: 0; max-width: 18ch; font-family: var(--font-display); font-size: clamp(2rem, 1rem + 4.2vw, 5.5rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.05em; }
.k-ftr__mail {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.1em;
    max-width: 100%;
    color: var(--k-paper);
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 0.2rem + 5.9vw, 8rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.05em;
    text-decoration: none;
    overflow-wrap: anywhere;
    background: linear-gradient(var(--k-accent), var(--k-accent)) left bottom / 0 0.08em no-repeat;
    padding-bottom: 0.08em;
    transition: background-size 0.6s var(--k-ease), color 0.3s;
}
.k-ftr__mail:hover { background-size: 100% 0.08em; color: var(--k-accent); }
.k-ftr__mail-arrow { font-size: 0.5em; color: var(--k-accent); }
.k-ftr__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2.5rem var(--gutter);
    max-width: var(--w-wide);
    margin-inline: auto;
    padding: 2rem var(--gutter) clamp(3rem, 6vw, 5rem);
    border-top: 1px solid var(--k-line-light);
    font-size: 1rem;
    line-height: 1.55;
}
.k-ftr__col p { margin: 0 0 0.35rem; }
.k-ftr__col a { text-decoration: none; }
.k-ftr__col a:hover { color: var(--k-accent); }
.k-ftr__h { margin-bottom: 1rem !important; color: var(--k-grey-light); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.k-ftr__muted { color: var(--k-grey-light); }
@media (max-width: 60rem) { .k-ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.k-ftr__word {
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin: 0 0 -0.12em;
    padding-inline: var(--gutter);
    color: var(--k-paper);
    font-family: var(--font-display);
    font-size: clamp(5rem, 24vw, 30rem);
    font-weight: 900;
    line-height: 0.82;
    letter-spacing: -0.075em;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
}
.k-ftr__word .k-dot { width: 0.16em; height: 0.16em; margin-left: 0.04em; }
.k-ftr__bottom {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 2rem;
    padding: 1.25rem var(--gutter);
    background: var(--k-accent);
    color: var(--k-ink);
    font-size: 0.8125rem;
    font-weight: 700;
}
.k-ftr__bottom p { margin: 0; }
.k-ftr__bottom .k-ftr__muted { color: #3b1305; }
.k-ftr__legal { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.k-ftr__legal a, .k-ftr__top { color: var(--k-ink); }
.k-ftr__top { margin-left: auto; text-decoration: none; letter-spacing: 0.1em; text-transform: uppercase; }
.k-ftr__slot:empty { display: none; }

/* -------------------------------------------------------------------------
   11. Pointer label and reveal
   ------------------------------------------------------------------------- */
.k-cursor { position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none; }
.k-cursor__text {
    display: grid;
    place-items: center;
    width: 7rem;
    height: 7rem;
    margin: -3.5rem 0 0 -3.5rem;
    padding: 1rem;
    border-radius: 50%;
    background: var(--k-accent);
    color: var(--k-ink);
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    transform: scale(0);
    transition: transform 0.35s var(--k-ease);
}
.k-cursor.is-on .k-cursor__text { transform: scale(1); }

@media (prefers-reduced-motion: no-preference) {
    .k-pre { opacity: 0; transform: translateY(2.5rem); }
    .k-pre.is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--k-ease), transform 1.1s var(--k-ease); }
}

/* -------------------------------------------------------------------------
   12. Module pages and shared pieces that keep their own markup
   ------------------------------------------------------------------------- */
:root .cms-lightbox { background: rgb(12 12 12 / 0.96); }
:root .pagination, :root .pager { max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--gutter); }
:root .svc-badge, :root .team-card__badge { border-radius: 999px; }
:root .svc-page h1, :root .team-profile h1 { letter-spacing: -0.045em; }

/* The contacts block: addresses are long words — keep them whole, smaller. */
:root .cms-block--contacts :is(a, p, span, strong) { overflow-wrap: normal; word-break: normal; }
:root .cms-block--contacts .cms-contact__value,
:root .cms-block--contacts [class*='__value'] { font-family: var(--font-display); font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem); letter-spacing: -0.03em; overflow-wrap: anywhere; }

/* -------------------------------------------------------------------------
   13. Design settings (theme.json → design.controls). Defaults reproduce
   the look above; each variant only overrides.
   ------------------------------------------------------------------------- */

/* Paper: the light sections' background. Ink stays near-black. */
html[data-kadr-paper="white"]:root { --k-paper: #ffffff; --k-paper-2: #efefed; --c-surface: #ffffff; }
html[data-kadr-paper="cool"]:root { --k-paper: #eceef0; --k-paper-2: #dde1e5; --c-surface: #f6f7f8; }

/* Uppercase headlines. */
html[data-kadr-caps="on"] :is(h1, h2, h3, .k-ftr__lead, .k-strip__title, .k-index__title, .k-svc__title) { text-transform: uppercase; }

/* The REC timecode in the header. */
html[data-kadr-clock="off"] .k-hdr__clock { display: none; }
html[data-kadr-clock="off"] .k-hdr__bar { grid-template-columns: auto 1fr auto; }
@media (max-width: 60rem) {
    html[data-kadr-clock="off"] .k-hdr__bar { grid-template-columns: 1fr auto; }
}

/* Running lines stand still. */
html[data-kadr-marquee="off"] .k-marquee__track { animation: none; }
html[data-kadr-marquee="off"] .k-marquee__group + .k-marquee__group { display: none; }

/* The pointer label (kadr.js also skips it). */
html[data-kadr-cursor="off"] .k-cursor { display: none; }

/* Film grain over the page. */
html[data-kadr-grain="on"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 95;
    pointer-events: none;
    opacity: 0.09;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Picture corners: the photographs themselves (full-bleed hero excluded). */
:is(.k-card__media, .k-case__cover, .k-cta__media, .k-film__poster, .k-media__item, .k-lead-post__media, .k-post__cover, .k-person__photo, .k-next__img, .k-index__peek, .k-svc__peek) :is(img, video),
:is(.k-card__media, .k-person__photo) { border-radius: var(--kadr-radius); }