/* castle.productions — public site theme.
 *
 * Transcribed 1:1 from the Claude Design model (design_handoff_castle_website,
 * reference/Castle Productions.dc.html — archived on control under
 * ~/design/castle.productions/): every value below is the model's inline
 * style, lifted into a class because the public CSP is zero-inline.
 * Deviations, all deliberate:
 *   · no position:sticky side columns (fleet rule: sticky is for the site
 *     header only) — the model's "What we do" column and legal index are static;
 *   · arrows (→ ↗ ↑ ←) are set in Geist Mono: Barlow ships no arrow glyphs,
 *     so the model fell back to whatever the visitor's system had;
 *   · scroll-reveal hidden states exist only under html.cp-js (set by
 *     early.js) and never under prefers-reduced-motion.
 * Breakpoints are the model's: narrow < 820px, large >= 1180px.
 * App territory (seeded once by the template, never merged over).
 */

/* ── Fonts: self-hosted subsets (the CSP blocks Google Fonts). Sources +
      OFL licences: ../fonts/OFL.txt (sources: ~/design/castle.productions/fonts/src) ── */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/barlow-400.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/barlow-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-700.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/barlow-condensed-800.woff2) format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/geist-mono-400.woff2) format('woff2'); }
/* CYRILLIC (Russian). Barlow and Barlow Condensed have no Cyrillic at all: without these faces the giant
   headings fall to whatever sans the device has — wider, off-brand, and the word-fit of every heading is lost.
   · display: Oswald (OFL) stands in for Barlow Condensed — 600 for its 700, 700 for its 800 — scaled by
     size-adjust so its capitals are the height of Barlow Condensed's (0.700 / 0.810 em); at that size it also
     runs a touch narrower, so the Latin word capacities hold;
   · mono: Geist Mono's own Cyrillic (the Latin subset above simply did not carry it);
   · body: the system face (system-ui), as on every fleet site.
   unicode-range: only a page that actually shows Cyrillic ever downloads them (5 KB each). */
@font-face { font-family: 'Castle Display Cyr'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/oswald-cyr-600.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+2116; size-adjust: 86.4%; }
@font-face { font-family: 'Castle Display Cyr'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/oswald-cyr-700.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+2116; size-adjust: 86.4%; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/geist-mono-cyr-400.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+2116; }
/* DEVANAGARI (Hindi) and ARABIC. Noto Sans Devanagari / Noto Sans Arabic at Condensed ExtraBold (OFL, static
   instances of the variable sources at wdth 75 · wght 800) stand in for Barlow Condensed in display text, one file
   for both display weights. Without them the headings fall to the device's book face — on Android a Naskh.
   unicode-range: only a Hindi or an Arabic page downloads its file (44 KB · 23 KB).
   Body and mono text take the system face of the script — except Arabic: an Android phone's is a Naskh (a book
   hand) under these sans headings, so Arabic running text gets Noto Sans Arabic too (400 for 400-500, 600 above). */
@font-face { font-family: 'Castle Display Deva'; font-style: normal; font-weight: 700 800; font-display: swap; src: url(../fonts/noto-sans-devanagari-cond-800.woff2) format('woff2'); unicode-range: U+0900-097F, U+200C-200D, U+25CC; }
@font-face { font-family: 'Castle Display Arab'; font-style: normal; font-weight: 700 800; font-display: swap; src: url(../fonts/noto-sans-arabic-cond-800.woff2) format('woff2'); unicode-range: U+0600-06FF; }
@font-face { font-family: 'Castle Body Arab'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(../fonts/noto-sans-arabic-400.woff2) format('woff2'); unicode-range: U+0600-06FF; }
@font-face { font-family: 'Castle Body Arab'; font-style: normal; font-weight: 600 900; font-display: swap; src: url(../fonts/noto-sans-arabic-600.woff2) format('woff2'); unicode-range: U+0600-06FF; }

/* ── Tokens ── */
:root {
    --site-bg: #F4F2EB;                 /* cream page */
    --site-ink: #17150F;                /* text, solid buttons, curtain */
    --site-muted: #6F695C;              /* secondary text, mono labels */
    --site-line: rgba(23, 21, 15, .14); /* hairlines */
    --site-accent: #FF9300;             /* orange: dots, hovers, underlines */
    --site-dark: #0f0d09;               /* hero / 404 base */
    --site-footer: #141109;
    --site-footer-fg: #CFC9BC;
    --site-footer-muted: #8a8478;
    --site-ph: #1a1712;                 /* behind lazy images */
    --site-display: 'Barlow Condensed', 'Castle Display Cyr', 'Castle Display Deva', 'Castle Display Arab', 'Arial Narrow', sans-serif;
    --site-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --site-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --site-ease: cubic-bezier(.2, .7, .2, 1);
    --site-ease-curtain: cubic-bezier(.76, 0, .24, 1);
    --site-pad: clamp(20px, 5vw, 96px); /* horizontal page padding */
    --site-maxw: 1560px;
    --site-nav-h: 72px;
    --site-top: 0px;                    /* admin-bar offset (admins only) */

    /* the core module library, re-themed (search page, consent, fallbacks) */
    --mod-bg: var(--site-bg);
    --mod-fg: var(--site-ink);
    --mod-muted: var(--site-muted);
    --mod-accent: var(--site-ink);
    --mod-accent-fg: var(--site-bg);
    --mod-surface: var(--site-bg);
    --mod-line: var(--site-line);
    --mod-radius: 0px;
    --mod-maxw: var(--site-maxw);
    --mod-space: 24px;
}

/* ── Base ── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }   /* the attribute must beat any author `display` */

body.site {
    background: var(--site-bg);
    color: var(--site-ink);
    font-family: var(--site-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
}
body.site.has-adminbar { --site-top: var(--adminbar-h, 32px); }
body.site.cp-lock { overflow: hidden; }   /* modal / mobile menu open */

a { color: var(--site-ink); }
/* text for assistive tech only: an icon-only control carries its name as a
   real TEXT node (the body translation pipeline translates text, never
   attributes — an aria-label would stay English on /es/) */
.cp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* only where a pointer can hover: on a touch screen :hover sticks after the
   tap (the account icon stayed orange inside its box) */
@media (hover: hover) {
    a:hover { color: var(--site-accent); }
}
::selection { background: var(--site-accent); color: #fff; }

.site-main { flex: 1; }
.site-crumbs { display: none; }   /* the model's page heads carry no breadcrumb */

/* Keyboard focus: the model defines none — keep it visible, on brand. */
.site-main a:focus-visible, .site-main button:focus-visible,
.cp-nav a:focus-visible, .cp-nav button:focus-visible,
.cp-menu a:focus-visible, .cp-footer a:focus-visible,
.cp-footer button:focus-visible, .cp-modal a:focus-visible,
.cp-modal button:focus-visible {
    outline: 2px solid var(--site-accent);
    outline-offset: 3px;
}

/* ── Keyframes (the model's, verbatim) ── */
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes heroUp { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulseRing { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes maskUp { from { clip-path: inset(0 0 100% 0); transform: translateY(40px); } to { clip-path: inset(-10% -5% -12% -5%); transform: none; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }
/* The model's single `wipe` (.95s: rise 0-42%, hold, leave 58-100%) split in
   two for real page loads: the leaving page plays the rise, the arriving
   page holds and plays the exit. */
@keyframes wipeIn { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes wipeOut { from { transform: translateY(0); } to { transform: translateY(-100%); } }

/* ── Shared atoms ── */
.cp-wrap { max-width: var(--site-maxw); margin: 0 auto; }

/* mono eyebrow / meta label */
.cp-mono {
    font-family: var(--site-mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--site-muted);
}

/* every arrow glyph: Geist Mono carries them, Barlow does not */
.cp-arr { font-family: var(--site-mono); }

/* display headings */
.cp-display {
    font-family: var(--site-display);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.01em;
    margin: 0;
}
.cp-title {
    font-family: var(--site-display);
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}

/* text link: a 1px orange underline draws from the start, text turns orange */
.cp-link {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--site-accent), var(--site-accent));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .35s var(--site-ease), color .3s;
    padding-bottom: 2px;
}
.cp-link:hover { background-size: 100% 1px; color: var(--site-accent); }
button.cp-link { border: none; cursor: pointer; font-family: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; padding: 0 0 2px; background-color: transparent; }

/* arrow link ("All work →"): underline on the label, the arrow slides 5px */
.cp-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--site-mono);
    font-size: 12.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--site-ink);
    text-decoration: none;
    padding: 6px 0;
    transition: color .3s;
}
.cp-arrow:hover { color: var(--site-accent); }
.cp-arrow__label {
    display: inline-block;
    background-image: linear-gradient(var(--site-accent), var(--site-accent));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .35s var(--site-ease);
    padding-bottom: 3px;
    line-height: 1;
}
.cp-arrow:hover .cp-arrow__label { background-size: 100% 1px; }
.cp-arrow__icon {
    font-size: 15px;
    line-height: 1;
    display: inline-block;
    margin-top: -3px;
    transition: transform .35s var(--site-ease);
}
.cp-arrow:hover .cp-arrow__icon { transform: translateX(5px); }

/* solid buttons: ink (or white) → orange; [data-magnetic] ones lean to the cursor */
.cp-btn {
    display: inline-flex;
    align-items: center;
    background: var(--site-ink);
    color: var(--site-bg);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: transform .35s var(--site-ease), background .3s, color .3s;
}
.cp-btn:hover { background: var(--site-accent); color: #fff; }
.cp-btn--sm { gap: 10px; font-family: var(--site-body); font-weight: 600; font-size: 14px; letter-spacing: .01em; padding: 12px 18px; transition: transform .35s var(--site-ease), background .35s, color .35s; }
.cp-btn--md { gap: 11px; font-family: var(--site-body); font-weight: 600; font-size: 16px; letter-spacing: .01em; padding: 16px 30px; }
.cp-btn--md .cp-arr { font-size: 17px; }
.cp-btn--lg { gap: 12px; font-family: var(--site-body); font-weight: 600; font-size: clamp(15px, 1.2vw, 17px); letter-spacing: .01em; padding: clamp(15px, 1.4vw, 20px) clamp(24px, 2.4vw, 34px); }
.cp-btn--lg .cp-arr { font-size: 18px; }
.cp-btn--xl { gap: 14px; font-family: var(--site-display); font-weight: 700; text-transform: uppercase; font-size: calc(var(--cp-ds2, 1) * clamp(20px, 1.8vw, 28px)); letter-spacing: .04em; line-height: 1; padding: clamp(16px, 1.6vw, 22px) clamp(24px, 2.4vw, 36px); }
.cp-btn--xl .cp-arr { display: inline-block; font-size: clamp(18px, 1.5vw, 24px); line-height: 1; transition: transform .35s var(--site-ease); }
.cp-btn--xl:hover .cp-arr { transform: translateX(5px); }
.cp-btn--white { background: #fff; color: #17150F; }

/* the "▶ Play showreel" underlined trigger */
.cp-reel {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .7);
    padding: 0 0 12px;
    cursor: pointer;
    color: #fff;
    font-family: var(--site-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: calc(var(--cp-ds2, 1) * clamp(26px, 2.8vw, 44px));
    letter-spacing: .03em;
    line-height: 1;
    transition: border-color .3s, color .3s;
}
.cp-reel:hover { color: var(--site-accent); border-color: var(--site-accent); }
.cp-reel__tri { width: 0; height: 0; border-left: 16px solid currentColor; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.cp-reel--sm { gap: 14px; padding: 0 0 10px; font-size: calc(var(--cp-ds2, 1) * clamp(20px, 1.8vw, 28px)); letter-spacing: .04em; }
.cp-reel--sm .cp-reel__tri { border-left-width: 13px; border-top-width: 8px; border-bottom-width: 8px; }

/* ── Navigation (fixed; --site-nav-h: 72px, 56px on a phone) ── */
.cp-nav {
    position: fixed;
    top: var(--site-top);
    left: 0;
    right: 0;
    z-index: 50;
    height: var(--site-nav-h);
    --cp-nav-gap: clamp(20px, 3vw, 44px);
    --cp-box: rgba(23, 21, 15, .22);   /* the outlined controls' border (white over the hero) */
    transform-origin: 0 0;             /* site.js pins the bar to the visual viewport when the page is zoomed */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 var(--site-pad);
    background: rgba(244, 242, 235, .86);
    color: #17150F;
    border-bottom: 1px solid rgba(23, 21, 15, .14);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: background .45s, color .45s, border-color .45s;
}
/* The wordmark: 34px tall, 26 on a phone (the model drew it at 22px — Dani
   2026-10-03; the bar stays 72px). Sized by WIDTH inside a shrinkable box so
   it gives way on a narrow bar instead of pushing the page wider. */
.cp-nav__brand { display: flex; align-items: center; flex: 0 1 200px; min-width: 0; padding: 0; text-decoration: none; color: inherit; }
.cp-nav__brand img { width: 200px; max-width: 100%; height: auto; display: block; transition: filter .45s; }
.cp-nav__brand span { font-family: var(--site-display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.cp-nav__links { display: flex; align-items: center; gap: var(--cp-nav-gap); margin-inline-start: auto; }
.cp-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--site-mono);
    font-size: 12.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
    padding: 4px 0;
    white-space: nowrap;   /* a label never breaks in two (zh/ja text has no spaces: it would, anywhere) */
}
.cp-nav__link:hover { color: inherit; }
.cp-nav__link[aria-current]::before { content: ""; width: 6px; height: 6px; background: var(--site-accent); display: block; margin-top: -3px; }
.cp-nav__link span {
    display: inline-block;
    background-image: linear-gradient(var(--site-accent), var(--site-accent));
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .3s;
    padding-bottom: 3px;
    line-height: 1;
}
.cp-nav__link:hover span { background-size: 100% 1.5px; }
/* end cluster (fleet pattern; not in the model): language dropdown — it only
   exists once a second language is active — the account icon and the CTA.
   The two controls sit in outlined boxes as tall as the button (42px). The
   cluster follows the links at the links' own gap (the bar's is 24px). */
.cp-nav__tools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-inline-start: calc(var(--cp-nav-gap) - 24px); }
.cp-nav__tools > * { flex: 0 0 auto; white-space: nowrap; }
.cp-lang { position: relative; }
.cp-lang summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; border: 1px solid var(--cp-box); cursor: pointer; font-family: var(--site-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: inherit; transition: color .3s, border-color .3s; }
.cp-lang[open] summary { color: var(--site-accent); border-color: var(--site-accent); }
.cp-lang summary::-webkit-details-marker { display: none; }
.cp-lang__chev { width: 0; height: 0; margin-top: -2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .3s var(--site-ease); }
.cp-lang[open] .cp-lang__chev { transform: rotate(180deg); }
/* TWO COLUMNS, each read top to bottom (Dani 2026-10-04: twelve languages made one tall list). A grid filled by
   column: the header prints how many rows half the list takes (data-rows), so any number of languages splits in
   two — and a short screen can still scroll it. */
.cp-lang__panel { position: absolute; top: calc(100% + 16px); inset-inline-end: 0; z-index: 60; padding: 8px 0; display: grid; grid-auto-flow: column; grid-auto-columns: auto; grid-template-rows: repeat(6, auto); background: var(--site-bg); border: 1px solid rgba(23, 21, 15, .22); }
.cp-lang__panel[data-rows="1"] { grid-template-rows: repeat(1, auto); }
.cp-lang__panel[data-rows="2"] { grid-template-rows: repeat(2, auto); }
.cp-lang__panel[data-rows="3"] { grid-template-rows: repeat(3, auto); }
.cp-lang__panel[data-rows="4"] { grid-template-rows: repeat(4, auto); }
.cp-lang__panel[data-rows="5"] { grid-template-rows: repeat(5, auto); }
.cp-lang__panel a { display: flex; align-items: center; gap: 10px; padding: 10px 18px; font-family: var(--site-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--site-muted); text-decoration: none; transition: color .25s; }
.cp-lang__panel a::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: -2px; background: transparent; }
.cp-lang__panel a[aria-current]::before { background: var(--site-accent); }
.cp-lang__panel b { font-weight: 400; min-width: 26px; letter-spacing: .1em; color: var(--site-ink); transition: color .25s; }
.cp-lang__panel a[aria-current] { color: var(--site-ink); }
.cp-lang__panel a:hover, .cp-lang__panel a:hover b { color: var(--site-accent); }
.cp-nav__account { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--cp-box); color: inherit; transition: color .3s, border-color .3s; }
/* hover only where a pointer hovers: on a touch screen it would stick after the tap */
@media (hover: hover) {
    .cp-lang summary:hover, .cp-nav__account:hover, .cp-nav__burger:hover { color: var(--site-accent); border-color: var(--site-accent); }
}
.cp-nav__account svg { display: block; }
/* the burger: three bars in a box, the phone bar's third 34px control
   (the model drew two free bars — Dani 2026-10-03) */
.cp-nav__burger { display: none; flex: 0 0 auto; background: none; border: 1px solid var(--cp-box); cursor: pointer; padding: 0; width: 34px; height: 34px; place-items: center; color: inherit; transition: color .3s, border-color .3s; }
.cp-nav__bars { display: flex; flex-direction: column; gap: 4px; }
.cp-nav__bars i { display: block; width: 16px; height: 2px; background: currentColor; }
.cp-nav__x { display: none; font-size: 24px; line-height: 1; margin-top: -2px; }
.cp-nav.is-open .cp-nav__bars { display: none; }
.cp-nav.is-open .cp-nav__x { display: block; }

/* Hero chrome: transparent bar, white ink, white CTA — while the page opens
   on a dark full-bleed hero (Home, 404), until 40px of scroll or the menu. */
body:has(.cp-hero) .cp-nav:not(.is-scrolled):not(.is-open),
body:has(.cp-404) .cp-nav:not(.is-scrolled):not(.is-open) {
    --cp-box: rgba(255, 255, 255, .5);
    background: transparent;
    color: #fff;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body:has(.cp-hero) .cp-nav:not(.is-scrolled):not(.is-open) .cp-nav__brand img,
body:has(.cp-404) .cp-nav:not(.is-scrolled):not(.is-open) .cp-nav__brand img { filter: invert(1); }
body:has(.cp-hero) .cp-nav:not(.is-scrolled):not(.is-open) .cp-btn--sm,
body:has(.cp-404) .cp-nav:not(.is-scrolled):not(.is-open) .cp-btn--sm { background: #fff; color: #17150F; }
body:has(.cp-hero) .cp-nav:not(.is-scrolled):not(.is-open) .cp-btn--sm:hover,
body:has(.cp-404) .cp-nav:not(.is-scrolled):not(.is-open) .cp-btn--sm:hover { background: var(--site-accent); color: #fff; }

/* Mobile menu: full-screen cream overlay under the bar */
.cp-menu {
    position: fixed;
    inset: var(--site-top) 0 0 0;
    z-index: 45;
    background: var(--site-bg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: calc(var(--site-nav-h) + 24px) var(--site-pad) 32px;
    animation: fadeIn .3s ease both;
    overflow-y: auto;
}
.cp-menu__list { display: flex; flex-direction: column; border-top: 1px solid var(--site-line); }
.cp-menu__item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    border-bottom: 1px solid var(--site-line);
    padding: 15px 0;
    text-align: start;
    color: var(--site-ink);
    text-decoration: none;
}
.cp-menu__item:hover { color: var(--site-ink); }
/* 32px on a phone (the model's 44px+ read too big — Dani 2026-10-03) */
.cp-menu__label { font-family: var(--site-display); font-weight: 800; font-size: calc(var(--cp-ds2, 1) * clamp(30px, 8.2vw, 52px)); text-transform: uppercase; line-height: 1; letter-spacing: -.01em; }
.cp-menu__num { font-family: var(--site-mono); font-size: 12px; letter-spacing: .12em; color: var(--site-muted); }
.cp-menu__base { padding-top: 32px; font-family: var(--site-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--site-muted); }
.cp-menu__foot {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.cp-menu__foot .cp-link { color: var(--site-ink); }
.cp-menu__foot .cp-link:hover { color: var(--site-accent); }

/* A phone's bar (Dani 2026-10-03): a smaller wordmark, then the language
   box, the account box and the burger box — three 34px controls, tight
   around their icons. The links and the CTA leave the bar; the language
   panel hangs from the bar itself. */
@media (max-width: 819.98px) {
    :root { --site-nav-h: 56px; }   /* 34px controls + 11px above and below — no idle band */
    .cp-nav { gap: 6px; }
    .cp-nav__brand { flex-basis: 150px; }
    .cp-nav__brand img { width: 150px; }
    .cp-nav__links { display: none; }
    .cp-nav__tools { margin-inline-start: auto; padding-inline-start: 10px; gap: 6px; }
    .cp-nav__tools .cp-btn--sm { display: none; }
    .cp-nav__account { width: 34px; height: 34px; }
    .cp-lang { position: static; }
    .cp-lang summary { height: 34px; padding: 0 9px; gap: 6px; font-size: 12px; }
    .cp-lang__panel { top: calc(100% + 8px); inset-inline-end: var(--site-pad); max-height: calc(100svh - var(--site-nav-h) - 32px); overflow-y: auto; }
    .cp-nav__burger { display: grid; }
    /* without JS the burger opens nothing: an inert button is worse than
       none — the footer's Index carries the navigation */
    html:not(.cp-js):not(.cp-live) .cp-nav__burger { display: none; }
}
@media (max-width: 359.98px) {
    .cp-nav__tools { padding-inline-start: 4px; }
    .cp-lang summary { padding: 0 7px; gap: 5px; }
    /* the two columns must fit 280px: tighter cells, less tracking */
    .cp-lang__panel a { padding: 10px; gap: 7px; letter-spacing: .06em; }
    .cp-lang__panel b { min-width: 23px; letter-spacing: .06em; }
}
/* the end cluster must fit beside four links + the button down to 820px */
@media (min-width: 820px) and (max-width: 939.98px) {
    .cp-nav { --cp-nav-gap: 14px; }
    .cp-nav__tools { gap: 8px; }
    .cp-lang summary { padding: 0 11px; }
}
@media (min-width: 820px) {
    .cp-menu { display: none !important; }
}

/* ── Page-transition curtain (cross-document) ──
   html.cp-leave: the click handler covers the page (rise, .4s) and then
   navigates; html.cp-arrive (early.js, before first paint): the new page
   starts covered and the curtain leaves upwards. */
html.cp-leave body::after,
html.cp-arrive body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 95;
    background: var(--site-ink);
    pointer-events: none;
}
html.cp-leave body::after { animation: wipeIn .4s var(--site-ease-curtain) both; }
html.cp-arrive body::before { animation: wipeOut .4s var(--site-ease-curtain) .15s both; }

/* ── Scroll reveals (JS-armed: html.cp-js; revealed once: .is-in) ── */
.cp-js [data-reveal]:not([data-reveal="mask"]) { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--site-ease), transform .9s var(--site-ease); }
.cp-js [data-reveal].is-in:not([data-reveal="mask"]) { opacity: 1; transform: none; }
.cp-js [data-reveal="mask"] { clip-path: inset(0 0 100% 0); transform: translateY(30px); transition: clip-path 1s var(--site-ease), transform 1s var(--site-ease); }
.cp-js [data-reveal="mask"].is-in { clip-path: inset(-10% -5% -12% -5%); transform: none; }
.cp-js [data-reveal="mask"].is-done { clip-path: none; }
.cp-js [data-reveal-stagger] > * { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--site-ease), transform .8s var(--site-ease); }
.cp-js [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
.cp-js [data-reveal-stagger] > :nth-child(2) { transition-delay: 90ms; }
.cp-js [data-reveal-stagger] > :nth-child(3) { transition-delay: 180ms; }
.cp-js [data-reveal-stagger] > :nth-child(4) { transition-delay: 270ms; }
.cp-js [data-reveal-stagger] > :nth-child(5) { transition-delay: 360ms; }
.cp-js [data-reveal-stagger] > :nth-child(6) { transition-delay: 450ms; }
.cp-js [data-reveal-stagger] > :nth-child(7) { transition-delay: 540ms; }
.cp-js [data-reveal-stagger] > :nth-child(8) { transition-delay: 630ms; }
.cp-js [data-reveal-stagger] > :nth-child(n+9) { transition-delay: 720ms; }

/* view mount (inner pages rise in, as the model's views do) */
.cp-rise { animation: riseIn .5s var(--site-ease) both; }

/* ════════════ HOME ════════════ */

/* Hero */
.cp-hero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; background: var(--site-dark); color: #fff; }
/* The poster is the hero while the reel loads — and the whole hero under
   reduced motion / Save-Data, where no video mounts. The model's shade is
   tuned for the dark reel; over this bright frame the white type needs the
   poster itself taken down (the playing video covers it, untouched). */
.cp-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: brightness(.58) saturate(1.05); }
.cp-hero__video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; container-type: size; }
.cp-hero__video.is-playing { opacity: 1; }
/* 16:9 covering the hero BOX (cq units): on a short landscape screen the hero
   is its 600px minimum, taller than the viewport the first pair measures —
   that pair stays as the fallback for browsers without container units */
.cp-hero__video iframe { position: absolute; top: 50%; left: 50%; width: max(100vw, 177.78svh); height: max(100svh, 56.25vw); width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); transform: translate(-50%, -50%); border: 0; }
.cp-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 9, 6, .42) 0%, rgba(10, 9, 6, 0) 30%, rgba(10, 9, 6, 0) 60%, rgba(10, 9, 6, .62) 100%); }
.cp-hero__content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: calc(var(--site-nav-h) + clamp(18px, 3vw, 36px)) var(--site-pad) clamp(24px, 4vw, 56px);
    will-change: transform, opacity;
}
.cp-hero__top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-family: var(--site-mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .88);
    animation: heroUp .9s .15s var(--site-ease) both;
}
.cp-hero__mid { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: clamp(44px, 8vw, 72px); }
.cp-hero__title {
    flex: 0 1 auto;
    align-self: flex-start;
    text-align: start;
    font-family: var(--site-display);
    font-weight: 800;
    text-transform: uppercase;
    font-size: calc(var(--cp-ds, 1) * clamp(56px, 9.5vw, 168px));
    line-height: .88;
    letter-spacing: -.01em;
    margin: 0;
    max-width: 14ch;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
    animation: maskUp 1.2s .3s var(--site-ease) both;
}
.cp-ring {
    position: relative;
    flex: 0 0 auto;
    width: clamp(88px, 11vw, 176px);
    height: clamp(88px, 11vw, 176px);
    margin-inline-end: 0;
    margin-inline-start: clamp(12px, 2vw, 32px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform .35s var(--site-ease), background .3s, border-color .3s;
    /* `backwards`, not the model's `both`: a filled animation would pin
       transform and kill the magnetic lean the model asks for */
    animation: heroUp 1s .6s var(--site-ease) backwards;
}
.cp-ring:hover { background: var(--site-accent); border-color: var(--site-accent); }
.cp-ring__pulse { position: absolute; inset: -12px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); animation: pulseRing 2.4s ease-out infinite; pointer-events: none; }
.cp-ring__tri { width: 0; height: 0; border-left: clamp(20px, 2.4vw, 34px) solid #fff; border-top: clamp(12px, 1.4vw, 20px) solid transparent; border-bottom: clamp(12px, 1.4vw, 20px) solid transparent; margin-left: 6px; }
.cp-hero__bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; animation: heroUp 1s .4s var(--site-ease) both; }
.cp-hero__scroll { font-family: var(--site-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
/* phones + portrait tablets: the headline and the play ring sit centred
   (Dani 2026-10-03; the model keeps them left with the ring indented) */
@media (max-width: 819.98px) {
    .cp-hero__mid { align-items: center; }
    .cp-hero__title { align-self: center; text-align: center; }
    .cp-ring { margin-inline-start: 0; }
}
@media (min-width: 1180px) {
    .cp-hero__mid { flex-direction: row; align-items: center; gap: clamp(24px, 4vw, 80px); }
    .cp-ring { margin-inline-start: 0; margin-inline-end: clamp(64px, 12vw, 240px); }
}

/* "The studio" intro */
.cp-intro { padding: clamp(64px, 9vw, 140px) var(--site-pad) clamp(48px, 6vw, 96px); }
.cp-split { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 64px); align-items: flex-start; }
.cp-split__label { flex: 1 1 220px; padding-top: 10px; }
.cp-split__body { flex: 3 1 520px; min-width: 0; }
.cp-intro__lead { font-family: var(--site-body); font-weight: 500; font-size: clamp(26px, 2.7vw, 44px); line-height: 1.18; letter-spacing: -.015em; margin: 0; max-width: 1040px; text-wrap: pretty; }
.cp-intro .cp-arrow { margin-top: clamp(22px, 3vw, 40px); }

/* Featured films */
.cp-featured { padding: clamp(24px, 4vw, 60px) var(--site-pad) clamp(64px, 8vw, 120px); }
.cp-sect-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(22px, 3vw, 40px); padding-bottom: 18px; border-bottom: 1px solid var(--site-line); }
.cp-sect-head__titles { display: flex; flex-direction: column; gap: 14px; }
.cp-sect-head h2 { font-size: calc(var(--cp-ds, 1) * clamp(40px, 5.5vw, 84px)); line-height: .9; }

/* Film cards (Home featured + Work grid) */
.cp-card { display: flex; flex-direction: column; gap: 14px; cursor: pointer; min-width: 0; color: var(--site-ink); text-decoration: none; }
.cp-card:hover { color: var(--site-ink); }
.cp-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--site-ph); border: 1px solid var(--site-line); }
.cp-card__img { position: absolute; inset: 0; }
.cp-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .8s var(--site-ease); }
.cp-card:hover .cp-card__img img { transform: scale(1.045); }
.cp-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, .38)); pointer-events: none; }
.cp-card__tag { position: absolute; top: 14px; inset-inline-start: 14px; font-family: var(--site-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); pointer-events: none; }
.cp-card__play { position: absolute; bottom: 14px; inset-inline-start: 14px; width: 40px; height: 40px; background: var(--site-accent); display: grid; place-items: center; pointer-events: none; }
.cp-card__play i { width: 0; height: 0; border-left: 12px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.cp-card__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 20px; flex-wrap: wrap; }
.cp-card__title { font-family: var(--site-display); font-weight: 700; text-transform: uppercase; font-size: clamp(24px, 2.3vw, 34px); line-height: 1; letter-spacing: .005em; margin: 0; }
.cp-card__client { font-family: var(--site-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--site-muted); }
/* hover preview: a muted looping player over the thumbnail (JS-mounted) */
.cp-card__preview { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: #000; opacity: 0; transition: opacity .6s ease; }
.cp-card__preview.is-playing { opacity: 1; }
/* site.js gives the frame the FILM's shape and the size that covers the card
   (a background player letterboxes whatever its frame's shape is not) */
.cp-card__preview iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%) scale(1.02); border: 0; }

/* the first featured film: a 2:1 poster */
.cp-card--first { gap: 16px; }
.cp-card--first .cp-card__media { aspect-ratio: 2 / 1; }
.cp-card--first .cp-card__img { inset: -10% 0; will-change: transform; }
.cp-card--first:hover .cp-card__img img { transform: scale(1.04); }
.cp-card--first .cp-card__shade { background: linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, .42)); }
.cp-card--first .cp-card__tag { top: clamp(14px, 1.6vw, 24px); inset-inline-start: clamp(14px, 1.6vw, 24px); font-size: 12px; letter-spacing: .14em; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.cp-card--first .cp-card__tag--end { inset-inline-start: auto; inset-inline-end: clamp(14px, 1.6vw, 24px); }
.cp-card--first .cp-card__play { bottom: clamp(14px, 1.6vw, 24px); inset-inline-start: clamp(14px, 1.6vw, 24px); width: clamp(44px, 4vw, 60px); height: clamp(44px, 4vw, 60px); }
.cp-card--first .cp-card__play i { border-left-width: 14px; border-top-width: 9px; border-bottom-width: 9px; margin-left: 4px; }
.cp-card--first .cp-card__cap { gap: 12px 24px; }
.cp-card--first .cp-card__title { font-size: clamp(32px, 4vw, 60px); line-height: .95; letter-spacing: 0; }
.cp-card--first .cp-card__client { font-size: 12.5px; }

.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(300px, 25vw)), 1fr)); gap: clamp(32px, 3.5vw, 56px) clamp(20px, 2.5vw, 40px); }
.cp-featured .cp-grid { margin-top: clamp(32px, 3.5vw, 56px); }

/* Trusted by */
.cp-clients { padding: 0 var(--site-pad) clamp(64px, 8vw, 120px); }
.cp-clients--tight { padding-bottom: clamp(48px, 6vw, 96px); }
.cp-clients__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(18px, 2.5vw, 32px); }
.cp-clients__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-inline-start: 1px solid var(--site-line); border-bottom: 1px solid var(--site-line); }
.cp-clients__cell { min-height: clamp(84px, 9vw, 140px); display: grid; place-items: center; padding: 16px; border-top: 1px solid var(--site-line); border-inline-end: 1px solid var(--site-line); }
.cp-clients__cell img { width: min(100%, clamp(108px, 11.5vw, 172px)); height: auto; display: block; opacity: .78; transition: opacity .3s; }
.cp-clients__cell img:hover { opacity: 1; }
@media (max-width: 819.98px) {
    .cp-clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Services ("What we do") */
.cp-services { padding: 0 var(--site-pad) clamp(64px, 8vw, 120px); }
.cp-services__wrap { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 64px); align-items: flex-start; }
.cp-services__side { flex: 1 1 260px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cp-services__side h2 { font-size: calc(var(--cp-ds, 1) * clamp(40px, 4.8vw, 72px)); line-height: .9; text-wrap: balance; }
.cp-services__side .cp-arrow { margin-top: 8px; }
.cp-services__list { flex: 3 1 520px; min-width: 0; border-bottom: 1px solid var(--site-line); }
.cp-service { display: grid; grid-template-columns: clamp(36px, 4vw, 64px) 1fr; gap: clamp(12px, 2vw, 28px); padding: clamp(20px, 2.4vw, 34px) 0; border-top: 1px solid var(--site-line); }
.cp-service__num { font-family: var(--site-mono); font-size: 13px; color: var(--site-muted); padding-top: 4px; }
.cp-service__body { display: flex; flex-wrap: wrap; gap: 8px 40px; align-items: baseline; }
.cp-service__body h3 { flex: 1 1 240px; font-size: calc(var(--cp-ds2, 1) * clamp(26px, 2.6vw, 40px)); line-height: 1; letter-spacing: .005em; }
.cp-service__body p { flex: 2 1 300px; max-width: 540px; margin: 0; font-size: clamp(15px, 1.1vw, 17px); line-height: 1.55; color: var(--site-muted); }

/* Closing CTA ("Have a project in mind?") */
.cp-cta { padding: 0 var(--site-pad) clamp(72px, 9vw, 140px); }
.cp-cta__wrap { border-top: 1px solid var(--site-line); padding-top: clamp(40px, 5vw, 72px); display: flex; flex-direction: column; gap: clamp(28px, 4vw, 56px); }
.cp-cta__meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cp-cta__row { display: flex; justify-content: space-between; align-items: flex-end; gap: clamp(24px, 4vw, 64px); flex-wrap: wrap; }
.cp-cta__row h2 { font-size: calc(var(--cp-ds, 1) * clamp(56px, 8.4vw, 150px)); line-height: .86; max-width: 15ch; text-wrap: balance; }
.cp-cta__side { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: clamp(4px, .6vw, 10px); }
.cp-cta__mail { font-family: var(--site-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--site-muted); }

/* ════════════ INNER PAGES ════════════ */

/* Page head (Work, Studio, Legal): mono meta row + hairline + giant h1 */
.cp-pagehead { padding: calc(var(--site-nav-h) + clamp(40px, 6vw, 96px)) var(--site-pad) clamp(24px, 3vw, 44px); }
.cp-pagehead__meta { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--site-line); }
.cp-pagehead h1 { line-height: .84; margin: clamp(20px, 3vw, 40px) 0 0; }

/* Work */
.cp-work-title { font-size: calc(var(--cp-ds, 1) * clamp(68px, 13vw, 220px)); }
.cp-work-tools { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-top: clamp(24px, 3.5vw, 52px); }
.cp-work-tools p { max-width: 560px; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--site-muted); margin: 0; text-wrap: pretty; }
.cp-filters { display: flex; flex-wrap: wrap; gap: 8px; }
/* the chips are JS-driven: shown while early.js has armed the page (.cp-js)
   or once site.js is really running (.cp-live — it may arrive after the 5 s
   safety net has dropped .cp-js) */
html:not(.cp-js):not(.cp-live) .cp-filters { display: none; }
.cp-chip {
    background: transparent;
    color: var(--site-ink);
    border: 1px solid rgba(23, 21, 15, .22);
    font-family: var(--site-mono);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 9px 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .25s;
}
.cp-chip[aria-pressed="true"] { background: var(--site-ink); color: var(--site-bg); border-color: var(--site-ink); }
.cp-work-grid { padding: clamp(16px, 2vw, 32px) var(--site-pad) clamp(72px, 9vw, 140px); }

/* Studio */
.cp-studio-title { font-size: calc(var(--cp-ds, 1) * clamp(64px, 12vw, 200px)); max-width: 11ch; text-wrap: balance; }
.cp-about { margin-top: clamp(32px, 4.5vw, 64px); }
.cp-about .cp-split__label { padding-top: 8px; }
.cp-about p { flex: 3 1 520px; min-width: 0; max-width: 880px; font-size: clamp(19px, 1.7vw, 26px); line-height: 1.45; letter-spacing: -.005em; margin: 0; text-wrap: pretty; }
.cp-gallery { padding: clamp(32px, 4vw, 64px) var(--site-pad) clamp(48px, 6vw, 96px); }
.cp-gallery__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: clamp(6px, .8vw, 12px); border-bottom: 1px solid var(--site-line); }
.cp-gallery__rows { display: flex; flex-direction: column; gap: clamp(6px, .8vw, 12px); }
.cp-gallery__row { display: flex; flex-wrap: wrap; gap: clamp(6px, .8vw, 12px); }
/* justified rows: flex-grow = the photo's ratio, basis = ratio × 125px */
.cp-shot { position: relative; min-width: 0; overflow: hidden; background: var(--site-ph); flex: 1.5 1 187.5px; aspect-ratio: 1.5; }
.cp-shot[data-r="0.695"] { flex: .695 1 86.875px; aspect-ratio: .695; }
.cp-shot[data-r="1.333"] { flex: 1.333 1 166.625px; aspect-ratio: 1.333; }
.cp-shot[data-r="1.499"] { flex: 1.499 1 187.375px; aspect-ratio: 1.499; }
.cp-shot[data-r="1.502"] { flex: 1.502 1 187.75px; aspect-ratio: 1.502; }
.cp-shot[data-r="1.507"] { flex: 1.507 1 188.375px; aspect-ratio: 1.507; }
.cp-shot[data-r="1.787"] { flex: 1.787 1 223.375px; aspect-ratio: 1.787; }
.cp-shot[data-r="1.871"] { flex: 1.871 1 233.875px; aspect-ratio: 1.871; }
.cp-shot__plx { position: absolute; inset: -10% 0; will-change: transform; }
.cp-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--site-ease); }
.cp-shot img:hover { transform: scale(1.04); }
.cp-cta2 { padding: clamp(20px, 3vw, 40px) var(--site-pad) clamp(72px, 9vw, 140px); }
.cp-cta2__wrap { border-top: 1px solid var(--site-line); padding-top: clamp(40px, 5vw, 72px); display: flex; justify-content: space-between; align-items: flex-end; gap: clamp(24px, 4vw, 64px); flex-wrap: wrap; }
.cp-cta2__wrap h2 { font-size: calc(var(--cp-ds, 1) * clamp(52px, 8vw, 130px)); line-height: .86; max-width: 12ch; text-wrap: balance; }

/* Contact */
.cp-contact { padding: calc(var(--site-nav-h) + clamp(40px, 6vw, 96px)) var(--site-pad) clamp(72px, 9vw, 140px); }
.cp-contact__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(40px, 6vw, 100px); }
.cp-contact__info { display: flex; flex-direction: column; align-items: flex-start; }
.cp-contact__info h1 { font-size: calc(var(--cp-ds, 1) * clamp(52px, 6.8vw, 120px)); line-height: .86; margin: 20px 0 clamp(28px, 3.5vw, 48px); text-wrap: balance; }
.cp-biglink {
    display: inline-block;
    font-family: var(--site-body);
    font-weight: 600;
    font-size: clamp(20px, 2.2vw, 32px);
    letter-spacing: -.01em;
    color: var(--site-ink);
    text-decoration: none;
    background-image: linear-gradient(var(--site-accent), var(--site-accent));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .35s;
    padding-bottom: 4px;
}
.cp-biglink:hover { background-size: 100% 2px; color: var(--site-ink); }
.cp-contact__blocks { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 64px); margin-top: clamp(34px, 4.5vw, 60px); }
.cp-block__label { font-family: var(--site-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--site-muted); margin: 0 0 10px; }
.cp-block__text { font-size: 16px; line-height: 1.5; margin: 0; }
.cp-block__links { display: flex; flex-direction: column; gap: 6px; font-size: 16px; }
.cp-block__links .cp-link { align-self: flex-start; color: var(--site-ink); }
.cp-block__links .cp-link:hover { color: var(--site-accent); }

/* Contact form (live module `form`, app skin) */
/* the form's landing anchor (?sent / ?error): clear of the fixed bar */
#message { scroll-margin-top: calc(var(--site-nav-h) + 24px); }
.cp-form { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 30px); }
.cp-field { display: flex; flex-direction: column; gap: 9px; }
.cp-field label { font-family: var(--site-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--site-muted); }
.cp-field input, .cp-field textarea, .cp-field select {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(23, 21, 15, .24);
    border-radius: 0;
    padding: 13px 0;
    font-family: inherit;
    font-size: 17px;
    color: var(--site-ink);
    outline: none;
    transition: border-color .3s;
}
.cp-field textarea { resize: vertical; }
.cp-field input:focus, .cp-field textarea:focus, .cp-field select:focus { border-color: var(--site-accent); }
/* the privacy consent (not in the model — every fleet form carries one):
   a square box in the form's own hairline language */
.cp-check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--site-muted); cursor: pointer; }
.cp-check input { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; border: 1px solid rgba(23, 21, 15, .45); border-radius: 0; background: transparent; cursor: pointer; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.cp-check input:hover { border-color: var(--site-ink); }
.cp-check input:checked { background: var(--site-ink); border-color: var(--site-ink); }
.cp-check input:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid var(--site-bg); border-bottom: 2px solid var(--site-bg); transform: translateY(-1px) rotate(-45deg); }
.cp-check input:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 3px; }
.cp-check .cp-link { color: var(--site-ink); }
.cp-check .cp-link:hover { color: var(--site-accent); }
.cp-form .cp-btn--md { align-self: flex-start; margin-top: 8px; }
.cp-form__alert { border: 1px solid var(--site-accent); padding: 14px 18px; font-size: 15px; line-height: 1.5; }
.cp-sent { border: 1px solid var(--site-line); padding: clamp(32px, 4vw, 52px); display: flex; flex-direction: column; gap: 16px; min-height: 300px; justify-content: center; }
.cp-sent__mark { display: inline-flex; gap: 4px; }
.cp-sent__mark i { width: 12px; height: 12px; display: block; background: var(--site-ink); }
.cp-sent__mark i:first-child { background: var(--site-accent); }
.cp-sent__mark i:last-child { background: none; border: 1.8px solid var(--site-ink); }
.cp-sent h2 { font-size: calc(var(--cp-ds2, 1) * clamp(30px, 3vw, 44px)); line-height: 1; margin: 8px 0 0; }
.cp-sent p { font-size: 16px; line-height: 1.6; color: var(--site-muted); margin: 0; max-width: 420px; }
.grecaptcha-badge { z-index: 40; }

/* Legal documents */
.cp-legal { padding: calc(var(--site-nav-h) + clamp(40px, 6vw, 96px)) var(--site-pad) clamp(72px, 9vw, 140px); }
.cp-legal h1 { font-size: calc(var(--cp-ds, 1) * clamp(52px, 9vw, 150px)); line-height: .86; margin: clamp(20px, 3vw, 40px) 0 0; max-width: 12ch; text-wrap: balance; }
.cp-legal__cols { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 64px); align-items: flex-start; margin-top: clamp(36px, 5vw, 72px); }
.cp-legal__nav { flex: 1 1 220px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cp-legal__nav .cp-mono { margin-bottom: 6px; }
.cp-legal__doc { font-family: var(--site-body); font-weight: 500; font-size: 17px; padding: 0 0 4px; text-align: start; color: var(--site-muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.cp-legal__doc:hover { color: var(--site-accent); border-bottom-color: var(--site-accent); }
.cp-legal__doc[aria-current] { font-weight: 600; color: var(--site-ink); border-bottom-color: var(--site-accent); }
.cp-legal__body { flex: 3 1 520px; min-width: 0; max-width: 840px; display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 48px); }
.cp-legal__intro { display: flex; flex-direction: column; gap: 14px; }
.cp-legal__intro > * { font-size: clamp(18px, 1.5vw, 24px); line-height: 1.45; letter-spacing: -.005em; margin: 0; text-wrap: pretty; }
.cp-legal__sec { display: grid; grid-template-columns: clamp(36px, 4vw, 64px) 1fr; gap: clamp(12px, 2vw, 28px); padding-top: clamp(20px, 2.4vw, 34px); border-top: 1px solid var(--site-line); }
.cp-legal__num { font-family: var(--site-mono); font-size: 13px; color: var(--site-muted); padding-top: 5px; }
.cp-legal__text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cp-legal__text h2 { font-family: var(--site-display); font-weight: 700; text-transform: uppercase; font-size: calc(var(--cp-ds2, 1) * clamp(24px, 2.2vw, 34px)); line-height: 1; letter-spacing: .005em; margin: 0; }
.cp-legal__text h3 { font-family: var(--site-body); font-weight: 600; font-size: 17px; line-height: 1.4; margin: 6px 0 0; }
.cp-legal__text p, .cp-legal__text li { font-size: 16.5px; line-height: 1.65; color: var(--site-muted); margin: 0; text-wrap: pretty; }
.cp-legal__text ul, .cp-legal__text ol { margin: 0; padding-inline-start: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.cp-legal__text a { color: var(--site-ink); }
.cp-legal__text a:hover { color: var(--site-accent); }
.cp-legal__text table { border-collapse: collapse; display: block; max-width: 100%; overflow-x: auto; font-size: 15px; }
.cp-legal__text th, .cp-legal__text td { border: 1px solid var(--site-line); padding: 8px 12px; text-align: start; color: var(--site-muted); }
.cp-legal__note { font-family: var(--site-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--site-muted); margin: 0; padding-top: clamp(20px, 2.4vw, 34px); border-top: 1px solid var(--site-line); }
.cp-legal__note p { margin: 0; }
.cp-legal__note em { font-style: normal; }

/* 404 / error: the hero's three rows on a dark full-viewport screen */
.cp-404 {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 56px);   /* on a laptop-height screen the three rows have no slack: without it they touch */
    padding: calc(var(--site-nav-h) + clamp(24px, 4vw, 56px)) var(--site-pad) clamp(24px, 4vw, 56px);
    background: var(--site-dark);
    color: #fff;
    overflow: hidden;
}
.cp-404__bg { position: absolute; inset: 0; background: url(../img/404-bg.jpg) center / cover no-repeat; opacity: .35; filter: grayscale(1); }
.cp-404__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 9, 6, .5) 0%, rgba(10, 9, 6, .1) 40%, rgba(10, 9, 6, .75) 100%); }
.cp-404__row { position: relative; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--site-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .88); animation: heroUp .9s .15s var(--site-ease) both; }
.cp-404__row--end { color: rgba(255, 255, 255, .72); animation-delay: .7s; }
.cp-404__mid { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(24px, 3vw, 40px); }
.cp-404__mid h1 { font-family: var(--site-display); font-weight: 800; text-transform: uppercase; font-size: calc(var(--cp-ds, 1) * clamp(64px, 14vw, 260px)); line-height: .84; letter-spacing: -.015em; margin: 0; max-width: 9ch; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, .35); animation: maskUp 1.2s .3s var(--site-ease) both; }
.cp-404__mid p { font-family: var(--site-body); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: rgba(255, 255, 255, .78); margin: 0; max-width: 46ch; text-wrap: pretty; animation: heroUp 1s .5s var(--site-ease) both; }
.cp-404__actions { display: flex; gap: clamp(16px, 2vw, 28px); flex-wrap: wrap; align-items: center; animation: heroUp 1s .6s var(--site-ease) backwards; }

/* ── Footer ── */
.cp-footer { background: var(--site-footer); color: var(--site-footer-fg); padding: clamp(56px, 7vw, 100px) var(--site-pad) clamp(24px, 3vw, 36px); }
.cp-footer__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-bottom: clamp(36px, 4.5vw, 64px); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.cp-footer__logo { width: min(100%, 300px); height: auto; filter: invert(1); opacity: .96; display: block; }
.cp-footer__name { font-family: var(--site-display); font-weight: 800; font-size: 32px; text-transform: uppercase; }
.cp-footer__tag { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: end; font-family: var(--site-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--site-footer-muted); line-height: 1.7; }
.cp-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: clamp(32px, 4vw, 64px) clamp(24px, 3vw, 48px); padding: clamp(36px, 4.5vw, 64px) 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.cp-footer__label { font-family: var(--site-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--site-footer-muted); margin: 0 0 16px; }
.cp-footer__list { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; font-size: 16px; }
.cp-footer__list .cp-link { color: var(--site-footer-fg); }
.cp-footer__list .cp-link:hover { color: var(--site-accent); }
.cp-footer__list > span { color: var(--site-footer-muted); }   /* its plain lines — not the arrows inside its links */
.cp-footer__base { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 22px; font-family: var(--site-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--site-footer-muted); }
.cp-footer__base .cp-link { color: var(--site-footer-fg); }
.cp-footer__base .cp-link:hover { color: var(--site-accent); }
.cp-footer__place span { white-space: nowrap; }   /* "Fuerteventura —" / "Canary Islands": it breaks at the dash only */
/* Phones + portrait tablets (Dani 2026-10-03): the four blocks pair up in two
   columns — Index | Follow, Legal | Contact — instead of one long stack; the
   wider right column holds the email. The tagline reads from the left, under
   a smaller wordmark. */
@media (max-width: 819.98px) {
    .cp-footer__logo { width: min(100%, 240px); }
    .cp-footer__cols { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 36px 20px; }
}
/* 820–899px: four 180px columns do not fit yet — auto-fit left three and an
   orphan. The pairs stay until four fit. */
@media (min-width: 820px) and (max-width: 899.98px) {
    .cp-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {   /* the tagline has wrapped under the wordmark */
    .cp-footer__tag { align-items: flex-start; text-align: start; }
}
@media (max-width: 359.98px) {
    .cp-footer__cols { gap: 32px 14px; }
    .cp-footer__list { font-size: 15px; }
    .cp-footer__list a[href^="mailto:"] { font-size: 13.5px; }
}

/* ── Video modal (every film card + the showreel) ── */
/* centred by auto margins, not place-items: a box taller than a short
   viewport then scrolls from its top instead of losing it above the fold */
.cp-modal { position: fixed; inset: 0; z-index: 100; background: rgba(10, 9, 6, .95); display: flex; padding: clamp(16px, 4vw, 64px); animation: fadeIn .3s ease both; overflow-y: auto; }
.cp-modal__box { width: min(1240px, 96vw); max-width: 100%; margin: auto; display: flex; flex-direction: column; gap: 18px; color: #EDE9DF; animation: modalIn .55s var(--site-ease) both; }
.cp-modal__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.cp-modal__titles { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cp-modal__meta { font-family: var(--site-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #9b958a; }
.cp-modal__title { font-family: var(--site-display); font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 3vw, 44px); line-height: .95; letter-spacing: 0; margin: 0; }
.cp-modal__close { flex: 0 0 auto; background: none; border: 1px solid rgba(255, 255, 255, .3); color: #fff; cursor: pointer; width: 42px; height: 42px; font-size: 22px; line-height: 1; display: grid; place-items: center; padding: 0; transition: border-color .3s, color .3s; }
.cp-modal__close:hover { border-color: var(--site-accent); color: var(--site-accent); }
.cp-modal__player { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #000; border: 1px solid rgba(255, 255, 255, .12); }
.cp-modal__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cp-modal__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-family: var(--site-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.cp-modal__foot > .cp-link { color: #9b958a; }
.cp-modal__nav { display: flex; gap: 24px; }
.cp-modal__nav .cp-link { color: #EDE9DF; }
.cp-modal__foot .cp-link:hover { color: var(--site-accent); }

/* ── Core functional surfaces, dressed in the theme ── */

/* search results page (/search) */
.search-page { padding: calc(var(--site-nav-h) + clamp(40px, 6vw, 96px)) var(--site-pad) clamp(72px, 9vw, 140px); max-width: calc(var(--site-maxw) + 2 * var(--site-pad)); margin: 0 auto; }
.search-page h1 { font-family: var(--site-display); font-weight: 800; text-transform: uppercase; font-size: clamp(52px, 9vw, 150px); line-height: .86; letter-spacing: -.01em; margin: 0 0 clamp(24px, 3vw, 44px); }
.search-page__form { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: clamp(28px, 3.5vw, 48px); }
.search-page__form input[type=search], .search-page__form input[type=text] { flex: 1 1 280px; background: transparent; border: none; border-bottom: 1px solid rgba(23, 21, 15, .24); border-radius: 0; padding: 13px 0; font: inherit; font-size: 17px; color: var(--site-ink); outline: none; }
.search-page__form input:focus { border-color: var(--site-accent); }
.search-page__form input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }   /* the UA's blue × */
.search-page__form button { background: var(--site-ink); color: var(--site-bg); border: none; cursor: pointer; font-family: var(--site-body); font-weight: 600; font-size: 16px; padding: 16px 30px; transition: background .3s, color .3s; }
.search-page__form button:hover { background: var(--site-accent); color: #fff; }
.search-page__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--site-line); max-width: 840px; }
.search-page__item { padding: clamp(20px, 2.4vw, 34px) 0; border-top: 1px solid var(--site-line); }
.search-page__type { font-family: var(--site-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--site-muted); display: block; margin-bottom: 10px; }
.search-page__link { font-family: var(--site-display); font-weight: 700; text-transform: uppercase; font-size: clamp(24px, 2.2vw, 34px); line-height: 1; text-decoration: none; }
.search-page__excerpt { font-size: 16.5px; line-height: 1.65; color: var(--site-muted); margin: 12px 0 0; }
.search-page__excerpt mark { background: none; color: var(--site-ink); box-shadow: inset 0 -2px 0 var(--site-accent); }
.search-page__empty { font-size: 17px; color: var(--site-muted); }

/* plain Markdown pages + the core error fallback sit under the fixed bar */
.site-main > .entry, .site-main > .public-error { padding: calc(var(--site-nav-h) + clamp(40px, 6vw, 96px)) var(--site-pad) clamp(72px, 9vw, 140px); max-width: calc(840px + 2 * var(--site-pad)); margin: 0 auto; }
.entry { font-size: 16.5px; line-height: 1.65; }
.entry h1 { font-family: var(--site-display); font-weight: 800; text-transform: uppercase; font-size: clamp(52px, 9vw, 150px); line-height: .86; letter-spacing: -.01em; margin: 0 0 clamp(24px, 3vw, 44px); }
.entry h2, .entry h3 { font-family: var(--site-display); font-weight: 700; text-transform: uppercase; line-height: 1; margin: 1.6em 0 .5em; }
.entry h2 { font-size: clamp(24px, 2.2vw, 34px); }
.entry h3 { font-size: clamp(20px, 1.7vw, 26px); }
.entry p, .entry li { color: var(--site-muted); }
.entry img { max-width: 100%; height: auto; }
.entry table { border-collapse: collapse; display: block; max-width: 100%; overflow-x: auto; }
.entry th, .entry td { border: 1px solid var(--site-line); padding: 8px 12px; text-align: start; }
.entry pre { overflow-x: auto; }

/* cookie consent (renders only while Analytics is on): square, on brand */
.cookie-consent { border-radius: 0; background: var(--site-bg); color: var(--site-ink); border: 1px solid rgba(23, 21, 15, .22); box-shadow: none; font-family: var(--site-body); font-size: 15px; z-index: 44; }
.cookie-consent__actions button { border-radius: 0; font-family: var(--site-body); font-weight: 600; font-size: 14px; padding: 12px 18px; transition: background .3s, color .3s, border-color .3s; }
.cookie-consent__accept { background: var(--site-ink); color: var(--site-bg); }
.cookie-consent__accept:hover { background: var(--site-accent); color: #fff; filter: none; }
.cookie-consent__decline { border: 1px solid rgba(23, 21, 15, .22); }

/* ════════════ SCRIPTS BEYOND LATIN AND CYRILLIC (zh · ja · hi · ar) ════════════
   The model is drawn in a condensed Latin capital: ~.42em wide, .7em tall, set solid (line-height .84–.9) and
   tracked. None of that carries over, so each script states its own terms — here, in ONE place:
   · --cp-ds / --cp-ds2 scale the giant and the small display sizes (every display font-size multiplies by them);
   · display text takes its script's leading, loses its tracking and its measure in `ch` (the width of a Latin 0);
   · zh · ja — system gothic (a webfont would be megabytes). A Han character or a kana is a full em square and the
     text has no spaces, so display text is `keep-all` and breaks ONLY at the U+200B marks written into each heading
     (~/design/castle.productions/lang-acts/langs/zh.py): no phrase is ever cut in two. Body text wraps as it
     should, with strict kinsoku;
   · hi · ar — the condensed stand-ins declared at the top. Joined scripts are NEVER tracked: letter-spacing tears
     the headstroke and the joins apart;
   · body and mono text: the script's system face (the generic `monospace` of Windows is a bitmap-era face for
     these scripts — the mono stack ends in sans-serif instead). */
html:lang(zh) {
    --cp-ds: .8; --cp-ds2: .86;
    --site-display: 'Barlow Condensed', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', sans-serif;
    --site-body: 'Barlow', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', system-ui, sans-serif;
    --site-mono: 'Geist Mono', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', sans-serif;
}
html:lang(ja) {
    --cp-ds: .64; --cp-ds2: .8;
    --site-display: 'Barlow Condensed', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
    --site-body: 'Barlow', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', 'Noto Sans JP', system-ui, sans-serif;
    --site-mono: 'Geist Mono', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo', 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
    line-break: strict;
}
html:lang(hi) {
    --cp-ds: .72; --cp-ds2: .86;
    --site-body: 'Barlow', 'Noto Sans Devanagari', 'Kohinoor Devanagari', 'Nirmala UI', system-ui, sans-serif;
    --site-mono: 'Geist Mono', 'Noto Sans Devanagari', 'Kohinoor Devanagari', 'Nirmala UI', sans-serif;
}
html:lang(ar) {
    --cp-ds: .8; --cp-ds2: .9;
    --site-body: 'Barlow', 'Castle Body Arab', 'Segoe UI', 'SF Arabic', 'Geeza Pro', system-ui, sans-serif;
    --site-mono: 'Geist Mono', 'Castle Body Arab', 'Segoe UI', 'SF Arabic', 'Geeza Pro', sans-serif;
}
/* display text */
html:is(:lang(zh), :lang(ja), :lang(hi), :lang(ar)) :is(.cp-display, .cp-title, .cp-hero__title, .cp-404__mid h1, .cp-menu__label, .cp-reel, .cp-btn--xl, .cp-legal__text h2) { letter-spacing: 0; max-width: none; }
html:is(:lang(zh), :lang(ja)) :is(.cp-display, .cp-title, .cp-hero__title, .cp-404__mid h1, .cp-menu__label, .cp-reel, .cp-btn--xl, .cp-legal__text h2) { line-height: 1.18; word-break: keep-all; overflow-wrap: break-word; }
html:lang(hi) :is(.cp-display, .cp-title, .cp-hero__title, .cp-404__mid h1, .cp-menu__label, .cp-reel, .cp-btn--xl, .cp-legal__text h2) { line-height: 1.3; }
html:lang(ar) :is(.cp-display, .cp-title, .cp-hero__title, .cp-404__mid h1, .cp-menu__label, .cp-reel, .cp-btn--xl, .cp-legal__text h2) { line-height: 1.35; }
/* running text */
html:is(:lang(zh), :lang(ja), :lang(hi), :lang(ar)) :is(p, li, .cp-check) { line-height: 1.8; letter-spacing: 0; }
html:is(:lang(zh), :lang(ja), :lang(hi), :lang(ar)) :is(.cp-about p, .cp-legal__intro > *) { line-height: 1.65; }
html:is(:lang(zh), :lang(ja), :lang(hi), :lang(ar)) .cp-intro__lead { line-height: 1.5; }
/* mono labels: 12px is the floor of a Latin capital, not of these scripts */
html:is(:lang(zh), :lang(ja)) :is(.cp-mono, .cp-arrow, .cp-nav__link, .cp-chip, .cp-hero__top, .cp-hero__scroll, .cp-card__tag, .cp-block__label, .cp-field label, .cp-legal__note, .cp-footer__tag, .cp-footer__label, .cp-footer__base, .cp-modal__meta, .cp-modal__foot, .cp-menu__base, .cp-cta__mail, .cp-404__row) { font-size: 13px; letter-spacing: .08em; }
html:is(:lang(hi), :lang(ar)) :is(.cp-mono, .cp-arrow, .cp-nav__link, .cp-chip, .cp-hero__top, .cp-hero__scroll, .cp-card__tag, .cp-block__label, .cp-field label, .cp-legal__note, .cp-footer__tag, .cp-footer__label, .cp-footer__base, .cp-modal__meta, .cp-modal__foot, .cp-menu__base, .cp-cta__mail, .cp-404__row) { font-size: 13.5px; word-spacing: -.3em; }   /* the space between two words is Geist Mono's: a full mono cell */
/* joined scripts: no tracking anywhere — except the labels that stay Latin (client names, the language code, numerals) */
html:is(:lang(hi), :lang(ar)) * { letter-spacing: 0 !important; }
html:is(:lang(hi), :lang(ar)) :is(.cp-card__client, .cp-lang summary, .cp-lang__panel b, .cp-menu__num) { letter-spacing: .1em !important; }
/* the language panel lists every endonym on EVERY page: each in its own script's system face, the joined ones untracked */
.cp-lang__panel a:is(:lang(zh), :lang(ja), :lang(hi), :lang(ar)) { font-family: 'Geist Mono', system-ui, sans-serif; }
.cp-lang__panel a:is(:lang(hi), :lang(ar)) { letter-spacing: 0; }

/* ════════════ RIGHT TO LEFT (ar) ════════════
   The layout mirrors by itself: it is written in logical properties (inline-start/end) and flex/grid follow the
   page's `dir`. What is left is what points or draws in a direction:
   · arrows mirror (→ reads "onwards", ↗ "out"); the play triangles and the brand's three squares do NOT — a play
     button and a logo are the same in every script;
   · the underlines draw from the start of the text, which is now its right edge. */
[dir="rtl"] .cp-arr { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .cp-arrow:hover .cp-arrow__icon,
[dir="rtl"] .cp-btn--xl:hover .cp-arr { transform: scaleX(-1) translateX(5px); }
[dir="rtl"] :is(.cp-link, .cp-arrow__label, .cp-nav__link span, .cp-biglink) { background-position: 100% 100%; }
[dir="rtl"] .cp-sent__mark { direction: ltr; }

/* ── Reduced motion: every entrance/scroll effect off (the model's rule) ── */
@media (prefers-reduced-motion: reduce) {
    .cp-js [data-reveal], .cp-js [data-reveal="mask"], .cp-js [data-reveal-stagger] > * {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }
    .cp-rise, .cp-hero__top, .cp-hero__title, .cp-ring, .cp-hero__bottom,
    .cp-404__row, .cp-404__mid h1, .cp-404__mid p, .cp-404__actions,
    .cp-menu, .cp-modal, .cp-modal__box { animation: none; }
    .cp-ring__pulse { animation: none; opacity: 0; }
    html.cp-leave body::after, html.cp-arrive body::before { display: none; }
}