/* =========================================================================
   SAZ LAND v4 — runway hero, Top 50 type plate, films from the floor,
   Russian, motion polish. Loaded last on every page.
   Motion budget: the SAZ mark once per session, hero word rise, reel wipe,
   ticker, media wipes, hover clips. Everything honours reduced motion.
   ========================================================================= */

:root{--ease-out:cubic-bezier(.16,1,.3,1);--t-display:clamp(48px,6.4vw,112px)}

/* ---------- Typography: lighter display serif, tighter tracking ---------- */
.h1{font-weight:300;letter-spacing:-.024em;line-height:1}
.h1 em,.display em,.h2 em{font-style:italic;font-weight:300}
html[lang="ru"] .h1,html[lang="ru"] .display{letter-spacing:-.016em}
.sec-title{max-width:15ch}
html[lang="ru"] .sec-title,html[lang="pl"] .sec-title{max-width:18ch}
.proof .stat__n{font-family:var(--f-serif);font-weight:300;font-size:min(clamp(56px,5.4vw,96px),12vw);line-height:.92;letter-spacing:-.03em;color:var(--ink)}
.proof .stat__n .unit{font-family:var(--f-mono);font-size:.22em;letter-spacing:.04em}
.proof .stat__l{margin-top:10px}
.draft-toggle{display:none}
.draft .draft-toggle,.draft-ui .draft-toggle{display:flex}

/* ---------- Intro: the full SAZ mark, once per session ---------- */
.intro{display:none}
html.intro body{overflow:hidden}
html.intro .intro{position:fixed;inset:0;z-index:500;display:grid;place-items:center;background:var(--ink);color:var(--chalk);clip-path:inset(0)}
.intro__in{display:grid;justify-items:center}
.intro__mark{width:clamp(112px,10vw,150px);height:auto;opacity:0;animation:introFade 900ms var(--ease) 80ms forwards}
.intro__land{margin-top:18px;font-family:var(--f-sans);font-weight:500;font-size:13px;letter-spacing:.42em;padding-left:.42em;opacity:0;animation:introIn 700ms var(--ease) 320ms forwards}
.intro__meta{margin-top:30px;display:flex;align-items:center;gap:12px;color:var(--on-loden-muted);opacity:0;animation:introIn 700ms var(--ease) 520ms forwards}
.intro__meta i{display:block;width:18px;height:1px;background:var(--ochre)}
.intro__rule{position:absolute;left:0;right:0;bottom:0;height:2px}
.intro__rule i{display:block;height:100%;background:var(--ochre);transform:scaleX(0);transform-origin:left;animation:drawX 1500ms var(--ease) 100ms forwards}
html.intro-out .intro{animation:curtainOut 950ms var(--ease-out) forwards;pointer-events:none}
html.intro-out .intro__in{animation:liftOut 600ms var(--ease) forwards}
@keyframes introIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes introFade{from{opacity:0}to{opacity:1}} /* the mark stays still: fade only */

/* ---------- Hero v4: runway of the top styles ---------- */
.hero4{padding:calc(var(--header-h) + clamp(16px,2.6vw,36px)) 0 clamp(28px,3vw,44px);position:relative;overflow:hidden}
.hero4 > .wrap{width:100%}
.hero4__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px var(--gutter)}
@media (min-width:1024px){
  .hero4{min-height:min(100svh,1000px);display:flex;align-items:center}
  .hero4__grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}
  .hero4__text{grid-column:1/7}
  .hero4__reel{grid-column:7/13;justify-self:end}
}
.hero4__eb{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;color:var(--steel-text)}
.hero4__eb i{display:block;width:18px;height:1px;background:var(--ochre)}
.hero4 .hero4__h{margin-top:clamp(22px,2.6vw,38px);max-width:11ch;font-family:var(--f-serif);font-weight:300;font-size:clamp(50px,6.4vw,118px);line-height:.94;letter-spacing:-.034em;padding-bottom:.04em}
html[lang="pl"] .hero4 .hero4__h,html[lang="ru"] .hero4 .hero4__h{font-size:clamp(42px,5.2vw,98px);max-width:12.5ch;letter-spacing:-.026em}
.hero4 .hero4__h em{font-style:italic;font-weight:300}
.hero4__lead{margin-top:clamp(20px,2.2vw,30px);font-size:var(--t-lead);line-height:1.55;max-width:31rem}
.hero4 .hero4__cta{margin-top:clamp(24px,2.6vw,36px)}
.hero4__facts{margin-top:clamp(30px,3.6vw,56px);display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;border-top:1px solid var(--ink);max-width:36rem}
.hero4__facts > div{padding:14px 24px 0 0;min-width:0}
.hero4__facts > div + div{padding-left:22px;border-left:1px solid rgba(138,143,148,.5)}
.hero4__facts dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-text)}
.hero4__facts dd{margin-top:8px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.hero4__facts b{font-family:var(--f-serif);font-weight:400;font-size:clamp(28px,2.5vw,38px);line-height:1;letter-spacing:-.01em}
.hero4__facts span{font-size:13px;line-height:1.3;color:var(--steel-text)}

/* word rise (JS splits [data-split] into .w > span) */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .1em 0;margin:0 -.08em -.1em 0}
.split .w > span{display:inline-block}
.js .hero4__h.split .w > span{transform:translateY(108%)}
.js .hero4__text > :not(.hero4__h):not(.todo),.js .hero4__reel{opacity:0}
.hero-in .hero4__h.split .w > span{transform:none;transition:transform 1100ms var(--ease-out) calc(var(--i,0) * 50ms + 60ms)}
.hero-in .hero4__text > :not(.hero4__h):not(.todo){opacity:1;transform:none;transition:opacity 900ms var(--ease) var(--dl,300ms),transform 900ms var(--ease-out) var(--dl,300ms)}
.js .hero4__text > :not(.hero4__h):not(.todo){transform:translateY(14px)}
.hero4__eb{--dl:0ms}.hero4__lead{--dl:380ms}.hero4__cta{--dl:480ms}.hero4__facts{--dl:580ms}
.hero-in .hero4__reel{opacity:1;transition:opacity 600ms var(--ease) 200ms}
.js .hero4__reel .reel__stage{clip-path:inset(100% 0 0 0)}
.hero-in .hero4__reel .reel__stage{clip-path:inset(0);transition:clip-path 1300ms var(--ease-out) 240ms}
@media (prefers-reduced-motion:reduce){
  .js .hero4__h.split .w > span,.js .hero4__text > *,.js .hero4__reel,.js .hero4__reel .reel__stage{transform:none!important;opacity:1!important;clip-path:none!important;transition:none!important}
}

/* reel */
.reel{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.reel__stage{position:relative;overflow:hidden;background:var(--surface-2);aspect-ratio:3/4;width:100%}
@media (min-width:1024px){.reel__stage{height:min(calc(100svh - var(--header-h) - 150px),860px);width:auto;max-width:100%}}
.reel__slide{position:absolute;inset:0;display:block;z-index:1;clip-path:inset(0 0 0 100%);transition:clip-path 1150ms var(--ease-out)}
.reel__slide.is-on{z-index:3;clip-path:inset(0)}
.reel__slide.is-out{z-index:2;clip-path:inset(0);transition:none}
.reel__slide img,.reel__slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel__slide img{transition:transform 1600ms var(--ease-out)}
.reel__slide.is-out img,.reel__slide.is-out video{transform:scale(1.06);transition:transform 1600ms var(--ease-out)}
.reel__slide video{opacity:0;transition:opacity 500ms var(--ease)}
.reel__slide video.ready{opacity:1}
.reel__slide:focus-visible{outline-offset:-4px}
.reel__cap{position:absolute;left:0;bottom:0;z-index:6;max-width:min(86%,380px);display:grid;gap:2px;padding:14px 20px 16px;background:var(--chalk);pointer-events:none}
.reel__no{font-size:12px;letter-spacing:.08em;color:var(--steel-text)}
.reel__name{font-family:var(--f-serif);font-weight:500;font-size:clamp(20px,1.6vw,24px);line-height:1.15}
.reel__col{font-size:13px;color:var(--steel-text)}
.reel__cap.swap > *{animation:capIn 800ms var(--ease-out) both}
.reel__cap.swap > :nth-child(2){animation-delay:60ms}.reel__cap.swap > :nth-child(3){animation-delay:120ms}
@keyframes capIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.reel__toggle{position:absolute;right:12px;bottom:12px;z-index:6;width:44px;height:44px;display:grid;place-items:center;background:rgba(243,239,230,.88);color:var(--ink);transition:background var(--d1)}
.reel__toggle:hover{background:var(--chalk)}
.reel__toggle svg{width:16px;height:16px}
.reel .i-play{display:none}.reel.paused .i-play{display:block}.reel.paused .i-pause{display:none}
.reel__foot{display:flex;align-items:center;gap:20px;margin-top:12px;min-width:0}
.reel__bars{flex:1;display:flex;gap:6px;min-width:0}
.reel__bars button{flex:1;min-width:0;height:28px;display:flex;align-items:center}
.reel__bars i{position:relative;display:block;width:100%;height:2px;background:rgba(138,143,148,.35);overflow:hidden}
.reel__bars i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
.reel__bars .done i::after{transform:scaleX(1)}
.reel__bars [aria-selected="true"] i::after{animation:barFill var(--dur,4.6s) linear forwards}
.reel.paused .reel__bars [aria-selected="true"] i::after,.reel.hold .reel__bars [aria-selected="true"] i::after{animation-play-state:paused}
@keyframes barFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.reel__all{flex:none;display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14px;letter-spacing:.02em;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--ink);padding:4px 0}
.reel__all svg{width:18px;height:10px;transition:transform var(--d2) var(--ease)}
.reel__all:hover svg{transform:translateX(4px)}
.reel__side{display:none}
@media (min-width:1024px){
  .reel__side{position:absolute;left:-34px;top:0;display:flex;align-items:center;gap:10px;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--steel-text);white-space:nowrap}
  .reel__side i{display:block;width:1px;height:18px;background:var(--ochre)}
}
.reel__bee{position:absolute;right:-18px;top:-30px;z-index:7;width:clamp(72px,7vw,104px);height:auto;pointer-events:none;animation:beeHover 6s ease-in-out infinite}
@media (max-width:1023px){
  .hero4__reel{margin:0 calc(var(--pad) * -1)}
  .reel__stage{aspect-ratio:4/5}
  .reel__foot{padding:0 var(--pad)}
  .reel__bee{display:none}
}
@media (prefers-reduced-motion:reduce){.reel__bee{animation:none}.reel__slide{transition:none}}

/* ---------- Ticker ---------- */
.ticker{overflow:hidden;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:14px 0;background:var(--chalk)}
.ticker__in{display:flex;width:max-content;animation:tick 56s linear infinite}
.ticker__set{display:flex;align-items:center;gap:28px;padding-right:28px}
.ticker span{font-family:var(--f-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ticker img{width:28px;height:auto;flex:none}
.ticker:hover .ticker__in{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker__in{animation:none}}
.proof{padding-top:clamp(40px,5vw,80px);padding-bottom:clamp(8px,2vw,24px)}

/* ---------- Top 50 plate (camel) ---------- */
.coll4{padding:clamp(64px,8vw,128px) 0 clamp(56px,7vw,112px)}
.coll4__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px var(--gutter);align-items:end}
@media (min-width:1024px){.coll4__grid{grid-template-columns:7fr 5fr}}
.coll4__type{position:relative;display:block;width:max-content;max-width:100%;color:var(--ink);text-decoration:none;font-family:var(--f-serif);font-weight:300;line-height:.76}
.coll4__top{display:block;font-style:italic;font-size:clamp(84px,12.5vw,214px);letter-spacing:-.035em;margin-left:.03em}
.coll4__50{display:block;font-size:clamp(168px,26vw,450px);letter-spacing:-.06em;margin:-.1em 0 0 .26em}
.coll4__bee{position:absolute;right:-16%;top:-6%;width:clamp(86px,11vw,180px);height:auto;transform:rotate(-8deg);transition:transform 900ms var(--ease-out)}
.coll4__type:hover .coll4__bee{transform:translate(12px,-10px) rotate(2deg)}
.coll4__trail{position:absolute;left:34%;top:-6%;width:62%;height:48%;overflow:visible;pointer-events:none}
.coll4__trail path{fill:none;stroke:var(--ink);stroke-width:1.25;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.coll4__copy{padding-bottom:clamp(8px,2vw,36px)}
.coll4__copy .eyebrow{display:flex;align-items:center;gap:14px}
.coll4__copy .eyebrow img{width:64px;height:auto}
.coll4__h{margin-top:18px;font-family:var(--f-serif);font-weight:300;font-size:clamp(36px,3.6vw,60px);line-height:1;letter-spacing:-.02em;max-width:12ch}
.coll4__h em{font-style:italic}
.coll4 .body{margin-top:20px}
.coll4 .btn-row{margin-top:28px}
.coll4__rail{margin-top:clamp(44px,5.5vw,80px);display:grid;grid-auto-flow:column;grid-auto-columns:46%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--ink) transparent;padding-bottom:14px}
@media (min-width:640px){.coll4__rail{grid-auto-columns:30%}}
@media (min-width:1024px){.coll4__rail{grid-auto-columns:calc((100% - 56px) / 5)}}
.peek4{display:grid;align-content:start;gap:10px;scroll-snap-align:start;text-decoration:none;color:var(--ink);min-width:0}
.peek4__img{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:var(--chalk)}
.peek4__img img,.peek4__img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1200ms var(--ease-out),opacity 500ms var(--ease)}
.peek4__img video{opacity:0}
.peek4.playing video{opacity:1}
.peek4:hover .peek4__img img{transform:scale(1.04)}
.peek4__no{font-size:12px;letter-spacing:.06em}
.peek4__name{font-family:var(--f-serif);font-weight:500;font-size:clamp(18px,1.4vw,21px);line-height:1.15;margin-top:-4px}
.peek4--more .peek4__img{display:grid;place-content:center;justify-items:center;gap:10px;padding:16px;text-align:center;border:1px solid var(--ink);background:transparent;transition:background var(--d2) var(--ease),color var(--d2)}
.peek4--more b{font-family:var(--f-serif);font-weight:300;font-size:clamp(56px,6vw,96px);line-height:.9;letter-spacing:-.03em}
.peek4--more:hover .peek4__img{background:var(--ink);color:var(--chalk)}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .coll4__50{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .chero4__w2{animation:drift linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  }
}
@keyframes drift{from{transform:translateX(-3%)}to{transform:translateX(5%)}}

/* ---------- Capability cards: the clip plays on hover ---------- */
.card__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 500ms var(--ease)}
.card.playing .card__vid{opacity:1}
.card.playing .card__img .alt{opacity:0}

/* ---------- Films from the floor (ink) ---------- */
.stories{background:var(--ink);color:var(--chalk);padding:var(--sec) 0;margin-bottom:var(--sec)}
.stories__head{display:grid;gap:20px var(--gutter);align-items:end;margin-bottom:clamp(36px,4.5vw,64px)}
@media (min-width:1024px){.stories__head{grid-template-columns:7fr 4fr 1fr}}
.stories .h1{color:var(--chalk);max-width:12ch}
.stories .body{color:var(--on-loden-muted)}
.stories__mark{width:clamp(64px,6vw,88px);height:auto;justify-self:start}
@media (min-width:1024px){.stories__mark{justify-self:end}}
.stories__rail{display:grid;grid-auto-flow:column;grid-auto-columns:64%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 10px;scrollbar-width:none}
.stories__rail::-webkit-scrollbar{display:none}
@media (min-width:640px){.stories__rail{grid-auto-columns:38%}}
@media (min-width:1024px){.stories__rail{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin:0;padding:0;gap:var(--gutter)}}
.story{display:grid;align-content:start;gap:12px;text-align:left;color:inherit;scroll-snap-align:start;cursor:pointer;min-width:0}
.story__media{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:#2A2926}
.story__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1400ms var(--ease-out)}
.story:hover .story__media img{transform:scale(1.04)}
.story__play{position:absolute;left:14px;bottom:14px;width:56px;height:56px;display:grid;place-items:center;background:var(--chalk);color:var(--ink);transition:transform var(--d2) var(--ease-out)}
.story:hover .story__play{transform:scale(1.08)}
.story__play svg{width:20px;height:20px}
.story__meta{display:flex;justify-content:space-between;gap:10px;color:var(--on-loden-muted)}
.story__t{font-family:var(--f-serif);font-weight:400;font-size:clamp(22px,1.8vw,28px);line-height:1.12}
.stories .story:focus-visible{outline-color:var(--chalk)}
.story--wide .story__media{aspect-ratio:4/5}
.people .story__meta{color:var(--steel-text)}
.people .story__play{background:var(--ink);color:var(--chalk)}

/* film viewer */
.sv{width:min(560px,100vw);max-width:none;max-height:100dvh;padding:0;border:0;background:var(--ink);color:var(--chalk);overflow:hidden}
.sv[open]{display:flex;flex-direction:column;animation:pdIn 420ms var(--ease)}
.sv::backdrop{background:rgba(28,27,25,.88)}
.sv__bar{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 16px;flex:none}
.sv__bar img{width:26px;height:auto}
.sv__t{margin-right:auto;font-family:var(--f-serif);font-size:20px;line-height:1.2;min-width:0}
.sv__bar button{width:44px;height:44px;flex:none;display:grid;place-items:center;border:1px solid rgba(243,239,230,.35);color:var(--chalk);transition:border-color var(--d1),background var(--d1)}
.sv__bar button:hover{border-color:var(--chalk);background:rgba(243,239,230,.08)}
.sv__bar svg{width:18px;height:18px}
.sv__stage{flex:1;min-height:0;display:grid;place-items:center;background:#000}
.sv__v{display:block;width:100%;max-height:calc(100dvh - 64px);aspect-ratio:9/16;object-fit:contain;background:#000}
@media (max-width:640px){.sv{width:100vw;height:100dvh}.sv__nav{display:none!important}}

/* ---------- Family: the team film; portraits wait for the shoot (draft only) ---------- */
html:not(.draft) .team .ph{display:none}
html:not(.draft) .team{gap:0 var(--gutter)}
html:not(.draft) .person{border-top:1px solid var(--ink);padding:18px 0 8px}
html:not(.draft) .person h3{margin-top:0;font-weight:400;font-size:clamp(24px,2vw,30px);line-height:1.1}
html:not(.draft) .person p{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.people__media .story{width:100%}

/* ---------- Catalogue hero v4: the Top 50 ---------- */
.chero4{padding-top:calc(var(--header-h) + clamp(24px,3.4vw,52px))}
.chero4__top{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--ink);color:var(--steel-text)}
.chero4__eb{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.chero4__eb img{width:64px;height:auto}
.chero4__eb i{display:block;width:18px;height:1px;background:var(--ochre)}
.chero4__count b{font-weight:500;color:var(--ink)}
.chero4 h1.chero4__title{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .1em;max-width:none;margin-top:clamp(10px,1.4vw,22px);font-family:var(--f-serif);font-weight:300;line-height:.8;letter-spacing:-.05em;color:var(--ink)}
.chero4__w1{font-style:italic;font-size:clamp(104px,16vw,290px)}
.chero4__w2{font-size:clamp(150px,24.5vw,440px)}
.chero4__row{display:grid;grid-template-columns:minmax(0,1fr);gap:44px var(--gutter);margin-top:clamp(28px,3.4vw,52px)}
@media (min-width:1024px){.chero4__row{grid-template-columns:5fr 7fr;align-items:end}}
.chero4__sub{font-family:var(--f-serif);font-weight:300;font-size:clamp(32px,3vw,50px);line-height:1.02;letter-spacing:-.02em;max-width:14ch}
.chero4__sub em{font-style:italic}
.chero4__text .lead{margin-top:20px}
.chero4__text .btn-row{margin-top:28px}
.chero4__strip{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end;padding-top:56px}
.cs{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--surface-2)}
.cs--2{margin-bottom:14%}.cs--3{margin-bottom:5%}.cs--4{margin-bottom:22%}
.cs img,.cs video{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1200ms var(--ease-out)}
.cs:hover img,.cs:hover video{transform:scale(1.04)}
.cs__bee{position:absolute;right:0;top:-8px;width:clamp(72px,8vw,128px);height:auto;animation:beeHover 6s ease-in-out infinite;pointer-events:none}
.cs__trail{position:absolute;left:0;top:-12px;width:80%;height:80px;overflow:visible;pointer-events:none}
.cs__trail path{fill:none;stroke:var(--ink);stroke-width:1.25;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
@media (prefers-reduced-motion:reduce){.cs__bee{animation:none}}
.chero4 .chero__stats{margin-top:clamp(36px,4vw,56px)}

/* product card: coming-soon slot (clean version) */
.pc__soon{position:relative;aspect-ratio:3/4;display:grid;place-content:center;justify-items:center;gap:20px;background:var(--surface-2);color:var(--steel)}
.pc__soon svg{width:min(150px,46%);height:auto}
.pc__soon .mono-up{color:var(--steel-text)}
.pc--soon .pc__name{font-style:italic;color:var(--steel-text)}

/* product card: clip on hover, film badge */
.pc__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;opacity:0;pointer-events:none;transition:opacity 500ms var(--ease)}
.pc.playing .pc__vid{opacity:1}
.pc__film{position:absolute;left:12px;bottom:12px;z-index:5;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;background:var(--chalk);font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.pc__film svg{width:12px;height:12px}
.pc.playing .pc__film{opacity:0}
.pd__video{position:relative;aspect-ratio:3/4;background:var(--surface-2)}
.pd__video video{width:100%;height:100%;object-fit:cover;display:block}
.pd__thumbs .is-film{position:relative}
.pd__thumbs .is-film::after{content:"";position:absolute;inset:auto auto 8px 8px;width:0;height:0;border-left:12px solid var(--chalk);border-top:7px solid transparent;border-bottom:7px solid transparent;filter:drop-shadow(0 0 1px rgba(28,27,25,.6))}

/* ---------- Floating contact button: only after the first screen ---------- */
.fab{opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity var(--d2) var(--ease),transform var(--d2) var(--ease)}
.past-hero .fab{opacity:1;pointer-events:auto;transform:none}
.past-hero .fab:hover{transform:translateY(-2px)}

/* ---------- Header: three languages ---------- */
.lang button{min-width:30px;padding:10px 4px}
@media (max-width:420px){.lockup span{display:none}.lang{font-size:12px}}

/* ---------- Mobile polish ---------- */
@media (max-width:639px){
  .hero4__facts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero4__facts > div{padding-right:10px}
  .hero4__facts > div + div{padding-left:12px}
  .hero4__facts b{font-size:26px}
  .hero4 .hero4__cta .btn{flex:1 1 100%}
  .coll4__50{margin-left:.12em}
  .coll4__bee{right:auto;left:calc(100% + 6px);top:24%;width:78px}
  .hero4__eb{font-size:10.5px;letter-spacing:.05em;gap:6px 10px}
  .hero4__eb i{width:12px}
  .chero4__strip{gap:6px;padding-top:44px}
  .story__t{font-size:20px}
}

/* =========================================================================
   v5 — the full SAZ mark in the header, bee cursor, four reasons in one row,
   standards as seals, rights notice on product photos, catalogue PDF.
   ========================================================================= */
:root{--header-h:72px}
@media (min-width:1024px){:root{--header-h:84px}}
.lockup .lockup__mark{height:50px;width:auto}
@media (min-width:1024px){.lockup .lockup__mark{height:62px}}

/* bee cursor (mouse only); the ochre bee marks what you can click */
@media (hover:hover) and (pointer:fine){
  html{cursor:url("../brand/cursor-bee.svg") 2 11,auto}
  a,button,summary,label,select,[role="tab"],.pchip,.reel__slide,.peek4,.story,.card{cursor:url("../brand/cursor-bee-ochre.svg") 2 11,pointer}
  input:not([type]),input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="url"],input[type="search"],input[type="month"],textarea{cursor:text}
  .tag3d__stage{cursor:grab}
  .tag3d__stage.grabbing{cursor:grabbing}
}

/* four reasons: one even row, no empty plates */
.why4__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 40px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.why4__head .h1{max-width:16ch}
.why4__row{display:grid;grid-template-columns:minmax(0,1fr);gap:40px var(--gutter)}
@media (min-width:640px){.why4__row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.why4__row{grid-template-columns:repeat(4,minmax(0,1fr))}}
.w4{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--ink);padding-top:14px;min-width:0}
.w4__img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--surface-2);margin:0 0 4px}
.w4__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1200ms var(--ease-out)}
.w4:hover .w4__img img{transform:scale(1.04)}
.w4__k{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.w4__k .mono{font-size:12px;color:var(--steel-text)}
.w4__k b{font-family:var(--f-serif);font-weight:300;font-size:clamp(34px,3vw,46px);line-height:1;letter-spacing:-.02em}
.w4__k small{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel-text)}
.w4 .h3{font-size:clamp(22px,1.7vw,26px)}
.w4 > p:last-child{font-size:15px;line-height:1.55}
@media (max-width:639px){.w4__img{aspect-ratio:16/11}}

/* standards and registrations as seals (honest status on each) */
.seals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(32px,4vw,48px)}
@media (min-width:768px){.seals{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1280px){.seals{grid-template-columns:repeat(6,minmax(0,1fr))}}
.seal{display:grid;justify-items:center;align-content:start;text-align:center;gap:8px;padding:22px 14px 20px;border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:-6px;background:var(--chalk);min-width:0}
.seal__st{color:var(--loden);border-bottom:1px solid currentColor;padding-bottom:3px;font-size:11px}
.seal__st--prog{color:var(--ochre-text)}
.seal__i{width:32px;height:32px;margin-top:4px}
.seal__t{font-family:var(--f-serif);font-weight:500;font-size:clamp(24px,2vw,30px);line-height:1.05}
.seal__d{font-size:13px;line-height:1.4;color:var(--steel-text)}

/* rights notice on product photos */
.rights{position:absolute;right:6px;bottom:8px;z-index:6;writing-mode:vertical-rl;transform:rotate(180deg);padding:6px 3px;background:rgba(243,239,230,.78);color:var(--ink);font-family:var(--f-mono);font-size:9px;line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;pointer-events:none}
.reel .rights{bottom:auto;top:12px}
.peek4{position:relative}
.rights--peek{top:8px;bottom:auto}
.pd__rights{margin-top:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--steel-text)}
.pc__media img,.reel img,.peek4 img,.card__img img,.w4__img img,.pd__media img{-webkit-user-drag:none;user-select:none}

/* Top 50 = the catalogue */
.chero4 h1 .chero4__tag{align-self:flex-end;margin:0 0 .9em .5em;padding:8px 12px;border:1px solid var(--ink);font-family:var(--f-mono);font-size:clamp(11px,1vw,14px);font-style:normal;font-weight:400;line-height:1;letter-spacing:.2em}
.coll4 .btn-row .btn svg{width:18px;height:18px}
.nav__cat span{white-space:nowrap}
/* reel photo slides: a slow push-in instead of a clip */
.reel__slide[data-photo] img{transform:scale(1.06);transition:transform 6s linear}
.reel__slide.is-on[data-photo] img{transform:scale(1)}
@media (prefers-reduced-motion:reduce){.reel__slide[data-photo] img{transform:none;transition:none}}
.reel .rights{right:auto;left:6px;top:12px;bottom:auto}
@media (max-width:639px){.chero4 h1 .chero4__tag{display:none}}

/* ===== v6: bigger hero slider, reasons first, family portraits ===== */
@media (min-width:1024px){
  .hero4__grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .hero4__text{grid-column:1/7}
  .hero4__reel{grid-column:7/13;justify-self:stretch}
  .reel{justify-items:end}
  .reel__stage{aspect-ratio:4/5;height:min(calc(100svh - var(--header-h) - 104px),920px);width:auto;max-width:100%}
  .reel__foot{width:100%;max-width:calc(min(calc(100svh - var(--header-h) - 104px),920px) * .8)}
}
@media (min-width:1024px) and (max-height:760px){.reel__stage{height:calc(100svh - var(--header-h) - 84px)}}
.reel__cap{padding:12px 18px 14px;max-width:min(78%,340px)}
.why4--first{padding-top:clamp(56px,6vw,96px)}
.why4--first + .ticker{margin-top:0}
/* family: five portrait slots in one row */
.team5{margin-top:clamp(48px,6vw,88px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px var(--gutter)}
@media (min-width:768px){.team5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.team5{grid-template-columns:repeat(5,minmax(0,1fr))}}
.tm{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--ink);padding-top:14px;min-width:0}
.tm__ph{position:relative;aspect-ratio:3/4;margin-bottom:10px;background:var(--surface-2);display:grid;place-items:center;overflow:hidden;outline:1px solid rgba(28,27,25,.12);outline-offset:-10px}
.tm__ph img.tm__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tm__in{font-family:var(--f-serif);font-weight:300;font-size:clamp(84px,9vw,140px);line-height:1;color:rgba(28,27,25,.14)}
.tm__mark{position:absolute;left:50%;bottom:18%;width:28%;height:auto;transform:translateX(-50%);opacity:.5}
.tm__cap{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:10px;color:var(--steel-text)}
.tm__name{font-family:var(--f-serif);font-weight:400;font-size:clamp(22px,1.7vw,26px);line-height:1.15}
.tm__role{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--steel-text)}
@media (max-width:767px){.team5 .tm:last-child{grid-column:1/-1}.team5 .tm:last-child .tm__ph{aspect-ratio:3/2}}
@media (min-width:1024px){
  .hero4{padding-top:calc(var(--header-h) + 14px);padding-bottom:18px}
  .reel__stage{height:min(calc(100svh - var(--header-h) - 66px),980px)}
  .reel__foot{max-width:calc(min(calc(100svh - var(--header-h) - 66px),980px) * .8);margin-top:8px}
  .reel__name{font-size:clamp(22px,1.7vw,28px)}
}

/* fix: a fully clipped element is never "visible" to IntersectionObserver, so the reveal never fired
   (factory loops, estimator photo). The figure stays observable; its content does the wipe. */
.js .cell--img.rv:not(.in),.js figure.rv:not(.in):not(.hero__media){clip-path:none}
.js figure.rv:not(.hero__media) > *,.js .cell--img.rv > *{transition:clip-path 900ms var(--ease)}
.js figure.rv:not(.in):not(.hero__media) > *,.js .cell--img.rv:not(.in) > *{clip-path:inset(0 0 100% 0)}
