/* ==========================================================================
   PRIMEPIXEL 2.0 — Global design system + homepage styles
   Portable: semantic HTML + modern CSS + vanilla JS (GSAP ScrollTrigger).
   Every custom class is prefixed pp-. Sections can be lifted individually
   into Elementor HTML widgets; this file is the single global stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* colour */
  --pp-black: #0a0a0a;
  --pp-ink: #000000;
  --pp-white: #f4f4f2;
  --pp-grey-100: #d9d9d6;
  --pp-grey-300: #9a9a97;
  --pp-grey-500: #5d5d5b;
  --pp-grey-700: #2a2a2a;
  --pp-grey-800: #171717;
  --pp-red: #f51e2f;
  --pp-line: rgba(255, 255, 255, 0.12);
  --pp-line-strong: rgba(255, 255, 255, 0.28);

  /* type */
  --pp-font: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pp-fs-display: clamp(2.75rem, 9vw, 11rem);
  --pp-fs-h1: clamp(2.4rem, 6.4vw, 7.25rem);
  --pp-fs-h2: clamp(2rem, 4.6vw, 5rem);
  --pp-fs-h3: clamp(1.4rem, 2.2vw, 2.25rem);
  --pp-fs-body: clamp(1rem, 1.05vw, 1.2rem);
  --pp-fs-small: 0.875rem;
  --pp-fs-label: 0.6875rem;
  --pp-lh-display: 0.92;
  --pp-lh-body: 1.55;
  --pp-ls-display: -0.035em;
  --pp-ls-label: 0.22em;

  /* spacing */
  --pp-gutter: clamp(20px, 5vw, 96px);
  --pp-space-1: 0.5rem;
  --pp-space-2: 1rem;
  --pp-space-3: 2rem;
  --pp-space-4: 4rem;
  --pp-space-5: clamp(6rem, 12vw, 12rem);
  --pp-space-6: clamp(9rem, 18vw, 18rem);
  --pp-container: 1680px;
  --pp-measure: 34rem;

  /* motion */
  --pp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pp-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --pp-dur-fast: 220ms;
  --pp-dur: 480ms;
  --pp-dur-slow: 900ms;

  /* z-index */
  --pp-z-media: 0;
  --pp-z-content: 2;
  --pp-z-shutter: 5;
  --pp-z-logo: 6;
  --pp-z-header: 40;
  --pp-z-menu: 50;
  --pp-z-progress: 60;

  /* header */
  --pp-header-h: 76px;
  --pp-header-logo-h: 20px;
}

@media (max-width: 900px) {
  :root {
    --pp-header-h: 64px;
    --pp-header-logo-h: 17px;
    --pp-lh-display: 0.95;
  }
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
html.pp-root { background: var(--pp-ink); scroll-behavior: auto; }
.pp-body,
body.pp-body {
  margin: 0;
  background: var(--pp-ink);
  color: var(--pp-white);
  font-family: var(--pp-font);
  font-size: var(--pp-fs-body);
  line-height: var(--pp-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.pp-site { position: relative; width: 100%; overflow-x: clip; }
.pp-site *, .pp-site *::before, .pp-site *::after { box-sizing: border-box; }
.pp-site img, .pp-site video { display: block; max-width: 100%; }
.pp-site a { color: inherit; text-decoration: none; }
.pp-site h1, .pp-site h2, .pp-site h3, .pp-site p, .pp-site ul, .pp-site figure, .pp-site blockquote { margin: 0; }
.pp-site ul { padding: 0; list-style: none; }
.pp-site button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.pp-site :focus-visible { outline: 1px solid var(--pp-red); outline-offset: 4px; }

.pp-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* type utilities */
.pp-label {
  font-size: var(--pp-fs-label);
  letter-spacing: var(--pp-ls-label);
  text-transform: uppercase;
  color: var(--pp-grey-300);
  font-weight: 500;
  line-height: 1;
}
.pp-label--red { color: var(--pp-red); }
.pp-display {
  font-size: var(--pp-fs-display);
  line-height: var(--pp-lh-display);
  letter-spacing: var(--pp-ls-display);
  font-weight: 500;
  text-transform: uppercase;
}
.pp-h1 { font-size: var(--pp-fs-h1); line-height: 0.95; letter-spacing: -0.03em; font-weight: 500; text-transform: uppercase; }
.pp-h2 { font-size: var(--pp-fs-h2); line-height: 1; letter-spacing: -0.025em; font-weight: 500; text-transform: uppercase; }
.pp-h3 { font-size: var(--pp-fs-h3); line-height: 1.1; letter-spacing: -0.015em; font-weight: 500; }
.pp-lede { font-size: clamp(1.05rem, 1.35vw, 1.45rem); line-height: 1.45; color: var(--pp-grey-100); max-width: var(--pp-measure); }
.pp-copy { color: var(--pp-grey-300); max-width: var(--pp-measure); }

.pp-line { display: block; overflow: hidden; }
.pp-line__inner { display: block; }

.pp-placeholder-tag {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-size: var(--pp-fs-label); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pp-grey-300); border: 1px solid var(--pp-line-strong); padding: 0.55em 0.8em;
  line-height: 1; font-weight: 500;
}
.pp-placeholder-tag::before { content: ""; width: 5px; height: 5px; background: var(--pp-red); border-radius: 50%; }

/* --------------------------------------------------------------------------
   3. LINKS + CTA (each CTA owns its own identity)
   -------------------------------------------------------------------------- */
.pp-link {
  display: inline-flex; align-items: center; gap: 0.75em;
  font-size: var(--pp-fs-label); letter-spacing: var(--pp-ls-label); text-transform: uppercase; font-weight: 500;
  color: var(--pp-white); position: relative;
}
.pp-link::after {
  content: ""; position: absolute; left: 0; bottom: -0.55em; height: 1px; width: 100%;
  background: var(--pp-white); transform: scaleX(0.3); transform-origin: left; opacity: 0.35;
  transition: transform var(--pp-dur) var(--pp-ease), opacity var(--pp-dur) var(--pp-ease), background var(--pp-dur);
}
.pp-link:hover::after, .pp-link:focus-visible::after { transform: scaleX(1); opacity: 1; background: var(--pp-red); }
.pp-link__arrow { display: inline-block; width: 1.6em; height: 1px; background: currentColor; position: relative; transition: width var(--pp-dur) var(--pp-ease); }
.pp-link__arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.pp-link:hover .pp-link__arrow { width: 2.6em; }

/* Primary CTA: red plate, white type, expanding underline plate */
.pp-cta {
  display: inline-flex; align-items: center; gap: 1.2em;
  padding: 1.35em 2.2em; background: var(--pp-red); color: #fff;
  font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; line-height: 1;
  position: relative; isolation: isolate; overflow: hidden;
}
.pp-cta::before { content: ""; position: absolute; inset: 0; background: var(--pp-white); transform: translateY(101%); transition: transform 560ms var(--pp-ease); z-index: -1; }
.pp-cta:hover::before, .pp-cta:focus-visible::before { transform: translateY(0); }
.pp-cta:hover, .pp-cta:focus-visible { color: var(--pp-ink); }
.pp-cta__dot { width: 6px; height: 6px; background: currentColor; border-radius: 50%; }

/* Ghost CTA used in header (Kontakt) */
.pp-cta-ghost {
  display: inline-flex; align-items: center; padding: 0.9em 1.4em;
  border: 1px solid var(--pp-line-strong); font-size: var(--pp-fs-label); letter-spacing: var(--pp-ls-label);
  text-transform: uppercase; font-weight: 500; line-height: 1; transition: border-color var(--pp-dur), background var(--pp-dur), color var(--pp-dur);
}
.pp-cta-ghost:hover, .pp-cta-ghost:focus-visible { border-color: var(--pp-white); background: var(--pp-white); color: var(--pp-ink); }

/* --------------------------------------------------------------------------
   4. PROGRESS + HEADER
   -------------------------------------------------------------------------- */
.pp-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: var(--pp-z-progress); pointer-events: none; }
.pp-progress__bar { width: 100%; height: 100%; background: var(--pp-red); transform: scaleX(0); transform-origin: left; }

.pp-header {
  position: fixed; top: 0; left: 0; right: 0; height: var(--pp-header-h);
  z-index: var(--pp-z-header);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 var(--pp-gutter);
  background: linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0));
}
.pp-header__logo { display: inline-flex; align-items: center; height: var(--pp-header-logo-h); justify-self: start; }
.pp-header__logo img { height: 100%; width: auto; }
html.pp-js .pp-header__logo { opacity: 0; }
html.pp-js .pp-header__logo.is-visible { opacity: 1; }

.pp-nav { display: flex; gap: clamp(1.4rem, 2.4vw, 3rem); justify-self: center; }
.pp-nav a {
  font-size: var(--pp-fs-label); letter-spacing: var(--pp-ls-label); text-transform: uppercase; font-weight: 500;
  color: var(--pp-grey-100); position: relative; padding: 0.4em 0; white-space: nowrap;
}
.pp-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--pp-red); transform: scaleX(0); transform-origin: right; transition: transform var(--pp-dur) var(--pp-ease); }
.pp-nav a:hover::after, .pp-nav a:focus-visible::after, .pp-nav a.is-active::after { transform: scaleX(1); transform-origin: left; }
.pp-nav a:hover { color: var(--pp-white); }

.pp-header__right { display: flex; align-items: center; gap: 1.6rem; justify-self: end; }
.pp-header__login { font-size: var(--pp-fs-label); letter-spacing: var(--pp-ls-label); text-transform: uppercase; color: var(--pp-grey-300); font-weight: 500; }
.pp-header__login:hover { color: var(--pp-white); }

.pp-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; position: relative; }
.pp-burger span { position: absolute; width: 22px; height: 1px; background: var(--pp-white); transition: transform var(--pp-dur) var(--pp-ease), opacity var(--pp-dur); }
.pp-burger span:nth-child(1) { transform: translateY(-4px); }
.pp-burger span:nth-child(2) { transform: translateY(4px); }
.pp-burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.pp-burger[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }

html.pp-js .pp-header__nav-item, html.pp-js .pp-header__right > * { opacity: 0; }
html.pp-js .pp-header.is-ready .pp-header__nav-item, html.pp-js .pp-header.is-ready .pp-header__right > * { opacity: 1; }
html.pp-reduced .pp-header__nav-item, html.pp-reduced .pp-header__right > *, html.pp-reduced .pp-header__logo { opacity: 1 !important; }

/* Mobile menu */
.pp-menu {
  position: fixed; inset: 0; z-index: var(--pp-z-menu); background: var(--pp-ink);
  display: flex; flex-direction: column; justify-content: flex-end; padding: var(--pp-header-h) var(--pp-gutter) var(--pp-space-3);
  transform: translateY(-100%); transition: transform 640ms var(--pp-ease-inout); visibility: hidden;
}
.pp-menu.is-open { transform: translateY(0); visibility: visible; }
.pp-menu__list { display: flex; flex-direction: column; gap: 0.2em; margin-bottom: var(--pp-space-4); }
.pp-menu__list a { font-size: clamp(2.2rem, 10vw, 4rem); line-height: 1.05; letter-spacing: -0.03em; text-transform: uppercase; font-weight: 500; display: block; padding: 0.15em 0; border-bottom: 1px solid var(--pp-line); }
.pp-menu__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.pp-menu__close { position: absolute; top: 0; right: var(--pp-gutter); height: var(--pp-header-h); display: flex; align-items: center; }

@media (max-width: 900px) {
  .pp-header { grid-template-columns: 1fr auto; }
  .pp-nav { display: none; }
  .pp-header__login { display: none; }
  .pp-burger { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   5. SCENE 00 — LOGO INTRO (pinned, scroll-scrubbed)
   -------------------------------------------------------------------------- */
.pp-logo-intro { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--pp-ink); }
.pp-logo-intro__reveal { position: absolute; inset: 0; z-index: var(--pp-z-media); overflow: hidden; }
.pp-logo-intro__reveal img { width: 100%; height: 100%; object-fit: cover; opacity: 0.72; }
.pp-logo-intro__reveal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.45) 100%); }

.pp-shutter { position: absolute; left: 0; width: 100%; height: 50.5%; background: var(--pp-ink); z-index: var(--pp-z-shutter); }
.pp-shutter--top { top: 0; transform-origin: top; }
.pp-shutter--bottom { bottom: 0; transform-origin: bottom; }
.pp-redline { position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--pp-red); z-index: var(--pp-z-shutter); transform-origin: left; opacity: 0.9; }
html.pp-js .pp-shutter { visibility: visible; }
html.pp-reduced .pp-shutter, html.pp-reduced .pp-redline { display: none; }

.pp-logo-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: var(--pp-z-logo); pointer-events: none; }
.pp-logo-fly { position: relative; width: min(58vw, 880px); transform-origin: 0 0; will-change: transform; }
.pp-logo { position: relative; width: 100%; aspect-ratio: 2056 / 426; transform-origin: center; }
.pp-logo__mark-wrap { position: absolute; left: 0; top: 0; height: 100%; width: 15.47%; }
.pp-logo__mark { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.pp-logo__sweep-mask { position: absolute; inset: 0; -webkit-mask-image: url("img/mark.png"); mask-image: url("img/mark.png"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; overflow: hidden; }
.pp-logo__sweep { position: absolute; top: -10%; bottom: -10%; left: 0; width: 45%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0) 100%); mix-blend-mode: screen; }
html:not(.pp-js) .pp-logo__sweep, html.pp-reduced .pp-logo__sweep { display: none; }
.pp-logo__word { position: absolute; left: 19.75%; top: 0; height: 100%; width: 80.25%; }
.pp-logo__letter { position: absolute; top: 0; height: 100%; width: auto; will-change: transform, opacity; }
.pp-logo__letter img { height: 100%; width: 100%; object-fit: contain; }
.pp-logo__letter--0 { left: 0.06%;  width: 6.49%; }
.pp-logo__letter--1 { left: 11.21%; width: 6.85%; }
.pp-logo__letter--2 { left: 22.73%; width: 1.88%; }
.pp-logo__letter--3 { left: 29.88%; width: 7.88%; }
.pp-logo__letter--4 { left: 43.09%; width: 6.00%; }
.pp-logo__letter--5 { left: 54.06%; width: 6.48%; }
.pp-logo__letter--6 { left: 65.27%; width: 1.76%; }
.pp-logo__letter--7 { left: 71.82%; width: 7.27%; }
.pp-logo__letter--8 { left: 83.76%; width: 6.00%; }
.pp-logo__letter--9 { left: 94.79%; width: 5.15%; }

.pp-logo__tag { position: absolute; left: 50%; top: calc(50% + min(6vw, 96px)); transform: translateX(-50%); white-space: nowrap; font-size: var(--pp-fs-label); letter-spacing: 0.45em; text-transform: uppercase; color: var(--pp-grey-100); font-weight: 500; }
.pp-logo__tag i { font-style: normal; color: var(--pp-red); padding: 0 0.35em; }

.pp-scroll-hint { position: absolute; left: 50%; bottom: clamp(24px, 4vh, 48px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; z-index: var(--pp-z-logo); }
.pp-scroll-hint span { font-size: var(--pp-fs-label); letter-spacing: 0.32em; text-transform: uppercase; color: var(--pp-grey-300); }
.pp-scroll-hint__bar { width: 1px; height: 40px; background: var(--pp-line-strong); position: relative; overflow: hidden; }
.pp-scroll-hint__bar::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: var(--pp-red); animation: pp-hint 1.9s var(--pp-ease-inout) infinite; }
@keyframes pp-hint { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }
html.pp-reduced .pp-scroll-hint { display: none; }

.pp-intro-statement { position: absolute; left: var(--pp-gutter); right: var(--pp-gutter); bottom: clamp(32px, 8vh, 96px); z-index: var(--pp-z-content); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--pp-space-3); }
.pp-intro-statement .pp-display { font-size: clamp(2.4rem, 7.2vw, 8.6rem); }
.pp-intro-statement__meta { display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-end; text-align: right; }
.pp-intro-statement__meta .pp-label i { font-style: normal; color: var(--pp-red); padding: 0 0.3em; }
@media (max-width: 900px) {
  .pp-logo-fly { width: 84vw; }
  .pp-intro-statement { grid-template-columns: 1fr; gap: var(--pp-space-2); }
  .pp-intro-statement .pp-display { font-size: 8.4vw; }
  .pp-intro-statement__meta { align-items: flex-start; text-align: left; }
  .pp-statement { padding: var(--pp-space-5) var(--pp-gutter); }
  .pp-intro__head { flex-direction: column; gap: 0.75rem; margin-bottom: var(--pp-space-3); }
}

/* --------------------------------------------------------------------------
   6. SCENE 01 — INTRODUCTION
   -------------------------------------------------------------------------- */
.pp-section { position: relative; padding: var(--pp-space-5) var(--pp-gutter); }
.pp-container { max-width: var(--pp-container); margin: 0 auto; }

.pp-intro { background: var(--pp-ink); }
.pp-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pp-space-4); align-items: end; }
.pp-intro__head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: var(--pp-space-3); justify-content: space-between; border-top: 1px solid var(--pp-line); padding-top: var(--pp-space-2); margin-bottom: var(--pp-space-4); }
.pp-intro__title { grid-column: 1 / span 2; }
.pp-intro__copy { grid-column: 2; display: grid; gap: var(--pp-space-3); margin-top: var(--pp-space-4); }
.pp-intro__facts { display: flex; gap: var(--pp-space-3); flex-wrap: wrap; }
.pp-intro__facts li { display: grid; gap: 0.5rem; }
.pp-intro__facts strong { font-weight: 500; font-size: 1rem; color: var(--pp-white); }
@media (max-width: 900px) {
  .pp-intro__grid { grid-template-columns: 1fr; }
  .pp-intro__title, .pp-intro__copy { grid-column: 1; }
  .pp-intro__copy { margin-top: var(--pp-space-3); }
}

/* --------------------------------------------------------------------------
   7. SCENE 02 — SERVICES (pinned cinematic chapters)
   -------------------------------------------------------------------------- */
.pp-services { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--pp-ink); }
.pp-service-scene { position: absolute; inset: 0; }
.pp-service-scene__media { position: absolute; inset: 0; overflow: hidden; z-index: var(--pp-z-media); }
.pp-service-scene__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.pp-service-scene__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.15) 100%); }
.pp-service-scene__content { position: absolute; left: var(--pp-gutter); right: var(--pp-gutter); bottom: clamp(32px, 9vh, 110px); z-index: var(--pp-z-content); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: var(--pp-space-3); }
.pp-service-scene__index { display: flex; align-items: center; gap: 1rem; margin-bottom: var(--pp-space-3); }
.pp-service-scene__index::after { content: ""; width: 48px; height: 1px; background: var(--pp-red); }
.pp-service-scene__title { font-size: clamp(3.4rem, 11vw, 13rem); line-height: 0.88; letter-spacing: -0.04em; font-weight: 500; text-transform: uppercase; }
.pp-service-scene__aside { display: grid; gap: var(--pp-space-3); justify-items: start; padding-bottom: 0.6em; }
.pp-services__rail { position: absolute; right: var(--pp-gutter); top: 50%; transform: translateY(-50%); z-index: var(--pp-z-content); display: grid; gap: 14px; }
.pp-services__rail span { width: 1px; height: 36px; background: var(--pp-line-strong); position: relative; overflow: hidden; }
.pp-services__rail span::after { content: ""; position: absolute; inset: 0; background: var(--pp-red); transform: scaleY(0); transform-origin: top; }
.pp-services__label { position: absolute; left: var(--pp-gutter); top: calc(var(--pp-header-h) + 1.5rem); z-index: var(--pp-z-content); }
@media (max-width: 900px) {
  .pp-services { height: auto; }
  .pp-service-scene { position: relative; height: 100svh; min-height: 560px; }
  .pp-service-scene__content { grid-template-columns: 1fr; gap: var(--pp-space-2); }
  .pp-service-scene__title { font-size: clamp(3rem, 16vw, 6rem); }
  .pp-services__rail, .pp-services__label { display: none; }
  .pp-service-scene__media::after { background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%); }
}

/* --------------------------------------------------------------------------
   8. SCENE 03 — SELECTED WORK (horizontal case sequence)
   -------------------------------------------------------------------------- */
.pp-work { position: relative; background: var(--pp-ink); overflow: hidden; }
.pp-work__track { display: flex; align-items: stretch; height: 100vh; height: 100svh; will-change: transform; }
.pp-work__lead { flex: 0 0 auto; width: clamp(320px, 38vw, 640px); padding: 0 var(--pp-gutter); display: flex; flex-direction: column; justify-content: center; gap: var(--pp-space-3); }
.pp-work__lead .pp-h1 { font-size: clamp(2.6rem, 5.4vw, 6rem); }
.pp-case { flex: 0 0 auto; width: 78vw; max-width: 1400px; position: relative; padding: calc(var(--pp-header-h) + 2vh) 3vw 6vh 3vw; display: flex; flex-direction: column; justify-content: center; }
.pp-case__media { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 70vh; overflow: hidden; background: var(--pp-grey-800); }
.pp-case__media img { width: 100%; height: 100%; object-fit: cover; }
.pp-case__meta { position: absolute; left: 3vw; bottom: clamp(24px, 5vh, 64px); right: 3vw; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--pp-space-2); pointer-events: none; }
.pp-case__title { font-size: clamp(2.2rem, 5vw, 5.6rem); line-height: 0.95; letter-spacing: -0.03em; font-weight: 500; text-transform: uppercase; text-shadow: 0 2px 40px rgba(0,0,0,0.5); }
.pp-case__cats { display: flex; align-items: center; gap: 0.6em; }
.pp-case__cats i { font-style: normal; color: var(--pp-red); }
.pp-case__num { position: absolute; top: calc(var(--pp-header-h) + 2vh + 1.2rem); left: calc(3vw + 1.2rem); }
.pp-case__tag { position: absolute; top: calc(var(--pp-header-h) + 2vh + 1.2rem); right: calc(3vw + 1.2rem); }
.pp-work__end { flex: 0 0 auto; width: clamp(240px, 28vw, 520px); display: flex; align-items: center; justify-content: center; }
@media (max-width: 900px) {
  .pp-work__track { display: block; height: auto; padding: var(--pp-space-5) 0; }
  .pp-work__lead { width: auto; padding: 0 var(--pp-gutter) var(--pp-space-4); }
  .pp-case { width: auto; max-width: none; padding: 0 var(--pp-gutter) var(--pp-space-4); }
  .pp-case__media { aspect-ratio: 4 / 5; max-height: none; }
  .pp-case__meta { position: static; grid-template-columns: 1fr; margin-top: 1rem; }
  .pp-case__num, .pp-case__tag { top: 1rem; }
  .pp-case__num { left: calc(var(--pp-gutter) + 1rem); }
  .pp-case__tag { right: calc(var(--pp-gutter) + 1rem); }
  .pp-work__end { width: auto; padding: var(--pp-space-2) var(--pp-gutter); justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   9. SCENE 04 — BRAND STATEMENT (the pause)
   -------------------------------------------------------------------------- */
.pp-statement { padding: var(--pp-space-6) var(--pp-gutter); background: var(--pp-ink); }
.pp-statement__text { font-size: clamp(2.2rem, 6.2vw, 7.4rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 500; text-transform: uppercase; max-width: 16ch; }
.pp-statement__text .pp-word { display: inline-block; }
.pp-statement__text .pp-word--red { color: var(--pp-red); }
html.pp-js .pp-statement__text .pp-word { opacity: 0.12; }
html.pp-reduced .pp-statement__text .pp-word { opacity: 1 !important; }
.pp-statement__foot { margin-top: var(--pp-space-4); display: flex; justify-content: flex-end; }

/* --------------------------------------------------------------------------
   10. SCENE 05 — PROCESS (pinned number sequence)
   -------------------------------------------------------------------------- */
.pp-process { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--pp-ink); }
.pp-process__bg { position: absolute; inset: 0; z-index: var(--pp-z-media); overflow: hidden; }
.pp-process__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
.pp-process__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 60%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.85) 70%); }
.pp-process__inner { position: absolute; inset: 0; z-index: var(--pp-z-content); padding: 0 var(--pp-gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--pp-space-4); }
.pp-process__head { position: absolute; left: var(--pp-gutter); top: calc(var(--pp-header-h) + 1.5rem); z-index: var(--pp-z-content); display: flex; gap: var(--pp-space-3); align-items: center; }
.pp-process__num { position: relative; height: clamp(9rem, 26vw, 30rem); overflow: hidden; font-size: clamp(9rem, 26vw, 30rem); line-height: 1; letter-spacing: -0.06em; font-weight: 500; font-variant-numeric: tabular-nums; }
.pp-process__num span { position: absolute; left: 0; top: 0; display: block; line-height: 1; }
.pp-process__num span:not(:first-child) { transform: translateY(100%); }
html.pp-reduced .pp-process__num { display: none; }
.pp-process__steps { position: relative; min-height: 14rem; }
.pp-process__step { position: absolute; inset: 0; display: grid; gap: var(--pp-space-2); align-content: center; }
.pp-process__step:not(:first-child) { opacity: 0; }
.pp-process__step h3 { font-size: clamp(1.8rem, 3.4vw, 3.6rem); line-height: 1; letter-spacing: -0.025em; font-weight: 500; text-transform: uppercase; }
.pp-process__bar { position: absolute; left: var(--pp-gutter); right: var(--pp-gutter); bottom: clamp(24px, 6vh, 64px); height: 1px; background: var(--pp-line); z-index: var(--pp-z-content); }
.pp-process__bar span { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--pp-red); transform: scaleX(0.25); transform-origin: left; }
.pp-process__list { display: none; }
@media (max-width: 900px) {
  .pp-process { height: auto; padding: var(--pp-space-5) var(--pp-gutter); }
  .pp-process__inner, .pp-process__bar, .pp-process__head { display: none; }
  .pp-process__list { display: grid; position: relative; z-index: var(--pp-z-content); gap: var(--pp-space-4); }
  .pp-process__item { display: grid; grid-template-columns: auto 1fr; gap: var(--pp-space-2) var(--pp-space-3); align-items: start; border-top: 1px solid var(--pp-line); padding-top: var(--pp-space-2); }
  .pp-process__item .pp-process__n { font-size: 3.4rem; line-height: 1; letter-spacing: -0.05em; font-weight: 500; }
  .pp-process__item h3 { font-size: 1.6rem; line-height: 1.05; letter-spacing: -0.02em; font-weight: 500; text-transform: uppercase; }
  .pp-process__item p { grid-column: 2; }
  .pp-process__list-head { margin-bottom: var(--pp-space-4); }
}
html.pp-reduced .pp-process { height: auto; padding: var(--pp-space-5) var(--pp-gutter); }
html.pp-reduced .pp-process__inner, html.pp-reduced .pp-process__bar, html.pp-reduced .pp-process__head { display: none; }
html.pp-reduced .pp-process__list { display: grid; position: relative; z-index: 2; gap: var(--pp-space-4); }
html.pp-reduced .pp-process__item { display: grid; grid-template-columns: auto 1fr; gap: var(--pp-space-2) var(--pp-space-3); border-top: 1px solid var(--pp-line); padding-top: var(--pp-space-2); }
html.pp-reduced .pp-process__item .pp-process__n { font-size: 3.4rem; line-height: 1; font-weight: 500; }
html.pp-reduced .pp-process__item h3 { font-size: 1.6rem; text-transform: uppercase; font-weight: 500; }
html.pp-reduced .pp-process__item p { grid-column: 2; }

/* --------------------------------------------------------------------------
   11. SCENE 06 — CLIENTS
   -------------------------------------------------------------------------- */
.pp-clients { background: var(--pp-ink); border-top: 1px solid var(--pp-line); }
.pp-clients__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pp-space-3); margin-bottom: var(--pp-space-4); }
.pp-clients__field { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--pp-line); }
.pp-clients__logo { background: var(--pp-ink); aspect-ratio: 3 / 1.4; display: flex; align-items: center; justify-content: center; position: relative; }
.pp-clients__logo span { font-size: var(--pp-fs-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--pp-grey-500); font-weight: 500; }
.pp-clients__logo::after { content: ""; position: absolute; left: 50%; bottom: 22%; width: 24px; height: 1px; background: var(--pp-grey-700); transform: translateX(-50%); }
@media (max-width: 900px) { .pp-clients__field { grid-template-columns: repeat(2, 1fr); } .pp-clients__head { flex-direction: column; align-items: flex-start; gap: var(--pp-space-2); } }

/* --------------------------------------------------------------------------
   12. SCENE 07 — TESTIMONIALS (one at a time)
   -------------------------------------------------------------------------- */
.pp-testimonials { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--pp-ink); }
.pp-testimonials__head { position: absolute; left: var(--pp-gutter); top: calc(var(--pp-header-h) + 1.5rem); z-index: var(--pp-z-content); }
.pp-quote { position: absolute; inset: 0; padding: 0 var(--pp-gutter); display: grid; align-content: center; gap: var(--pp-space-3); max-width: min(1100px, 100%); margin: 0 auto; }
.pp-quote:not(:first-of-type) { opacity: 0; }
.pp-quote__mark { width: 1px; height: 64px; background: var(--pp-red); }
.pp-quote p { font-size: clamp(1.6rem, 3.2vw, 3.4rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 400; color: var(--pp-grey-100); }
.pp-quote footer { display: grid; gap: 0.4rem; }
.pp-testimonials__count { position: absolute; right: var(--pp-gutter); bottom: clamp(24px, 6vh, 64px); z-index: var(--pp-z-content); display: flex; gap: 0.6em; align-items: baseline; }
.pp-testimonials__count b { font-weight: 500; color: var(--pp-white); }
@media (max-width: 900px) {
  .pp-testimonials { height: auto; padding: var(--pp-space-5) 0; }
  .pp-testimonials__head { position: static; padding: 0 var(--pp-gutter); margin-bottom: var(--pp-space-4); }
  .pp-quote { position: relative; opacity: 1 !important; padding-bottom: var(--pp-space-4); }
  .pp-testimonials__count { display: none; }
}
html.pp-reduced .pp-testimonials { height: auto; padding: var(--pp-space-5) 0; }
html.pp-reduced .pp-testimonials__head { position: static; padding: 0 var(--pp-gutter); margin-bottom: var(--pp-space-4); }
html.pp-reduced .pp-quote { position: relative; opacity: 1 !important; padding-bottom: var(--pp-space-4); }
html.pp-reduced .pp-testimonials__count { display: none; }

/* --------------------------------------------------------------------------
   13. SCENE 08 — CONTACT (closing shot)
   -------------------------------------------------------------------------- */
.pp-contact { position: relative; padding: var(--pp-space-6) var(--pp-gutter) var(--pp-space-5); background: var(--pp-ink); overflow: hidden; }
.pp-contact__bg { position: absolute; inset: 0; z-index: var(--pp-z-media); }
.pp-contact__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.22; }
.pp-contact__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--pp-ink) 0%, rgba(0,0,0,0.3) 50%, var(--pp-ink) 100%); }
.pp-contact__inner { position: relative; z-index: var(--pp-z-content); display: grid; gap: var(--pp-space-4); }
.pp-contact__title { font-size: clamp(3rem, 10vw, 12rem); line-height: 0.9; letter-spacing: -0.04em; font-weight: 500; text-transform: uppercase; }
.pp-contact__row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--pp-space-4); }
.pp-contact__details { display: flex; gap: var(--pp-space-4); flex-wrap: wrap; }
.pp-contact__details a, .pp-contact__details span { display: block; font-size: 1.05rem; color: var(--pp-grey-100); margin-top: 0.4rem; }
.pp-contact__details a:hover { color: var(--pp-red); }
@media (max-width: 900px) { .pp-contact__row { grid-template-columns: 1fr; gap: var(--pp-space-3); } }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.pp-footer { background: var(--pp-ink); border-top: 1px solid var(--pp-line); padding: var(--pp-space-4) var(--pp-gutter) var(--pp-space-3); }
.pp-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--pp-space-4); }
.pp-footer__brand img { height: 18px; width: auto; }
.pp-footer__brand p { margin-top: var(--pp-space-2); color: var(--pp-grey-300); max-width: 26rem; font-size: var(--pp-fs-small); }
.pp-footer__col h4 { margin: 0 0 1.2rem; font-size: var(--pp-fs-label); letter-spacing: var(--pp-ls-label); text-transform: uppercase; color: var(--pp-grey-500); font-weight: 500; }
.pp-footer__col li { margin-bottom: 0.65rem; font-size: var(--pp-fs-small); color: var(--pp-grey-100); }
.pp-footer__col a:hover { color: var(--pp-red); }
.pp-footer__bottom { margin-top: var(--pp-space-4); padding-top: var(--pp-space-2); border-top: 1px solid var(--pp-line); display: flex; justify-content: space-between; gap: var(--pp-space-2); flex-wrap: wrap; font-size: var(--pp-fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pp-grey-500); }
@media (max-width: 900px) { .pp-footer__grid { grid-template-columns: 1fr 1fr; } .pp-footer__brand { grid-column: 1 / -1; } }

/* --------------------------------------------------------------------------
   15. JS-STAGED INITIAL STATES (only when JS is present; GSAP overrides inline)
   -------------------------------------------------------------------------- */
html.pp-js:not(.pp-reduced) .pp-logo__letter { opacity: 0; }
html.pp-js:not(.pp-reduced) .pp-logo__mark { clip-path: inset(0 100% 0 0); }
html.pp-js:not(.pp-reduced) .pp-logo__tag { opacity: 0; }
html.pp-js:not(.pp-reduced) .pp-logo-intro__reveal { opacity: 0; }
html.pp-js:not(.pp-reduced) .pp-redline { transform: scaleX(0); }

/* --------------------------------------------------------------------------
   16. REDUCED MOTION — static, complete, readable
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pp-site *, .pp-site *::before, .pp-site *::after { animation: none !important; transition-duration: 0.01ms !important; }
}
html.pp-reduced .pp-logo-intro { height: auto; min-height: 100svh; }
html.pp-reduced .pp-logo-stage { position: relative; height: 60svh; }
html.pp-reduced .pp-logo-intro__reveal { opacity: 1; }
html.pp-reduced .pp-intro-statement { position: relative; left: auto; right: auto; bottom: auto; padding: 0 var(--pp-gutter) var(--pp-space-4); }
html.pp-reduced .pp-services { height: auto; }
html.pp-reduced .pp-service-scene { position: relative; height: 100svh; min-height: 560px; }
html.pp-reduced .pp-services__rail { display: none; }
html.pp-reduced .pp-work__track { display: block; height: auto; padding: var(--pp-space-5) 0; }
html.pp-reduced .pp-work__lead { width: auto; padding: 0 var(--pp-gutter) var(--pp-space-4); }
html.pp-reduced .pp-case { width: auto; max-width: none; padding: 0 var(--pp-gutter) var(--pp-space-4); }
html.pp-reduced .pp-case__meta { position: static; margin-top: 1rem; }