/* ============================================================
   SEZMOO — VIDEO & CONTENT STUDIO
   Cinematic editing-interface visual system
   ============================================================ */

:root {
  /* Warm cinematic blacks */
  --bg:        oklch(0.10 0.004 60);
  --bg-2:      oklch(0.135 0.005 60);
  --bg-3:      oklch(0.175 0.006 60);
  --line:      oklch(0.27 0.006 60);
  --line-soft: oklch(0.225 0.005 60 / 0.6);

  /* Warm off-whites */
  --fg:        oklch(0.96 0.006 80);
  --fg-dim:    oklch(0.74 0.008 75);
  --fg-faint:  oklch(0.55 0.008 70);

  /* Sezmoo signal yellow — REC, playhead, markers, accents */
  --rec:       #ffd200;
  --rec-glow:  rgb(255 210 0 / 0.45);
  --accent-hi: #ffd200;  /* reserved brand-yellow for big headline accents */
  --on-accent: #17140a;  /* dark text on yellow surfaces */

  --shell-pad: clamp(26px, 4vw, 56px);
  --maxw: 1640px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);

  --font-display: "Archivo Variable", "Archivo", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  cursor: auto;
}
@media (hover: none), (pointer: coarse) { body { cursor: auto; } }

::selection { background: var(--rec); color: var(--on-accent); }

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

main {
  position: relative;
  z-index: 1;
}

/* ---------- Global film texture + vignette ---------- */
.flow-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}

.grain, .vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 9000;
}
.grain {
  inset: -8%;
  opacity: 0.085; mix-blend-mode: screen;
  background-size: 260px 260px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: none;
}
@keyframes grainShift {
  0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-2%)} 60%{transform:translate(-2%,2%)}
  80%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)}
}
.vignette {
  background: radial-gradient(120% 120% at 50% 42%, transparent 52%, oklch(0.08 0.004 60 / 0.62) 100%);
  z-index: 8999;
}
@media (prefers-reduced-motion: reduce){ .grain{ animation:none; } }

/* ---------- Top scrubber (page progress) ---------- */
.scrubber {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 9500; background: var(--line-soft);
}
.scrubber__fill {
  height: 100%; width: 0%;
  background: var(--rec); box-shadow: 0 0 14px var(--rec-glow);
}
.scrubber__head {
  position: absolute; top: 50%; left: 0; width: 9px; height: 9px;
  border-radius: 50%; background: var(--fg);
  transform: translate(-50%,-50%); box-shadow: 0 0 0 3px var(--bg);
}
/* light: progress reads brand yellow with a black playhead (not monochrome grey) */
:root[data-theme="light"] .scrubber__fill { background: #ffd200; box-shadow: 0 0 14px rgb(255 210 0 / 0.5); }
:root[data-theme="light"] .scrubber__head { background: #17140a; box-shadow: 0 0 0 3px #ffd200; }

/* ---------- Fixed utility controls ---------- */
.floating-socials,
.scroll-top {
  position: fixed;
  z-index: 8900;
  font-family: var(--font-mono);
}
.floating-socials {
  right: clamp(14px, 1.6vw, 24px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 12px;
}
.floating-socials a,
.scroll-top {
  display: grid;
  place-items: center;
  /* scale the puck with viewport: ~46px on a MacBook/1920, up to 63px on 4K */
  width: clamp(44px, 0.71vw + 35px, 63px);
  height: clamp(44px, 0.71vw + 35px, 63px);
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: oklch(0.1 0.004 60 / .72);
  color: var(--fg-dim);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: clamp(12px, 0.13vw + 10px, 15px);
  letter-spacing: .08em;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.floating-socials a:hover,
.scroll-top:hover {
  color: var(--on-accent);
  border-color: var(--rec);
  background: var(--rec);
}
.floating-socials a:hover { transform: translateX(-3px); }
.scroll-top {
  right: clamp(14px, 1.6vw, 24px);
  bottom: clamp(14px, 1.6vw, 24px);
  font-size: clamp(20px, 0.29vw + 16px, 27px);
}
.scroll-top:hover { transform: translateY(-3px); }

/* Legacy cursor markup exists across static pages; keep it hidden globally. */
.cursor,
.cursor-dot {
  display: none;
}

/* ---------- Shell ---------- */
.shell { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--shell-pad); }

/* Mono technical label */
.eyebrow {
  font-family: var(--font-mono); font-size: clamp(10px, 0.8vw, 12px);
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-faint);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow .tick { width: 22px; height: 1px; background: var(--rec); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9400;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px var(--shell-pad);
  transition: background .5s var(--ease), backdrop-filter .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: oklch(0.155 0.004 60 / 0.72); -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid var(--line-soft);
}
.brand { display: flex; align-items: center; flex: 0 0 auto; margin-right: auto; }
.brand__logo { width: clamp(112px, 10vw, 154px); height: auto; }
@keyframes recPulse {
  0%,100% { box-shadow: 0 0 0 0 var(--rec-glow); opacity: 1; }
  50% { box-shadow: 0 0 0 6px transparent; opacity: 0.4; }
}
.nav__menu { display: flex; align-items: center; gap: clamp(18px, 2vw, 38px);
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.nav__right { display: flex; align-items: center; gap: 16px; }
.nav__menu a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-dim); position: relative; padding: 4px 0;
}
.nav__menu a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--rec); transition: width .4s var(--ease);
}
.nav__menu a:hover { color: var(--fg); }
.nav__menu a:hover::after { width: 100%; }
.nav__menu a[aria-current="page"] { color: var(--fg); }
.nav__menu a[aria-current="page"]::after { width: 100%; }
.nav__tc {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--fg-faint); display: flex; align-items: center; gap: 9px; order: 2;
}
.nav__tc .live { color: var(--rec); font-weight: 700; }
/* language switcher */
.nav__lang { display: inline-flex; align-items: center; border: 1px solid var(--line-soft);
  border-radius: 100px; overflow: hidden; order: 3; }
.nav__lang-opt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-faint); padding: 6px 12px; line-height: 1;
  transition: color .3s var(--ease), background .3s var(--ease); }
.nav__lang-opt:hover { color: var(--fg); }
.nav__lang-opt.is-active { color: var(--on-accent); background: var(--rec); }
/* theme switcher */
.nav__theme { display: inline-flex; align-items: center; border: 1px solid var(--line-soft);
  border-radius: 100px; overflow: hidden; order: 2; }
.nav__theme-opt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-faint); padding: 6px 11px; line-height: 1;
  background: transparent; border: 0; cursor: pointer;
  transition: color .3s var(--ease), background .3s var(--ease); }
.nav__theme-opt:hover { color: var(--fg); }
.nav__theme-opt.is-active { color: var(--on-accent); background: var(--rec); }
.nav__burger { display: none; order: 4; }
.nav__menu-logo, .nav__social { display: none; }

/* desktop: REC counter drops below the switchers so it stops crowding the menu row */
@media (min-width: 1101px) {
  .nav__right { position: relative; }
  .nav__tc {
    position: absolute;
    top: calc(100% + 7px);
    right: 2px;
    order: 0;
    font-size: 11px;
    white-space: nowrap;
    pointer-events: none;
  }
}

@media (max-width: 1100px) {
  .nav {
    gap: 14px;
  }
  .nav__menu {
    position: fixed;
    inset: 0;
    left: 0; right: 0; top: 0;
    max-height: none;
    height: 100svh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 84px clamp(24px, 9vw, 64px) calc(38px + 62px + env(safe-area-inset-bottom, 0px));
    background: oklch(0.115 0.004 60 / 0.985);
    border: 0;
    -webkit-backdrop-filter: blur(20px) saturate(1.1); backdrop-filter: blur(20px) saturate(1.1);
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transform: none;
    pointer-events: none;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
    z-index: 95;
  }
  .nav__menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  .nav__menu-logo {
    display: block;
    position: static;
    margin: 0 0 6px;
    padding: 0;
    border: 0;
  }
  .nav__menu-logo img { height: 24px; width: auto; display: block; }
  .nav__menu-logo + a { margin-top: auto; }
  .nav__social {
    display: flex;
    gap: 14px;
    position: static;
    margin-top: auto;
    padding: 26px 0 0;
    border: 0;
  }
  .nav__social a {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border: 1px solid var(--line-soft);
    border-radius: 50%;
    color: var(--fg-dim);
    padding: 0;
    transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease);
  }
  .nav__social a::after { display: none; }
  .nav__social a:hover, .nav__social a:active {
    color: #17140a; background: #ffd200; border-color: #ffd200; box-shadow: none;
  }
  .nav__social svg { width: 21px; height: 21px; }
  .nav__menu > a:not(.nav__menu-logo) {
    font-size: clamp(16px, 5.2vw, 24px);
    letter-spacing: 0.06em;
    padding: 13px 4px;
    text-align: left;
  }
  .nav__menu a {
    padding: 15px 12px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12px;
  }
  .nav__menu a:last-child { border-bottom: 0; }
  .nav__menu a::after { display: none; }
  /* clear press/selection feedback in the mobile menu (dark + light) */
  .nav__menu a {
    border-radius: 7px;
    box-shadow: inset 0 0 0 0 transparent;
    transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), padding-left .15s var(--ease);
  }
  .nav__menu a:hover,
  .nav__menu a:active,
  .nav__menu a:focus-visible,
  .nav__menu a[aria-current="page"] {
    background: rgb(255 210 0 / 0.13);
    box-shadow: inset 3px 0 0 0 #ffd200;
    color: var(--fg);
    padding-left: 18px;
    outline: none;
  }
  :root[data-theme="light"] .nav__menu a:hover,
  :root[data-theme="light"] .nav__menu a:active,
  :root[data-theme="light"] .nav__menu a:focus-visible,
  :root[data-theme="light"] .nav__menu a[aria-current="page"] {
    background: rgb(255 210 0 / 0.30);
    box-shadow: inset 3px 0 0 0 #ffd200;
    color: #17140a;
  }
  .nav__tc .label { display: none; }
  .nav__burger {
    position: relative;
    z-index: 97;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-content: center;
    place-items: center;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: oklch(0.12 0.004 60 / 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .nav__burger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--fg);
    transform-origin: center;
    transition: transform .25s var(--ease), opacity .2s var(--ease);
  }
  /* gap 5 + bar 2 → centres meet at ±7px for a clean X */
  .nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav__burger.is-open {
    background: oklch(0.12 0.004 60 / 0.9);
    border-color: #ffd200;
  }
  .nav__burger.is-open span { background: #ffd200; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  padding-bottom: clamp(40px, 7vh, 90px); padding-top: clamp(140px, 20vh, 200px); overflow: hidden; }

.hero__reel {
  position: absolute; inset: 0; z-index: 0;
}
.hero__reel .frame-media { position: absolute; inset: 0; }

/* Local background video — covers the frame, no UI */
.hero__video { position: absolute; inset: 0; overflow: hidden; z-index: 1;
  opacity: 0; transition: opacity 1.1s var(--ease); }
.hero__video.is-playing { opacity: 1; }
.hero__video video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
  filter: brightness(0.62) saturate(1.05);
}

/* cinematic placeholder media */
.frame-media {
  background:
    radial-gradient(80% 60% at 30% 25%, oklch(0.32 0.04 250 / 0.55), transparent 60%),
    radial-gradient(70% 70% at 80% 80%, oklch(0.30 0.05 30 / 0.45), transparent 60%),
    linear-gradient(125deg, var(--bg-2), oklch(0.13 0.01 270));
  overflow: hidden;
}
.frame-media::after { /* scanline sheen */
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, oklch(0 0 0 / 0.14) 3px 4px);
  mix-blend-mode: multiply; opacity: .5;
}
.hero__grad { position:absolute; inset:0; z-index:2; pointer-events:none;
  background: linear-gradient(180deg, transparent 0%, transparent 55%, oklch(0.1 0.004 60 / 0.4) 100%); }

.hero__corners { position: absolute; inset: clamp(18px,3.4vw,46px); z-index: 3; pointer-events: none; }
.hero__corners span { position: absolute; width: 34px; height: 34px; border: 2px solid oklch(0.96 0.006 80 / 0.55); }
.hero__corners span:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; }
.hero__corners span:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; }
.hero__corners span:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; }
.hero__corners span:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; }

.hero__hud { position:absolute; z-index:4; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--fg); }
.hero__hud.tl { position: absolute; top: clamp(80px,11vh,120px); left: var(--shell-pad); display:flex; align-items:center; gap:10px; }
.hero__hud.tr { position: absolute; top: clamp(80px,11vh,120px); right: var(--shell-pad); text-align:right; }
.hero__hud .recwrap{ display:flex; align-items:center; gap:8px; color: var(--rec); font-weight:700; }
.hero__hud .recwrap .d{ width:9px;height:9px;border-radius:50%;background:var(--rec); animation: recPulse 1.6s infinite; }

.hero__play {
  position:absolute; z-index:4; top:50%; left:50%; transform: translate(-50%,-50%);
  width: clamp(72px,9vw,118px); aspect-ratio:1; border-radius:50%;
  border:1px solid oklch(0.96 0.006 80 / 0.5); display:grid; place-items:center;
  background: oklch(0.96 0.006 80 / 0.06); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: floaty 5s ease-in-out infinite;
}
.hero__play::before{ content:""; border-left: 18px solid var(--fg); border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:5px; }
.hero__play::after{ content:""; position:absolute; inset:-1px; border-radius:50%; border:1px solid var(--rec); opacity:0; animation: ring 3s ease-out infinite; }
@keyframes ring{ 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.7);opacity:0} }
@keyframes floaty{ 0%,100%{transform:translate(-50%,-50%)} 50%{transform:translate(-50%,-56%)} }

.hero__content { position: relative; z-index: 5; width: 100%; }
.hero__label { margin-bottom: clamp(18px,3vh,30px); }
.hero h1 {
  font-weight: 780; font-stretch: 110%;
  font-size: clamp(34px, 6.2vw, 112px); line-height: 0.92; letter-spacing: -0.02em;
  text-wrap: balance; max-width: 15ch;
}
.hero h1 .clip { display:block; overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.hero h1 .clip > span { display:block; transform: translateY(110%); }
.hero.is-in h1 .clip > span { animation: lineUp 1s var(--ease) both; }
.hero.is-in h1 .clip:nth-child(2) > span { animation-delay: .12s; }
@keyframes lineUp { to { transform: translateY(0); } }
.hero h1 .accent { color: var(--rec); }
/* wspólna miara: szerokość = 15ch fontu H1, więc lead ma dokładnie szerokość nagłówka */
.hero__measure { font-family: inherit; font-weight: 780; font-stretch: 110%; letter-spacing: -0.02em;
  font-size: clamp(34px, 6.2vw, 112px); width: 15ch; max-width: 100%; }
.hero__measure > * { font-weight: initial; font-stretch: initial; letter-spacing: initial; }
.hero__measure > h1 { font-weight: 780; font-stretch: 110%; letter-spacing: -0.02em; max-width: 100%; }

.hero__sub { margin-top: clamp(28px,4vh,44px); max-width: 44ch; font-size: clamp(16px,1.4vw,21px);
  color: var(--fg-dim); line-height: 1.5; }
.hero__sub b { color: var(--fg); font-weight: 700; }
.hero__cta { display:flex; flex-wrap:wrap; gap: 14px; margin-top: clamp(26px,4vh,44px); }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 17px 28px; border: 1px solid var(--line); border-radius: 100px; color: var(--fg);
  overflow: hidden; transition: color .4s var(--ease), border-color .4s var(--ease);
  will-change: transform;
}
.btn .lbl { position: relative; z-index: 2; }
.btn::before { content:""; position:absolute; inset:0; z-index:1; background: var(--fg);
  transform: translateY(101%); transition: transform .5s var(--ease); }
.btn:hover { color: var(--bg); border-color: var(--fg); }
.btn:hover::before { transform: translateY(0); }
.btn--primary { background: var(--rec); border-color: var(--rec); color: var(--on-accent); }
.btn--primary::before { background: var(--fg); }
.btn--primary:hover { color: var(--bg); border-color: var(--fg); }
.btn .ico { position:relative; z-index:2; width:7px;height:7px;border-radius:50%; background: currentColor; }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section { position: relative; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding-top: clamp(48px,7vh,92px); flex-wrap: wrap; }
.sec-title { font-weight: 720; font-stretch:104%; font-size: clamp(34px,5.6vw,92px); line-height: 0.98;
  letter-spacing: -0.015em; text-wrap: balance; max-width: 17ch; margin-bottom: clamp(28px, 4vh, 56px); }
.sec-index { font-family: var(--font-mono); font-size: 12px; letter-spacing:.2em; color: var(--fg-faint); white-space: nowrap; }

/* reveal util */
.js .reveal { opacity: 0; transform: translateY(38px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal[data-d="1"]{ transition-delay:.08s } .js .reveal[data-d="2"]{ transition-delay:.16s }
.js .reveal[data-d="3"]{ transition-delay:.24s } .js .reveal[data-d="4"]{ transition-delay:.32s }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; } }

/* ============================================================
   WORK / PORTFOLIO
   ============================================================ */
.work { padding-bottom: clamp(40px,6vh,80px); position: relative; isolation: isolate; }

/* ---- Portfolio slider (arrows, batches of 5) ---- */
.work-slider {
  position: relative;
  margin-top: clamp(20px, 3vh, 34px);
}
.work-reel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 16px);
  height: clamp(430px, 56vh, 640px);
}
.js .work-reel .card {
  height: 100%; min-height: 0; margin: 0;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(46px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.js .work-reel .card.is-live { opacity: 1; transform: none; }
.js .work-reel .card.is-exit { opacity: 0; transform: translateY(-24px) scale(.985); transition-duration: .4s; }
.work-reel .card.is-hidden { display: none; }
.work-reel .card__media { flex: 1 1 auto; min-height: 0; height: auto; }
.work-reel .card__media img, .work-reel .card__media video { width: 100%; height: 100%; object-fit: cover; }

/* ---- Full-bleed reel cards: photo fills the card, caption sits on a soft scrim ---- */
.work-reel .card { position: relative; }
.work-reel .card__media { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
/* Override .card__video scale(1.04) — upscaling softens portfolio photos on retina */
.work-reel .card__video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: saturate(.92) brightness(.84);
  transform: none;
}
.work-reel .card:hover .card__video {
  filter: saturate(1.05) brightness(.96);
  transform: scale(1.03);
}
.work-reel .card__info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  align-items: flex-end; flex-wrap: nowrap;
  padding: clamp(38px,7vh,70px) clamp(15px,1.4vw,20px) clamp(15px,1.6vw,20px);
  background: linear-gradient(to top,
    oklch(0.06 0.004 60 / 0.9) 0%,
    oklch(0.06 0.004 60 / 0.55) 42%,
    transparent 100%);
  pointer-events: none;
}
.work-reel .card__client { color: #f6f2e8; text-shadow: 0 1px 14px oklch(0 0 0 / 0.5); }
.work-reel .card__cat { color: oklch(0.92 0.006 80 / 0.72); }
/* single readable tag over the scrim; drop the duplicated category chips */
.work-reel .card__cats { display: none; }
.work-reel .card__tag {
  pointer-events: auto; color: #f4f0e6;
  background: oklch(0.1 0.004 60 / 0.42); border-color: oklch(0.96 0.006 80 / 0.34);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.work-reel .card:hover .card__tag { color: var(--bg); background: var(--rec); border-color: var(--rec); }

/* nav buttons inside switcher */
.work-nav {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  border: 1px solid var(--line-soft); border-radius: 50%;
  background: oklch(0.16 0.005 70 / .6);
  color: var(--fg-dim); font-size: 20px; line-height: 1; cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.work-nav:hover { color: var(--fg); border-color: var(--rec); background: oklch(0.2 0.006 70 / .7); transform: scale(1.08); }
.work-nav:active { transform: scale(.96); }

/* hud: bottom switcher */
.work-slider__hud {
  display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(20px, 2.6vh, 30px);
  padding: 11px clamp(16px, 1.6vw, 22px);
  width: max-content; margin-left: auto; margin-right: auto;
  border: 1px solid var(--line-soft); border-radius: 100px;
  background: oklch(0.11 0.004 60 / .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg-faint);
}
.work-dots { display: flex; align-items: center; gap: 10px; }
.work-dots button {
  width: 34px; height: 6px; border: 0; padding: 0; cursor: pointer;
  background: oklch(0.4 0.006 70 / .55); border-radius: 3px;
  transition: background .35s var(--ease), width .35s var(--ease), box-shadow .35s var(--ease);
}
.work-dots button:hover { background: oklch(0.62 0.008 80 / .7); }
.work-dots button.is-on { background: var(--rec); width: 54px; box-shadow: 0 0 14px var(--rec-glow); }
.work-reel__count { color: var(--fg); letter-spacing: .16em; }
.work-reel__count b { color: var(--rec); font-weight: 700; }

@media (max-width: 1100px){
  .work-reel { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; height: auto; }
  .js .work-reel .card { opacity: 1; transform: none; height: auto; min-height: clamp(220px, 44vw, 300px); }
  .work-reel .card { grid-column: auto !important; grid-row: auto !important; }
  .work-reel .card.is-hidden { display: none; }
  .work-slider__hud { display: flex; }
}
@media (max-width: 560px){
  .work-slider__hud { gap: 12px; padding-left: 12px; padding-right: 12px; }
  .work-nav { width: 34px; height: 34px; }
  .work-dots { gap: 6px; }
  .work-dots button { width: 20px; }
  .work-dots button.is-on { width: 34px; }
  .work-reel__count { font-size: 12px; letter-spacing: .08em; white-space: nowrap; }
}
.work__filters { display:flex; flex-wrap:wrap; gap:8px; margin-top: 34px; }
.chip { font-family: var(--font-mono); font-size: 11px; letter-spacing:.1em; text-transform:uppercase;
  padding: 9px 16px; border:1px solid var(--line); border-radius:100px; color: var(--fg-dim);
  transition: all .35s var(--ease); cursor: pointer; }
.chip.is-on, .chip:hover { color: var(--bg); background: var(--fg); border-color: var(--fg); }

.work__grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px,1.6vw,26px); margin-top: clamp(34px,5vh,56px); }

.card { position: relative; border-radius: 4px; overflow:hidden; background: var(--bg-2);
  border: 1px solid var(--line-soft); }
.card.has-video { cursor: pointer; }
.card--lg { grid-column: span 7; }
.card--sm { grid-column: span 5; }
.card--half { grid-column: span 6; }
.card--third { grid-column: span 4; }
.card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.card--sm .card__media, .card--third .card__media { aspect-ratio: 4/3; }
.card__media .frame-media { position:absolute; inset:0; transition: transform 1.2s var(--ease), filter .6s var(--ease); transform: scale(1.04); filter: saturate(.6) brightness(.7); }
.card:hover .card__media .frame-media { transform: scale(1.12); filter: saturate(1) brightness(.92); }

/* playing scanline + progress when hovering */
.card__scan { position:absolute; inset:0; opacity:0; transition: opacity .4s var(--ease);
  background: repeating-linear-gradient(0deg, transparent 0 2px, oklch(0 0 0 / 0.22) 2px 3px); }
.card:hover .card__scan { opacity:.5; animation: scanMove 0.7s linear infinite; }
@keyframes scanMove { to { background-position: 0 6px; } }
.card__sweep { position:absolute; top:0; bottom:0; left:0; width:40%;
  background: linear-gradient(90deg, transparent, oklch(0.96 0.006 80 / 0.10), transparent);
  transform: translateX(-120%); }
.card:hover .card__sweep { animation: sweep 1.6s var(--ease) infinite; }
@keyframes sweep { to { transform: translateX(320%); } }

.card__tc { position:absolute; top:12px; left:12px; font-family: var(--font-mono); font-size:11px;
  letter-spacing:.06em; color: var(--fg); background: oklch(0.1 0.004 60 / 0.6); padding:4px 8px; border-radius:3px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display:flex; align-items:center; gap:7px; z-index:3; }
.card__tc .rd { width:7px;height:7px;border-radius:50%; background: var(--rec); }
.card:hover .card__tc .rd { animation: recPulse 1.2s infinite; }
.card__live { position:absolute; top:12px; right:12px; z-index:3; font-family: var(--font-mono); font-size:10px;
  letter-spacing:.1em; color: var(--fg-faint); opacity:0; transition: opacity .4s var(--ease); }
.card:hover .card__live { opacity:1; color: var(--rec); }
/* "Zobacz realizację" hint (home reel + case-study nav) */
.card__hint { position:absolute; left:12px; bottom:14px; z-index:4; font-family: var(--font-mono);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color: var(--on-accent);
  background: var(--rec); padding:6px 11px; border-radius:3px; opacity:0; transform: translateY(5px);
  transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events:none; }
.card:hover .card__hint { opacity:1; transform:none; }
.card__prev { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3; pointer-events:none; }

.card__bar { position:absolute; left:0; right:0; bottom:0; height:3px; background: oklch(0.1 0.004 60 / 0.5); z-index:3; }
.card__bar i {
  display:block;
  height:100%;
  width: calc(var(--video-progress, 0) * 100%);
  background: var(--rec);
  box-shadow:0 0 10px var(--rec-glow);
}

.card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: clamp(74px, 7vw, 104px);
  aspect-ratio: 1;
  border: 1px solid var(--rec);
  border-radius: 50%;
  background: rgb(255 210 0 / 0.16);
  color: var(--rec);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.86);
  transition: opacity .28s var(--ease), transform .28s var(--ease), background .28s var(--ease);
  pointer-events: none;
}
.card:hover .card__play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.card.is-playing .card__play {
  opacity: .78;
  background: rgb(255 210 0 / 0.10);
}

.card__info { display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding: 18px clamp(14px,1.4vw,20px) clamp(16px,1.6vw,22px); }
.card__client { font-weight: 800; font-stretch:108%; font-size: clamp(20px,2vw,32px); line-height:1; letter-spacing:-.01em; }
.card__cat { font-family: var(--font-mono); font-size: 11px; letter-spacing:.08em; color: var(--fg-faint);
  margin-top: 9px; text-transform: uppercase; }
.card__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing:.08em; color: var(--fg-dim);
  border:1px solid var(--line); padding:5px 11px; border-radius:100px; white-space:nowrap;
  transition: all .35s var(--ease); }
.card:hover .card__tag { color: var(--bg); background: var(--rec); border-color: var(--rec); }
.card__info:has(.card__cats) { flex-wrap: wrap; }
.card__cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; width: 100%; }
.card__cchip { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-faint); border: 1px solid var(--line-soft); padding: 4px 9px; border-radius: 100px; white-space: nowrap; }
:root[data-theme="light"] .card__cchip { color: var(--fg-dim); border-color: var(--line); }
.card__ph-label { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); z-index:2;
  font-family: var(--font-mono); font-size:10px; letter-spacing:.2em; color: oklch(0.96 0.006 80 / 0.35);
  text-transform: uppercase; white-space:nowrap; }

/* real video thumbnail — plays on hover */
.card__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  filter: saturate(.62) brightness(.72); transform: scale(1.04);
  transition: filter .6s var(--ease), transform 1.2s var(--ease); }
.card:hover .card__video { filter: saturate(1) brightness(.95); transform: scale(1.09); }

/* vertical clip inside a wide card: blurred cover fill + sharp contained clip */
.card__media--fit .card__video { object-fit: contain; z-index:2; transform: none;
  filter: saturate(1) brightness(.92); }
.card:hover .card__media--fit .card__video { transform: none; }
.card__video-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  filter: blur(38px) saturate(1.15) brightness(.42); transform: scale(1.3);
  transition: filter .6s var(--ease); }
.card:hover .card__video-bg { filter: blur(38px) saturate(1.3) brightness(.5); }

/* studio BTS video — portrait clip in portrait frame, autoplay */
.studio__media .studio__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  filter: saturate(.92) brightness(.82); }

@media (max-width: 920px) {
  .card--lg,.card--sm,.card--half,.card--third { grid-column: span 12; }
  .card__media, .card--sm .card__media, .card--third .card__media { aspect-ratio: 16/10; }
}

/* ============================================================
   SERVICES / WHAT WE DO
   ============================================================ */
.services {
  position: relative;
  padding-bottom: clamp(40px,6vh,80px);
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;
}
/* Neutral editing-monitor grid behind the scene (adds depth, no yellow) */
.services::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(255 255 255 / .013) 1px, transparent 1px) 0 0 / 92px 92px,
    linear-gradient(0deg, rgb(255 255 255 / .013) 1px, transparent 1px) 0 0 / 92px 92px,
    linear-gradient(90deg, rgb(255 255 255 / .024) 1px, transparent 1px) 0 0 / 460px 460px,
    linear-gradient(0deg, rgb(255 255 255 / .024) 1px, transparent 1px) 0 0 / 460px 460px,
    radial-gradient(66% 52% at 50% 30%, rgb(0 0 0 / .22), transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 13%, #000 84%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 13%, #000 84%, transparent);
}
.services > .services-scene,
.services > .svc-grid {
  position: relative;
  z-index: 2;
}
.content-pack {
  --pack-progress: 0;
  --pack-open: 0;
  --pack-split: 0;
  --pack-glow: 0;
  --pack-exit: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
  gap: clamp(18px, 2vw, 34px);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  overflow: hidden;
  background:
    radial-gradient(72% 64% at calc(12% + var(--pack-progress) * 46%) 12%, rgb(255 210 0 / .22), transparent 60%),
    radial-gradient(54% 60% at calc(88% - var(--pack-progress) * 30%) 72%, rgb(45 205 255 / .13), transparent 62%),
    linear-gradient(135deg, var(--bg-2), var(--bg));
  box-shadow:
    0 0 0 1px rgb(255 210 0 / calc(.03 + var(--pack-open) * .08)),
    0 40px 120px rgb(255 210 0 / calc(.04 + var(--pack-split) * .12)),
    0 28px 90px rgb(47 211 255 / calc(.02 + var(--pack-progress) * .08));
}
.services-scene {
  --pack-exit: 0;
  position: relative;
  min-height: clamp(1700px, 300vh, 2800px);
}
.services-scene__sticky {
  position: sticky;
  top: clamp(220px, 34vh, 300px);
  opacity: calc(1 - var(--pack-exit, 0) * .92);
  transform:
    translateY(calc(var(--pack-exit, 0) * -54px))
    scale(calc(1 - var(--pack-exit, 0) * .025));
  transform-origin: center top;
}
.services-scene .content-pack {
  margin-top: clamp(34px,5vh,56px);
}
.content-pack--scroll {
  position: relative;
}
.content-pack__screen {
  position: relative;
  min-height: clamp(420px, 46vw, 620px);
  padding: clamp(20px, 2.6vw, 38px);
  overflow: hidden;
  border-right: 1px solid var(--line-soft);
  background:
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(0deg, var(--line-soft) 1px, transparent 1px) 0 0 / 64px 64px,
    oklch(0.12 0.006 60);
}
.content-pack__screen::before {
  content: "OUTPUT TIMELINE / MULTI FORMAT EXPORT";
  position: absolute;
  left: clamp(20px, 2.6vw, 38px);
  bottom: clamp(20px, 2vw, 30px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--fg-faint);
  z-index: 3;
}
.content-pack__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, oklch(0 0 0 / .18) 3px 4px);
  pointer-events: none;
  opacity: .55;
  z-index: 5;
}
.pack-stage {
  position: absolute;
  top: clamp(18px, 2vw, 28px);
  left: clamp(20px, 2.6vw, 38px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.pack-stage::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rec);
  box-shadow: 0 0 calc(6px + var(--pack-glow) * 18px) var(--rec-glow);
}
.pack-stage strong {
  color: var(--rec);
  font-weight: 700;
}
.pack-guides {
  position: absolute;
  inset: clamp(42px, 5vw, 74px) clamp(18px, 2.4vw, 34px);
  z-index: 2;
  border: 1px solid rgb(255 255 255 / calc(.07 + var(--pack-open) * .18));
  opacity: calc(.18 + var(--pack-open) * .62);
  transform: scale(calc(.92 + var(--pack-open) * .08));
  pointer-events: none;
}
.pack-guides span {
  position: absolute;
  width: 34px;
  height: 34px;
  border-color: rgb(255 210 0 / .48);
  border-style: solid;
}
.pack-guides span:nth-child(1) { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.pack-guides span:nth-child(2) { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.pack-guides span:nth-child(3) { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.pack-guides span:nth-child(4) { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.pack-output {
  position: absolute;
  left: 50%;
  bottom: clamp(54px, 5vw, 74px);
  z-index: 6;
  display: grid;
  grid-template-columns: auto minmax(36px, 8vw) auto minmax(36px, 8vw) auto;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--fg-faint);
  opacity: calc(var(--pack-split) * .98);
  padding: 7px 10px;
  border: 1px solid rgb(255 210 0 / .12);
  background: oklch(0.08 0.004 60 / .72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pack-output i {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, var(--rec), transparent);
  transform-origin: left center;
  transform: scaleX(var(--pack-split));
}
.pack-shutter {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.pack-shutter span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  background:
    linear-gradient(90deg, transparent, rgb(255 210 0 / .08), transparent),
    oklch(0.05 0.004 60);
  transition: transform .12s linear;
}
.pack-shutter span:first-child {
  top: 0;
  transform: translateY(calc(var(--pack-open) * -100%));
  border-bottom: 1px solid rgb(255 210 0 / .26);
}
.pack-shutter span:last-child {
  bottom: 0;
  transform: translateY(calc(var(--pack-open) * 100%));
  border-top: 1px solid rgb(255 210 0 / .26);
}
.pack-frame {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
  border: 1px solid rgb(255 210 0 / .34);
  background:
    radial-gradient(70% 70% at 18% 18%, rgb(255 210 0 / .18), transparent 62%),
    oklch(0.19 0.006 60 / .82);
  box-shadow: 0 24px 70px oklch(0 0 0 / .26);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: calc(.18 + var(--frame-in, 0) * .82);
  transform:
    translate(
      calc(var(--fx, 0px) * (1 - var(--frame-in, 0))),
      calc(var(--fy, 18px) * (1 - var(--frame-in, 0)))
    )
    scale(calc(.86 + var(--frame-in, 0) * .14));
  animation: packFloat 7s var(--ease) infinite;
  z-index: 1;
}
.pack-frame span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--rec);
}
.pack-frame strong {
  font-size: clamp(18px, 2vw, 28px);
  line-height: .96;
  letter-spacing: -.02em;
  max-width: 8ch;
}
.pack-frame--wide { left: 8%; top: 14%; width: 48%; aspect-ratio: 16/9; --frame-in: var(--pack-open); z-index: 2; }
.pack-frame--vertical { right: 12%; top: 15%; width: 18%; aspect-ratio: 9/16; animation-delay: -.8s; --fx: -54px; --fy: 28px; z-index: 4; }
.pack-frame--square { left: 20%; bottom: 26%; width: 24%; aspect-ratio: 1; animation-delay: -1.6s; --fx: 58px; --fy: -30px; z-index: 2; }
.pack-frame--banner { right: 7%; bottom: 20%; width: 39%; aspect-ratio: 5/2; animation-delay: -2.4s; --fx: -72px; --fy: -36px; z-index: 3; }
@keyframes packFloat {
  0%,100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}
.pack-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(14% + var(--pack-progress) * 72%);
  z-index: 2;
  width: 2px;
  background: var(--rec);
  box-shadow: 0 0 16px var(--rec-glow);
  opacity: calc(.24 + var(--pack-open) * .76);
}
.pack-playhead::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 11px solid var(--rec);
}
.pack-playhead span {
  position: absolute;
  top: 42px;
  left: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--rec);
  white-space: nowrap;
}
.content-pack__copy {
  padding: clamp(28px, 4vw, 56px);
  align-self: center;
  opacity: 1;
  transform: translateY(calc((1 - var(--pack-split)) * 8px));
}
.content-pack__copy h3 {
  margin-top: 24px;
  font-weight: 760;
  font-stretch: 108%;
  font-size: clamp(32px, 3.9vw, 64px);
  line-height: .96;
  letter-spacing: -.018em;
  color: var(--fg);
}
.content-pack__copy p {
  margin-top: 22px;
  color: oklch(0.82 0.006 75);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.62;
  max-width: 42ch;
}
.content-pack__copy .btn { margin-top: 30px; }
.svc-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: clamp(20px,4vh,48px);
  background: var(--line-soft); border:1px solid var(--line-soft); border-radius:4px; overflow:hidden; }
.svc {
  position: relative; background: var(--bg); padding: clamp(26px,2.6vw,40px); min-height: clamp(200px,22vh,280px);
  display:flex; flex-direction:column; justify-content:space-between; overflow:hidden;
  transition: background .5s var(--ease);
}
.svc::before { content:""; position:absolute; inset:0; background: var(--bg-2); transform: translateY(100%);
  transition: transform .55s var(--ease); z-index:0; }
.svc:hover::before { transform: translateY(0); }
.svc > * { position: relative; z-index: 1; }
.svc__no { font-family: var(--font-mono); font-size: 11px; letter-spacing:.18em; color: var(--fg-faint); }
.svc__body { }
.svc__title { font-weight: 800; font-stretch:108%; font-size: clamp(22px,2vw,30px); line-height:1.02; letter-spacing:-.01em;
  padding-right: 48px;
  transition: transform .5s var(--ease); }
.svc:hover .svc__title { transform: none; }
.svc__title .accent { color: var(--rec); }
.svc__desc { color: var(--fg-dim); margin-top: 14px; font-size: clamp(14px,1.1vw,16px); max-width: 30ch; }
.svc--pillar { min-height: clamp(300px, 34vh, 420px); }
.svc--pillar .svc__body { display: flex; flex-direction: column; min-height: 100%; }
.svc__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 30px;
}
.svc__chips span {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-dim);
  border: 1px solid rgb(255 255 255 / .13);
  border-radius: 999px;
  background: rgb(255 255 255 / .025);
  padding: 7px 11px;
  transition: color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.svc:hover .svc__chips span {
  color: var(--rec);
  border-color: rgb(255 210 0 / .46);
  background: rgb(255 210 0 / .075);
  transform: translateY(-2px);
}
.svc__arrow { position:absolute; top: clamp(26px,2.6vw,40px); right: clamp(26px,2.6vw,40px); z-index:1;
  width:34px;height:34px; padding:8px; border:1px solid rgb(255 210 0 / .18); border-radius:999px;
  opacity:.42; transform: translate(-4px,4px); transition: all .5s var(--ease); color: var(--rec); background: rgb(255 210 0 / .04); }
.svc:hover .svc__arrow,
.svc:focus-visible .svc__arrow { opacity:1; transform: none; border-color: #ffd200; background: #ffd200; color: #17140a; }

@media (max-width: 1100px){
  .services-bg { inset-inline: 0; }
  .services-bg__beam { width: 110%; left: -5%; }
  .content-pack { grid-template-columns: 1fr; }
  .services-scene { min-height: auto; }
  .services-scene__sticky { position: relative; top: auto; opacity: 1; transform: none; }
  /* Kill the floating animated screen on touch/narrow — it caused horizontal drift. */
  .content-pack__screen { display: none; }
  .pack-mobile { display: block; }
  .content-pack__copy { padding: clamp(28px,7vw,40px) clamp(20px,6vw,32px) clamp(30px,7vw,40px); }
  .content-pack__copy .btn { margin-bottom: 6px; }
  .content-pack { margin-bottom: clamp(28px,6vh,56px); }
  .services { padding-bottom: clamp(40px,7vh,84px); }
  .svc-grid{ grid-template-columns: repeat(2,1fr); }
  .svc-grid > .svc:last-child:nth-child(odd){ grid-column: 1 / -1; }
}
/* Short desktop viewports (e.g. MacBook Air): compact the pinned scene so it fits */
@media (min-width: 1101px) and (max-height: 960px){
  .services-scene { min-height: clamp(1400px, 260vh, 2400px); }
  .services-scene .sec-title { font-size: clamp(30px, 3.4vw, 58px); line-height: .96; margin-bottom: clamp(14px, 2vh, 24px); }
  .services-scene .content-pack { margin-top: clamp(18px, 2.4vh, 30px); }
  .content-pack__screen { min-height: min(clamp(360px, 40vw, 560px), 52vh); }
  .content-pack__copy h3 { font-size: clamp(30px, 3.4vw, 52px); }
}
@media (min-width: 1101px) and (max-height: 780px){
  .content-pack__screen { min-height: min(clamp(320px, 36vw, 480px), 46vh); }
  .services-scene .sec-title { font-size: clamp(28px, 3vw, 48px); }
}
@media (max-width: 640px){
  .svc-grid{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){ .pack-frame{ animation:none; } }

/* Content-system — clean stacked format list for mobile/tablet */
@media (min-width: 1101px){ .pack-mobile { display: none; } }
.pack-mobile__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-faint); padding-bottom: 14px; border-bottom: 1px solid var(--line-soft);
}
.pack-mobile__stage { display: inline-flex; align-items: center; gap: 8px; }
.pack-mobile__stage i { width: 8px; height: 8px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 10px var(--rec-glow); }
.pack-mobile__exp { color: var(--rec); }
/* Content-system — scroll-driven format timeline (mobile), matches PROCESS */
.pack-seq { position: relative; margin: 18px 0 0; padding-left: 30px; }
.pack-seq::before { content:""; position:absolute; left:9px; top:6px; bottom:6px; width:1px; background: var(--line-soft); }
.pack-seq__fill { position:absolute; left:9px; top:6px; width:1px; height:0; background: var(--rec); box-shadow:0 0 10px var(--rec-glow); transition: height .35s ease; }
.pseq { position: relative; padding: 15px 16px 17px; border:1px solid var(--line-soft); border-radius:4px; background: var(--bg-2); overflow:hidden; transition: border-color .35s, background .35s; }
.pseq + .pseq { margin-top: 10px; }
.pseq__node { position:absolute; left:-30px; top:15px; width:19px; height:19px; border-radius:50%; display:grid; place-items:center; z-index:3; font-family:var(--font-mono); font-size:9px; color: var(--fg-faint); background: var(--bg); border:1px solid var(--line-soft); transition: color .35s, border-color .35s; }
.pseq__top { display:flex; align-items:center; gap:12px; }
.pseq__badge { font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color: var(--fg-faint); min-width:58px; transition: color .35s; }
.pseq__name { flex:1; min-width:0; margin:0; font-weight:800; font-stretch:106%; font-size: clamp(19px,5.4vw,24px); line-height:1; letter-spacing:-.01em; }
.pseq__glyph { flex:none; border:1px solid var(--line-soft); border-radius:2px; background: oklch(0.24 0.03 100 / .3); transition: border-color .35s, background .35s; }
.pseq__glyph--wide{ width:44px; height:25px; }
.pseq__glyph--vertical{ width:18px; height:32px; }
.pseq__glyph--square{ width:30px; height:30px; }
.pseq__glyph--banner{ width:44px; height:18px; }
.pseq__desc { margin: 9px 0 0; color: var(--fg-faint); font-size: 14px; line-height: 1.5; max-width: 44ch; text-wrap: pretty; }
.pseq__bar { position:absolute; left:0; bottom:0; height:2px; width:0; background: var(--rec); transition: width .5s ease; }
.pseq.is-active { border-color: var(--rec); background: oklch(0.26 0.03 102 / .3); }
.pseq.is-active .pseq__node, .pseq.is-done .pseq__node { color: var(--rec); border-color: var(--rec); }
.pseq.is-active .pseq__badge { color: var(--rec); }
.pseq.is-active .pseq__glyph { border-color: rgb(255 210 0 / .55); background: oklch(0.3 0.05 100 / .4); }
.pseq.is-done .pseq__bar { width: 100%; }
.pack-mobile__flow {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint);
}
.pack-mobile__flow i { flex: 1; height: 1px; background: var(--line-soft); }

/* ============================================================
   STUDIO
   ============================================================ */
.studio { padding-bottom: clamp(40px,6vh,90px); }
.studio__grid { display:grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(28px,4vw,72px); margin-top: clamp(40px,6vh,70px); align-items:start; }
.studio__sticky { position: sticky; top: 88px; }
.studio__media { position: relative; aspect-ratio: 3/4; border-radius:4px; overflow:hidden; border:1px solid var(--line-soft); }
.studio__media .frame-media { position:absolute; inset:0; }
.studio__media .ovl { position:absolute; inset:0; z-index:2; }
.studio__media .corners span{ position:absolute; width:26px;height:26px;border:2px solid oklch(0.96 0.006 80 / .5); }
.studio__media .corners span:nth-child(1){top:14px;left:14px;border-right:0;border-bottom:0}
.studio__media .corners span:nth-child(2){top:14px;right:14px;border-left:0;border-bottom:0}
.studio__media .corners span:nth-child(3){bottom:14px;left:14px;border-right:0;border-top:0}
.studio__media .corners span:nth-child(4){bottom:14px;right:14px;border-left:0;border-top:0}
.studio__media .tc { position:absolute; bottom:16px; left:16px; z-index:3; font-family:var(--font-mono); font-size:11px; color:var(--fg);
  background: oklch(0.1 0.004 60 / .55); padding:4px 8px; border-radius:3px; display:flex; gap:7px; align-items:center; }
.studio__media .tc .d{ width:7px;height:7px;border-radius:50%;background:var(--rec); animation:recPulse 1.5s infinite; }

.studio__title { font-weight:760; font-stretch:108%; font-size: clamp(32px,4.8vw,76px); line-height:1.02; letter-spacing:-.018em; text-wrap:balance; padding-bottom:.06em; }
.studio__title .accent{ color: var(--rec); }
.studio__copy { color: var(--fg-dim); font-size: clamp(16.5px,1.3vw,20px); line-height:1.62; margin-top: 18px; max-width: none; text-wrap: pretty; }
.studio__copy:first-of-type { margin-top: 34px; }
.studio__copy--lead { color: var(--fg); font-weight: 640; font-size: clamp(18px,1.55vw,23px); line-height:1.4; max-width: none; }
.studio__points { margin-top: clamp(34px,5vh,56px); display:flex; flex-direction:column; }
.spt { display:flex; align-items:center; gap:18px; padding: 18px 0; border-top:1px solid var(--line-soft); }
.spt:last-child { border-bottom:1px solid var(--line-soft); }
.spt__no { font-family:var(--font-mono); font-size:12px; color: var(--rec); letter-spacing:.1em; }
.spt__txt { font-weight:800; font-stretch:104%; font-size: clamp(16px,1.5vw,24px); line-height:1.1; letter-spacing:-.01em;
  white-space: nowrap; transition: transform .5s var(--ease); }
@media (max-width: 560px){ .spt__txt { white-space: normal; font-size: 16px; } }
.spt:hover .spt__txt { transform: translateX(10px); }

@media (max-width: 880px){
  .studio__grid{ grid-template-columns: 1fr; }
  .studio__sticky{ position: static; }
  .studio__media{ aspect-ratio: 16/11; }
}

/* ============================================================
   TEAM
   ============================================================ */
.team {
  --team-progress: 0;
  padding-bottom: clamp(42px,6vh,76px);
  overflow: hidden;
}
.team__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(8px, .85vw, 14px);
  margin-top: clamp(26px,4vh,42px);
  perspective: 1200px;
}
.team-card {
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transform: translateY(calc((1 - var(--team-progress)) * var(--team-drift, 22px)));
  transition: transform .45s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.team-card:nth-child(1) { --team-drift: 18px; }
.team-card:nth-child(2) { --team-drift: 26px; }
.team-card:nth-child(3) { --team-drift: 20px; }
.team-card:nth-child(4) { --team-drift: 28px; }
.team-card:nth-child(5) { --team-drift: 22px; }
.team-card:nth-child(6) { --team-drift: 26px; }
.team-card:hover {
  transform: translateY(-6px);
  border-color: rgb(255 210 0 / .48);
  background: var(--bg-3);
}
.team-card > * { position: relative; z-index: 1; }
.team-card__photo {
  aspect-ratio: 4/4.45;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, var(--bg-3), var(--bg));
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}
.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.86) contrast(1.04) brightness(.84);
}
.team-card__photo span {
  display: grid;
  place-items: center;
  width: auto;
  color: var(--rec);
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(40px,4.4vw,68px);
  letter-spacing: -.03em;
  line-height: 1;
  opacity: .9;
}
.team-card__body {
  padding: clamp(14px,1.35vw,20px);
}
.team-card__no,
.blog-post__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--rec);
}
.team-card__name {
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(18px,1.35vw,25px);
  line-height: .98;
  letter-spacing: -.02em;
  margin-top: 14px;
}
.team-card__role {
  color: var(--fg-dim);
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.45;
}
/* hover-swap portraits */
.team-card__photo { position: relative; }
.team-card__photo .ph {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.team-card__photo .ph--hover { opacity: 0; transition: opacity .5s var(--ease); }
.team-card:hover .ph--hover { opacity: 1; }

/* ---- rhythm & klimat: accent line, graphic index ---- */
/* top accent line grows on hover */
.team-card__photo::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--rec); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease); z-index: 3;
}
.team-card:hover .team-card__photo::after { transform: scaleX(1); }
/* index number as a graphic marker with accent tick */
.team-card__no {
  display: inline-flex; align-items: center; gap: 9px;
}
.team-card__no::before {
  content: ""; width: 16px; height: 1px; background: var(--rec); display: inline-block;
  transition: width .4s var(--ease);
}
.team-card:hover .team-card__no::before { width: 30px; }
/* discipline label appears under role on hover */
.team-card__role { transition: color .35s var(--ease); }
.team-card:hover .team-card__role { color: var(--fg); }
.team__rail {
  display: grid;
  grid-template-columns: auto minmax(36px, 1fr) auto minmax(36px, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: clamp(16px,2.6vh,26px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.team__rail i {
  height: 1px;
  background: linear-gradient(90deg, rgb(255 210 0 / .42), transparent);
  transform-origin: left center;
  transform: scaleX(calc(.24 + var(--team-progress) * .76));
}
@media (max-width: 1280px){ .team__grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px){ .team__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){
  .team__rail { grid-template-columns: 1fr; gap: 8px; }
  .team__rail i { display: none; }
}
@media (max-width: 360px){
  .team__grid{ grid-template-columns: 1fr; }
  .team-card__photo { aspect-ratio: 16/10; }
}
@media (prefers-reduced-motion: reduce){
  .team-card { transform: none; }
  .team__rail i { transform: none; }
}

/* ============================================================
   PROCESS — editing timeline
   ============================================================ */
.process { padding-bottom: clamp(50px,8vh,110px); }
.tl { margin-top: clamp(44px,7vh,80px); position: relative; }
.tl__ruler { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.12em; color: var(--fg-faint); padding-bottom:10px; border-bottom:1px solid var(--line-soft); }
.tl__track { position: relative; padding-top: 30px; }
.tl__playhead { position:absolute; top:0; bottom:0; left:0; width:2px; background: var(--rec);
  box-shadow:0 0 14px var(--rec-glow); z-index:5; }
.tl__playhead::before { content:""; position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  border-left:7px solid transparent; border-right:7px solid transparent; border-top:9px solid var(--rec); }
.tl__playhead .ptc { position:absolute; top:-30px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--font-mono); font-size:10px; color: var(--rec); background: oklch(0.1 0.004 60 / .7); padding:2px 6px; border-radius:3px; }

.tl__clips { display:grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.tl__clips .clip { position: relative; border-radius:4px; overflow:hidden; border:1px solid var(--line-soft);
  background: var(--bg-2); min-height: clamp(150px,18vh,210px); padding: 18px;
  display:flex; flex-direction:column; justify-content:space-between; }
.clip__strip { position:absolute; top:0; left:0; right:0; height: 7px;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px); opacity:.6; }
.clip__no { font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color: var(--fg-faint); margin-top:6px; }
.clip__name { font-weight:800; font-stretch:106%; font-size: clamp(17px,1.5vw,24px); line-height:1; letter-spacing:-.01em; }
.clip__dur { font-family:var(--font-mono); font-size:10px; color: var(--fg-faint); letter-spacing:.06em; }
.clip__fill { position:absolute; left:0; bottom:0; height:3px; width:0; background: var(--rec); }
.tl__clips .clip.is-active { border-color: var(--rec); background: oklch(0.26 0.03 102 / 0.32); }
.tl__clips .clip.is-active .clip__name { color: var(--fg); }
.tl__clips .clip.is-done .clip__fill { width:100%; }

@media (max-width: 880px){
  .tl__clips{ grid-template-columns: 1fr; gap: 6px; }
  .tl__playhead{ display:none; }
  .tl__clips .clip{ min-height: auto; flex-direction:row; align-items:center; justify-content:space-between; }
}

/* ============================================================
   CLIENTS
   ============================================================ */
.clients { padding-bottom: clamp(50px,8vh,100px); }
.client-grid { display:grid; grid-template-columns: repeat(4,1fr); margin-top: clamp(40px,6vh,64px);
  border:1px solid var(--line-soft); border-radius:4px; overflow:hidden; }
.client { display:grid; place-items:center; min-height: clamp(110px,15vh,170px); padding: 24px;
  border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); position:relative; overflow:hidden; }
.client__name { font-weight:800; font-stretch:104%; font-size: clamp(18px,1.7vw,26px); letter-spacing:.02em;
  color: var(--fg-faint); transition: color .4s var(--ease), transform .4s var(--ease); }
.client:hover .client__name { color: var(--fg); transform: scale(1.04); }
.client::after { content:""; position:absolute; inset:0; background: var(--bg-2); transform: scaleY(0); transform-origin:bottom;
  transition: transform .45s var(--ease); z-index:-1; }
.client:hover::after { transform: scaleY(1); }
.client:nth-child(4n){ border-right:0; }
@media (max-width: 820px){ .client-grid{ grid-template-columns: repeat(2,1fr); } .client:nth-child(4n){border-right:1px solid var(--line-soft)} .client:nth-child(2n){border-right:0} }

/* ============================================================
   BLOG
   ============================================================ */
.blog { padding-bottom: clamp(50px,8vh,110px); }
.blog--page { padding-top: clamp(130px,18vh,190px); min-height: 70svh; }
.blog-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .55fr);
  gap: clamp(28px,5vw,86px);
  align-items: end;
}
.blog-hero__title,
.article__title {
  font-weight: 800;
  font-stretch: 116%;
  font-size: clamp(46px,8.6vw,150px);
  line-height: .88;
  letter-spacing: -.02em;
  text-wrap: balance;
  max-width: 12ch;
  margin-top: clamp(20px,3vh,34px);
}
.blog-hero__copy {
  color: var(--fg-dim);
  font-size: clamp(17px,1.5vw,23px);
  line-height: 1.45;
}
.blog-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(34px,5vh,58px);
}
.blog-topics a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 14px;
}
.blog-topics a.is-active,
.blog-topics a:hover {
  color: var(--on-accent);
  background: var(--rec);
  border-color: var(--rec);
}
.blog-feature {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 1px;
  margin-top: clamp(28px,4vh,48px);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  overflow: hidden;
  background: var(--line-soft);
}
.blog-feature__media {
  position: relative;
  min-height: clamp(300px,42vw,560px);
  overflow: hidden;
}
.blog-feature__media .frame-media {
  position: absolute;
  inset: 0;
  filter: saturate(.75) brightness(.76);
}
.blog-feature__media span {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--rec);
  background: oklch(0.1 0.004 60 / .64);
  padding: 5px 9px;
  border-radius: 3px;
}
.blog-feature__body {
  background: var(--bg-2);
  padding: clamp(28px,4vw,62px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.blog-feature h2 {
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(34px,4.7vw,76px);
  line-height: .94;
  letter-spacing: -.02em;
  margin-top: clamp(28px,5vh,70px);
}
.blog-feature h2 a.blog-post__title,
.blog-post h3 a.blog-post__title {
  color: inherit;
  text-decoration: none;
  transition: color .25s var(--ease);
}
.blog-feature h2 a.blog-post__title:hover,
.blog-post h3 a.blog-post__title:hover {
  color: var(--rec);
}
.blog-feature p {
  color: var(--fg-dim);
  font-size: clamp(16px,1.25vw,20px);
  line-height: 1.5;
  max-width: 48ch;
  margin-top: 22px;
}
.blog-feature__cta,
.article__cta a {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-accent);
  background: var(--rec);
  padding: 13px 22px;
  border-radius: 999px;
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.blog-feature__cta:hover,
.article__cta a:hover {
  transform: translateY(-2px);
}
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 300px);
  gap: clamp(24px,3vw,46px);
  align-items: start;
  margin-top: clamp(28px,4vh,50px);
}
.blog__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px,1.6vw,26px);
}
.blog-post {
  min-height: 340px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--bg-2);
  padding: clamp(22px,2.4vw,34px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.blog-post:hover {
  transform: translateY(-6px);
  border-color: rgb(255 210 0 / .48);
  background: var(--bg-3);
}
.blog-post h3 {
  font-weight: 800;
  font-stretch: 108%;
  font-size: clamp(25px,2.5vw,42px);
  line-height: 1;
  letter-spacing: -.01em;
  margin-top: 34px;
}
.blog-post p {
  color: var(--fg-dim);
  margin-top: 18px;
  max-width: 34ch;
}
.blog-post__more {
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rec);
}
.blog-side,
.article__aside {
  position: sticky;
  top: 94px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--bg-2);
  padding: 18px;
}
.blog-side__label,
.article__aside span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--fg-faint);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.blog-side a,
.article__aside a {
  display: block;
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.blog-side a:hover,
.article__aside a:hover { color: var(--rec); }

/* ============================================================
   ARTICLE
   ============================================================ */
.article { padding-top: clamp(130px,18vh,190px); padding-bottom: clamp(60px,9vh,120px); }
.article__head { max-width: 1180px; }
.article__back {
  display: inline-flex;
  margin-bottom: clamp(28px,5vh,64px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--fg-faint);
  text-transform: uppercase;
}
.article__back:hover { color: var(--rec); }
.article__title { max-width: min(22ch, 100%); }
.article__lead {
  color: var(--fg-dim);
  font-size: clamp(19px,2vw,30px);
  line-height: 1.34;
  max-width: 52ch;
  margin-top: clamp(24px,4vh,44px);
}
.article__media {
  position: relative;
  min-height: clamp(300px,50vw,620px);
  margin-top: clamp(38px,6vh,76px);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  overflow: hidden;
}
.article__media .frame-media {
  position: absolute;
  inset: 0;
  filter: saturate(.78) brightness(.74);
}
.article__media .frame-media img,
.blog-feature__media .frame-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article__content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 28px 0;
  border-radius: 2px;
}
.article__content figure {
  margin: 28px 0;
}
.article__content figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
}
.article__content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.95em;
}
.article__content th,
.article__content td {
  border-bottom: 1px solid oklch(0.5 0.01 70 / .25);
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
}
.blog-post[hidden],
.blog-feature[hidden] { display: none !important; }
.article__media span {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--rec);
  background: oklch(0.1 0.004 60 / .64);
  padding: 5px 9px;
  border-radius: 3px;
}
.article__layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 760px);
  gap: clamp(28px,5vw,86px);
  align-items: start;
  margin-top: clamp(50px,8vh,96px);
}
.article__content section + section { margin-top: clamp(42px,6vh,70px); }
.article__content section[id] {
  scroll-margin-top: 110px;
}
.article__content h2 {
  font-weight: 800;
  font-stretch: 110%;
  font-size: clamp(30px,3.6vw,56px);
  line-height: 1;
  letter-spacing: -.01em;
}
.article__content p,
.article__content li {
  color: var(--fg-dim);
  font-size: clamp(17px,1.25vw,20px);
  line-height: 1.7;
}
.article__content p { margin-top: 20px; }
.article__content ul {
  margin-top: 24px;
  padding-left: 22px;
}
.article__content li + li { margin-top: 10px; }
.article__content blockquote {
  margin-top: 28px;
  border-left: 3px solid var(--rec);
  padding-left: 22px;
  color: var(--fg);
  font-size: clamp(22px,2.2vw,34px);
  line-height: 1.25;
  font-weight: 800;
}
.article__cta {
  margin-top: clamp(52px,8vh,88px);
  border-top: 1px solid var(--line-soft);
  padding-top: 34px;
}
.article__cta h2 {
  font-size: clamp(32px,4.2vw,68px);
}
@media (max-width: 1050px){
  .blog-hero,
  .blog-feature,
  .blog-layout,
  .article__layout { grid-template-columns: 1fr; }
  .blog-side,
  .article__aside { position: static; }
}
@media (max-width: 920px){
  .blog__list{ grid-template-columns: 1fr; }
  .blog-post{ min-height: 260px; }
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta { position: relative; min-height: 92svh; display:flex; align-items:center; overflow:hidden; margin-top: clamp(50px,8vh,110px); }
.cta__bg { position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 80% at 20% 30%, oklch(0.46 0.13 100 / 0.42), transparent 60%),
    radial-gradient(60% 80% at 85% 75%, oklch(0.28 0.05 260 / 0.45), transparent 60%),
    var(--bg);
  filter: blur(0); }
.cta__bg::before { content:""; position:absolute; inset:-20%;
  background: conic-gradient(from 0deg, transparent, rgb(255 210 0 / 0.08), transparent 40%);
  animation: spin 26s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cta__bg::after { content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(0deg, transparent 0 3px, oklch(0 0 0 / 0.18) 3px 4px); opacity:.35; }
.cta__corners { position:absolute; inset: clamp(20px,3vw,46px); z-index:2; pointer-events:none; }
.cta__corners span{ position:absolute; width:36px;height:36px;border:2px solid oklch(0.96 0.006 80 / .4); }
.cta__corners span:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.cta__corners span:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.cta__corners span:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.cta__corners span:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.cta__inner { position:relative; z-index:3; text-align:center; width:100%; }
.cta h2 { font-weight:740; font-stretch:108%; font-size: clamp(34px,6.6vw,108px); line-height:1; letter-spacing:-.02em;
  text-wrap:balance; max-width: 18ch; margin: 0 auto; }
.cta p { color: var(--fg-dim); font-size: clamp(17px,1.6vw,24px); margin-top: 26px; }
.cta .btn { margin-top: clamp(30px,4.5vh,50px); }
.cta__hud { position:absolute; bottom: clamp(20px,3vw,46px); left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.15em; color: var(--fg-faint); display:flex; gap:10px; align-items:center; }
.cta__hud .d{ width:8px;height:8px;border-radius:50%;background:var(--rec);animation:recPulse 1.6s infinite; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  padding-top: clamp(40px,6vh,72px);
  padding-bottom: clamp(28px,5vh,56px);
  overflow: hidden;
}
.footer > * { position: relative; z-index: 1; }
.footer__panel {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background:
    linear-gradient(180deg, oklch(0.18 0.005 60 / .58), oklch(0.12 0.004 60 / .72));
  padding: clamp(26px, 4vw, 56px);
}
.footer__top {
  display: grid;
  grid-template-columns: auto minmax(260px, 420px);
  gap: clamp(28px,5vw,72px);
  align-items: center;
  justify-content: space-between;
}
.footer__brand {
  display: block;
  width: clamp(128px, 11vw, 180px);
}
.footer__brand img {
  width: 100%;
  height: auto;
  opacity: .78;
  transition: opacity .35s var(--ease), filter .35s var(--ease);
}
.footer__brand:hover img {
  opacity: 1;
  filter: drop-shadow(0 0 14px rgb(255 210 0 / .12));
}
.footer__statement {
  justify-self: end;
  text-align: right;
}
.footer__statement span,
.footer__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rec);
}
.footer__statement p {
  margin-top: 12px;
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.65;
  letter-spacing: .08em;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.25fr .8fr .95fr 1fr;
  gap: clamp(22px,4vw,72px);
  margin-top: clamp(34px,5vh,56px);
  padding-top: clamp(24px,4vh,38px);
  border-top: 1px solid var(--line-soft);
}
.footer__col {
  min-height: 0;
  padding: 0;
  background: transparent;
}
.footer__col a,
.footer__col p {
  display: block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  line-height: 1.65;
  color: var(--fg-dim);
}
.footer__col a {
  width: fit-content;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.footer__col a:hover {
  color: var(--rec);
  transform: translateX(3px);
}
.footer__bottom {
  display:flex;
  justify-content:space-between;
  align-items: center;
  gap:18px;
  flex-wrap:wrap;
  margin-top: clamp(34px,5vh,52px);
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-family:var(--font-mono);
  font-size:11px;
  color: var(--fg-faint);
  letter-spacing:.08em;
  text-transform: uppercase;
}
.footer__bottom a {
  color: var(--fg-dim);
}
.footer__bottom a:hover {
  color: var(--rec);
}

/* Footer copy set in Archivo (not mono) */
.footer .footer__statement span,
.footer .footer__label,
.footer .footer__statement p,
.footer .footer__col a,
.footer .footer__col p,
.footer .footer__bottom { font-family: var(--font-display); }

/* spacing helpers for section padding bottom */
.pb { padding-bottom: clamp(40px,7vh,90px); }

/* ============================================================
   PORTFOLIO — real image cards (reuse .card__video treatment)
   ============================================================ */
img.card__video { background: var(--bg-2); }
.card__media--port .card__video { object-fit: cover; }
/* vertical (9:16) clip framing inside cards */
.card__media--v { aspect-ratio: 4/5; }
.card--lg .card__media--v, .card--half .card__media--v { aspect-ratio: 16/12; }

/* ============================================================
   SEO SUBPAGES
   ============================================================ */
.sub-hero {
  padding-top: clamp(140px,18vh,210px);
  padding-bottom: clamp(48px,8vh,96px);
}
.sub-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .62fr);
  gap: clamp(32px,6vw,96px);
  align-items: end;
}
.sub-hero h1 {
  margin-top: 20px;
  max-width: 12ch;
  font-weight: 760;
  font-stretch: 108%;
  font-size: clamp(42px,7vw,116px);
  line-height: .92;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.sub-hero__lead {
  margin-top: clamp(22px,2.6vw,36px);
  color: var(--fg-dim);
  font-size: clamp(18px,1.55vw,24px);
  line-height: 1.5;
  max-width: 46ch;
}
.sub-hero__meta {
  margin-top: clamp(36px, 5vh, 58px);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sub-hero__meta span,
.sub-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 11px;
}
.sub-panel {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: oklch(0.145 0.005 60);
  padding: clamp(22px,3vw,38px);
}
.sub-panel__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rec);
}
.sub-panel p {
  margin-top: 18px;
  color: var(--fg-dim);
  line-height: 1.65;
}
.sub-section {
  padding-top: clamp(46px,8vh,92px);
  padding-bottom: clamp(28px,5vh,58px);
}
.sub-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: clamp(24px,4vh,42px);
  border-bottom: 1px solid var(--line-soft);
}
.sub-head h2 {
  max-width: 15ch;
  font-weight: 740;
  font-stretch: 108%;
  font-size: clamp(32px,4.8vw,76px);
  line-height: .96;
  letter-spacing: -.018em;
}
.sub-head > span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--fg-faint);
  text-transform: uppercase;
}
.sub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line-soft);
  background: var(--line-soft);
}
.sub-card {
  background: var(--bg);
  min-height: 220px;
  padding: clamp(22px,2.4vw,34px);
}
.sub-card h3 {
  font-weight: 820;
  font-stretch: 112%;
  font-size: clamp(22px,2vw,32px);
  line-height: .98;
  letter-spacing: -.012em;
}
.sub-card p {
  margin-top: 16px;
  color: var(--fg-dim);
  line-height: 1.62;
}
.sub-card a {
  display: inline-flex;
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rec);
}
.service-hub .sub-hero__grid {
  align-items: center;
}
.service-hub {
  padding-bottom: clamp(34px, 6vh, 72px);
}
.service-hub h1 {
  max-width: 13ch;
  font-weight: 750;
  font-stretch: 108%;
  font-size: clamp(44px, 6.2vw, 104px);
  line-height: .94;
  letter-spacing: 0;
}
.service-hub .sub-hero__lead {
  max-width: 44ch;
  font-size: clamp(17px, 1.35vw, 22px);
  line-height: 1.58;
}
/* Kinetic H1 — rotating final word */
.h1-rot {
  display: inline-flex;
  overflow: hidden;
  height: 1em;
  vertical-align: 0.02em;
  color: var(--rec);
}
.h1-rot__list {
  display: flex;
  flex-direction: column;
  animation: h1rot 13.2s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}
.h1-rot__list span {
  display: block;
  height: 1em;
  line-height: 1;
  white-space: nowrap;
}
@keyframes h1rot {
  0%, 12%          { transform: translateY(0); }
  16.67%, 28.67%   { transform: translateY(-1em); }
  33.33%, 45.33%   { transform: translateY(-2em); }
  50%, 62%         { transform: translateY(-3em); }
  66.67%, 78.67%   { transform: translateY(-4em); }
  83.33%, 95.33%   { transform: translateY(-5em); }
  100%             { transform: translateY(-6em); }
}
@media (prefers-reduced-motion: reduce) {
  .h1-rot__list { animation: none; }
}
.service-index {
  padding-top: clamp(34px, 6vh, 74px);
}
.service-index .sub-head {
  align-items: start;
}
.service-index .sub-head h2 {
  max-width: 18ch;
  font-weight: 820;
  font-stretch: 112%;
  font-size: clamp(34px, 4.1vw, 68px);
  line-height: .96;
  letter-spacing: 0;
}
.service-index .sub-head span {
  padding-top: 12px;
}
.service-hub__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line-soft);
  background: var(--line-soft);
  overflow: hidden;
}
.service-tile {
  position: relative;
  min-height: clamp(250px, 27vh, 360px);
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.4vw, 38px);
  background: var(--bg);
  transition: background .4s var(--ease);
}
.service-tile > * {
  position: relative;
  z-index: 1;
}
.service-tile span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--fg-faint);
  transition: color .3s var(--ease);
}
.service-tile h3 {
  margin-top: clamp(34px, 4vh, 52px);
  max-width: min(14ch, calc(100% - 56px));
  font-size: clamp(22px, 1.9vw, 34px);
  font-weight: 780;
  font-stretch: 108%;
  line-height: 1;
  letter-spacing: 0;
  text-wrap: balance;
}
.service-tile p {
  margin-top: 20px;
  margin-bottom: clamp(34px, 4.5vh, 58px);
  color: var(--fg-dim);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.64;
  max-width: 34ch;
}
.service-tile i {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .3s var(--ease);
}
.service-tile i::before {
  content: "";
  width: 5px;
  height: 5px;
  background: currentColor;
}
.service-tile::after {
  content: "→";
  position: absolute;
  right: clamp(26px, 2.4vw, 38px);
  top: clamp(26px, 2.4vw, 38px);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid rgb(255 210 0 / .18);
  border-radius: 999px;
  background: rgb(255 210 0 / .04);
  color: var(--rec);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  opacity: .5;
  transition: color .35s var(--ease), transform .35s var(--ease), opacity .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
}
.service-tile:hover,
.service-tile:focus-visible {
  background: var(--bg-2);
}
.service-tile:hover span,
.service-tile:focus-visible span { color: var(--rec); }
.service-tile:hover i,
.service-tile:focus-visible i { color: var(--fg); }
.service-tile:hover::after,
.service-tile:focus-visible::after {
  color: #17140a;
  background: #ffd200;
  border-color: #ffd200;
  opacity: 1;
}
.service-tile--feature {
  grid-column: span 2;
  min-height: clamp(300px, 34vh, 430px);
}
@keyframes recBlink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: .18; }
}
.service-tile--feature h3 {
  max-width: min(13ch, calc(100% - 64px));
  font-size: clamp(34px, 3.6vw, 66px);
  font-weight: 820;
  line-height: .96;
}
/* Closing cell — fills the trailing grid space instead of a glow void */
.service-tile--end {
  grid-column: span 2;
  justify-content: center;
  background: var(--bg-2);
}
.service-tile--end::after { content: none; }
.service-tile--end h3 {
  margin-top: 0;
  max-width: 20ch;
  font-size: clamp(21px, 1.7vw, 28px);
  font-weight: 720;
  line-height: 1.12;
}
.service-tile--end .end-link {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: var(--rec);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: gap .3s var(--ease);
}
.service-tile--end:hover .end-link { gap: 16px; }
/* Content-system — production output manifest */
.csys {
  margin-top: clamp(22px, 3vh, 30px);
}
.csys__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}
.csys__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
}
.csys__head b {
  font-weight: 700;
  font-size: clamp(14px, 1vw, 16px);
  letter-spacing: .01em;
  color: var(--fg);
}
.csys__head .csys__arrow { color: var(--rec); }
.csys__head .csys__count {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.csys__rows {
  list-style: none;
}
.csys__rows li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line-soft);
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.csys__rows li:last-child { border-bottom: none; }
.csys__rows li:hover { padding-left: 8px; }
.csys__rows li b {
  min-width: 8ch;
  font-weight: 640;
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--fg);
}
.csys__rows li:hover b { color: var(--rec); }
.csys__rows li span {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  text-align: right;
}

.portfolio-routing {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 70px);
  align-items: center;
  margin-top: clamp(22px, 4vh, 42px);
  padding: clamp(24px, 3.4vw, 46px);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background:
    radial-gradient(70% 120% at 100% 0%, rgb(255 210 0 / .1), transparent 58%),
    var(--bg-2);
}
.portfolio-routing h3 {
  margin-top: 18px;
  max-width: 15ch;
  font-size: clamp(27px, 3vw, 52px);
  font-weight: 820;
  font-stretch: 112%;
  line-height: .96;
  letter-spacing: 0;
}
.portfolio-routing__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.portfolio-routing__links a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid rgb(255 255 255 / .13);
  border-radius: 999px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.portfolio-routing__links a:hover {
  color: var(--rec);
  border-color: rgb(255 210 0 / .45);
  background: rgb(255 210 0 / .07);
}
.service-detail {
  position: relative;
}
.service-detail .sub-hero {
  position: relative;
  padding-top: clamp(128px, 15vh, 178px);
  padding-bottom: clamp(42px, 7vh, 82px);
  overflow: hidden;
}
.service-detail .sub-hero::before {
  content: "";
  position: absolute;
  left: 6vw;
  top: 12vh;
  width: min(680px, 42vw);
  height: min(680px, 42vw);
  background: radial-gradient(circle, rgb(255 210 0 / .08), transparent 64%);
  pointer-events: none;
}
.service-detail .sub-hero__grid {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, .86fr) minmax(360px, .64fr);
  gap: clamp(36px, 4.8vw, 86px);
  align-items: center;
}
.service-detail .sub-hero h1 {
  max-width: 12.4ch;
  font-weight: 820;
  font-stretch: 112%;
  font-size: clamp(48px, 5vw, 92px);
  line-height: .94;
  letter-spacing: 0;
}
.service-detail .sub-hero__lead {
  margin-top: clamp(22px, 3vh, 34px);
  max-width: 42ch;
  font-size: clamp(18px, 1.28vw, 22px);
  line-height: 1.58;
}
.service-detail .sub-hero__meta {
  margin-top: clamp(30px, 4vh, 46px);
}
.service-detail .sub-hero__meta span {
  background: rgb(255 255 255 / .018);
}
.service-stage {
  position: relative;
  min-height: clamp(320px, 42vh, 520px);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgb(255 255 255 / .025), transparent),
    var(--bg-2);
  box-shadow:
    0 24px 80px rgb(0 0 0 / .34),
    inset 0 0 0 1px rgb(255 255 255 / .025);
}
.service-stage img,
.service-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.76) brightness(.58) contrast(1.08);
  transform: scale(1.02);
}
.service-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(70% 58% at 20% 12%, rgb(255 210 0 / .13), transparent 62%),
    linear-gradient(180deg, rgb(0 0 0 / .04), rgb(0 0 0 / .62)),
    repeating-linear-gradient(0deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 8px);
  opacity: .62;
}
.service-stage__label {
  position: absolute;
  left: clamp(22px, 2.6vw, 38px);
  right: clamp(22px, 2.6vw, 38px);
  bottom: clamp(22px, 2.6vw, 38px);
  z-index: 3;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.service-stage__label strong {
  color: var(--fg);
  font-size: clamp(18px, 2vw, 28px);
  font-family: var(--font-display);
  font-weight: 820;
  font-stretch: 116%;
  letter-spacing: -.01em;
  text-transform: none;
}
.service-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(30px, 5vh, 54px);
  border: 1px solid var(--line-soft);
  background: var(--line-soft);
}
.service-metric {
  min-height: 128px;
  background:
    radial-gradient(60% 90% at 100% 0%, rgb(255 210 0 / .055), transparent 60%),
    var(--bg);
  padding: clamp(20px, 2.3vw, 32px);
}
.service-metric span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rec);
}
.service-metric strong {
  display: block;
  margin-top: 18px;
  max-width: 16ch;
  font-size: clamp(20px, 2vw, 34px);
  font-weight: 780;
  font-stretch: 108%;
  line-height: 1;
  letter-spacing: 0;
}
.service-output {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}
.service-output__intro {
  position: sticky;
  top: 110px;
}
.service-output__intro .sec-title {
  margin-top: 18px;
  max-width: 9ch;
  font-size: clamp(34px, 4.4vw, 74px);
  font-weight: 820;
  font-stretch: 114%;
  line-height: .94;
  letter-spacing: 0;
}
.service-output__intro p {
  margin-top: 24px;
  color: var(--fg-dim);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.62;
  max-width: 42ch;
}
.service-output__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line-soft);
  background: var(--line-soft);
}
.service-output__item {
  min-height: 190px;
  padding: clamp(22px, 2.5vw, 34px);
  background: var(--bg);
}
.service-output__item span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.service-output__item h3 {
  margin-top: 26px;
  max-width: 15ch;
  font-size: clamp(22px, 2vw, 34px);
  font-weight: 780;
  font-stretch: 108%;
  line-height: 1;
  letter-spacing: 0;
}
.service-output__item p {
  margin-top: 16px;
  color: var(--fg-dim);
  font-size: 15px;
  line-height: 1.62;
}
.related-work {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(26px, 4vh, 48px);
}
.work-bridge {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(320px, .68fr);
  gap: clamp(24px, 4.4vw, 76px);
  align-items: end;
  padding-bottom: clamp(24px, 4vh, 42px);
  border-bottom: 1px solid var(--line-soft);
}
.work-bridge h2 {
  margin-top: 18px;
  max-width: 14ch;
  font-size: clamp(32px, 4vw, 68px);
  font-weight: 820;
  font-stretch: 112%;
  line-height: .96;
  letter-spacing: 0;
}
.work-bridge p {
  margin-top: 18px;
  max-width: 46ch;
  color: var(--fg-dim);
  font-size: clamp(16px, 1.12vw, 19px);
  line-height: 1.6;
}
.work-bridge__actions {
  display: grid;
  justify-items: end;
  gap: 16px;
}
.work-bridge__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.work-bridge__filters a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid rgb(255 255 255 / .13);
  border-radius: 999px;
  padding: 8px 11px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-dim);
  background: rgb(255 255 255 / .018);
}
.work-bridge__filters a:hover,
.work-bridge__filters a.is-active {
  color: var(--rec);
  border-color: rgb(255 210 0 / .48);
  background: rgb(255 210 0 / .075);
}
.work-mini {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: clamp(280px, 36vh, 460px);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: var(--bg-2);
}
.work-mini img,
.work-mini video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) brightness(.68);
  transform: scale(1.04);
  transition: transform 1s var(--ease), filter .5s var(--ease);
}
.work-mini::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 34%, rgb(0 0 0 / .78));
}
.work-mini:hover img,
.work-mini:hover video {
  transform: scale(1.1);
  filter: saturate(1) brightness(.88);
}
.work-mini__info {
  position: absolute;
  left: clamp(18px, 2vw, 28px);
  right: clamp(18px, 2vw, 28px);
  bottom: clamp(18px, 2vw, 28px);
  z-index: 2;
}
.work-mini__info span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rec);
}
.work-mini__info h3 {
  margin-top: 10px;
  font-size: clamp(23px, 2.1vw, 36px);
  font-weight: 800;
  font-stretch: 110%;
  line-height: 1;
  letter-spacing: 0;
}
.work-mini__info p {
  margin-top: 12px;
  color: var(--fg-dim);
  font-size: 14px;
  line-height: 1.52;
}
.service-next {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.service-next a {
  display: inline-flex;
  border: 1px solid rgb(255 255 255 / .13);
  border-radius: 999px;
  padding: 10px 13px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.service-next a:hover {
  color: var(--rec);
  border-color: rgb(255 210 0 / .45);
  background: rgb(255 210 0 / .07);
}
.sub-steps {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line-soft);
  background: var(--line-soft);
}
.sub-step {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: clamp(20px,4vw,58px);
  background: var(--bg);
  padding: clamp(22px,3vw,40px);
}
.sub-step span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--rec);
}
.sub-step h3 {
  font-size: clamp(23px,2.5vw,40px);
  line-height: 1;
}
.sub-step p {
  margin-top: 12px;
  color: var(--fg-dim);
  max-width: 62ch;
}
.sub-cta {
  margin-top: clamp(38px,6vh,72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: clamp(24px,4vw,48px);
  background:
    radial-gradient(70% 120% at 100% 0%, rgb(255 210 0 / .13), transparent 58%),
    var(--bg-2);
}
.sub-cta h2 {
  font-size: clamp(30px,4vw,68px);
  line-height: .94;
  max-width: 15ch;
}
.sub-cta p {
  margin-top: 14px;
  color: var(--fg-dim);
}
.sub-list {
  display: grid;
  gap: 14px;
}
.sub-list a {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--fg-dim);
  text-transform: uppercase;
}
.sub-list a:hover { color: var(--rec); }
@media (max-width: 1100px) {
  .sub-hero__grid,
  .sub-cta { grid-template-columns: 1fr; }
  /* podstrony usług: kolumna z mediami nie może wymuszać min 360px */
  .service-detail .sub-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .service-detail .sub-hero h1 { max-width: none; font-size: clamp(34px, 8.4vw, 60px); }
  .service-detail .sub-hero__lead { max-width: 46ch; font-size: clamp(16px, 3.6vw, 19px); }
  .service-stage { min-height: clamp(240px, 34vh, 380px); }
  .sub-grid { grid-template-columns: 1fr; }
  .service-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-tile--feature { grid-column: span 1; }
  .service-tile--end { grid-column: span 2; }
  .portfolio-routing { grid-template-columns: 1fr; }
  .portfolio-routing__links { justify-content: flex-start; }
  .service-metrics,
  .service-output,
  .work-bridge,
  .related-work { grid-template-columns: 1fr; }
  .service-output__intro { position: static; }
  .work-bridge__actions,
  .work-bridge__filters { justify-items: start; justify-content: flex-start; }
  .sub-head { display: block; }
  .sub-head > span { display: block; margin-top: 16px; }
}
@media (max-width: 620px) {
  .service-hub__grid { grid-template-columns: 1fr; grid-auto-columns: minmax(0, 1fr); }
  /* end + feature tiles keep a span-2 from the desktop layout — on a single
     column that span silently spawns a content-sized implicit column and
     blows the grid out sideways. Force them back to one track. */
  .service-tile--feature,
  .service-tile--end { grid-column: auto; }
  .service-output__grid { grid-template-columns: 1fr; }
  .service-stage__label { display: block; }
  .service-stage__label strong { display: block; margin-bottom: 8px; }
}
@media (max-width: 560px) {
  .sub-step { grid-template-columns: 1fr; gap: 10px; }
}

/* ============================================================
   LOGO WALL — Zaufali nam
   ============================================================ */
.logo-wall {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  background: var(--line-soft); border: 1px solid var(--line-soft);
  border-radius: 4px; overflow: hidden; margin-top: clamp(40px, 6vh, 64px);
}
.logo-marquee {
  position: relative;
  margin-top: clamp(40px, 6vh, 64px);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--bg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logoMarquee 46s linear infinite;
  will-change: transform;
}
.logo-marquee:hover .logo-track { animation-play-state: paused; }
@keyframes logoMarquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; } }
.logo-marquee--reverse { margin-top: clamp(12px, 1.6vh, 20px); }
.logo-marquee--reverse .logo-track { animation-duration: 64s; animation-direction: reverse; }
.logo-cellc {
  flex: 0 0 auto;
  background: var(--bg); display: grid; place-items: center;
  min-height: clamp(98px, 12vh, 142px); padding: 0 clamp(34px, 4.4vw, 68px);
  position: relative; cursor: pointer;
  transition: background .45s var(--ease);
}
.logo-marquee .logo-cellc { border-right: 1px solid var(--line-soft); }
.logo-cellc:hover { background: var(--bg-2); }
/* clickable affordance — brand-yellow underline grows on hover */
.logo-cellc::after {
  content: ""; position: absolute; left: 50%; bottom: clamp(20px, 2.4vh, 30px);
  width: 0; height: 2px; background: var(--accent-hi); transform: translateX(-50%);
  transition: width .35s var(--ease); pointer-events: none;
}
.logo-cellc:hover::after, .logo-cellc:focus-visible::after { width: 30px; }
.logo-mark, .logo-rings {
  height: calc(var(--k,1) * clamp(26px,2.2vw,34px)); width: auto; max-width: none; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .48; transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.logo-rings { height: calc(var(--k,1) * clamp(26px,2.2vw,34px)); max-width: none; }
.logo-cellc:hover .logo-mark, .logo-cellc:hover .logo-rings { opacity: 1; transform: scale(1.06); }
/* LIGHT theme: recolor the (white-tuned) marquee logos to black so they read on the off-white ground */
:root[data-theme="light"] .logo-mark, :root[data-theme="light"] .logo-rings { filter: brightness(0); }
.logo-word {
  font-weight: 800; font-stretch: 104%; font-size: clamp(17px, 1.5vw, 22px);
  letter-spacing: .005em; color: var(--fg-faint); transition: color .4s var(--ease);
  white-space: nowrap; text-align: center;
}
.logo-cellc:hover .logo-word { color: var(--fg); }
/* Mobile: logotypy przesuwane palcem zamiast auto-marquee */
@media (max-width: 860px){
  .logo-marquee{
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
  .logo-marquee::-webkit-scrollbar{ display: none; }
  .logo-track{ animation: none; }
  .logo-cellc{ scroll-snap-align: center; padding: 0 clamp(26px, 9vw, 42px); }
}
@media (max-width: 980px){ .logo-wall{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 540px){ .logo-wall{ grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   TESTIMONIALS — Opinie klientów
   ============================================================ */
.tm { padding-bottom: clamp(50px, 8vh, 110px); }
.tm__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px,1.6vw,24px); margin-top: clamp(34px,5vh,56px); }
.tm-card {
  border: 1px solid var(--line-soft); border-radius: 4px; background: var(--bg-2);
  padding: clamp(26px,2.6vw,38px); display: flex; flex-direction: column; gap: 22px;
  position: relative; overflow: hidden; transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
.tm-card:hover { border-color: rgb(255 210 0 / .42); background: var(--bg-3); transform: translateY(-5px); }
.tm-card__q { font-size: clamp(16px,1.35vw,20px); line-height: 1.5; color: var(--fg); flex: 1; text-wrap: pretty; }
.tm-card__mark { font-family: var(--font-display); font-weight: 800; font-size: 58px; line-height: .5; color: var(--rec); height: 30px; }
.tm-card__by { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line-soft); padding-top: 20px; }
.tm-card__av {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  border: 1px solid var(--line); background: var(--bg-3);
  display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; color: var(--rec); overflow: hidden;
}
.tm-card__av img { width: 100%; height: 100%; object-fit: cover; }
.tm-card__name { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.tm-card__role { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); letter-spacing: .06em; margin-top: 5px; text-transform: uppercase; }
@media (max-width: 920px){ .tm__grid{ grid-template-columns: 1fr; } }

/* ============================================================
   CONTACT — form + details
   ============================================================ */
.contact { position: relative; padding-bottom: clamp(50px,8vh,110px); padding-top: clamp(60px,9vh,120px); margin-top: clamp(40px,7vh,90px); overflow: hidden; }
.contact__bg { position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(55% 75% at 18% 22%, oklch(0.46 0.13 100 / 0.30), transparent 60%),
    radial-gradient(55% 75% at 88% 82%, oklch(0.28 0.05 260 / 0.34), transparent 60%);
}
.contact__bg::after { content:""; position:absolute; inset:0; background: repeating-linear-gradient(0deg, transparent 0 3px, oklch(0 0 0 / 0.16) 3px 4px); opacity:.3; }
.contact > .shell { position: relative; z-index: 1; }
.contact__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px,4.5vw,76px); margin-top: clamp(40px,6vh,60px); align-items: start; }
.contact__lead { color: var(--fg-dim); font-size: clamp(17px,1.5vw,22px); line-height: 1.5; max-width: 40ch; margin-top: 22px; }
.cinfo { margin-top: clamp(32px,5vh,52px); }
.cinfo__item { padding: 20px 0; border-top: 1px solid var(--line-soft); }
.cinfo__item:last-child { border-bottom: 1px solid var(--line-soft); }
.cinfo__k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint); }
.cinfo__v { font-weight: 700; font-stretch: 104%; font-size: clamp(18px,1.7vw,25px); margin-top: 8px; letter-spacing: -.01em; }
.cinfo__v a { transition: color .3s var(--ease); }
.cinfo__v a:hover { color: var(--rec); }
.cinfo__socials { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.cinfo__socials a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 100px; padding: 10px 16px; color: var(--fg-dim);
  transition: all .35s var(--ease);
}
.cinfo__socials a:hover { color: var(--on-accent); background: var(--rec); border-color: var(--rec); }

.cform { display: grid; gap: 16px; border: 1px solid var(--line-soft); border-radius: 5px; background: oklch(0.155 0.004 60 / 0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: clamp(24px,3vw,38px); }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cfield { display: flex; flex-direction: column; gap: 9px; }
.cfield label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }
.cfield input, .cfield textarea, .cfield select {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 14px 16px;
  color: var(--fg); font-family: var(--font-display); font-size: 16px; width: 100%;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.cfield select {
  appearance: none;
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--rec) 50%),
    linear-gradient(135deg, var(--rec) 50%, transparent 50%);
  background-position: calc(100% - 21px) 50%, calc(100% - 15px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.cfield textarea { resize: vertical; min-height: 120px; }
.cfield input:focus, .cfield textarea:focus, .cfield select:focus { outline: none; border-color: var(--rec); background-color: var(--bg-3); }
.cfield input::placeholder, .cfield textarea::placeholder { color: var(--fg-faint); }
.cconsent { display: flex; gap: 12px; align-items: flex-start; font-size: 12.5px; color: var(--fg-faint); line-height: 1.55; }
.cconsent a { color: var(--rec); text-decoration: underline; text-underline-offset: 2px; }
.cconsent a:hover { color: var(--fg); }
.cconsent input { margin-top: 2px; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--rec); }
.cform .btn { width: 100%; justify-content: center; margin-top: 4px; }
.cform__note { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--fg-faint); text-align: center; }
@media (max-width: 860px){ .contact__grid{ grid-template-columns: 1fr; } .cform__row{ grid-template-columns: 1fr; } }

/* ============================================================
   COOKIE CONSENT BAR
   ============================================================ */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9700;
  padding: clamp(12px,2vw,20px); display: flex; justify-content: center;
  transform: translateY(120%); transition: transform .5s var(--ease); pointer-events: none; }
.cookie-bar[data-show] { transform: none; }
.cookie-bar[data-hide] { transform: translateY(120%); }
.cookie-bar__inner { pointer-events: auto; width: min(100%, 940px);
  display: flex; align-items: center; gap: clamp(14px,2vw,28px); flex-wrap: wrap;
  background: oklch(0.155 0.004 60 / 0.96); border: 1px solid var(--line-soft); border-radius: 8px;
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); box-shadow: 0 22px 70px oklch(0 0 0 / 0.42);
  padding: clamp(14px,1.6vw,20px) clamp(16px,2vw,26px); }
.cookie-bar__tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .18em; color: var(--rec); white-space: nowrap; }
.cookie-bar__text { flex: 1 1 320px; font-size: 13px; line-height: 1.5; color: var(--fg-dim); margin: 0; }
.cookie-bar__text a { color: var(--fg); border-bottom: 1px solid var(--line); white-space: nowrap; transition: color .3s var(--ease), border-color .3s var(--ease); }
.cookie-bar__text a:hover { color: var(--rec); border-color: var(--rec); }
.cookie-bar__actions { display: flex; gap: 10px; margin-left: auto; }
.cookie-bar__btn { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-dim); border: 1px solid var(--line); border-radius: 100px; background: transparent;
  padding: 11px 20px; cursor: pointer; white-space: nowrap;
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }
.cookie-bar__btn:hover { color: var(--fg); border-color: var(--fg-faint); }
.cookie-bar__btn--primary { color: var(--on-accent); background: var(--rec); border-color: var(--rec); }
.cookie-bar__btn--primary:hover { color: var(--on-accent); background: oklch(0.86 0.17 92); border-color: oklch(0.86 0.17 92); }
@media (max-width: 620px){
  .cookie-bar__actions { margin-left: 0; width: 100%; }
  .cookie-bar__btn { flex: 1 1 auto; text-align: center; }
}

/* ============================================================
   TEAM — group feature photo
   ============================================================ */
.team__feature { position: relative; margin-top: clamp(30px,4vh,46px); border: 1px solid var(--line-soft); border-radius: 4px; overflow: hidden; aspect-ratio: 16/7; }
.team__feature img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; filter: saturate(.92) brightness(.84); transition: transform 1.4s var(--ease), filter .6s var(--ease); transform: scale(1.03); }
.team__feature:hover img { transform: scale(1.08); filter: saturate(1) brightness(.96); }
.team__feature figcaption { position: absolute; left: 16px; bottom: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--fg); background: oklch(0.1 0.004 60 / .58); padding: 6px 10px; border-radius: 3px; display: flex; align-items: center; gap: 8px; }
.team__feature figcaption .d { width: 7px; height: 7px; border-radius: 50%; background: var(--rec); animation: recPulse 1.6s infinite; }
@media (max-width: 720px){ .team__feature{ aspect-ratio: 4/3; } }

/* ===== TEAM — credits-style crew roster ===== */
.crew { margin-top: clamp(34px,5vh,56px); border-top: 1px solid var(--line-soft); }
.crew__row {
  display: grid; grid-template-columns: clamp(60px,7vw,96px) 1fr auto; align-items: baseline;
  gap: clamp(16px,3vw,44px); padding: clamp(22px,2.6vw,34px) 0;
  border-bottom: 1px solid var(--line-soft); position: relative;
  transition: padding-left .45s var(--ease);
}
.crew__row::before {
  content: ""; position: absolute; inset: 0; z-index: -1; width: 0;
  background: linear-gradient(90deg, rgb(255 210 0 / 0.08), transparent 70%);
  transition: width .55s var(--ease);
}
.crew__row:hover::before { width: 100%; }
.crew__row:hover { padding-left: 16px; }
.crew__no { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; color: var(--rec); }
.crew__name {
  font-weight: 800; font-stretch: 108%; font-size: clamp(24px,3.6vw,54px);
  line-height: .98; letter-spacing: -.02em; transition: transform .45s var(--ease);
}
.crew__row:hover .crew__name { transform: translateX(6px); }
.crew__role {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg-faint); text-align: right; line-height: 1.6;
}
@media (max-width: 680px){
  .crew__row { grid-template-columns: 1fr; gap: 8px; }
  .crew__role { text-align: left; }
}

/* ============================================================
   YOUTUBE BACKGROUND EMBEDS — cover-fill any container (no black bars)
   ============================================================ */
.yt-bg {
  position: absolute; inset: 0; overflow: hidden;
  container-type: size; background: #000; z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.yt-bg iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width:  max(100cqw, 100cqh * 16 / 9);
  height: max(100cqh, 100cqw * 9 / 16);
  border: 0; pointer-events: none;
}
/* Show poster immediately; iframe mounts after idle / near viewport */
.hero__video:has(.yt-bg) { opacity: 1; }
.hero__video .yt-bg { filter: brightness(0.78) saturate(1.05); }
/* studio media becomes a vertical reel frame for the Short */
.studio__media.is-vertical { aspect-ratio: 9 / 16; max-height: min(82vh, 860px); margin-inline: auto; }

/* ============================================================
   MOBILE FIXES — overlap + footer alignment
   ============================================================ */
@media (max-width: 760px){
  /* decorative hero play + HUDs overlapped the headline on phones */
  .hero__play { display: none; }
  .hero__hud.tr { display: none; }
  .hero__hud.tl { top: clamp(72px, 10vh, 100px); }

  /* hero: centered block, left-aligned text (like desktop) */
  .hero { align-items: center; text-align: left; }
  .hero__content { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 380px; margin-inline: auto; }
  .hero__label { justify-content: flex-start; }
  .hero h1 { max-width: 100%; }
  .hero__sub { margin-left: 0; margin-right: 0; max-width: 100%; }
  /* equal-width, smaller stacked buttons */
  .hero__cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 100%; gap: 12px; }
  .hero__cta .btn { width: 100%; justify-content: center; padding: 14px 20px; font-size: 12px; white-space: nowrap; }

  /* footer: stack, left-align, keep logo inside the padding */
  .floating-socials { display: none; }
  .scroll-top { width: 40px; height: 40px; }
  .footer__panel { padding: 24px; }
  .footer__top { grid-template-columns: 1fr; align-items: start; justify-content: start; }
  .footer__brand { width: clamp(130px, 40vw, 180px); }
  .footer__statement { justify-self: start; text-align: left; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .footer__col { min-height: auto; }
  .footer__bottom { flex-direction: column; gap: 12px; margin-top: 30px; }
}
@media (max-width: 480px){
  .footer__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LIGHT THEME  (home page)
   Dark cinematic hero + final CTA are preserved; everything
   between flips to a warm off-white surface.
   ============================================================ */
:root[data-theme="light"] {
  --bg:        oklch(0.965 0.006 85);
  --bg-2:      oklch(0.930 0.007 85);
  --bg-3:      oklch(0.888 0.009 85);
  --line:      oklch(0.80 0.010 75);
  --line-soft: oklch(0.80 0.010 75 / 0.5);
  --fg:        oklch(0.235 0.014 60);
  --fg-dim:    oklch(0.42 0.014 60);
  --fg-faint:  oklch(0.545 0.014 60);
  /* small UI accents go monochrome in light — brand yellow is reserved
     for the hero, final CTA and the big headline (--accent-hi) only */
  --rec:       oklch(0.47 0.006 70);
  --rec-glow:  rgb(120 116 108 / 0.22);
}
:root[data-theme="light"] body { background: var(--bg); color: var(--fg); }
/* the animated WebGL smoke is dark-only — drop it, use a flat light ground */
:root[data-theme="light"] .flow-bg-canvas { display: none; }
:root[data-theme="light"] .grain { mix-blend-mode: multiply; opacity: 0.035; }
:root[data-theme="light"] .vignette {
  background: radial-gradient(120% 120% at 50% 42%, transparent 62%, oklch(0.45 0.01 60 / 0.05) 100%);
}

/* NAV — light stuck bar; keep text light while floating over the dark hero */
:root[data-theme="light"] .nav:not(.is-stuck) {
  --fg: oklch(0.96 0.006 80);
  --fg-dim: oklch(0.76 0.008 75);
  --fg-faint: oklch(0.64 0.008 70);
  --line-soft: oklch(0.9 0.006 80 / 0.4);
}
:root[data-theme="light"] .nav.is-stuck {
  background: oklch(0.965 0.006 85 / 0.8);
  border-bottom-color: var(--line-soft);
}
@media (max-width: 1100px) {
  :root[data-theme="light"] .nav__menu {
    background: oklch(0.97 0.006 85 / 0.96);
    box-shadow: 0 22px 70px oklch(0 0 0 / 0.14);
  }
}

/* HERO — stays cinematic dark: re-assert the dark token set inside it */
:root[data-theme="light"] .hero,
:root[data-theme="light"] .cta {
  --fg: oklch(0.96 0.006 80);
  --fg-dim: oklch(0.74 0.008 75);
  --fg-faint: oklch(0.55 0.008 70);
  --line: oklch(0.27 0.006 60);
  --line-soft: oklch(0.225 0.005 60 / 0.6);
  --rec: #ffd200;
  --rec-glow: rgb(255 210 0 / 0.45);
}
:root[data-theme="light"] .hero { background: oklch(0.11 0.004 60); color: var(--fg); }
:root[data-theme="light"] .cta { --bg: oklch(0.10 0.004 60); color: var(--fg); }

/* Surfaces that were hardcoded dark → light equivalents */
:root[data-theme="light"] .badge { background: oklch(0.90 0.006 85 / 0.6); }
:root[data-theme="light"] .cform { background: oklch(0.94 0.006 85 / 0.7); }
:root[data-theme="light"] .cookie-bar {
  background: oklch(0.965 0.006 85 / 0.96);
  box-shadow: 0 22px 70px oklch(0 0 0 / 0.14);
}
:root[data-theme="light"] .footer__panel {
  background: linear-gradient(180deg, oklch(0.935 0.006 85 / .7), oklch(0.905 0.008 85 / .82));
}
:root[data-theme="light"] .footer__brand img { filter: brightness(0); }

/* active-state tints were dark overlays → neutral gray on light */
:root[data-theme="light"] .tl__clips .clip.is-active { background: oklch(0.87 0.004 70 / 0.75); }
:root[data-theme="light"] .pseq.is-active { background: oklch(0.87 0.004 70 / 0.75); }

/* hardcoded brand-yellow bits → grayscale in light */
:root[data-theme="light"] .svc__chips span {
  border-color: oklch(0.55 0.006 70 / 0.4); background: oklch(0.5 0.006 70 / 0.05);
}
/* service card hover → solid black with white content (like dark) */
:root[data-theme="light"] .svc::before { background: oklch(0.14 0.004 60); }
:root[data-theme="light"] .svc:hover { color: #f4f0e6; }
:root[data-theme="light"] .svc:hover .svc__no,
:root[data-theme="light"] .svc:hover .svc__desc { color: oklch(0.78 0.008 75); }
:root[data-theme="light"] .svc:hover .svc__title { color: #f4f0e6; }
:root[data-theme="light"] .svc:hover .svc__chips span {
  color: #f4f0e6; border-color: oklch(0.9 0.006 80 / 0.4);
}
:root[data-theme="light"] .svc:hover .svc__arrow {
  color: #f4f0e6; border-color: oklch(0.9 0.006 80 / 0.5); background: oklch(0.9 0.006 80 / 0.08);
}
:root[data-theme="light"] .svc__arrow {
  border-color: oklch(0.55 0.006 70 / 0.34); background: oklch(0.5 0.006 70 / 0.05); color: var(--fg-dim);
}
:root[data-theme="light"] .svc:hover .svc__arrow,
:root[data-theme="light"] .svc:focus-visible .svc__arrow {
  border-color: #ffd200; background: #ffd200; color: #17140a;
}

/* contact section: yellow/blue blooms → neutral gray */
:root[data-theme="light"] .contact__bg {
  background:
    radial-gradient(55% 75% at 18% 22%, oklch(0.55 0.004 70 / 0.14), transparent 60%),
    radial-gradient(55% 75% at 88% 82%, oklch(0.5 0.004 70 / 0.12), transparent 60%);
}

/* ---- interactive components keep the brand yellow-on-black in light ---- */
/* primary buttons: yellow fill + black label (like dark) */
:root[data-theme="light"] .btn--primary { background: #ffd200; border-color: #ffd200; color: #17140a; }
:root[data-theme="light"] .btn--primary::before { background: #17140a; }
:root[data-theme="light"] .btn--primary:hover { color: #fff; border-color: #17140a; }

/* nav switchers: active option filled in brand yellow (not a gray outline) */
:root[data-theme="light"] .nav__theme,
:root[data-theme="light"] .nav__lang { border-color: rgb(255 210 0 / 0.55); }
:root[data-theme="light"] .nav__theme-opt.is-active,
:root[data-theme="light"] .nav__lang-opt.is-active { background: #ffd200; color: #17140a; }

/* work card hover hint → brand yellow pill (sits over dark media) */
:root[data-theme="light"] .card__hint { background: #ffd200; color: #17140a; }

/* portfolio switcher: fully black pill (like dark), yellow-fill hover on arrows */
:root[data-theme="light"] .work-slider__hud {
  background: oklch(0.13 0.004 60 / 0.96); border-color: oklch(0.3 0.006 60); color: oklch(0.7 0.008 75);
}
:root[data-theme="light"] .work-reel__count { color: #f4f0e6; }
:root[data-theme="light"] .work-reel__count b { color: #ffd200; }
:root[data-theme="light"] .work-nav {
  background: oklch(0.22 0.006 60); border-color: oklch(0.36 0.006 60); color: #f4f0e6;
}
:root[data-theme="light"] .work-nav:hover {
  background: #ffd200; border-color: #ffd200; color: #17140a; transform: scale(1.08);
}
:root[data-theme="light"] .work-dots button { background: oklch(0.5 0.006 70 / 0.55); }
:root[data-theme="light"] .work-dots button.is-on { background: #ffd200; box-shadow: 0 0 14px rgb(255 210 0 / 0.4); }

/* floating social rail + back-to-top: yellow-on-dark chips, yellow-fill hover with black label */
:root[data-theme="light"] .floating-socials a,
:root[data-theme="light"] .scroll-top {
  background: oklch(0.16 0.006 60 / 0.92); border-color: rgb(255 210 0 / 0.5); color: #ffd200;
}
:root[data-theme="light"] .floating-socials a:hover,
:root[data-theme="light"] .scroll-top:hover {
  background: #ffd200; border-color: #ffd200; color: #17140a;
}

/* contact address social chips: brand yellow accent (not flat gray) */
:root[data-theme="light"] .cinfo__socials a {
  color: #17140a; border-color: rgb(255 210 0 / 0.7); background: rgb(255 210 0 / 0.12);
}
:root[data-theme="light"] .cinfo__socials a:hover {
  color: #17140a; background: #ffd200; border-color: #ffd200;
}

/* video timecode badges (work cards, studio, content-system) → identical to dark:
   dark chip, light text, brand-yellow REC dot — they sit over media, not the page */
:root[data-theme="light"] .card__tc,
:root[data-theme="light"] .studio__media .tc {
  color: #f4f0e6; background: oklch(0.1 0.004 60 / 0.6);
}
:root[data-theme="light"] .card__tc .rd,
:root[data-theme="light"] .studio__media .tc .d { background: #ffd200; }
:root[data-theme="light"] .pack-playhead { color: #ffd200; }

/* content-system animated screen: keep the dark cinematic token set so all
   labels (Hero film, Reels / Shorts, RAW/EDIT/EXPORT, timecode) read like dark */
:root[data-theme="light"] .content-pack__screen {
  --fg: #f4f0e6; --fg-dim: oklch(0.74 0.008 75); --fg-faint: oklch(0.6 0.008 70);
  --line: oklch(0.28 0.006 60); --line-soft: oklch(0.28 0.006 60 / 0.6);
  --rec: #ffd200; --rec-glow: rgb(255 210 0 / 0.45);
  color: var(--fg);
}

/* light · mobile content-system (.pseq): whole ROWS go dark (with a top
   lightening), progress bars + timeline stay brand-yellow so they pop */
:root[data-theme="light"] .pseq {
  background: linear-gradient(160deg, oklch(0.255 0.004 60), oklch(0.135 0.003 60));
  border-color: oklch(0.34 0.005 60);
  color: #f4f0e6;
}
:root[data-theme="light"] .pseq__name { color: #f7f3ea; }
:root[data-theme="light"] .pseq__desc { color: oklch(0.72 0.008 75); }
:root[data-theme="light"] .pseq__badge { color: oklch(0.6 0.008 70); }
:root[data-theme="light"] .pseq__node { color: oklch(0.6 0.008 70); border-color: oklch(0.4 0.006 60); background: oklch(0.19 0.004 60); }
:root[data-theme="light"] .pseq__glyph { background: oklch(0.35 0.004 60); border-color: oklch(0.46 0.005 60); }

/* progress bar + vertical timeline fill → yellow (on dark rows they read clearly) */
:root[data-theme="light"] .pseq__bar { background: #ffd200; }
:root[data-theme="light"] .pack-seq__fill { background: #ffd200; box-shadow: 0 0 10px rgb(255 210 0 / 0.5); }
:root[data-theme="light"] .pack-seq::before { background: oklch(0.36 0.005 60); }

/* active row stays dark, just lifts a touch + yellow border (no yellow fill) */
:root[data-theme="light"] .pseq.is-active {
  background: linear-gradient(160deg, oklch(0.30 0.004 60), oklch(0.155 0.003 60));
  border-color: #ffd200;
}
:root[data-theme="light"] .pseq.is-active .pseq__badge { color: #ffd200; }
:root[data-theme="light"] .pseq.is-active .pseq__node,
:root[data-theme="light"] .pseq.is-done .pseq__node { color: #17140a; border-color: #ffd200; background: #ffd200; }
:root[data-theme="light"] .pseq.is-active .pseq__glyph { border-color: rgb(255 210 0 / 0.55); background: oklch(0.4 0.006 60); }
:root[data-theme="light"] .pack-mobile__stage i { background: #ffd200; box-shadow: 0 0 10px rgb(255 210 0 / 0.5); }
:root[data-theme="light"] .pack-mobile__exp { color: #8a6d00; }

/* FOOTER → black panel (like dark) */
:root[data-theme="light"] .footer__panel {
  --fg: #f4f0e6; --fg-dim: oklch(0.74 0.008 75); --fg-faint: oklch(0.58 0.008 70);
  --line: oklch(0.28 0.006 60); --line-soft: oklch(0.28 0.006 60 / 0.7);
  --rec: #ffd200; --rec-glow: rgb(255 210 0 / 0.45);
  background: oklch(0.11 0.004 60); border-color: oklch(0.26 0.006 60); color: var(--fg);
}
:root[data-theme="light"] .footer__brand img { filter: none; }

/* PROCESS timeline clips → black film frames with a sweep-on-hover (like dark) */
:root[data-theme="light"] .tl__clips .clip {
  background: oklch(0.13 0.004 60); border-color: oklch(0.28 0.006 60); color: #f4f0e6;
}
:root[data-theme="light"] .clip__no,
:root[data-theme="light"] .clip__dur { color: oklch(0.66 0.008 75); }
:root[data-theme="light"] .clip__name { color: #f4f0e6; }
:root[data-theme="light"] .clip__strip {
  background: repeating-linear-gradient(90deg, oklch(0.5 0.006 70) 0 6px, transparent 6px 12px);
}
:root[data-theme="light"] .clip__fill { background: #ffd200; }
:root[data-theme="light"] .tl__clips .clip::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgb(255 255 255 / 0.14) 50%, transparent 66%);
  transform: translateX(-120%); transition: transform .75s var(--ease);
}
:root[data-theme="light"] .tl__clips .clip:hover {
  border-color: #ffd200; box-shadow: 0 0 0 1px rgb(255 210 0 / 0.4), 0 18px 40px oklch(0 0 0 / 0.4);
}
:root[data-theme="light"] .tl__clips .clip:hover::after { transform: translateX(120%); }
:root[data-theme="light"] .tl__clips .clip.is-active { background: oklch(0.2 0.02 100 / 0.95); border-color: #ffd200; }
:root[data-theme="light"] .tl__clips .clip.is-active .clip__name { color: #fff; }

/* ============================================================
   LIGHT THEME — SEO subpages (service hub / detail, portfolio bridge)
   Hardcoded dark surfaces + white-overlay chips flip to light.
   ============================================================ */
/* content-system panel: dark card → warm off-white surface */
:root[data-theme="light"] .sub-panel { background: oklch(0.945 0.006 85); }
/* hero meta chips: white overlay → neutral gray outline */
:root[data-theme="light"] .service-detail .sub-hero__meta span {
  background: oklch(0.5 0.006 70 / 0.05); border: 1px solid oklch(0.55 0.006 70 / 0.28);
}
/* media stage: dark frame → soft neutral frame (still holds media well) */
:root[data-theme="light"] .service-stage {
  background: linear-gradient(180deg, oklch(0.5 0.006 70 / 0.04), transparent), oklch(0.925 0.006 85);
  box-shadow: 0 24px 80px oklch(0 0 0 / 0.12), inset 0 0 0 1px oklch(0.5 0.006 70 / 0.08);
}
/* pill links whose border/bg were white overlays → neutral gray on light */
:root[data-theme="light"] .portfolio-routing__links a,
:root[data-theme="light"] .work-bridge__filters a,
:root[data-theme="light"] .service-next a {
  border-color: oklch(0.55 0.006 70 / 0.32);
}
:root[data-theme="light"] .work-bridge__filters a { background: oklch(0.5 0.006 70 / 0.04); }
:root[data-theme="light"] .work-bridge__filters a:hover,
:root[data-theme="light"] .service-next a:hover,
:root[data-theme="light"] .portfolio-routing__links a:hover {
  border-color: oklch(0.42 0.006 70 / 0.55); color: var(--fg);
}

/* Kinetic H1 rotating word → brand yellow (big-headline accent, like the home hero) */
:root[data-theme="light"] .h1-rot { color: var(--accent-hi); }

/* Big-headline accent words stay brand-yellow in light (not the monochrome --rec).
   Covers both .accent spans and inline color:var(--rec) highlight spans in titles. */
:root[data-theme="light"] .hero h1 .accent,
:root[data-theme="light"] .sec-title .accent,
:root[data-theme="light"] .studio__title .accent,
:root[data-theme="light"] .svc__title .accent,
:root[data-theme="light"] .sub-head h2 .accent,
:root[data-theme="light"] .cs-title .accent,
:root[data-theme="light"] .cs-sec__title .accent,
:root[data-theme="light"] .cs-lead .accent,
:root[data-theme="light"] h1 [style*="--rec"],
:root[data-theme="light"] h2 [style*="--rec"],
:root[data-theme="light"] h3 [style*="--rec"] { color: var(--accent-hi) !important; }

/* Service tiles: hover flips to solid black with light content (like .svc on home) */
:root[data-theme="light"] .service-tile:hover,
:root[data-theme="light"] .service-tile:focus-visible {
  background: oklch(0.14 0.004 60); color: #f4f0e6;
}
:root[data-theme="light"] .service-tile:hover h3,
:root[data-theme="light"] .service-tile:focus-visible h3 { color: #f4f0e6; }
:root[data-theme="light"] .service-tile:hover p,
:root[data-theme="light"] .service-tile:focus-visible p { color: oklch(0.78 0.008 75); }
:root[data-theme="light"] .service-tile:hover span,
:root[data-theme="light"] .service-tile:focus-visible span,
:root[data-theme="light"] .service-tile:hover::after,
:root[data-theme="light"] .service-tile:focus-visible::after,
:root[data-theme="light"] .service-tile:hover .end-link,
:root[data-theme="light"] .service-tile:focus-visible .end-link { color: #ffd200; }
:root[data-theme="light"] .service-tile:hover i,
:root[data-theme="light"] .service-tile:focus-visible i { color: #f4f0e6; }

/* Subpages have no dark video hero → nav reads as the light "scrolled" bar even at the top */
:root[data-theme="light"] body:not(:has(.hero)) .nav:not(.is-stuck) {
  --fg: oklch(0.20 0.014 60);
  --fg-dim: oklch(0.42 0.014 60);
  --line-soft: oklch(0.9 0.006 85 / 0.4);
  background: oklch(0.965 0.006 85 / 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid oklch(0.9 0.006 85 / 0.4);
}

/* light-theme mobile burger: a dark chip with dark bars is invisible on the
   light bar — give it a light chip, dark border and solid black bars */
:root[data-theme="light"] .nav__burger {
  background: oklch(0.9 0.007 85 / 0.85);
  border-color: oklch(0.5 0.012 60);
}
:root[data-theme="light"] .nav__burger span { background: #17140a; }
:root[data-theme="light"] .nav__burger.is-open {
  background: #fff;
  border-color: #17140a;
}
:root[data-theme="light"] .nav__burger.is-open span { background: #17140a; }

/* Subpages have no video hero, so the WebGL smoke is the only moving background —
   the shader is tuned very dark for behind-video use, so lift it on subpages
   (dark theme only) to make the animated background actually visible. */
:root:not([data-theme="light"]) body:not(:has(.hero)) .flow-bg-canvas {
  filter: brightness(1.35) contrast(1.02);
}

/* Case-study cover always sits over a dark photo → keep it cinematic-dark in light too
   (light text, brand-yellow accents, dark bottom fade) so the title stays readable. */
:root[data-theme="light"] .cs-hero {
  --fg: oklch(0.96 0.006 80);
  --fg-dim: oklch(0.80 0.008 75);
  --fg-faint: oklch(0.62 0.008 75);
  --rec: #ffd200;
  --rec-glow: rgb(255 210 0 / 0.45);
  --line-soft: oklch(0.96 0.006 80 / 0.18);
  color: oklch(0.96 0.006 80);
}
:root[data-theme="light"] .cs-title { color: oklch(0.96 0.006 80); }

/* light: more brand-yellow on interactive UI — menu highlight, filter chips, ghost buttons */
:root[data-theme="light"] .nav__menu a::after { background: var(--accent-hi); }
:root[data-theme="light"] .chip.is-on,
:root[data-theme="light"] .chip:hover { background: #ffd200; border-color: #ffd200; color: #17140a; }
:root[data-theme="light"] .btn:not(.btn--primary)::before { background: #ffd200; }
:root[data-theme="light"] .btn:not(.btn--primary):hover { color: #17140a; border-color: #ffd200; }

/* light-theme blog: --rec is grey in light, so filter chips, CTA buttons, the
   "FEATURED" tag and "Czytaj dalej" links all went muddy. Force brand yellow. */
:root[data-theme="light"] .blog-topics a.is-active,
:root[data-theme="light"] .blog-topics a:hover { background: #ffd200; border-color: #ffd200; color: #17140a; }
:root[data-theme="light"] .blog-feature__cta,
:root[data-theme="light"] .article__cta a { background: #ffd200; color: #17140a; }
:root[data-theme="light"] .blog-feature__media span { color: #ffd200; }
:root[data-theme="light"] .blog-post__more { color: #8a6d00; }
:root[data-theme="light"] .blog-post:hover { border-color: #ffd200; }
:root[data-theme="light"] .blog-post:hover .blog-post__more,
:root[data-theme="light"] .blog-post:hover .blog-post__title { color: #17140a; }
:root[data-theme="light"] .blog-feature h2 a.blog-post__title:hover,
:root[data-theme="light"] .blog-post h3 a.blog-post__title:hover { color: #8a6d00; }
:root[data-theme="light"] .eyebrow .tick { background: var(--accent-hi); }
.sub-hero__meta span { transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
.sub-hero__meta span:hover { color: var(--rec); border-color: rgb(255 210 0 / .5); }
:root[data-theme="light"] .sub-hero__meta span:hover { color: #17140a; background: #ffd200; border-color: #ffd200; }
:root[data-theme="light"] .cs-hero__media::after {
  background:
    linear-gradient(180deg, oklch(0.12 0.004 60 / .55) 0%, transparent 26%, transparent 40%, oklch(0.12 0.004 60 / .82) 88%, oklch(0.11 0.004 60) 100%),
    repeating-linear-gradient(0deg, transparent 0 3px, oklch(0 0 0 / .16) 3px 4px);
}

/* ============================================================
   MOBILE BOTTOM BAR — Onet-style quick dock (phones only)
   ============================================================ */
.mbar { display: none; }

@media (max-width: 760px) {
  .mbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 240;
    height: 62px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: oklch(0.145 0.004 60 / 0.92);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    backdrop-filter: blur(18px) saturate(1.1);
    border-top: 1px solid var(--line-soft);
    box-shadow: 0 -14px 40px oklch(0 0 0 / 0.42);
    transform: translateZ(0); -webkit-transform: translateZ(0);
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
  }
  .mbar__item {
    display: grid;
    grid-template-rows: 24px auto;
    justify-items: center;
    align-content: center;
    gap: 4px;
    height: 62px;
    min-width: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: oklch(0.74 0.008 75);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s var(--ease);
  }
  .mbar__ico { display: grid; place-items: center; width: 42px; height: 30px; border-radius: 11px; transition: background .15s var(--ease); }
  .mbar__item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .mbar__lbl {
    font: 700 8.5px/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
  }
  .mbar__item:active { color: #ffd200; }

  /* clear press/selection feedback (no hover on touch) — yellow pill under the icon */
  .mbar__item:not(.mbar__top):hover,
  .mbar__item:not(.mbar__top):active,
  .mbar__item:not(.mbar__top):focus-visible { color: #ffd200; outline: none; }
  .mbar__item:not(.mbar__top):hover .mbar__ico,
  .mbar__item:not(.mbar__top):active .mbar__ico,
  .mbar__item:not(.mbar__top):focus-visible .mbar__ico { background: rgb(255 210 0 / 0.18); }

  /* center · raised yellow scroll-to-top puck */
  .mbar__top { color: #17140a; }
  .mbar__top .mbar__ico {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: #ffd200;
    margin-top: -26px;
    box-shadow: 0 10px 24px oklch(0 0 0 / .5), 0 0 0 5px var(--bg);
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  }
  .mbar__top svg { width: 24px; height: 24px; stroke: #17140a; stroke-width: 2.2; }
  .mbar__top .mbar__lbl { color: oklch(0.74 0.008 75); }
  .mbar__top:active .mbar__ico { transform: translateY(-2px) scale(1.05); }
  .mbar__top:active { color: #17140a; }

  /* declutter the top nav: switchers + REC move to the dock */
  .nav__theme, .nav__lang, .nav__tc { display: none !important; }
  /* the floating side scroll-top is replaced by the dock's center puck */
  .scroll-top { display: none !important; }
  /* keep page content + footer clear of the fixed dock */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .floating-socials { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

  /* light theme dock */
  :root[data-theme="light"] .mbar {
    background: oklch(0.99 0.006 85 / 0.94);
    border-top-color: rgb(23 20 10 / 0.12);
    box-shadow: 0 -12px 34px oklch(0 0 0 / .14);
  }
  :root[data-theme="light"] .mbar__item { color: oklch(0.44 0.01 70); }
  :root[data-theme="light"] .mbar__item:active { color: #17140a; }
  :root[data-theme="light"] .mbar__item:not(.mbar__top):hover,
  :root[data-theme="light"] .mbar__item:not(.mbar__top):active,
  :root[data-theme="light"] .mbar__item:not(.mbar__top):focus-visible { color: #17140a; }
  :root[data-theme="light"] .mbar__item:not(.mbar__top):hover .mbar__ico,
  :root[data-theme="light"] .mbar__item:not(.mbar__top):active .mbar__ico,
  :root[data-theme="light"] .mbar__item:not(.mbar__top):focus-visible .mbar__ico { background: #ffd200; }
  :root[data-theme="light"] .mbar__top .mbar__ico { box-shadow: 0 10px 24px oklch(0 0 0 / .22), 0 0 0 5px var(--bg); }
  :root[data-theme="light"] .mbar__top .mbar__lbl { color: oklch(0.44 0.01 70); }
}

/* ============================================================
   TOUCH PERFORMANCE — Android Chrome recomputes backdrop-filter blur over
   scrolling content every frame and janks hard (iOS composites it on the GPU
   and stays smooth). On coarse pointers we drop every blur and swap the
   frosted transparency for near-opaque surfaces so scroll stays buttery.
   ============================================================ */
@media (pointer: coarse) {
  .nav, .nav.is-stuck, .nav__burger, .nav__menu,
  .card__tc, .work-reel__counter, .hero__reel, .pack-output, .pack-frame,
  .cform, .cookie-bar, .mbar, .floating-socials a, .scroll-top,
  :root[data-theme="light"] .nav.is-stuck {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* fixed chrome that sits over moving content → make it fully opaque */
  .nav.is-stuck { background: oklch(0.14 0.004 60 / 0.98); }
  :root[data-theme="light"] .nav.is-stuck { background: oklch(0.965 0.006 85 / 0.98); }
  .mbar { background: oklch(0.13 0.004 60 / 0.99); }
  :root[data-theme="light"] .mbar { background: oklch(0.985 0.006 85 / 0.99); }
  .nav__burger { background: oklch(0.16 0.004 60 / 0.9); }
  .nav__menu { background: oklch(0.155 0.004 60 / 0.99); }
  .card__tc { background: oklch(0.1 0.004 60 / 0.86); }
  .work-reel__counter { background: oklch(0.12 0.004 60 / 0.92); }
  .cform { background: oklch(0.155 0.004 60 / 0.94); }
  /* full-screen mix-blend grain forces a whole-viewport recomposite every
     scroll frame on Android — drop the texture on touch (vignette is cheap, stays) */
  .grain { display: none !important; }
}

.clip__desc{ margin:8px 0 0; font-size:clamp(12.5px,.9vw,13.5px); line-height:1.45; color:rgb(255 255 255 / .58); max-width:26ch; text-wrap:pretty; }

/* Services hub: clean 3×2 grid of equal tiles + solo hero (no side panel) */
.sub-hero__grid--solo { grid-template-columns: 1fr; }
.service-hub__grid--six { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.service-hub__grid--six .service-tile { min-height: clamp(230px, 26vh, 320px); }
.service-hub__grid--six .service-tile h3 { min-height: 2em; margin-top: clamp(26px,3vh,40px); font-size: clamp(26px,2.4vw,38px); max-width: min(16ch, calc(100% - 56px)); }
.service-hub__grid--six .service-tile p { margin-bottom: clamp(24px,3vh,40px); }
@media (max-width: 980px) { .service-hub__grid--six { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .service-hub__grid--six { grid-template-columns: 1fr; } }

/* Services hub — editorial rows */
.svcA{border-top:1px solid var(--line);margin-top:clamp(24px,4vh,44px)}
.svcA__row{position:relative;display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,.9fr) 54px;align-items:center;gap:clamp(16px,3vw,44px);
  padding:clamp(22px,3vh,34px) 4px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;isolation:isolate}

.svcA__no{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;color:var(--fg-faint);transition:color .4s var(--ease)}
.svcA__t{font-family:var(--font-display);font-weight:760;font-stretch:104%;letter-spacing:-.02em;line-height:1;
  font-size:clamp(28px,3.6vw,54px);margin:0;transition:color .4s var(--ease)}
.svcA__d{margin:0;font-size:clamp(13.5px,1vw,15px);line-height:1.5;color:var(--fg-dim);max-width:38ch;transition:color .4s var(--ease)}
.svcA__go{justify-self:end;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  font-size:15px;color:var(--fg-dim);transition:transform .45s var(--ease),border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease)}
.svcA__row:hover .svcA__no,.svcA__row:hover .svcA__t,.svcA__row:hover .svcA__d{color:#ffd200}
.svcA__row:hover{border-bottom-color:rgb(255 210 0 / .4)}
.svcA__row:hover .svcA__go{border-color:#ffd200;color:#ffd200;transform:rotate(-45deg)}
[data-theme="light"] .svcA__row:hover .svcA__no,[data-theme="light"] .svcA__row:hover .svcA__t,[data-theme="light"] .svcA__row:hover .svcA__d{color:#7a6100}
[data-theme="light"] .svcA__row:hover{border-bottom-color:rgb(122 97 0 / .45)}
[data-theme="light"] .svcA__row:hover .svcA__go{border-color:#7a6100;color:#7a6100}
@media(max-width:820px){
  .svcA__row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"no go" "t t" "d d";align-items:start;gap:10px 14px;padding:clamp(20px,2.6vh,28px) 2px}
  .svcA__row:hover{padding-left:2px}
  .svcA__no{grid-area:no}
  .svcA__t{grid-area:t;font-size:clamp(26px,7.4vw,38px)}
  .svcA__d{grid-area:d;max-width:none;font-size:14px}
  .svcA__go{grid-area:go;justify-self:end;width:38px;height:38px}
}


/* ============ SERVICE DETAIL — szablon "dossier" (.sd) ============ */
.sd{--acc:#ffd200}
.sd__hero{padding-block:clamp(96px,14vh,150px) clamp(34px,5vh,54px)}
.sd__kick{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-faint)}
.sd__kick i{width:16px;height:1px;background:var(--acc);display:block}
.sd__h1{margin:clamp(16px,2vw,26px) 0 0;font-size:clamp(44px,8.4vw,116px);line-height:.92;letter-spacing:-.035em;font-weight:820;text-wrap:balance}
.sd__lead{margin:clamp(24px,3vw,38px) 0 0;max-width:60ch;font-size:clamp(15px,1.24vw,19px);line-height:1.62;color:var(--fg-dim);text-wrap:pretty}
.sd__lead+.sd__lead{margin-top:14px}
.sd__lead b{color:var(--fg);font-weight:600}
.sd__facts{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--line-soft)}
.sd__fact{flex:1 1 160px;padding:16px 20px 16px 0;border-bottom:1px solid var(--line-soft)}
.sd__fact span{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:7px}
.sd__fact strong{font-size:clamp(14px,1.04vw,16px);font-weight:600}
.sd__reel{margin:clamp(30px,4vh,52px) 0 0;aspect-ratio:21/9;overflow:hidden;background:var(--bg-2);border:1px solid var(--line-soft);position:relative}
.sd__reel video,.sd__reel img{width:100%;height:100%;object-fit:cover;display:block}
.sd__reel figcaption{position:absolute;left:0;bottom:0;display:flex;align-items:baseline;gap:14px;padding:12px 18px;background:rgba(8,8,8,.72);backdrop-filter:blur(8px);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.sd__reel figcaption b{color:var(--acc);letter-spacing:.1em}

.sd__body{display:block;padding-bottom:clamp(60px,9vh,110px)}
.sd__gin p{max-width:78ch}
.sd__toc{position:sticky;top:clamp(96px,12vh,132px);align-self:start;display:flex;flex-direction:column;gap:2px}
.sd__toc>a{display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line-soft);font-size:13.5px;color:var(--fg-dim);text-decoration:none;transition:color .25s var(--ease)}
.sd__toc>a i{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--fg-faint);font-style:normal}
.sd__toc>a:hover,.sd__toc>a:hover i{color:var(--acc)}
.sd__toccta{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft)}
.sd__toccta p{font-size:13px;line-height:1.55;color:var(--fg-dim);margin:0 0 12px}
.sd__toccta a{display:inline;border-top:0;padding:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);text-decoration:none;border-bottom:1px solid rgba(255,210,0,.4);padding-bottom:3px}

.sd__blk{padding:clamp(38px,5.4vh,64px) 0;border-top:1px solid var(--line-soft)}
.sd__blk:first-child{border-top:0;padding-top:0}
.sd__blkh{display:flex;align-items:baseline;gap:14px;margin-bottom:clamp(20px,2.4vw,30px)}
.sd__blkh h2{font-size:clamp(24px,3vw,40px);line-height:1.02;letter-spacing:-.02em;font-weight:760;margin:0}

.sd__g{border-top:1px solid var(--line-soft)}
.sd__g:last-of-type{border-bottom:1px solid var(--line-soft)}
.sd__g>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 22px;gap:12px;align-items:center;padding:clamp(15px,1.7vw,20px) 0;transition:color .25s var(--ease)}
.sd__g>summary::-webkit-details-marker{display:none}
.sd__g>summary:hover{color:var(--acc)}
.sd__g>summary i{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--fg-faint);font-style:normal;transition:color .25s var(--ease)}
.sd__g>summary:hover i,.sd__g[open]>summary i{color:var(--acc)}
.sd__g h3{margin:0;font-size:clamp(17px,1.5vw,23px);font-weight:700;letter-spacing:-.014em}
.sd__pm{position:relative;width:14px;height:14px;justify-self:end;opacity:.6}
.sd__pm:before,.sd__pm:after{content:"";position:absolute;background:currentColor;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.sd__pm:before{left:0;top:6.5px;width:14px;height:1px}
.sd__pm:after{left:6.5px;top:0;width:1px;height:14px}
.sd__g[open] .sd__pm:after{transform:scaleY(0);opacity:0}
.sd__g[open] .sd__pm{opacity:1;color:var(--acc)}
.sd__gin{padding:0 0 clamp(20px,2.4vw,28px)}
.sd__g p{margin:0 0 15px;max-width:64ch;font-size:14.4px;line-height:1.62;color:var(--fg-dim);text-wrap:pretty}
.sd__tags{display:flex;flex-wrap:wrap;gap:6px}
.sd__tags span{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-dim);border:1px solid var(--line-soft);border-radius:999px;padding:6px 12px;transition:.22s var(--ease)}
.sd__tags span:hover{color:#111;background:var(--acc);border-color:var(--acc)}

.sd__steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px}
.sd__step{background:var(--bg);box-shadow:0 0 0 1px var(--line-soft);padding:clamp(18px,1.9vw,26px);transition:background .3s var(--ease)}
.sd__step:hover{background:var(--bg-2)}
.sd__step i{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;color:var(--fg-faint);font-style:normal;transition:color .3s var(--ease)}
.sd__step:hover i{color:var(--acc)}
.sd__step h3{margin:0;font-size:clamp(15px,1.16vw,17.5px);font-weight:700;letter-spacing:-.012em;text-wrap:balance;overflow-wrap:anywhere;hyphens:auto}
.sd__step p{margin:11px 0 0;font-size:13.4px;line-height:1.56;color:var(--fg-dim);text-wrap:pretty}

.sd__work{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px)}
.sd__wi{text-decoration:none;color:inherit;display:block}
.sd__wm{aspect-ratio:4/3;overflow:hidden;background:var(--bg-2);border:1px solid var(--line-soft)}
.sd__wm video,.sd__wm img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.sd__wi:hover .sd__wm img,.sd__wi:hover .sd__wm video{transform:scale(1.045)}
.sd__wi span{display:block;margin-top:11px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint)}
.sd__wi h3{margin:5px 0 0;font-size:16px;font-weight:640}
.sd__wi:hover h3{color:var(--acc)}
.sd__more{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft)}
.sd__more a{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim);text-decoration:none;border:1px solid var(--line-soft);border-radius:999px;padding:9px 15px}
.sd__more a:hover,.sd__more a.is-lead{color:#111;background:var(--acc);border-color:var(--acc)}

.fmt-lead{margin:0;font-family:var(--font-display);font-weight:800;font-stretch:104%;font-size:clamp(26px,2.6vw,40px);line-height:1.04;letter-spacing:-.022em;text-wrap:pretty}
.fmt-p{margin:16px 0 0;max-width:62ch;font-size:15px;line-height:1.6;color:var(--fg-dim);text-wrap:pretty}
.fmt-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(20px,2.4vw,34px);align-items:center;margin-top:clamp(24px,3vh,40px)}
.fmt2{position:relative;background:#0c0b09;border:1px solid rgb(255 255 255 / .1);border-radius:14px;padding:clamp(16px,1.8vw,24px);overflow:hidden}
.fmt2::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgb(255 255 255 / .022) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .022) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.fmt2__hud{position:relative;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgb(255 255 255 / .55);margin-bottom:14px}
.fmt2__hud .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#ffd200;margin-right:7px;vertical-align:middle}
.fmt2__master{position:relative;border-radius:9px;overflow:hidden;background:#111;border:1px solid rgb(255 255 255 / .1)}
.fmt2__frames{display:flex;gap:4px;padding:9px}
.fmt2__frames i{flex:1;height:clamp(40px,5vw,58px);border-radius:3px;background:linear-gradient(135deg,rgb(255 210 0 / .24),rgb(255 255 255 / .05))}
.fmt2__frames i:nth-child(even){background:linear-gradient(135deg,rgb(255 255 255 / .1),rgb(255 255 255 / .03))}
.fmt2__sprk{height:11px;background:#0a0a09;background-image:repeating-linear-gradient(90deg,transparent 0 8px,rgb(255 255 255 / .13) 8px 13px)}
.fmt2__mlbl{position:absolute;top:8px;left:10px;white-space:nowrap;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;color:rgb(255 255 255 / .72);background:rgb(0 0 0 / .5);padding:3px 7px;border-radius:3px}
.fmt2__split{position:relative;display:flex;align-items:center;gap:12px;margin:14px 0;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#ffd200;white-space:nowrap}
.fmt2__split::before,.fmt2__split::after{content:"";flex:1;height:1px;background:rgb(255 210 0 / .26)}
.fmt2__outs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.fmt2__out{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:9px;background:rgb(255 255 255 / .03);border:1px solid rgb(255 255 255 / .1)}
.fmt2__shape{flex:none;background:rgb(255 210 0 / .16);border:1px solid rgb(255 210 0 / .5);border-radius:2px}
.s-169{width:40px;height:23px}.s-916{width:18px;height:33px}.s-11{width:29px;height:29px}.s-ban{width:44px;height:15px}
.fmt2__out .r{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;color:#ffd200;margin-bottom:4px}
.fmt2__out h4{font-family:var(--font-display);font-weight:720;font-stretch:104%;font-size:15px;line-height:1.05;color:#f4f0e6;margin:0}
.fmt-copy__kick{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-faint)}
.fmt-copy__kick i{width:16px;height:1px;background:var(--acc)}
.fmt-copy__title{margin:14px 0 0;font-family:var(--font-display);font-weight:800;font-stretch:104%;font-size:clamp(22px,2vw,30px);line-height:1.06;letter-spacing:-.02em;text-wrap:pretty}
.fmt-copy__p{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:var(--fg-dim);text-wrap:pretty}
.fmt-copy__cta{display:inline-block;margin-top:20px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:#111;background:var(--acc);border:1px solid var(--acc);border-radius:999px;padding:12px 18px}
.fmt-copy__cta:hover{background:transparent;color:var(--acc)}
@media(max-width:420px){.fmt2__outs{grid-template-columns:1fr}}
[data-theme="light"] .fmt2{background:var(--bg-2);border-color:var(--line-soft)}
[data-theme="light"] .fmt2::before{background-image:linear-gradient(oklch(0.5 0.006 70 / .05) 1px,transparent 1px),linear-gradient(90deg,oklch(0.5 0.006 70 / .05) 1px,transparent 1px)}
[data-theme="light"] .fmt2__hud{color:var(--fg-faint)}
[data-theme="light"] .fmt2__master{background:oklch(0.93 0.005 80);border-color:var(--line-soft)}
[data-theme="light"] .fmt2__frames i{background:linear-gradient(135deg,rgb(255 210 0 / .55),oklch(0.86 0.005 80))}
[data-theme="light"] .fmt2__frames i:nth-child(even){background:linear-gradient(135deg,oklch(0.88 0.005 80),oklch(0.82 0.005 80))}
[data-theme="light"] .fmt2__sprk{background:oklch(0.87 0.005 80);background-image:repeating-linear-gradient(90deg,transparent 0 8px,oklch(0.62 0.006 70 / .35) 8px 13px)}
[data-theme="light"] .fmt2__mlbl{color:var(--fg);background:oklch(1 0 0 / .75)}
[data-theme="light"] .fmt2__split{color:#8a6f00}
[data-theme="light"] .fmt2__split::before,[data-theme="light"] .fmt2__split::after{background:rgb(196 160 0 / .35)}
[data-theme="light"] .fmt2__out{background:oklch(1 0 0 / .6);border-color:var(--line-soft)}
[data-theme="light"] .fmt2__out .r{color:#8a6f00}
[data-theme="light"] .fmt2__out h4{color:var(--fg)}
[data-theme="light"] .fmt-copy__cta{color:#17140a;background:#ffd200;border-color:#ffd200}
[data-theme="light"] .fmt-copy__cta:hover{background:transparent;color:#7a6100}
[data-theme="light"] .fmt-copy__kick i{background:#ffd200}

[data-theme="light"] .sd__toccta a,
[data-theme="light"] .sd__step:hover i,
[data-theme="light"] .sd__g>summary:hover i,
[data-theme="light"] .sd__g[open]>summary i{color:var(--fg-dim)}
[data-theme="light"] .sd__g[open] .sd__pm{color:var(--fg-dim)}
[data-theme="light"] .sd__g>summary:hover,
[data-theme="light"] .sd__toc>a:hover,
[data-theme="light"] .sd__toc>a:hover i{color:var(--fg)}
[data-theme="light"] .sd__toccta a{border-bottom-color:var(--line-soft)}

@media(max-width:1320px){.sd__steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){
 .sd__toc{position:static;flex-direction:row;flex-wrap:wrap;gap:6px}
 .sd__toc>a{border-top:0;border:1px solid var(--line-soft);padding:8px 11px;grid-template-columns:auto auto}
 .sd__toccta{display:none}
 .sd__gin{padding-left:0}
 .sd__steps{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sd__work{grid-template-columns:1fr 1fr}
 .sd__reel{aspect-ratio:16/9}
}
@media(max-width:560px){.sd__work,.sd__steps{grid-template-columns:1fr}}


/* --- warianty abonamentu --- */
.sd__vars{border-top:1px solid var(--line-soft)}
.sd__var{display:grid;grid-template-columns:38px minmax(0,.9fr) minmax(0,1.6fr) 42px;gap:clamp(12px,2vw,26px);align-items:center;padding:22px 0;border-bottom:1px solid var(--line-soft);text-decoration:none;color:inherit;transition:background .3s var(--ease)}
.sd__var:hover{background:var(--bg-2)}
.sd__var i{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;color:var(--fg-faint);font-style:normal}
.sd__var h3{margin:0;font-size:clamp(19px,1.9vw,27px);font-weight:720;letter-spacing:-.018em}
.sd__var p{margin:0;font-size:14px;line-height:1.55;color:var(--fg-dim);text-wrap:pretty}
.sd__var em{justify-self:end;font-style:normal;width:38px;height:38px;border:1px solid var(--line-soft);border-radius:50%;display:grid;place-items:center;font-size:14px;color:var(--fg-dim)}
.sd__var:hover em{color:#111;background:#ffd200;border-color:#ffd200}
.sd__var.is-on h3,.sd__var.is-on i{color:#ffd200}
.sd__var.is-on em{border-color:#ffd200;color:#ffd200}
.sd__note{margin:18px 0 0;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
[data-theme="light"] .sd__var.is-on h3,[data-theme="light"] .sd__var.is-on i{color:var(--fg)}
[data-theme="light"] .sd__var.is-on em{border-color:var(--line-soft);color:var(--fg-dim)}
@media(max-width:768px){
 .sd__var{grid-template-columns:30px 1fr;row-gap:8px}
 .sd__var p{grid-column:2/-1}
 .sd__var em{display:none}
}

.sd__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(26px,3vw,36px)}


/* ============================================================
   TEAM — portrety w wycinkach + inicjały w obrysie na hover
   ============================================================ */
.team__grid--photos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.team__grid--photos .team-card__photo {
  aspect-ratio: 4/3.7;
  background: linear-gradient(168deg, #1a1b1d 0%, #0b0c0d 78%);
  position: relative;
  isolation: isolate;
  display: block;
}
.team__grid--photos .team-card__photo .tc-ini {
  position: absolute;
  inset: 10% 0 auto 0;
  width: 100%;
  margin: 0;
  display: block;
  text-align: center;
  transform: translateY(30px) scale(.9);
  transform-origin: center top;
  font-family: var(--font-display);
  font-weight: 800; font-stretch: 112%;
  font-size: clamp(76px, 12vw, 168px);
  line-height: .8; letter-spacing: -.05em;
  white-space: nowrap;
  color: #161719;
  -webkit-text-stroke: 4px #ffd200;
  paint-order: stroke fill;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .7s var(--ease);
}
.team__grid--photos .team-card:hover .tc-ini,
.team__grid--photos .team-card:focus-within .tc-ini { opacity: 1; transform: translateY(0) scale(1); }
.team__grid--photos .team-card__photo .tc-ini--solo {
  inset: 50% 0 auto 0;
  opacity: .85;
  transform: translateY(-50%) scale(1);
  font-size: clamp(52px, 7vw, 96px);
}
.team__grid--photos .team-card:hover .tc-ini--solo { opacity: 1; transform: translateY(-50%) scale(1.05); }
.team__grid--photos .team-card__photo img.tc-ph {
  position: relative; z-index: 1;
  display: block;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center bottom;
  filter: none;
  transform: scale(1);
  transform-origin: center bottom;
  transition: filter .5s var(--ease), transform .7s var(--ease);
}
.team__grid--photos .team-card:hover img.tc-ph { filter: none; transform: scale(1.012); }
.team__grid--photos .team-card__photo::after { z-index: 3; }
@media (max-width: 1280px){ .team__grid--photos { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 1000px){ .team__grid--photos { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 420px){
  .team__grid--photos { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .team__grid--photos .team-card__photo { aspect-ratio: 4/4.1; }
  .tc-ini { -webkit-text-stroke-width: 3px; }
}
@media (prefers-reduced-motion: reduce){
  .tc-ini, .tc-ph { transition: none; }
}

.team__grid--photos .team-card__photo .tc-ini--front { z-index: 2; inset: 4% 0 auto 0; }

/* ===== Service detail — układ dwukolumnowy (UX/UI, Strony) ===== */
.sd__split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);column-gap:clamp(40px,6vw,120px);align-items:start;padding-block:clamp(72px,11vh,136px)}
.sd__blk.sd__split:first-child{padding-top:clamp(56px,8vh,96px)}
.sd__splitL{position:sticky;top:clamp(96px,12vh,132px)}
.sd__split .sd__blkh{flex-direction:column;align-items:flex-start;gap:18px;margin:0}
.sd__split .sd__blkh h2{font-size:clamp(28px,3.2vw,50px);line-height:1.02;text-wrap:balance}
.sd__splitR>:first-child{margin-top:0}
.sd__splitR .fmt-lead{font-size:clamp(28px,3vw,46px);line-height:1.06}
.sd__splitR .fmt-p{max-width:62ch;font-size:clamp(16px,1.18vw,19px);line-height:1.66;margin-top:20px}
.sd__splitR .fmt-lead+.fmt-p{margin-top:28px}
.sd__splitR .sd__tags{margin-top:30px!important}
.sd__splitR .sd__more{margin-top:40px}
.sd__splitR .sd__steps{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.sd__splitR .svcA{border-top:1px solid var(--line)}
@media(max-width:1000px){
  .sd__split{grid-template-columns:minmax(0,1fr);row-gap:28px;padding-block:clamp(56px,8vh,88px)}
  .sd__splitL{position:static}
}