/* 0111b — scroll mechanics after thoughtworks.com: curtain over the hero, blocks that slide in,
   horizontal card strip with autoplay + pause. Everything is gated by .tw-on (set by tw-motion.js),
   so without JS the page looks exactly as before. Reduced motion: no curtain, no slides, no autoplay. */

/* 1. Curtain: hero stays, the page slides up over it; at the end the page lifts off the footer (desktop only) */
@media (min-width:761px) and (prefers-reduced-motion:no-preference){
  .tw-on .tw-stick{position:sticky!important;top:var(--tw-top,0px)!important;z-index:0}
  .tw-on .tw-above{position:relative;z-index:1}
  .tw-on .tw-solid{background-color:var(--bg,#050d1a)}
  .tw-on .tw-edge{box-shadow:0 -28px 70px rgba(1,8,22,.6);border-top:1px solid rgba(80,230,255,.16)}
  .tw-on .tw-stick :is(.sv2-hero-in,.sv2-strip,.pg-inner,.cp-hero-inner,.es-hero-inner,.sf-hero-inner,.hero-content){
    opacity:calc(1 - var(--tw-p,0)*.8);transform:translate3d(0,calc(var(--tw-p,0)*-56px),0);will-change:opacity,transform}
  .tw-on .tw-foot{position:sticky!important;bottom:0;z-index:0}
  .tw-on .tw-foot:not(.tw-fshow){opacity:0;pointer-events:none}
  .tw-on .tw-fedge{box-shadow:0 30px 70px rgba(1,8,22,.65);border-bottom:1px solid rgba(80,230,255,.16)}
  .tw-on .tw-stick :is(.sv2-hero-media,.hero-bg){transform:scale(calc(1 + var(--tw-p,0)*.06));transform-origin:50% 40%;will-change:transform}
}

/* 2. Slide-in blocks */
@media (prefers-reduced-motion:no-preference){
  .tw-on [data-tw]{transition:transform .8s cubic-bezier(.2,.75,.25,1),opacity .7s ease;transition-delay:var(--tw-d,0s)}
  .tw-on [data-tw="l"]:not(.tw-in){opacity:0;transform:translate3d(-36px,0,0)}
  .tw-on [data-tw="r"]:not(.tw-in){opacity:0;transform:translate3d(36px,0,0)}
  .tw-on [data-tw="u"]:not(.tw-in){opacity:0;transform:translate3d(0,24px,0)}
  /* banner panels slide out further and slower, over the photo */
  .tw-on [data-tw="L"]{transition:transform 1.1s cubic-bezier(.16,.8,.22,1),opacity .8s ease}
  .tw-on [data-tw="L"]:not(.tw-in){opacity:0;transform:translate3d(-96px,0,0)}
  .tw-on .tw-clip{overflow-x:clip}
  /* photo banner: the photo drifts slower than the page (parallax set by JS), the panel slides out over it */
  .tw-on .sv2-bnr .sv2-bnr-media img{will-change:transform}
  @media(max-width:760px){
    .tw-on [data-tw="l"]:not(.tw-in){transform:translate3d(-16px,0,0)}
    .tw-on [data-tw="r"]:not(.tw-in){transform:translate3d(16px,0,0)}
    .tw-on [data-tw="L"]:not(.tw-in){transform:translate3d(-24px,0,0)}
  }
}
.tw-on .sv2-bnr .sv2-bnr-txt.tw-panel{background:rgba(5,13,26,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(80,230,255,.16);border-left:3px solid #0078d4;padding:34px 36px;max-width:520px;box-shadow:0 30px 80px rgba(1,8,22,.45)}
@media(max-width:760px){.tw-on .sv2-bnr .sv2-bnr-txt.tw-panel{padding:24px 20px}}

/* 2b. Home: the licence-audit card as a full photo banner with the text panel over it (desktop) */
@media (min-width:769px){
  html.tw-on section.ctab .ctab-card.tw-bn{display:block;position:relative;min-height:clamp(440px,36vw,540px);background:#050d1a}
  html.tw-on section.ctab .tw-bn .ctab-img{display:block!important;position:absolute;inset:0;background-position:72% 38%;transform-origin:62% 45%;transition:none;will-change:transform}
  html.tw-on section.ctab .tw-bn::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,13,26,.62) 0%,rgba(5,13,26,.18) 48%,transparent 70%);pointer-events:none}
  html.tw-on section.ctab .tw-bn:hover .ctab-img{transform:none}
  html.tw-on section.ctab .tw-bn .ctab-b{position:absolute;z-index:1;left:48px;top:50%;margin-top:-1px;translate:0 -50%;width:min(520px,calc(100% - 96px));box-sizing:border-box;
    background:rgba(5,13,26,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(242,184,75,.18);border-left:3px solid var(--c-amber,#f2b84b);
    padding:36px 40px;box-shadow:0 30px 80px rgba(1,8,22,.45)}
}

/* 2c. Zooming photos (leica blocks): frames clip the zoom */
.tw-on .lc-hs-media,.tw-on .lc-blk-media{overflow:hidden}
.tw-on .tw-zf{display:block;overflow:hidden;border-radius:4px}
.tw-on .tw-zf>img{border-radius:0!important}
.tw-on img.tw-zoom{will-change:transform;transform-origin:60% 50%}
@media (prefers-reduced-motion:reduce){.tw-on img.tw-zoom{transform:none!important}}

/* 3. Horizontal strip (articles); when all cards fit it behaves like the old grid */
.tw-on .tw-strip{display:flex!important;grid-template-columns:none!important;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:0;scrollbar-width:none;align-items:stretch;
  margin-right:calc(50% - 50vw + var(--tw-sbw,0px) / 2);padding-right:24px;padding-bottom:6px;cursor:grab}
.tw-on .tw-strip::-webkit-scrollbar{display:none}
.tw-on .tw-strip.tw-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.tw-on .tw-strip.tw-drag a{pointer-events:none}
.tw-on .tw-strip>*{flex:0 0 clamp(280px,31%,372px);scroll-snap-align:start;margin:0!important}
.tw-on .tw-strip.tw-fit{cursor:auto;margin-right:0;padding-right:0}
.tw-on .tw-strip.tw-fit>*{flex:1 1 0}
.tw-ctl[hidden]{display:none}
.tw-ctl{display:flex;align-items:center;gap:14px;margin-top:22px}
.tw-ctl button{width:40px;height:40px;display:inline-grid;place-items:center;border-radius:50%;border:1px solid rgba(143,181,213,.35);
  background:rgba(13,30,53,.6);color:#e2ecf8;cursor:pointer;transition:border-color .2s,background .2s}
.tw-ctl button:hover{border-color:#50e6ff;background:rgba(0,120,212,.22)}
.tw-ctl button:focus-visible{outline:2px solid #50e6ff;outline-offset:2px}
.tw-ctl button[disabled]{opacity:.35;cursor:default}
.tw-ctl svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tw-ctl .tw-play .i-play,.tw-ctl .tw-play[aria-pressed="true"] .i-pause{display:none}
.tw-ctl .tw-play[aria-pressed="true"] .i-play{display:inline}
.tw-cnt{display:flex;align-items:center;gap:12px;font:700 .82rem/1 'DM Sans',system-ui,sans-serif;color:#a9c4dd;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.tw-bar{position:relative;width:72px;height:2px;background:rgba(143,181,213,.25);overflow:hidden}
.tw-bar i{position:absolute;inset:0;background:linear-gradient(90deg,#0078d4,#50e6ff);transform-origin:0 50%;transform:scaleX(var(--tw-s,0))}
.tw-ctl .tw-sp{flex:1}
@media(max-width:760px){
  .tw-on .tw-strip{margin-right:-16px;padding-right:16px;gap:14px}
  .tw-on .tw-strip>*{flex-basis:82%}
}
@media (prefers-reduced-motion:reduce){.tw-on .tw-strip{scroll-behavior:auto}}

/* 4. Pinned horizontal portfolio (desktop): scrolling down first moves all the cards sideways, then the page continues */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .tw-on .tw-pin{overflow:visible!important;overflow-x:clip!important;padding-top:0!important;padding-bottom:0!important;box-sizing:border-box}
  .tw-on .tw-pin>.sv2-in{position:sticky;top:var(--tw-pt,0px);min-height:100vh;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;padding-top:88px;padding-bottom:48px}
  .tw-on .tw-pin .sv2-pc-grid{display:flex!important;grid-template-columns:none!important;gap:20px;align-items:start;width:max-content;
    transform:translate3d(calc(var(--tw-x,0) * -1px),0,0);will-change:transform}
  .tw-on .tw-pin .sv2-pc-grid>.sv2-pc{flex:0 0 clamp(300px,27vw,380px)}
  .tw-on .tw-pin .tw-pbar{display:flex}
}
.tw-pbar{display:none;align-items:center;gap:12px;margin-top:26px;font:700 .82rem/1 'DM Sans',system-ui,sans-serif;color:#a9c4dd;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.tw-pbar .tw-bar{width:160px}
.tw-pbar .tw-hint{margin-left:auto;font-weight:600;letter-spacing:.02em;color:#7f9cba}

/* 5. Count-up figures keep their width while counting */
.tw-num{font-variant-numeric:tabular-nums}

/* banners: zoom grows downward so heads at the top of the photo are never cut */
.tw-on .sv2-bnr img.tw-zoom{transform-origin:65% 0%}