/* #stack – B04 value cards (markup + motion in sec-stack.js).
   Base = the sticky deck (phones, tablets, no GSAP). .stack--pin = desktop pinned stack. Reduced motion = a plain list. */
.stack{--ch:min(720px,calc(100vh - var(--nav) - 64px));--ch:min(720px,calc(100svh - var(--nav) - 64px));position:relative;padding:110px 0 0;overflow-x:clip}
.stack--wait{min-height:80vh}
.stack__deck{list-style:none;position:relative;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.scard{--shade:0;position:sticky;top:calc(var(--nav) + 14px + var(--i) * 14px);height:var(--ch);margin:0 0 6vh}
.scard:last-child{margin-bottom:0}
.stack__nav{display:none}

/* ---------- the card ---------- */
.scard__in{--px:0;--py:0;position:relative;height:100%;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);border-radius:34px;overflow:hidden;isolation:isolate;
  background:radial-gradient(70% 90% at 88% 8%,rgba(245,132,31,.16),transparent 62%),radial-gradient(60% 80% at 6% 96%,rgba(47,123,224,.14),transparent 62%),var(--bg3) var(--bgd,none) center/cover no-repeat;box-shadow:0 60px 110px -50px rgba(var(--ink-rgb),.32),0 0 0 1px var(--line)}
.scard__in::before{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(var(--ink-rgb),.14),rgba(var(--ink-rgb),.04) 30%,transparent 55%,rgba(47,123,224,.2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.scard__in::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;background:var(--bg);opacity:var(--shade)}   /* the covered card fades toward the page (light tint, not a dark shade) */
.scard--1 .scard__in{--bgd:url(../media/stack-c1-d.webp?v=1791553652)}
.scard--2 .scard__in{--bgd:url(../media/stack-c2-d.webp?v=1791553652)}
.scard--3 .scard__in{--bgd:url(../media/stack-c3-d.webp?v=1791553652)}

.scard__copy{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-width:0;padding:clamp(26px,5vh,60px) clamp(26px,3.4vw,58px)}
.scard__k{display:flex;align-items:center;gap:10px;margin:0 0 clamp(12px,2.4vh,24px);font:700 12px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.scard__n{font-size:13px;color:var(--orange2);letter-spacing:.06em}
.scard__of{letter-spacing:.06em}
.scard__tag{display:inline-flex;align-items:center;gap:8px;color:var(--text)}
.scard__tag::before{content:"";width:18px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--orange),var(--blue2))}
.scard__h{font-size:clamp(34px,min(4.1vw,6.6vh),64px);font-weight:800;line-height:1.02;letter-spacing:-.035em;max-width:11ch;text-wrap:balance}
.scard__h .grad{display:inline;background:linear-gradient(92deg,var(--orange2),var(--orange3) 40%,var(--blue2));-webkit-background-clip:text;background-clip:text;color:transparent}
.scard__fact{display:flex;align-items:flex-end;flex-wrap:wrap;gap:6px 14px;margin-top:clamp(16px,3.2vh,34px)}
.scard__fact b{font-size:clamp(46px,min(5.2vw,8.4vh),88px);font-weight:800;line-height:.86;letter-spacing:-.05em;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,var(--text),#3b4f78);-webkit-background-clip:text;background-clip:text;color:transparent}
.scard__fact>span{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-bottom:4px;font-size:15px;line-height:1.35;color:var(--muted);max-width:20ch}
.scard__p{margin-top:clamp(12px,2.2vh,22px);font-size:clamp(15px,1.12vw,17px);line-height:1.6;color:var(--muted);max-width:40ch}
.scard__list{list-style:none;display:grid;gap:clamp(8px,1.4vh,12px);margin:clamp(16px,3vh,30px) 0 0;padding:0;max-width:40ch}
.scard__list li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;align-items:center;font-size:clamp(15px,1.12vw,17px);line-height:1.4;color:var(--text)}
.scard__ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(var(--ink-rgb),.06);box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.1)}
.scard__ic svg{width:19px;height:19px;fill:none;stroke:var(--orange2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.scard__go{position:relative;display:inline-flex;align-items:center;gap:12px;margin-top:clamp(18px,3.4vh,34px);padding:8px 8px 8px 20px;border-radius:999px;font-weight:700;font-size:15px;color:var(--text);
  background:rgba(var(--bg-rgb),.72);box-shadow:inset 0 0 0 1px var(--line2);transition:background .3s,box-shadow .3s}
.scard__go i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-style:normal;background:var(--orange);color:#1b0d00;transition:transform .35s var(--ease)}
.scard__go:hover{background:rgba(var(--bg-rgb),.96);box-shadow:inset 0 0 0 1px rgba(245,132,31,.6)}
.scard__go:hover i{transform:rotate(-45deg)}

/* ---------- collage ---------- */
.scard__art{position:relative;z-index:2;min-width:0;pointer-events:none}
.pc{position:absolute;left:var(--l);top:var(--t);width:var(--w,auto);rotate:var(--r,0deg);
  translate:calc(var(--px) * var(--d,1) * 11px) calc(var(--py) * var(--d,1) * 8px);transition:translate .8s var(--ease)}
.pc__img{display:block;width:100%;height:auto;-webkit-user-drag:none}
.pc--still .pc__img{filter:drop-shadow(0 30px 40px rgba(var(--ink-rgb),.22)) drop-shadow(0 0 1px rgba(var(--ink-rgb),.18))}
.pc--cut .pc__img{filter:drop-shadow(0 26px 30px rgba(var(--ink-rgb),.22))}
.pc--chip{z-index:3;width:max-content}
.pc--map{z-index:0;inset:auto;height:100%;-webkit-mask:radial-gradient(56% 62% at 44% 46%,#000 30%,transparent 100%);mask:radial-gradient(56% 62% at 44% 46%,#000 30%,transparent 100%)}
.smap{display:block;width:100%;height:100%}
.scard__ring{position:absolute;left:52%;top:46%;width:min(520px,82%);aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(47,123,224,.09),rgba(47,123,224,.03) 45%,transparent 66%);box-shadow:inset 0 0 0 1px rgba(47,123,224,.16)}
.scard__ring::after{content:"";position:absolute;inset:16%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(47,123,224,.12)}

/* chips */
.schip{display:inline-flex;align-items:center;gap:9px;padding:9px 14px 9px 10px;border-radius:999px;white-space:nowrap;background:rgba(var(--bg-rgb),.94);border:1px solid var(--line2);
  box-shadow:0 20px 44px -18px rgba(var(--ink-rgb),.25);font:600 13px/1 Inter,sans-serif;color:var(--text)}
.schip code{padding:0;background:none;font:700 13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--orange2)}
.schip__bm{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(var(--ink-rgb),.07);color:var(--text);flex:none;overflow:hidden}
.schip__svg{display:block;width:13px;height:13px}
.schip__bn{padding:5px 8px;border-radius:999px;background:rgba(var(--ink-rgb),.07);font:700 10.5px/1 Inter,sans-serif;letter-spacing:.02em;color:var(--text)}
.schip__dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(16,138,72,.16);flex:none}
.schip__k{font:700 10.5px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.schip--tier{padding:7px 14px 7px 7px}.schip--tier>span:last-child{color:var(--muted)}
.schip--roll{padding:12px 18px 12px 14px;font-size:14px}
.schip--roll code{font-size:16px}
.schip .roll{position:relative;display:inline-block;height:1.3em;line-height:1.3em;overflow:hidden;min-width:8.6em}
.schip .roll code{position:absolute;left:0;top:0;line-height:1.3em;transition:transform .55s var(--ease),opacity .45s}
.schip .roll code.out{transform:translateY(-110%);opacity:0}.schip .roll code.in{transform:translateY(110%);opacity:0}
.schip__ic{display:grid;place-items:center;width:22px;height:22px}.schip__ic svg{width:17px;height:17px;fill:none;stroke:var(--orange2);stroke-width:1.9;stroke-linecap:round}
.stack.is-vis .schip{animation:sbob 7s ease-in-out infinite var(--dl,0s)}
html.user-idle .stack .schip,html.user-idle .spin__dot::before,html.user-idle .spin__dot::after{animation-play-state:paused}
@keyframes sbob{50%{transform:translateY(-9px)}}

/* Vienna pin on the map crop */
.spin{position:absolute;left:-999px;top:0;width:0;height:0;opacity:0;transition:opacity .5s}
.spin.is-on{opacity:1}
.spin__dot{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(245,132,31,.35)}
.spin__dot::before,.spin__dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid rgba(245,132,31,.7);opacity:0;animation:sring 2.6s cubic-bezier(.2,.6,.3,1) infinite}
.spin__dot::after{animation-delay:1.3s}
@keyframes sring{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.4);opacity:0}}
.spin__pill{position:absolute;left:18px;top:-19px;display:flex;flex-direction:column;gap:3px;padding:8px 13px;border-radius:14px;white-space:nowrap;background:rgba(var(--bg-rgb),.94);border:1px solid rgba(245,132,31,.45);box-shadow:0 18px 40px -16px rgba(var(--ink-rgb),.22)}
.spin__pill b{font-size:14px;line-height:1;color:var(--text)}.spin__pill small{font-size:11.5px;line-height:1;color:var(--muted)}

/* ---------- compose (sticky deck): pieces come in from their offsets on our "lift" curve ---------- */
.stack--deck .pc{transform:translate(calc(var(--fx) * 1%),calc(var(--fy) * 1%)) rotate(calc(var(--fr) * 1deg)) scale(.86);opacity:0;
  transition:transform 1.1s cubic-bezier(.3,.9,.4,1.35) var(--cd,0s),opacity .5s var(--cd,0s),translate .8s var(--ease)}
.stack--deck .scard.is-on .pc{transform:none;opacity:1}
.stack--deck .pc:nth-child(2){--cd:.07s}.stack--deck .pc:nth-child(3){--cd:.14s}.stack--deck .pc:nth-child(4){--cd:.21s}.stack--deck .pc:nth-child(5){--cd:.28s}.stack--deck .pc:nth-child(6){--cd:.35s}.stack--deck .pc:nth-child(n+7){--cd:.42s}
.stack--deck .pc--map{transform:none;transition:opacity 1s,translate .8s var(--ease)}
/* scroll-driven deck (phones/tablets, where supported): the incoming card's collage assembles with the scroll, the covered
   card shrinks to .94 and fades toward the page (transform / opacity only; the ranges come from each card's own view timeline) */
@supports (animation-timeline:view()) and (timeline-scope:--a){
  @media (prefers-reduced-motion:no-preference){
    .stack--deck .stack__deck{timeline-scope:--sc1,--sc2}
    .stack--deck .scard--1{view-timeline:--sc1}
    .stack--deck .scard--2{view-timeline:--sc2}
    .stack--deck .pc,.stack--deck .scard.is-on .pc{transform:none;opacity:1;transition:translate .8s var(--ease)}
    .stack--deck .scard--1 .pc{animation:spc-in linear both;animation-timeline:--sc1;animation-range:entry 10% entry 90%}
    .stack--deck .scard--2 .pc{animation:spc-in linear both;animation-timeline:--sc2;animation-range:entry 20% entry 100%}
    .stack--deck .scard .pc:nth-child(2){animation-range:entry 18% entry 94%}.stack--deck .scard .pc:nth-child(3){animation-range:entry 26% entry 97%}
    .stack--deck .scard .pc:nth-child(n+4){animation-range:entry 34% entry 100%}
    .stack--deck .scard--1 .scard__in{transform-origin:50% 0;animation:scard-cover linear both;animation-timeline:--sc2;animation-range:entry 0% entry 100%}
    .stack--deck .scard--1 .scard__in::after{animation:scard-shade linear both;animation-timeline:--sc2;animation-range:entry 0% entry 100%}
  }
}
@keyframes spc-in{from{transform:translate(calc(var(--fx) * 1%),calc(var(--fy) * 1%)) rotate(calc(var(--fr) * 1deg)) scale(.86);opacity:0}to{transform:none;opacity:1}}
@keyframes scard-cover{to{transform:scale(.94)}}
@keyframes scard-shade{from{opacity:0}to{opacity:.55}}

/* ---------- pinned stack (desktop, sec-stack.js) ---------- */
.stack--pin{--ch:clamp(470px,min(80vh,calc(100vh - var(--nav) - 128px)),760px);height:100vh;height:100svh;padding:0}
.stack--pin .stack__deck{height:100%}
.stack--pin .scard{position:absolute;left:var(--gut);right:var(--gut);top:calc(var(--nav) + 26px);margin:0}.stack--pin.is-vis .scard{will-change:transform}
.stack--pin.is-vis .pc,.stack--pin.is-vis .scard__in{will-change:transform}   /* the ~20 collage layers exist only while the scene is on screen (sec-stack.js toggles .is-vis) */
.stack--pin .scard__in{transform:perspective(1600px) rotateX(calc(var(--py) * -1.4deg)) rotateY(calc(var(--px) * 1.8deg));transition:transform .9s var(--ease)}
.stack--pin .stack__nav{position:absolute;left:50%;bottom:clamp(14px,2.6vh,26px);z-index:10;display:flex;gap:6px;translate:-50% 0}
.stack__nav button{display:flex;flex-direction:column;gap:7px;width:132px;padding:6px 4px;border:0;background:none;text-align:left;color:var(--dim);font:700 11px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;transition:color .3s}
.stack__nav button i{position:relative;display:block;width:100%;height:3px;border-radius:3px;background:rgba(var(--ink-rgb),.12);overflow:hidden}
.stack__nav button b{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--orange),var(--blue2))}
.stack__nav button.is-on,.stack__nav button:hover{color:var(--text)}

/* tablets: a shorter card keeps the two columns balanced */
@media (min-width:761px) and (max-width:1024px){.stack{--ch:min(620px,calc(100svh - var(--nav) - 64px))}}

/* ---------- phones ---------- */
@media (max-width:760px){
  .stack{--ch:min(700px,calc(100svh - var(--nav) - 60px));padding-top:84px}
  .scard{top:calc(var(--nav) + 10px + var(--i) * 12px);margin-bottom:35vh;margin-bottom:35svh}
  .scard:last-child{margin-bottom:12vh;margin-bottom:12svh}   /* the last card rests ~12 % of a screen, then the brands follow (no empty screen) */
  .scard__in{display:flex;flex-direction:column;border-radius:26px}
  .scard--1 .scard__in{--bgd:url(../media/stack-c1-m.webp?v=1791553652)}
  .scard--2 .scard__in{--bgd:url(../media/stack-c2-m.webp?v=1791553652)}
  .scard--3 .scard__in{--bgd:url(../media/stack-c3-m.webp?v=1791553652)}
  .scard__art{order:-1;flex:1 1 0;min-height:150px}
  .scard__copy{flex:none;justify-content:flex-start;padding:4px 22px 22px}
  .scard__k{margin-bottom:10px;font-size:12px}
  .scard__h{font-size:clamp(27px,8vw,34px);max-width:none}
  .scard__fact{margin-top:12px;gap:4px 12px}
  .scard__fact b{font-size:clamp(38px,12vw,50px)}
  .scard__fact>span{font-size:13.5px;max-width:none}
  .scard__p{margin-top:10px;font-size:14px;line-height:1.5}
  .scard__list{margin-top:12px;gap:7px}
  .scard__list li{grid-template-columns:30px minmax(0,1fr);gap:10px;font-size:13.5px;line-height:1.35}
  .scard__ic{width:30px;height:30px;border-radius:9px}.scard__ic svg{width:16px;height:16px}
  .scard__go{margin-top:14px;min-height:44px;font-size:14px;padding:6px 6px 6px 16px}.scard__go i{width:30px;height:30px}
  .pc{left:var(--lm,var(--l));top:var(--tm,var(--t));width:var(--wm,var(--w,auto))}
  .pc--dsk{display:none}
  .schip{gap:7px;padding:7px 11px 7px 8px;font-size:12px}.schip code{font-size:12px}
  .schip__bm{width:18px;height:18px}.schip__svg{width:11px;height:11px}
  .schip--roll{padding:9px 13px 9px 10px}.schip--roll code{font-size:13px}
  .schip__k{font-size:11px;letter-spacing:.1em}.schip__bn{font-size:12px}
  .spin__pill{padding:6px 10px}.spin__pill b{font-size:12px}.spin__pill small{font-size:12px}
  .scard__ring{width:min(300px,86%)}
}
@media (max-width:760px) and (max-height:700px){.scard__h{font-size:26px}.scard__fact{margin-top:8px}.scard__fact b{font-size:34px}.scard__p{margin-top:8px;font-size:13.5px;line-height:1.45}.scard__k{margin-bottom:6px}.scard__go{margin-top:10px}.scard__list{margin-top:8px;gap:5px}.scard__list li{font-size:13px}.scard__art{min-height:120px}}

/* short landscape screens: no room for a sticky card – the deck becomes a list */
@media (max-height:560px){.stack:not(.stack--pin) .scard{position:relative;top:auto;height:auto;margin-bottom:20px}.stack:not(.stack--pin) .scard__art{min-height:300px}}

/* ---------- reduced motion: a plain list ---------- */
@media (prefers-reduced-motion:reduce){
  .scard{position:relative;top:auto;height:auto;min-height:min(620px,var(--ch));margin-bottom:24px}
  .scard__in{min-height:inherit}
  .stack--deck .pc,.stack--deck .scard.is-on .pc{transform:none;opacity:1;transition:none}
  .pc{translate:none;transition:none}
  .stack.is-vis .schip,.spin__dot::before,.spin__dot::after{animation:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:760px){.scard__art{flex:none;height:280px}.scard{min-height:0}}
.stack:not(.is-vis) .spin__dot::before,.stack:not(.is-vis) .spin__dot::after{animation:none}   /* SPEC budget: rings rest off screen */