.brand-story { position: relative; background: #eeeae3; border-top: 1px solid var(--linija); }
.brand-story-stage { max-width: 1600px; margin: auto; padding: 90px var(--pad); }
.brand-story-heading { position: relative; z-index: 2; }
.brand-story-heading h2 { font: 400 clamp(28px,3vw,42px)/1.1 var(--display); letter-spacing: -.03em; margin-top: 18px; }
.brand-story-heading em { font-weight: 400; }
.brand-story-art { position: relative; height: clamp(210px,30vw,400px); perspective: 1100px; margin: 36px 0; }
.brand-word { position: absolute; inset: 0; margin: auto; width: min(88%,1100px); height: 100%; font: 400 clamp(100px,19vw,280px)/1 var(--sans-d); letter-spacing: -.07em; transform-style: preserve-3d; }
.brand-word > span { color: var(--zar); }
.brand-mark { display: block; width: 100%; height: 100%; overflow: visible; }
.brand-letter { fill: currentColor; color: var(--tinta); }
.brand-mark .wm-t,.brand-mark .wm-us { fill: currentColor; }
.brand-signature { color: var(--zar); }
.brand-city, .brand-project { display: none; position: absolute; width: clamp(110px,17vw,240px); height: clamp(80px,12vw,170px); object-fit: cover; border-radius: 8px; backface-visibility: hidden; }
.brand-city { top: 0; right: 7%; }
.brand-project-a { left: 0; top: 2%; object-position: top; }
.brand-project-b { right: 0; bottom: 0; }
.brand-ink,.brand-connections { display: none; position: absolute; inset: 0; width: 100%; height: 100%; color: var(--zar); pointer-events: none; }
.brand-pulse { display: none; position: absolute; left: 0; top: 47%; width: 100%; height: 3px; background: var(--zar); transform-origin: left; }
.brand-connections circle { fill: currentColor; }
.brand-story-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 70px; }
.brand-story-copy article { max-width: 500px; }
.brand-part { font: 10px/1.5 var(--mono); color: #746d61; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 13px; }
.brand-story-copy h3 { font: 400 clamp(32px,3.3vw,48px)/1.05 var(--display); letter-spacing: -.03em; }
.brand-story-copy h3 em { color: var(--zar-t); font-weight: 400; }
.brand-story-copy article > p:last-child { margin-top: 16px; color: #605c53; font-size: 16px; line-height: 1.65; max-width: 46ch; }
.brand-story-controls { display: none; }
.brand-story.is-animated { height: 440svh; }
.is-animated .brand-story-stage { position: sticky; top: 0; height: 100svh; min-height: 660px; padding-block: 110px 26px; display: grid; grid-template-rows: auto minmax(0,1fr) 168px 56px; overflow: clip; }
.is-animated .brand-story-art { height: auto; min-height: 0; margin: 12px 0 18px; }
.is-animated .brand-story-copy { position: relative; display: block; }
.is-animated .brand-story-copy article { position: absolute; inset: 0; margin: 0 auto; width: 100%; max-width: 600px; text-align: center; }
.is-animated .brand-story-copy article > p:last-child { margin-inline: auto; }
.is-animated .brand-city,.is-animated .brand-project,.is-animated .brand-ink,.is-animated .brand-connections,.is-animated .brand-pulse { display: block; }
.is-animated .brand-story-controls { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; align-items: end; }
.brand-story-controls button { position: relative; display: flex; gap: 12px; align-items: baseline; text-align: left; border-top: 1px solid #cbc4b8; padding-top: 14px; color: #726c61; }
.brand-story-controls b { font: 400 22px/1 var(--sans-d); color: var(--tinta); }
.brand-story-controls span { font: 10px/1.5 var(--mono); }
.brand-story-controls button[aria-pressed="true"] { border-color: var(--zar); }
.brand-story-controls button[aria-pressed="true"] b { color: var(--zar-t); }
.brand-story-controls button:focus-visible { outline: 2px solid var(--zar); outline-offset: 5px; }
@media (max-width:700px) {
  .brand-story-stage { padding: 64px 24px; }
  .brand-story-copy { grid-template-columns: 1fr; gap: 32px; }
  .brand-story.is-animated { height: 340svh; }
  .is-animated .brand-story-stage { min-height: 600px; padding: 90px 24px 26px; grid-template-rows: auto minmax(0,1fr) 195px 64px; }
  .brand-word { width: 85%; }
  .brand-story-heading h2 { font-size: 29px; max-width: 16ch; }
  .brand-story-copy h3 { font-size: 34px; }
  .brand-story-copy article > p:last-child { font-size: 14px; max-width: 35ch; }
  .is-animated .brand-story-controls { gap: 12px; }
  .brand-story-controls button { flex-direction: column; gap: 8px; padding-top: 10px; min-height: 64px; }
  .brand-story-controls b { font-size: 20px; }
  .brand-story-controls span { font-size: 8px; }
  .brand-city { right: 2%; top: -10px; }
  .brand-project-a { left: -10px; top: -10px; }
  .brand-project-b { right: -8px; bottom: -8px; }
}
@media (prefers-reduced-motion:reduce) { .brand-story.is-animated { height: auto; } }

/* Four distinct compositions share one wordmark and one spatial stage. */
.brand-scene-color { display: none; position: absolute; inset: 0; background: var(--zar); pointer-events: none; }
.brand-coordinate { display: none; position: absolute; right: 3%; bottom: 8%; font: 10px/1.8 var(--mono); letter-spacing: .08em; color: #25251e; }
.is-animated .brand-story-stage { max-width: none; grid-template-rows: auto minmax(0,1fr) 190px 56px; }
.is-animated .brand-scene-color { display: block; }
.is-animated .brand-story-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 30px; }
.is-animated .brand-story-heading h2 { margin: 0; font-size: clamp(25px,2.4vw,36px); }
.is-animated .brand-story-heading .oz { font-size: 10px; }
.is-animated .brand-story-art { perspective: 950px; margin-block: 20px; }
.is-animated .brand-word { width: min(90%,1100px); transform-origin: 50% 50%; z-index: 1; }
.is-animated .brand-city { width: min(55%,600px); height: 100%; top: 0; right: 0; border-radius: 0; object-position: center; mask-image: linear-gradient(90deg,transparent,#000 18%); }
.is-animated .brand-coordinate { display: block; }
.is-animated .brand-ink { color: var(--tinta); top: auto; left: 22%; bottom: 0; width: 56%; height: 42px; }
.is-animated .brand-story-copy { z-index: 2; }
.is-animated .brand-story-copy article { margin: 0; text-align: left; max-width: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; align-content: center; }
.is-animated .brand-story-copy .brand-part { grid-column: 1; }
.is-animated .brand-story-copy h3 { grid-column: 1; font-size: clamp(32px,3.4vw,50px); }
.is-animated .brand-story-copy article > p:last-child { grid-column: 2; grid-row: 2; align-self: end; margin: 0 0 5px auto; width: min(100%,350px); }
.is-animated .brand-story-controls { position: relative; z-index: 2; }
.is-animated .brand-project { z-index: 2; width: clamp(170px,23vw,320px); height: clamp(110px,15vw,210px); border-radius: 3px; box-shadow: 0 24px 45px -30px #514a3c55; }
.is-animated .brand-project-a { top: 4%; left: 0; }
.is-animated .brand-project-b { bottom: 0; right: 0; }
.brand-story-stage.is-speed .brand-story-heading,
.brand-story-stage.is-speed .brand-story-heading .oz,
.brand-story-stage.is-speed .brand-story-copy h3,
.brand-story-stage.is-speed .brand-story-copy h3 em,
.brand-story-stage.is-speed .brand-story-copy article > p,
.brand-story-stage.is-speed .brand-story-controls button,
.brand-story-stage.is-speed .brand-story-controls b { color: #fff; }
.brand-story-stage.is-speed .brand-story-controls button { border-color: #ffffff50; }
.brand-story-stage.is-speed .brand-story-controls button[aria-pressed="true"] { border-color: #fff; }
.brand-story-stage.is-speed .brand-story-heading .oz::before { color: #fff; }
@media (max-width:700px) {
  .is-animated .brand-story-stage { grid-template-rows: auto minmax(0,1fr) 220px 64px; }
  .is-animated .brand-story-heading { display: block; }
  .is-animated .brand-story-heading h2 { margin-top: 14px; font-size: 26px; max-width: 22ch; }
  .is-animated .brand-story-art { margin-block: 20px; }
  .is-animated .brand-ink { bottom: 12%; height: 25px; }
  .is-animated .brand-word { width: 96%; }
  .is-animated .brand-city { width: 76%; right: -24px; }
  .is-animated .brand-coordinate { font-size: 8px; right: 0; bottom: 0; }
  .is-animated .brand-story-copy article { display: block; }
  .is-animated .brand-story-copy h3 { font-size: 34px; }
  .is-animated .brand-story-copy article > p:last-child { margin: 18px 0 0; max-width: 32ch; font-size: 14px; }
  .is-animated .brand-project { width: 125px; height: 84px; }
  .is-animated .brand-project-a { top: 0; left: -15px; }
  .is-animated .brand-project-b { bottom: 0; right: -12px; }
}