/* Homepage anchor targets used by the primary navigation. */
#jak-to-dziala,
#realizacje,
#ty-w-tym-czasie {
  scroll-margin-top: calc(var(--header-height-desktop) + 1rem);
}

.hero {
  min-height: 100svh;
  margin-top: calc(-1 * var(--header-height-mobile));
  padding-top: calc(var(--header-height-mobile) + 1.65rem);
  padding-bottom: 1.75rem;
  overflow: hidden;
  overflow: clip;
  position: relative;
}
.hero__inner { display: grid; gap: 1.55rem; }
.hero__copy { position: relative; z-index: calc(var(--z-art) + 5); }
.hero__eyebrow-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.hero__side-note { display: none; font-family: var(--font-editorial); font-size: .9rem; font-style: italic; color: var(--color-editorial-secondary); transform: rotate(-2deg); }
.hero__title {
  max-width: 11ch;
  font-size: clamp(3.12rem, 13.1vw, 4.25rem);
  line-height: .91;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.hero__title > span { display: block; }
.hero__title-accent { position: relative; z-index: 1; width: fit-content; margin-top: .12em; padding: .06em .09em .095em .04em; color: var(--color-ink-fixed); }
.hero__title-accent::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: .05em -.12em -.02em -.08em;
  background: var(--color-brand);
  clip-path: polygon(1% 8%, 99% 0, 97% 88%, 73% 96%, 42% 91%, 16% 100%, 0 86%);
  transform: rotate(-.6deg);
}
.hero__title-accent > span { display: block; }
.hero__lead { max-width: 36rem; margin-top: 1.2rem; font-size: clamp(1rem, 1.3vw, 1.16rem); }
.hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 1.25rem; }
.hero__microproof {
  max-width: 35rem;
  margin-top: 1.3rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.45;
  letter-spacing: .055em;
}
.hero__microproof span { margin-inline: .3rem; color: var(--color-brand); }

.hero__artboard {
  position: relative;
  width: min(100%, 580px);
  aspect-ratio: 4 / 3;
  margin: clamp(2.2rem, 8vw, 3rem) auto 0;
  isolation: isolate;
}
/*
 * Hero collage coordinate system.
 * Every layer is anchored by its VISUAL CENTER (X/Y) inside one fixed-ratio
 * artboard. Responsive sizing changes the artboard size, not layer geometry.
 * `translate` is intentionally separate from `transform`, so entrance motion
 * cannot break the layer anchor.
 */
.hero__layer {
  position: absolute;
  left: var(--hero-x, 50%);
  top: var(--hero-y, 50%);
  right: auto;
  bottom: auto;
  width: var(--hero-w, auto);
  height: auto;
  max-width: none;
  translate: -50% -50%;
  rotate: var(--hero-rotate, 0deg);
  transform-origin: 50% 50%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.hero__halftone {
  --hero-x: 19%;
  --hero-y: 46%;
  --hero-w: 34%;
  --hero-rotate: -2.4deg;
  z-index: 0;
  height: 66%;
  color: var(--color-text);
  opacity: .62;
  background-image: radial-gradient(circle, currentColor 0 1.2px, transparent 1.35px);
  background-size: 6px 6px;
  clip-path: polygon(9% 6%, 92% 0, 100% 15%, 93% 28%, 100% 43%, 92% 56%, 100% 71%, 89% 87%, 71% 100%, 52% 94%, 34% 100%, 15% 91%, 0 78%, 8% 62%, 0 47%, 7% 31%, 0 17%);
}
.hero__paper { --hero-x: 59%; --hero-y: 52.25%; --hero-w: 66%; --hero-rotate: -1.8deg; z-index: 1; }
.hero__product { --hero-x: 76.5%; --hero-y: 19.75%; --hero-w: 27%; --hero-rotate: 4deg; z-index: 2; }
.hero__creator {
  --hero-x: 58%;
  --hero-y: 52.6%;
  --hero-w: 34%;
  --hero-photo-shadow: drop-shadow(3px 4px 0 rgba(16,16,16,.12));
  z-index: 4;
}
[data-theme="dark"] .hero__creator {
  --hero-photo-shadow: drop-shadow(0 0 1px rgba(255,252,255,.72)) drop-shadow(4px 5px 0 rgba(0,0,0,.18));
}
.hero__store { --hero-x: 19.5%; --hero-y: 59.15%; --hero-w: 13%; --hero-rotate: 2.5deg; z-index: 6; box-shadow: var(--shadow-editorial); }
.hero__printer { --hero-x: 26%; --hero-y: 80.75%; --hero-w: 24%; --hero-rotate: -4deg; z-index: 7; }
.hero__parcel { --hero-x: 64%; --hero-y: 82.2%; --hero-w: 20%; --hero-rotate: 2.5deg; z-index: 6; }
.hero__returns { --hero-x: 90.5%; --hero-y: 83.65%; --hero-w: 17%; --hero-rotate: 2deg; z-index: 7; }
.hero__hand { --hero-x: 88%; --hero-y: 28.15%; --hero-w: 24%; --hero-rotate: 8deg; display: block; z-index: 8; }

/*
 * Hero photo interaction. Raster layers stay monochrome as the default collage
 * state. On devices with a real hover pointer only the hovered layer regains
 * its source colour and gets a tiny physical lift; geometry never changes.
 */
.hero__photo {
  filter: grayscale(1) saturate(.12) contrast(.97) var(--hero-photo-shadow, drop-shadow(0 0 0 rgba(0,0,0,0)));
  pointer-events: auto;
  transition:
    filter 340ms cubic-bezier(.2,.8,.2,1),
    scale 340ms cubic-bezier(.2,.8,.2,1),
    translate 340ms cubic-bezier(.2,.8,.2,1),
    rotate 340ms cubic-bezier(.2,.8,.2,1);
  will-change: filter, scale;
}

/*
 * Hero notes are pure CSS-mask layers sourced from transparent SVG artwork.
 * Light mode: black. Dark mode: white. Hover never changes colour; it only
 * adds a small physical paper-pop (scale / micro lift / tilt).
 */
.hero__note {
  z-index: 3;
  aspect-ratio: 2 / 1;
  color: var(--color-text);
  line-height: .9;
  pointer-events: auto;
  transition:
    scale 260ms cubic-bezier(.2,.8,.2,1),
    translate 260ms cubic-bezier(.2,.8,.2,1),
    rotate 260ms cubic-bezier(.2,.8,.2,1),
    filter 260ms ease;
  will-change: scale, rotate;
}
.hero__note::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask-image: var(--hero-note-mask);
  mask-image: var(--hero-note-mask);
  mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  pointer-events: none;
}
.hero__note--top {
  --hero-x: 21%;
  --hero-y: 16%;
  --hero-w: 24%;
  --hero-rotate: -2deg;
  --hero-note-mask: url("../assets/images/hero/hero-note-your-smile.svg");
}
.hero__note--bottom {
  --hero-x: 13.5%;
  --hero-y: 66.7%;
  --hero-w: 23%;
  --hero-rotate: -2deg;
  --hero-note-mask: url("../assets/images/hero/hero-note-we-handle-it.svg");
}
[data-theme="dark"] .hero__note {
  color: var(--color-paper-on-ink);
}

@media (hover: hover) and (pointer: fine) {
  .hero__photo:hover {
    filter: grayscale(0) saturate(1) contrast(1) var(--hero-photo-shadow, drop-shadow(0 0 0 rgba(0,0,0,0)));
    translate: -50% calc(-50% - 4px);
    rotate: calc(var(--hero-rotate, 0deg) + .55deg);
    scale: 1.035;
  }

  .hero__note:hover {
    translate: -50% calc(-50% - 2px);
    rotate: calc(var(--hero-rotate, 0deg) + .75deg);
    scale: 1.065;
    filter: drop-shadow(2px 3px 0 rgba(16,16,16,.13));
  }
  [data-theme="dark"] .hero__note:hover {
    filter: drop-shadow(2px 3px 0 rgba(0,0,0,.28));
  }
}

.complexity {
  position: relative;
  overflow: hidden;
  overflow: clip;
  border-top: var(--border-thin);
  padding-block: clamp(5.25rem, 14vw, 7rem) clamp(6rem, 15vw, 8rem);
  background: var(--color-page);
}
.complexity__inner { position: relative; }
.complexity__intro { max-width: 780px; }
.complexity__title {
  max-width: 12ch;
  margin-top: .65rem;
  font-size: clamp(2.9rem, 12vw, 5rem);
  line-height: .9;
  letter-spacing: -.065em;
}
.complexity__lead {
  margin-top: 1.35rem;
  color: var(--color-text);
  font-size: clamp(1.08rem, 3.8vw, 1.35rem);
}
.complexity__sublead { margin-top: .15rem; color: var(--color-text-muted); }
.complexity__stage {
  position: relative;
  z-index: var(--z-base);
  margin-top: 3rem;
  padding-bottom: 1rem;
  isolation: isolate;
}
.complexity__stage::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 21%;
  right: -15%;
  width: 74%;
  height: 51%;
  background: var(--color-brand);
  clip-path: polygon(7% 4%, 94% 0, 100% 17%, 95% 36%, 100% 55%, 92% 74%, 100% 94%, 73% 100%, 48% 94%, 19% 100%, 0 86%, 5% 61%, 0 39%);
  transform: rotate(1.4deg);
}
.complexity__stage::after {
  content: "";
  position: absolute;
  z-index: -3;
  top: 33%;
  left: -14%;
  width: 54%;
  height: 36%;
  color: var(--color-text);
  opacity: .28;
  background-image: radial-gradient(circle, currentColor 0 1px, transparent 1.15px);
  background-size: 6px 6px;
  clip-path: polygon(5% 3%, 96% 0, 100% 17%, 92% 36%, 100% 55%, 92% 74%, 100% 96%, 71% 100%, 48% 94%, 20% 100%, 0 85%, 6% 61%, 0 40%);
  transform: rotate(-2deg);
}
.complexity__starter {
  --complexity-rotate: -.35deg;
  width: min(100%, 420px);
  display: flex;
  align-items: center;
  gap: .8rem;
  border: 1.5px solid var(--color-ink-fixed);
  padding: 1.05rem 1.15rem;
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  box-shadow: var(--shadow-editorial);
  font-family: var(--font-mono);
  font-size: clamp(1rem, 4.8vw, 1.2rem);
  letter-spacing: .035em;
  transform: rotate(var(--complexity-rotate, -.35deg));
}
.complexity__starter-check { color: var(--color-brand); font-size: 1.5em; line-height: 1; }
.complexity__tasks {
  list-style: none;
  display: grid;
  gap: .85rem;
  margin-top: 1.25rem;
  padding: 0;
}
.complexity__task {
  --complexity-rotate: 0deg;
  width: fit-content;
  max-width: calc(100% - .4rem);
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: .75rem;
  border: 1.5px solid var(--color-ink-fixed);
  padding: .68rem .9rem;
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  box-shadow: 4px 5px 0 rgba(16, 16, 16, .08);
  font-family: var(--font-mono);
  font-size: clamp(.82rem, 3.6vw, .98rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
  letter-spacing: .035em;
  transform: rotate(var(--complexity-rotate));
}
.complexity__task-icon { width: auto; height: 34px; flex: 0 0 auto; }
.complexity__task--product { margin-left: 9%; --complexity-rotate: 1deg; }
.complexity__task--store { margin-left: 3%; --complexity-rotate: -1.2deg; }
.complexity__task--production { margin-left: 13%; --complexity-rotate: .8deg; }
.complexity__task--shipping { margin-left: 5%; --complexity-rotate: -1.1deg; }
.complexity__task--support { margin-left: 0; --complexity-rotate: .45deg; }
.complexity__task--returns { margin-left: 14%; --complexity-rotate: -1.4deg; }
.complexity__task--complaints { margin-left: 7%; --complexity-rotate: .9deg; }
.complexity__task--mobile-secondary { display: none; }
.complexity__visual { display: none; }
.complexity__support-card {
  --complexity-rotate: -1.1deg;
  position: relative;
  width: min(100% - .5rem, 520px);
  margin: 2.4rem 0 0 auto;
  border: 1.5px solid var(--color-ink-fixed);
  padding: 1rem;
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  box-shadow: 7px 9px 0 rgba(16, 16, 16, .1);
  transform: rotate(var(--complexity-rotate, -1.1deg));
}
.complexity__support-meta,
.complexity__support-status,
.complexity__support-reply-label {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  letter-spacing: .07em;
}
.complexity__support-meta { color: var(--color-ink-fixed); }
.complexity__support-message {
  margin-top: .85rem;
  color: var(--color-ink-fixed);
  font-family: var(--font-editorial);
  font-size: clamp(1.02rem, 4vw, 1.2rem);
  line-height: 1.38;
}
.complexity__support-reply {
  margin-top: 1rem;
  border-left: 3px solid var(--color-brand);
  padding: .7rem .75rem;
  background: color-mix(in srgb, var(--color-brand) 9%, var(--color-paper-on-ink));
}
.complexity__support-reply-label { display: block; margin-bottom: .25rem; color: var(--color-ink-fixed); }
.complexity__support-reply p { color: var(--color-ink-fixed); font-size: .9rem; line-height: 1.42; }
.complexity__support-status {
  width: fit-content;
  margin: .9rem 0 0 auto;
  border-top: 2px solid var(--color-brand);
  padding-top: .35rem;
  color: var(--color-ink-fixed);
}
.complexity__slip {
  width: fit-content;
  display: grid;
  gap: .2rem;
  border: 1px solid var(--color-ink-fixed);
  padding: .65rem .75rem;
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  box-shadow: 4px 5px 0 rgba(16, 16, 16, .08);
  font-family: var(--font-mono);
  font-size: .68rem;
  line-height: 1.25;
  letter-spacing: .055em;
  transform: rotate(var(--complexity-rotate, 0deg));
}
.complexity__slip span { color: color-mix(in srgb, var(--color-ink-fixed) 68%, var(--color-paper-on-ink)); }
.complexity__slip--order { margin-top: 1.35rem; margin-left: 2%; --complexity-rotate: 1.3deg; }
.complexity__slip--exchange { margin: -.25rem 2% 0 auto; --complexity-rotate: -1.7deg; }
.complexity__slip--production { display: none; }
.complexity__punchline {
  max-width: 980px;
  margin-top: clamp(4.75rem, 15vw, 7rem);
  padding-top: 1.8rem;
  border-top: 2px solid var(--color-text);
}
.complexity__punchline-main {
  max-width: 14ch;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(2.45rem, 10.8vw, 5rem);
  font-weight: var(--font-weight-black);
  line-height: .93;
  letter-spacing: -.055em;
}
.complexity__punchline-copy { max-width: 620px; margin-top: 1.3rem; font-size: var(--font-size-lg); }

/* Section #02: ordinary content reveals calmly; task labels pop in like problems piling up. */
.js .complexity.is-animating [data-complexity-reveal]:not(.complexity__task) {
  opacity: 0;
  transform: translateY(14px) rotate(var(--complexity-rotate, 0deg)) scale(.985);
}
.js .complexity.is-animating [data-complexity-reveal]:not(.complexity__task).is-visible {
  opacity: 1;
  transform: translateY(0) rotate(var(--complexity-rotate, 0deg)) scale(1);
  transition: opacity 300ms var(--complexity-delay, 0ms) ease-out, transform 420ms var(--complexity-delay, 0ms) cubic-bezier(.2,.8,.2,1.035);
}
.js .complexity.is-animating .complexity__task {
  opacity: 0;
  transform: translateY(12px) rotate(var(--complexity-rotate, 0deg)) scale(.54);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.js .complexity.is-animating .complexity__task.is-visible {
  animation: complexity-problem-pop 320ms var(--complexity-pop-delay, 0ms) cubic-bezier(.18,.82,.24,1) both;
}

@keyframes complexity-problem-pop {
  0% {
    opacity: 0;
    transform: translateY(12px) rotate(var(--complexity-rotate, 0deg)) scale(.54);
  }
  56% {
    opacity: 1;
    transform: translateY(-3px) rotate(var(--complexity-rotate, 0deg)) scale(1.11);
  }
  80% {
    transform: translateY(1px) rotate(var(--complexity-rotate, 0deg)) scale(.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(var(--complexity-rotate, 0deg)) scale(1);
  }
}


.workflow {
  position: relative;
  overflow: hidden;
  overflow: clip;
  border-top: var(--border-thin);
  padding-block: clamp(6.5rem, 18vw, 9rem) clamp(7rem, 20vw, 10rem);
  background: var(--color-surface);
}
.workflow__inner { position: relative; }
.workflow__intro { max-width: 980px; }
.workflow__title {
  max-width: 13ch;
  margin-top: .8rem;
  font-size: clamp(3rem, 11.6vw, 5.6rem);
  line-height: .89;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.workflow__connector {
  display: inline-block;
  color: var(--color-brand);
  font-size: .54em;
  line-height: .9;
  letter-spacing: -.025em;
}
.workflow__lead {
  max-width: 760px;
  margin-top: 1.6rem;
  color: var(--color-text-secondary);
  font-size: clamp(1.05rem, 3.7vw, 1.28rem);
  line-height: 1.5;
}
.workflow__microline {
  margin-top: 1.35rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.55;
  letter-spacing: .065em;
}
.workflow__process {
  position: relative;
  max-width: 760px;
  margin-top: clamp(5rem, 14vw, 7rem);
  isolation: isolate;
}
.workflow__process::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: .9rem;
  bottom: 4.8rem;
  left: .82rem;
  width: 2px;
  background: var(--color-brand);
  transform: rotate(.25deg);
}
.workflow__process-line { display: none; }
.workflow__step {
  position: relative;
  min-width: 0;
  padding: 0 0 clamp(4.5rem, 14vw, 6.5rem) 3.15rem;
}
.workflow__step:last-of-type { padding-bottom: 2rem; }
.workflow__step::before {
  content: "";
  position: absolute;
  top: .83rem;
  left: .18rem;
  width: 1.35rem;
  height: 2px;
  background: var(--color-brand);
  transform: rotate(var(--workflow-tick-rotate, -1deg));
  transform-origin: left center;
}
.workflow__step--store { --workflow-tick-rotate: .7deg; }
.workflow__step--fulfilment { --workflow-tick-rotate: -1.4deg; }
.workflow__step--support { --workflow-tick-rotate: .45deg; }
.workflow__step-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.workflow__phase {
  width: fit-content;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  letter-spacing: .065em;
}
.workflow__phase span { color: var(--color-brand); font-size: 1.18em; }
.workflow__code { display: none; color: var(--color-text-muted); font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; }
.workflow__visual {
  position: relative;
  width: min(100%, 370px);
  height: 230px;
  margin-top: 1.65rem;
}
.workflow__visual img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.workflow__visual--create { height: 250px; overflow: hidden; overflow: clip; }
.workflow__paper-shape {
  position: absolute;
  top: 11%;
  left: 2%;
  width: 63%;
  height: 76%;
  background: var(--color-brand);
  clip-path: polygon(5% 6%, 96% 0, 100% 18%, 94% 43%, 100% 72%, 88% 96%, 57% 100%, 31% 94%, 4% 100%, 0 67%);
  transform: rotate(-1.25deg);
}
.workflow__visual--create img {
  position: absolute;
  z-index: 2;
  top: 3%;
  right: 0;
  width: 86%;
  height: auto;
  transform: rotate(1.8deg);
  filter: drop-shadow(3px 4px 0 rgba(16,16,16,.08));
}
.workflow__visual--store { height: 270px; }
.workflow__visual--store img {
  position: absolute;
  z-index: 2;
  left: 28%;
  top: 0;
  width: auto;
  height: 250px;
  transform: rotate(.8deg);
  filter: drop-shadow(4px 6px 0 rgba(16,16,16,.08));
}
.workflow__visual--fulfilment { height: 255px; }
.workflow__status-flow {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}
.workflow__status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--color-text);
  padding: .35rem .48rem;
  background: var(--color-surface-elevated);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: .56rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.05;
  letter-spacing: .045em;
}
.workflow__status--active { border-color: var(--color-brand); background: var(--color-brand); color: var(--color-brand-contrast); }
.workflow__status-arrow { color: var(--color-brand); font-family: var(--font-mono); font-size: 1.15rem; line-height: 1; }
.workflow__visual--fulfilment img {
  position: absolute;
  z-index: 2;
  right: -1%;
  bottom: -3%;
  width: 76%;
  height: auto;
  transform: rotate(1.5deg);
  filter: drop-shadow(3px 5px 0 rgba(16,16,16,.08));
}
.workflow__visual--support { height: auto; min-height: 245px; display: flex; align-items: center; }
.workflow__support-card {
  width: 100%;
  border: 1.5px solid var(--color-ink-fixed);
  padding: .9rem;
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  box-shadow: 5px 7px 0 rgba(16,16,16,.09);
  transform: rotate(-.45deg);
}
.workflow__support-topline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .35rem .65rem;
  border-bottom: 1px solid rgba(16,16,16,.2);
  padding-bottom: .5rem;
  font-family: var(--font-mono);
  font-size: .55rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: .055em;
}
.workflow__support-question { margin-top: .85rem; color: var(--color-ink-fixed); font-size: 1rem; line-height: 1.35; }
.workflow__support-reply {
  margin-top: .8rem;
  border-left: 3px solid var(--color-brand);
  padding: .6rem .65rem;
  background: color-mix(in srgb, var(--color-brand) 8%, var(--color-paper-on-ink));
}
.workflow__support-reply span,
.workflow__support-status { font-family: var(--font-mono); font-size: .55rem; font-weight: var(--font-weight-bold); line-height: 1.2; letter-spacing: .055em; }
.workflow__support-reply p { margin-top: .2rem; color: var(--color-ink-fixed); font-size: .86rem; line-height: 1.35; }
.workflow__support-status { width: fit-content; margin: .75rem 0 0 auto; border-top: 2px solid var(--color-brand); padding-top: .3rem; color: var(--color-ink-fixed); }
.workflow__step h3 {
  max-width: 17ch;
  margin-top: 1.6rem;
  color: var(--color-text);
  font-size: clamp(1.75rem, 7vw, 2.25rem);
  line-height: 1;
  letter-spacing: -.045em;
}
.workflow__copy { max-width: 35rem; margin-top: .9rem; font-size: .98rem; line-height: 1.55; }
.workflow__scope { display: none; }
.workflow__punchline {
  position: relative;
  max-width: 900px;
  margin-top: clamp(4.25rem, 14vw, 7rem);
  padding-top: clamp(2.4rem, 8vw, 3.8rem);
  border-top: 2px solid var(--color-text);
}
.workflow__punchline-main {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(3rem, 11.2vw, 5.8rem);
  font-weight: var(--font-weight-black);
  line-height: .9;
  letter-spacing: -.06em;
}
.workflow__punchline-copy { max-width: 680px; margin-top: 1.45rem; font-size: var(--font-size-lg); }
.workflow__annotation {
  width: fit-content;
  margin: 1.3rem 0 0 auto;
  color: var(--color-editorial-secondary);
  font-family: var(--font-editorial);
  font-size: clamp(1.05rem, 4vw, 1.35rem);
  font-style: italic;
  line-height: 1;
  transform: rotate(-1.4deg);
}
.js .workflow.is-animating [data-workflow-reveal] {
  opacity: 0;
  transform: translateY(14px) scale(.99);
}
.js .workflow.is-animating [data-workflow-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 420ms var(--workflow-delay, 0ms) ease-out, transform 560ms var(--workflow-delay, 0ms) cubic-bezier(.2,.75,.2,1);
}
.js .workflow.is-animating .workflow__line-track {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js .workflow.is-animating .workflow__line-arrow { opacity: 0; }
.js .workflow.is-animating.is-line-visible .workflow__line-track {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1100ms ease-out;
}
.js .workflow.is-animating.is-line-visible .workflow__line-arrow {
  opacity: 1;
  transition: opacity 280ms 760ms ease-out;
}


/* Homepage / Section #03.5 — two-photo editorial meme break */
.meme-break {
  position: relative;
  overflow: hidden;
  overflow: clip;
  border-top: var(--border-thin);
  padding-block: clamp(4.75rem, 11vw, 7rem) clamp(5rem, 12vw, 7.25rem);
  background: var(--color-page);
}
.meme-break__inner { position: relative; }
.meme-break__intro { margin-bottom: clamp(1.5rem, 4vw, 2.2rem); }
.meme-break__intro .editorial-label {
  color: var(--color-text-muted);
  letter-spacing: .075em;
}
.meme-break__comparison {
  position: relative;
  display: grid;
  gap: 1.7rem;
  border-top: 2px solid var(--color-text);
  padding-top: clamp(1.35rem, 4vw, 2rem);
}
.meme-break__headline { min-width: 0; }
.meme-break__mobile-headline { display: none; }
.meme-break__kicker {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  letter-spacing: .08em;
}
.meme-break__headline h3 {
  max-width: 13ch;
  margin-top: .55rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 9.2vw, 4.4rem);
  font-weight: var(--font-weight-black);
  line-height: .9;
  letter-spacing: -.055em;
}
.meme-break__headline--calm h3 { max-width: 14ch; }
.meme-break__versus {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 0;
  display: none;
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .08em;
  transform: translateY(-50%);
}

.meme-break__spread {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(1.75rem, 5vw, 3.2rem);
  width: min(100%, 1160px);
  margin: clamp(2.4rem, 7vw, 4.4rem) auto 0;
  padding: clamp(1rem, 2.4vw, 1.6rem);
}
.meme-break__spread-backdrop {
  position: absolute;
  z-index: 0;
  inset: 1.2rem 0 0 0;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transform: rotate(-.65deg);
}
.meme-break__spread-label {
  position: absolute;
  z-index: 5;
  top: .15rem;
  left: clamp(1rem, 2vw, 1.6rem);
  padding: .22rem .36rem;
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  font-family: var(--font-mono);
  font-size: .5rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: .075em;
}
.meme-break__scene {
  position: relative;
  z-index: 1;
  min-height: clamp(370px, 100vw, 540px);
  padding: 1.65rem .35rem 1.95rem;
}
.meme-break__scene-paper {
  position: absolute;
  z-index: 0;
  inset: 11% 9% 7% 9%;
  border: 1px solid rgba(16, 16, 16, .1);
  background: var(--color-surface);
}
.meme-break__scene--chaos .meme-break__scene-paper { transform: rotate(-3.6deg); }
.meme-break__scene--calm .meme-break__scene-paper { transform: rotate(3.2deg); }
.meme-break__photo-card {
  position: relative;
  z-index: 2;
  width: min(82%, 380px);
  margin-inline: auto;
  padding: .65rem;
  border: 1px solid rgba(16, 16, 16, .14);
  background: var(--color-surface);
  box-shadow: 5px 8px 0 rgba(16, 16, 16, .08);
}
.meme-break__photo-card--chaos { margin-left: 12%; transform: rotate(-8deg); }
.meme-break__photo-card--calm { margin-right: 12%; transform: rotate(8deg); }
.meme-break__photo-wrap {
  position: relative;
  display: grid;
  place-items: end center;
  aspect-ratio: 4 / 5;
  min-height: clamp(290px, 72vw, 420px);
  overflow: hidden;
  overflow: clip;
  border: 1px solid rgba(16, 16, 16, .16);
  background: var(--color-paper-on-ink);
}
.meme-break__photo-wrap::before,
.meme-break__photo-wrap::after {
  content: "";
  position: absolute;
  z-index: 5;
  width: 22px;
  height: 22px;
  pointer-events: none;
}
.meme-break__photo-wrap::before {
  top: 10px;
  left: 10px;
  border-top: 1px solid var(--color-ink-fixed);
  border-left: 1px solid var(--color-ink-fixed);
}
.meme-break__photo-wrap::after {
  right: 10px;
  bottom: 10px;
  border-right: 1px solid var(--color-ink-fixed);
  border-bottom: 1px solid var(--color-ink-fixed);
}
.meme-break__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.meme-break__note-zone {
  position: absolute;
  z-index: 4;
  pointer-events: none;
}
.meme-break__note-zone--chaos {
  inset: 5% 0 0 0;
}
.meme-break__note-zone--calm {
  top: 12%;
  right: .15rem;
  width: min(42%, 190px);
  display: grid;
  gap: .52rem;
  justify-items: end;
}
.meme-break__tag {
  --meme-detail-rotate: 0deg;
  position: absolute;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid var(--color-ink-fixed);
  padding: .38rem .52rem;
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  box-shadow: 3px 4px 0 rgba(16, 16, 16, .08);
  font-family: var(--font-mono);
  font-size: .54rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: .045em;
  white-space: nowrap;
  transform: rotate(var(--meme-detail-rotate));
}
.meme-break__tag--1 { top: 4%; left: 0; --meme-detail-rotate: -1.6deg; }
.meme-break__tag--2 { top: 28%; right: 5%; --meme-detail-rotate: 1.35deg; background: var(--color-brand); }
.meme-break__tag--3 { bottom: 22%; left: 4%; --meme-detail-rotate: .85deg; }
.meme-break__tag--4 { bottom: 5%; right: 12%; --meme-detail-rotate: -1.15deg; }
.meme-break__status {
  --meme-detail-rotate: 0deg;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 30px;
  border-bottom: 1px solid var(--color-border);
  padding: .34rem .15rem .34rem .42rem;
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  font-family: var(--font-mono);
  font-size: .54rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: .055em;
  white-space: nowrap;
}
.meme-break__status i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--color-brand);
}
.meme-break__status:nth-child(2) { --meme-detail-rotate: .15deg; }
.meme-break__status:nth-child(3) { --meme-detail-rotate: -.15deg; }
.meme-break__hand-note {
  --meme-detail-rotate: -1.4deg;
  position: absolute;
  z-index: 5;
  right: 6%;
  bottom: -.8rem;
  color: var(--color-text);
  font-family: var(--font-editorial);
  font-size: clamp(1.05rem, 3.6vw, 1.55rem);
  font-style: italic;
  line-height: 1;
  transform: rotate(var(--meme-detail-rotate));
}

.meme-break__punchline {
  max-width: 25ch;
  margin: clamp(2.5rem, 7vw, 3.5rem) auto 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6vw, 2.8rem);
  font-weight: var(--font-weight-black);
  line-height: .98;
  letter-spacing: -.035em;
  text-align: center;
}
.meme-break__punchline::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: .8rem auto 0;
  background: var(--color-brand);
  transform: rotate(-1deg);
}

.js .meme-break.is-animating [data-meme-reveal] {
  opacity: 0;
  transform: translateY(12px);
}
.js .meme-break.is-animating [data-meme-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 360ms var(--meme-delay, 0ms) ease-out,
    transform 500ms var(--meme-delay, 0ms) cubic-bezier(.2,.78,.2,1);
}
.js .meme-break.is-animating [data-meme-detail] {
  opacity: 0;
  transform: translateY(7px) rotate(var(--meme-detail-rotate, 0deg));
}
.js .meme-break.is-animating [data-meme-detail].is-detail-visible {
  opacity: 1;
  transform: translateY(0) rotate(var(--meme-detail-rotate, 0deg));
  transition:
    opacity 260ms var(--meme-detail-delay, 0ms) ease-out,
    transform 360ms var(--meme-detail-delay, 0ms) cubic-bezier(.2,.8,.2,1);
}


/* Homepage / Section #04 — storefront + operations */
.store-ops {
  position: relative;
  overflow: hidden;
  overflow: clip;
  border-top: var(--border-thin);
  padding-block: clamp(6rem, 13vw, 9rem) clamp(6.5rem, 14vw, 10rem);
  background: var(--color-page);
}
.store-ops__inner { position: relative; }
.store-ops__intro { max-width: 930px; }
.store-ops__title {
  max-width: 13ch;
  margin-top: 1rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 12.5vw, 5.5rem);
  font-weight: var(--font-weight-black);
  line-height: .88;
  letter-spacing: -.06em;
}
.store-ops__lead {
  max-width: 760px;
  margin-top: 1.6rem;
  color: var(--color-text-secondary);
  font-size: clamp(1.03rem, 2.7vw, 1.18rem);
  line-height: 1.55;
}

.store-ops__stage {
  position: relative;
  isolation: isolate;
  min-height: 560px;
  margin-top: clamp(4rem, 10vw, 6.5rem);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: 3rem 5rem;
}
.store-ops__stage::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 2.3rem 0 2.3rem 7%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transform: rotate(-.55deg);
}
.store-ops__stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 10%;
  right: 5%;
  width: 38%;
  height: 36%;
  background: var(--color-brand);
  opacity: .96;
  transform: rotate(1.8deg);
}
.store-ops__storefront {
  display: none;
  overflow: hidden;
  border: 1px solid rgba(16,16,16,.16);
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  box-shadow: var(--shadow-editorial);
}
.store-ops__browser-bar {
  display: flex;
  align-items: center;
  gap: .38rem;
  min-height: 34px;
  border-bottom: 1px solid rgba(16,16,16,.12);
  padding-inline: .85rem;
  background: rgba(16,16,16,.045);
}
.store-ops__browser-dot {
  width: 6px;
  height: 6px;
  border: 1px solid var(--color-ink-fixed);
  border-radius: 50%;
}
.store-ops__browser-address {
  margin-left: .4rem;
  font-family: var(--font-mono);
  font-size: .45rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .05em;
  opacity: .58;
}
.store-ops__storefront-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  border-bottom: 1px solid rgba(16,16,16,.12);
  padding-inline: clamp(1rem, 2vw, 1.65rem);
}
.store-ops__store-brand {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: var(--font-weight-black);
  letter-spacing: -.035em;
}
.store-ops__store-nav {
  font-family: var(--font-mono);
  font-size: .46rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .045em;
}
.store-ops__storefront-body {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  min-height: 430px;
}
.store-ops__store-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 3rem);
}
.store-ops__drop-code {
  font-family: var(--font-mono);
  font-size: .52rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .06em;
}
.store-ops__store-heading {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 5.2vw, 5.9rem);
  font-weight: var(--font-weight-black);
  line-height: .78;
  letter-spacing: -.075em;
}
.store-ops__shop-link {
  margin-top: 1.5rem;
  border-bottom: 2px solid var(--color-ink-fixed);
  padding-bottom: .22rem;
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .05em;
}
.store-ops__product-stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(16,16,16,.035);
}
.store-ops__product-paper {
  position: absolute;
  width: 64%;
  height: 72%;
  background: var(--color-brand);
  transform: rotate(4deg);
}
.store-ops__product-stage img {
  position: relative;
  z-index: 1;
  width: min(93.6%, 442px);
  height: auto;
  filter: drop-shadow(4px 7px 0 rgba(16,16,16,.09));
}
.store-ops__product-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(16,16,16,.12);
}
.store-ops__product-strip span {
  padding: .68rem .8rem;
  border-right: 1px solid rgba(16,16,16,.12);
  font-family: var(--font-mono);
  font-size: .45rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .045em;
}
.store-ops__product-strip span:last-child { border-right: 0; }

.store-ops__phone {
  position: relative;
  z-index: 4;
  width: min(57vw, 230px);
  margin: 1rem auto 0;
  padding: .75rem;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: rotate(2.3deg);
}
.store-ops__phone::before {
  content: none;
  display: none;
}
.store-ops__phone img {
  display: block;
  width: 115%;
  max-width: none;
  height: auto;
  margin-left: -7.5%;
  background: transparent;
}
.store-ops__phone-label {
  position: absolute;
  right: -.55rem;
  bottom: 1.2rem;
  padding: .28rem .42rem;
  background: var(--color-ink-fixed);
  color: var(--color-paper-on-ink);
  font-family: var(--font-mono);
  font-size: .48rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: .07em;
  transform: rotate(-2deg);
}
.store-ops__statuses {
  position: absolute;
  z-index: 6;
  inset: 3.3rem .1rem auto .1rem;
  min-height: 390px;
  pointer-events: none;
}
.store-ops__status {
  --store-detail-rotate: 0deg;
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  min-height: 29px;
  border: 1px solid var(--color-ink-fixed);
  padding: .4rem .5rem;
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  box-shadow: 3px 4px 0 rgba(16,16,16,.07);
  font-family: var(--font-mono);
  font-size: .5rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  transform: rotate(var(--store-detail-rotate));
}
.store-ops__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-success);
}
.store-ops__status--live { top: 0; left: 1%; --store-detail-rotate: -1deg; }
.store-ops__status--products { display: none; }
.store-ops__status--order { top: 34%; right: 0; --store-detail-rotate: 1deg; background: var(--color-brand); }
.store-ops__status--production { bottom: 18%; left: 0; --store-detail-rotate: .7deg; }
.store-ops__status--support { bottom: 1%; right: 3%; --store-detail-rotate: -1deg; }
.store-ops__slip,
.store-ops__parcel { display: none; }
.store-ops__stage-caption {
  position: absolute;
  z-index: 7;
  right: 0;
  bottom: 1.1rem;
  max-width: 25ch;
  color: var(--color-text-secondary);
  font-family: var(--font-editorial);
  font-size: clamp(1rem, 3.4vw, 1.35rem);
  font-style: italic;
  line-height: 1.25;
  text-align: right;
}

.store-ops__areas {
  margin-top: clamp(4.5rem, 11vw, 7rem);
  border-top: 2px solid var(--color-text);
}
.store-ops__area {
  display: grid;
  gap: .85rem;
  border-bottom: 1px solid var(--color-border);
  padding-block: clamp(1.45rem, 4.5vw, 2.15rem);
}
.store-ops__area-code {
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: .06em;
}
.store-ops__area h3 {
  max-width: 24ch;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 5.6vw, 2.35rem);
  font-weight: var(--font-weight-black);
  line-height: .98;
  letter-spacing: -.035em;
}
.store-ops__area p:not(.store-ops__area-code) {
  max-width: 49rem;
  margin-top: .75rem;
  color: var(--color-text-secondary);
  font-size: .96rem;
  line-height: 1.55;
}

.store-ops__terms {
  display: grid;
  gap: 1.7rem;
  margin-top: clamp(4rem, 9vw, 6rem);
  border-top: 1px solid var(--color-text);
  border-bottom: 1px solid var(--color-text);
  padding-block: 1.65rem;
}
.store-ops__terms > div { max-width: 690px; }
.store-ops__terms-label {
  margin-bottom: .6rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .56rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  letter-spacing: .055em;
}
.store-ops__terms p:not(.store-ops__terms-label) {
  color: var(--color-text-secondary);
  font-size: .94rem;
  line-height: 1.5;
}
.store-ops__terms strong { color: var(--color-text); }

.store-ops__punchline {
  position: relative;
  margin-top: clamp(5rem, 12vw, 8rem);
  padding-top: clamp(2.1rem, 6vw, 3.2rem);
  border-top: 1px solid var(--color-border);
}
.store-ops__punchline-main {
  max-width: 16ch;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 11vw, 5.9rem);
  font-weight: var(--font-weight-black);
  line-height: .88;
  letter-spacing: -.06em;
}
.store-ops__note {
  width: fit-content;
  margin: 1.4rem 0 0 auto;
  color: var(--color-text);
  font-family: var(--font-editorial);
  font-size: clamp(1.1rem, 3.5vw, 1.55rem);
  font-style: italic;
  line-height: 1;
  transform: rotate(-1.4deg);
}

.js .store-ops.is-animating [data-store-reveal] {
  opacity: 0;
  transform: translateY(14px);
}
.js .store-ops.is-animating [data-store-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 400ms var(--store-delay, 0ms) ease-out,
    transform 520ms var(--store-delay, 0ms) cubic-bezier(.2,.78,.2,1);
}
.js .store-ops.is-animating [data-store-detail] {
  opacity: 0;
  transform: translateY(9px) rotate(var(--store-detail-rotate, 0deg));
}
.js .store-ops.is-animating [data-store-detail].is-detail-visible {
  opacity: 1;
  transform: translateY(0) rotate(var(--store-detail-rotate, 0deg));
  transition:
    opacity 280ms var(--store-detail-delay, 0ms) ease-out,
    transform 380ms var(--store-detail-delay, 0ms) cubic-bezier(.2,.8,.2,1);
}


/* Homepage / Section #05 — editorial service index */
.service-index {
  position: relative;
  overflow: clip;
  border-top: var(--border-thin);
  padding-block: clamp(6rem, 12vw, 9rem) clamp(6.5rem, 13vw, 9.5rem);
  background: var(--color-page);
}
.service-index__inner { position: relative; }
.service-index__layout { display: grid; gap: clamp(4rem, 10vw, 7rem); }
.service-index__intro { max-width: 720px; }
.service-index__title {
  max-width: 100%;
  margin-top: .85rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vw, 7rem);
  font-weight: var(--font-weight-black);
  line-height: .84;
  letter-spacing: -.07em;
}
.service-index__lead {
  max-width: 39rem;
  margin-top: 1.5rem;
  color: var(--color-text-secondary);
  font-size: clamp(1rem, 2.7vw, 1.15rem);
  line-height: 1.58;
}
.service-index__list {
  min-width: 0;
  border-top: 2px solid var(--color-text);
}
.service-index__row {
  position: relative;
  display: grid;
  gap: 1.25rem;
  min-width: 0;
  border-bottom: 1px solid var(--color-border);
  padding-block: clamp(2rem, 6vw, 3.2rem);
}
.service-index__row-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.service-index__code {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .61rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: .065em;
}
.service-index__code span { color: var(--color-brand); }
.service-index__row-mark {
  width: 36px;
  height: 2px;
  background: var(--color-brand);
  transform: rotate(-1deg) scaleX(.36);
  transform-origin: left center;
  transition: transform var(--transition-base);
}
.service-index__content { min-width: 0; }
.service-index__content h3 {
  max-width: 18ch;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: var(--font-weight-black);
  line-height: .94;
  letter-spacing: -.045em;
}
.service-index__copy {
  max-width: 42rem;
  margin-top: .85rem;
  color: var(--color-text-secondary);
  font-size: .98rem;
  line-height: 1.55;
}
.service-index__scope {
  display: flex;
  flex-wrap: wrap;
  gap: .42rem .75rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
}
.service-index__scope li {
  position: relative;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .55rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  letter-spacing: .045em;
}
.service-index__scope li:not(:last-child)::after {
  content: "/";
  position: absolute;
  right: -.5rem;
  color: var(--color-brand);
}
.service-index__optional {
  max-width: 38rem;
  margin-top: 1.15rem;
  border-left: 2px solid var(--color-brand);
  padding-left: .75rem;
  color: var(--color-text-muted);
  font-size: .8rem;
  line-height: 1.5;
}
.service-index__optional span {
  margin-right: .35rem;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: .55rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .06em;
}
.service-index__transparency {
  max-width: 42rem;
  margin-top: 1.35rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
  color: var(--color-text-secondary);
  font-size: .82rem;
  line-height: 1.5;
}
.service-index__transparency strong { color: var(--color-text); }
.service-index__transparency p + p { margin-top: .65rem; }
.service-index__transparency-labels {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .8rem;
}
.service-index__transparency-labels span {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .52rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .055em;
}
.service-index__visual {
  position: relative;
  min-height: 150px;
  overflow: visible;
  pointer-events: none;
}
.service-index__visual img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
.service-index__paper,
.service-index__store-backdrop {
  position: absolute;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.service-index__visual-label,
.service-index__production-label,
.service-index__calendar {
  position: absolute;
  z-index: 3;
  padding: .3rem .42rem;
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  font-family: var(--font-mono);
  font-size: .5rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: .055em;
  white-space: nowrap;
}
.service-index__visual--concept { min-height: 178px; }
.service-index__visual--concept .service-index__paper {
  inset: 18% 20% 6% 17%;
  transform: rotate(-4deg);
}
.service-index__visual--concept img {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: -7%;
  width: min(72%, 225px);
  transform: rotate(6deg);
}
.service-index__visual--concept .service-index__visual-label { left: 9%; bottom: 13%; transform: rotate(-2deg); }
.service-index__visual--design { display: none; min-height: 188px; }
.service-index__visual--design img {
  position: absolute;
  z-index: 2;
  right: 2%;
  bottom: -7%;
  width: min(57%, 190px);
  transform: rotate(4deg);
}
.service-index__art-sheet {
  position: absolute;
  z-index: 1;
  left: 5%;
  top: 13%;
  width: min(54%, 170px);
  aspect-ratio: 4 / 5;
  border: 1px solid var(--color-ink-fixed);
  padding: .75rem;
  background: var(--color-brand);
  color: var(--color-ink-fixed);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 5vw, 1.75rem);
  font-weight: var(--font-weight-black);
  line-height: .9;
  letter-spacing: -.04em;
  transform: rotate(-5deg);
}
.service-index__visual--store { min-height: 205px; }
.service-index__store-backdrop {
  inset: 10% 12% 0 18%;
  background: var(--color-brand);
  transform: rotate(5deg);
}
.service-index__visual--store img {
  position: absolute;
  z-index: 2;
  left: 35%;
  bottom: -8%;
  height: min(205px, 54vw);
  width: auto;
  transform: rotate(-3deg);
}
.service-index__visual--store .service-index__visual-label { right: 4%; top: 15%; transform: rotate(1.5deg); }
.service-index__visual--product { min-height: 190px; }
.service-index__visual--product img {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: -7%;
  width: min(80%, 245px);
  transform: rotate(-3deg);
}
.service-index__production-label { left: 4%; top: 20%; background: var(--color-brand); }
.service-index__visual--orders { min-height: 215px; }
.service-index__visual--orders > img {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -8%;
  width: min(57%, 180px);
  transform: rotate(4deg);
}
.service-index__support-beat {
  position: absolute;
  z-index: 2;
  left: 2%;
  top: 13%;
  width: min(63%, 210px);
  border: 1px solid var(--color-ink-fixed);
  padding: .7rem .72rem;
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  box-shadow: 4px 5px 0 rgba(16,16,16,.07);
  transform: rotate(-2.5deg);
}
.service-index__support-beat span,
.service-index__support-beat strong {
  font-family: var(--font-mono);
  font-size: .47rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .045em;
}
.service-index__support-beat p {
  margin-block: .65rem;
  font-family: var(--font-editorial);
  font-size: .9rem;
  line-height: 1.2;
}
.service-index__support-beat strong { color: var(--color-success); }
.service-index__visual--next { display: none; min-height: 200px; }
.service-index__visual--next img {
  position: absolute;
  z-index: 2;
  right: 5%;
  bottom: -9%;
  width: min(48%, 160px);
  transform: rotate(6deg);
}

/* Service index / unified asset field — paper backgrounds + balanced visual scale */
.service-index__visual--design,
.service-index__visual--next {
  display: block;
}
.service-index__visual--design,
.service-index__visual--store,
.service-index__visual--product,
.service-index__visual--orders,
.service-index__visual--next {
  min-height: 200px;
}

.service-index__visual--design {
  --service-paper-bg: var(--color-brand);
  --service-paper-rotate: 3.5deg;
  --service-paper-width: 84%;
  --service-paper-height: 76%;
  --service-asset-width: 91%;
  --service-asset-rotate: -4deg;
  --service-asset-x: 50%;
  --service-asset-y: 51%;
}
.service-index__visual--store {
  --service-paper-bg: var(--color-paper-on-ink);
  --service-paper-rotate: -2.5deg;
  --service-paper-width: 88%;
  --service-paper-height: 76%;
  --service-asset-width: 100%;
  --service-asset-rotate: 2deg;
  --service-asset-x: 50%;
  --service-asset-y: 51%;
}
.service-index__visual--product {
  --service-paper-bg: color-mix(in srgb, var(--color-brand) 19%, var(--color-paper-on-ink));
  --service-paper-rotate: 2deg;
  --service-paper-width: 82%;
  --service-paper-height: 78%;
  --service-asset-width: 95%;
  --service-asset-rotate: -2.5deg;
  --service-asset-x: 48%;
  --service-asset-y: 51%;
}
.service-index__visual--orders {
  --service-paper-bg: var(--color-brand);
  --service-paper-rotate: -4deg;
  --service-paper-width: 88%;
  --service-paper-height: 70%;
  --service-asset-width: 89%;
  --service-asset-rotate: 4deg;
  --service-asset-x: 50%;
  --service-asset-y: 51%;
}
.service-index__visual--next {
  --service-paper-bg: var(--color-paper-on-ink);
  --service-paper-rotate: 3deg;
  --service-paper-width: 92%;
  --service-paper-height: 66%;
  --service-asset-width: 89%;
  --service-asset-rotate: -3deg;
  --service-asset-x: 50%;
  --service-asset-y: 52%;
}

.service-index__visual--design .service-index__paper,
.service-index__visual--store .service-index__paper,
.service-index__visual--product .service-index__paper,
.service-index__visual--orders .service-index__paper,
.service-index__visual--next .service-index__paper {
  z-index: 0;
  top: 50%;
  left: 50%;
  width: var(--service-paper-width);
  height: var(--service-paper-height);
  border-color: var(--color-ink-fixed);
  background: var(--service-paper-bg);
  transform: translate(-50%, -50%) rotate(var(--service-paper-rotate));
}

.service-index__visual--design img,
.service-index__visual--store img,
.service-index__visual--product img,
.service-index__visual--orders > img,
.service-index__visual--next img {
  position: absolute;
  z-index: 2;
  top: var(--service-asset-y);
  right: auto;
  bottom: auto;
  left: var(--service-asset-x);
  width: var(--service-asset-width);
  height: auto;
  max-width: none;
  max-height: 94%;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(var(--service-asset-rotate));
  transform-origin: 50% 50%;
}
.service-index__drop-note {
  position: absolute;
  z-index: 1;
  left: 6%;
  top: 14%;
  min-width: 132px;
  border: 1px solid var(--color-ink-fixed);
  padding: .65rem .72rem;
  background: var(--color-brand);
  color: var(--color-ink-fixed);
  font-family: var(--font-mono);
  font-size: .54rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  letter-spacing: .05em;
  transform: rotate(-4deg);
}
.service-index__drop-note b {
  display: block;
  margin-top: .35rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: .95;
  letter-spacing: -.04em;
}
.service-index__calendar { left: 17%; bottom: 6%; transform: rotate(2deg); }
.service-index__punchline {
  position: relative;
  margin-top: clamp(5rem, 11vw, 8rem);
  border-top: 1px solid var(--color-text);
  padding-top: clamp(2.5rem, 6vw, 3.5rem);
}
.service-index__punchline-main {
  max-width: 14ch;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 11vw, 6.5rem);
  font-weight: var(--font-weight-black);
  line-height: .88;
  letter-spacing: -.06em;
}
.service-index__annotation {
  width: fit-content;
  margin: 1.4rem 0 0 auto;
  color: var(--color-text);
  font-family: var(--font-editorial);
  font-size: clamp(1.1rem, 3.8vw, 1.55rem);
  font-style: italic;
  line-height: 1;
  transform: rotate(-1.3deg);
}
@media (hover: hover) and (pointer: fine) {
  .service-index__row:hover .service-index__row-mark { transform: rotate(-1deg) scaleX(1); }
  .service-index__row:hover .service-index__visual { transform: translateY(-5px); }
  .service-index__visual { transition: transform var(--transition-base); }
}
.js .service-index.is-animating [data-service-reveal] {
  opacity: 0;
  transform: translateY(14px);
}
.js .service-index.is-animating [data-service-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 390ms var(--service-delay, 0ms) ease-out,
    transform 520ms var(--service-delay, 0ms) cubic-bezier(.2,.78,.2,1);
}
.js .service-index.is-animating [data-service-asset] {
  opacity: 0;
  transform: translateY(9px);
}
.js .service-index.is-animating [data-service-asset].is-asset-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 280ms var(--service-asset-delay, 0ms) ease-out,
    transform 400ms var(--service-asset-delay, 0ms) cubic-bezier(.2,.8,.2,1);
}


/* Homepage / interlude — deliberately fake testimonials */
.fake-testimonials {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding-block: 5.5rem 6.5rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-page);
}
.fake-testimonials::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 2.25rem;
  right: -4.5rem;
  width: 15rem;
  aspect-ratio: 1;
  background-image: radial-gradient(circle, currentColor 1px, transparent 1.15px);
  background-size: 7px 7px;
  color: var(--color-border);
  opacity: .65;
  transform: rotate(6deg);
  pointer-events: none;
}
.fake-testimonials__inner { position: relative; z-index: 1; }
.fake-testimonials__intro { max-width: 920px; }
.fake-testimonials__title {
  max-width: 10ch;
  margin: .8rem 0 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 13vw, 5.2rem);
  font-weight: var(--font-weight-black);
  line-height: .88;
  letter-spacing: -.065em;
  text-wrap: balance;
}
.fake-testimonials__lead {
  max-width: 45rem;
  color: var(--color-text-secondary);
  font-size: 1rem;
}
.fake-testimonials__stage {
  position: relative;
  display: grid;
  gap: 3.25rem;
  margin-top: 4rem;
}
.fake-testimonial {
  position: relative;
  display: grid;
  gap: 1.45rem;
  padding-block: 1.8rem 2.3rem;
  border-top: 1px solid var(--color-text);
}
.fake-testimonial__portrait {
  position: relative;
  width: min(74vw, 260px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--color-text);
  background: var(--color-surface-elevated);
  box-shadow: 8px 9px 0 color-mix(in srgb, var(--color-text) 8%, transparent);
}
.fake-testimonial__portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(16,16,16,.28) .65px, transparent .8px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
  opacity: .3;
  pointer-events: none;
}
.fake-testimonial__portrait img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}
.fake-testimonial__portrait--ania { transform: rotate(-2.4deg); }
.fake-testimonial__portrait--ania img { object-position: 42% 58%; transform: scale(1.2); }
.fake-testimonial__portrait--grzes { justify-self: end; transform: rotate(2.1deg); }
.fake-testimonial__portrait--grzes img { object-position: 50% 17%; transform: scale(1.08); }
.fake-testimonial__portrait-label {
  position: absolute;
  z-index: 2;
  left: .7rem;
  bottom: .7rem;
  padding: .38rem .52rem;
  border: 1px solid var(--color-ink-fixed);
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  font-family: var(--font-mono);
  font-size: .56rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .04em;
}
.fake-testimonial__content { position: relative; max-width: 44rem; }
.fake-testimonial__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .45rem 1rem;
  margin-bottom: .8rem;
}
.fake-testimonial__name {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: var(--font-weight-black);
  letter-spacing: .055em;
}
.fake-testimonial__utility {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .045em;
}
.fake-testimonial__stars {
  display: block;
  width: max-content;
  margin-bottom: .8rem;
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: .15em;
}
.fake-testimonial blockquote {
  position: relative;
  margin: 0;
  max-width: 37rem;
  font-family: var(--font-editorial);
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  font-style: italic;
  line-height: 1.25;
}
.fake-testimonial__disclosure {
  width: max-content;
  max-width: 100%;
  margin-top: 1.3rem;
  padding: .48rem .6rem .42rem;
  border: 1px solid var(--color-ink-fixed);
  background: var(--color-brand);
  color: var(--color-ink-fixed);
  font-family: var(--font-mono);
  font-size: .67rem;
  line-height: 1.15;
  letter-spacing: .035em;
  transform: rotate(-1deg);
}
.fake-testimonial--grzes .fake-testimonial__disclosure { transform: rotate(1deg); }
.fake-testimonials__divider {
  display: none;
  position: absolute;
  z-index: 0;
  left: 49%;
  top: 38%;
  color: var(--color-brand);
  font-family: var(--font-editorial);
  font-size: 11rem;
  line-height: .7;
  opacity: .9;
  transform: rotate(8deg);
  pointer-events: none;
}
.fake-testimonials__punchline {
  margin-top: 4.75rem;
  padding-top: 2.2rem;
  border-top: 3px solid var(--color-text);
}
.fake-testimonials__punchline-title {
  max-width: 12ch;
  font-family: var(--font-display);
  font-size: clamp(3rem, 11vw, 5rem);
  font-weight: var(--font-weight-black);
  line-height: .9;
  letter-spacing: -.055em;
}
.fake-testimonials__punchline > p:last-child {
  max-width: 42rem;
  margin-top: 1rem;
  color: var(--color-text-secondary);
}
.fake-testimonials__real-proof {
  position: relative;
  max-width: 54rem;
  margin-top: 3.25rem;
  padding: 1.15rem 1.1rem 1.25rem;
  border: 1px dashed var(--color-text);
  background: var(--color-surface);
  transform: rotate(-.35deg);
}
.fake-testimonials__real-proof::before {
  content: 'REAL / THIS TIME';
  position: absolute;
  top: -.65rem;
  right: .85rem;
  padding: .22rem .42rem;
  background: var(--color-page);
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: .54rem;
  font-weight: var(--font-weight-black);
  letter-spacing: .055em;
}
.fake-testimonials__real-proof-label {
  margin-bottom: .7rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: var(--font-weight-black);
  letter-spacing: .05em;
}
.fake-testimonials__real-proof p:not(.fake-testimonials__real-proof-label) {
  max-width: 42rem;
  color: var(--color-text-secondary);
  font-size: .94rem;
}
.fake-testimonials__real-proof-link { display: inline-flex; margin-top: 1rem; }
#wreczwspaniale { scroll-margin-top: calc(var(--header-height-desktop) + 1rem); }

.js .fake-testimonials.is-animating [data-fake-reveal] .fake-testimonial__portrait {
  clip-path: inset(100% 0 0 0);
}
.js .fake-testimonials.is-animating [data-fake-reveal] .fake-testimonial__content,
.js .fake-testimonials.is-animating .fake-testimonials__intro[data-fake-reveal],
.js .fake-testimonials.is-animating .fake-testimonials__punchline[data-fake-reveal],
.js .fake-testimonials.is-animating .fake-testimonials__real-proof[data-fake-reveal] {
  opacity: 0;
  transform: translateY(10px);
}
.js .fake-testimonials.is-animating [data-fake-reveal].is-visible .fake-testimonial__portrait {
  clip-path: inset(0 0 0 0);
  transition: clip-path 460ms var(--fake-delay, 0ms) cubic-bezier(.2,.78,.2,1);
}
.js .fake-testimonials.is-animating [data-fake-reveal].is-visible .fake-testimonial__content {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 300ms calc(var(--fake-delay, 0ms) + 100ms) ease-out,
    transform 430ms calc(var(--fake-delay, 0ms) + 100ms) cubic-bezier(.2,.78,.2,1);
}
.js .fake-testimonials.is-animating .fake-testimonials__intro[data-fake-reveal].is-visible,
.js .fake-testimonials.is-animating .fake-testimonials__punchline[data-fake-reveal].is-visible,
.js .fake-testimonials.is-animating .fake-testimonials__real-proof[data-fake-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 320ms var(--fake-delay, 0ms) ease-out,
    transform 440ms var(--fake-delay, 0ms) cubic-bezier(.2,.78,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  .fake-testimonials *,
  .fake-testimonials *::before,
  .fake-testimonials *::after { transition: none !important; animation: none !important; }
}


/* Homepage / Section #06 — zero stock / made after sale */
.zero-stock {
  position: relative;
  overflow: clip;
  border-top: var(--border-thin);
  padding-block: clamp(6rem, 12vw, 9rem) clamp(6.5rem, 13vw, 9.5rem);
  background: var(--color-page);
}
.zero-stock__inner { position: relative; }
.zero-stock__intro { max-width: 900px; }
.zero-stock__title {
  max-width: 15ch;
  margin-top: .85rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 11.5vw, 7rem);
  font-weight: var(--font-weight-black);
  line-height: .86;
  letter-spacing: -.065em;
}
.zero-stock__lead {
  max-width: 46rem;
  margin-top: 1.6rem;
  color: var(--color-text-secondary);
  font-size: clamp(1rem, 2.8vw, 1.15rem);
  line-height: 1.58;
}
.zero-stock__stage {
  position: relative;
  display: grid;
  gap: clamp(3rem, 8vw, 5rem);
  margin-top: clamp(4.5rem, 11vw, 7rem);
  border-top: 2px solid var(--color-text);
  padding-top: clamp(2rem, 5vw, 3.2rem);
}
.zero-stock__zero-zone {
  position: relative;
  isolation: isolate;
  min-height: clamp(340px, 95vw, 470px);
}
.zero-stock__zero {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: clamp(18rem, 72vw, 27rem);
  font-weight: var(--font-weight-black);
  line-height: .64;
  letter-spacing: -.12em;
  transform: translate(-53%, -50%);
  user-select: none;
}
.zero-stock__zero-caption {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 10%;
  width: min(72%, 270px);
  padding: .8rem .9rem .9rem;
  border: 1px solid var(--color-ink-fixed);
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  box-shadow: 5px 6px 0 rgba(16,16,16,.08);
  transform: translateX(-50%) rotate(-1.4deg);
}
.zero-stock__zero-caption span {
  display: block;
  font-family: var(--font-mono);
  font-size: .52rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .07em;
}
.zero-stock__zero-caption strong {
  display: block;
  margin-top: .42rem;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 5.7vw, 2.1rem);
  font-weight: var(--font-weight-black);
  line-height: .9;
  letter-spacing: -.045em;
}
.zero-stock__cat {
  --zero-cat-angle: 2deg;
  --zero-cat-scale: .98;
  --zero-cat-enter-x: 0px;
  --zero-cat-opacity: .78;
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 20%;
  width: min(36vw, 145px);
  height: auto;
  opacity: var(--zero-cat-opacity);
  filter: grayscale(1) contrast(1.08);
  transform-origin: 50% 100%;
  transform: translateX(var(--zero-cat-enter-x)) rotate(var(--zero-cat-angle)) scale(var(--zero-cat-scale));
  transition:
    opacity 360ms ease,
    transform 620ms cubic-bezier(.18,.82,.22,1);
  will-change: transform, opacity;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .zero-stock__zero-zone:hover .zero-stock__cat {
    --zero-cat-angle: 15deg;
    --zero-cat-scale: 1.035;
    --zero-cat-opacity: 1;
  }
}
.zero-stock__stock {
  display: none;
}
.zero-stock__boxes {
  position: relative;
  height: 88px;
  margin-top: 1rem;
}
.zero-stock__box {
  position: absolute;
  display: grid;
  place-items: center;
  width: 118px;
  height: 70px;
  border: 1px solid var(--color-ink-fixed);
  background: var(--color-surface);
  color: var(--color-ink-fixed);
  font-family: var(--font-mono);
  font-size: .54rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .06em;
}
.zero-stock__box--back { left: 42px; top: 0; transform: rotate(4deg); }
.zero-stock__box--front { left: 0; top: 20px; transform: rotate(-3deg); }
.zero-stock__sizes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .38rem;
  margin-top: .75rem;
}
.zero-stock__sizes span {
  border: 1px solid var(--color-ink-fixed);
  padding: .42rem .5rem;
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  font-family: var(--font-mono);
  font-size: .56rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}
.zero-stock__sizes-alert { background: var(--color-brand) !important; }
.zero-stock__forecast {
  width: fit-content;
  margin-top: .6rem;
  padding: .28rem .38rem;
  background: var(--color-ink-fixed);
  color: var(--color-paper-on-ink);
  font-family: var(--font-mono);
  font-size: .48rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .05em;
  transform: rotate(-1deg);
}
.zero-stock__stock-note {
  width: fit-content;
  margin: .7rem 0 0 auto;
  color: var(--color-text);
  font-family: var(--font-editorial);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1;
  transform: rotate(-1.7deg);
}
.zero-stock__flow {
  position: relative;
  min-width: 0;
  border-top: 1px solid var(--color-border);
  padding-top: 1.2rem;
}
.zero-stock__flow-kicker,
.zero-stock__stock-kicker {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .56rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  letter-spacing: .065em;
}
.zero-stock__flow-line {
  position: absolute;
  z-index: 0;
  top: 4.5rem;
  bottom: 2.5rem;
  left: .72rem;
  width: 2px;
  background: var(--color-brand);
  transform-origin: top center;
}
.zero-stock__flow-line::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -1px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-brand);
  border-bottom: 2px solid var(--color-brand);
  transform: rotate(45deg);
}
.zero-stock__flow-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.45rem minmax(0, 1fr);
  gap: .8rem;
  min-height: 98px;
  padding: 1rem 0 1rem;
}
.zero-stock__flow-step + .zero-stock__flow-step { border-top: 1px solid var(--color-border); }
.zero-stock__flow-index {
  display: grid;
  place-items: center;
  align-self: start;
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid var(--color-ink-fixed);
  background: var(--color-brand);
  color: var(--color-ink-fixed);
  font-family: var(--font-mono);
  font-size: .48rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}
.zero-stock__flow-step p {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: .055em;
}
.zero-stock__flow-step small {
  display: block;
  max-width: 31ch;
  margin-top: .42rem;
  color: var(--color-text-secondary);
  font-size: .82rem;
  line-height: 1.45;
}
.zero-stock__flow-step img {
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: 80px;
  height: auto;
  opacity: .34;
  pointer-events: none;
}
.zero-stock__flow-step--production img { right: .5rem; width: 88px; transform: rotate(-3deg); }
.zero-stock__flow-step--shipped img { right: .3rem; width: 72px; transform: rotate(3deg); }
.zero-stock__benefits {
  display: grid;
  margin-top: clamp(5rem, 11vw, 8rem);
  border-top: 2px solid var(--color-text);
}
.zero-stock__benefit {
  position: relative;
  border-bottom: 1px solid var(--color-border);
  padding-block: clamp(1.6rem, 5vw, 2.2rem);
}
.zero-stock__benefit-code {
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .065em;
}
.zero-stock__benefit h3 {
  max-width: 23ch;
  margin-top: .55rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6vw, 2.35rem);
  font-weight: var(--font-weight-black);
  line-height: .94;
  letter-spacing: -.04em;
}
.zero-stock__benefit p:not(.zero-stock__benefit-code) {
  max-width: 34rem;
  margin-top: .72rem;
  color: var(--color-text-secondary);
  font-size: .94rem;
  line-height: 1.52;
}
.zero-stock__punchline {
  position: relative;
  margin-top: clamp(5rem, 12vw, 8rem);
  border-top: 1px solid var(--color-text);
  padding-top: clamp(2.5rem, 6vw, 3.6rem);
}
.zero-stock__punchline p {
  max-width: 15ch;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 11vw, 6.5rem);
  font-weight: var(--font-weight-black);
  line-height: .88;
  letter-spacing: -.06em;
}
.js .zero-stock.is-animating [data-zero-reveal],
.js .zero-stock.is-animating [data-zero-detail],
.js .zero-stock.is-animating [data-zero-step] {
  opacity: 0;
  transform: translateY(14px);
}
.js .zero-stock.is-animating [data-zero-reveal].is-visible,
.js .zero-stock.is-animating [data-zero-detail].is-visible,
.js .zero-stock.is-animating [data-zero-step].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 360ms var(--zero-delay, 0ms) ease-out,
    transform 500ms var(--zero-delay, 0ms) cubic-bezier(.2,.78,.2,1);
}
.js .zero-stock.is-animating .zero-stock__flow-line {
  transform: scaleY(0);
}
.js .zero-stock.is-animating.is-flow-visible .zero-stock__flow-line {
  transform: scaleY(1);
  transition: transform 900ms 100ms cubic-bezier(.2,.8,.2,1);
}
.js .zero-stock.is-animating [data-zero-cat] {
  --zero-cat-enter-x: 12px;
  opacity: 0;
}
.js .zero-stock.is-animating.is-cat-visible [data-zero-cat] {
  --zero-cat-enter-x: 0px;
  opacity: var(--zero-cat-opacity);
  transition:
    opacity 360ms ease-out,
    transform 520ms cubic-bezier(.2,.8,.2,1);
}


/* Homepage / Section #07 — creator earnings calculator */
.earnings {
  position: relative;
  overflow: hidden;
  overflow: clip;
  border-top: var(--border-thin);
  padding-block: clamp(5.5rem, 13vw, 8rem) clamp(6rem, 14vw, 8.5rem);
  background: var(--color-page);
}
.earnings__inner,
.earnings__layout { position: relative; }
.earnings__layout { display: grid; gap: clamp(3.5rem, 10vw, 5.5rem); }
.earnings__intro { position: relative; z-index: 5; max-width: 760px; }
.earnings__title {
  max-width: 11ch;
  margin-top: .8rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(3.35rem, 12vw, 5.4rem);
  font-weight: var(--font-weight-black);
  line-height: .88;
  letter-spacing: -.065em;
}
.earnings__lead {
  max-width: 43rem;
  margin-top: 1.5rem;
  color: var(--color-text-secondary);
  font-size: clamp(1rem, 2.6vw, 1.12rem);
  line-height: 1.6;
}
.earnings__playground {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  gap: 2rem;
  border-top: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
  padding: 2.35rem 0 2.7rem;
}
.earnings__playground::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 1.15rem calc(-1 * var(--page-padding)) 1rem;
  background: var(--color-surface);
  transform: rotate(-.45deg);
}
.earnings__plus {
  position: absolute;
  z-index: 2;
  top: -2.8rem;
  right: -1.2rem;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: clamp(14rem, 65vw, 24rem);
  font-weight: var(--font-weight-black);
  line-height: .65;
  opacity: .2;
  pointer-events: none;
  user-select: none;
}
.earnings__utility,
.earnings__field-label,
.earnings__sold,
.earnings__rate-note,
.earnings__product-caption,
.earnings__truth span,
.earnings__cat-note {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  letter-spacing: .065em;
}
.earnings__utility {
  position: absolute;
  z-index: 3;
  top: .65rem;
  right: 0;
  color: var(--color-text-muted);
  font-size: .52rem;
}
.earnings__selector-wrap { position: relative; z-index: 3; }
.earnings__field-label {
  display: block;
  color: var(--color-text-muted);
  font-size: .62rem;
  line-height: 1.3;
}
.earnings__selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: .8rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.earnings__product {
  position: relative;
  min-height: 48px;
  border: 0;
  border-right: 1px solid var(--color-border);
  padding: .75rem .35rem;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: clamp(.62rem, 2.5vw, .72rem);
  font-weight: var(--font-weight-bold);
  letter-spacing: .045em;
  text-align: center;
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.earnings__product:last-child { border-right: 0; }
.earnings__product::after {
  content: "";
  position: absolute;
  right: .5rem;
  bottom: -1px;
  left: .5rem;
  height: 3px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-fast);
}
.earnings__product:hover,
.earnings__product.is-active { color: var(--color-text); }
.earnings__product.is-active { background: var(--color-surface-elevated); }
.earnings__product.is-active::after { transform: scaleX(1); }
.earnings__product:focus-visible {
  z-index: 2;
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.earnings__product-stage {
  --earnings-product-frame-size: min(58vw, 240px);
  position: relative;
  z-index: 3;
  min-height: 290px;
  display: grid;
  place-items: center;
  padding: 1rem 1.5rem 1.8rem;
}
.earnings__product-frame {
  position: relative;
  width: var(--earnings-product-frame-size);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--color-border);
  padding: 7px;
  background: var(--color-paper-on-ink);
  box-shadow: 5px 7px 0 rgba(16,16,16,.08);
  transform: rotate(-3.2deg);
}
.earnings__product-visual {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-paper-on-ink);
  transition: opacity 150ms ease, filter 150ms ease;
}
.earnings__product-visual.is-switching {
  opacity: .68;
  filter: contrast(.96);
}
.earnings__product-caption {
  position: absolute;
  z-index: 3;
  right: 6%;
  bottom: 1rem;
  padding: .28rem .42rem;
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  font-size: .52rem;
  transform: rotate(1.4deg);
}
.earnings__controls {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--color-border);
  padding-top: 1.35rem;
}
.earnings__range-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}
.earnings__quantity {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 6vw, 2.35rem);
  font-weight: var(--font-weight-black);
  line-height: .9;
  letter-spacing: -.035em;
}
.earnings__range {
  --earnings-range-progress: 20%;
  width: 100%;
  height: 38px;
  margin-top: .85rem;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.earnings__range::-webkit-slider-runnable-track {
  height: 5px;
  border: 1px solid var(--color-text);
  background: linear-gradient(to right, var(--color-brand) 0 var(--earnings-range-progress), var(--color-surface-elevated) var(--earnings-range-progress) 100%);
}
.earnings__range::-moz-range-track {
  height: 5px;
  border: 1px solid var(--color-text);
  background: var(--color-surface-elevated);
}
.earnings__range::-moz-range-progress {
  height: 5px;
  background: var(--color-brand);
}
.earnings__range::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  margin-top: -13px;
  border: 2px solid var(--color-text);
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-paper-on-ink);
  box-shadow: 4px 4px 0 rgba(16,16,16,.12);
}
.earnings__range::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border: 2px solid var(--color-text);
  border-radius: 0;
  background: var(--color-paper-on-ink);
  box-shadow: 4px 4px 0 rgba(16,16,16,.12);
}
.earnings__range:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; }
.earnings__range-marks {
  display: flex;
  justify-content: space-between;
  margin-top: -.2rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .48rem;
}
.earnings__result {
  position: relative;
  z-index: 2;
  border-top: 2px solid var(--color-text);
  padding-top: 1.4rem;
}
.earnings__sold,
.earnings__rate-note { color: var(--color-text-muted); font-size: .58rem; }
.earnings__result-label {
  margin-top: .65rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 5.6vw, 2rem);
  font-weight: var(--font-weight-black);
  line-height: .95;
  letter-spacing: -.035em;
}
.earnings__amount {
  display: grid;
  min-height: 1.78em;
  margin-top: .35rem;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: clamp(2.55rem, 10.5vw, 4.25rem);
  font-weight: var(--font-weight-black);
  line-height: .82;
  letter-spacing: -.055em;
}
.earnings__amount-line {
  display: block;
  white-space: nowrap;
}
.earnings__rate-note { margin-top: .85rem; }
.earnings__disclaimer {
  position: relative;
  z-index: 2;
  max-width: 42rem;
  border-top: 1px solid var(--color-border);
  padding-top: 1.2rem;
  color: var(--color-text-secondary);
  font-size: .88rem;
  line-height: 1.55;
}
.earnings__truths {
  display: grid;
  border-top: 2px solid var(--color-text);
}
.earnings__truth {
  padding: 1.25rem 0 1.35rem;
  border-bottom: 1px solid var(--color-border);
}
.earnings__truth span { color: var(--color-text); font-size: .6rem; }
.earnings__truth p {
  max-width: 34rem;
  margin-top: .55rem;
  color: var(--color-text-secondary);
  font-size: .92rem;
  line-height: 1.55;
}
.earnings__cat-wrap {
  position: absolute;
  z-index: 0;
  right: 5%;
  bottom: -.8rem;
  width: min(42vw, 180px);
  margin: 0;
  pointer-events: auto;
}
.earnings__cat-art {
  position: relative;
  translate: 0 0;
  rotate: -24deg;
  transform-origin: 50% 100%;
  transition: translate 930ms cubic-bezier(.18,.82,.22,1);
  will-change: translate;
}
.earnings__cat { display: block; width: 100%; height: auto; }
.earnings__cat-note {
  position: absolute;
  right: -2%;
  bottom: 7%;
  padding: .28rem .4rem;
  background: var(--color-brand);
  color: var(--color-ink-fixed);
  font-size: .52rem;
  transform: rotate(-2deg);
}
@media (hover: hover) and (pointer: fine) {
  .earnings__cat-wrap:hover .earnings__cat-art {
    translate: 0 80%;
  }
}
.earnings__punchline {
  margin-top: clamp(5rem, 13vw, 8rem);
  border-top: 2px solid var(--color-text);
  padding-top: clamp(2rem, 6vw, 3rem);
}
.earnings__punchline p {
  max-width: 15ch;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 5.5rem);
  font-weight: var(--font-weight-black);
  line-height: .88;
  letter-spacing: -.06em;
}
.js .earnings.is-animating [data-earnings-reveal] {
  opacity: 0;
  transform: translateY(12px);
}
.js .earnings.is-animating [data-earnings-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 360ms var(--earnings-delay, 0ms) ease-out,
    transform 500ms var(--earnings-delay, 0ms) cubic-bezier(.2,.78,.2,1);
}
.js .earnings.is-animating [data-earnings-cat] { opacity: 0; }
.js .earnings.is-animating.is-cat-visible [data-earnings-cat] {
  opacity: 1;
  transition: opacity 320ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .earnings__cat-art,
  .earnings__product-visual { transition: none; }
  .earnings__cat-wrap:hover .earnings__cat-art { translate: 0 0; }
}


/* Homepage / Section #08 — collaboration process / "TO CO TERAZ?" */
.collab-process {
  position: relative;
  overflow: clip;
  border-top: var(--border-thin);
  padding-block: clamp(6rem, 14vw, 9rem);
  background: var(--color-page);
}
.collab-process__inner { position: relative; }
.collab-process__intro { max-width: 980px; }
.collab-process__title {
  max-width: 14ch;
  margin-top: .8rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(3.3rem, 12vw, 6rem);
  font-weight: var(--font-weight-black);
  line-height: .86;
  letter-spacing: -.065em;
}
.collab-process__lead {
  max-width: 690px;
  margin-top: 1.5rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  line-height: 1.55;
}

.collab-process__steps {
  position: relative;
  margin-top: clamp(4rem, 10vw, 6.5rem);
  border-bottom: 2px solid var(--color-text);
}
.collab-process__steps-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 2px solid var(--color-text);
  padding: .7rem 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .54rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  letter-spacing: .07em;
}
.collab-process__steps-head span:last-child { display: none; }
.collab-process__step {
  position: relative;
  display: grid;
  gap: 1rem;
  border-top: 1px solid var(--color-border);
  padding-block: clamp(2rem, 6vw, 2.8rem);
}
.collab-process__step::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 58px;
  height: 2px;
  background: var(--color-brand);
  transform: scaleX(.18);
  transform-origin: left center;
  transition: transform var(--transition-slow);
}
.collab-process__step:hover::after { transform: scaleX(1); }
.collab-process__code,
.collab-process__status,
.collab-process__small-note,
.collab-process__offer-labels,
.collab-process__break-label,
.collab-process__break-micro,
.collab-process__working-kicker,
.collab-process__working-core,
.collab-process__tasks,
.collab-process__you-card figcaption,
.collab-process__you-gag,
.collab-process__approval-kicker,
.collab-process__approval-tags,
.collab-process__approval-gag,
.collab-process__final-statuses,
.collab-process__complete,
.process-decision__utility,
.process-decision__secondary { font-family: var(--font-mono); }
.collab-process__code {
  color: var(--color-text-muted);
  font-size: .66rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  letter-spacing: .065em;
}
.collab-process__code span {
  display: inline-block;
  min-width: 2.2em;
  color: var(--color-brand);
}
.collab-process__body h3 {
  max-width: 19ch;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(2rem, 7.5vw, 3rem);
  font-weight: var(--font-weight-black);
  line-height: .93;
  letter-spacing: -.045em;
}
.collab-process__body > p:not(.collab-process__small-note) {
  max-width: 680px;
  margin-top: .75rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.collab-process__side {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 38px;
}
.collab-process__status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  border-bottom: 1px solid currentColor;
  padding: .35rem .15rem .32rem 0;
  color: var(--color-text-muted);
  font-size: .56rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: .06em;
  white-space: nowrap;
}
.collab-process__status--boxed,
.collab-process__status--approved {
  border: 1px solid var(--color-text);
  padding: .5rem .62rem;
  color: var(--color-text);
}
.collab-process__status--approved {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-ink-fixed);
}
.collab-process__start-cta {
  width: fit-content;
  margin-top: 1.45rem;
}
.collab-process__offer-labels {
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
  max-width: 720px;
  margin-top: 1.35rem;
}
.collab-process__offer-labels span {
  border: 1px solid var(--color-border-strong, var(--color-text));
  padding: .46rem .56rem;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: .5rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .045em;
  line-height: 1.15;
}
.collab-process__small-note {
  max-width: 540px;
  margin-top: 1.15rem;
  color: var(--color-text-muted);
  font-size: .55rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .04em;
  line-height: 1.45;
}

/* deliberate end of the classic process */
.collab-process__rupture {
  position: relative;
  margin-top: clamp(4.5rem, 11vw, 8rem);
  padding-top: clamp(2.2rem, 6vw, 3.5rem);
}
.collab-process__rupture-line {
  display: block;
  width: min(84%, 780px);
  height: 5px;
  background: var(--color-text);
  clip-path: polygon(0 35%, 29% 0, 48% 58%, 71% 18%, 100% 45%, 100% 100%, 0 100%);
  transform: rotate(-1deg);
  transform-origin: left center;
}
.collab-process__rupture-copy {
  position: relative;
  max-width: 1120px;
  margin-top: clamp(2rem, 5vw, 3.4rem);
}
.collab-process__break-label,
.collab-process__break-micro {
  color: var(--color-brand);
  font-size: .6rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .075em;
}
.collab-process__rupture h2 {
  max-width: 15ch;
  margin-top: .8rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(3rem, 10.7vw, 6.5rem);
  font-weight: var(--font-weight-black);
  line-height: .86;
  letter-spacing: -.065em;
}
.collab-process__break-micro { margin-top: 1.2rem; color: var(--color-text-muted); }
.collab-process__break-copy {
  max-width: 650px;
  margin-top: .9rem;
  color: var(--color-text-secondary);
  font-size: 1rem;
  line-height: 1.55;
}

/* ZUMI takes over */
.collab-process__working {
  position: relative;
  margin-top: clamp(4rem, 10vw, 7rem);
  border: 2px solid var(--color-ink-fixed);
  background: var(--color-brand);
  color: var(--color-ink-fixed);
  box-shadow: 9px 10px 0 color-mix(in srgb, var(--color-text) 16%, transparent);
}
.collab-process__working-copy {
  border-bottom: 1px solid rgba(16,16,16,.42);
  padding: clamp(1.4rem, 4vw, 2.3rem);
}
.collab-process__working-kicker {
  font-size: .56rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .075em;
}
.collab-process__working-copy h3 {
  margin-top: .5rem;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 12vw, 7.2rem);
  font-weight: var(--font-weight-black);
  line-height: .84;
  letter-spacing: -.065em;
}
.collab-process__working-copy > p:last-child {
  max-width: 620px;
  margin-top: 1rem;
  font-size: .92rem;
  line-height: 1.5;
}
.collab-process__working-board {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  padding: clamp(1.2rem, 4vw, 2.5rem);
}
.collab-process__working-board::before {
  content: "";
  position: absolute;
  inset: 4% 3%;
  border: 1px dashed rgba(16,16,16,.38);
  pointer-events: none;
}
.collab-process__working-core {
  position: relative;
  z-index: 4;
  display: grid;
  gap: .5rem;
  width: min(100%, 440px);
  border: 2px solid var(--color-ink-fixed);
  padding: 1rem 1.1rem;
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  transform: rotate(-1.2deg);
}
.collab-process__working-core span {
  font-size: clamp(1rem, 4vw, 1.45rem);
  font-weight: 800;
  letter-spacing: .045em;
}
.collab-process__working-core small {
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .055em;
  line-height: 1.4;
}
.collab-process__tasks {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: .48rem;
  margin-top: 1.5rem;
}
.collab-process__tasks span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--color-ink-fixed);
  padding: .46rem .56rem;
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .045em;
  line-height: 1.1;
  box-shadow: 2px 2px 0 rgba(16,16,16,.14);
}
.collab-process__tasks span:nth-child(3n+1) { transform: rotate(-1.4deg); }
.collab-process__tasks span:nth-child(3n+2) { transform: rotate(.9deg); }
.collab-process__tasks span:nth-child(4n) { background: color-mix(in srgb, #fff 84%, var(--color-brand)); }
.collab-process__working-asset {
  position: absolute;
  right: -8%;
  bottom: -3%;
  z-index: 2;
  width: min(92%, 660px);
  margin: 0;
  pointer-events: none;
}
.collab-process__working-paper {
  position: absolute;
  inset: 13% 2% 4% 10%;
  border: 2px solid var(--color-ink-fixed);
  background: var(--color-paper-on-ink);
  transform: rotate(4deg);
}
.collab-process__working-asset img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: none;
  transform: rotate(-2deg);
}

/* client can get back to life */
.collab-process__you {
  margin-top: clamp(5.5rem, 13vw, 9rem);
}
.collab-process__you-head {
  display: grid;
  gap: .8rem;
}
.collab-process__you-head h3 {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(3rem, 11vw, 6.4rem);
  font-weight: var(--font-weight-black);
  line-height: .86;
  letter-spacing: -.06em;
}
.collab-process__you-head p {
  color: var(--color-text-secondary);
  font-size: 1.05rem;
}
.collab-process__you-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 4vw, 1.7rem);
  margin-top: clamp(2.5rem, 7vw, 4rem);
}
.collab-process__you-card {
  position: relative;
  margin: 0;
}
.collab-process__you-visual {
  position: relative;
  display: grid;
  place-items: end center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--color-text);
  background: var(--color-surface);
}
.collab-process__you-visual::before {
  content: "";
  position: absolute;
  inset: 8% 8% 10%;
  background: color-mix(in srgb, var(--color-brand) 16%, var(--color-page));
  transform: rotate(-4deg);
}
.collab-process__you-card img {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 92%;
  max-height: 96%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) contrast(1.04);
}
.collab-process__you-card figcaption {
  display: inline-block;
  margin-top: .6rem;
  border-bottom: 1px solid currentColor;
  color: var(--color-text);
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .055em;
}
.collab-process__you-card--film { transform: rotate(-1.2deg); }
.collab-process__you-card--coffee { margin-top: 1.8rem; transform: rotate(1.5deg); }
.collab-process__you-card--sleep { transform: rotate(1deg); }
.collab-process__you-card--anything { margin-top: 1rem; transform: rotate(-1.6deg); }
.collab-process__you-card--film img { max-height: 112%; }
.collab-process__you-card--coffee img { max-width: 106%; max-height: 110%; }
.collab-process__you-card--sleep img { max-width: 83%; max-height: 88%; }
.collab-process__you-card--anything img { max-width: 72%; max-height: 88%; }
.collab-process__you-gag {
  width: fit-content;
  margin-top: 2rem;
  border: 1px solid var(--color-text);
  padding: .65rem .8rem;
  background: var(--color-brand);
  color: var(--color-ink-fixed);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .045em;
  line-height: 1.35;
  transform: rotate(-.8deg);
}

.collab-process__approval {
  margin-top: clamp(5rem, 13vw, 9rem);
  border-top: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
  padding-block: clamp(2.6rem, 7vw, 4.5rem);
}
.collab-process__approval-kicker {
  color: var(--color-brand);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .075em;
}
.collab-process__approval-layout {
  display: grid;
  gap: 2.4rem;
  margin-top: 1.1rem;
}
.collab-process__approval h3 {
  max-width: 17ch;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 9vw, 5rem);
  font-weight: var(--font-weight-black);
  line-height: .9;
  letter-spacing: -.055em;
}
.collab-process__approval-layout p {
  max-width: 630px;
  margin-top: .9rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.collab-process__approval-side { display: grid; gap: 1.5rem; align-content: end; }
.collab-process__approval-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.collab-process__approval-tags span {
  border: 1px solid var(--color-text);
  padding: .52rem .6rem;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .045em;
}
.collab-process__approval-gag {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}
.collab-process__approval-gag span {
  border: 2px solid var(--color-text);
  padding: .75rem .9rem;
  background: var(--color-brand);
  color: var(--color-ink-fixed);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .05em;
  transform: rotate(-1deg);
}
.collab-process__approval-gag span:last-child {
  background: var(--color-surface);
  color: var(--color-text);
  transform: rotate(1.2deg);
}

.collab-process__final {
  margin-top: clamp(5.5rem, 14vw, 10rem);
}
.collab-process__final-layout {
  display: grid;
  gap: 2.2rem;
  margin-top: .9rem;
}
.collab-process__final h2 {
  max-width: 12ch;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 12vw, 7rem);
  font-weight: var(--font-weight-black);
  line-height: .84;
  letter-spacing: -.065em;
}
.collab-process__final-layout > div > p {
  max-width: 650px;
  margin-top: 1rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.collab-process__final-statuses {
  display: grid;
  gap: .45rem;
  align-content: end;
}
.collab-process__final-statuses span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 40px;
  border-bottom: 1px solid var(--color-border);
  padding: .6rem 0;
  color: var(--color-text);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .055em;
}
.collab-process__final-statuses span::after {
  content: "ON";
  border: 1px solid var(--color-text);
  padding: .25rem .4rem;
  background: var(--color-brand);
  color: var(--color-ink-fixed);
  font-size: .46rem;
}
.collab-process__punch {
  display: grid;
  gap: 1.4rem;
  margin-top: clamp(4rem, 10vw, 7rem);
  border-top: 2px solid var(--color-text);
  padding-top: clamp(2rem, 5vw, 3.2rem);
}
.collab-process__punch h3 {
  max-width: 17ch;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 10vw, 5.8rem);
  font-weight: var(--font-weight-black);
  line-height: .87;
  letter-spacing: -.06em;
}
.collab-process__punch p {
  max-width: 590px;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.collab-process__complete {
  display: grid;
  gap: .65rem;
  margin-top: clamp(3.5rem, 9vw, 6rem);
  border: 1px solid var(--color-text);
  padding: 1rem;
  background: var(--color-text);
  color: var(--color-page);
}
.collab-process__complete span {
  color: var(--color-brand);
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .075em;
}
.collab-process__complete strong {
  font-size: .66rem;
  letter-spacing: .055em;
  line-height: 1.35;
}
.collab-process__complete-link {
  width: fit-content;
  color: var(--color-page);
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .07em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease, transform 180ms ease;
}
.collab-process__complete-link span {
  display: inline-block;
  margin-left: .2rem;
  color: var(--color-brand);
  transition: transform 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .collab-process__complete-link:hover { color: var(--color-brand); }
  .collab-process__complete-link:hover span { transform: translateY(-2px); }
}
.collab-process__complete-link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
}

/* process CTA gag dialog */
.process-decision {
  width: min(calc(100% - 2rem), 760px);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  border: 2px solid var(--color-text);
  padding: 0;
  background: var(--color-page);
  color: var(--color-text);
  box-shadow: 12px 14px 0 var(--color-brand);
}
.process-decision::backdrop { background: rgba(16,16,16,.72); }
.process-decision__panel {
  position: relative;
  padding: clamp(1.5rem, 5vw, 3.2rem);
}
.process-decision__close {
  position: absolute;
  top: .8rem;
  right: .8rem;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-text);
  background: transparent;
  color: var(--color-text);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.process-decision__utility {
  padding-right: 3rem;
  color: var(--color-brand);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .075em;
}
.process-decision h2 {
  max-width: 10ch;
  margin-top: .9rem;
  font-family: var(--font-display);
  font-size: clamp(3rem, 11vw, 5.7rem);
  font-weight: var(--font-weight-black);
  line-height: .84;
  letter-spacing: -.065em;
}
.process-decision__panel > p:not(.process-decision__utility):not(.process-decision__punch) {
  max-width: 610px;
  margin-top: 1.35rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}
.process-decision__punch {
  max-width: 19ch;
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6vw, 2.7rem);
  font-weight: var(--font-weight-black);
  line-height: .93;
  letter-spacing: -.04em;
}
.process-decision__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1rem;
  align-items: center;
  margin-top: 2rem;
}
.process-decision__secondary {
  min-height: 42px;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: .45rem 0;
  background: transparent;
  color: var(--color-text);
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .045em;
  cursor: pointer;
}
.process-decision__close:focus-visible,
.process-decision__secondary:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 3px; }

/* motion: calm start → break → active system → quiet life → clean final */
.js .collab-process.is-animating [data-collab-reveal],
.js .collab-process.is-animating [data-collab-task],
.js .collab-process.is-animating [data-collab-you],
.js .collab-process.is-animating [data-collab-status] {
  opacity: 0;
  translate: 0 10px;
}
.js .collab-process.is-animating [data-collab-task] { scale: .94; }
.js .collab-process.is-animating [data-collab-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 340ms var(--collab-delay, 0ms) ease-out,
    translate 480ms var(--collab-delay, 0ms) cubic-bezier(.2,.78,.2,1);
}
.js .collab-process.is-animating [data-collab-task].is-visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition:
    opacity 180ms var(--collab-delay, 0ms) ease-out,
    translate 320ms var(--collab-delay, 0ms) cubic-bezier(.18,.86,.28,1.12),
    scale 320ms var(--collab-delay, 0ms) cubic-bezier(.18,.86,.28,1.12);
}
.js .collab-process.is-animating [data-collab-you].is-visible,
.js .collab-process.is-animating [data-collab-status].is-visible {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 260ms var(--collab-delay, 0ms) ease-out,
    translate 420ms var(--collab-delay, 0ms) cubic-bezier(.2,.78,.2,1);
}
.js .collab-process.is-animating .collab-process__rupture:not(.is-visible) .collab-process__rupture-line { transform: rotate(-1deg) scaleX(0); }
.js .collab-process.is-animating .collab-process__rupture.is-visible .collab-process__rupture-line {
  transform: rotate(-1deg) scaleX(1);
  transition: transform 420ms 80ms cubic-bezier(.2,.75,.18,1);
}
.js .collab-process.is-animating .collab-process__step.is-visible::after {
  transform: scaleX(1);
  transition-delay: var(--collab-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .collab-process *,
  .process-decision * { scroll-behavior: auto !important; }
  .js .collab-process [data-collab-reveal],
  .js .collab-process [data-collab-task],
  .js .collab-process [data-collab-you],
  .js .collab-process [data-collab-status] {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    transition: none !important;
  }
  .collab-process__rupture-line { transform: rotate(-1deg) !important; transition: none !important; }
}

/* Homepage / Section #09 — after launch interlude */
.after-launch {
  position: relative;
  overflow: clip;
  padding-block: clamp(5rem, 13vw, 8rem);
  background: var(--color-ink-fixed);
  color: var(--color-paper-on-ink);
}
.after-launch::before {
  content: "";
  position: absolute;
  top: 12%;
  right: -8%;
  width: min(54vw, 520px);
  aspect-ratio: 1;
  border: 1px solid rgba(255,252,255,.13);
  transform: rotate(8deg);
}
.after-launch__inner { position: relative; z-index: 1; }
.after-launch__intro { max-width: 1060px; }
.after-launch__title {
  max-width: 14ch;
  margin-top: .8rem;
  color: var(--color-paper-on-ink);
  font-family: var(--font-display);
  font-size: clamp(3rem, 10.5vw, 6.2rem);
  font-weight: var(--font-weight-black);
  line-height: .86;
  letter-spacing: -.065em;
}
.after-launch__middle {
  position: relative;
  margin-top: clamp(3.2rem, 8vw, 5rem);
}
.after-launch__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .45rem;
  max-width: 900px;
}
.after-launch__tag {
  --after-tag-rotate: 0deg;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid rgba(255,252,255,.45);
  padding: .48rem .62rem;
  color: var(--color-paper-on-ink);
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: .06em;
  transform: rotate(var(--after-tag-rotate));
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.after-launch__tag:nth-child(2) { --after-tag-rotate: .8deg; }
.after-launch__tag:nth-child(4) { --after-tag-rotate: -.7deg; }
.after-launch__tag:nth-child(6) { --after-tag-rotate: .6deg; }
.after-launch__tag--accent {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-ink-fixed);
}
.after-launch__tag:hover { transform: translateY(-2px) rotate(var(--after-tag-rotate)); }
.after-launch__hand-note {
  position: relative;
  width: fit-content;
  margin: 1.65rem 0 0 auto;
  color: var(--color-paper-on-ink);
  font-family: var(--font-editorial);
  font-size: clamp(1.15rem, 4.6vw, 1.7rem);
  font-style: italic;
  line-height: 1;
  transform: rotate(-2deg);
}
.after-launch__hand-note::before {
  content: "";
  position: absolute;
  right: calc(100% + .65rem);
  bottom: .3em;
  width: 46px;
  height: 18px;
  border-top: 1px solid var(--color-brand);
  border-left: 1px solid var(--color-brand);
  transform: skewX(-24deg) rotate(-7deg);
}
.after-launch__closing {
  display: grid;
  gap: 1rem;
  margin-top: clamp(4rem, 11vw, 6.5rem);
  border-top: 1px solid rgba(255,252,255,.22);
  padding-top: 1.5rem;
}
.after-launch__index {
  color: rgba(255,252,255,.52);
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .07em;
}
.after-launch__punchline {
  max-width: 13ch;
  color: var(--color-paper-on-ink);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 4.4rem);
  font-weight: var(--font-weight-black);
  line-height: .9;
  letter-spacing: -.055em;
}
.js .after-launch.is-animating [data-after-reveal],
.js .after-launch.is-animating [data-after-tag] {
  opacity: 0;
  transform: translateY(9px) rotate(var(--after-tag-rotate, 0deg));
}
.js .after-launch.is-animating [data-after-reveal].is-visible,
.js .after-launch.is-animating [data-after-tag].is-visible {
  opacity: 1;
  transform: translateY(0) rotate(var(--after-tag-rotate, 0deg));
  transition:
    opacity 320ms var(--after-delay, 0ms) ease-out,
    transform 440ms var(--after-delay, 0ms) cubic-bezier(.2,.8,.2,1);
}

/* Homepage / Section #10 — creator worlds */
.creator-worlds {
  position: relative;
  overflow: clip;
  border-top: var(--border-thin);
  padding-block: clamp(6rem, 14vw, 10rem);
  background: var(--color-page);
}
.creator-worlds__intro { max-width: 1020px; }
.creator-worlds__title {
  max-width: 15ch;
  margin-top: .8rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(3rem, 10.5vw, 6rem);
  font-weight: var(--font-weight-black);
  line-height: .86;
  letter-spacing: -.065em;
}
.creator-worlds__lead {
  max-width: 690px;
  margin-top: 1.4rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  line-height: 1.55;
}
.creator-worlds__grid {
  display: grid;
  gap: 1.4rem;
  margin-top: clamp(4rem, 10vw, 6.5rem);
}
.creator-world {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 560px;
  flex-direction: column;
  overflow: hidden;
  overflow: clip;
  border-top: 2px solid currentColor;
  border-bottom: 1px solid currentColor;
  padding: 1.4rem 1rem 1.2rem;
  color: var(--color-text);
  text-decoration: none;
}
.creator-world:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 5px;
}
.creator-world__utility,
.creator-world__link,
.creator-world__caption,
.creator-world__fashion-mark,
.creator-world__tour-poster span,
.creator-world__tour-poster small,
.creator-world__ticket { font-family: var(--font-mono); }
.creator-world__utility {
  position: relative;
  z-index: 4;
  font-size: .58rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .07em;
}
.creator-world h3 {
  position: relative;
  z-index: 4;
  max-width: 13ch;
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 9.2vw, 4.4rem);
  font-weight: var(--font-weight-black);
  line-height: .88;
  letter-spacing: -.06em;
}
.creator-world > p {
  position: relative;
  z-index: 4;
  max-width: 37rem;
  margin-top: 1rem;
  line-height: 1.55;
}
.creator-world__visual {
  position: relative;
  z-index: 2;
  min-height: 225px;
  margin-top: auto;
  pointer-events: none;
}
.creator-world__link {
  position: relative;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  width: fit-content;
  margin-top: 1.1rem;
  border-bottom: 1px solid currentColor;
  padding-bottom: .25rem;
  font-size: .62rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .055em;
}
.creator-world__link b { color: var(--color-brand); font-size: 1rem; transition: transform var(--transition-fast); }
.creator-world:hover .creator-world__link b,
.creator-world:focus-visible .creator-world__link b { transform: translateX(5px); }
.creator-world--youtube { background: var(--color-surface); }
.creator-world--youtube::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -17%;
  bottom: 8%;
  width: 72%;
  aspect-ratio: 1;
  opacity: .14;
  background-image: radial-gradient(circle, var(--color-text) 1px, transparent 1.5px);
  background-size: 8px 8px;
  transform: rotate(-6deg);
}
.creator-world__visual--youtube img {
  position: absolute;
  left: 12%;
  bottom: -14px;
  width: min(46%, 185px);
  height: auto;
  filter: grayscale(1) drop-shadow(4px 5px 0 rgba(16,16,16,.1));
  transform: rotate(-5deg);
  transition: transform var(--transition-base);
}
.creator-world__caption {
  position: absolute;
  z-index: 2;
  border: 1px solid var(--color-text);
  padding: .36rem .46rem;
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  font-size: .5rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .045em;
}
.creator-world__caption--a { top: 18%; right: 5%; transform: rotate(2deg); }
.creator-world__caption--b { right: 11%; bottom: 14%; transform: rotate(-1deg); }
.creator-world--youtube:hover .creator-world__visual--youtube img { transform: translateY(-7px) rotate(-5deg); }

.creator-world--creator {
  background: var(--color-brand);
  color: var(--color-ink-fixed);
}
.creator-world--creator .creator-world__link b { color: var(--color-ink-fixed); }
.creator-world__visual--creator {
  min-height: 255px;
  margin-inline: -1rem;
  overflow: hidden;
}
.creator-world__visual--creator::before {
  content: "";
  position: absolute;
  right: 9%;
  bottom: -28%;
  width: 70%;
  aspect-ratio: 1.1;
  background: var(--color-paper-on-ink);
  transform: rotate(-4deg);
}
.creator-world__visual--creator img {
  position: absolute;
  z-index: 2;
  right: 2%;
  bottom: -34px;
  width: min(57%, 225px);
  height: auto;
  transform: rotate(4deg);
  transition: transform var(--transition-base);
}
.creator-world__fashion-mark {
  position: absolute;
  z-index: 3;
  left: 8%;
  bottom: 26%;
  border-bottom: 2px solid var(--color-ink-fixed);
  padding-bottom: .25rem;
  color: var(--color-ink-fixed);
  font-size: .56rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .07em;
}
.creator-world--creator:hover .creator-world__visual--creator img { transform: translateY(-7px) rotate(4deg); }

.creator-world--music {
  background: var(--color-ink-fixed);
  color: var(--color-paper-on-ink);
}
.creator-world--music > p { color: var(--color-paper-on-ink); }
.creator-world--music .creator-world__link b { color: var(--color-brand); }
.creator-world__visual--music { min-height: 270px; }
.creator-world__tour-poster {
  position: absolute;
  left: 7%;
  bottom: 0;
  width: min(68%, 260px);
  border: 1px solid rgba(255,252,255,.42);
  padding: 1rem;
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  transform: rotate(-5deg);
  transition: transform var(--transition-base);
}
.creator-world__tour-poster span,
.creator-world__tour-poster small {
  display: block;
  font-size: .5rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .06em;
}
.creator-world__tour-poster strong {
  display: block;
  margin-block: .8rem 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 10vw, 4.5rem);
  line-height: .76;
  letter-spacing: -.07em;
}
.creator-world__ticket {
  position: absolute;
  right: 3%;
  bottom: 22%;
  border: 1px dashed rgba(255,252,255,.65);
  padding: .48rem .58rem;
  color: var(--color-paper-on-ink);
  font-size: .5rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .055em;
  transform: rotate(6deg);
}
.creator-world--music:hover .creator-world__tour-poster { transform: translateY(-7px) rotate(-5deg); }
.js .creator-worlds.is-animating [data-world-reveal] {
  opacity: 0;
  transform: translateY(12px);
}
.js .creator-worlds.is-animating [data-world-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 350ms var(--world-delay, 0ms) ease-out,
    transform 500ms var(--world-delay, 0ms) cubic-bezier(.2,.78,.2,1);
}

/* Homepage / Section #11 — real proof / WręczWspaniale */
.real-proof {
  position: relative;
  overflow: hidden;
  overflow: clip;
  border-top: var(--border-thin);
  padding-block: clamp(6rem, 14vw, 10rem);
  background: var(--color-page);
}
.real-proof__inner { position: relative; }
.real-proof__layout {
  display: grid;
  gap: clamp(4rem, 10vw, 7rem);
  align-items: start;
}
.real-proof__copy {
  position: relative;
  min-width: 0;
  max-width: 680px;
}
.real-proof__statements {
  display: grid;
  gap: clamp(.48rem, 1.5vw, .72rem);
  margin-top: clamp(1.2rem, 3vw, 1.8rem);
}
.real-proof__lead {
  max-width: 34rem;
  margin-top: clamp(1.25rem, 3vw, 1.8rem);
  color: var(--color-text);
  font-size: clamp(.94rem, 1.8vw, 1.08rem);
  line-height: 1.42;
}
.real-proof__statement {
  display: grid;
  justify-items: start;
  gap: .08em;
  max-width: 100%;
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-display);
  font-weight: var(--font-weight-black);
}
.real-proof__statement-word {
  display: block;
  font-size: clamp(2.7rem, 9vw, 4.05rem);
  line-height: .72;
  letter-spacing: -.075em;
  text-transform: uppercase;
}
.real-proof__statement-copy {
  display: block;
  max-width: 22ch;
  font-size: clamp(1.04rem, 3.6vw, 1.48rem);
  line-height: .9;
  letter-spacing: -.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.real-proof__statement--primary::after {
  content: "";
  display: block;
  width: 58px;
  height: 4px;
  margin-top: .28rem;
  background: var(--color-brand);
  transform: rotate(-1.25deg);
}
.real-proof__statement--secondary .real-proof__statement-copy {
  font-size: clamp(1rem, 3.25vw, 1.34rem);
}
.real-proof__statement--tertiary .real-proof__statement-copy {
  max-width: 24ch;
  font-size: clamp(.94rem, 2.95vw, 1.22rem);
}
.real-proof__body {
  display: grid;
  gap: .8rem;
  max-width: 610px;
  margin-top: 1rem;
}
.real-proof__body p {
  color: var(--color-text-secondary);
  font-size: clamp(.92rem, 1.8vw, 1.02rem);
  line-height: 1.58;
}
.real-proof__note {
  width: fit-content;
  max-width: 28rem;
  margin: 1.25rem 0 0 auto;
  color: var(--color-text);
  font-family: var(--font-editorial);
  font-size: clamp(1rem, 2.5vw, 1.22rem);
  font-style: italic;
  line-height: 1.18;
  transform: rotate(-1.3deg);
}
.real-proof__link { margin-top: 1.35rem; }

/* One continuous newspaper composition — intentionally fixed to light newsprint in both themes. */
.real-proof__newspaper {
  --proof-newsprint: #F1EEE4;
  --proof-ink: #11100F;
  --proof-muted: #514D47;
  --proof-rule: rgba(17,16,15,.66);
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: clamp(1.25rem, 4vw, 2.3rem);
  color: var(--proof-ink);
  background:
    repeating-linear-gradient(0deg, rgba(17,16,15,.017) 0 1px, transparent 1px 4px),
    var(--proof-newsprint);
  border: 1px solid rgba(17,16,15,.68);
  box-shadow:
    8px 10px 0 rgba(16,16,16,.08),
    0 20px 45px rgba(16,16,16,.08);
  clip-path: polygon(.4% .2%, 12% 0, 27% .35%, 43% .1%, 61% .32%, 78% .05%, 99.5% .35%, 100% 18%, 99.65% 38%, 100% 57%, 99.55% 78%, 99.8% 99.45%, 82% 99.7%, 63% 99.45%, 42% 99.85%, 23% 99.5%, .35% 99.8%, .1% 78%, .45% 58%, .1% 39%, .4% 19%);
}
.real-proof__newspaper::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background:
    radial-gradient(circle at 18% 24%, rgba(17,16,15,.08) 0 1px, transparent 1.5px) 0 0 / 9px 9px,
    radial-gradient(circle at 77% 63%, rgba(17,16,15,.055) 0 .8px, transparent 1.2px) 0 0 / 13px 13px;
  mix-blend-mode: multiply;
}
.real-proof__newspaper-head { position: relative; z-index: 1; }
.real-proof__masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-top: 4px double var(--proof-ink);
  border-bottom: 4px double var(--proof-ink);
  padding-block: .65rem .55rem;
  font-family: var(--font-editorial);
}
.real-proof__masthead strong {
  font-size: clamp(1.05rem, 3.6vw, 1.55rem);
  line-height: 1;
  letter-spacing: -.025em;
}
.real-proof__masthead span {
  font-family: var(--font-mono);
  font-size: clamp(.42rem, 1.5vw, .56rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: .055em;
  text-align: right;
}
.real-proof__newspaper-kicker,
.real-proof__article-no,
.real-proof__clipping figcaption,
.real-proof__newspaper-footer,
.real-proof__interview-head {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  letter-spacing: .055em;
}
.real-proof__newspaper-kicker {
  margin-top: 1rem;
  font-size: .52rem;
}
.real-proof__newspaper-title {
  max-width: 13ch;
  margin-top: .55rem;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7.2vw, 3.8rem);
  font-weight: var(--font-weight-black);
  line-height: .78;
  letter-spacing: -.075em;
  text-transform: uppercase;
}
.real-proof__newspaper-deck {
  max-width: 42rem;
  margin-top: 1rem;
  font-family: var(--font-editorial);
  font-size: clamp(1.05rem, 3.1vw, 1.45rem);
  font-weight: 700;
  line-height: 1.2;
}
.real-proof__newspaper-rule {
  height: 1px;
  margin-block: clamp(1.4rem, 4vw, 2.2rem);
  background: var(--proof-rule);
}
.real-proof__newspaper-intro {
  display: grid;
  gap: 1.4rem;
  align-items: start;
}
.real-proof__newspaper-copy {
  display: grid;
  gap: .8rem;
  min-width: 0;
}
.real-proof__newspaper-copy p,
.real-proof__article-section > p:not(.real-proof__article-no),
.real-proof__interview dd {
  color: var(--proof-ink);
  font-family: var(--font-editorial);
  font-size: clamp(.92rem, 2vw, 1.04rem);
  line-height: 1.52;
}
.real-proof__dropcap::first-letter {
  float: left;
  margin: .03em .08em 0 0;
  font-family: var(--font-display);
  font-size: 3.45em;
  font-weight: var(--font-weight-black);
  line-height: .77;
}
.real-proof__clipping {
  position: relative;
  width: min(58%, 210px);
  margin-inline: auto;
  padding: .55rem .55rem .45rem;
  background: #FFFCF6;
  border: 1px solid rgba(17,16,15,.7);
  box-shadow: 4px 5px 0 rgba(17,16,15,.13);
  transform: rotate(2deg);
}
.real-proof__clipping-frame {
  position: relative;
  overflow: hidden;
  min-height: 170px;
  background: #DBD7CC;
  filter: grayscale(1) contrast(1.05);
}
.real-proof__clipping-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(17,16,15,.055) 3px 4px);
}
.real-proof__clipping img {
  display: block;
  width: 120%;
  max-width: none;
  height: auto;
  margin: -12% -10% -25%;
}
.real-proof__clipping figcaption {
  margin-top: .45rem;
  color: var(--proof-ink);
  font-size: .46rem;
  line-height: 1.25;
  text-align: center;
}
.real-proof__columns {
  display: grid;
  gap: 0;
  margin-top: clamp(1.7rem, 5vw, 2.8rem);
  border-top: 4px double var(--proof-ink);
}
.real-proof__article-section {
  min-width: 0;
  border-bottom: 1px solid var(--proof-rule);
  padding-block: 1.15rem 1.3rem;
}
.real-proof__article-no {
  color: var(--proof-muted);
  font-size: .48rem;
}
.real-proof__article-section h4 {
  max-width: 100%;
  margin-top: .45rem;
  color: var(--proof-ink);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 4.2vw, 1.8rem);
  font-weight: var(--font-weight-black);
  line-height: .92;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.real-proof__article-section > p:not(.real-proof__article-no) { margin-top: .7rem; }
.real-proof__interview {
  margin-top: clamp(2rem, 6vw, 3.1rem);
  border-block: 4px double var(--proof-ink);
  padding-block: 1rem 1.2rem;
}
.real-proof__interview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--proof-rule);
  color: var(--proof-ink);
}
.real-proof__interview-head span { font-size: .58rem; }
.real-proof__interview-head small {
  color: var(--proof-muted);
  font-size: .45rem;
  text-align: right;
}
.real-proof__interview-list {
  display: grid;
  gap: 0;
}
.real-proof__interview-list > div {
  display: grid;
  gap: .45rem;
  border-bottom: 1px dotted rgba(17,16,15,.48);
  padding-block: .95rem;
}
.real-proof__interview-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.real-proof__interview dt {
  color: var(--proof-ink);
  font-family: var(--font-body);
  font-size: .86rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
}
.real-proof__interview dd { margin: 0; }
.real-proof__interview-credit {
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px dotted rgba(17,16,15,.48);
  color: var(--proof-muted);
  font-family: var(--font-editorial);
  font-size: clamp(.78rem, 1.7vw, .92rem);
  font-style: italic;
  line-height: 1.45;
}
.real-proof__interview-credit strong {
  color: var(--proof-ink);
  font-style: normal;
}
.real-proof__newspaper-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: 1.2rem;
  border-top: 1px solid var(--proof-ink);
  padding-top: .6rem;
  color: var(--proof-ink);
  font-size: .43rem;
  line-height: 1.2;
}
.real-proof__newspaper-footer strong {
  padding: .28rem .4rem;
  background: var(--color-brand);
  color: var(--color-ink-fixed);
}

.js .real-proof.is-animating [data-proof-reveal],
.js .real-proof.is-animating [data-proof-fragment] {
  opacity: 0;
  transform: translateY(14px);
}
.js .real-proof.is-animating .real-proof__newspaper[data-proof-reveal] {
  transform: translateY(18px) scale(.992);
  transform-origin: 50% 15%;
}
.js .real-proof.is-animating [data-proof-reveal].is-visible,
.js .real-proof.is-animating [data-proof-fragment].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 360ms var(--proof-delay, 0ms) ease-out,
    transform 560ms var(--proof-delay, 0ms) cubic-bezier(.2,.8,.2,1);
}

/* Homepage / Section #12 — Selected Work / creative proof */
.selected-work {
  position: relative;
  overflow: hidden;
  overflow: clip;
  border-top: var(--border-thin);
  padding-block: clamp(6rem, 14vw, 9rem) clamp(6.5rem, 15vw, 10rem);
  background: var(--color-page);
}
.selected-work__inner { position: relative; }
.selected-work__intro { max-width: 920px; }
.selected-work__title {
  max-width: 11ch;
  margin-top: .75rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 14vw, 6.4rem);
  font-weight: var(--font-weight-black);
  line-height: .82;
  letter-spacing: -.07em;
}
.selected-work__lead {
  max-width: 720px;
  margin-top: 1.5rem;
  color: var(--color-text-secondary);
  font-size: clamp(1rem, 2.7vw, 1.16rem);
  line-height: 1.58;
}
.selected-work__wall {
  display: grid;
  gap: clamp(1.25rem, 3.7vw, 2.5rem);
  margin-top: clamp(4rem, 11vw, 7rem);
}
.portfolio-case {
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  overflow: clip;
  border: 1px solid var(--color-border);
}
.portfolio-case__copy {
  position: relative;
  z-index: 6;
  padding: clamp(1.35rem, 4.5vw, 2.2rem);
}
.portfolio-case__status,
.portfolio-case__utility {
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  letter-spacing: .075em;
}
.portfolio-case__status { opacity: .72; }
.portfolio-case__utility { margin-top: .85rem; opacity: .78; }
.portfolio-case h3 {
  max-width: 12ch;
  margin-top: .7rem;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 11vw, 5.2rem);
  font-weight: var(--font-weight-black);
  line-height: .82;
  letter-spacing: -.065em;
}
.portfolio-case__description {
  max-width: 35rem;
  margin-top: 1.1rem;
  font-size: .96rem;
  line-height: 1.55;
}
.portfolio-case__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  width: fit-content;
  margin-top: 1.35rem;
  color: currentColor;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  letter-spacing: .06em;
  text-decoration: none;
}
.portfolio-case__link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -.3rem;
  left: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(.34);
  transform-origin: left center;
  transition: transform var(--transition-fast);
}
.portfolio-case__link:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 5px;
}
.portfolio-case__visual {
  position: relative;
  z-index: 2;
  min-height: 340px;
  overflow: hidden;
  overflow: clip;
}

/* 01 / ADV — paper, route drawing, technical field notes */
.portfolio-case--road {
  min-height: 650px;
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
}
.portfolio-case--road .portfolio-case__description { color: rgba(16,16,16,.72); }
.portfolio-case__visual--road {
  min-height: 390px;
  margin-top: -.5rem;
}
.portfolio-case__road-paper {
  position: absolute;
  z-index: 0;
  inset: 10% -8% -10% 19%;
  border: 1px solid rgba(16,16,16,.18);
  background:
    linear-gradient(rgba(16,16,16,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,16,16,.04) 1px, transparent 1px),
    #f1ece5;
  background-size: 26px 26px;
  transform: rotate(-2.1deg);
}
.portfolio-case__route {
  position: absolute;
  z-index: 1;
  inset: 0 auto auto -5%;
  width: 112%;
  height: 92%;
  fill: none;
  stroke: var(--color-ink-fixed);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .62;
}
.portfolio-case__route-secondary { stroke-dasharray: 7 8; opacity: .45; }
.portfolio-case__route circle { fill: var(--color-brand); stroke: var(--color-ink-fixed); stroke-width: 1; }
.portfolio-case__visual--road img {
  position: absolute;
  z-index: 3;
  right: 4%;
  bottom: -7%;
  width: min(52%, 290px);
  height: auto;
  filter: grayscale(1) contrast(1.05);
  transform: rotate(5deg);
}
.portfolio-case__road-code {
  position: absolute;
  z-index: 4;
  padding: .35rem .45rem;
  border: 1px solid var(--color-ink-fixed);
  background: var(--color-paper-on-ink);
  font-family: var(--font-mono);
  font-size: .5rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .055em;
}
.portfolio-case__road-code--a { top: 14%; left: 5%; transform: rotate(-1deg); }
.portfolio-case__road-code--b { right: 8%; top: 7%; transform: rotate(1.4deg); }
.portfolio-case__road-sticker {
  position: absolute;
  z-index: 5;
  left: 8%;
  bottom: 10%;
  padding: .55rem .7rem;
  background: var(--color-brand);
  color: var(--color-ink-fixed);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 5vw, 1.8rem);
  font-weight: var(--font-weight-black);
  line-height: .8;
  letter-spacing: -.04em;
  transform: rotate(-3deg);
}

/* 02 / MUSIC — narrow night poster / ticket */
.portfolio-case--midnight {
  min-height: 670px;
  background: var(--color-ink-fixed);
  color: var(--color-paper-on-ink);
}
.portfolio-case--midnight .portfolio-case__description { color: rgba(255,252,255,.74); }
.portfolio-case__visual--midnight {
  min-height: 370px;
  padding: 1rem 1rem 0;
}
.portfolio-case__poster {
  position: relative;
  width: min(86%, 340px);
  min-height: 330px;
  margin: 0 auto;
  border: 1px solid rgba(255,252,255,.55);
  padding: 1rem;
  background:
    radial-gradient(circle at 65% 26%, rgba(251,80,18,.38), transparent 25%),
    var(--color-ink-fixed);
  transform: rotate(2.4deg);
}
.portfolio-case__poster::before {
  content: "";
  position: absolute;
  top: 32%;
  right: -8%;
  width: 56%;
  height: 23%;
  border-top: 1px solid rgba(255,252,255,.45);
  border-bottom: 1px solid rgba(255,252,255,.45);
  transform: rotate(-8deg);
}
.portfolio-case__poster-top,
.portfolio-case__poster small {
  position: relative;
  z-index: 2;
  display: block;
  font-family: var(--font-mono);
  font-size: .5rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.45;
  letter-spacing: .08em;
}
.portfolio-case__poster strong {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 1.7rem;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: clamp(4.4rem, 19vw, 7.6rem);
  line-height: .72;
  letter-spacing: -.08em;
}
.portfolio-case__poster-word {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 1.35rem;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 8vw, 3.6rem);
  font-weight: var(--font-weight-black);
  line-height: .78;
  letter-spacing: -.06em;
}
.portfolio-case__poster small { margin-top: 1.3rem; opacity: .72; }
.portfolio-case__ticket {
  position: absolute;
  z-index: 5;
  right: -7%;
  bottom: 10%;
  padding: .5rem .7rem;
  background: var(--color-brand);
  color: var(--color-ink-fixed);
  font-family: var(--font-mono);
  font-size: .52rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .06em;
  transform: rotate(-6deg);
}

/* 03 / CREATOR — orange campaign field, cutout + product */
.portfolio-case--soft {
  min-height: 650px;
  background: var(--color-brand);
  color: var(--color-ink-fixed);
}
.portfolio-case--soft .portfolio-case__description { color: rgba(16,16,16,.75); }
.portfolio-case__visual--soft {
  min-height: 410px;
  margin-top: -.7rem;
}
.portfolio-case__soft-paper {
  position: absolute;
  z-index: 0;
  inset: 7% 8% 3% 28%;
  background: var(--color-paper-on-ink);
  transform: rotate(2.7deg);
}
.portfolio-case__soft-index {
  position: absolute;
  z-index: 4;
  top: 10%;
  right: 8%;
  color: var(--color-ink-fixed);
  font-family: var(--font-mono);
  font-size: .5rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .07em;
  transform: rotate(2.7deg);
}
.portfolio-case__soft-word {
  position: absolute;
  z-index: 2;
  left: 3%;
  bottom: 4%;
  color: rgba(16,16,16,.17);
  font-family: var(--font-display);
  font-size: clamp(5rem, 24vw, 9rem);
  font-weight: var(--font-weight-black);
  line-height: .65;
  letter-spacing: -.085em;
}
.portfolio-case__soft-person {
  position: absolute;
  z-index: 3;
  left: 9%;
  bottom: -12%;
  width: min(48%, 250px);
  height: auto;
  filter: grayscale(1) contrast(1.03);
  transform: rotate(-3deg);
}
.portfolio-case__soft-hoodie {
  position: absolute;
  z-index: 4;
  right: 3%;
  bottom: 2%;
  width: min(43%, 210px);
  height: auto;
  transform: rotate(6deg);
}
.portfolio-case__soft-note {
  position: absolute;
  z-index: 6;
  right: 7%;
  bottom: 8%;
  padding: .4rem .55rem;
  border: 1px solid var(--color-ink-fixed);
  background: var(--color-paper-on-ink);
  font-family: var(--font-mono);
  font-size: .5rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .06em;
  transform: rotate(-2deg);
}

.selected-work__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(3rem, 8vw, 5rem);
  border-top: 1px solid var(--color-border);
  padding-top: 1.25rem;
}
.selected-work__footer-label {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .07em;
}
.selected-work__all { white-space: nowrap; }

.js .selected-work.is-animating [data-work-reveal] {
  opacity: 0;
  transform: translateY(14px);
}
.js .selected-work.is-animating [data-work-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 360ms var(--work-delay, 0ms) ease-out,
    transform 520ms var(--work-delay, 0ms) cubic-bezier(.2,.8,.2,1);
}
.js .selected-work.is-animating [data-work-asset] {
  transform: translateY(10px);
  transition: transform 620ms var(--work-asset-delay, 120ms) cubic-bezier(.2,.8,.2,1);
}
.js .selected-work.is-animating [data-work-asset].is-visible { transform: translateY(0); }

@media (hover: hover) and (pointer: fine) {
  .portfolio-case:hover .portfolio-case__link::after { transform: scaleX(1); }
  .portfolio-case--road:hover .portfolio-case__visual--road img { transform: translate(-5px, -4px) rotate(3.5deg); }
  .portfolio-case--midnight:hover .portfolio-case__poster { transform: translateY(-4px) rotate(1.6deg); }
  .portfolio-case--soft:hover .portfolio-case__soft-hoodie { transform: translate(-5px, -4px) rotate(4.5deg); }
  .portfolio-case__visual--road img,
  .portfolio-case__poster,
  .portfolio-case__soft-hoodie { transition: transform var(--transition-base); }
}

.footer-poster { position: relative; overflow: clip; background: var(--color-brand); color: var(--color-ink-fixed); }
.footer-poster__inner { min-height: 560px; display: grid; align-items: center; padding-block: var(--space-8); }
.footer-poster__copy { position: relative; z-index: 2; max-width: 820px; }
.footer-poster h2 { margin-top: .7rem; color: var(--color-ink-fixed); font-size: clamp(3.1rem, 10vw, 7.4rem); line-height: .88; letter-spacing: -.07em; }
.footer-poster p:not(.editorial-label) { max-width: 650px; margin-top: 1.25rem; color: var(--color-ink-fixed); font-size: var(--font-size-lg); }
.footer-poster__actions { margin-top: 1.55rem; }
.footer-poster__art { position: absolute; right: -70px; bottom: -55px; width: min(59.8vw, 598px); opacity: .88; transform: rotate(-7deg); }
.footer-utility { position: relative; background: var(--color-page); padding-block: var(--space-8) var(--space-5); }
.footer-utility__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-5); }
.footer-utility__brand { grid-column: 1 / -1; max-width: 360px; }
.footer-utility__brand p { margin-top: .8rem; font-size: .92rem; }
.footer-links { display: flex; flex-direction: column; gap: .45rem; }
.footer-links h3 { margin-bottom: .25rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; }
.footer-links a { width: fit-content; color: var(--color-text-secondary); text-decoration: none; }
.footer-links a:hover { color: var(--color-text); text-decoration: underline; }
.footer-links--legal span { color: var(--color-text-muted); font-size: .92rem; cursor: default; }
.footer-links span[aria-current="page"] { color: var(--color-text-muted); font-size: .92rem; }
.footer-utility__bottom { display: flex; flex-direction: column; gap: .6rem; margin-top: var(--space-7); padding-top: var(--space-4); border-top: var(--border-thin); font-family: var(--font-mono); font-size: .68rem; }
.footer-utility__bottom a { color: var(--color-text); text-decoration: none; }
.office-dinosaur { position: absolute; right: .6rem; bottom: .35rem; width: 92px; opacity: .16; transition: opacity var(--transition-fast), transform var(--transition-fast); }
.office-dinosaur:hover { opacity: .42; transform: translateY(-2px); }

.page-shell { min-height: 64svh; }
/* Selected Work / SOON — intentional empty portfolio slots */
.selected-work__title {
  max-width: 12.5ch;
}

.portfolio-case--available .portfolio-case__copy {
  min-width: 0;
}

.portfolio-case--available h3 {
  max-width: 13ch;
}

.portfolio-case__vacancy {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  overflow: clip;
}

.portfolio-case__vacancy::before,
.portfolio-case__vacancy::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.portfolio-case__vacancy::before {
  inset: 11% 9%;
  border: 1px solid currentColor;
  opacity: .24;
}

.portfolio-case__vacancy::after {
  top: 50%;
  left: 50%;
  width: min(68%, 420px);
  height: 1px;
  background: currentColor;
  opacity: .18;
  transform: translate(-50%, -50%) rotate(-7deg);
}

.portfolio-case__vacancy-index,
.portfolio-case__vacancy-word {
  position: absolute;
  z-index: 2;
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: .075em;
}

.portfolio-case__vacancy-index {
  top: 50%;
  left: 50%;
  font-family: var(--font-display);
  font-size: clamp(7rem, 28vw, 13rem);
  font-weight: var(--font-weight-black);
  letter-spacing: -.08em;
  opacity: .09;
  transform: translate(-50%, -52%);
}

.portfolio-case__vacancy-word {
  top: 50%;
  left: 50%;
  padding: .55rem .72rem;
  border: 1px solid currentColor;
  background: inherit;
  font-size: clamp(.62rem, 1.8vw, .78rem);
  transform: translate(-50%, -50%) rotate(-2deg);
}

.portfolio-case__vacancy-line {
  position: absolute;
  z-index: 1;
  height: 1px;
  background: currentColor;
  opacity: .22;
  transform-origin: left center;
}

.portfolio-case__vacancy-line--a {
  top: 27%;
  left: 7%;
  width: 42%;
  transform: rotate(12deg);
}

.portfolio-case__vacancy-line--b {
  right: 5%;
  bottom: 23%;
  width: 36%;
  transform: rotate(-16deg);
}

.portfolio-case__crop {
  position: absolute;
  z-index: 3;
  width: 18px;
  height: 18px;
  opacity: .54;
}

.portfolio-case__crop--tl { top: 8%; left: 7%; border-top: 1px solid currentColor; border-left: 1px solid currentColor; }
.portfolio-case__crop--tr { top: 8%; right: 7%; border-top: 1px solid currentColor; border-right: 1px solid currentColor; }
.portfolio-case__crop--bl { bottom: 8%; left: 7%; border-bottom: 1px solid currentColor; border-left: 1px solid currentColor; }
.portfolio-case__crop--br { right: 7%; bottom: 8%; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; }

.portfolio-case__vacancy--01 {
  background:
    linear-gradient(rgba(16,16,16,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,16,16,.035) 1px, transparent 1px),
    var(--color-paper-on-ink);
  background-size: 28px 28px;
  color: var(--color-ink-fixed);
}

.portfolio-case__vacancy--01 .portfolio-case__vacancy-word {
  background: var(--color-paper-on-ink);
}

.portfolio-case__vacancy--02 {
  background: var(--color-ink-fixed);
  color: var(--color-paper-on-ink);
}

.portfolio-case__vacancy--02::before {
  inset: 8% 13% 12% 10%;
  transform: rotate(1.6deg);
}

.portfolio-case__vacancy--02::after {
  transform: translate(-50%, -50%) rotate(9deg);
}

.portfolio-case__vacancy--02 .portfolio-case__vacancy-word {
  background: var(--color-ink-fixed);
  transform: translate(-50%, -50%) rotate(2.5deg);
}

.portfolio-case__vacancy--02 .portfolio-case__vacancy-index {
  opacity: .13;
}

.portfolio-case__vacancy--03 {
  background: var(--color-brand);
  color: var(--color-ink-fixed);
}

.portfolio-case__vacancy--03::before {
  inset: 12% 7% 9% 18%;
  background: rgba(255,252,255,.18);
  transform: rotate(-1.8deg);
}

.portfolio-case__vacancy--03::after {
  transform: translate(-50%, -50%) rotate(-12deg);
}

.portfolio-case__vacancy--03 .portfolio-case__vacancy-word {
  background: var(--color-brand);
  transform: translate(-50%, -50%) rotate(-1deg);
}

.selected-work__footer--soon {
  flex-direction: column;
  align-items: flex-start;
}

.selected-work__closing {
  max-width: 760px;
}

.selected-work__closing-title {
  max-width: 15ch;
  margin-top: .8rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 8.4vw, 5.3rem);
  font-weight: var(--font-weight-black);
  line-height: .84;
  letter-spacing: -.065em;
}

.selected-work__closing-copy {
  max-width: 620px;
  margin-top: 1.25rem;
  color: var(--color-text-secondary);
  font-size: clamp(.98rem, 2.3vw, 1.08rem);
  line-height: 1.55;
}

.selected-work__closing-note {
  max-width: 620px;
  margin-top: 1rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  letter-spacing: .045em;
  text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  .portfolio-case--available:hover .portfolio-case__vacancy-word {
    transform: translate(-50%, -50%) rotate(0deg) scale(1.035);
  }

  .portfolio-case__vacancy-word {
    transition: transform var(--transition-fast);
  }
}

.footer-poster { position: relative; overflow: clip; background: var(--color-brand); color: var(--color-ink-fixed); }
.footer-poster__inner { min-height: 560px; display: grid; align-items: center; padding-block: var(--space-8); }
.footer-poster__copy { position: relative; z-index: 2; max-width: 820px; }
.footer-poster h2 { margin-top: .7rem; color: var(--color-ink-fixed); font-size: clamp(3.1rem, 10vw, 7.4rem); line-height: .88; letter-spacing: -.07em; }
.footer-poster p:not(.editorial-label) { max-width: 650px; margin-top: 1.25rem; color: var(--color-ink-fixed); font-size: var(--font-size-lg); }
.footer-poster__actions { margin-top: 1.55rem; }
.footer-poster__art { position: absolute; right: -70px; bottom: -55px; width: min(59.8vw, 598px); opacity: .88; transform: rotate(-7deg); }
.footer-utility { position: relative; background: var(--color-page); padding-block: var(--space-8) var(--space-5); }
.footer-utility__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7) var(--space-5); }
.footer-utility__brand { grid-column: 1 / -1; max-width: 360px; }
.footer-utility__brand p { margin-top: .8rem; font-size: .92rem; }
.footer-links { display: flex; flex-direction: column; gap: .45rem; }
.footer-links h3 { margin-bottom: .25rem; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; }
.footer-links a { width: fit-content; color: var(--color-text-secondary); text-decoration: none; }
.footer-links a:hover { color: var(--color-text); text-decoration: underline; }
.footer-links--legal span { color: var(--color-text-muted); font-size: .92rem; cursor: default; }
.footer-links span[aria-current="page"] { color: var(--color-text-muted); font-size: .92rem; }
.footer-utility__bottom { display: flex; flex-direction: column; gap: .6rem; margin-top: var(--space-7); padding-top: var(--space-4); border-top: var(--border-thin); font-family: var(--font-mono); font-size: .68rem; }
.footer-utility__bottom a { color: var(--color-text); text-decoration: none; }
.footer-utility__meta { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.footer-utility__credit { margin: 0; color: var(--color-text-secondary); font-size: .64rem; line-height: 1.4; }
.footer-utility__credit a { text-decoration: underline; text-underline-offset: .16em; }
.footer-utility__rights { max-width: 620px; margin: 0; color: var(--color-text-muted); font-size: .54rem; line-height: 1.45; letter-spacing: .01em; }
.office-dinosaur { position: absolute; right: .6rem; bottom: .35rem; width: 92px; opacity: .16; transition: opacity var(--transition-fast), transform var(--transition-fast); }
.office-dinosaur:hover { opacity: .42; transform: translateY(-2px); }

.page-shell { min-height: 64svh; }

.page-shell__intro, .article-shell, .case-study-shell { padding-block: clamp(6rem, 14vw, 11rem); }
.page-shell__intro h1, .article-shell h1, .case-study-shell h1 { max-width: 12ch; margin-top: .8rem; font-size: var(--font-size-h2); line-height: .92; }
.page-shell__intro p:last-child, .article-shell p:last-child, .case-study-shell p:last-child { max-width: 600px; margin-top: 1.4rem; }


.js .hero.is-animating .hero__copy { opacity: 0; transform: translateY(10px); }
.js .hero.is-animating .hero__paper { opacity: 0; transform: translateY(12px) scale(.97); }
.js .hero.is-animating .hero__creator { opacity: 0; transform: translateY(14px) scale(.985); }
.js .hero.is-animating .hero__halftone,
.js .hero.is-animating .hero__store,
.js .hero.is-animating .hero__product,
.js .hero.is-animating .hero__printer,
.js .hero.is-animating .hero__parcel,
.js .hero.is-animating .hero__returns,
.js .hero.is-animating .hero__hand,
.js .hero.is-animating .hero__note { opacity: 0; }
.js .hero.is-animating.is-ready .hero__copy { opacity: 1; transform: none; transition: opacity 420ms ease-out, transform 420ms ease-out; }
.js .hero.is-animating.is-ready .hero__paper { opacity: 1; transform: none; transition: opacity 380ms 100ms ease-out, transform 500ms 100ms cubic-bezier(.2,.8,.2,1.08); }
.js .hero.is-animating.is-ready .hero__creator {
  opacity: 1;
  transform: none;
  transition:
    opacity 420ms 220ms ease-out,
    transform 520ms 220ms cubic-bezier(.2,.8,.2,1.05),
    filter 340ms cubic-bezier(.2,.8,.2,1),
    scale 340ms cubic-bezier(.2,.8,.2,1),
    translate 340ms cubic-bezier(.2,.8,.2,1),
    rotate 340ms cubic-bezier(.2,.8,.2,1);
}
.js .hero.is-animating.is-ready .hero__store,
.js .hero.is-animating.is-ready .hero__product,
.js .hero.is-animating.is-ready .hero__printer,
.js .hero.is-animating.is-ready .hero__parcel,
.js .hero.is-animating.is-ready .hero__returns,
.js .hero.is-animating.is-ready .hero__hand {
  opacity: 1;
  transition:
    opacity 320ms 400ms ease-out,
    filter 340ms cubic-bezier(.2,.8,.2,1),
    scale 340ms cubic-bezier(.2,.8,.2,1),
    translate 340ms cubic-bezier(.2,.8,.2,1),
    rotate 340ms cubic-bezier(.2,.8,.2,1);
}
.js .hero.is-animating.is-ready .hero__halftone { opacity: .62; transition: opacity 320ms 340ms ease-out; }
.js .hero.is-animating.is-ready .hero__note {
  opacity: 1;
  transition:
    opacity 320ms 620ms ease-out,
    scale 260ms cubic-bezier(.2,.8,.2,1),
    translate 260ms cubic-bezier(.2,.8,.2,1),
    rotate 260ms cubic-bezier(.2,.8,.2,1),
    filter 260ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .hero__photo,
  .hero__note {
    transition: filter 120ms linear;
  }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .hero__photo:hover,
  .hero__note:hover {
    translate: -50% -50%;
    rotate: var(--hero-rotate, 0deg);
    scale: 1;
  }
  .hero__note:hover { filter: none; }
}

/* ============================================================
   Page / Oferta — product base, quality and lineup explorer
   ============================================================ */
.offer-page {
  overflow: clip;
  background: var(--color-page);
}
.offer-page section { position: relative; }
.offer-page h1,
.offer-page h2,
.offer-page h3 { text-wrap: balance; }
.offer-page h2 {
  color: var(--color-text);
  font-size: clamp(2.55rem, 11vw, 5rem);
  font-weight: var(--font-weight-black);
  line-height: .9;
  letter-spacing: -.06em;
}
.offer-page h2 span { color: var(--color-brand); }
.offer-section-head { max-width: 850px; }
.offer-section-head h2 { margin-top: .7rem; }
.offer-section-head > p:last-child {
  max-width: 680px;
  margin-top: 1.25rem;
  font-size: var(--font-size-lg);
}
.offer-data-note {
  max-width: 760px;
  margin-top: 2.2rem;
  border-top: 1px solid var(--color-border);
  padding-top: .85rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .65rem;
  line-height: 1.55;
  letter-spacing: .045em;
}

/* Hero */
.offer-hero {
  min-height: calc(100svh - var(--header-height-mobile));
  display: grid;
  align-items: center;
  border-bottom: var(--border-thin);
  padding-block: clamp(4rem, 11vw, 7.5rem) clamp(5rem, 12vw, 8rem);
}
.offer-hero__inner {
  display: grid;
  gap: clamp(3.5rem, 10vw, 6.5rem);
}
.offer-hero__copy { position: relative; z-index: 4; }
.offer-hero__title {
  max-width: 12ch;
  margin-top: .9rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 13vw, 6.6rem);
  font-weight: var(--font-weight-black);
  line-height: .84;
  letter-spacing: -.075em;
}
.offer-hero__title span { color: var(--color-brand); }
.offer-hero__lead {
  max-width: 680px;
  margin-top: 1.45rem;
  font-size: var(--font-size-lg);
}
.offer-hero__labels {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .7rem;
  margin-top: 1.5rem;
}
.offer-hero__labels span {
  border-bottom: 1px solid var(--color-border);
  padding: .35rem .15rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .065em;
}
.offer-hero__lineup {
  position: relative;
  isolation: isolate;
  min-height: clamp(540px, 145vw, 650px);
  margin-inline: auto;
  width: min(100%, 680px);
}
.offer-hero__field {
  position: absolute;
  z-index: 0;
  inset: 5% 1% 4%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transform: rotate(-2deg);
}
.offer-hero__field::before {
  content: "PRODUCT LINEUP / 01";
  position: absolute;
  top: .8rem;
  left: .9rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .52rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .06em;
}
.offer-hero__product {
  --offer-product-rotate: 0deg;
  --offer-product-hover-rotate: 0deg;
  position: absolute;
  z-index: 2;
  margin: 0;
  filter: drop-shadow(4px 7px 0 rgba(16,16,16,.07));
  transform: rotate(var(--offer-product-rotate));
  transform-origin: 50% 55%;
  transition: transform var(--transition-base), filter var(--transition-base);
  will-change: transform;
}
.offer-hero__product img {
  display: block;
  width: 100%;
  height: auto;
}
.offer-hero__product figcaption {
  position: absolute;
  z-index: 2;
  padding: .3rem .44rem;
  border: 1px solid var(--color-ink-fixed);
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  font-family: var(--font-mono);
  font-size: .48rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: .045em;
  white-space: nowrap;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.offer-hero__product--shirt {
  --offer-product-rotate: -4deg;
  --offer-product-hover-rotate: -1deg;
  z-index: 3;
  left: -2%;
  bottom: 3%;
  width: min(66%, 360px);
}
.offer-hero__product--shirt figcaption { left: 5%; bottom: 3%; transform: rotate(3deg); }
.offer-hero__product--hoodie {
  --offer-product-rotate: 3deg;
  --offer-product-hover-rotate: 6deg;
  z-index: 2;
  top: 0;
  right: -1%;
  width: min(62%, 340px);
}
.offer-hero__product--hoodie figcaption { right: 1%; top: 8%; transform: rotate(-4deg); }
.offer-hero__product--mug {
  --offer-product-rotate: 6deg;
  --offer-product-hover-rotate: 9deg;
  z-index: 5;
  right: 0;
  bottom: 2%;
  width: min(38%, 205px);
}
.offer-hero__product--mug figcaption { right: 0; bottom: 8%; transform: rotate(2deg); }
.offer-hero__product--poster {
  --offer-product-rotate: -6deg;
  --offer-product-hover-rotate: -2deg;
  z-index: 1;
  left: 29%;
  top: 4%;
  width: min(35%, 190px);
}
.offer-hero__product--poster figcaption { left: 0; top: 4%; transform: rotate(2deg); }
.offer-hero__note {
  position: absolute;
  z-index: 6;
  right: 2%;
  top: 50%;
  max-width: 9ch;
  color: var(--color-text);
  font-family: var(--font-editorial);
  font-size: clamp(1rem, 4vw, 1.4rem);
  font-style: italic;
  line-height: 1.05;
  transform: rotate(-4deg);
}

@media (hover: hover) and (pointer: fine) {
  .offer-hero__product:hover,
  .offer-hero__product:focus-within {
    z-index: 8;
    filter: drop-shadow(7px 11px 0 rgba(16,16,16,.1));
    transform: translateY(-8px) rotate(var(--offer-product-hover-rotate)) scale(1.08);
  }
  .offer-hero__product:hover figcaption,
  .offer-hero__product:focus-within figcaption {
    box-shadow: 3px 3px 0 var(--color-brand);
    transform: translateY(-2px) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .offer-hero__product,
  .offer-hero__product figcaption { transition: none; }
}

@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .offer-hero__product:hover,
  .offer-hero__product:focus-within {
    filter: drop-shadow(4px 7px 0 rgba(16,16,16,.07));
    transform: rotate(var(--offer-product-rotate));
  }
  .offer-hero__product:hover figcaption,
  .offer-hero__product:focus-within figcaption {
    box-shadow: none;
    transform: none;
  }
}

/* Selected product base */
.offer-base {
  padding-block: clamp(6rem, 14vw, 10rem);
}
.offer-base__layout {
  display: grid;
  gap: clamp(3.5rem, 10vw, 6rem);
}
.offer-base__copy h2 { margin-top: .7rem; }
.offer-base__text {
  display: grid;
  gap: 1rem;
  max-width: 700px;
  margin-top: 1.6rem;
}
.offer-base__text p { font-size: var(--font-size-lg); }
.offer-base__board {
  position: relative;
  min-height: 580px;
  border-top: 2px solid var(--color-text);
  border-bottom: 1px solid var(--color-border);
  padding-block: 3.2rem 1.5rem;
}
.offer-base__board-index {
  position: absolute;
  top: .65rem;
  right: 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .55rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .07em;
}
.offer-base__macro {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background:
    repeating-linear-gradient(25deg, transparent 0 3px, color-mix(in srgb, var(--color-text) 9%, transparent) 3px 4px),
    repeating-linear-gradient(155deg, transparent 0 4px, color-mix(in srgb, var(--color-text) 6%, transparent) 4px 5px),
    var(--color-surface);
}
.offer-base__macro::before {
  content: "FABRIC / MACRO";
  position: absolute;
  top: .75rem;
  left: .8rem;
  font-family: var(--font-mono);
  font-size: .52rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .06em;
}
.offer-base__macro span {
  position: absolute;
  right: -8%;
  bottom: -37%;
  width: 65%;
  aspect-ratio: 1;
  border: 2px solid var(--color-brand);
  border-radius: 50%;
}
.offer-base__criteria { margin-top: 1.25rem; }
.offer-base__criteria > div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1rem;
  border-top: 1px solid var(--color-border);
  padding-block: .85rem;
}
.offer-base__criteria dt {
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .07em;
}
.offer-base__criteria dd { color: var(--color-text-secondary); font-size: .9rem; }

/* Product families */
.offer-family {
  border-top: var(--border-thin);
  padding-block: clamp(6rem, 13vw, 10rem);
}
.offer-family--tees { background: var(--color-surface); }
.offer-tees__stage {
  display: grid;
  gap: 3.8rem;
  margin-top: clamp(3.5rem, 9vw, 6rem);
}
.offer-tee {
  position: relative;
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
}
.offer-tee__visual {
  position: relative;
  min-height: 320px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: var(--color-page);
}
.offer-tee__visual::after {
  content: "";
  position: absolute;
  inset: 10% 12%;
  border: 1px solid var(--color-border);
  pointer-events: none;
}
.offer-tee__visual img {
  position: relative;
  z-index: 2;
  width: min(68%, 235px);
  height: auto;
  filter: grayscale(.15) contrast(1.02);
}
.offer-tee__number {
  position: absolute;
  z-index: 1;
  right: 5%;
  bottom: -5%;
  color: color-mix(in srgb, var(--color-text) 10%, transparent);
  font-family: var(--font-display);
  font-size: clamp(8rem, 36vw, 13rem);
  font-weight: var(--font-weight-black);
  line-height: .7;
  letter-spacing: -.08em;
}
.offer-tee--classic .offer-tee__visual img { transform: rotate(-3deg); }
.offer-tee--fit .offer-tee__visual img { width: min(57%, 205px); transform: rotate(2deg); }
.offer-tee--oversized .offer-tee__visual img { width: min(78%, 270px); transform: rotate(-2deg); }
.offer-tee--heavy .offer-tee__visual img { width: min(73%, 255px); filter: grayscale(1) contrast(1.15); transform: rotate(3deg); }
.offer-tee__utility {
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .07em;
}
.offer-tee h3 {
  margin-top: .45rem;
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  line-height: .98;
}
.offer-tee > p:not(.offer-tee__utility) { max-width: 40rem; margin-top: .85rem; }
.offer-spec-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1rem;
}
.offer-spec-tags span {
  border: 1px solid var(--color-border);
  padding: .32rem .46rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .54rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .045em;
}

/* Hoodies */
.offer-family--hoodies { background: var(--color-page); }
.offer-section-head--split { display: grid; gap: 1.5rem; max-width: none; }
.offer-section-head--split > p { max-width: 650px; align-self: end; }
.offer-hoodies__run {
  display: grid;
  gap: 1px;
  margin-top: clamp(3.5rem, 9vw, 6.5rem);
  background: var(--color-border);
  border-block: 1px solid var(--color-border);
}
.offer-hoodie {
  display: grid;
  gap: 1.5rem;
  padding: 1.2rem;
  background: var(--color-page);
}
.offer-hoodie__visual {
  position: relative;
  min-height: 320px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--color-surface);
}
.offer-hoodie__visual img {
  width: min(74%, 270px);
  height: auto;
}
.offer-hoodie__visual span {
  position: absolute;
  left: .7rem;
  bottom: .6rem;
  font-family: var(--font-mono);
  font-size: .52rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .065em;
}
.offer-hoodie--classic .offer-hoodie__visual img { transform: rotate(-2deg); }
.offer-hoodie--heavy .offer-hoodie__visual { background: var(--color-text); color: var(--color-page); }
.offer-hoodie--heavy .offer-hoodie__visual img { width: min(82%, 295px); transform: rotate(4deg); }
.offer-hoodie--zip .offer-hoodie__visual img { width: min(68%, 250px); transform: rotate(-4deg); }
.offer-hoodie__copy { align-self: center; }
.offer-hoodie__copy h3 { margin-top: .5rem; font-size: clamp(2rem, 8vw, 3.2rem); line-height: .95; }
.offer-hoodie__copy > p:last-child { max-width: 560px; margin-top: .85rem; }

/* Accessories wall */
.offer-accessories {
  border-top: var(--border-thin);
  padding-block: clamp(6rem, 13vw, 10rem);
  background: var(--color-surface);
}
.offer-accessories__wall {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(3.5rem, 9vw, 6rem);
}
.offer-accessory {
  position: relative;
  min-height: 480px;
  display: grid;
  align-content: end;
  overflow: hidden;
  border: 1px solid var(--color-border);
  padding: 1.25rem;
  background: var(--color-page);
}
.offer-accessory__visual {
  position: relative;
  min-height: 270px;
  display: grid;
  place-items: center;
  margin-bottom: 1.4rem;
}
.offer-accessory__visual img { display: block; width: min(74%, 300px); height: auto; }
.offer-accessory h3 { margin-top: .35rem; font-size: clamp(2.2rem, 8vw, 3.4rem); }
.offer-accessory p:last-child { max-width: 480px; margin-top: .75rem; }
.offer-accessory--cap .offer-accessory__visual img { width: min(84%, 350px); transform: rotate(-5deg); }
.offer-accessory--tote {
  background: var(--color-brand);
  color: var(--color-ink-fixed);
}
.offer-accessory--tote p,
.offer-accessory--tote .editorial-label { color: var(--color-ink-fixed); }
.offer-accessory--tote .offer-accessory__visual img { width: min(68%, 290px); transform: rotate(4deg); }
.offer-accessory--mug .offer-accessory__visual img { width: min(63%, 235px); transform: rotate(-3deg); }
.offer-accessory--poster { background: var(--color-text); color: var(--color-paper-on-ink); }
.offer-accessory--poster p,
.offer-accessory--poster .editorial-label { color: color-mix(in srgb, var(--color-paper-on-ink) 78%, transparent); }
.offer-accessory--poster h3 { color: var(--color-paper-on-ink); }
.offer-accessory--poster .offer-accessory__visual img { width: min(62%, 240px); transform: rotate(5deg); }
.offer-accessory--other {
  grid-column: 1 / -1;
  min-height: 0;
  align-content: stretch;
  gap: clamp(2rem, 7vw, 4rem);
  border-color: color-mix(in srgb, var(--color-ink-fixed) 38%, transparent);
  padding: clamp(1.5rem, 5vw, 2.4rem);
  background: var(--color-brand);
  color: var(--color-ink-fixed);
}
.offer-accessory--other .editorial-label { color: var(--color-ink-fixed); }
.offer-accessory--other h3 {
  max-width: 9ch;
  margin-top: .45rem;
  color: var(--color-ink-fixed);
  font-size: clamp(3rem, 12vw, 5.4rem);
  line-height: .88;
}
.offer-accessory--other p.offer-accessory__other-body {
  max-width: 720px;
  margin-top: 1.15rem;
  color: var(--color-ink-fixed);
  font-size: var(--font-size-lg);
}
.offer-accessory__other-side {
  display: grid;
  align-content: space-between;
  gap: 2.2rem;
  border-top: 1px solid color-mix(in srgb, var(--color-ink-fixed) 38%, transparent);
  padding-top: 1.1rem;
}
.offer-accessory--other p.offer-accessory__other-list {
  max-width: none;
  margin: 0;
  color: color-mix(in srgb, var(--color-ink-fixed) 72%, transparent);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.55;
  letter-spacing: .075em;
}
.offer-accessory--other p.offer-accessory__other-punchline {
  max-width: 14ch;
  margin: 0;
  color: var(--color-ink-fixed);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 8vw, 3rem);
  font-weight: var(--font-weight-black);
  line-height: .92;
  letter-spacing: -.035em;
}

/* Quality / certification */
.offer-quality {
  padding-block: clamp(6rem, 13vw, 10rem);
}
.offer-quality__layout { display: grid; gap: clamp(3.5rem, 9vw, 6rem); }
.offer-quality__copy h2 { margin-top: .7rem; }
.offer-quality__copy > p { max-width: 690px; margin-top: 1.15rem; font-size: var(--font-size-lg); }
.offer-quality__spec {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  padding: clamp(1.5rem, 6vw, 2.4rem);
  background: var(--color-surface);
}
.offer-quality__thread {
  position: absolute;
  right: -13%;
  top: -14%;
  width: 58%;
  aspect-ratio: 1;
  border: 2px dashed color-mix(in srgb, var(--color-brand) 78%, transparent);
  border-radius: 49% 51% 46% 54%;
  transform: rotate(15deg);
}
.offer-quality__spec-head {
  position: relative;
  z-index: 2;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .075em;
}
.offer-quality__spec dl { position: relative; z-index: 2; margin-top: 2rem; }
.offer-quality__spec dl > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  border-top: 1px solid var(--color-border);
  padding-block: .95rem;
}
.offer-quality__spec dt {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .06em;
}
.offer-quality__spec dd { color: var(--color-text-muted); font-size: .8rem; text-align: right; }
.offer-quality__spec-note { position: relative; z-index: 2; max-width: 430px; margin-top: 1.5rem; font-size: .85rem; }

.offer-certifications {
  border-block: var(--border-thin);
  padding-block: clamp(5rem, 12vw, 8rem);
  background: var(--color-surface);
}
.offer-certifications__layout { display: grid; gap: 3rem; }
.offer-certifications h2 { margin-top: .7rem; }
.offer-certifications__copy > p { max-width: 620px; font-size: var(--font-size-lg); }
.offer-certifications__rule {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: .2rem 1rem;
  margin-top: 1.1rem;
  border-top: 1px solid var(--color-border);
  padding-top: .9rem;
}
.offer-certifications__rule span {
  grid-row: 1 / 3;
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: var(--font-weight-bold);
}
.offer-certifications__rule strong { font-size: .92rem; }
.offer-certifications__rule em { color: var(--color-text-muted); font-size: .78rem; font-style: normal; }

/* Print */
.offer-print {
  padding-block: clamp(6rem, 13vw, 10rem);
}
.offer-section-head--wide { max-width: 990px; }
.offer-print__statement {
  max-width: 980px;
  margin-top: clamp(3rem, 8vw, 5rem);
  border-block: 2px solid var(--color-text);
  padding-block: clamp(1.4rem, 4vw, 2.2rem);
}
.offer-print__statement p {
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6.5vw, 3.4rem);
  font-weight: var(--font-weight-black);
  line-height: .98;
  letter-spacing: -.04em;
}
.offer-print__methods {
  display: grid;
  gap: 3.5rem;
  margin-top: clamp(3.5rem, 8vw, 5.5rem);
}
.offer-print__method { position: relative; }
.offer-print__macro {
  position: relative;
  min-height: 330px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 1.5rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.offer-print__macro::before,
.offer-print__macro::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.offer-print__macro::before {
  width: 76%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--color-brand) 0 2px, transparent 2.5px) 0 0 / 12px 12px;
  transform: rotate(-8deg) scale(1.3);
}
.offer-print__macro::after {
  width: 52%;
  aspect-ratio: 1;
  border: 2px solid var(--color-text);
}
.offer-print__macro span {
  position: relative;
  z-index: 2;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 22vw, 8rem);
  font-weight: var(--font-weight-black);
  line-height: .8;
  letter-spacing: -.08em;
}
.offer-print__method--sublimation .offer-print__macro { background: var(--color-brand); }
.offer-print__method--sublimation .offer-print__macro::before { background: radial-gradient(circle, rgba(16,16,16,.7) 0 2px, transparent 2.5px) 0 0 / 14px 14px; }
.offer-print__method--sublimation .offer-print__macro::after { border-color: var(--color-ink-fixed); }
.offer-print__method--sublimation .offer-print__macro span { color: var(--color-ink-fixed); }
.offer-print__method h3 { margin-top: .5rem; font-size: clamp(2rem, 7vw, 3rem); line-height: .98; }
.offer-print__method > p:last-child { max-width: 560px; margin-top: .85rem; }

/* Product explorer */
.offer-explorer {
  border-top: var(--border-thin);
  padding-block: clamp(6rem, 13vw, 10rem);
  background: var(--color-surface);
}
.offer-explorer__selector {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 0;
  margin-top: clamp(2.8rem, 7vw, 4.2rem);
  border-block: 1px solid var(--color-text);
  padding-block: .55rem;
}
.offer-explorer__selector button {
  position: relative;
  min-height: 46px;
  border: 0;
  border-right: 1px solid var(--color-border);
  padding: .6rem .8rem;
  background: transparent;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .065em;
  cursor: pointer;
}
.offer-explorer__selector button:last-child { border-right: 0; }
.offer-explorer__selector button::after {
  content: "";
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: .32rem;
  height: 3px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-base);
}
.offer-explorer__selector button.is-active,
.offer-explorer__selector button[aria-pressed="true"] { color: var(--color-text); }
.offer-explorer__selector button.is-active::after,
.offer-explorer__selector button[aria-pressed="true"]::after { transform: scaleX(1); }
.offer-explorer__stage {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 2rem;
}
.offer-explorer__visual {
  position: relative;
  min-height: 430px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-page);
}
.offer-explorer__visual::before {
  content: "";
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  border: 2px solid var(--color-brand);
  border-radius: 50%;
  transform: rotate(-7deg);
}
.offer-explorer__visual-index {
  position: absolute;
  z-index: 3;
  top: .85rem;
  left: .9rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .52rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .065em;
}
.offer-explorer__visual img {
  position: relative;
  z-index: 2;
  display: block;
  width: min(64%, 310px);
  height: auto;
  max-height: 390px;
  object-fit: contain;
  transition: opacity 180ms ease, transform 220ms ease;
}
.offer-explorer__visual.is-switching img { opacity: 0; transform: translateY(8px); }
.offer-explorer__visual-word {
  position: absolute;
  z-index: 1;
  right: 1%;
  bottom: -1%;
  color: color-mix(in srgb, var(--color-text) 9%, transparent);
  font-family: var(--font-display);
  font-size: clamp(5rem, 22vw, 9.5rem);
  font-weight: var(--font-weight-black);
  line-height: .7;
  letter-spacing: -.09em;
  white-space: nowrap;
}
.offer-explorer__details { padding: .5rem 0; }
.offer-explorer__category {
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .07em;
}
.offer-explorer__details h3 { margin-top: .45rem; font-size: clamp(2.6rem, 10vw, 4.5rem); line-height: .9; }
.offer-explorer__details > p:not(.offer-explorer__category):not(.offer-explorer__data-note) { max-width: 600px; margin-top: 1rem; font-size: var(--font-size-lg); }
.offer-explorer__variants {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.5rem;
}
.offer-explorer__variants span {
  border: 1px solid var(--color-text);
  padding: .38rem .52rem;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .05em;
}
.offer-explorer__specs { margin-top: 1.5rem; }
.offer-explorer__specs > div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1rem;
  border-top: 1px solid var(--color-border);
  padding-block: .7rem;
}
.offer-explorer__specs dt {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .58rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .06em;
}
.offer-explorer__specs dd { color: var(--color-text); font-size: .85rem; }
.offer-explorer__data-note {
  max-width: 560px;
  margin-top: 1.35rem;
  color: var(--color-text-muted);
  font-size: .78rem;
}
.offer-explorer__noscript { margin-top: 1.2rem; border: 1px solid var(--color-border); padding: 1rem; }
.offer-explorer__closing {
  display: grid;
  gap: 1.5rem;
  margin-top: clamp(3rem, 8vw, 5rem);
  border-top: 2px solid var(--color-text);
  padding-top: 1.5rem;
}
.offer-explorer__closing p {
  max-width: 760px;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 6.5vw, 3.2rem);
  font-weight: var(--font-weight-black);
  line-height: .98;
  letter-spacing: -.035em;
}
.offer-explorer__closing .button { justify-self: start; }

/* Scale / collaboration fit */
.offer-scale {
  border-top: var(--border-thin);
  padding-block: clamp(6.5rem, 14vw, 10rem);
  background: var(--color-page);
}
.offer-scale__intro {
  display: grid;
  gap: 1.2rem;
}
.offer-scale__intro h2 {
  max-width: 13ch;
  margin-top: -.15rem;
}
.offer-scale__lead {
  max-width: 760px;
  font-size: var(--font-size-lg);
}
.offer-scale__punch {
  margin-top: clamp(3.5rem, 9vw, 6rem);
  border-block: 2px solid var(--color-text);
  padding-block: clamp(1.5rem, 5vw, 2.6rem);
}
.offer-scale__punch p {
  max-width: 16ch;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 9vw, 5.6rem);
  font-weight: var(--font-weight-black);
  line-height: .9;
  letter-spacing: -.055em;
}
.offer-scale__punch span { color: var(--color-brand); }
.offer-scale__scenarios {
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(3rem, 8vw, 5.5rem);
}
.offer-scale__scenario {
  position: relative;
  min-height: 440px;
  display: grid;
  align-items: end;
  overflow: hidden;
  border: 1px solid var(--color-border);
  padding: clamp(1.35rem, 5vw, 2.2rem);
  background: var(--color-surface);
}
.offer-scale__scenario-copy {
  position: relative;
  z-index: 2;
  max-width: 650px;
}
.offer-scale__scenario h3 {
  max-width: 13ch;
  margin-top: .55rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(2.15rem, 8vw, 4rem);
  font-weight: var(--font-weight-black);
  line-height: .9;
  letter-spacing: -.045em;
}
.offer-scale__scenario-copy > p:not(.editorial-label) {
  max-width: 590px;
  margin-top: 1rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
}
.offer-scale__scenario-copy > strong {
  display: inline-block;
  margin-top: 1.4rem;
  border-top: 1px solid currentColor;
  padding-top: .55rem;
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  letter-spacing: .06em;
}
.offer-scale__metric {
  position: absolute;
  z-index: 0;
  top: -.08em;
  right: -.04em;
  color: color-mix(in srgb, var(--color-brand) 78%, transparent);
  font-family: var(--font-display);
  font-size: clamp(8rem, 38vw, 15rem);
  font-weight: var(--font-weight-black);
  line-height: .72;
  letter-spacing: -.09em;
  pointer-events: none;
}
.offer-scale__scenario--regular {
  border-color: color-mix(in srgb, var(--color-ink-fixed) 34%, transparent);
  background: var(--color-brand);
  color: var(--color-ink-fixed);
}
.offer-scale__scenario--regular .editorial-label,
.offer-scale__scenario--regular h3,
.offer-scale__scenario--regular .offer-scale__scenario-copy > p,
.offer-scale__scenario--regular .offer-scale__scenario-copy > strong { color: var(--color-ink-fixed); }
.offer-scale__scenario--regular .offer-scale__metric { color: color-mix(in srgb, var(--color-ink-fixed) 16%, transparent); }
.offer-scale__scenario--live {
  min-height: 500px;
  border-color: var(--color-text);
  background: var(--color-text);
  color: var(--color-page);
}
.offer-scale__scenario--live .editorial-label,
.offer-scale__scenario--live .offer-scale__scenario-copy > p { color: color-mix(in srgb, var(--color-page) 74%, transparent); }
.offer-scale__scenario--live h3,
.offer-scale__scenario--live .offer-scale__scenario-copy > strong { color: var(--color-page); }
.offer-scale__scenario--live .offer-scale__metric {
  top: .08em;
  right: .03em;
  color: var(--color-brand);
  font-size: clamp(7rem, 31vw, 13rem);
  text-align: right;
}
.offer-scale__final {
  display: grid;
  gap: clamp(2rem, 6vw, 3.5rem);
  margin-top: clamp(4rem, 10vw, 7rem);
  border-top: 2px solid var(--color-text);
  padding-top: clamp(2rem, 5vw, 3rem);
}
.offer-scale__statement {
  display: grid;
  gap: 1.5rem;
}
.offer-scale__statement p {
  max-width: 17ch;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(2rem, 8vw, 4.6rem);
  font-weight: var(--font-weight-black);
  line-height: .92;
  letter-spacing: -.045em;
}
.offer-scale__statement p:first-child span { color: var(--color-text-muted); }
.offer-scale__statement strong { color: var(--color-brand); font-weight: inherit; }
.offer-scale__final-copy {
  max-width: 680px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
}
.offer-scale__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.offer-scale__note {
  max-width: 620px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  letter-spacing: .055em;
}

/* Offer page motion: progressive enhancement only */
.js .offer-page.is-animating [data-offer-reveal] {
  opacity: 0;
  transform: translateY(14px);
}
.js .offer-page.is-animating [data-offer-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 360ms var(--offer-delay, 0ms) ease-out,
    transform 520ms var(--offer-delay, 0ms) cubic-bezier(.2,.8,.2,1);
}

/* Audience SEO pages / shared component system */
.audience-page {
  overflow-x: hidden;
  overflow-x: clip;
}

.audience-page h1,
.audience-page h2,
.audience-page h3 {
  text-wrap: balance;
}

.audience-hero {
  position: relative;
  min-height: 56svh;
  padding-block: clamp(3.5rem, 9vw, 6rem) clamp(4.5rem, 10vw, 7rem);
  border-bottom: var(--border-thin);
  overflow: hidden;
}

.audience-hero__inner {
  display: grid;
  gap: 3.5rem;
  align-items: center;
}

.audience-hero__copy { position: relative; z-index: 4; }
.audience-hero__title {
  max-width: 12ch;
  margin-top: .75rem;
  font-size: clamp(3rem, 12.8vw, 5rem);
  line-height: .9;
  letter-spacing: -.06em;
}
.audience-hero__lead {
  max-width: 650px;
  margin-top: 1.35rem;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
}
.audience-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.6rem;
}

.audience-hero__composition {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .72rem;
  width: min(100%, 590px);
  justify-self: center;
  isolation: isolate;
}

.audience-hero__box {
  --audience-box-rotate: 0deg;
  --audience-box-hover-rotate: 0deg;
  --audience-box-lift: 0px;
  --audience-box-hover-lift: 0px;
  --audience-box-scale: 1;
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  min-height: 118px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  overflow: hidden;
  border: 1px solid var(--color-text);
  border-radius: 0;
  padding: .85rem;
  background: var(--color-page);
  color: var(--color-text);
  transform: translateY(calc(var(--audience-box-lift) + var(--audience-box-hover-lift))) rotate(calc(var(--audience-box-rotate) + var(--audience-box-hover-rotate))) scale(var(--audience-box-scale));
  transform-origin: center;
  transition: transform var(--transition-base), background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.audience-hero__box::after {
  content: '';
  position: absolute;
  right: .7rem;
  bottom: .7rem;
  width: 14px;
  height: 14px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  opacity: .45;
}

.audience-hero__box-label,
.audience-hero__box-note {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: clamp(.55rem, 1.6vw, .67rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.audience-hero__box-label { max-width: 100%; }
.audience-hero__box-note { max-width: 25ch; opacity: .76; }

.audience-hero__box-title {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 5.8vw, 2.35rem);
  font-weight: var(--font-weight-black);
  line-height: .88;
  letter-spacing: -.045em;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.audience-hero__box--primary {
  grid-column: 1 / -1;
  min-height: 188px;
  padding: 1.05rem;
  background: var(--color-brand);
  color: var(--color-ink-fixed);
  --audience-box-rotate: -1deg;
}
.audience-hero__box--primary .audience-hero__box-title {
  max-width: 10ch;
  font-size: clamp(2.4rem, 9.2vw, 4.2rem);
  line-height: .82;
}
.audience-hero__box--secondary { --audience-box-rotate: 1.2deg; }
.audience-hero__box--strip { --audience-box-rotate: -.7deg; }
.audience-hero__box--status {
  background: var(--color-text);
  color: var(--color-paper-on-ink);
  --audience-box-rotate: .8deg;
}
.audience-hero__box--flow {
  grid-column: 1 / -1;
  min-height: 96px;
  --audience-box-rotate: -.45deg;
}
.audience-hero__box--flow .audience-hero__box-title {
  font-family: var(--font-mono);
  font-size: clamp(.9rem, 3.2vw, 1.18rem);
  line-height: 1.12;
  letter-spacing: .015em;
}
.audience-hero__box--outro { --audience-box-rotate: .6deg; }

/* Four worlds, one composition system. */
.audience-hero__composition--creators .audience-hero__box--slot-6 {
  background: var(--color-editorial-secondary);
  color: var(--color-paper-on-ink);
  border-color: var(--color-editorial-secondary);
}

.audience-hero__composition--youtube .audience-hero__box--slot-1 {
  background: var(--color-text);
  color: var(--color-paper-on-ink);
}
.audience-hero__composition--youtube .audience-hero__box--slot-2 {
  background: var(--color-brand);
  color: var(--color-ink-fixed);
  border-color: var(--color-ink-fixed);
  --audience-box-rotate: -2deg;
}
.audience-hero__composition--youtube .audience-hero__box--slot-3 .audience-hero__box-title {
  font-size: clamp(2.25rem, 8vw, 3.7rem);
}

.audience-hero__composition--influencers .audience-hero__box--slot-1 {
  background: var(--color-brand);
  color: var(--color-ink-fixed);
}
.audience-hero__composition--influencers .audience-hero__box--slot-2 {
  background: var(--color-text);
  color: var(--color-paper-on-ink);
}
.audience-hero__composition--influencers .audience-hero__box--slot-4 {
  background: var(--color-surface);
  color: var(--color-text);
}
.audience-hero__composition--influencers .audience-hero__box--slot-6 {
  border-color: var(--color-editorial-secondary);
  color: var(--color-editorial-secondary);
}

.audience-hero__composition--bands .audience-hero__box--slot-1 {
  background: var(--color-text);
  color: var(--color-paper-on-ink);
}
.audience-hero__composition--bands .audience-hero__box--slot-2 .audience-hero__box-title,
.audience-hero__composition--bands .audience-hero__box--slot-3 .audience-hero__box-title {
  font-size: clamp(2.7rem, 10vw, 4.6rem);
}
.audience-hero__composition--bands .audience-hero__box--slot-4 {
  background: var(--color-brand);
  color: var(--color-ink-fixed);
  border-color: var(--color-ink-fixed);
}
.audience-hero__composition--bands .audience-hero__box--slot-6 {
  border-top-width: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .audience-hero__box:hover {
    z-index: 20;
    --audience-box-hover-lift: -4px;
    --audience-box-hover-rotate: 1deg;
    --audience-box-scale: 1.03;
    border-color: var(--color-brand);
  }
  .audience-hero__box--primary:hover,
  .audience-hero__composition--youtube .audience-hero__box--slot-2:hover,
  .audience-hero__composition--bands .audience-hero__box--slot-4:hover {
    border-color: var(--color-text);
  }
}

/* The composition wrapper is observed once; its fragments enter with a restrained stagger. */
.js .page-audience.audience-motion-ready .audience-hero__composition[data-audience-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}
.js .page-audience.audience-motion-ready .audience-hero__composition[data-audience-reveal] .audience-hero__box {
  opacity: 0;
  --audience-box-lift: 12px;
  transition: opacity 420ms ease, transform 480ms ease, background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.js .page-audience.audience-motion-ready .audience-hero__composition[data-audience-reveal].is-visible .audience-hero__box {
  opacity: 1;
  --audience-box-lift: 0px;
}
.js .page-audience.audience-motion-ready .audience-hero__composition[data-audience-reveal] .audience-hero__box:nth-child(1) { transition-delay: 0ms; }
.js .page-audience.audience-motion-ready .audience-hero__composition[data-audience-reveal] .audience-hero__box:nth-child(2) { transition-delay: 45ms; }
.js .page-audience.audience-motion-ready .audience-hero__composition[data-audience-reveal] .audience-hero__box:nth-child(3) { transition-delay: 90ms; }
.js .page-audience.audience-motion-ready .audience-hero__composition[data-audience-reveal] .audience-hero__box:nth-child(4) { transition-delay: 135ms; }
.js .page-audience.audience-motion-ready .audience-hero__composition[data-audience-reveal] .audience-hero__box:nth-child(5) { transition-delay: 180ms; }
.js .page-audience.audience-motion-ready .audience-hero__composition[data-audience-reveal] .audience-hero__box:nth-child(6) { transition-delay: 225ms; }


.audience-reason,
.audience-ideas,
.audience-first-drop,
.audience-zumi,
.audience-zero,
.audience-faq,
.audience-final {
  padding-block: clamp(5.5rem, 13vw, 9rem);
}

.audience-reason__layout {
  display: grid;
  gap: 3.5rem;
  align-items: center;
}
.audience-reason__copy h2,
.audience-section-head h2,
.audience-first-drop__copy h2,
.audience-zumi__copy h2,
.audience-zero__copy h2,
.audience-faq__intro h2,
.audience-final h2 {
  margin-top: .7rem;
  font-size: clamp(2.7rem, 10.5vw, 5.3rem);
  line-height: .91;
  letter-spacing: -.055em;
}
.audience-reason__copy > p:not(.editorial-label) {
  max-width: 680px;
  margin-top: 1.2rem;
  font-size: var(--font-size-lg);
}
.audience-reason__visual {
  position: relative;
  min-height: 370px;
  padding: 1.25rem;
  border: 1px solid var(--color-text);
  background: var(--color-surface);
  overflow: hidden;
}
.audience-reason__visual::before {
  content: "";
  position: absolute;
  right: -8%;
  top: -20%;
  width: 62%;
  aspect-ratio: 1;
  border: 28px solid var(--color-brand);
  border-radius: 50%;
  opacity: .8;
}
.audience-reason__index { position: relative; z-index: 2; font-family: var(--font-mono); font-size: .62rem; font-weight: 800; }
.audience-reason__visual > strong {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 8ch;
  margin-top: 3.5rem;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 14vw, 6.4rem);
  line-height: .8;
  letter-spacing: -.07em;
}
.audience-reason__lines {
  position: relative;
  z-index: 2;
  display: grid;
  margin-top: 2.4rem;
  border-top: 1px solid var(--color-text);
}
.audience-reason__lines span {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: .7rem;
  padding-block: .7rem;
  border-bottom: 1px solid var(--color-text);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 800;
}
.audience-reason__lines b { color: var(--color-brand); }

.audience-ideas { background: var(--color-surface); }
.audience-section-head { max-width: 900px; }
.audience-ideas__index { margin-top: 3.5rem; border-top: 1px solid var(--color-text); }
.audience-idea {
  display: grid;
  gap: 1rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--color-text);
}
.audience-idea__code {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .05em;
}
.audience-idea__body h3 { max-width: 24ch; font-size: clamp(1.8rem, 6.7vw, 2.8rem); line-height: .95; letter-spacing: -.035em; }
.audience-idea__body p { max-width: 700px; margin-top: .7rem; color: var(--color-text-secondary); }
.audience-idea__mark { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.audience-idea__mark b {
  color: color-mix(in srgb, var(--color-text) 14%, transparent);
  font-family: var(--font-display);
  font-size: clamp(3.7rem, 15vw, 6rem);
  line-height: .75;
  letter-spacing: -.08em;
}
.audience-idea__mark span {
  display: inline-block;
  padding: .35rem .48rem;
  background: var(--color-brand);
  color: var(--color-ink-fixed);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 800;
  transform: rotate(-2deg);
}

.audience-first-drop__layout { display: grid; gap: 3.5rem; align-items: center; }
.audience-first-drop__copy > p:last-child { max-width: 650px; margin-top: 1.2rem; font-size: var(--font-size-lg); }
.audience-first-drop__sheet {
  position: relative;
  padding: 1.3rem 1.15rem 4rem;
  border: 1px solid var(--color-text);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-editorial);
  transform: rotate(1deg);
}
.audience-first-drop__sheet::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  right: 1rem;
  width: 12px;
  height: 12px;
  background: var(--color-brand);
  border-radius: 50%;
}
.audience-first-drop__sheet-head { padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); font-family: var(--font-mono); font-size: .65rem; font-weight: 800; }
.audience-first-drop__sheet ol { counter-reset: drop; list-style: none; }
.audience-first-drop__sheet li {
  counter-increment: drop;
  display: grid;
  grid-template-columns: 2.3rem 1fr;
  gap: .7rem;
  padding-block: 1rem;
  border-bottom: 1px dashed var(--color-border);
  font-family: var(--font-mono);
  font-size: clamp(.72rem, 2.4vw, .86rem);
  font-weight: 800;
}
.audience-first-drop__sheet li::before { content: counter(drop, decimal-leading-zero); color: var(--color-brand); }
.audience-first-drop__stamp {
  position: absolute;
  right: .8rem;
  bottom: .9rem;
  padding: .4rem .5rem;
  border: 2px solid var(--color-brand);
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 900;
  transform: rotate(-3deg);
}

.audience-zumi { border-block: 1px solid var(--color-border); }
.audience-zumi__copy { max-width: 980px; }
.audience-zumi__copy > p:last-child { max-width: 690px; margin-top: 1.2rem; font-size: var(--font-size-lg); }
.audience-zumi__flow {
  list-style: none;
  display: grid;
  margin-top: 3.5rem;
  border-top: 1px solid var(--color-text);
}
.audience-zumi__flow li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  align-items: center;
  padding-block: .9rem;
  border-bottom: 1px solid var(--color-text);
}
.audience-zumi__flow span { color: var(--color-brand); font-family: var(--font-mono); font-size: .68rem; font-weight: 800; }
.audience-zumi__flow strong { font-family: var(--font-display); font-size: clamp(1.3rem, 5vw, 2rem); line-height: 1; }
.audience-zumi__link { margin-top: 2rem; }

.audience-zero { position: relative; overflow: hidden; }
.audience-zero__layout { display: grid; gap: 1.5rem; align-items: center; }
.audience-zero__number {
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: clamp(11rem, 52vw, 20rem);
  line-height: .65;
  letter-spacing: -.12em;
}
.audience-zero__copy { position: relative; z-index: 2; }
.audience-zero__copy > p:not(.editorial-label) { max-width: 650px; margin-top: 1.2rem; font-size: var(--font-size-lg); }
.audience-zero__note {
  display: inline-block;
  margin-top: 1.5rem;
  padding: .4rem .55rem;
  border: 1px solid var(--color-text);
  font-family: var(--font-mono);
  font-size: .65rem;
  font-weight: 800;
  transform: rotate(-1deg);
}
.audience-zero__order {
  position: relative;
  min-height: 210px;
  border: 1px solid var(--color-text);
  background: var(--color-surface);
  padding: 1rem;
  overflow: hidden;
}
.audience-zero__order span,
.audience-zero__order small { position: relative; z-index: 2; font-family: var(--font-mono); font-size: .68rem; font-weight: 800; }
.audience-zero__order strong { position: absolute; left: 1rem; bottom: .2rem; font-family: var(--font-display); font-size: 7rem; line-height: .8; color: color-mix(in srgb, var(--color-text) 12%, transparent); }
.audience-zero__order small { position: absolute; right: 1rem; bottom: 1rem; }
.audience-zero__order img { position: absolute; right: 12%; bottom: -18%; width: 35%; transform: rotate(5deg); filter: drop-shadow(4px 5px 0 rgba(16,16,16,.12)); }

.audience-why {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  background: var(--color-text);
  color: var(--color-paper-on-ink);
  overflow: hidden;
}
.audience-why__inner { position: relative; padding-block: clamp(5rem, 12vw, 8rem); }
.audience-why h2 {
  position: relative;
  z-index: 2;
  max-width: 12ch;
  margin-top: .7rem;
  color: var(--color-paper-on-ink);
  font-size: clamp(3rem, 11vw, 6rem);
  line-height: .88;
  letter-spacing: -.06em;
}
.audience-why p:not(.editorial-label) { position: relative; z-index: 2; max-width: 650px; margin-top: 1.4rem; color: color-mix(in srgb, var(--color-paper-on-ink) 78%, transparent); font-size: var(--font-size-lg); }
.audience-why__symbol {
  position: absolute;
  z-index: 0;
  right: -2%;
  bottom: -5%;
  max-width: 5ch;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: clamp(5rem, 27vw, 13rem);
  line-height: .72;
  letter-spacing: -.08em;
  opacity: .85;
  text-align: right;
  transform: rotate(-4deg);
}

.audience-faq__layout { display: grid; gap: 3.5rem; }
.audience-faq__intro > p:last-child { max-width: 600px; margin-top: 1.1rem; color: var(--color-text-secondary); }
.audience-faq__items { border-top: 1px solid var(--color-text); }
.audience-faq__item { border-bottom: 1px solid var(--color-text); }
.audience-faq__item h3 { font-size: inherit; }
.audience-faq__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: 2.5rem 1fr 1.5rem;
  gap: .7rem;
  align-items: start;
  padding-block: 1.15rem;
  text-align: left;
  cursor: pointer;
}
.audience-faq__trigger > span:nth-child(2) { font-size: clamp(1.05rem, 3.8vw, 1.35rem); font-weight: 800; line-height: 1.2; }
.audience-faq__index { padding-top: .12rem; color: var(--color-brand); font-family: var(--font-mono); font-size: .65rem; font-weight: 800; }
.audience-faq__icon { font-family: var(--font-mono); font-size: 1.3rem; line-height: 1; transition: transform var(--transition-fast); }
.audience-faq__trigger[aria-expanded="true"] .audience-faq__icon { transform: rotate(45deg); }
.audience-faq__panel { padding: 0 0 1.35rem 3.2rem; }
.audience-faq__panel p { max-width: 720px; color: var(--color-text-secondary); }
.audience-faq__panel[hidden] { display: none; }

.audience-final { background: var(--color-surface); }
.audience-final__inner { max-width: 1100px; }
.audience-final h2 { max-width: 13ch; }
.audience-final__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 1.6rem; }

.js .page-audience [data-audience-reveal] { opacity: 1; transform: none; }
.js .page-audience.audience-motion-ready [data-audience-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 520ms ease, transform 520ms ease;
  transition-delay: var(--audience-delay, 0ms);
}
.js .page-audience.audience-motion-ready [data-audience-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .audience-page *,
  .audience-page *::before,
  .audience-page *::after { scroll-behavior: auto !important; }
  .js .page-audience.audience-motion-ready [data-audience-reveal] { opacity: 1; transform: none; transition: none; }
  .js .page-audience.audience-motion-ready .audience-hero__composition[data-audience-reveal] .audience-hero__box {
    opacity: 1;
    --audience-box-lift: 0px;
    --audience-box-hover-lift: 0px;
    --audience-box-hover-rotate: 0deg;
    --audience-box-scale: 1;
    transition: none;
  }
  .audience-hero__box { transition: none; }
  .audience-faq__icon { transition: none; }
}

/* Meme break: cursor-follow editorial label for the grayscale BEFORE image. */
.meme-break__cursor-label {
  position: fixed;
  z-index: 1200;
  top: 0;
  left: 0;
  width: min(360px, calc(100vw - 24px));
  border: 1px solid var(--color-ink-fixed);
  padding: .62rem .72rem .66rem;
  background: var(--color-paper-on-ink);
  color: var(--color-ink-fixed);
  box-shadow: 5px 6px 0 var(--color-brand);
  font-family: var(--font-mono);
  font-size: clamp(.58rem, .72vw, .68rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  letter-spacing: .025em;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-9999px, -9999px, 0);
  transition: opacity 120ms ease;
  will-change: transform, opacity;
}

.meme-break__cursor-label.is-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .meme-break__cursor-label {
    transition: none;
  }
}

/* Zero-stock cat: keep the bottom-center pivot stable; reduced motion removes the peek animation. */
@media (prefers-reduced-motion: reduce) {
  .zero-stock__cat {
    transition: none;
  }

  .zero-stock__zero-zone:hover .zero-stock__cat {
    --zero-cat-angle: 2deg;
    --zero-cat-scale: .98;
  }
}

/* Legal / privacy policy */
.legal-page { background: var(--color-page); }
.legal-hero {
  padding-block: clamp(5.5rem, 12vw, 9rem) clamp(3.5rem, 8vw, 6rem);
  border-bottom: 1px solid var(--color-text);
}
.legal-hero__inner { display: grid; gap: 1.1rem; }
.legal-hero h1 {
  max-width: 10ch;
  font-size: clamp(3.4rem, 10vw, 7rem);
  line-height: .86;
  letter-spacing: -.065em;
}
.legal-hero__meta {
  margin-top: .5rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.legal-content { padding-block: clamp(3.5rem, 8vw, 8rem) clamp(6rem, 12vw, 10rem); }
.legal-content__layout { display: grid; gap: 3rem; }
.legal-toc {
  border-top: 3px solid var(--color-text);
  padding-top: 1rem;
}
.legal-toc__label {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .04em;
}
.legal-toc ol { margin-top: 1rem; list-style: none; counter-reset: legal-toc; }
.legal-toc li {
  counter-increment: legal-toc;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .65rem;
  align-items: baseline;
  padding-block: .62rem;
  border-bottom: 1px solid var(--color-border);
}
.legal-toc li::before {
  content: counter(legal-toc, decimal-leading-zero);
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: var(--font-weight-bold);
}
.legal-toc a {
  color: var(--color-text-secondary);
  font-size: .88rem;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.legal-toc a:hover { color: var(--color-text); text-decoration: underline; }
.legal-article { min-width: 0; }
.legal-section {
  position: relative;
  scroll-margin-top: calc(var(--header-height-desktop) + 2rem);
  padding-block: 0 clamp(3rem, 7vw, 5.5rem);
}
.legal-section + .legal-section {
  padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--color-border);
}
.legal-section__no {
  margin-bottom: .75rem;
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .05em;
}
.legal-section h2 {
  max-width: 18ch;
  font-size: clamp(1.85rem, 4.4vw, 3.2rem);
  line-height: .95;
  letter-spacing: -.045em;
}
.legal-section > p:not(.legal-section__no),
.legal-subsection > p {
  max-width: 780px;
  margin-top: 1.15rem;
  color: var(--color-text-secondary);
  font-size: clamp(1rem, .35vw + .94rem, 1.12rem);
  line-height: 1.7;
}
.legal-section a { color: var(--color-text); font-weight: var(--font-weight-medium); }
.legal-list {
  display: grid;
  gap: .85rem;
  max-width: 820px;
  margin-top: 1.25rem;
  padding-left: 1.25rem;
  color: var(--color-text-secondary);
}
.legal-list li { padding-left: .2rem; line-height: 1.65; }
.legal-list li::marker { color: var(--color-brand); }
.legal-subsection {
  max-width: 860px;
  margin-top: 2rem;
  padding: 1.3rem 1.35rem 1.45rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
.legal-subsection h3 {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: .03em;
  text-transform: uppercase;
}
.legal-subsection .legal-list { margin-top: 1rem; }
.legal-cookie-list { margin-top: 1rem; border-top: 1px solid var(--color-border); }
.legal-cookie-list > div {
  display: grid;
  grid-template-columns: minmax(74px, .28fr) minmax(0, 1fr);
  gap: 1rem;
  padding-block: .9rem;
  border-bottom: 1px solid var(--color-border);
}
.legal-cookie-list dt {
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: var(--font-weight-bold);
}
.legal-cookie-list dd { color: var(--color-text-secondary); line-height: 1.5; }
.legal-cookie-list dd span {
  display: block;
  margin-top: .18rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: .68rem;
}

/* Homepage cat touch interactions — mirror desktop hover without sticky touch states. */
.zero-stock__zero-zone.is-cat-tapped .zero-stock__cat {
  --zero-cat-angle: 15deg;
  --zero-cat-scale: 1.035;
  --zero-cat-opacity: 1;
}

.earnings__cat-wrap.is-cat-tapped .earnings__cat-art {
  translate: 0 80%;
}

@media (hover: none), (pointer: coarse) {
  .zero-stock__zero-zone,
  .earnings__cat-wrap { touch-action: manipulation; }
}