/* Theme preview banner sits in the page flow, so cancel the body padding it reserves (that was the gap above it). */
html { --tovu-theme-preview-height: 0px !important; }

/* Zoran Creative Strategy theme.
   Tokens (--bg, --fg, --accent ...) are injected into :root from tokens.json before this file.
   Brand rules encoded here:
   - Pale Daybreak #F8F2E1 background (never pure white), Foundation Stone #181B1E text.
   - ONE accent per page. A page opts in by putting `accent-red|yellow|blue|purple` on any of
     its sections; the :root:has() rules below then set --accent for the whole document
     (header, footer, content). With no class the page falls back to tokens.json's red.
   - Zalando Sans for everything. Headings line-height 1.1, letter-spacing 0. Body 1.5.
   - Accents are used as fills, outlines and rules, not as body-text colour. */

@font-face {
  font-family: 'Zalando Sans';
  src: url('../fonts/ZalandoSans-Variable.ttf') format('truetype');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Zalando Sans';
  src: url('../fonts/ZalandoSans-Italic-Variable.ttf') format('truetype');
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  --z-offwhite: #F8F2E1;
  --z-black: #181B1E;
  --z-red: #E85841;
  --z-yellow: #FFCD6D;
  --z-blue: #197EB6;
  --z-purple: #6653A3;
  --on-accent: #181B1E;
  --header-h: 76px;
  --gutter: clamp(20px, 4vw, 48px);
  /* 1% of the first screen's height: svh (small viewport, so mobile browser bars never push the
     hero below the fold), falling back to vh where svh is unsupported. */
  --z-vh: 1vh;
}
@supports (height: 1svh) { :root { --z-vh: 1svh; } }
:root:has(.accent-red)    { --accent: #E85841; --on-accent: #181B1E; }
:root:has(.accent-yellow) { --accent: #FFCD6D; --on-accent: #181B1E; }
:root:has(.accent-blue)   { --accent: #197EB6; --on-accent: #F8F2E1; }
:root:has(.accent-purple) { --accent: #6653A3; --on-accent: #F8F2E1; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg, #F8F2E1); }
body {
  margin: 0;
  background: var(--bg, #F8F2E1);
  color: var(--fg, #181B1E);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1 0 auto; }
img, video, iframe { max-width: 100%; height: auto; }
img, video { display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0;
  font-weight: 700;
}
p { margin: 0; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }

.wrap, .z-wrap {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.site-header.scrolled { border-bottom-color: var(--fg); }
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: var(--header-h);
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.main-nav-motion { display: contents; }
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.brand img { height: 30px; width: auto; }
.main-nav { display: flex; align-items: center; margin-left: auto; }
.main-nav > a { margin-left: 28px; font-weight: 500; font-size: 15px; text-decoration: none; }
.main-nav > .menu-list {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.main-nav .menu-list { list-style: none; margin: 0; padding: 0; }
.main-nav > .menu-list > .menu-item { position: relative; flex: none; white-space: nowrap; }
.main-nav > .menu-list > .menu-item > a,
.main-nav > .menu-list > .menu-item > .menu-item-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  font-size: 15px; font-weight: 500;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 transparent;
  transition: box-shadow .15s ease;
}
/* hover underline: kUInetic underline-slide (stamped by scripts/motion.js); geometry tuned in "Motion" below */
.main-nav > .menu-list > .menu-item > a { position: relative; }
.main-nav .menu-item.is-current > a,
.main-nav .menu-item.is-active > a,
.main-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); }
/* "Contact" (last top-level item) reads as the header call to action. */
.main-nav > .menu-list > .menu-item:last-child { margin-left: 12px; }
.main-nav > .menu-list > .menu-item:last-child > a {
  background: var(--fg); color: var(--bg);
  padding: 11px 20px; font-weight: 600;
  box-shadow: none;
}
.main-nav > .menu-list > .menu-item:last-child > a:hover { background: var(--accent); color: var(--on-accent); }
.main-nav .menu-item.has-children > a::after {
  content: ""; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}
.main-nav .menu-list.depth-1 {
  position: absolute; top: 100%; left: 0;
  min-width: 220px;
  background: var(--bg);
  border: 1px solid var(--fg);
  padding: 8px 0;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.main-nav .menu-item.has-children:hover > .menu-list.depth-1,
.main-nav .menu-item.has-children:focus-within > .menu-list.depth-1 {
  opacity: 1; visibility: visible; transform: none;
}
.main-nav .menu-list.depth-1 .menu-item > a {
  display: block; padding: 10px 18px; font-size: 15px; text-decoration: none;
}
.main-nav .menu-list.depth-1 .menu-item > a:hover { background: var(--accent); color: var(--on-accent); }
.main-nav .menu-list.depth-1 .menu-item.is-current > a { box-shadow: inset 3px 0 0 var(--accent); }

.nav-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent; color: var(--fg);
  border: 1px solid var(--fg); cursor: pointer;
}
@media (max-width: 900px) {
  :root { --header-h: 64px; }
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .brand img { height: 24px; }
}
.site-header.nav-compact .main-nav { display: none; }
.site-header.nav-compact .nav-toggle { display: inline-flex; }

/* mobile drawer (nav.html <dialog class="mnav">, filled by scripts/main.js) */
html.mnav-open, html.mnav-open body { overflow: hidden; }
.mnav {
  margin: 0 0 0 auto; padding: 0;
  width: min(420px, 100vw); height: 100dvh; max-height: none; max-width: 100vw;
  border: 0; background: var(--bg); color: var(--fg);
}
.mnav::backdrop { background: rgba(24,27,30,.55); }
.mnav[open] { animation: mnav-in .22s cubic-bezier(.2,.8,.2,1); }
@keyframes mnav-in { from { transform: translateX(24px); opacity: 0; } }
.mnav-panel { display: flex; flex-direction: column; height: 100%; }
.mnav-head {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); padding-inline: 20px;
  border-bottom: 1px solid var(--fg);
}
.mnav-head img { height: 24px; width: auto; }
.mnav-close {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--fg); border: 1px solid var(--fg); cursor: pointer;
}
.mnav-body { flex: 1; overflow-y: auto; padding: 12px 20px 32px; }
.mnav-list { list-style: none; margin: 0; padding: 0; }
.mnav-list .mnav-list { padding-left: 16px; border-left: 3px solid var(--accent); margin: 4px 0 8px; }
.mnav-row { display: flex; align-items: center; justify-content: space-between; }
.mnav-link {
  display: block; flex: 1;
  padding: 12px 0;
  font-size: 22px; font-weight: 600; line-height: 1.1;
  text-decoration: none;
}
.mnav-list .mnav-list .mnav-link { font-size: 18px; font-weight: 500; }
.mnav-link[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.mnav-disclose {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  background: transparent; color: var(--fg); border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 10px;
}
.mnav-disclose svg { width: 20px; height: 20px; transition: transform .15s ease; }
.mnav-disclose[aria-expanded="true"] svg { transform: rotate(180deg); }
.mnav-disclose-label { width: 100%; font-size: 22px; font-weight: 600; padding: 12px 0; }
.mnav-foot { padding: 20px; border-top: 1px solid var(--fg); font-size: 15px; }
.mnav-foot a { font-weight: 600; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--z-black);
  color: var(--z-offwhite);
  margin-top: 0;
  border-top: 1px solid rgba(248,242,225,.22);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-block: 72px 56px;
}
.footer-brand img { height: 34px; width: auto; margin-bottom: 28px; }
.footer-tag { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.1; margin-bottom: 12px; }
.footer-brand p { color: rgba(248,242,225,.78); max-width: 34ch; }
.footer-brand p.footer-tag { color: var(--z-offwhite); }
.footer-bottom svg path:first-child { fill: var(--z-offwhite); }
.site-footer h4 {
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 18px; color: rgba(248,242,225,.7);
}
.site-footer h4::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--accent); margin-right: 10px; }
.footer-col a { display: block; padding: 5px 0; text-decoration: none; font-size: 16px; }
.footer-col a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.footer-col .menu-list { list-style: none; margin: 0; padding: 0; }
.footer-mail { font-size: 18px; font-weight: 600; word-break: break-word; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid rgba(248,242,225,.2);
  padding-block: 22px 28px;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(248,242,225,.7);
}
.footer-bottom svg { width: 44px; height: 22px; }
@media (max-width: 820px) {
  .footer-top { grid-template-columns: 1fr; gap: 36px; padding-block: 56px 40px; }
}

/* =====================================================================
   Page building blocks (used by page HTML written in Admin > Pages)
   ===================================================================== */
.z-main { overflow-x: clip; }
.z-section { padding-block: clamp(64px, 9vw, 120px); position: relative; }
.z-section.z-tight { padding-block: clamp(48px, 6vw, 80px); }
.z-rule { border-top: 1px solid var(--fg); }

/* micrographic label: small caps text with a tiny accent square */
.z-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 24px;
}
.z-eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--accent); flex: none; }
.z-band-accent .z-eyebrow::before, .z-band-dark .z-eyebrow::before { background: currentColor; }

/* hero
   Every hero fits in the first screen below the header: the label starts 32-64px below the header,
   type and artwork are capped by viewport HEIGHT as well as width (--z-vh), and the artwork (Home
   poster, brand shape group) is sized from the same height budget, so nothing is pushed below the
   fold or cropped. --z-fit-h is the height left for hero content in the first screen. */
.z-hero {
  --z-pad-top: clamp(32px, calc(6 * var(--z-vh)), 64px);
  --z-pad-bot: clamp(40px, calc(7 * var(--z-vh)), 72px);
  --z-fit-h: calc(100 * var(--z-vh) - var(--header-h) - var(--z-pad-top) - var(--z-pad-bot));
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding-block: var(--z-pad-top) var(--z-pad-bot);
  overflow: hidden;
  /* clip, not hidden, where supported: same clipping, but no scroll container, so the hero
     shapes' kUInetic parallax (animation-timeline: scroll()) follows the page scroll. */
  overflow: clip;
}
.z-hero > .z-wrap { position: relative; z-index: 1; }
/* Headline sizes: clamp(min, min(width cap, height cap), max). */
.z-display {
  font-size: clamp(3rem, min(7vw, calc(14 * var(--z-vh))), 8.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0;
  max-width: 12ch;
}
.z-display-md { font-size: clamp(2.25rem, min(5.2vw, calc(9 * var(--z-vh))), 5.5rem); font-weight: 800; max-width: 18ch; }
.z-display-light { font-weight: 300; text-transform: uppercase; font-stretch: 100%; }
.z-display .z-line { display: block; }
.z-lede {
  font-size: clamp(1.125rem, min(2vw, calc(3.6 * var(--z-vh))), 1.75rem);
  line-height: 1.5;
  max-width: 38ch;
  margin-top: 28px;
}
.z-hero .z-lede { font-weight: 500; }

/* decorative dawn-beam shapes (right triangle + quarter circle from the Z logomark)
   A real counterweight to the headline, never overlapping or cropped:
   - >640px: a square column on the right, aligned to the content edge and vertically centred in
     the hero. Its size is capped by the first screen's height (--z-fit-h) as well as the width,
     the hero is at least as tall as the shape (so overflow:clip never crops it), and the text
     column is padded by the shape width + 48px, so the headline can never run underneath it;
   - <=640px: small and faint, below the text, with no scroll drift. */
.z-hero { --z-shape-w: clamp(160px, min(30vw, var(--z-fit-h)), 440px); }
.z-shapes {
  position: absolute; z-index: 0; pointer-events: none;
  right: calc(max(0px, (100% - var(--container) - 2 * var(--gutter)) / 2) + var(--gutter));
  top: 50%; transform: translateY(-50%);
  width: var(--z-shape-w); height: auto;
}
.z-hero:has(> .z-shapes) { min-height: calc(var(--z-shape-w) + var(--z-pad-top) + var(--z-pad-bot)); }
.z-hero:has(> .z-shapes) > .z-wrap { padding-right: calc(var(--gutter) + var(--z-shape-w) + 48px); }
.z-shapes .z-stroke { fill: none; stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; }
.z-shapes .z-fill { fill: var(--accent); }
.z-shapes .z-ink { fill: var(--fg); }
.z-hero-split { display: grid; grid-template-columns: minmax(0, 1fr) var(--z-shape-w); gap: 48px; align-items: start; }
.z-hero-split .z-shapes { position: static; transform: none; width: 100%; justify-self: end; }

@media (max-width: 640px) {
  .z-hero:has(> .z-shapes) { min-height: 0; }
  .z-hero:has(> .z-shapes) > .z-wrap { padding-right: var(--gutter); }
  .z-display { font-size: clamp(2.75rem, 14vw, 4.5rem); }
  .z-display-md { font-size: clamp(2.25rem, 10vw, 3.5rem); }
  .z-hero-split { grid-template-columns: 1fr; gap: 0; }
  /* below the text, small and faint; parallax pinned so it never drifts into the text above */
  .z-hero > .z-shapes, .z-hero-short > .z-shapes, .z-hero-split .z-shapes {
    position: relative; top: auto; right: auto; transform: none;
    display: block; order: 2; width: min(34vw, 150px); opacity: .45;
    margin: 36px 0 0 var(--gutter);
    translate: none !important; rotate: none !important;
  }
  .z-hero-split .z-shapes { margin-left: 0; justify-self: start; }
}
@media (max-width: 900px) { .z-stat { min-height: 0; } }

/* Hero with a poster (Media library image) in the right column instead of the shape group.
   Not used on any page since 2026-10-28 (owner put the brand shape group back in the Home hero;
   the "Zoran sample poster 1" media item stays in the library). Kept so it can be reinstated.
   >640px: text column + poster column. The poster is sized by HEIGHT: as tall as the copy block
   (label 13px x 1.5 + 24px, three headline lines at 1.1, 28px gap, one lede line at 1.5), never
   taller than the first screen allows (--z-fit-h), and shown whole (3573x5053 aspect, no crop).
   <=640px: poster below the headline and intro, full width within the gutters up to 420px. */
.z-hero-poster {
  --z-h1: clamp(3rem, min(7vw, calc(14 * var(--z-vh))), 8.5rem);
  --z-lede-fs: clamp(1.125rem, min(2vw, calc(3.6 * var(--z-vh))), 1.75rem);
  --z-poster-h: min(calc(var(--z-h1) * 3.3 + 72px + var(--z-lede-fs) * 1.5), var(--z-fit-h));
  --z-poster-w: calc(var(--z-poster-h) * 3573 / 5053);
}
.z-hero-poster .z-display { font-size: var(--z-h1); }
.z-hero-poster .z-lede { font-size: var(--z-lede-fs); }
.z-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--z-poster-w); gap: clamp(32px, 4vw, 64px); align-items: center; }
.z-hero-copy { min-width: 0; }
.z-poster {
  margin: 0; width: 100%; aspect-ratio: 3573 / 5053; overflow: hidden;
  background: var(--surface, #F1E9D2); box-shadow: 0 0 0 1px var(--border, rgba(24,27,30,.14));
}
.z-poster img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 640px) {
  .z-hero-poster .z-display { font-size: clamp(2.75rem, 14vw, 4.5rem); }
  .z-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .z-poster { max-width: 420px; }
}

/* Sienna Jackson hero: her headshot (Media library, 1179x903 landscape) in the right column instead
   of the shape group, on the inner .z-hero-photo grid. Sized by HEIGHT with the same first-screen
   budget as the Home poster: at most --z-fit-h (and 440px) tall, at most 44vw wide, shown whole.
   <=640px: below the text, full width up to 480px. */
.z-hero-photo {
  --z-photo-w: min(calc(min(var(--z-fit-h), 440px) * 1179 / 903), 44vw);
  display: grid; grid-template-columns: minmax(0, 1fr) var(--z-photo-w);
  gap: clamp(32px, 4vw, 64px); align-items: start;
}
.z-hero-photo > div { min-width: 0; }
.z-photo {
  margin: 0; width: 100%; aspect-ratio: 1179 / 903; overflow: hidden;
  background: var(--surface, #F1E9D2); box-shadow: 0 0 0 1px var(--border, rgba(24,27,30,.14));
}
.z-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
  .z-hero-photo { grid-template-columns: 1fr; gap: 32px; }
  .z-photo { max-width: 480px; }
}
/* Sienna's brand shape group, moved from her hero into the "About Sienna" label column. */
.z-shapes.z-about-shapes.z-bio-shapes { display: block; margin-top: 48px; justify-self: start; }
@media (min-width: 901px) { .z-shapes.z-about-shapes.z-bio-shapes { width: min(100%, 300px); } }

/* About section with the brand shape group on the right. Home no longer uses the grid (the group
   went back to the Home hero on 2026-10-28); .z-shapes.z-about-shapes is still used by Sienna's bio.
   Desktop: label + statement left, shapes right at the hero shapes' former size.
   <=900px: shapes after the text, small and faint, exactly like the hero version there. */
.z-about-grid { --z-shape-w: clamp(180px, 26vw, 380px); display: grid; grid-template-columns: minmax(0, 1fr) var(--z-shape-w); gap: 48px; align-items: center; }
.z-about-copy { min-width: 0; }
.z-shapes.z-about-shapes { position: static; transform: none; width: 100%; justify-self: end; }
@media (max-width: 900px) {
  .z-about-grid { grid-template-columns: 1fr; gap: 0; }
  .z-shapes.z-about-shapes { width: min(34vw, 150px); opacity: .45; margin-top: 36px; justify-self: start; }
}

/* text blocks */
.z-h2 { font-size: clamp(2.25rem, 5vw, 4.25rem); font-weight: 800; max-width: 18ch; }
.z-h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; }
.z-statement {
  font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  font-weight: 600;
  line-height: 1.1;
  max-width: 24ch;
}
.z-intro { font-size: clamp(1.6rem, 3.2vw, 2.75rem); font-weight: 500; line-height: 1.25; max-width: 34ch; }
.z-prose { max-width: 68ch; }
.z-prose p + p { margin-top: 1.1em; }
.z-prose p { font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
.z-big-p { font-size: clamp(1.3rem, 2vw, 1.65rem) !important; font-weight: 500; line-height: 1.45; }
.z-muted { color: var(--muted); }
.z-two-col { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.z-sticky { position: sticky; top: calc(var(--header-h) + 32px); }
@media (max-width: 900px) {
  .z-two-col { grid-template-columns: 1fr; }
  .z-sticky { position: static; }
}

/* colour bands */
.z-band-accent { background: var(--accent); color: var(--on-accent); }
.z-band-dark { background: var(--z-black); color: var(--z-offwhite); }
.z-band-dark .z-muted { color: rgba(248,242,225,.75); }

/* lists with square bullets */
.z-list { list-style: none; margin: 0; padding: 0; }
.z-list li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid var(--border); }
.z-list li:last-child { border-bottom: 0; }
.z-list li::before { content: ""; position: absolute; left: 0; top: calc(10px + .55em); width: 10px; height: 10px; background: var(--accent); }
.z-band-accent .z-list li::before, .z-band-dark .z-list li::before { background: currentColor; }
.z-band-accent .z-list li, .z-band-dark .z-list li { border-bottom-color: rgba(127,127,127,.35); }
.z-list-lg li { font-size: clamp(1.25rem, 2.2vw, 1.85rem); font-weight: 600; line-height: 1.25; padding-block: 18px; padding-left: 36px; }
.z-list-lg li::before { width: 14px; height: 14px; top: calc(18px + .45em); }

/* trio (Cause / Culture / Capital) */
.z-trio { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--fg); }
.z-trio-item { padding: 36px 32px 8px 0; }
.z-trio-item + .z-trio-item { padding-left: 32px; border-left: 1px solid var(--fg); }
.z-trio-icon { width: 44px; height: 44px; display: block; margin-bottom: 28px; }
.z-trio-icon path, .z-trio-icon rect { fill: var(--accent); }
.z-band-accent .z-trio-icon path, .z-band-accent .z-trio-icon rect { fill: currentColor; }
.z-trio-word { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 800; line-height: 1.1; }
.z-trio-label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 14px 0 10px; }
.z-trio-item p { font-size: 1.1rem; max-width: 26ch; }
.z-band-accent .z-trio, .z-band-accent .z-trio-item + .z-trio-item { border-color: currentColor; }
@media (max-width: 820px) {
  .z-trio { grid-template-columns: 1fr; }
  .z-trio-item, .z-trio-item + .z-trio-item { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--fg); }
}

/* service cards (What We Do) */
.z-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 2px solid var(--fg); }
.z-service { padding: 40px 40px 44px 0; border-bottom: 1px solid var(--fg); }
.z-service:nth-child(even) { padding-left: 40px; padding-right: 0; border-left: 1px solid var(--fg); }
.z-num { display: block; font-size: 13px; font-weight: 600; letter-spacing: .14em; margin-bottom: 18px; }
.z-num::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--accent); margin-right: 10px; }
.z-service h2, .z-service h3 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); font-weight: 700; margin-bottom: 20px; max-width: 18ch; }
.z-service .z-list li { font-size: 1.05rem; }
@media (max-width: 820px) {
  .z-services { grid-template-columns: 1fr; }
  .z-service, .z-service:nth-child(even) { padding: 32px 0; border-left: 0; }
}

/* numbered steps (Our Approach) */
.z-steps { counter-reset: none; border-top: 2px solid var(--fg); }
.z-step { display: grid; grid-template-columns: minmax(80px, 200px) 1fr; gap: clamp(24px, 4vw, 64px); padding-block: clamp(32px, 4vw, 56px); border-bottom: 1px solid var(--fg); }
.z-step-num { font-size: clamp(3rem, 7vw, 6rem); font-weight: 200; line-height: 1.1; display: flex; align-items: flex-start; gap: 14px; }
.z-step-num svg { width: 28px; height: 28px; margin-top: .3em; flex: none; }
.z-step-num svg path, .z-step-num svg rect { fill: var(--accent); }
.z-step p { font-size: clamp(1.1rem, 1.6vw, 1.35rem); max-width: 56ch; }
@media (max-width: 640px) { .z-step { grid-template-columns: 1fr; gap: 8px; } }

/* stats */
.z-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2px; background: var(--fg); border: 2px solid var(--fg); }
.z-stat { container-type: inline-size; background: var(--bg); padding: 28px 26px 30px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 220px; }
.z-stat-num { font-size: clamp(2rem, 18cqi, 4.75rem); font-weight: 800; line-height: 1.1; white-space: nowrap; }
.z-stat-text { font-size: 1rem; line-height: 1.45; }
.z-stat.z-stat-hi { background: var(--accent); color: var(--on-accent); }
.z-stat.z-stat-text-only .z-stat-text { font-size: 1.15rem; font-weight: 600; }

/* case studies */
.z-case { padding-block: clamp(64px, 8vw, 112px); border-top: 2px solid var(--fg); }
.z-case:first-of-type { border-top: 0; }
.z-case-head { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.z-case-title { font-size: clamp(2.5rem, 6vw, 5.25rem); font-weight: 800; line-height: 1.1; max-width: 16ch; }
.z-case-sub { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 500; margin-top: 16px; max-width: 40ch; }
.z-case-shape { width: clamp(80px, 12vw, 160px); height: auto; }
.z-case-shape .z-fill { fill: var(--accent); }
.z-case-shape .z-ink { fill: var(--fg); }
.z-case-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 64px); }
.z-case-label {
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding-top: 6px; border-top: 3px solid var(--accent);
  align-self: start;
}
.z-case-body > .z-prose { padding-bottom: 28px; }
.z-case-body > .z-stats, .z-case-body > .z-full { grid-column: 1 / -1; }
.z-case-impact-head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 16px; margin-top: 12px; }
.z-case-impact-head h3 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; }
@media (max-width: 820px) {
  .z-case-head { grid-template-columns: 1fr; }
  .z-case-shape { display: none; }
  .z-case-body { grid-template-columns: 1fr; }
  .z-case-body > .z-prose { padding-bottom: 12px; }
}
.z-refs { margin-top: 32px; font-size: 1rem; }
.z-refs h4 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.z-refs ul { list-style: none; padding: 0; margin: 0; }
.z-refs li { padding: 6px 0; overflow-wrap: anywhere; }
.z-refs a, .z-link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--accent); }
.z-refs a:hover, .z-link:hover { text-decoration-color: var(--fg); }
.z-refs .z-ref-label { font-weight: 600; margin-right: 6px; }

/* case study index (jump links) */
.z-index { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--fg); }
.z-index a { display: block; padding: 24px 24px 28px 0; text-decoration: none; border-bottom: 1px solid var(--fg); }
.z-index a + a { padding-left: 24px; border-left: 1px solid var(--fg); }
.z-index a:hover .z-index-title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.z-index-title { display: block; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 700; line-height: 1.1; margin-top: 8px; }
@media (max-width: 820px) { .z-index { grid-template-columns: 1fr; } .z-index a + a { padding-left: 0; border-left: 0; } }

/* speaking list */
.z-talks { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--fg); }
.z-talks li {
  display: grid; grid-template-columns: 80px 1fr; gap: 16px; align-items: baseline;
  padding: clamp(20px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--fg);
  font-size: clamp(1.4rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.1;
}
.z-talks li span { font-size: 13px; font-weight: 600; letter-spacing: .14em; }
.z-talks li span::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--accent); margin-right: 10px; }
.z-talks li small { display: block; font-size: .55em; font-weight: 400; margin-top: 8px; }

/* buttons / CTA */
.z-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--fg); color: var(--bg);
  padding: 16px 26px; font-size: 16px; font-weight: 600; text-decoration: none;
  border: 2px solid var(--fg);
  transition: background .15s ease, color .15s ease;
}
.z-btn:hover { background: transparent; color: var(--fg); }
.z-btn-ghost { background: transparent; color: var(--fg); }
.z-btn-ghost:hover { background: var(--fg); color: var(--bg); }
.z-band-dark .z-btn { background: var(--z-offwhite); color: var(--z-black); border-color: var(--z-offwhite); }
.z-band-dark .z-btn:hover { background: transparent; color: var(--z-offwhite); }
.z-band-dark .z-btn-ghost { background: transparent; color: var(--z-offwhite); }
.z-band-dark .z-btn-ghost:hover { background: var(--z-offwhite); color: var(--z-black); }
.z-band-accent .z-btn { background: var(--on-accent); color: var(--accent); border-color: var(--on-accent); }
.z-band-accent .z-btn-ghost { background: transparent; color: var(--on-accent); }
.z-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.z-mail {
  display: inline-block;
  /* sized so hello@zorancreativestrategy.com stays on one line from 390px up to the 1240px container */
  font-size: clamp(1.05rem, 4.3vw, 3.9rem); font-weight: 800; line-height: 1.1;
  text-decoration: none; overflow-wrap: anywhere;
  box-shadow: inset 0 -.14em 0 var(--accent);
}
.z-mail:hover { box-shadow: inset 0 -.5em 0 var(--accent); }
.z-band-accent .z-mail { box-shadow: inset 0 -.1em 0 currentColor; }

/* spacing helpers (page-body sanitizer may drop inline styles) */
.z-hero .z-index { margin-top: 56px; }
p:has(> .z-mail) { margin-top: 20px; }
.z-hero p:has(> .z-mail) { margin-top: 48px; }
.z-prose .z-list + p { margin-top: 20px; }
.z-big-p + .z-statement { margin-top: 28px; }
.z-band-accent .z-big-p { max-width: 52ch; }

/* section heads */
.z-head { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: clamp(36px, 5vw, 64px); flex-wrap: wrap; }
.z-head p { max-width: 46ch; }

/* ---------- contact form (Contact page: .z-contact section, native Tovu form inside .z-form) ----------
   Square inputs, 1px black border, black primary button. The page accent is used only for
   focus rings and small markers; error/success text stays black for contrast. */
.z-contact-intro .z-h3 { max-width: 18ch; margin-bottom: 20px; }
.z-contact-intro .z-big-p { max-width: 34ch; }
.z-contact-alt { margin-top: 28px; font-size: 1.05rem; }
.z-contact-alt a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.z-form .tovu-form:not([hidden]) { display: flex; flex-direction: column; gap: 22px; max-width: none; width: 100%; font-family: var(--font-body); }
.z-form .widget-form-field:not([hidden]) { display: flex; flex-direction: column; gap: 8px; }
.z-form .widget-form-field label {
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg);
}
.z-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.z-form select,
.z-form textarea {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 17px; line-height: 1.4; color: var(--fg);
  background-color: var(--bg); border: 1px solid var(--fg); border-radius: 0; box-shadow: none;
  padding: 14px 16px; min-height: 52px;
  transition: box-shadow .15s ease;
}
.z-form textarea { min-height: 180px; resize: vertical; }
.z-form select { padding-inline-end: 44px; }
.z-form input::placeholder, .z-form textarea::placeholder { color: var(--muted); opacity: 1; }
.z-form input:hover, .z-form select:hover, .z-form textarea:hover { box-shadow: inset 0 0 0 1px var(--fg); }
.z-form input:focus-visible, .z-form select:focus-visible, .z-form textarea:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: inset 0 0 0 1px var(--fg);
}
.z-form [aria-invalid="true"] { border-width: 2px; box-shadow: inset 4px 0 0 var(--accent) !important; }
.z-form .widget-form-field-error:not([hidden]) {
  display: flex; align-items: center; gap: 8px;
  color: var(--fg); font-size: 14px; font-weight: 600;
}
.z-form .widget-form-field-error:not([hidden])::before { content: ""; width: 8px; height: 8px; background: var(--accent); flex: none; }
.z-form .tovu-form button[type=submit] {
  align-self: flex-start; margin-top: 6px;
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--fg); color: var(--bg);
  padding: 16px 30px; font: inherit; font-size: 16px; font-weight: 600; letter-spacing: .02em;
  border: 2px solid var(--fg); border-radius: 0; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.z-form .tovu-form button[type=submit]::after { content: "\2192"; font-weight: 400; }
.z-form .tovu-form button[type=submit]:hover { background: transparent; color: var(--fg); }
.z-form .tovu-form button[type=submit]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.z-form .tovu-form button[type=submit]:disabled { opacity: .55; cursor: progress; }
.z-form .tovu-form-error:not([hidden]),
.z-form .tovu-form-success:not([hidden]) {
  display: block; padding: 16px 18px 16px 20px; border-radius: 0;
  background: var(--surface); color: var(--fg); border: 1px solid var(--fg); border-left: 6px solid var(--accent);
  font-size: 16px; font-weight: 500; line-height: 1.45;
}
.z-form .tovu-form-success:not([hidden]) { font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 600; padding-block: 24px; }
@media (max-width: 600px) {
  .z-form .tovu-form button[type=submit] { align-self: stretch; justify-content: center; }
}

/* ---------- plain page sections with no theme classes (e.g. the platform-generated Privacy
   Policy page body): give them the gutter, a reading measure and the brand type scale. ---------- */
.z-main section:not([class]) {
  max-width: calc(760px + 2 * var(--gutter)); margin-inline: auto;
  padding: clamp(32px, calc(6 * var(--z-vh)), 64px) var(--gutter) clamp(64px, 9vw, 112px);
}
.z-main section:not([class]) h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); font-weight: 800; margin-bottom: 28px; }
.z-main section:not([class]) h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 1.8em 0 .6em; }
.z-main section:not([class]) h3 { font-size: 1.3rem; margin: 1.5em 0 .5em; }
.z-main section:not([class]) p { max-width: 68ch; }
.z-main section:not([class]) p + p, .z-main section:not([class]) ul + p, .z-main section:not([class]) p + ul { margin-top: 1em; }
.z-main section:not([class]) a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ---------- generic article pages (Blog, Privacy, posts) ---------- */
.post-detail { max-width: 760px; margin: 0 auto; padding: 72px var(--gutter) 96px; }
.post-detail h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; margin-bottom: 24px; }
.post-detail h2 { font-size: 1.75rem; margin: 2em 0 .6em; }
.post-detail h3 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
.post-detail p, .post-detail li { line-height: 1.5; }
.post-detail p { margin: 0 0 1em; }
.post-detail a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.post-detail time, .post-meta { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.hero { padding-block: 96px 48px; }
.hero h1 { font-size: clamp(2.75rem, 7vw, 5.5rem); font-weight: 800; }
.lede { font-size: 1.25rem; margin-top: 16px; }
.btn { display: inline-flex; align-items: center; padding: 12px 20px; border: 2px solid var(--fg); font-weight: 600; text-decoration: none; }
.btn-solid { background: var(--fg); color: var(--bg); }
.cta-row { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.code-block-wrap { position: relative; }
pre { overflow-x: auto; background: var(--surface); padding: 16px; }
.code-copy-btn { position: absolute; top: 8px; right: 8px; background: var(--bg); border: 1px solid var(--fg); cursor: pointer; }
.code-copy-btn .icon-check { display: none; }
.code-copy-btn svg { width: 16px; height: 16px; }

/* =====================================================================
   Motion
   Driven by kUInetic 0.1.4 (scripts/vendor/kuinetic.all.js, loaded once by footer.html) through
   data-kui attributes written in the HTML itself, no annotating script:
   - page bodies (Admin > Pages): title reveals, label and intro fades, poster wipe, scroll
     fade-ups, stat count-ups, hero-shape drift, and the About shapes' sweep trigger;
   - templates: button lift/press (a target: host on <main> in index.html / pages-default.html,
     which also reaches the form embed's submit button), nav underline and Contact lift (a target:
     host on the menu embed in partials/nav.html), and the 404 page's own elements.
   Plain CSS (below), because kUInetic 0.1.4 cannot reproduce them exactly:
   - the brand-shape sweep (owner request: kept exactly as first built; kUInetic's rotate-in has no
     scale, no pivot and no 45% opacity step). The pivot (each shape's right-angle corner), the
     turn direction and the per-shape delay are fixed CSS values, no longer computed in JS;
   - the logo lift + tilt and three hover nudges (parent-hover or horizontal moves).
   No-JS: nothing below hides content unless html.js (z-flag.js) or a kUInetic state is present.
   Reduced motion: every data-kui carries rm:disable (kUInetic skips the effect), and the block at
   the end of this file kills every animation and transition. Colour: only --fg/--accent.
   ===================================================================== */

/* Title rise: kUInetic's text-reveal-up does the splitting, stagger, timing and trigger; this swaps
   the split items' keyframe for the original masked rise. The bottom clip inset moves with the
   translation, which is the same as a fixed mask .14em below the word box (room for descenders). */
@keyframes z-rise-mask {
  from { translate: 0 120%; clip-path: inset(-.3em 0 calc(120% - .14em) 0); }
  to   { translate: 0 0;    clip-path: inset(-.3em 0 -.14em 0); }
}
.z-hero h1[data-kui-fx~="text-reveal-up"] .kui-split-item,
.z-hero h1 .z-line[data-kui-fx~="text-reveal-up"] .kui-split-item,
.z-main section:not([class]) > h1[data-kui-fx~="text-reveal-up"] .kui-split-item { animation-name: z-rise-mask; }

/* kUInetic's hover effects (lift, press-depth) animate through `transition: var(--kui-transition)`
   in its layered CSS, which these unlayered theme transitions would otherwise override. Append it. */
.z-btn, .z-form .tovu-form button[type=submit] {
  transition: background .15s ease, color .15s ease, var(--kui-transition, opacity 0s);
}
.main-nav > .menu-list > .menu-item > a {
  transition: box-shadow .15s ease, background .15s ease, color .15s ease, var(--kui-transition, opacity 0s);
}

/* Nav underline (kUInetic underline-slide): the original 2px bar, inset to the link's text padding. */
.main-nav > .menu-list > .menu-item > a[data-kui-fx~="underline-slide"]::after { left: 14px; right: 14px; bottom: 0; height: 2px; }

/* Brand-shape sweep (custom, unchanged): each triangle / quarter circle rotates into place around
   its right-angle corner. Pivots in viewBox units (transform-box: view-box), one rule per brand
   shape used on the site; shapes alternate -90deg / +90deg and start 180ms + 130ms per shape. */
:is(.z-shapes, .z-trio-icon, .z-step-num svg, .z-case-shape) > :nth-child(odd) { --z-rot: -90deg; }
:is(.z-shapes, .z-trio-icon, .z-step-num svg, .z-case-shape) > :nth-child(even) { --z-rot: 90deg; }
:is(.z-shapes, .z-trio-icon, .z-step-num svg, .z-case-shape) > :nth-child(1) { --z-d: 180ms; }
:is(.z-shapes, .z-trio-icon, .z-step-num svg, .z-case-shape) > :nth-child(2) { --z-d: 310ms; }
:is(.z-shapes, .z-trio-icon, .z-step-num svg, .z-case-shape) > :nth-child(3) { --z-d: 440ms; }
:is(.z-shapes, .z-trio-icon, .z-step-num svg, .z-case-shape) > :nth-child(4) { --z-d: 570ms; }
:is(.z-shapes, .z-trio-icon, .z-step-num svg, .z-case-shape) > :nth-child(5) { --z-d: 700ms; }
path:is([d="M300 40A260 260 0 0 1 560 300H300Z"], [d="M40 560L300 300H560L300 560Z"], [d="M40 300L300 40V300Z"],
  [d="M300 60A240 240 0 0 1 540 300H300Z"], [d="M60 300H300L540 540H300Z"], [d="M300 300H540L300 540Z"],
  [d="M60 300L300 60V300Z"], [d="M300 300H540A240 240 0 0 1 300 540Z"], [d="M40 300H300V560Z"]) { transform-origin: 300px 300px; }
path:is([d="M200 0A200 200 0 0 1 400 200H200Z"], [d="M0 200L200 0V200Z"], [d="M0 200H200V400Z"],
  [d="M200 200H400A200 200 0 0 1 200 400Z"]) { transform-origin: 200px 200px; }
path[d="M0 0H200V200Z"] { transform-origin: 200px 0px; }
path[d="M0 200H200A200 200 0 0 1 0 400Z"] { transform-origin: 0px 200px; }
path[d="M200 200L400 400H200Z"] { transform-origin: 200px 400px; }
path[d="M60 540L540 60V540Z"] { transform-origin: 540px 540px; }
path[d="M300 540V300A240 240 0 0 1 540 540Z"] { transform-origin: 300px 540px; }
path[d="M60 60H300V300Z"] { transform-origin: 300px 60px; }
path[d="M60 300V60A240 240 0 0 1 300 300Z"] { transform-origin: 60px 300px; }
path[d="M0 44L44 0V44Z"] { transform-origin: 44px 44px; }
path[d="M0 44V0A44 44 0 0 1 44 44Z"], rect[height="44"] { transform-origin: 0px 44px; }
path[d="M0 28L28 0V28Z"] { transform-origin: 28px 28px; }
path[d="M0 28V0A28 28 0 0 1 28 28Z"], rect[height="28"] { transform-origin: 0px 28px; }
path[d="M0 160L160 0V160Z"] { transform-origin: 160px 160px; }
path[d="M0 160V0A160 160 0 0 1 160 160Z"], rect[height="160"] { transform-origin: 0px 160px; }
@keyframes z-sweep {
  from { opacity: 0; transform: rotate(var(--z-rot, -90deg)) scale(.7); }
  45% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* hero shapes: on load */
  .js .z-hero .z-shapes > * {
    transform-box: view-box;
    animation: z-sweep .9s cubic-bezier(.2,.7,.2,1) var(--z-d, .2s) both;
  }
  /* small brand shapes: sweep in when kUInetic starts revealing the block they sit in
     (data-kui-state goes ready -> running). No kUInetic state, no hiding. */
  [data-kui-state] .z-trio-icon > *,
  [data-kui-state] .z-step-num svg > *,
  [data-kui-state] .z-case-shape > * {
    transform-box: view-box;
    transition: opacity .5s ease calc(var(--z-d, 0ms) + 120ms), transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--z-d, 0ms) + 120ms);
  }
  [data-kui-state="ready"] .z-trio-icon > *,
  [data-kui-state="ready"] .z-step-num svg > *,
  [data-kui-state="ready"] .z-case-shape > * { opacity: 0; transform: rotate(var(--z-rot, -90deg)) scale(.7); }
  /* About-section shape group: the same hero sweep (keyframes, .9s, curve, per-shape delays), started
     when it scrolls 35% into view. The SVG carries its own data-kui (a 1ms fade-in, on:enter
     threshold:35%) purely as the trigger: kUInetic holds it at data-kui-state="ready" until then
     (shapes hidden), then running/finished (sweep plays). No kUInetic state, no hiding. */
  .z-about-shapes[data-kui-state="ready"] > * { opacity: 0; }
  .z-about-shapes:is([data-kui-state="running"], [data-kui-state="finished"]) > * {
    transform-box: view-box;
    animation: z-sweep .9s cubic-bezier(.2,.7,.2,1) var(--z-d, .2s) both;
  }

  /* hover (custom): logo lift + tilt (owner request), and three nudges kUInetic has no effect for */
  .brand img { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
  .brand:hover img { transform: translateY(-2px) rotate(-2deg); }
  .mnav-link { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
  .mnav-link:hover { transform: translateX(6px); }
  .z-trio-icon { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
  .z-trio-item:hover .z-trio-icon { transform: translateY(-6px); }
  .z-index .z-num { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .z-index a:hover .z-num { transform: translateX(6px); }
}

/* =====================================================================
   ZORAN POSTER LAYER (zoran-poster)
   The rules above are the shared Zoran markup contract (inherited from `zoran`); everything below
   restyles it as a poster / bold-graphic system and adds the theme-owned home (render/partials/home.html).
   - Modes: tokens.light.json (Pale Daybreak bg, Foundation Stone text) and tokens.json (dark: Foundation
     Stone bg, Pale Daybreak text). html[data-theme] is set before paint by the head script.
   - ONE accent per page, unchanged mechanism (:root:has(.accent-x)). Accents are fills, panels, rules and
     outlines, never text. Contrast (WCAG): black on Ember 4.9, black on Solar 12.6, off-white on Violet
     5.6; Dawn fails as a text panel with BOTH black (3.9) and off-white (4.0), so on blue pages every
     panel that carries text becomes an inverse (text-colour) panel with a blue bar instead.
   - Type: Zalando Sans; display = weight 800, width 76% (condensed), uppercase, line-height 1.1.
   - Shapes: right triangle, quarter circle, parallelogram from the Z logomark, outlined (2px) or solid.
   - Imagery: posters from Media; photos as black-to-accent duotone (grayscale + multiply on the accent)
     with a CSS halftone dot screen; fixed film grain over the page.
   ===================================================================== */
:root {
  --ink: #181B1E;
  --paper: #F8F2E1;
  --line: 2px;
  --zp-cond: 76%;
  --panel-bg: var(--accent);
  --panel-fg: var(--on-accent);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='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%28%23n%29'/%3E%3C/svg%3E");
  --grain-op: .04;
  color-scheme: light;
}
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --grain-op: .045;
}
/* The platform's theme preview banner (switcher enabled) sits in the page flow above the header. */
:root:has(> body > .tovu-theme-preview-host) { --zp-banner: 44px; }
/* Blue: no text on Dawn panels (fails AA both ways). */
:root:has(.accent-blue) { --panel-bg: var(--fg); --panel-fg: var(--bg); }

/* ---------- Theme-owned home switch ----------
   "/" is the shared CMS home page rendered through pages-default.html (its templateChoice). That
   template carries the theme's home partial hidden; when the CMS body is the home page (identified by
   its unique home_* WebMCP handle) the partial is shown, the CMS body hidden, and the page accent set to
   the home composition's red. index.html (served only if no CMS page owns "/") shows the partial always. */
.zp-home-wrap { display: none; }
.zp-home-own { display: block; }
:root:has(.zp-cms-wrap [data-toolname="home_about"]) .zp-home-wrap { display: block; }
:root:has(.zp-cms-wrap [data-toolname="home_about"]) .zp-cms-wrap { display: none; }
:root:has(.zp-home-own),
:root:has(.zp-cms-wrap [data-toolname="home_about"]) { --accent: #E85841; --on-accent: #181B1E; --panel-bg: #E85841; --panel-fg: #181B1E; }

/* ---------- base ---------- */
html { background: var(--bg); }
body { background: var(--bg); color: var(--fg); }
body::after {
  content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background-image: var(--grain); background-size: 180px 180px; opacity: var(--grain-op);
}
::selection { background: var(--fg); color: var(--bg); }
.z-display, .z-display-md, .z-h2, .z-trio-word, .z-case-title, .z-case-impact-head h3, .z-stat-num,
.z-main section:not([class]) h1, .post-detail h1 {
  font-stretch: var(--zp-cond); text-transform: uppercase; font-weight: 800; line-height: 1.1;
}
.z-display { max-width: 14ch; }
.z-rule { border-top: var(--line) solid var(--fg); }
.z-eyebrow { font-weight: 700; letter-spacing: .16em; }
.z-eyebrow::before { width: 12px; height: 12px; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.z-eyebrow::after { content: ""; width: clamp(24px, 6vw, 72px); height: var(--line); background: currentColor; }

/* ---------- header ---------- */
.site-header { background: var(--bg); border-bottom: var(--line) solid var(--fg); }
.site-header.scrolled { border-bottom-color: var(--fg); }
.zp-logo-dark { display: none; }
:root:not([data-theme="light"]) .zp-logo-light { display: none; }
:root:not([data-theme="light"]) .zp-logo-dark { display: block; }
.main-nav > .menu-list > .menu-item > a,
.main-nav > .menu-list > .menu-item > .menu-item-label { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.main-nav > .menu-list > .menu-item:last-child > a { background: var(--fg); color: var(--bg); border: var(--line) solid var(--fg); padding: 9px 18px; }
.main-nav > .menu-list > .menu-item:last-child > a:hover { background: transparent; color: var(--fg); }
.main-nav .menu-list.depth-1 { background: var(--bg); border: var(--line) solid var(--fg); }
.main-nav .menu-list.depth-1 .menu-item > a { text-transform: none; letter-spacing: 0; font-weight: 500; }
.main-nav .menu-list.depth-1 .menu-item > a:hover { background: var(--fg); color: var(--bg); box-shadow: inset 4px 0 0 var(--accent); }
.nav-actions { gap: 10px; }
.zp-mode {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px;
  background: transparent; color: var(--fg); border: var(--line) solid var(--fg); cursor: pointer;
  font: 700 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase;
}
.zp-mode:hover { background: var(--fg); color: var(--bg); }
.zp-mode-icon { width: 18px; height: 18px; flex: none; }
.zp-mode-to-light { display: none; }
:root:not([data-theme="light"]) .zp-mode-to-dark { display: none; }
:root:not([data-theme="light"]) .zp-mode-to-light { display: inline; }
:root:not([data-theme="light"]) .zp-mode-icon { transform: rotate(180deg); }
.nav-toggle, .mnav-close { border-width: var(--line); }
@media (max-width: 480px) { .site-header .zp-mode-text { display: none; } .site-header .zp-mode { width: 44px; padding: 0; justify-content: center; } }
.mnav { background: var(--bg); color: var(--fg); }
.mnav-head { border-bottom: var(--line) solid var(--fg); }
.mnav-link { font-stretch: var(--zp-cond); text-transform: uppercase; font-weight: 800; font-size: 26px; }
.mnav-list .mnav-list .mnav-link { text-transform: none; font-stretch: 100%; }
.mnav-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: var(--line) solid var(--fg); }
.mnav-panel { position: relative; }
.zp-mnav-mark { width: 96px; margin: 0 20px 20px; fill: var(--accent); }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--paper); border-top: 0; }
:root:not([data-theme="light"]) .site-footer { border-top: var(--line) solid var(--paper); }
.footer-tag { font-stretch: var(--zp-cond); text-transform: uppercase; font-weight: 800; font-size: clamp(2rem, 4vw, 3.4rem); }
.zp-footer-cta { margin-top: 14px; font-weight: 700; text-decoration: underline !important; text-decoration-color: var(--accent) !important; text-decoration-thickness: 2px !important; text-underline-offset: 5px; }
.zp-footer-mark { padding-bottom: 8px; }
.zp-footer-mark svg { display: block; width: 100%; height: auto; fill: none; stroke: rgba(248,242,225,.55); stroke-width: 1.5; vector-effect: non-scaling-stroke; overflow: visible; }
.zp-footer-mark svg path { vector-effect: non-scaling-stroke; }
.footer-bottom { border-top: var(--line) solid rgba(248,242,225,.35); }
.zp-footer-ccc { letter-spacing: .3em; }
@media (max-width: 640px) { .zp-footer-ccc { display: none; } }

/* ---------- buttons, links ---------- */
.z-btn, .z-form .tovu-form button[type=submit] {
  border-width: var(--line); font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 15px 22px;
}
.z-btn::after { content: "\2192"; font-weight: 400; letter-spacing: 0; }
.z-band-accent .z-btn { background: var(--panel-fg); color: var(--panel-bg); border-color: var(--panel-fg); }
.z-band-accent .z-btn:hover { background: transparent; color: var(--panel-fg); }
.z-band-accent .z-btn-ghost { background: transparent; color: var(--panel-fg); border-color: var(--panel-fg); }
.z-band-accent .z-btn-ghost:hover { background: var(--panel-fg); color: var(--panel-bg); }
.z-band-dark .z-btn { background: var(--bg); color: var(--fg); border-color: var(--bg); }
.z-band-dark .z-btn:hover { background: transparent; color: var(--bg); }
.z-band-dark .z-btn-ghost { background: transparent; color: var(--bg); border-color: var(--bg); }
.z-band-dark .z-btn-ghost:hover { background: var(--bg); color: var(--fg); }

/* ---------- inner-page heroes: framed, with a solid accent panel carrying outlined logomark shapes ---------- */
.z-hero { border-bottom: var(--line) solid var(--fg); }
.z-hero + .z-rule, .z-hero + .z-section.z-rule { border-top: 0; }
.z-hero > .z-shapes {
  background: var(--accent);
  outline: var(--line) solid var(--fg); outline-offset: 10px;
}
.z-hero > .z-shapes .z-stroke { stroke: var(--on-accent); stroke-width: 2.5; }
.z-hero > .z-shapes .z-fill, .z-hero > .z-shapes .z-ink { fill: var(--on-accent); }
:root:has(.accent-blue) .z-hero > .z-shapes .z-stroke { stroke: var(--paper); }
:root:has(.accent-blue) .z-hero > .z-shapes :is(.z-fill, .z-ink) { fill: var(--paper); }
@media (min-width: 641px) {
  .z-hero:has(> .z-shapes) { min-height: calc(var(--z-shape-w) + 24px + var(--z-pad-top) + var(--z-pad-bot)); }
  .z-hero:has(> .z-shapes) > .z-wrap { padding-right: calc(var(--gutter) + var(--z-shape-w) + 64px); }
}
.z-hero-split .z-shapes { background: var(--accent); outline: var(--line) solid var(--fg); outline-offset: 10px; }
.z-hero-split .z-shapes .z-stroke { stroke: var(--on-accent); }
.z-hero-split .z-shapes :is(.z-fill, .z-ink) { fill: var(--on-accent); }
@media (max-width: 640px) {
  .z-hero > .z-shapes, .z-hero-short > .z-shapes, .z-hero-split .z-shapes { opacity: 1; width: min(30vw, 120px); margin-top: 28px; margin-bottom: 10px; }
}
/* Sienna's headshot: shown natural (client note, 2026-10-29): no duotone, no accent tint, no halftone
   dot screen; only the poster frame. */
/* border, not outline: the kUInetic wipe-up clip-path would clip an outline */
.z-photo { position: relative; background: var(--surface); box-shadow: none; border: var(--line) solid var(--fg); }
.z-photo img { filter: none; mix-blend-mode: normal; }
.zp-halftone::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(24,27,30,.42) 30%, transparent 33%) 0 0 / 5px 5px;
  mix-blend-mode: multiply;
}

/* ---------- bands ---------- */
.z-band-accent { background: var(--panel-bg); color: var(--panel-fg); overflow: clip; }
:root:has(.accent-blue) .z-band-accent { box-shadow: inset 0 14px 0 var(--accent); }
.z-band-accent::before {
  content: ""; position: absolute; right: -4%; bottom: -34%; width: min(48vw, 560px); aspect-ratio: 1;
  border: var(--line) solid currentColor; border-radius: 100% 0 0 0; opacity: .35; pointer-events: none;
}
.z-band-accent > .z-wrap, .z-band-dark > .z-wrap { position: relative; z-index: 1; }
.z-band-dark { background: var(--fg); color: var(--bg); overflow: clip; }
.z-band-dark .z-muted { color: inherit; opacity: .85; }
.z-band-dark .z-list li::before, .z-band-accent .z-list li::before { background: currentColor; }
@media (max-width: 900px) { .z-band-accent::before { width: 70vw; bottom: -20%; } }

/* ---------- framed blocks: trio, services, steps, stats, index, talks, case ---------- */
.z-trio { border: var(--line) solid currentColor; }
.z-trio-item, .z-trio-item + .z-trio-item { padding: clamp(24px, 3vw, 36px); }
.z-trio-item + .z-trio-item { border-left: var(--line) solid currentColor; }
.z-trio-icon path, .z-trio-icon rect { fill: none; stroke: var(--accent); stroke-width: 3; vector-effect: non-scaling-stroke; }
.z-band-accent .z-trio-icon path, .z-band-accent .z-trio-icon rect { fill: none; stroke: currentColor; }
.z-trio-icon { overflow: visible; }
@media (max-width: 820px) {
  .z-trio-item, .z-trio-item + .z-trio-item { border-left: 0; border-bottom: var(--line) solid currentColor; }
  .z-trio-item:last-child { border-bottom: 0; }
}
.z-services { border: var(--line) solid var(--fg); }
.z-service, .z-service:nth-child(even) { padding: clamp(24px, 3vw, 40px); border-bottom: var(--line) solid var(--fg); }
.z-service:nth-child(even) { border-left: var(--line) solid var(--fg); }
.z-service h2, .z-service h3 { font-stretch: 82%; text-transform: uppercase; font-weight: 800; }
.z-num::before { clip-path: polygon(0 100%, 100% 0, 100% 100%); }
@media (max-width: 820px) { .z-service, .z-service:nth-child(even) { border-left: 0; padding: 28px 20px; } }
.z-steps { border-top: var(--line) solid var(--fg); }
.z-step { border-bottom: var(--line) solid var(--fg); }
.z-step-num { font-weight: 800; font-stretch: var(--zp-cond); color: transparent; -webkit-text-stroke: 2px var(--fg); }
.z-step-num svg path, .z-step-num svg rect { fill: var(--accent); }
.z-stats { gap: var(--line); background: var(--fg); border: var(--line) solid var(--fg); }
.z-stat { background: var(--bg); }
.z-stat.z-stat-hi { background: var(--panel-bg); color: var(--panel-fg); }
.z-case { border-top: var(--line) solid var(--fg); }
.z-case-shape .z-fill { fill: var(--accent); }
.z-case-label { border-top-width: 4px; }
.z-index { border: var(--line) solid var(--fg); }
.z-index a, .z-index a + a { padding: 22px; border-bottom: 0; }
.z-index a + a { border-left: var(--line) solid var(--fg); }
@media (max-width: 820px) { .z-index a + a { border-left: 0; border-top: var(--line) solid var(--fg); } }
@media (max-width: 640px) { .z-index a, .z-index a + a { padding: 12px 16px; } .z-index .z-num { margin-bottom: 6px; } }
.z-talks { border-top: var(--line) solid var(--fg); }
.z-talks li { border-bottom: var(--line) solid var(--fg); font-stretch: 82%; text-transform: uppercase; }
.z-talks li small { text-transform: none; font-stretch: 100%; }
.z-list li { border-bottom-color: var(--border); }
.z-head { border-bottom: var(--line) solid var(--fg); padding-bottom: 20px; }
.z-band-accent .z-head, .z-band-dark .z-head { border-bottom-color: currentColor; }
.z-statement { font-weight: 700; }

/* ---------- forms ---------- */
.z-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]), .z-form select, .z-form textarea { border-width: var(--line); background-color: var(--bg); color: var(--fg); }
.z-form input:focus-visible, .z-form select:focus-visible, .z-form textarea:focus-visible,
.z-form .tovu-form button[type=submit]:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; box-shadow: inset 0 0 0 2px var(--accent); }
.z-form .tovu-form-error:not([hidden]), .z-form .tovu-form-success:not([hidden]) { border-width: var(--line); }

/* =====================================================================
   THEME-OWNED HOME (render/partials/home.html)
   ===================================================================== */
.zp-home { --frame: var(--line) solid var(--fg); }
.zp-kicker {
  display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(24px, 3vw, 40px);
  font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.1;
}
.zp-kicker::after { content: ""; flex: 1; height: var(--line); background: currentColor; }
.zp-num { display: inline-grid; place-items: center; min-width: 44px; height: 28px; padding: 0 8px; background: var(--fg); color: var(--bg); letter-spacing: .08em; }
.zp-kicker-inv .zp-num { background: var(--bg); color: var(--fg); }
.zp-outline path, .zp-outline { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.zp-frame { border: var(--frame); }

/* hero: the first screen, sized from the viewport height (--fit) so it never overflows it */
.zp-hero {
  --pad: clamp(12px, calc(3 * var(--z-vh)), 32px);
  /* first screen minus the header (and its 2px rule), the theme preview banner when the switcher shows it, and the paddings */
  --fit: calc(100 * var(--z-vh) - var(--header-h) - 2 * var(--line) - var(--zp-banner, 0px) - 2 * var(--pad));
  padding-block: var(--pad);
  border-bottom: var(--line) solid var(--fg);
  overflow: clip;
}
.zp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .72fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "meta meta meta" "mark mark mark" "title panel poster";
  gap: clamp(10px, calc(1.6 * var(--z-vh)), 16px);
  height: var(--fit); min-height: 420px; max-height: 900px;
}
.zp-meta {
  grid-area: meta; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.1;
}
.zp-meta-mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px; }
.zp-meta-mid i { flex: 1; max-width: 220px; height: var(--line); background: currentColor; }
.zp-wordmark { grid-area: mark; line-height: 0; min-width: 0; }
.zp-wordmark svg { display: block; width: min(100%, calc(var(--fit) * .40 * 1420 / 296)); height: auto; overflow: visible; color: var(--fg); }
.zp-wm-solid path { fill: currentColor; fill-rule: evenodd; }
.zp-wm-echo { transform: translate(14px, 12px); }
.zp-wm-echo path { fill: none; stroke: var(--accent); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.zp-title-block {
  grid-area: title; position: relative; min-height: 0; overflow: hidden;
  border: var(--frame); padding: clamp(12px, 1.8vw, 24px);
  display: flex; align-items: flex-end;
}
.zp-h1 {
  font-size: clamp(2.3rem, min(5.6vw, calc(10 * var(--z-vh))), 7.5rem);
  font-weight: 800; font-stretch: var(--zp-cond); text-transform: uppercase; line-height: 1.1; letter-spacing: 0;
}
.zp-h1 .z-line { display: block; }
.zp-corner { position: absolute; top: 0; right: 0; width: clamp(28px, 4vw, 56px); height: auto; fill: var(--fg); }
.zp-panel {
  grid-area: panel; position: relative; min-height: 0; overflow: hidden;
  background: var(--panel-bg); color: var(--panel-fg);
  padding: clamp(14px, 2vw, 28px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
}
.zp-lede { position: relative; z-index: 1; font-size: clamp(1.2rem, min(2.1vw, calc(4 * var(--z-vh))), 2.1rem); font-weight: 700; line-height: 1.1; max-width: 16ch; }
.zp-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.zp-panel .z-btn { background: var(--panel-fg); color: var(--panel-bg); border-color: var(--panel-fg); }
.zp-panel .z-btn:hover { background: transparent; color: var(--panel-fg); }
.zp-textlink { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; color: inherit; }
.zp-panel-shapes { position: absolute; right: -6%; top: 50%; translate: 0 -55%; width: 58%; opacity: .32; color: var(--panel-fg); z-index: 0; pointer-events: none; }
.zp-hero-poster { grid-area: poster; position: relative; margin: 0; min-height: 0; overflow: hidden; background: var(--ink); }
/* Posters are CSS backgrounds on .zp-img (role=img + aria-label): a display:none copy (inner pages) or a
   content-visibility-skipped section requests nothing, so only the visible home downloads them. */
.zp-img { position: absolute; inset: 0; display: block; background: no-repeat 50% 50% / cover; }
.zp-img-16 { background-image: url("../../../media/zoran-sample-poster-16.webp"); background-position: 50% 22%; }
.zp-img-20 { background-image: url("../../../media/zoran-sample-poster-20.webp"); background-position: 38% 56%; }
.zp-img-24 { background-image: url("../../../media/zoran-sample-poster-24.webp"); }
/* Lazy below-the-fold posters: while kUInetic boots (html[data-kui-cloak]) or holds the figure's on:enter
   wipe at "ready" (not yet scrolled to), no background is set, so nothing downloads. Without JS, or once
   the figure enters (running/finished), the poster loads. */
html[data-kui-cloak] :is(.zp-img-20, .zp-img-24),
[data-kui-state="ready"] > :is(.zp-img-20, .zp-img-24) { background-image: none; }
.zp-hero-poster figcaption, .zp-cap {
  position: absolute; left: 0; bottom: 0; padding: 6px 10px; background: var(--ink); color: var(--paper);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.1;
}
@media (max-width: 900px) {
  .zp-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(140px, 1fr);
    grid-template-areas: "meta meta" "mark mark" "title panel" "poster poster";
    height: auto; min-height: var(--fit); max-height: none;
  }
  .zp-meta-mid { display: none; }
  .zp-wordmark svg { width: 100%; }
  .zp-h1 { font-size: clamp(2.2rem, 8vw, 4rem); }
  .zp-img-16 { background-position: 50% 30%; }
}
@media (max-width: 600px) {
  .zp-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(120px, 1fr);
    grid-template-areas: "meta" "mark" "title" "panel" "poster";
    gap: 10px;
  }
  .zp-h1 { font-size: clamp(2.1rem, 11vw, 3.4rem); }
  .zp-title-block { padding: 12px 14px; }
  .zp-lede { font-size: 1.3rem; max-width: 20ch; }
  .zp-panel { padding: 16px; gap: 16px; }
  .zp-panel-shapes { width: 44%; }
  .zp-wm-echo { transform: translate(18px, 16px); }
}

/* about statement + halftone duotone photo */
.zp-about { padding-block: clamp(56px, 8vw, 112px); border-bottom: var(--line) solid var(--fg); }
.zp-about-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.zp-statement { font-size: clamp(1.6rem, 3vw, 2.9rem); font-weight: 500; line-height: 1.1; max-width: 30ch; margin-bottom: 36px; }
.zp-statement b { font-weight: 800; box-shadow: inset 0 -.2em 0 var(--accent); }
.zp-about-photo, .zp-halftone { position: relative; margin: 0; overflow: hidden; background: var(--accent); }
.zp-about-photo { aspect-ratio: 4 / 5; }
.zp-halftone .zp-img { filter: grayscale(1) contrast(1.2) brightness(1.08); mix-blend-mode: multiply; }
.zp-about-shapes { position: absolute; left: 8%; right: 8%; bottom: 7%; width: 84%; color: var(--ink); z-index: 1; }
@media (max-width: 800px) {
  .zp-about-grid { grid-template-columns: 1fr; }
  .zp-about-photo { max-width: 420px; aspect-ratio: 1; }
}

/* pillars: three framed blocks, the middle one solid */
.zp-pillars { padding-block: clamp(56px, 8vw, 112px); }
.zp-pillar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--frame); }
.zp-pillar { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(300px, 32vw, 440px); padding: clamp(22px, 3vw, 40px); }
.zp-pillar + .zp-pillar { border-left: var(--frame); }
.zp-pillar-shape { position: absolute; top: clamp(20px, 3vw, 36px); right: clamp(20px, 3vw, 36px); width: clamp(72px, 9vw, 128px); height: auto; overflow: visible; }
.zp-pillar-shape path { fill: none; stroke: var(--fg); stroke-width: 2; vector-effect: non-scaling-stroke; }
.zp-pillar-solid { background: var(--panel-bg); color: var(--panel-fg); }
.zp-pillar-solid .zp-pillar-shape path { fill: var(--panel-fg); stroke: none; }
.zp-pillar-label { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.zp-pillar-word { font-size: clamp(2.6rem, 5.2vw, 5rem); font-weight: 800; font-stretch: var(--zp-cond); text-transform: uppercase; line-height: 1.1; margin: 8px 0 14px; }
.zp-pillar p { font-size: 1.1rem; max-width: 24ch; }
@media (max-width: 820px) {
  .zp-pillar-grid { grid-template-columns: 1fr; }
  .zp-pillar { min-height: 260px; }
  .zp-pillar + .zp-pillar { border-left: 0; border-top: var(--frame); }
}

/* services: inverse panel, big numbered rows */
.zp-services { background: var(--fg); color: var(--bg); padding-block: clamp(56px, 8vw, 112px); position: relative; overflow: clip; }
.zp-services-head { margin-bottom: 8px; }
.zp-outline-word {
  margin: -8px 0 24px; font-size: clamp(3.2rem, 12vw, 11rem); font-weight: 800; font-stretch: var(--zp-cond);
  text-transform: uppercase; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--accent);
}
.zp-service-list { list-style: none; margin: 0; padding: 0; border-top: var(--line) solid currentColor; }
.zp-service-list a, .zp-service > summary {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 20px; align-items: center;
  padding: clamp(18px, 2.4vw, 30px) 0; border-bottom: var(--line) solid currentColor; color: inherit; text-decoration: none;
}
/* services accordion (home 03): native <details>, so it opens with Enter/Space and works without JS */
.zp-service > summary { list-style: none; cursor: pointer; }
.zp-service > summary::-webkit-details-marker { display: none; }
.zp-service > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.zp-service > summary:hover .zp-st { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .08em; text-underline-offset: .14em; }
.zp-toggle { position: relative; width: clamp(22px, 2.4vw, 32px); aspect-ratio: 1; flex: none; }
.zp-toggle::before, .zp-toggle::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: currentColor; }
.zp-toggle::after { transform: rotate(90deg); }
.zp-service[open] .zp-toggle::after { transform: rotate(0deg); }
.zp-service[open] > summary { border-bottom-color: transparent; }
.zp-service-body { padding: 0 0 clamp(22px, 3vw, 36px) 84px; border-bottom: var(--line) solid currentColor; }
.zp-service-body ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.4; }
.zp-service-body li { position: relative; padding-left: 22px; }
.zp-service-body li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; background: var(--accent); }
@media (max-width: 600px) {
  .zp-service > summary { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; }
  .zp-service-body { padding-left: 52px; }
  .zp-service-body ul { grid-template-columns: 1fr; }
}
.zp-si { font-size: 13px; font-weight: 700; letter-spacing: .14em; }
.zp-st { font-size: clamp(1.4rem, 3.2vw, 3rem); font-weight: 800; font-stretch: 80%; text-transform: uppercase; line-height: 1.1; }
.zp-arrow { font-size: clamp(1.4rem, 3vw, 2.4rem); line-height: 1; }
.zp-service-list a:hover .zp-st { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .08em; text-underline-offset: .14em; }
@media (max-width: 600px) { .zp-service-list a { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; } }

/* impact stats */
.zp-impact { padding-block: clamp(56px, 8vw, 112px); }
.zp-impact-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 28px; margin-bottom: clamp(24px, 3vw, 40px); }
.zp-impact-head .zp-kicker { flex: 1 1 320px; margin: 0; }
.zp-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--frame); }
.zp-stat {
  container-type: inline-size; display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  min-height: clamp(220px, 24vw, 320px); padding: clamp(20px, 2.4vw, 32px); color: inherit; text-decoration: none;
}
.zp-stat + .zp-stat { border-left: var(--frame); }
.zp-stat-num { font-size: clamp(2.4rem, 17cqi, 7rem); font-weight: 800; font-stretch: var(--zp-cond); line-height: 1.1; white-space: nowrap; }
.zp-stat-text { font-size: 1.05rem; max-width: 30ch; }
.zp-stat-text b { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.zp-stat-solid { background: var(--panel-bg); color: var(--panel-fg); }
.zp-stat:hover .zp-stat-text b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (max-width: 820px) {
  .zp-stat-grid { grid-template-columns: 1fr; }
  .zp-stat + .zp-stat { border-left: 0; border-top: var(--frame); }
  .zp-stat { min-height: 0; }
}

/* closing CTA: mixed-weight poster type + framed poster */
.zp-cta { padding-block: clamp(56px, 8vw, 112px); border-top: var(--line) solid var(--fg); }
.zp-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); width: 100%; text-align: center; }
.zp-cta-copy { min-width: 0; padding-inline: 24px; }
.zp-cta-copy .zp-cta-title { max-width: 1120px; margin: 0 auto; }
.zp-cta .zp-heavy::after { margin-inline: auto; }
.zp-cta-grid > .zp-actions { justify-content: center; padding-inline: 24px; }
.zp-cta-title { font-size: clamp(2.2rem, 5.2vw, 5.4rem); font-stretch: var(--zp-cond); text-transform: uppercase; line-height: 1.1; margin-bottom: 36px; }
.zp-light { font-weight: 300; }
.zp-heavy { display: block; font-weight: 800; }
.zp-heavy::after { content: ""; display: block; width: 2.2em; height: .18em; margin-top: .18em; background: var(--accent); }
.zp-cta-poster { position: relative; margin: 0; aspect-ratio: 3573 / 5053; overflow: hidden; background: var(--surface); }
/* client logos (replaces the closing poster): slow marquee in a framed panel */
.zp-cta-grid:has(.zp-clients) { grid-template-columns: minmax(0, 1fr); align-items: center; }
.zp-clients { min-width: 0; width: 100%; border-block: var(--line) solid var(--fg); }
.zp-clients-label { margin: 0; padding: 12px 18px; border-bottom: var(--line) solid var(--fg); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.zp-marquee { overflow: hidden; padding-block: clamp(28px, 3.4vw, 44px); }
.zp-marquee:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
/* the track carries the page background so the one opaque logo (multiply/screen) blends against it */
.zp-marquee-track { display: flex; width: max-content; background: var(--bg); }
.zp-logo-list { display: flex; align-items: center; gap: clamp(36px, 4vw, 56px); margin: 0; padding: 0 clamp(18px, 2vw, 28px); list-style: none; }
.zp-logo-list li { flex: none; width: clamp(130px, 12vw, 190px); height: clamp(64px, 6.4vw, 96px); display: flex; align-items: center; justify-content: center; }
.zp-logo-list img { display: block; width: 100%; height: 100%; object-fit: contain; filter: brightness(0); opacity: .86; }
/* Amplifi ships as a square JPEG-style file on white: crop to the wordmark and threshold it to ink */
.zp-logo-list .zp-logo-opaque { overflow: hidden; }
.zp-logo-list .zp-logo-opaque img { object-fit: cover; transform: scale(1.25); filter: grayscale(1) brightness(.62) contrast(5); mix-blend-mode: multiply; opacity: 1; }
:root:not([data-theme="light"]) .zp-logo-list img { filter: brightness(0) invert(1); }
:root:not([data-theme="light"]) .zp-logo-list .zp-logo-opaque img { filter: grayscale(1) brightness(.62) contrast(5) invert(1); mix-blend-mode: screen; }
@keyframes zp-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
  .zp-marquee-track { animation: zp-marquee 48s linear infinite; }
  .zp-marquee:hover .zp-marquee-track, .zp-marquee:focus-within .zp-marquee-track { animation-play-state: paused; }
}
/* reduced motion: a static grid of every logo, no duplicate */
@media (prefers-reduced-motion: reduce) {
  .zp-marquee { padding: 24px 18px; }
  .zp-marquee-track { width: auto; display: block; }
  .zp-logo-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 28px 24px; padding: 0; justify-items: center; }
  .zp-logo-list li { width: 100%; max-width: 150px; }
  .zp-logo-dup { display: none; }
}
@media (max-width: 800px) {
  .zp-cta-grid, .zp-cta-grid:has(.zp-clients) { grid-template-columns: 1fr; }
  .zp-cta-poster { max-width: 300px; }
}

/* poster motion (CSS, not kUInetic): the accent echo of the wordmark slides out of register after the
   wipe; outline shapes float in. Only with JS (html.js) and no reduced-motion preference. */
@keyframes zp-echo { from { transform: translate(0, 0); opacity: 0; } }
@keyframes zp-float { from { opacity: 0; translate: 0 -40%; } }
@media (prefers-reduced-motion: no-preference) {
  .js .zp-wm-echo { animation: zp-echo 1.1s cubic-bezier(.2,.7,.2,1) 1s both; }
  .js .zp-panel-shapes { animation: zp-float 1.4s cubic-bezier(.2,.7,.2,1) 1.1s both; }
  .zp-service-list .zp-arrow { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .zp-service-list a:hover .zp-arrow { transform: translateX(8px); }
  .zp-mode-icon { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}