/* ===== Έπιπλα κουζίνας · case study λευκής κουζίνας Gola (scoped: .cs / .cs-*) ===== */
.aggl{overflow-x:clip} /* hidden → clip: keeps position:sticky working inside .aggl */
.cs{
  /* primitive */ --ink-900:#14100a; --ink-800:#1d170f; --ink-700:#2c2418; --brown-600:#5D4E37; --brass-300:#cdb68f; --cream-50:#f6f2eb; --stone-300:#bdb2a1;
  /* semantic */ --cs-bg:var(--ink-900); --cs-surface:var(--ink-800); --cs-fg:#f3eee6; --cs-muted:var(--stone-300); --cs-accent:var(--brass-300); --cs-line:rgba(243,238,230,.14);
  --cs-sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --cs-ease:cubic-bezier(.16,1,.3,1); --cs-wipe:cubic-bezier(.77,0,.18,1);
  --cs-top:var(--sn-h,0px); /* ύψος του κεντρικού μενού (nav.css) */
  position:relative;width:100vw;margin-left:calc(50% - 50vw);background:var(--cs-bg);color:var(--cs-fg);isolation:isolate
}
.cs *{box-sizing:border-box}
.cs .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cs-kicker{margin:0;font:700 12px/1.2 var(--cs-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--cs-accent)}
.cs-ph{position:absolute;top:12px;right:12px;z-index:3;background:rgba(160,20,20,.92);color:#fff;font:800 11px/1.2 var(--cs-sans);letter-spacing:.02em;border-radius:999px;padding:4px 10px;pointer-events:none}
.cs-grain::after,.cs-intro::after,.cs-stage__frame::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* 1 · INTRO */
.cs-intro{position:relative;height:100vh;height:calc(100svh - var(--cs-top,0px));min-height:560px;max-height:1000px;overflow:hidden;display:grid;align-items:end}
.cs-intro__media{position:absolute;inset:0;transform:scale(var(--ps,1));transform-origin:50% 60%;will-change:transform}
.cs-intro__img{width:100%;height:100%;object-fit:cover;object-position:center 60%;display:block;transform:scale(1.14);transition:transform 2.8s var(--cs-ease)}
.cs-intro::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,16,10,.15) 0%,rgba(20,16,10,.05) 35%,rgba(20,16,10,.78) 82%,var(--cs-bg) 100%)}
.cs-bar{position:absolute;left:0;right:0;height:50%;z-index:3;background:#000;transition:transform 1.5s var(--cs-wipe)}
.cs-bar--t{top:0;transform-origin:top}.cs-bar--b{bottom:0;transform-origin:bottom}
.cs-intro.is-in .cs-bar{transform:scaleY(.1)}
.cs-intro.is-in .cs-intro__img{transform:scale(1)}
.cs-intro__copy{position:relative;z-index:4;max-width:1100px;width:100%;margin:0 auto;padding:0 20px 15vh;display:grid;gap:16px}
.cs-title{margin:0;font-size:clamp(40px,7.4vw,104px);line-height:1.02;font-weight:700;letter-spacing:-.01em;max-width:11ch;text-wrap:balance}
.cs-title .w{display:inline-block;overflow:hidden;padding:.12em .02em .08em;margin:-.12em 0 -.08em;vertical-align:top}
.cs-title .wi{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--cs-ease);transition-delay:calc(700ms + var(--i)*90ms)}
.cs-intro.is-in .cs-title .wi{transform:none}
.cs-lead{margin:0;max-width:56ch;font-size:clamp(16px,1.6vw,20px);line-height:1.6;color:#e6dfd3}
.cs-reveal{opacity:0;transform:translateY(14px);transition:opacity .9s var(--cs-ease),transform .9s var(--cs-ease);transition-delay:1.15s}
.cs-kicker.cs-reveal{transition-delay:.55s}
.cs-intro.is-in .cs-reveal{opacity:1;transform:none}
.cs-cue{position:absolute;z-index:4;left:50%;bottom:4.5vh;transform:translateX(-50%);display:grid;justify-items:center;gap:8px;color:var(--cs-muted)!important;font:700 11px/1 var(--cs-sans);letter-spacing:.24em;text-transform:uppercase}
.cs-cue i{display:block;width:1px;height:46px;background:linear-gradient(var(--cs-accent),transparent);transform-origin:top;animation:cs-cue 2.2s var(--cs-ease) infinite}
@keyframes cs-cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* 2 · STORY — stacked by default (mobile, reduced motion) */
.cs-story{position:relative;max-width:1100px;margin:0 auto;padding:40px 16px 20px}
.cs-stage{display:none}
.cs-chapters{list-style:none;margin:0;padding:0;display:grid;gap:56px}
.cs-ch__media{position:relative;margin:0 0 18px;border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--cs-surface);cursor:zoom-in}
.cs-ch__media img{width:100%;height:100%;object-fit:cover;display:block}
.cs-ch__num{margin:0 0 6px;font:700 13px/1 var(--cs-sans);letter-spacing:.2em;color:var(--cs-accent)}
.cs-ch__title{margin:0 0 10px;font-size:clamp(26px,3.4vw,44px);line-height:1.1}
.cs-ch__text{margin:0 0 16px;max-width:46ch;font-size:17px;line-height:1.65;color:#e1d9cc}
.cs-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.cs-chips li{padding:7px 13px;border-radius:999px;border:1px solid var(--cs-line);background:rgba(255,255,255,.04);font:700 13px/1.2 var(--cs-sans);color:var(--cs-fg)}
.cs--motion .cs-ch:not(.is-seen){opacity:0;transform:translateY(22px)}
.cs-ch{transition:opacity .8s var(--cs-ease),transform .8s var(--cs-ease)}

/* 2 · STORY — pinned stage on desktop when motion is OK */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .cs-story{max-width:none;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:0 5vw;padding:0 5vw}
  .cs-stage{display:block;position:sticky;top:var(--cs-top);height:calc(100vh - var(--cs-top));padding:28px 0}
  .cs-stage__frame{position:relative;height:100%;border-radius:18px;overflow:hidden;background:var(--cs-surface);box-shadow:0 30px 80px rgba(0,0,0,.45)}
  .cs-shot{position:absolute;inset:0;margin:0;clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--cs-wipe);z-index:0}
  .cs-shot img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08);transition:transform 1.6s var(--cs-ease)}
  .cs-shot[data-shot="3"] img{object-position:center 62%}
  .cs-shot.is-prev{clip-path:inset(0);z-index:1}
  .cs-shot.is-active{clip-path:inset(0);z-index:2}
  .cs-shot.is-active img{transform:scale(1)}
  .cs-progress{position:absolute;z-index:4;left:22px;bottom:20px;display:flex;align-items:center;gap:14px;padding:9px 14px;border-radius:999px;background:rgba(20,16,10,.55);backdrop-filter:blur(8px);font:600 12px/1 var(--cs-sans);letter-spacing:.14em;color:var(--cs-muted)}
  .cs-progress b{color:var(--cs-fg)}
  .cs-progress__track{width:120px;height:2px;background:var(--cs-line);border-radius:2px;overflow:hidden}
  .cs-progress__track i{display:block;height:100%;background:var(--cs-accent);transform-origin:left;transform:scaleX(var(--sp,0))}
  .cs-chapters{gap:0}
  .cs-ch{min-height:calc(100vh - var(--cs-top));display:flex;flex-direction:column;justify-content:center;opacity:.22;transform:none!important;transition:opacity .6s var(--cs-ease)}
  .cs--motion .cs-ch:not(.is-seen){opacity:.22}
  .cs-ch.is-active{opacity:1!important}
  .cs-ch__media{display:none}
}

/* 3 · HOTSPOTS · 4 · COMPARE · shared block */
.cs-block{max-width:1100px;margin:0 auto;padding:72px 16px 0}
.cs-block__head{display:grid;gap:8px;margin-bottom:22px}
.cs-block__head h3{margin:0;font-size:clamp(24px,3vw,38px);line-height:1.15}
.cs-block__head--row{display:flex;justify-content:space-between;align-items:end;gap:16px}
.cs-hs__frame{position:relative;aspect-ratio:4/3;border-radius:16px;background:var(--cs-surface)}
.cs-hs__frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:16px;display:block}
.cs-dot{position:absolute;left:var(--x);top:var(--y);width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px solid #fff;background:rgba(20,16,10,.35);cursor:pointer;z-index:3;padding:0;transition:background .2s,transform .2s}
.cs-dot::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
.cs-dot::before{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #fff;animation:cs-pulse 2.4s var(--cs-ease) infinite}
.cs-dot:hover,.cs-dot[aria-expanded="true"]{transform:scale(1.12);background:var(--brown-600)}
.cs-dot:focus-visible{outline:3px solid var(--cs-accent);outline-offset:4px}
@keyframes cs-pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.3);opacity:0}}
.cs-card{position:absolute;z-index:5;width:min(290px,80%);padding:16px 18px 14px;border-radius:14px;background:var(--cream-50);color:var(--ink-900);box-shadow:0 18px 50px rgba(0,0,0,.4);transform:translate(22px,-50%)}
.cs-card.is-left{transform:translate(calc(-100% - 22px),-50%)}
.cs-card strong{display:block;margin:0 22px 6px 0;font-size:17px}
.cs-card p{margin:0;font-size:14.5px;line-height:1.55;color:#3a3127}
.cs-card__x{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;font-size:20px;line-height:1;cursor:pointer;color:var(--ink-900)}
.cs-card[hidden]{display:none}
@media (max-width:700px){
  .cs-card,.cs-card.is-left{position:relative;left:auto!important;top:auto!important;transform:none;width:auto;margin-top:12px}
  .cs-dot{width:26px;height:26px;margin:-13px 0 0 -13px}
}


/* 5 · FILMSTRIP (user-driven only) */
.cs-film-wrap{max-width:none;padding-left:0;padding-right:0}
.cs-film-wrap .cs-block__head{max-width:1100px;margin:0 auto 22px;padding:0 16px}
.cs-film__nav{display:flex;gap:8px}
.cs-film__nav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--cs-line);background:transparent;color:var(--cs-fg);font-size:24px;line-height:1;cursor:pointer;transition:background .2s,border-color .2s}
.cs-film__nav button:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.cs-film{--pad:max(16px,calc((100vw - 1100px)/2 + 16px));display:flex;gap:14px;margin:0;padding:0 var(--pad) 18px;list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.cs-film:focus-visible{outline:2px solid var(--cs-accent);outline-offset:-2px}
.cs-film.is-drag{scroll-snap-type:none;cursor:grabbing}
.cs-film.is-drag *{pointer-events:none}
.cs-film__item{flex:none;height:clamp(240px,52vh,480px);aspect-ratio:var(--ar);scroll-snap-align:start}
.cs-film__item button{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:14px;overflow:hidden;background:var(--cs-surface);cursor:zoom-in;color:inherit;text-align:left}
.cs-film__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--cs-ease)}
.cs-film__item button:hover img{transform:scale(1.035)}
.cs-film__item button:focus-visible{outline:3px solid var(--cs-accent);outline-offset:-3px}
.cs-film__cap{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.66));font:600 14px/1.35 var(--cs-sans)}
.cs-film__cap b{color:var(--cs-accent);margin-right:6px;letter-spacing:.1em}
.cs-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(20,16,10,.55);border:2px solid rgba(255,255,255,.85);backdrop-filter:blur(4px)}
.cs-play::after{content:"";position:absolute;left:25px;top:19px;border-style:solid;border-width:13px 0 13px 20px;border-color:transparent transparent transparent #fff}

/* 6 · VIDEO */
.cs-video{position:relative;margin:0;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:var(--cs-surface)}
.cs-video img,.cs-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cs-video figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 14px;background:linear-gradient(transparent,rgba(0,0,0,.7));font:500 14px/1.5 var(--cs-sans);color:#e8e1d6}

/* 7 · CTA */
.cs-cta{max-width:880px;margin:0 auto;padding:88px 16px 96px;text-align:center;display:grid;gap:18px;justify-items:center}
.cs-note{margin:0 0 18px;max-width:62ch;font-size:15px;line-height:1.6;color:var(--cs-muted)}
.cs-cta h3{margin:0;font-size:clamp(28px,4vw,52px);line-height:1.1;text-wrap:balance}
.cs-cta__row{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:center;margin-top:8px}
.cs-btn{display:inline-block;padding:18px 34px;border-radius:999px;background:var(--cream-50);color:var(--ink-900)!important;font:800 16px/1 var(--cs-sans);letter-spacing:.01em;transition:background .25s,box-shadow .25s;will-change:transform;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.cs-btn span{display:inline-block;transition:transform .25s}
.cs-btn:hover{background:var(--brass-300);box-shadow:0 18px 40px rgba(0,0,0,.4);opacity:1!important}
.cs-btn:focus-visible{outline:3px solid var(--cs-accent);outline-offset:4px}
.cs-tel{font:700 15px/1.4 var(--cs-sans);color:var(--cs-accent)!important;text-decoration:underline!important;text-underline-offset:4px}

/* LIGHTBOX */
.cs-lb{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:rgba(12,9,5,.74);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);opacity:0;transition:opacity .35s var(--cs-ease, ease);color:#f3eee6;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.cs-lb[hidden]{display:none}
.cs-lb.is-open{opacity:1}
.cs-lb__stage{position:relative;transform:scale(.96);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.cs-lb.is-open .cs-lb__stage{transform:none}
.cs-lb__stage img{display:block;max-width:92vw;max-height:80vh;border-radius:10px;box-shadow:0 30px 90px rgba(0,0,0,.55);transition:opacity .28s ease}
.cs-lb__stage img.is-swap{opacity:0}
.cs-lb .cs-ph{position:absolute;top:12px;right:12px;background:rgba(160,20,20,.92);color:#fff;font:800 11px/1.2 system-ui,sans-serif;border-radius:999px;padding:4px 10px}
.cs-lb__btn{position:absolute;top:50%;width:54px;height:54px;margin-top:-27px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.cs-lb__btn:hover{background:rgba(255,255,255,.18)}
.cs-lb__prev{left:18px}.cs-lb__next{right:18px}
.cs-lb__bar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:16px;align-items:center;justify-content:center;padding:16px 18px 20px;font-size:14px}
.cs-lb__count{font-weight:700;letter-spacing:.12em;color:#cdb68f}
.cs-lb__close{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:9px 16px;font:600 14px/1 inherit;cursor:pointer}
.cs-lb__close kbd{font:600 11px/1 inherit;opacity:.7;margin-left:6px}
.cs-lb button:focus-visible{outline:3px solid #cdb68f;outline-offset:2px}
@media (max-width:820px){.cs-lb__btn{display:none}.cs-lb__cap{display:none}}
html.cs-lock{overflow:hidden}

/* CURSOR LABEL (desktop fine pointer only) */
.cs-cursor{position:fixed;left:0;top:0;z-index:9500;pointer-events:none;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--cream-50,#f6f2eb);color:#14100a;display:grid;place-items:center;font:800 11px/1 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;opacity:0;scale:.3;transform:translate3d(-200px,-200px,0);transition:opacity .25s,scale .3s cubic-bezier(.16,1,.3,1)}
.cs-cursor.is-on{opacity:.95;scale:1}
@media (hover:none),(pointer:coarse){.cs-cursor{display:none}}

/* MOBILE */
@media (max-width:820px){
  .cs-intro{min-height:520px;height:88svh}
  .cs-intro__copy{padding-bottom:13vh}
  .cs-block{padding-top:56px}
  .cs-film__item{height:clamp(220px,58vw,340px)}
  .cs-film__nav{display:none}
  .cs-cta{padding:64px 16px 72px}
}

/* REDUCED MOTION: everything static and visible */
@media (prefers-reduced-motion:reduce){
  .cs *,.cs *::before,.cs *::after,.cs-lb,.cs-lb *{animation:none!important;transition:none!important}
  .cs-intro__img{transform:none}
  .cs-bar{transform:scaleY(.1)}
  .cs-title .wi{transform:none}
  .cs-reveal{opacity:1;transform:none}
  .cs-intro__media{transform:none!important}
  .cs-ch{opacity:1!important;transform:none!important}
}
/* v2 refinements */
.cs-title{max-width:15ch}
.cs-hs__frame{width:min(100%,calc(78vh * 4 / 3));margin-inline:auto}
.cs-video{width:min(100%,calc(78vh * 16 / 9));margin-inline:auto}
.cs-intro__copy{text-shadow:0 2px 28px rgba(0,0,0,.5)}
.cs-intro::before{background:radial-gradient(ellipse 70% 60% at 22% 72%,rgba(20,16,10,.55),transparent 70%),linear-gradient(180deg,rgba(20,16,10,.15) 0%,rgba(20,16,10,.05) 35%,rgba(20,16,10,.78) 82%,var(--cs-bg) 100%)}

/* ===== v3 additions / overrides ===== */
.cs picture{display:contents}
.cs-ph{display:none!important}

/* STORY v3: chapter blocks are exactly one viewport step; text rises into the vertical centre */
.cs-ch__num span{color:var(--cs-muted);letter-spacing:.12em;font-weight:600}
.cs-dots{display:none}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .cs-story{padding:0 5vw;gap:0 6vw}
  .cs-stage{position:sticky;top:var(--cs-top);height:calc(100vh - var(--cs-top));padding:3.5vh 0}
  .cs-shot.is-portrait{background:#0f0c08}
  .cs-shot.is-portrait::before{content:"";position:absolute;inset:-40px;background:var(--bg) center/cover;filter:blur(28px) brightness(.45) saturate(.8)}
  .cs-shot.is-portrait img{position:relative;object-fit:contain}
  .cs-ch{height:calc(100vh - var(--cs-top));min-height:0;opacity:1!important;display:flex;flex-direction:column;justify-content:center}
  .cs-ch__in{opacity:.14;transform:translateY(64px);transition:opacity .7s var(--cs-ease),transform .9s var(--cs-ease)}
  .cs-ch__in>*{transform:translateY(18px);transition:transform .9s var(--cs-ease)}
  .cs-ch.is-active .cs-ch__in{opacity:1;transform:none}
  .cs-ch.is-active .cs-ch__in>*{transform:none}
  .cs-ch.is-active .cs-ch__in>:nth-child(2){transition-delay:.06s}
  .cs-ch.is-active .cs-ch__in>:nth-child(3){transition-delay:.12s}
  .cs-ch.is-active .cs-ch__in>:nth-child(4){transition-delay:.18s}
  .cs-ch__title{font-size:clamp(28px,2.9vw,46px)}
  .cs-dots{display:flex;flex-direction:column;gap:6px;position:absolute;top:50%;right:-3.6vw;transform:translate(50%,-50%);z-index:5}
  .cs-dots button{position:relative;width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
  .cs-dots button::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(243,238,230,.28);transition:background .3s,transform .3s var(--cs-ease)}
  .cs-dots button[aria-current]::before{background:var(--cs-accent);transform:scale(1.55)}
  .cs-dots button:hover::before{background:var(--cs-fg)}
  .cs-dots button span{position:absolute;right:30px;font:700 11px/1 var(--cs-sans);letter-spacing:.14em;color:var(--cs-muted);opacity:0;transition:opacity .2s}
  .cs-dots button:hover span,.cs-dots button:focus-visible span,.cs-dots button[aria-current] span{opacity:1}
  .cs-dots button[aria-current] span{color:var(--cs-accent)}
  .cs-dots button:focus-visible{outline:2px solid var(--cs-accent);border-radius:50%}
}

/* HOTSPOTS v3: zoom-to-detail */
.cs-hs{position:relative}
.cs-hs__frame{position:relative;overflow:hidden;border-radius:16px;isolation:isolate}
.cs-hs__zoom{position:absolute;inset:0;transform-origin:var(--ox,50%) var(--oy,50%);transform:scale(1);transition:transform 1.05s cubic-bezier(.65,0,.25,1),filter .6s;will-change:transform}
.cs-hs__zoom img{width:100%;height:100%;object-fit:cover;display:block}
.cs-hs__alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--ax,50%) var(--ay,50%);opacity:0;transform-origin:var(--ax,50%) var(--ay,50%);transform:scale(1.06);transition:opacity .7s ease .35s,transform 1.4s var(--cs-ease) .35s;z-index:1;pointer-events:none}
.cs-hs__alt.is-on{opacity:1;transform:scale(var(--az,1.2))}
.cs-hs__veil{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(circle at var(--vx,50%) var(--vy,50%),transparent 0,transparent 15%,rgba(12,9,5,.62) 38%,rgba(12,9,5,.8) 100%);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  -webkit-mask:radial-gradient(circle at var(--vx,50%) var(--vy,50%),transparent 0,transparent 14%,#000 34%);mask:radial-gradient(circle at var(--vx,50%) var(--vy,50%),transparent 0,transparent 14%,#000 34%)}
.cs-hs.is-alt .cs-hs__veil{--vx:50%;--vy:50%;background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(12,9,5,.55) 100%);-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask:none;mask:none}
.cs-hs.is-zoom .cs-hs__veil{opacity:1}
.cs-hs.is-zoom .cs-dot{opacity:0;pointer-events:none;transform:scale(.6)}
.cs-dot{transition:background .2s,transform .3s,opacity .3s}
.cs-hs.is-zoom .cs-hs__frame{cursor:zoom-out}
.cs-card{position:absolute;z-index:6;top:50%;width:min(320px,42%);transform:translateY(-50%);left:auto;right:24px;opacity:0;transition:opacity .45s ease .45s,transform .6s var(--cs-ease) .45s}
.cs-card.is-left{left:24px;right:auto;transform:translateY(-50%)}
.cs-card.is-in{opacity:1}
.cs-card__count{margin:0 0 6px;font:700 11px/1 var(--cs-sans);letter-spacing:.18em;color:#8a7a62}
.cs-card__count b{color:var(--brown-600)}
.cs-card strong{margin:0 0 6px}
.cs-card__d{margin:0;font-size:14.5px;line-height:1.55;color:#3a3127}
.cs-card__nav{display:flex;gap:8px;margin-top:14px;align-items:center}
.cs-card__nav button{height:36px;min-width:36px;border-radius:999px;border:1px solid rgba(20,16,10,.18);background:#fff;color:var(--ink-900);font:700 18px/1 var(--cs-sans);cursor:pointer;padding:0 10px}
.cs-card__nav button:hover{background:#efe8dc}
.cs-card__nav .cs-card__back{margin-left:auto;font-size:13px}
.cs-card__back kbd{font:600 10px/1 var(--cs-sans);opacity:.6;margin-left:4px}
.cs-card button:focus-visible{outline:3px solid var(--brown-600);outline-offset:2px}
.cs-card__x{display:none}
@media (max-width:700px){
  .cs-card,.cs-card.is-left{position:relative;top:auto;left:auto;right:auto;transform:none;width:auto;margin-top:12px}
  .cs-card__back kbd{display:none}
}

/* COMPARE v3: same-viewpoint portrait pair + copy column */
.cs-cmp-copy{display:grid;gap:10px;align-content:center}
.cs-cmp-copy h3{margin:0;font-size:clamp(24px,3vw,38px);line-height:1.15}
.cs-cmp-copy p{margin:0;max-width:44ch;font-size:16.5px;line-height:1.65;color:#e1d9cc}
.cs-cmp-copy .cs-cmp-note{font-size:13px;line-height:1.5;color:var(--cs-muted);border-left:2px solid var(--cs-accent);padding-left:12px}

/* FILMSTRIP: no video item any more */
.cs-film__item{height:clamp(240px,54vh,500px)}

/* CTA v3: full-bleed moody band with the slow video loop behind */
.cs-cta{position:relative;z-index:0;isolation:isolate;max-width:none;margin:72px 0 0;padding:clamp(96px,16vh,170px) 16px;overflow:hidden;display:block}
.cs-cta__bg{position:absolute;inset:0;z-index:-1;background:#120e09}
.cs-cta__bg img,.cs-cta__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(1.55)}
.cs-cta__bg video{opacity:0;transition:opacity 1.6s ease}
.cs-cta__bg video.is-on{opacity:1}
.cs-cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--cs-bg) 0%,rgba(20,16,10,.48) 20%,rgba(20,16,10,.3) 50%,rgba(20,16,10,.5) 80%,var(--cs-bg) 100%),radial-gradient(ellipse 55% 60% at 50% 50%,rgba(20,16,10,.38),rgba(20,16,10,.1) 70%,rgba(20,16,10,.45))}
.cs-cta__in{max-width:880px;margin:0 auto;text-align:center;display:grid;gap:18px;justify-items:center;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.cs-cta .cs-note{color:#d9cfbf}
@media (max-width:820px){.cs-cta{padding:84px 16px 92px;margin-top:56px}}
@media (prefers-reduced-motion:reduce){.cs-hs__zoom,.cs-hs__alt,.cs-card,.cs-hs__veil{transition:none!important}}

/* compare line moved with transform (no layout shift) */

/* ===== v4 ===== */
/* story: soft eased crossfade + gentle scale settle instead of the bottom-to-top wipe */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .cs-shot{clip-path:none!important;opacity:0;z-index:0;transition:opacity 1.15s cubic-bezier(.45,0,.2,1)}
  .cs-shot img{transform:scale(1.045);transition:transform 1.9s cubic-bezier(.22,1,.36,1)}
  .cs-shot.is-prev{opacity:1;z-index:1;transition:opacity 0s .02s}
  .cs-shot.is-active{opacity:1;z-index:2}
  .cs-shot.is-active img{transform:scale(1)}
  .cs-shot.is-active.is-portrait img,.cs-shot.is-portrait img{transform-origin:50% 50%}
}
/* cursor label: small, low-key pill next to the pointer */
.cs-cursor{width:auto;height:auto;margin:16px 0 0 14px;padding:6px 10px;border-radius:999px;display:block;background:rgba(246,242,235,.86);color:#2a2219;font:600 11.5px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:.04em;text-transform:none;box-shadow:0 4px 14px rgba(0,0,0,.22);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);scale:.85}
.cs-cursor.is-on{opacity:.92;scale:1}
/* mobile intro: photo fills, title sits on the photo, no dead band */
@media (max-width:820px){
  .cs-intro{height:auto;min-height:0;max-height:none;aspect-ratio:auto;display:grid;grid-template-rows:1fr;align-items:end;min-height:min(78svh,640px)}
  .cs-bar{display:none}
  .cs-intro::before{background:linear-gradient(180deg,rgba(20,16,10,0) 0%,rgba(20,16,10,0) 38%,rgba(20,16,10,.55) 66%,rgba(20,16,10,.9) 90%,var(--cs-bg) 100%)}
  .cs-intro__img{object-position:58% 40%}
  .cs-intro__copy{padding:0 18px 34px;gap:12px}
  .cs-title{font-size:clamp(36px,10.4vw,48px)}
  .cs-lead{font-size:15.5px;line-height:1.55}
  .cs-cue{display:none}
}

/* root cause of the mobile gap: the site rule .aggl img{height:auto} out-ranked .cs-intro__img, so the hero photo stopped at its natural height */
.cs .cs-intro__img{height:100%}
.cs-cta__bg::after{background:linear-gradient(180deg,var(--cs-bg) 0%,rgba(20,16,10,.35) 16%,rgba(20,16,10,.12) 50%,rgba(20,16,10,.35) 84%,var(--cs-bg) 100%),radial-gradient(ellipse 42% 46% at 50% 56%,rgba(20,16,10,.42),rgba(20,16,10,0) 75%)}
.cs-cta__in{text-shadow:0 2px 18px rgba(12,9,5,.75)}

/* ===== v5: CTA band = hero photo 153427, different focus than the intro (wall units + L corner), slow scale-only zoom ===== */
.cs-cta__bg picture{display:contents}
.cs .cs-cta__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:74% 32%;transform-origin:84% 34%;transform:scale(1.18);filter:saturate(.82) brightness(.78) contrast(1.04);animation:csCtaZoom 26s cubic-bezier(.45,0,.55,1) infinite alternate;animation-play-state:paused;will-change:transform}
.cs-cta.is-in .cs-cta__img{animation-play-state:running}
@keyframes csCtaZoom{from{transform:scale(1.18)}to{transform:scale(1.32)}}
.cs-cta__bg::after{background:linear-gradient(180deg,var(--cs-bg) 0%,rgba(20,16,10,.62) 18%,rgba(20,16,10,.5) 50%,rgba(20,16,10,.66) 82%,var(--cs-bg) 100%),radial-gradient(ellipse 50% 55% at 50% 52%,rgba(20,16,10,.5),rgba(20,16,10,0) 78%)}
@media (max-width:820px){.cs .cs-cta__img{object-position:80% 30%;transform-origin:80% 30%}}
@media (prefers-reduced-motion:reduce){.cs .cs-cta__img{animation:none;transform:scale(1.18)}}

/* ===== v6: two real photos side by side (no slider) ===== */
.cs-pair-wrap{display:grid;gap:22px}
.cs-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cs-pair__item{position:relative;display:block;margin:0;padding:0;border:0;background:var(--cs-surface,#1d1812);border-radius:14px;overflow:hidden;aspect-ratio:3/4;cursor:zoom-in;color:inherit}
.cs-pair__item picture{display:contents}
.cs .cs-pair__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%;transition:transform 1.1s cubic-bezier(.22,1,.36,1),filter .6s ease}
.cs .cs-pair__item--open img{transform-origin:57% 52%;transform:scale(1.06)}
.cs .cs-pair__item--closed img{transform-origin:50% 52%;transform:scale(1)}
.cs-pair__tag{position:absolute;top:12px;left:12px;z-index:2;padding:5px 10px;border-radius:999px;background:rgba(20,16,10,.62);color:#f3ede3;font:600 11.5px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cs-pair__item:focus-visible{outline:3px solid var(--cs-accent,#c9a46a);outline-offset:3px}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .cs-pair__item:hover img{filter:brightness(1.08)}
  .cs .cs-pair__item--closed:hover img{transform:scale(1.04)}
  .cs .cs-pair__item--open:hover img{transform:scale(1.1)}
}
@media (min-width:900px){.cs-pair-wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:5vw;align-items:center}.cs-pair{width:min(100%,calc(78vh * 1.5 + 14px));justify-self:end}}
@media (max-width:899px){
  .cs-pair{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:0;padding-bottom:6px;scrollbar-width:none;overscroll-behavior-x:contain}
  .cs-pair::-webkit-scrollbar{display:none}
  .cs-pair__item{scroll-snap-align:start}
}

/* ===== v3 additions / overrides ===== */
.cs picture{display:contents}
.cs-ph{display:none!important}

/* STORY v3: chapter blocks are exactly one viewport step; text rises into the vertical centre */
.cs-ch__num span{color:var(--cs-muted);letter-spacing:.12em;font-weight:600}
.cs-dots{display:none}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .cs-story{padding:0 5vw;gap:0 6vw}
  .cs-stage{position:sticky;top:var(--cs-top);height:calc(100vh - var(--cs-top));padding:3.5vh 0}
  .cs-shot.is-portrait{background:#0f0c08}
  .cs-shot.is-portrait::before{content:"";position:absolute;inset:-40px;background:var(--bg) center/cover;filter:blur(28px) brightness(.45) saturate(.8)}
  .cs-shot.is-portrait img{position:relative;object-fit:contain}
  .cs-ch{height:calc(100vh - var(--cs-top));min-height:0;opacity:1!important;display:flex;flex-direction:column;justify-content:center}
  .cs-ch__in{opacity:.14;transform:translateY(64px);transition:opacity .7s var(--cs-ease),transform .9s var(--cs-ease)}
  .cs-ch__in>*{transform:translateY(18px);transition:transform .9s var(--cs-ease)}
  .cs-ch.is-active .cs-ch__in{opacity:1;transform:none}
  .cs-ch.is-active .cs-ch__in>*{transform:none}
  .cs-ch.is-active .cs-ch__in>:nth-child(2){transition-delay:.06s}
  .cs-ch.is-active .cs-ch__in>:nth-child(3){transition-delay:.12s}
  .cs-ch.is-active .cs-ch__in>:nth-child(4){transition-delay:.18s}
  .cs-ch__title{font-size:clamp(28px,2.9vw,46px)}
  .cs-dots{display:flex;flex-direction:column;gap:6px;position:absolute;top:50%;right:-3.6vw;transform:translate(50%,-50%);z-index:5}
  .cs-dots button{position:relative;width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
  .cs-dots button::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(243,238,230,.28);transition:background .3s,transform .3s var(--cs-ease)}
  .cs-dots button[aria-current]::before{background:var(--cs-accent);transform:scale(1.55)}
  .cs-dots button:hover::before{background:var(--cs-fg)}
  .cs-dots button span{position:absolute;right:30px;font:700 11px/1 var(--cs-sans);letter-spacing:.14em;color:var(--cs-muted);opacity:0;transition:opacity .2s}
  .cs-dots button:hover span,.cs-dots button:focus-visible span,.cs-dots button[aria-current] span{opacity:1}
  .cs-dots button[aria-current] span{color:var(--cs-accent)}
  .cs-dots button:focus-visible{outline:2px solid var(--cs-accent);border-radius:50%}
}

/* HOTSPOTS v3: zoom-to-detail */
.cs-hs{position:relative}
.cs-hs__frame{position:relative;overflow:hidden;border-radius:16px;isolation:isolate}
.cs-hs__zoom{position:absolute;inset:0;transform-origin:var(--ox,50%) var(--oy,50%);transform:scale(1);transition:transform 1.05s cubic-bezier(.65,0,.25,1),filter .6s;will-change:transform}
.cs-hs__zoom img{width:100%;height:100%;object-fit:cover;display:block}
.cs-hs__alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--ax,50%) var(--ay,50%);opacity:0;transform-origin:var(--ax,50%) var(--ay,50%);transform:scale(1.06);transition:opacity .7s ease .35s,transform 1.4s var(--cs-ease) .35s;z-index:1;pointer-events:none}
.cs-hs__alt.is-on{opacity:1;transform:scale(var(--az,1.2))}
.cs-hs__veil{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(circle at var(--vx,50%) var(--vy,50%),transparent 0,transparent 15%,rgba(12,9,5,.62) 38%,rgba(12,9,5,.8) 100%);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  -webkit-mask:radial-gradient(circle at var(--vx,50%) var(--vy,50%),transparent 0,transparent 14%,#000 34%);mask:radial-gradient(circle at var(--vx,50%) var(--vy,50%),transparent 0,transparent 14%,#000 34%)}
.cs-hs.is-alt .cs-hs__veil{--vx:50%;--vy:50%;background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(12,9,5,.55) 100%);-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask:none;mask:none}
.cs-hs.is-zoom .cs-hs__veil{opacity:1}
.cs-hs.is-zoom .cs-dot{opacity:0;pointer-events:none;transform:scale(.6)}
.cs-dot{transition:background .2s,transform .3s,opacity .3s}
.cs-hs.is-zoom .cs-hs__frame{cursor:zoom-out}
.cs-card{position:absolute;z-index:6;top:50%;width:min(320px,42%);transform:translateY(-50%);left:auto;right:24px;opacity:0;transition:opacity .45s ease .45s,transform .6s var(--cs-ease) .45s}
.cs-card.is-left{left:24px;right:auto;transform:translateY(-50%)}
.cs-card.is-in{opacity:1}
.cs-card__count{margin:0 0 6px;font:700 11px/1 var(--cs-sans);letter-spacing:.18em;color:#8a7a62}
.cs-card__count b{color:var(--brown-600)}
.cs-card strong{margin:0 0 6px}
.cs-card__d{margin:0;font-size:14.5px;line-height:1.55;color:#3a3127}
.cs-card__nav{display:flex;gap:8px;margin-top:14px;align-items:center}
.cs-card__nav button{height:36px;min-width:36px;border-radius:999px;border:1px solid rgba(20,16,10,.18);background:#fff;color:var(--ink-900);font:700 18px/1 var(--cs-sans);cursor:pointer;padding:0 10px}
.cs-card__nav button:hover{background:#efe8dc}
.cs-card__nav .cs-card__back{margin-left:auto;font-size:13px}
.cs-card__back kbd{font:600 10px/1 var(--cs-sans);opacity:.6;margin-left:4px}
.cs-card button:focus-visible{outline:3px solid var(--brown-600);outline-offset:2px}
.cs-card__x{display:none}
@media (max-width:700px){
  .cs-card,.cs-card.is-left{position:relative;top:auto;left:auto;right:auto;transform:none;width:auto;margin-top:12px}
  .cs-card__back kbd{display:none}
}

/* COMPARE v3: same-viewpoint portrait pair + copy column */
.cs-cmp-copy{display:grid;gap:10px;align-content:center}
.cs-cmp-copy h3{margin:0;font-size:clamp(24px,3vw,38px);line-height:1.15}
.cs-cmp-copy p{margin:0;max-width:44ch;font-size:16.5px;line-height:1.65;color:#e1d9cc}
.cs-cmp-copy .cs-cmp-note{font-size:13px;line-height:1.5;color:var(--cs-muted);border-left:2px solid var(--cs-accent);padding-left:12px}

/* FILMSTRIP: no video item any more */
.cs-film__item{height:clamp(240px,54vh,500px)}

/* CTA v3: full-bleed moody band with the slow video loop behind */
.cs-cta{position:relative;z-index:0;isolation:isolate;max-width:none;margin:72px 0 0;padding:clamp(96px,16vh,170px) 16px;overflow:hidden;display:block}
.cs-cta__bg{position:absolute;inset:0;z-index:-1;background:#120e09}
.cs-cta__bg img,.cs-cta__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(1.55)}
.cs-cta__bg video{opacity:0;transition:opacity 1.6s ease}
.cs-cta__bg video.is-on{opacity:1}
.cs-cta__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--cs-bg) 0%,rgba(20,16,10,.48) 20%,rgba(20,16,10,.3) 50%,rgba(20,16,10,.5) 80%,var(--cs-bg) 100%),radial-gradient(ellipse 55% 60% at 50% 50%,rgba(20,16,10,.38),rgba(20,16,10,.1) 70%,rgba(20,16,10,.45))}
.cs-cta__in{max-width:880px;margin:0 auto;text-align:center;display:grid;gap:18px;justify-items:center;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.cs-cta .cs-note{color:#d9cfbf}
@media (max-width:820px){.cs-cta{padding:84px 16px 92px;margin-top:56px}}
@media (prefers-reduced-motion:reduce){.cs-hs__zoom,.cs-hs__alt,.cs-card,.cs-hs__veil{transition:none!important}}

/* compare line moved with transform (no layout shift) */

/* ===== v4 ===== */
/* story: soft eased crossfade + gentle scale settle instead of the bottom-to-top wipe */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .cs-shot{clip-path:none!important;opacity:0;z-index:0;transition:opacity 1.15s cubic-bezier(.45,0,.2,1)}
  .cs-shot img{transform:scale(1.045);transition:transform 1.9s cubic-bezier(.22,1,.36,1)}
  .cs-shot.is-prev{opacity:1;z-index:1;transition:opacity 0s .02s}
  .cs-shot.is-active{opacity:1;z-index:2}
  .cs-shot.is-active img{transform:scale(1)}
  .cs-shot.is-active.is-portrait img,.cs-shot.is-portrait img{transform-origin:50% 50%}
}
/* cursor label: small, low-key pill next to the pointer */
.cs-cursor{width:auto;height:auto;margin:16px 0 0 14px;padding:6px 10px;border-radius:999px;display:block;background:rgba(246,242,235,.86);color:#2a2219;font:600 11.5px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:.04em;text-transform:none;box-shadow:0 4px 14px rgba(0,0,0,.22);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);scale:.85}
.cs-cursor.is-on{opacity:.92;scale:1}
/* mobile intro: photo fills, title sits on the photo, no dead band */
@media (max-width:820px){
  .cs-intro{height:auto;min-height:0;max-height:none;aspect-ratio:auto;display:grid;grid-template-rows:1fr;align-items:end;min-height:min(78svh,640px)}
  .cs-bar{display:none}
  .cs-intro::before{background:linear-gradient(180deg,rgba(20,16,10,0) 0%,rgba(20,16,10,0) 38%,rgba(20,16,10,.55) 66%,rgba(20,16,10,.9) 90%,var(--cs-bg) 100%)}
  .cs-intro__img{object-position:58% 40%}
  .cs-intro__copy{padding:0 18px 34px;gap:12px}
  .cs-title{font-size:clamp(36px,10.4vw,48px)}
  .cs-lead{font-size:15.5px;line-height:1.55}
  .cs-cue{display:none}
}

/* root cause of the mobile gap: the site rule .aggl img{height:auto} out-ranked .cs-intro__img, so the hero photo stopped at its natural height */
.cs .cs-intro__img{height:100%}
.cs-cta__bg::after{background:linear-gradient(180deg,var(--cs-bg) 0%,rgba(20,16,10,.35) 16%,rgba(20,16,10,.12) 50%,rgba(20,16,10,.35) 84%,var(--cs-bg) 100%),radial-gradient(ellipse 42% 46% at 50% 56%,rgba(20,16,10,.42),rgba(20,16,10,0) 75%)}
.cs-cta__in{text-shadow:0 2px 18px rgba(12,9,5,.75)}

/* ===== v5: CTA band = hero photo 153427, different focus than the intro (wall units + L corner), slow scale-only zoom ===== */
.cs-cta__bg picture{display:contents}
.cs .cs-cta__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:74% 32%;transform-origin:84% 34%;transform:scale(1.18);filter:saturate(.82) brightness(.78) contrast(1.04);animation:csCtaZoom 26s cubic-bezier(.45,0,.55,1) infinite alternate;animation-play-state:paused;will-change:transform}
.cs-cta.is-in .cs-cta__img{animation-play-state:running}
@keyframes csCtaZoom{from{transform:scale(1.18)}to{transform:scale(1.32)}}
.cs-cta__bg::after{background:linear-gradient(180deg,var(--cs-bg) 0%,rgba(20,16,10,.62) 18%,rgba(20,16,10,.5) 50%,rgba(20,16,10,.66) 82%,var(--cs-bg) 100%),radial-gradient(ellipse 50% 55% at 50% 52%,rgba(20,16,10,.5),rgba(20,16,10,0) 78%)}
@media (max-width:820px){.cs .cs-cta__img{object-position:80% 30%;transform-origin:80% 30%}}
@media (prefers-reduced-motion:reduce){.cs .cs-cta__img{animation:none;transform:scale(1.18)}}

/* ===== v6: two real photos side by side (no slider) ===== */
.cs-pair-wrap{display:grid;gap:22px}
.cs-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cs-pair__item{position:relative;display:block;margin:0;padding:0;border:0;background:var(--cs-surface,#1d1812);border-radius:14px;overflow:hidden;aspect-ratio:3/4;cursor:zoom-in;color:inherit}
.cs-pair__item picture{display:contents}
.cs .cs-pair__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 52%;transition:transform 1.1s cubic-bezier(.22,1,.36,1),filter .6s ease}
.cs .cs-pair__item--open img{transform-origin:57% 52%;transform:scale(1.06)}
.cs .cs-pair__item--closed img{transform-origin:50% 52%;transform:scale(1)}
.cs-pair__tag{position:absolute;top:12px;left:12px;z-index:2;padding:5px 10px;border-radius:999px;background:rgba(20,16,10,.62);color:#f3ede3;font:600 11.5px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cs-pair__item:focus-visible{outline:3px solid var(--cs-accent,#c9a46a);outline-offset:3px}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .cs-pair__item:hover img{filter:brightness(1.08)}
  .cs .cs-pair__item--closed:hover img{transform:scale(1.04)}
  .cs .cs-pair__item--open:hover img{transform:scale(1.1)}
}
@media (min-width:900px){.cs-pair-wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:5vw;align-items:center}.cs-pair{width:min(100%,calc(78vh * 1.5 + 14px));justify-self:end}}
@media (max-width:899px){
  .cs-pair{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:0;padding-bottom:6px;scrollbar-width:none;overscroll-behavior-x:contain}
  .cs-pair::-webkit-scrollbar{display:none}
  .cs-pair__item{scroll-snap-align:start}
}