/* Generated by wordpress/build-elementor.js — edit style.css in the project root instead. */
/* =========================================================
   Li-Song Hoogenboom — Portfolio
   Design tokens → base → components → sections → responsive
   ========================================================= */

:root {
  --ink: #0E0E0E;
  --ink-2: #161616;
  --ink-3: #1F1F1F;
  --line: #2A2A2A;
  --paper: #F2EFE9;
  --muted: #8A877F;
  --accent: #1E3FAE;        /* donkerblauw: vlakken, knoppen, stippen */
  --accent-text: #7D97FF;   /* lichtere tint van hetzelfde blauw voor tekst op donker */
  --accent-ink: #FFFFFF;

  --p-burger: #8E1B1B;   --p-burger-2: #E8B23A;
  --p-oneworld: #0F4C4C; --p-oneworld-2: #D9C46A;
  --p-bikespot: #2B59FF; --p-bikespot-2: #F4F1EA;
  --p-mystery: #5B2DFF;  --p-mystery-2: #2BD9A0;
  --p-recruit: #E9E4DA;  --p-schrofer: #FFFFFF;

  --bg: var(--ink);
  --fg: var(--paper);
  --surface: var(--ink-2);
  --hair: var(--line);

  --f-display: "Syne", "Arial Black", sans-serif;
  --f-body: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --f-serif: "Instrument Serif", Georgia, serif;

  --side: clamp(16px, 4vw, 64px);
  --gutter: clamp(16px, 2vw, 32px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --tint-color: transparent;
}

:root[data-theme="light"] {
  --bg: var(--paper);
  --accent-text: var(--accent);
  --fg: var(--ink);
  --surface: #E7E3DB;
  --hair: #CFCAC0;
  --muted: #6B6860;
}

/* ---------- base ---------- */
body.ls-portfolio *, body.ls-portfolio *::before, body.ls-portfolio *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body.ls-portfolio {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 18px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color .6s var(--ease-out), color .6s var(--ease-out);
}
body.ls-portfolio img, body.ls-portfolio video, body.ls-portfolio canvas { display: block; max-width: 100%; }
body.ls-portfolio a { color: inherit; text-decoration: none; }
body.ls-portfolio button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
body.ls-portfolio h1, body.ls-portfolio h2, body.ls-portfolio h3, body.ls-portfolio h4, body.ls-portfolio p, body.ls-portfolio figure, body.ls-portfolio dl, body.ls-portfolio dd { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; }
body.ls-portfolio ul, body.ls-portfolio ol { list-style: none; }
::selection { background: var(--accent); color: var(--accent-ink); }
body.ls-portfolio :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 4px; }

body.ls-portfolio .mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
body.ls-portfolio .serif { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: 0; text-transform: none; }
body.ls-portfolio .muted { color: var(--muted); }
body.ls-portfolio .eyebrow { color: var(--muted); margin-bottom: 24px; }
body.ls-portfolio .display {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(30px, 9.3vw, 180px); line-height: .85; letter-spacing: -.045em;
}
body.ls-portfolio .display sup { font-size: 14px; vertical-align: top; position: relative; top: .8em; letter-spacing: .08em; color: var(--muted); }
body.ls-portfolio .h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(36px, 5.2vw, 88px); line-height: .95; letter-spacing: -.035em; }
body.ls-portfolio .h2 .serif { font-size: 1.08em; color: var(--accent-text); }
body.ls-portfolio section { position: relative; }
body.ls-portfolio .section-head { padding: 0 var(--side); margin-bottom: clamp(48px, 8vw, 120px); }

/* split text */
body.ls-portfolio .js-split .w { white-space: nowrap; display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; }
body.ls-portfolio .js-split .c { display: inline-block; will-change: transform; }

/* ---------- grain / tint ---------- */
body.ls-portfolio .grain { position: fixed; inset: 0; z-index: 9000; pointer-events: none; overflow: hidden; mix-blend-mode: overlay; }
body.ls-portfolio .grain::before {
  content: ""; position: absolute; inset: -50%; opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(8) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); } 12% { transform: translate(-5%,-8%); } 25% { transform: translate(-12%,4%); }
  37% { transform: translate(7%,-12%); } 50% { transform: translate(-4%,12%); } 62% { transform: translate(-12%,0); }
  75% { transform: translate(12%,4%); } 87% { transform: translate(2%,9%); }
}
body.ls-portfolio .tint { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--tint-color); opacity: .06; transition: background-color .7s var(--ease-out); }
body.ls-portfolio .elementor, body.ls-portfolio .footer { position: relative; z-index: 1; }
body.ls-portfolio .elementor { overflow-x: clip; }

/* ---------- cursor ---------- */
body.ls-portfolio .cursor { position: fixed; inset: 0; z-index: 9500; pointer-events: none; display: none; }
body.ls-portfolio.has-cursor .cursor { display: block; }
body.ls-portfolio.has-cursor, body.ls-portfolio.has-cursor a, body.ls-portfolio.has-cursor button { cursor: none; }
body.ls-portfolio .cursor__dot, body.ls-portfolio .cursor__ring { position: absolute; top: 0; left: 0; border-radius: 999px; }
body.ls-portfolio .cursor__dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--paper); }
body.ls-portfolio .cursor__ring {
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1px solid rgba(242,239,233,.55);
  display: grid; place-items: center;
  transition: width .35s var(--ease-out), height .35s var(--ease-out), margin .35s var(--ease-out), background-color .35s, border-color .35s, border-radius .35s;
}
body.ls-portfolio .cursor__label { font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; color: var(--paper); opacity: 0; transition: opacity .2s; white-space: nowrap; }
body.ls-portfolio .cursor.is-link .cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: var(--paper); border-color: var(--paper); mix-blend-mode: difference; }
body.ls-portfolio .cursor.is-link .cursor__dot, body.ls-portfolio .cursor.is-label .cursor__dot { opacity: 0; }
body.ls-portfolio .cursor.is-label .cursor__ring { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: rgba(20,20,20,.28); border-color: rgba(255,255,255,.4); -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%); box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 10px 30px -10px rgba(0,0,0,.5); }
body.ls-portfolio .cursor.is-label .cursor__label { opacity: 1; }
body.ls-portfolio .cursor.is-hidden { opacity: 0; }

/* ---------- preloader ---------- */
body.ls-portfolio .preloader { position: fixed; inset: 0; z-index: 9800; background: var(--ink); color: var(--paper); display: grid; place-items: center; overflow: hidden; }
body.ls-portfolio .preloader__shapes { position: absolute; inset: 0; }
body.ls-portfolio .preloader__shapes .shape { position: absolute; left: 50%; top: 50%; }
body.ls-portfolio .preloader__name { font-family: var(--f-display); font-weight: 800; font-size: clamp(48px, 12vw, 200px); letter-spacing: -.05em; line-height: 1; clip-path: inset(0 100% 0 0); }
body.ls-portfolio .preloader__count { position: absolute; right: var(--side); bottom: var(--side); font-size: clamp(40px, 7vw, 96px); font-family: var(--f-display); font-weight: 700; letter-spacing: -.03em; }
body.ls-portfolio .preloader__curtain { position: absolute; inset: 0; transform: translateY(100%); }
body.ls-portfolio .preloader__curtain--lime { background: var(--paper); }
body.ls-portfolio .preloader__curtain--ink { background: var(--ink); }
.js-skip-preloader body.ls-portfolio .preloader { display: none; }
.no-js body.ls-portfolio .preloader { display: none; }

/* shared shapes */
body.ls-portfolio .shape, body.ls-portfolio .hs, body.ls-portfolio .fsh, body.ls-portfolio .cs { display: block; }
body.ls-portfolio .shape--circle, body.ls-portfolio .hs--circle, body.ls-portfolio .fsh--circle, body.ls-portfolio .cs--circle { border-radius: 50%; }
body.ls-portfolio .shape--pill, body.ls-portfolio .hs--pill, body.ls-portfolio .fsh--pill, body.ls-portfolio .cs--pill { border-radius: 999px; }
body.ls-portfolio .shape--arc, body.ls-portfolio .hs--arc, body.ls-portfolio .fsh--arc { border-radius: 999px 999px 0 0; }
body.ls-portfolio .shape--tri, body.ls-portfolio .fsh--tri { clip-path: polygon(50% 0, 100% 100%, 0 100%); }

body.ls-portfolio .preloader .shape { width: 70px; height: 70px; margin: -35px; background: var(--paper); }
body.ls-portfolio .preloader .shape--pill { width: 140px; }
body.ls-portfolio .preloader .shape--arc { height: 35px; margin-top: 0; }

/* ---------- header ---------- */
body.ls-portfolio .header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px var(--side);
  color: var(--fg);
}
body.ls-portfolio .header__logo { font-family: var(--f-display); font-weight: 800; font-size: 24px; letter-spacing: -.03em; white-space: nowrap; }
body.ls-portfolio .header__logo span, body.ls-portfolio .footer__logo span { color: var(--accent-text); }
body.ls-portfolio .header__nav { display: flex; gap: 32px; }
body.ls-portfolio .header__nav a { position: relative; padding: 6px 0; }
body.ls-portfolio .header__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out); }
body.ls-portfolio .header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
body.ls-portfolio .header__right { display: flex; align-items: center; gap: 12px; }
body.ls-portfolio .pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid currentColor; border-radius: 999px; }
body.ls-portfolio .pill--status i, body.ls-portfolio .hero__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-text); box-shadow: 0 0 0 0 var(--accent); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(125,151,255,.6); } 70% { box-shadow: 0 0 0 10px rgba(125,151,255,0); } 100% { box-shadow: 0 0 0 0 rgba(125,151,255,0); } }
body.ls-portfolio .theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; }
body.ls-portfolio .theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
body.ls-portfolio .burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid currentColor; position: relative; }
body.ls-portfolio .burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease-out); }
body.ls-portfolio .burger span:first-child { top: 18px; } body.ls-portfolio .burger span:last-child { top: 25px; }
body.ls-portfolio.menu-open .burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
body.ls-portfolio.menu-open .burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

body.ls-portfolio .menu {
  position: fixed; inset: 0; z-index: 790; background: rgba(14,14,14,.55); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); color: var(--paper);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 96px var(--side) 32px;
  clip-path: circle(0 at calc(100% - 40px) 40px); transition: clip-path .8s var(--ease-io); visibility: hidden;
}
body.ls-portfolio.menu-open .menu { clip-path: circle(150% at calc(100% - 40px) 40px); visibility: visible; }
body.ls-portfolio .menu nav { display: flex; flex-direction: column; }
body.ls-portfolio .menu nav a { font-family: var(--f-display); font-weight: 800; font-size: clamp(56px, 16vw, 120px); line-height: .95; letter-spacing: -.05em; text-transform: uppercase; }
body.ls-portfolio .menu p { margin-top: 32px; }

/* ---------- buttons ---------- */
body.ls-portfolio .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: 999px; font-family: var(--f-mono); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; transition: background-color .3s, color .3s; }
body.ls-portfolio .btn--ink { background: var(--ink); color: var(--accent); }
body.ls-portfolio .btn--ink:hover { background: var(--paper); color: var(--ink); }
body.ls-portfolio .btn--line { border: 1px solid currentColor; }
body.ls-portfolio .btn--line:hover { background: var(--fg); color: var(--bg); }
body.ls-portfolio .magnetic { will-change: transform; }

/* =========================================================
   01 HERO
   ========================================================= */
body.ls-portfolio .hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 120px 0 32px; overflow: hidden; }
body.ls-portfolio .hero__meta { display: flex; justify-content: space-between; gap: 16px; padding: 0 var(--side); color: var(--muted); margin-bottom: 2vw; }
body.ls-portfolio .hero__name { font-family: var(--f-display); font-weight: 800; line-height: .82; letter-spacing: -.055em; text-transform: uppercase; display: flex; flex-direction: column; padding: 0 var(--side); }
body.ls-portfolio .hero__line { display: block; white-space: nowrap; will-change: transform; }
body.ls-portfolio .hero__line--1 { font-size: 12.4vw; }
body.ls-portfolio .hero__line--2 { font-size: 6.5vw; text-align: right; margin-top: .25em; color: transparent; -webkit-text-stroke: 1.5px var(--fg); }
body.ls-portfolio .hero__line--2 .c { transition: color .4s; }
body.ls-portfolio .hero__line--2:hover .c { color: var(--fg); }
body.ls-portfolio .hero__bottom { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding: 4vw var(--side) 0; }
body.ls-portfolio .hero__tag { font-size: clamp(20px, 2vw, 30px); line-height: 1.2; letter-spacing: -.02em; max-width: 30ch; }
body.ls-portfolio .hero__tag .serif { font-size: 1.15em; color: var(--accent-text); }
body.ls-portfolio .hero__tag .muted { font-size: .62em; letter-spacing: 0; display: inline-block; margin-top: 10px; }
body.ls-portfolio .hero__status { display: inline-flex; align-items: center; gap: 10px; justify-self: start; }
body.ls-portfolio .hero__scroll { display: inline-flex; align-items: center; gap: 12px; }
body.ls-portfolio .hero__scroll-line { width: 1px; height: 48px; background: var(--hair); position: relative; overflow: hidden; }
body.ls-portfolio .hero__scroll-line::after { content: ""; position: absolute; left: 0; top: -50%; width: 1px; height: 50%; background: var(--fg); animation: scrollLine 1.8s var(--ease-io) infinite; }
@keyframes scrollLine { to { top: 100%; } }

body.ls-portfolio .hero__shapes { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
body.ls-portfolio .hs { position: absolute; will-change: transform; }
body.ls-portfolio .hs--circle { width: 19vw; height: 19vw; right: 9vw; top: 30vh; }
body.ls-portfolio .hs--square { width: 9vw; height: 9vw; left: 7vw; top: 24vh; border-radius: 2.2vw; transform: rotate(12deg); }
body.ls-portfolio .hs--pill { width: 22vw; height: 8vw; left: 34vw; top: 56vh; }
body.ls-portfolio .hs--arc { width: 1.4vw; height: 1.4vw; right: 31vw; top: 22vh; border-radius: 50%; background: var(--accent); }
body.ls-portfolio .hs--tri { width: 22vw; height: 22vw; left: -6vw; bottom: -8vh; border-radius: 50%; border: 1px solid var(--hair); }

/* =========================================================
   02 FILM
   ========================================================= */
body.ls-portfolio .film { height: 340vh; }
body.ls-portfolio .film__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--ink); color: var(--paper); }
body.ls-portfolio .film__video, body.ls-portfolio .film__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
body.ls-portfolio .film.has-video .film__video { display: block; }
body.ls-portfolio .film.has-frames .film__canvas { display: block; }
body.ls-portfolio .film.has-video .film__stage, body.ls-portfolio .film.has-frames .film__stage { display: none; }
body.ls-portfolio .film__stage { position: absolute; inset: 0; perspective: 1400px; }
body.ls-portfolio .film__sticky::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.55) 100%); }

body.ls-portfolio .fs-bg { position: absolute; inset: 0; background: var(--ink); }
body.ls-portfolio .fs-phone {
  --pw: min(300px, 62vw, 40vh);
  position: absolute; left: 50%; top: 50%; width: var(--pw); height: calc(var(--pw) * 19.5 / 9);
  margin-left: calc(var(--pw) / -2); margin-top: calc(var(--pw) * 19.5 / 9 / -2);
  background: #050505; border-radius: 46px; padding: 12px;
  box-shadow: 0 0 0 1.5px #2b2b2b, 0 60px 120px -20px rgba(0,0,0,.8), inset 0 0 0 2px #1a1a1a;
  will-change: transform;
}
body.ls-portfolio .fs-phone__notch { position: absolute; top: 20px; left: 50%; width: 90px; height: 26px; margin-left: -45px; border-radius: 20px; background: #000; z-index: 2; }
body.ls-portfolio .fs-phone__screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #fff; }
body.ls-portfolio .fs-phone__screens { position: absolute; inset: 0; background: #F4F1EA; }
body.ls-portfolio .fs-phone__screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; will-change: transform; }
body.ls-portfolio .fs-tap { position: absolute; z-index: 4; left: 0; top: 0; width: 44px; height: 44px; margin: -22px; border-radius: 50%; background: rgba(43,89,255,.35); border: 2px solid rgba(255,255,255,.9); box-shadow: 0 4px 14px rgba(0,0,0,.25); opacity: 0; pointer-events: none; }
body.ls-portfolio .fs-steps { position: absolute; left: calc(50% + min(300px, 62vw, 40vh) / 2 + clamp(24px, 4vw, 72px)); top: 50%; transform: translateY(-50%); display: grid; gap: 14px; color: var(--muted); }
body.ls-portfolio .fs-steps li { display: flex; align-items: center; gap: 12px; opacity: .35; transition: opacity .3s, color .3s; }
body.ls-portfolio .fs-steps li::before { content: ""; width: 18px; height: 1px; background: currentColor; transition: width .3s; }
body.ls-portfolio .fs-steps li.is-on { opacity: 1; color: var(--paper); }
body.ls-portfolio .fs-steps li.is-on::before { width: 36px; background: var(--accent-text); }
body.ls-portfolio .fs-sweep { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); mix-blend-mode: screen; }
body.ls-portfolio .fs-circle { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: var(--paper); transform: scale(0); will-change: transform; }

body.ls-portfolio .fs-mag { position: absolute; inset: 0; transform-style: preserve-3d; }
body.ls-portfolio .fs-mag img { position: absolute; left: 50%; top: 50%; box-shadow: 0 40px 100px -20px rgba(0,0,0,.7); will-change: transform; object-fit: cover; }
body.ls-portfolio .fs-cover { --cw: min(340px, 56vw, 48vh); width: var(--cw); height: calc(var(--cw) * 1.3); margin: calc(var(--cw) * -.65) 0 0 calc(var(--cw) / -2); }
body.ls-portfolio .fs-spread { --sw: min(620px, 80vw, 80vh); width: var(--sw); height: calc(var(--sw) * 2 / 3); margin: calc(var(--sw) / -3) 0 0 calc(var(--sw) / -2); }
body.ls-portfolio .fs-square { position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px; background: var(--paper); transform: scale(0); }

body.ls-portfolio .fs-shapes { position: absolute; inset: 0; }
body.ls-portfolio .fsh { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px; opacity: 0; will-change: transform; }
body.ls-portfolio .fsh--circle { background: var(--accent); }
body.ls-portfolio .fsh--square { background: var(--paper); }
body.ls-portfolio .fsh--pill { width: 180px; margin-left: -90px; background: var(--muted); }
body.ls-portfolio .fsh--arc { height: 45px; margin-top: -22px; background: var(--paper); }
body.ls-portfolio .fsh--tri { background: var(--muted); }
body.ls-portfolio .fs-name { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; font-family: var(--f-display); font-weight: 800; font-size: clamp(48px, 13vw, 260px); letter-spacing: -.05em; line-height: 1; }
body.ls-portfolio .fs-name span { display: inline-block; opacity: 0; background: linear-gradient(90deg, var(--paper) 0 40%, var(--accent-text) 50%, var(--paper) 60% 100%); background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
body.ls-portfolio .fs-sub { position: absolute; left: 0; right: 0; top: calc(50% + clamp(48px, 10vw, 170px)); text-align: center; color: var(--muted); opacity: 0; }

body.ls-portfolio .film__ui { position: absolute; left: var(--side); right: var(--side); bottom: 28px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px; z-index: 3; }
body.ls-portfolio .film__chapters { position: relative; height: 40px; }
body.ls-portfolio .film__chapter { position: absolute; left: 0; bottom: 0; display: flex; gap: 12px; align-items: baseline; opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s var(--ease-out); }
body.ls-portfolio .film__chapter.is-active { opacity: 1; transform: none; }
body.ls-portfolio .film__chapter b { color: var(--paper); font-weight: 500; }
body.ls-portfolio .film__chapter span { color: var(--muted); }
body.ls-portfolio .film__progress { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; order: 3; }
body.ls-portfolio .film__progress i { height: 2px; background: rgba(242,239,233,.15); position: relative; overflow: hidden; }
body.ls-portfolio .film__progress i::after { content: ""; position: absolute; inset: 0; background: var(--paper); transform-origin: left; transform: scaleX(var(--p, 0)); }
body.ls-portfolio .film__link { padding: 10px 16px; border: 1px solid rgba(242,239,233,.4); border-radius: 999px; transition: background .3s, color .3s; }
body.ls-portfolio .film__link:hover { background: var(--paper); color: var(--ink); }

/* =========================================================
   03 STATS
   ========================================================= */
body.ls-portfolio .stats { padding: clamp(96px, 14vw, 200px) 0; overflow: hidden; }
body.ls-portfolio .marquee { background: transparent; color: var(--fg); border-block: 1px solid var(--hair); transform: rotate(-2deg); margin: 0 -2vw clamp(64px, 10vw, 140px); overflow: hidden; padding: 14px 0; }
body.ls-portfolio .marquee__track { display: flex; width: max-content; will-change: transform; }
body.ls-portfolio .marquee__track span { font-family: var(--f-display); font-weight: 800; font-size: clamp(32px, 5vw, 72px); letter-spacing: -.03em; text-transform: uppercase; white-space: nowrap; line-height: 1.1; }
body.ls-portfolio .stats__grid { display: grid; grid-template-columns: repeat(6, 1fr); padding: 0 var(--side); border-top: 1px solid var(--hair); }
body.ls-portfolio .stats__grid li { padding: 28px 16px 0 0; border-right: 1px solid var(--hair); padding-left: 16px; }
body.ls-portfolio .stats__grid li:first-child { padding-left: 0; }
body.ls-portfolio .stats__grid li:last-child { border-right: 0; }
body.ls-portfolio .stats__grid b { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(56px, 7vw, 120px); line-height: 1; letter-spacing: -.05em; }
body.ls-portfolio .stats__grid span { display: block; margin-top: 12px; color: var(--muted); font-size: 15px; max-width: 18ch; }

/* =========================================================
   04 WORK
   ========================================================= */
body.ls-portfolio .work { padding-bottom: clamp(96px, 12vw, 180px); }
body.ls-portfolio .work__index { padding: 0 var(--side); border-top: 1px solid var(--hair); margin-bottom: clamp(96px, 12vw, 200px); }
body.ls-portfolio .work__row { border-bottom: 1px solid var(--hair); }
body.ls-portfolio .work__row a { display: grid; grid-template-columns: 80px 1fr 1fr 80px; align-items: center; gap: 16px; padding: 26px 0; position: relative; }
body.ls-portfolio .work__row a::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
body.ls-portfolio .work__row-num { color: var(--muted); transition: color .3s; }
body.ls-portfolio .work__row-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 4vw, 64px); line-height: 1; letter-spacing: -.035em; transition: transform .5s var(--ease-out); }
body.ls-portfolio .work__row-disc { color: var(--muted); }
body.ls-portfolio .work__row-year { text-align: right; color: var(--muted); }
body.ls-portfolio .work__row a:hover::before, body.ls-portfolio .work__row a:focus-visible::before { transform: scaleX(1); }
body.ls-portfolio .work__row a:hover .work__row-title { transform: translateX(24px); }
body.ls-portfolio .work__row a:hover .work__row-num { color: var(--fg); }
body.ls-portfolio .work__row-thumb { display: none; }

body.ls-portfolio .work__preview { position: fixed; left: 0; top: 0; width: 340px; aspect-ratio: 4 / 5; z-index: 50; pointer-events: none; opacity: 0; transform: scale(.8); }
body.ls-portfolio .work__preview-inner { position: absolute; inset: 0; overflow: hidden; border-radius: 6px; }
body.ls-portfolio .work__preview-inner img, body.ls-portfolio .work__preview-inner video, body.ls-portfolio .work__preview-inner .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
body.ls-portfolio .work__preview-inner .is-on { opacity: 1; }

body.ls-portfolio .work__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(64px, 10vw, 160px) var(--gutter); padding: 0 var(--side); }
body.ls-portfolio .card { grid-column: span 7; }
body.ls-portfolio .card:nth-child(4n+2) { grid-column: 8 / span 5; margin-top: 28vw; }
body.ls-portfolio .card:nth-child(4n+3) { grid-column: 2 / span 5; }
body.ls-portfolio .card:nth-child(4n+4) { grid-column: 7 / span 6; margin-top: 14vw; }
body.ls-portfolio .card a { display: block; container-type: inline-size; }
body.ls-portfolio .card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: var(--surface); clip-path: inset(0 0 0 0); }
body.ls-portfolio .card:nth-child(4n+1) .card__media { aspect-ratio: 5 / 4; }
body.ls-portfolio .card__media img, body.ls-portfolio .card__media video, body.ls-portfolio .card__media .ph { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; transition: scale 1.2s var(--ease-out); }
body.ls-portfolio .card a:hover .card__media img, body.ls-portfolio .card a:hover .card__media .ph { scale: 1.05; }
body.ls-portfolio .card__meta { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; color: var(--muted); }
body.ls-portfolio .card__title { font-family: var(--f-display); font-weight: 800; font-size: min(8cqi, 88px); line-height: .9; letter-spacing: -.045em; text-transform: uppercase; margin-top: 10px; }
body.ls-portfolio .card__desc { margin-top: 12px; color: var(--muted); max-width: 46ch; font-size: 16px; }
body.ls-portfolio .card__swatch { display: inline-flex; gap: 4px; vertical-align: middle; }
body.ls-portfolio .card__swatch i { width: 10px; height: 10px; border-radius: 50%; }

/* placeholders */
body.ls-portfolio .ph {
  display: grid; place-items: center; text-align: center; padding: 24px;
  background: repeating-linear-gradient(-45deg, var(--ink-2) 0 14px, var(--ink-3) 14px 28px);
  color: var(--muted); font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px dashed #444;
}
body.ls-portfolio .ph b { display: block; color: var(--accent-text); margin-bottom: 8px; font-weight: 500; }
body.ls-portfolio .ph--recruit { background: linear-gradient(135deg, #E9E4DA, #CFC7B8); color: #4a463f; border-color: #8a8478; }
body.ls-portfolio .ph--recruit::before { content: "WE'RE\A HIRING"; white-space: pre; font-family: var(--f-display); font-weight: 800; font-size: clamp(40px, 6vw, 96px); line-height: .85; letter-spacing: -.05em; color: #0E0E0E; display: block; margin-bottom: 18px; }
body.ls-portfolio .ph--schrofer { background: #fff repeating-radial-gradient(circle at 50% 50%, #000 0 3px, #fff 3px 12px); color: #000; border-color: #000; }
body.ls-portfolio .ph--schrofer span { background: #fff; padding: 8px 10px; }

/* playground */
body.ls-portfolio .playground { margin-top: clamp(96px, 12vw, 200px); }
body.ls-portfolio .playground__head { display: flex; justify-content: space-between; padding: 0 var(--side); }
body.ls-portfolio .playground__track { display: flex; gap: var(--gutter); overflow-x: auto; padding: 0 var(--side) 16px; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; }
body.ls-portfolio .playground__track::-webkit-scrollbar { display: none; }
body.ls-portfolio .playground__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
body.ls-portfolio .pg { flex: 0 0 auto; height: clamp(260px, 36vw, 480px); scroll-snap-align: start; position: relative; }
body.ls-portfolio .pg img, body.ls-portfolio .pg video { height: 100%; width: auto; object-fit: cover; border-radius: 4px; user-select: none; -webkit-user-drag: none; }
body.ls-portfolio .pg figcaption { margin-top: 10px; color: var(--muted); }
body.ls-portfolio .pg { display: flex; flex-direction: column; }
body.ls-portfolio .pg > img, body.ls-portfolio .pg > video { flex: 1; min-height: 0; }

/* =========================================================
   05 ABOUT
   ========================================================= */
body.ls-portfolio .about { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 120px); padding: clamp(96px, 12vw, 200px) var(--side); align-items: start; }
body.ls-portfolio .about__media { position: sticky; top: 120px; }
body.ls-portfolio .about__portrait { aspect-ratio: 3 / 4; border-radius: 999px; overflow: hidden; background: var(--surface); transition: border-radius .8s var(--ease-out); position: relative; }
body.ls-portfolio .about__portrait:hover { border-radius: 24px; }
body.ls-portfolio .about__portrait img, body.ls-portfolio .about__portrait .ph { width: 100%; height: 100%; object-fit: cover; }
body.ls-portfolio .about__portrait .ph { position: absolute; inset: 0; border-radius: inherit; }
body.ls-portfolio .about__caption { margin-top: 16px; }
body.ls-portfolio .about__body { margin-top: 48px; display: grid; gap: 20px; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.45; letter-spacing: -.01em; max-width: 40ch; }
body.ls-portfolio .about__body mark { background: none; color: var(--fg); box-shadow: inset 0 -.3em 0 rgba(30,63,174,.45); }
.js body.ls-portfolio .about__body .wd { opacity: .18; transition: opacity .2s; }
body.ls-portfolio .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 48px; }
body.ls-portfolio .chips li { padding: 10px 16px; border: 1px solid var(--hair); border-radius: 999px; }

/* =========================================================
   06 SKILLS
   ========================================================= */
body.ls-portfolio .skills { padding: clamp(64px, 8vw, 120px) 0 clamp(96px, 12vw, 200px); }
body.ls-portfolio .skills__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 120px); padding: 0 var(--side); }
body.ls-portfolio .caps { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); border: 1px solid var(--hair); align-self: start; }
body.ls-portfolio .caps li { background: var(--bg); padding: 28px 24px 32px; min-height: 200px; transition: background-color .4s, color .4s; }
body.ls-portfolio .caps li:hover { background: color-mix(in srgb, var(--fg) 5%, var(--bg)); }
body.ls-portfolio .caps span { color: var(--muted); }
body.ls-portfolio .caps h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -.02em; line-height: 1.05; margin: 48px 0 10px; }
body.ls-portfolio .caps p { color: var(--muted); font-size: 15px; }
body.ls-portfolio .tools li { padding: 22px 0; border-bottom: 1px solid var(--hair); }
body.ls-portfolio .tools li:first-child { border-top: 1px solid var(--hair); }
body.ls-portfolio .tools div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 16px; }
body.ls-portfolio .tools b { font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -.03em; }
body.ls-portfolio .tools span { grid-row: 2; }
body.ls-portfolio .tools em { grid-row: 1 / 3; grid-column: 2; font-style: normal; font-size: 14px; color: var(--muted); }
body.ls-portfolio .tools i { display: block; height: 3px; margin-top: 16px; background: var(--hair); position: relative; overflow: hidden; }
body.ls-portfolio .tools i::after { content: ""; position: absolute; inset: 0; background: var(--fg); transform-origin: left; transform: scaleX(var(--v, 0)); transition: transform 1.6s var(--ease-out); }
.no-js body.ls-portfolio .tools i::after { --v: 1; }

/* =========================================================
   07 STORY
   ========================================================= */
body.ls-portfolio .story { overflow: hidden; }
body.ls-portfolio .story__pin { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 48px; }
body.ls-portfolio .story__head { padding: 0 var(--side); }
body.ls-portfolio .story__track { display: flex; gap: var(--gutter); padding: 0 var(--side); width: max-content; will-change: transform; }
body.ls-portfolio .story__card { position: relative; width: clamp(300px, 30vw, 460px); height: clamp(380px, 52vh, 540px); padding: 28px; border: 1px solid var(--hair); border-radius: 24px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; background: var(--surface); }
body.ls-portfolio .story__card > span { position: absolute; top: 28px; left: 28px; color: var(--muted); z-index: 1; }
body.ls-portfolio .story__card h3 { font-family: var(--f-display); font-weight: 800; font-size: clamp(22px, 2.3vw, 38px); line-height: .95; letter-spacing: -.04em; position: relative; }
body.ls-portfolio .story__card p { color: var(--muted); font-size: 16px; position: relative; max-width: 30ch; }
body.ls-portfolio .story__card--img { color: #fff; border: 0; }
body.ls-portfolio .story__card--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.ls-portfolio .story__card--img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), transparent 60%); }
body.ls-portfolio .story__card--img h3, body.ls-portfolio .story__card--img p { z-index: 1; color: #fff; }
body.ls-portfolio .story__card--img p { color: rgba(255,255,255,.75); }
body.ls-portfolio .story__card--img > span { color: rgba(255,255,255,.8); }
body.ls-portfolio .story__card--glass { background: rgba(255,255,255,.04); }
body.ls-portfolio .story__card--next { background: transparent; border-style: dashed; transition: background-color .4s, color .4s; }
body.ls-portfolio .story__card--next:hover { background: var(--fg); color: var(--bg); }
body.ls-portfolio .story__pin { position: relative; }
body.ls-portfolio .story__bg { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
body.ls-portfolio .story__bg span { position: absolute; display: block; }
body.ls-portfolio .story__bg span:nth-child(1) { width: 30vw; height: 30vw; right: 14vw; top: 30vh; border-radius: 50%; border: 1px solid var(--hair); }
body.ls-portfolio .story__bg span:nth-child(2) { width: 24vw; height: 8vw; left: 32vw; top: 34vh; border-radius: 999px; background: var(--paper); opacity: .9; }
body.ls-portfolio .story__bg span:nth-child(3) { width: 1.6vw; height: 1.6vw; right: 30vw; top: 34vh; border-radius: 50%; background: var(--accent); }

/* =========================================================
   08 LOOKING
   ========================================================= */
body.ls-portfolio .looking { position: relative; overflow: hidden; color: var(--fg); padding: clamp(80px, 10vw, 160px) var(--side); }
body.ls-portfolio .looking__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(34px, 7.4vw, 136px); line-height: .9; letter-spacing: -.05em; max-width: 14ch; }
body.ls-portfolio .looking__row { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin-top: 56px; }
body.ls-portfolio .looking__row p { max-width: 46ch; font-size: clamp(18px, 1.5vw, 22px); }
body.ls-portfolio .looking__btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* =========================================================
   09 CONTACT
   ========================================================= */
body.ls-portfolio .contact { padding: clamp(120px, 14vw, 220px) var(--side) clamp(80px, 10vw, 140px); overflow: hidden; }
body.ls-portfolio .contact__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 8.2vw, 180px); line-height: .84; letter-spacing: -.055em; display: flex; flex-direction: column; }
body.ls-portfolio .contact__title > span:nth-child(2) { padding-left: 8vw; }
body.ls-portfolio .contact__title-accent { color: var(--accent-text); }
body.ls-portfolio .contact__row { display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; margin-top: clamp(48px, 7vw, 96px); }
body.ls-portfolio .contact__big { width: clamp(200px, 22vw, 340px); aspect-ratio: 1; border-radius: 50%; color: var(--fg); display: grid; place-items: center; text-align: center; font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 3vw, 48px); line-height: .95; letter-spacing: -.04em; text-transform: uppercase; transition: background-color .4s; }
body.ls-portfolio .contact__big:hover { background: rgba(30,63,174,.35); }
body.ls-portfolio .contact__side { display: grid; gap: 20px; justify-items: start; }
body.ls-portfolio .contact__addr { font-size: clamp(16px, 2.4vw, 32px); text-transform: none; letter-spacing: -.01em; font-weight: 400; border-bottom: 1px solid var(--hair); padding-bottom: 8px; text-align: left; }
body.ls-portfolio .contact__addr em { font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); margin-left: 12px; vertical-align: middle; }
body.ls-portfolio .contact__links { display: flex; gap: 24px; }
body.ls-portfolio .contact__links a:hover { color: var(--accent-text); }
body.ls-portfolio .contact__shapes { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
body.ls-portfolio .cs { position: absolute; opacity: .9; }
body.ls-portfolio .cs--circle { width: 28vw; height: 28vw; right: -6vw; top: 8vw; border: 1.5px solid var(--hair); }
body.ls-portfolio .cs--square { width: 6vw; height: 6vw; right: 22vw; top: 26vw; border-radius: 1.4vw; transform: rotate(-14deg); }
body.ls-portfolio .cs--pill { width: 14vw; height: 5vw; right: 4vw; bottom: 8vw; background: var(--paper); }

/* =========================================================
   FOOTER
   ========================================================= */
body.ls-portfolio .footer { padding: 48px var(--side) 32px; border-top: 1px solid var(--hair); }
body.ls-portfolio .footer__logo { white-space: nowrap; font-family: var(--f-display); font-weight: 800; font-size: clamp(40px, 15.5vw, 300px); line-height: .8; letter-spacing: -.06em; margin-bottom: 40px; }
body.ls-portfolio .footer__cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; color: var(--muted); }
body.ls-portfolio .footer__cols b { color: var(--fg); font-weight: 500; }
body.ls-portfolio .footer__links { display: flex; gap: 20px; }
body.ls-portfolio .footer a:hover { color: var(--accent-text); }

/* =========================================================
   CASE STUDY OVERLAY
   ========================================================= */
body.ls-portfolio .case { position: fixed; inset: 0; z-index: 900; visibility: hidden; pointer-events: none; }
body.ls-portfolio .case.is-open { visibility: visible; pointer-events: auto; }
body.ls-portfolio .case__wipe { position: absolute; inset: 0; background: var(--case-accent, var(--accent)); clip-path: inset(100% 0 0 0); }
body.ls-portfolio .case__scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--case-bg, var(--ink)); color: var(--case-fg, var(--paper)); clip-path: inset(100% 0 0 0); }
body.ls-portfolio .case__close { position: fixed; top: 20px; right: var(--side); z-index: 5; padding: 12px 18px; border-radius: 999px; background: var(--case-fg, var(--paper)); color: var(--case-bg, var(--ink)); }

body.ls-portfolio .cs-hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px var(--side) 40px; position: relative; overflow: hidden; }
body.ls-portfolio .cs-hero__media { position: absolute; inset: 0; }
body.ls-portfolio .cs-hero__media img, body.ls-portfolio .cs-hero__media video, body.ls-portfolio .cs-hero__media .ph { width: 100%; height: 100%; object-fit: cover; }
body.ls-portfolio .cs-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--case-bg, #0E0E0E) 2%, rgba(0,0,0,.25) 50%, rgba(0,0,0,.2)); }
body.ls-portfolio .cs-hero__num { position: relative; color: var(--case-accent); margin-bottom: 16px; }
body.ls-portfolio .cs-hero__title { position: relative; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 7vw, 160px); line-height: .84; letter-spacing: -.055em; }
body.ls-portfolio .cs-meta { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.2); }
body.ls-portfolio .cs-meta dt { opacity: .55; margin-bottom: 6px; }
body.ls-portfolio .cs-meta dd { font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 500; }

body.ls-portfolio .cs-block { display: grid; grid-template-columns: 4fr 8fr; gap: 32px; padding: clamp(64px, 9vw, 140px) var(--side); border-bottom: 1px solid rgba(127,127,127,.2); }
body.ls-portfolio .cs-block h2 { color: var(--case-accent); }
body.ls-portfolio .cs-block p, body.ls-portfolio .cs-block li { font-size: clamp(20px, 2vw, 30px); line-height: 1.3; letter-spacing: -.015em; max-width: 34ch; }
body.ls-portfolio .cs-block ul { display: grid; gap: 10px; }
body.ls-portfolio .cs-block li::before { content: "→ "; color: var(--case-accent); }
/* static case studies: readable by crawlers and without JavaScript, replaced by the interactive cards otherwise */
body.ls-portfolio .work__static { display: none; }
.no-js body.ls-portfolio .work__static { display: grid; gap: 48px; padding: 48px var(--side); }
.no-js body.ls-portfolio .work__static h3 { font-size: clamp(28px, 3vw, 44px); }
.no-js body.ls-portfolio .work__static h4 { margin-top: 16px; }
/* process steps */
body.ls-portfolio .cs-steps { counter-reset: step; margin-top: clamp(28px, 3vw, 44px); border-top: 1px solid rgba(127,127,127,.2); gap: 0 !important; }
body.ls-portfolio .cs-block .cs-steps li { counter-increment: step; display: grid; grid-template-columns: 3em 10em 1fr; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid rgba(127,127,127,.2); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.45; letter-spacing: 0; max-width: none; }
body.ls-portfolio .cs-block .cs-steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: var(--case-accent); }
body.ls-portfolio .cs-steps b { font-weight: 600; }
@media (max-width: 640px) { body.ls-portfolio .cs-block .cs-steps li { grid-template-columns: 3em 1fr; } body.ls-portfolio .cs-steps li span { grid-column: 2; } }

body.ls-portfolio .cs-strip { display: flex; gap: var(--gutter); overflow-x: auto; padding: 0 var(--side) clamp(48px, 6vw, 96px); scrollbar-width: thin; }
body.ls-portfolio .cs-strip figure { flex: 0 0 auto; width: clamp(260px, 34vw, 520px); }
body.ls-portfolio .cs-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #fff; border-radius: 4px; }
body.ls-portfolio figcaption { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-top: 10px; }

body.ls-portfolio .cs-gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gutter); padding: clamp(48px, 6vw, 96px) var(--side); }
body.ls-portfolio .cs-gallery figure { grid-column: span 12; }
body.ls-portfolio .cs-gallery .g-half { grid-column: span 6; }
body.ls-portfolio .cs-gallery .g-third { grid-column: span 4; }
body.ls-portfolio .cs-gallery .g-wide { grid-column: 2 / span 10; }
body.ls-portfolio .cs-gallery img, body.ls-portfolio .cs-gallery video { width: 100%; height: auto; border-radius: 4px; background: rgba(127,127,127,.1); }
body.ls-portfolio .cs-gallery .ph { aspect-ratio: 16 / 9; border-radius: 4px; }
body.ls-portfolio .cs-phones { grid-column: span 12; display: flex; justify-content: center; gap: clamp(12px, 2vw, 32px); padding: clamp(32px, 5vw, 80px) 0; flex-wrap: wrap; }
body.ls-portfolio .cs-phones img { width: clamp(140px, 17vw, 260px); border-radius: 28px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); border: 6px solid #0a0a0a; }
body.ls-portfolio .cs-scrollphone { grid-column: span 12; display: grid; place-items: center; padding: clamp(32px, 5vw, 80px) 0; }
body.ls-portfolio .cs-scrollphone__frame { width: min(300px, 70vw); aspect-ratio: 9 / 19.5; border-radius: 40px; border: 10px solid #0a0a0a; overflow: hidden; position: relative; background: #fff; box-shadow: 0 40px 80px -20px rgba(0,0,0,.6); }
body.ls-portfolio .cs-scrollphone__frame img { position: absolute; top: 0; left: 0; width: 100%; height: auto; animation: phoneScroll 14s ease-in-out infinite alternate; }
@keyframes phoneScroll { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(calc(-100% + min(300px, 70vw) * 19.5 / 9 - 20px)); } }

body.ls-portfolio .cs-quote { padding: clamp(80px, 12vw, 200px) var(--side); text-align: center; }
body.ls-portfolio .cs-quote p { font-family: var(--f-serif); font-style: italic; font-size: clamp(40px, 6.4vw, 120px); line-height: 1; letter-spacing: -.02em; max-width: 16ch; margin: 0 auto; }
body.ls-portfolio .cs-quote span { display: block; margin-top: 24px; opacity: .6; }

body.ls-portfolio .cs-next { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 var(--side); position: relative; cursor: pointer; border-top: 1px solid rgba(127,127,127,.2); }
body.ls-portfolio .cs-next__label { opacity: .6; margin-bottom: 24px; }
body.ls-portfolio .cs-next__title { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(40px, 9vw, 180px); line-height: .85; letter-spacing: -.055em; transition: color .4s; }
body.ls-portfolio .cs-next:hover .cs-next__title { color: var(--next-accent, var(--accent)); }
body.ls-portfolio .cs-next__bar { width: min(420px, 70vw); height: 2px; background: rgba(127,127,127,.25); margin-top: 40px; position: relative; overflow: hidden; }
body.ls-portfolio .cs-next__bar i { position: absolute; inset: 0; background: var(--next-accent, var(--accent)); transform-origin: left; transform: scaleX(0); }
body.ls-portfolio .cs-next__hint { margin-top: 14px; opacity: .5; }

/* ---------- toast ---------- */
body.ls-portfolio .toast { position: fixed; left: 50%; bottom: 28px; z-index: 9600; transform: translate(-50%, calc(100% + 48px)); color: var(--paper); padding: 14px 20px; border-radius: 999px; transition: transform .5s var(--ease-out); pointer-events: none; }
body.ls-portfolio .toast.is-on { transform: translate(-50%, 0); }

/* ---------- reveal defaults (JS-guarded) ---------- */
.js body.ls-portfolio .reveal-img { clip-path: inset(100% 0 0 0); }

/* =========================================================
   LIQUID GLASS
   Frosted, saturated backdrop + specular rim. In Chromium the
   backdrop is also refracted through an SVG displacement filter
   (#liquid-glass, see index.html) — html.liquid is set by script.js.
   ========================================================= */
:root {
  --glass-bg: rgba(22, 22, 22, .32);
  --glass-rim: rgba(255, 255, 255, .55);
  --glass-rim-2: rgba(255, 255, 255, .14);
  --glass-shadow: 0 18px 40px -18px rgba(0, 0, 0, .65);
  --glass-blur: blur(14px) saturate(185%) brightness(1.05);
}
:root[data-theme="light"] {
  --glass-bg: rgba(255, 255, 255, .42);
  --glass-rim: rgba(255, 255, 255, .95);
  --glass-rim-2: rgba(0, 0, 0, .08);
  --glass-shadow: 0 18px 40px -18px rgba(0, 0, 0, .25);
}
body.ls-portfolio .glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow:
    inset 0 1px 1px var(--glass-rim),
    inset 0 -1px 1px var(--glass-rim-2),
    inset 0 0 0 1px var(--glass-rim-2),
    inset 0 0 24px rgba(255, 255, 255, .06),
    var(--glass-shadow);
}
body.ls-portfolio .glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(140deg, var(--glass-rim) 0%, transparent 32%, transparent 68%, rgba(255,255,255,.3) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.liquid body.ls-portfolio .glass--refract { backdrop-filter: url(#liquid-glass) blur(3px) saturate(190%) brightness(1.08); }
.liquid body.ls-portfolio .glass--refract-soft { backdrop-filter: url(#liquid-glass-soft) blur(8px) saturate(185%) brightness(1.05); }

body.ls-portfolio .btn, body.ls-portfolio .header__logo, body.ls-portfolio .header__nav, body.ls-portfolio .pill, body.ls-portfolio .theme-toggle, body.ls-portfolio .burger, body.ls-portfolio .contact__big, body.ls-portfolio .chips li, body.ls-portfolio .film__link { position: relative; }

/* header: floating glass pills */
body.ls-portfolio .header__logo.glass, body.ls-portfolio .header__nav.glass { border-radius: 999px; padding: 10px 20px; }
body.ls-portfolio .header__logo.glass { font-size: 20px; }
body.ls-portfolio .header__nav.glass { gap: 28px; }
body.ls-portfolio .header .pill.glass { border: 0; }
body.ls-portfolio .theme-toggle.glass, body.ls-portfolio .burger.glass { border: 0; }

/* buttons */
body.ls-portfolio .btn--accent { background: var(--accent); color: var(--accent-ink); }
body.ls-portfolio .btn--accent:hover { background: var(--paper); color: var(--ink); }
body.ls-portfolio .btn--glass { border-radius: 999px; color: var(--fg); }
body.ls-portfolio .btn--glass:hover { background: color-mix(in srgb, var(--fg) 14%, transparent); }
body.ls-portfolio .film__link.glass { border: 0; color: var(--paper); }
body.ls-portfolio .case__close.glass { background: rgba(255,255,255,.18); color: var(--case-fg, var(--paper)); }
body.ls-portfolio .toast.glass { background: rgba(22,22,22,.5); }

/* hero glass objects (they sit in front of the name and bend it) */
body.ls-portfolio .hero__shapes { z-index: 2; }
body.ls-portfolio .hs.glass { border-radius: 999px; --glass-bg: rgba(255,255,255,.035); }
body.ls-portfolio .hs--square.glass { border-radius: 2.2vw; }

/* looking-for: glass panel over drifting shapes */
body.ls-portfolio .looking__bg { position: absolute; inset: 0; pointer-events: none; }
body.ls-portfolio .looking__bg span { position: absolute; display: block; border-radius: 999px; will-change: transform; }
body.ls-portfolio .looking__bg span:nth-child(1) { width: 34vw; height: 34vw; left: -6vw; top: 10%; border-radius: 50%; background: var(--paper); }
body.ls-portfolio .looking__bg span:nth-child(2) { width: 30vw; height: 11vw; right: 4vw; top: 18%; background: #3A3A3A; }
body.ls-portfolio .looking__bg span:nth-child(3) { width: 3vw; height: 3vw; right: 26vw; bottom: 18%; border-radius: 50%; background: var(--accent); }
body.ls-portfolio .looking__bg span:nth-child(4) { width: 22vw; height: 22vw; right: -4vw; bottom: -6vw; border-radius: 50%; border: 1px solid var(--hair); }
body.ls-portfolio .looking__panel.glass { --glass-bg: rgba(16,16,16,.55); }
body.ls-portfolio .looking__panel { position: relative; border-radius: clamp(24px, 3vw, 44px); padding: clamp(32px, 5vw, 80px); }
body.ls-portfolio .looking__title em { font-style: normal; color: var(--accent-text); }

/* contact: glass CTA + glass shapes */
body.ls-portfolio .contact__big.glass { color: var(--paper); --glass-bg: rgba(14,14,14,.5); }
body.ls-portfolio .contact__big span { position: relative; }
body.ls-portfolio .contact__big b { color: var(--accent-text); font-weight: inherit; }
body.ls-portfolio .cs.glass { border: 0; }
body.ls-portfolio .contact__cta { position: relative; isolation: isolate; }
body.ls-portfolio .contact__orb { position: absolute; z-index: -1; left: -14%; top: 30%; width: 78%; height: 40%; border-radius: 999px; background: var(--paper); animation: orb 9s ease-in-out infinite alternate; }
body.ls-portfolio .contact__orb::after { content: ""; position: absolute; right: -30%; top: -60%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); }
@keyframes orb { to { transform: translate(38%, -18%) rotate(-28deg); } }
body.ls-portfolio .story__card.glass { border: 0; }
body.ls-portfolio .story__card--next.glass:hover { background: var(--fg); color: var(--bg); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1199px) {
  body.ls-portfolio .stats__grid { grid-template-columns: repeat(3, 1fr); }
  body.ls-portfolio .stats__grid li { border-bottom: 1px solid var(--hair); padding-bottom: 28px; }
  body.ls-portfolio .stats__grid li:nth-child(3n+1) { padding-left: 0; }
  body.ls-portfolio .stats__grid li:nth-child(3n) { border-right: 0; }
  body.ls-portfolio .skills__wrap { grid-template-columns: 1fr; }
  body.ls-portfolio .work__row a { grid-template-columns: 60px 1fr auto; }
  body.ls-portfolio .work__row-year { display: none; }
}

@media (max-width: 767px) {
  body.ls-portfolio { font-size: 17px; }
  body.ls-portfolio .header__nav, body.ls-portfolio .pill--status { display: none; }
  body.ls-portfolio .burger { display: block; }
  body.ls-portfolio .hero { padding-top: 110px; justify-content: flex-end; padding-bottom: 28px; }
  body.ls-portfolio .hero__meta { flex-direction: column; gap: 4px; margin-bottom: 20px; }
  body.ls-portfolio .hero__meta span:last-child { display: none; }
  body.ls-portfolio .hero__line--2 { -webkit-text-stroke-width: 1px; }
  body.ls-portfolio .hero__bottom { grid-template-columns: 1fr; gap: 20px; padding-top: 32px; }
  body.ls-portfolio .hero__scroll { display: none; }
  body.ls-portfolio .hs--circle { width: 34vw; height: 34vw; top: auto; bottom: 19vh; right: 4vw; }
  body.ls-portfolio .hs--square { width: 20vw; height: 20vw; top: 20vh; border-radius: 5vw; }
  body.ls-portfolio .hs--square.glass { border-radius: 5vw; }
  body.ls-portfolio .hs--pill { width: 40vw; height: 14vw; top: auto; bottom: 24vh; left: 6vw; }
  body.ls-portfolio .hs--arc { width: 3vw; height: 3vw; right: 30vw; top: 16vh; }
  body.ls-portfolio .looking__bg span:nth-child(1) { width: 70vw; height: 70vw; top: 48%; }
  body.ls-portfolio .looking__bg span:nth-child(2) { width: 60vw; height: 20vw; top: 6%; }
  body.ls-portfolio .hs--tri { display: none; }

  body.ls-portfolio .film { height: 280vh; }
  body.ls-portfolio .film__ui { bottom: 20px; }
  body.ls-portfolio .film__link { display: none; }
  body.ls-portfolio .fs-steps { display: none; }
  body.ls-portfolio .film__ui { grid-template-columns: 1fr; }

  body.ls-portfolio .stats__grid { grid-template-columns: repeat(2, 1fr); }
  body.ls-portfolio .stats__grid li, body.ls-portfolio .stats__grid li:nth-child(3n+1) { padding-left: 16px; }
  body.ls-portfolio .stats__grid li:nth-child(odd) { padding-left: 0; }
  body.ls-portfolio .stats__grid li:nth-child(3n) { border-right: 1px solid var(--hair); }
  body.ls-portfolio .stats__grid li:nth-child(even) { border-right: 0; }

  body.ls-portfolio .work__row a { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  body.ls-portfolio .work__row-num { order: -1; }
  body.ls-portfolio .work__row-disc { font-size: 11px; }
  body.ls-portfolio .work__row-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; margin-top: 10px; }
  body.ls-portfolio .work__row-thumb img, body.ls-portfolio .work__row-thumb .ph { width: 100%; height: 100%; object-fit: cover; }
  body.ls-portfolio .work__row a:hover .work__row-title { transform: none; }
  body.ls-portfolio .work__preview { display: none; }
  body.ls-portfolio .work__index { margin-bottom: 96px; }
  body.ls-portfolio .work__grid { grid-template-columns: 1fr; gap: 72px; }
  body.ls-portfolio .card, body.ls-portfolio .card:nth-child(n) { grid-column: 1 / -1; margin-top: 0; }

  body.ls-portfolio .about { grid-template-columns: 1fr; }
  body.ls-portfolio .about__media { position: relative; top: 0; max-width: 320px; }
  body.ls-portfolio .caps { grid-template-columns: 1fr; }
  body.ls-portfolio .caps li { min-height: 0; }
  body.ls-portfolio .caps h3 { margin-top: 24px; }

  body.ls-portfolio .story__pin { height: auto; padding: 96px 0; }
  body.ls-portfolio .story__track { flex-direction: column; width: auto; }
  body.ls-portfolio .story__card { width: 100%; height: 400px; }

  body.ls-portfolio .looking__row { grid-template-columns: 1fr; }
  body.ls-portfolio .contact__row { grid-template-columns: 1fr; justify-items: start; }
  body.ls-portfolio .contact__title > span:nth-child(2) { padding-left: 0; }
  body.ls-portfolio .cs--circle { width: 60vw; height: 60vw; }

  body.ls-portfolio .cs-block { grid-template-columns: 1fr; }
  body.ls-portfolio .cs-meta { grid-template-columns: 1fr 1fr; }
  body.ls-portfolio .cs-gallery .g-half, body.ls-portfolio .cs-gallery .g-third, body.ls-portfolio .cs-gallery .g-wide { grid-column: span 12; }
  body.ls-portfolio .case__close { top: 14px; }
  body.ls-portfolio .footer__cols { flex-direction: column; }
}

@media (hover: none) {
  body.ls-portfolio .work__preview { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.ls-portfolio *, body.ls-portfolio *::before, body.ls-portfolio *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  body.ls-portfolio .grain::before { animation: none; }
  body.ls-portfolio .film { height: auto; }
  body.ls-portfolio .film__sticky { position: relative; }
  .js body.ls-portfolio .reveal-img { clip-path: none; }
}

/* theme switch (View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
body.ls-portfolio .contact__title .c { will-change: transform; }
body.ls-portfolio .cs-hero__media--contain { background: #fff; }
body.ls-portfolio .cs-hero__media--contain video, body.ls-portfolio .cs-hero__media--contain img { object-fit: contain; padding: 8vh 0 34vh; }
body.ls-portfolio .cs-hero__media--contain::after { background: linear-gradient(to top, var(--case-bg, #0E0E0E) 22%, transparent 55%); }

/* ---------- locked project ("Coming soon") ---------- */
body.ls-portfolio .lock-badge { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }
body.ls-portfolio .lock-badge > span { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; color: var(--paper); font-family: var(--f-mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
body.ls-portfolio .lock-badge svg, body.ls-portfolio .work__row .soon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex: none; }
body.ls-portfolio .card.is-locked a { cursor: not-allowed; }
body.ls-portfolio .card.is-locked .card__media img, body.ls-portfolio .card.is-locked .card__media video, body.ls-portfolio .work__row.is-locked .work__row-thumb img, body.ls-portfolio .lock-preview img { filter: blur(18px) grayscale(.5) brightness(.8); scale: 1.15; }
body.ls-portfolio .card.is-locked a:hover .card__media img { scale: 1.15; }
body.ls-portfolio .card.is-locked .card__title { opacity: .55; }
body.ls-portfolio .work__row.is-locked a { cursor: not-allowed; }
body.ls-portfolio .work__row.is-locked .work__row-title { opacity: .45; }
body.ls-portfolio .work__row.is-locked a:hover .work__row-title { transform: none; }
body.ls-portfolio .work__row .soon { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-text); white-space: nowrap; }
body.ls-portfolio .work__row-thumb { position: relative; }
body.ls-portfolio .lock-preview { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; overflow: hidden; }
body.ls-portfolio .lock-preview.is-on { opacity: 1; }
body.ls-portfolio .lock-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
/* neutral artwork for locked projects (no project images are shown) */
body.ls-portfolio .lock-art { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 30% 20%, #1c1f2b 0%, var(--ink-2) 55%, var(--ink) 100%); }
body.ls-portfolio .lock-art i { position: absolute; display: block; border-radius: 50%; }
body.ls-portfolio .lock-art i:nth-child(1) { width: 70%; aspect-ratio: 1; right: -18%; top: -22%; border: 1px solid var(--line); }
body.ls-portfolio .lock-art i:nth-child(2) { width: 46%; height: 16%; border-radius: 999px; left: 10%; bottom: 16%; background: rgba(242,239,233,.06); border: 1px solid rgba(242,239,233,.08); }
body.ls-portfolio .lock-art i:nth-child(3) { width: 4%; aspect-ratio: 1; left: 22%; top: 24%; background: var(--accent-text); opacity: .8; }
body.ls-portfolio .work__row-thumb .lock-art, body.ls-portfolio .lock-preview .lock-art { position: absolute; }

/* ---------- clickable prototype (case study) ---------- */
body.ls-portfolio .proto { grid-column: span 12; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(32px, 5vw, 80px) 0; }
body.ls-portfolio .proto__phone { width: min(320px, 78vw); aspect-ratio: 440 / 956; padding: 10px; border-radius: 46px; background: #0a0a0a; box-shadow: 0 0 0 1.5px #2b2b2b, 0 40px 90px -25px rgba(0,0,0,.55); }
body.ls-portfolio .proto__screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #F4F1EA; user-select: none; }
body.ls-portfolio .proto__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease-out), filter .45s; will-change: transform; }
body.ls-portfolio .proto__img--old { z-index: 0; }
body.ls-portfolio .proto__img:not(.proto__img--old) { z-index: 1; }
body.ls-portfolio .proto__hs { position: absolute; inset: 0; z-index: 2; }
body.ls-portfolio .proto__hot { position: absolute; border-radius: 10px; background: transparent; outline: 2px solid transparent; outline-offset: 1px; transition: background-color .2s, outline-color .2s; }
body.ls-portfolio .proto__hot:hover, body.ls-portfolio .proto__hot:focus-visible { background: rgba(43,89,255,.16); outline-color: rgba(43,89,255,.75); }
body.ls-portfolio .proto.is-hinting .proto__hot { animation: protoHint 1.2s ease-out; }
@keyframes protoHint { 0%, 100% { background: transparent; outline-color: transparent; } 25% { background: rgba(43,89,255,.28); outline-color: #2B59FF; } }
body.ls-portfolio .proto__eyebrow { color: var(--case-accent); }
body.ls-portfolio .proto__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(36px, 4.5vw, 72px); line-height: .92; letter-spacing: -.045em; margin: 12px 0 16px; }
body.ls-portfolio .proto__text { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.45; max-width: 42ch; opacity: .8; }
body.ls-portfolio .proto__now { margin-top: 28px; opacity: .6; }
body.ls-portfolio .proto__now b { font-weight: 500; opacity: 1; color: var(--case-accent); }
body.ls-portfolio .proto__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; list-style: none; max-width: 560px; }
body.ls-portfolio .proto__list button { padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(127,127,127,.3); color: inherit; transition: background-color .2s, color .2s, border-color .2s; }
body.ls-portfolio .proto__list button:hover { border-color: var(--case-accent); }
body.ls-portfolio .proto__list button.is-on { background: var(--case-accent); border-color: var(--case-accent); color: #fff; }
body.ls-portfolio .proto__btns { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
body.ls-portfolio .proto .btn--glass { color: var(--case-fg, var(--fg)); --glass-bg: rgba(127,127,127,.12); min-height: 48px; }
body.ls-portfolio .proto .btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 767px) {
  body.ls-portfolio .proto { grid-template-columns: 1fr; justify-items: center; text-align: left; }
  body.ls-portfolio .proto__side { width: 100%; }
}

/* =========================================================
   CASE EXTRAS — fan hero, video showcase, stats, phone strip, brand
   ========================================================= */
body.ls-portfolio .cs-hero__media--fan::after { background: linear-gradient(to top, var(--case-bg, #fff) 6%, transparent 38%); }
body.ls-portfolio .cs-fan { position: absolute; inset: 0; overflow: hidden; background: var(--case-bg); }
body.ls-portfolio .cs-fan__circle { position: absolute; width: min(66vw, 920px); aspect-ratio: 1; border-radius: 50%; background: var(--case-accent); right: -12vw; top: 50%; transform: translateY(-58%); }
body.ls-portfolio .cs-fan__mark { position: absolute; left: var(--side); top: clamp(100px, 15vh, 170px); z-index: 2; }
body.ls-portfolio .cs-fan__mark img { width: clamp(200px, 28vw, 500px); height: auto; }
body.ls-portfolio .cs-fan__mark p { margin-top: 12px; opacity: .6; }
body.ls-portfolio .cs-fan__phones { position: absolute; right: clamp(16px, 11vw, 220px); top: 50%; transform: translateY(-58%); width: min(44vw, 620px); height: min(70vh, 660px); }
body.ls-portfolio .cs-fan__phones img { position: absolute; top: 50%; left: 50%; height: 100%; width: auto; aspect-ratio: 440 / 956; object-fit: cover; border-radius: 34px; border: 8px solid #0b0b0b; background: #fff; box-shadow: 0 30px 70px -25px rgba(0,0,0,.5); animation: fanIn 1.1s var(--ease-out) both; }
body.ls-portfolio .cs-fan__phones img:nth-child(1) { transform: translate(-112%, -47%) rotate(-9deg) scale(.86); animation-delay: .55s; }
body.ls-portfolio .cs-fan__phones img:nth-child(2) { transform: translate(-50%, -52%); z-index: 2; animation-delay: .45s; }
body.ls-portfolio .cs-fan__phones img:nth-child(3) { transform: translate(12%, -47%) rotate(9deg) scale(.86); animation-delay: .65s; }
@keyframes fanIn { from { opacity: 0; translate: 0 80px; } to { opacity: 1; translate: 0 0; } }

body.ls-portfolio .cs-showcase { padding: clamp(56px, 8vw, 120px) var(--side) 0; }
body.ls-portfolio .cs-showcase__label { color: var(--case-accent); margin-bottom: 16px; }
body.ls-portfolio .cs-showcase__frame { position: relative; overflow: hidden; border-radius: clamp(16px, 2vw, 28px); background: #000; box-shadow: 0 50px 100px -40px rgba(0,0,0,.45); }
body.ls-portfolio .cs-showcase__frame video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
body.ls-portfolio .cs-showcase__ui { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 8px; z-index: 2; }
body.ls-portfolio .cs-showcase__ui button { padding: 10px 16px; border-radius: 999px; color: #fff; --glass-bg: rgba(0,0,0,.35); }

body.ls-portfolio .cs-stats { grid-column: span 12; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(127,127,127,.25); border-bottom: 1px solid rgba(127,127,127,.25); }
body.ls-portfolio .cs-stats > div { padding: 28px 20px 28px 0; }
body.ls-portfolio .cs-stats > div + div { padding-left: 20px; border-left: 1px solid rgba(127,127,127,.25); }
body.ls-portfolio .cs-stats b { display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(48px, 6vw, 96px); line-height: 1; letter-spacing: -.05em; color: var(--case-accent); }
body.ls-portfolio .cs-stats span { display: block; margin-top: 10px; opacity: .6; }

body.ls-portfolio .cs-phonestrip { grid-column: span 12; margin: 24px calc(var(--side) * -1) 0; }
body.ls-portfolio .cs-phonestrip__head { display: flex; justify-content: space-between; padding: 0 var(--side); opacity: .6; }
body.ls-portfolio .cs-phonestrip__track { display: flex; gap: clamp(16px, 2vw, 32px); overflow-x: auto; padding: 24px var(--side) 56px; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; }
body.ls-portfolio .cs-phonestrip__track::-webkit-scrollbar { display: none; }
body.ls-portfolio .cs-phonestrip__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
body.ls-portfolio .cs-phonestrip figure { flex: 0 0 auto; width: clamp(170px, 17vw, 250px); scroll-snap-align: start; }
body.ls-portfolio .cs-phonestrip figure:nth-child(even) { margin-top: 56px; }
body.ls-portfolio .cs-phonestrip img { width: 100%; aspect-ratio: 440 / 956; object-fit: cover; border-radius: 26px; border: 6px solid #0b0b0b; background: #fff; box-shadow: 0 24px 50px -24px rgba(0,0,0,.45); user-select: none; -webkit-user-drag: none; }

body.ls-portfolio .cs-brand { grid-column: span 12; display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: clamp(24px, 3vw, 56px); padding: clamp(28px, 4vw, 56px); border-radius: 24px; background: #fff; border: 1px solid #E0E0D9; color: #000; }
body.ls-portfolio .cs-brand > div > .mono { display: block; margin-bottom: 18px; color: var(--case-accent); }
body.ls-portfolio .cs-brand__mark img { width: 100%; max-width: 320px; height: auto; }
body.ls-portfolio .cs-brand__colors > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 16px; }
body.ls-portfolio .cs-brand__colors i { display: block; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12); margin-bottom: 8px; }
body.ls-portfolio .cs-brand__colors b { display: block; font-size: 11px; }
body.ls-portfolio .cs-brand__colors span { font-size: 13px; opacity: .6; }
body.ls-portfolio .cs-brand__fonts > div { padding: 12px 0; border-top: 1px solid #E0E0D9; }
body.ls-portfolio .cs-brand__fonts b { display: block; font-size: clamp(18px, 1.6vw, 24px); font-weight: 600; letter-spacing: -.01em; }
body.ls-portfolio .cs-brand__fonts span { opacity: .6; }

@media (max-width: 767px) {
  body.ls-portfolio .cs-fan__circle { width: 120vw; right: -40vw; top: 58%; }
  body.ls-portfolio .cs-fan__mark { top: 96px; }
  body.ls-portfolio .cs-fan__phones { width: 86vw; height: 44vh; right: 7vw; top: 52%; }
  body.ls-portfolio .cs-fan__phones img { border-width: 5px; border-radius: 22px; }
  body.ls-portfolio .cs-stats { grid-template-columns: 1fr 1fr; }
  body.ls-portfolio .cs-stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  body.ls-portfolio .cs-stats > div:nth-child(n+3) { border-top: 1px solid rgba(127,127,127,.25); }
  body.ls-portfolio .cs-brand { grid-template-columns: 1fr; }
}

/* =========================================================
   MYSTERYLAND — aurora hero, marquee, app scroll, tilt posters, folder flip
   colours from the Mysteryland gradients
   ========================================================= */
:root { --ml-purple: #8A1CF0; --ml-blue: #3D2BF5; --ml-green: #4DDB8A; --ml-pink: #E255D8; --ml-orange: #FF8A2B; --ml-yellow: #F2E51C; }
body.ls-portfolio .cs-hero__media--aurora::after { background: linear-gradient(to top, var(--case-bg) 4%, rgba(18,7,38,.25) 45%, transparent 70%); }
body.ls-portfolio .cs-aurora { position: absolute; inset: 0; overflow: hidden; background: #120726; --mx: 0; --my: 0; }
body.ls-portfolio .cs-aurora__blob { position: absolute; width: 62vw; aspect-ratio: 1; border-radius: 50%; filter: blur(70px); opacity: .8; mix-blend-mode: screen; will-change: transform; }
body.ls-portfolio .cs-aurora__blob.b1 { background: var(--ml-purple); left: -14vw; top: -20vh; animation: mlDrift 16s ease-in-out infinite alternate; }
body.ls-portfolio .cs-aurora__blob.b2 { background: var(--ml-blue); right: -18vw; top: -10vh; animation: mlDrift 19s ease-in-out -4s infinite alternate-reverse; }
body.ls-portfolio .cs-aurora__blob.b3 { background: var(--ml-green); left: 18vw; bottom: -36vh; opacity: .55; animation: mlDrift 22s ease-in-out -8s infinite alternate; }
body.ls-portfolio .cs-aurora__blob.b4 { background: var(--ml-pink); right: 6vw; bottom: -30vh; width: 40vw; opacity: .6; animation: mlDrift 14s ease-in-out -2s infinite alternate-reverse; }
@keyframes mlDrift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8vw, 6vh) scale(1.15); } 100% { transform: translate(-6vw, 10vh) scale(.92); } }
body.ls-portfolio .cs-aurora__words { position: absolute; left: var(--side); top: clamp(100px, 15vh, 170px); z-index: 2; color: #fff; letter-spacing: .2em; }
body.ls-portfolio .cs-aurora__words i { font-style: normal; color: var(--ml-yellow); margin: 0 6px; }
body.ls-portfolio .cs-aurora__posters { position: absolute; right: clamp(16px, 8vw, 160px); top: 50%; width: min(48vw, 680px); height: min(64vh, 600px); transform: translate(calc(var(--mx) * -30px), calc(-55% + var(--my) * -24px)); transition: transform .6s var(--ease-out); perspective: 1200px; }
body.ls-portfolio .cs-aurora__posters img { position: absolute; top: 50%; left: 50%; height: 100%; width: auto; border-radius: 6px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); animation: fanIn 1.1s var(--ease-out) both; transition: transform .6s var(--ease-out); }
body.ls-portfolio .cs-aurora__posters .p0 { transform: translate(-118%, -46%) rotate(-10deg) rotateY(calc(var(--mx) * 20deg)) scale(.82); animation-delay: .55s; }
body.ls-portfolio .cs-aurora__posters .p1 { transform: translate(-50%, -52%) rotateY(calc(var(--mx) * 16deg)) rotateX(calc(var(--my) * -12deg)); z-index: 2; animation-delay: .45s; }
body.ls-portfolio .cs-aurora__posters .p2 { transform: translate(18%, -46%) rotate(10deg) rotateY(calc(var(--mx) * 20deg)) scale(.82); animation-delay: .65s; }

body.ls-portfolio .cs-marquee { grid-column: span 12; margin: 0 calc(var(--side) * -1); overflow: hidden; padding: 18px 0; transform: rotate(-2deg); background: linear-gradient(90deg, var(--ml-pink), var(--ml-purple) 30%, var(--ml-blue) 60%, var(--ml-green)); }
body.ls-portfolio .cs-marquee > div { display: flex; width: max-content; animation: mlMarquee 22s linear infinite; }
body.ls-portfolio .cs-marquee span { font-family: var(--f-display); font-weight: 800; font-size: clamp(36px, 6vw, 96px); letter-spacing: -.04em; text-transform: uppercase; color: #fff; line-height: 1; padding: 0 .3em; }
body.ls-portfolio .cs-marquee i { font-style: normal; color: var(--ml-yellow); font-size: clamp(28px, 4vw, 64px); align-self: center; }
@keyframes mlMarquee { to { transform: translateX(-50%); } }

body.ls-portfolio .cs-appscroll { grid-column: span 12; height: 220vh; }
body.ls-portfolio .cs-appscroll__sticky { position: sticky; top: 8vh; height: 84vh; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
body.ls-portfolio .cs-appscroll__phone { height: min(80vh, 680px); aspect-ratio: 9 / 19.5; padding: 10px; border-radius: 44px; background: #0a0a0a; box-shadow: 0 0 0 1.5px #2b2b2b, 0 0 80px -10px rgba(138,28,240,.55), 0 40px 90px -30px rgba(0,0,0,.8); }
body.ls-portfolio .cs-appscroll__screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 34px; background: #fff; }
body.ls-portfolio .cs-appscroll__screen img { position: absolute; top: 0; left: 0; width: 100%; height: auto; will-change: transform; }
body.ls-portfolio .cs-appscroll__text > .mono { color: var(--case-accent); }
body.ls-portfolio .cs-appscroll__text p { font-size: clamp(20px, 2vw, 30px); line-height: 1.3; margin: 14px 0 24px; max-width: 26ch; }
body.ls-portfolio .cs-appscroll__text ul { list-style: none; display: grid; gap: 10px; }
body.ls-portfolio .cs-appscroll__text li { display: flex; align-items: center; gap: 12px; opacity: .35; transition: opacity .3s, color .3s; }
body.ls-portfolio .cs-appscroll__text li::before { content: ""; width: 18px; height: 1px; background: currentColor; transition: width .3s; }
body.ls-portfolio .cs-appscroll__text li.is-on { opacity: 1; color: var(--case-accent); }
body.ls-portfolio .cs-appscroll__text li.is-on::before { width: 40px; }

body.ls-portfolio .cs-tilts { grid-column: span 12; }
body.ls-portfolio .cs-tilts__title { display: block; color: var(--case-accent); margin-bottom: 20px; }
body.ls-portfolio .cs-tilts__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 32px); }
body.ls-portfolio .cs-tilt:nth-child(even) { margin-top: 48px; }
body.ls-portfolio .cs-tilt__card { position: relative; border-radius: 8px; overflow: hidden; transform-style: preserve-3d; transition: transform .5s var(--ease-out), box-shadow .5s; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); --gx: 50%; --gy: 50%; }
body.ls-portfolio .cs-tilt__card:hover { box-shadow: 0 40px 80px -30px rgba(138,28,240,.7); }
body.ls-portfolio .cs-tilt__card img { display: block; width: 100%; height: auto; }
body.ls-portfolio .cs-tilt__glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.45), transparent 45%); mix-blend-mode: overlay; opacity: 0; transition: opacity .3s; }
body.ls-portfolio .cs-tilt__card:hover .cs-tilt__glare { opacity: 1; }

body.ls-portfolio .cs-flip { grid-column: span 12; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(32px, 5vw, 80px) 0; }
body.ls-portfolio .cs-flip__text > .mono { color: var(--case-accent); }
body.ls-portfolio .cs-flip__text p { font-size: clamp(20px, 2vw, 30px); line-height: 1.3; margin: 14px 0 24px; max-width: 24ch; }
body.ls-portfolio .cs-flip__btn { padding: 12px 18px; border-radius: 999px; color: #fff; }
body.ls-portfolio .cs-flip__card { position: relative; width: min(46vw, 640px); aspect-ratio: 2200 / 1565; perspective: 1600px; cursor: pointer; }
body.ls-portfolio .cs-flip__face { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .9s var(--ease-io); border-radius: 6px; }
body.ls-portfolio .cs-flip__face img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); }
body.ls-portfolio .cs-flip__face--back { transform: rotateY(180deg); }
body.ls-portfolio .cs-flip.is-flipped .cs-flip__face--front { transform: rotateY(-180deg); }
body.ls-portfolio .cs-flip.is-flipped .cs-flip__face--back { transform: rotateY(0deg); }

@media (max-width: 767px) {
  body.ls-portfolio .cs-aurora__posters { width: 90vw; height: 42vh; right: 5vw; top: 52%; }
  body.ls-portfolio .cs-appscroll { height: auto; }
  body.ls-portfolio .cs-appscroll__sticky { position: relative; top: 0; height: auto; grid-template-columns: 1fr; justify-items: center; }
  body.ls-portfolio .cs-appscroll__phone { height: 70vh; }
  body.ls-portfolio .cs-tilts__row { grid-template-columns: 1fr 1fr; }
  body.ls-portfolio .cs-flip { grid-template-columns: 1fr; }
  body.ls-portfolio .cs-flip__card { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { body.ls-portfolio .cs-aurora__blob, body.ls-portfolio .cs-marquee > div { animation: none; } }
body.ls-portfolio .cs-gallery .cs-tilts__row figure.cs-tilt, body.ls-portfolio .cs-gallery .cs-phonestrip figure { grid-column: auto; }
body.ls-portfolio .cs-gallery .cs-flip__face img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
body.ls-portfolio .cs-gallery .cs-flip__face img { position: absolute; inset: 0; margin: auto; }

/* =========================================================
   GOLDEN BURGER — case page (alleen kleuren uit het styleboard)
   ========================================================= */
body.ls-portfolio .case[data-slug="golden-burger"] { --gb-yellow: #FFDB40; --gb-tan: #D6A673; --gb-green: #7DBD5F; --gb-blue: #58C3E8; --gb-koulen: "Koulen", var(--f-display); --gb-mont: "Montserrat", var(--f-body); }
body.ls-portfolio .case[data-slug="golden-burger"] .cs-hero__num, body.ls-portfolio .case[data-slug="golden-burger"] .cs-block h2, body.ls-portfolio .case[data-slug="golden-burger"] .cs-block li::before, body.ls-portfolio .case[data-slug="golden-burger"] .cs-gallery .mono:not(.cs-builder__order):not(.gb-plain) { color: #000; }
body.ls-portfolio .case[data-slug="golden-burger"] .cs-hero__title .w:first-child .c:first-child { color: #fff; }
body.ls-portfolio .case[data-slug="golden-burger"] .cs-meta { border-top-color: rgba(0,0,0,.25); }
body.ls-portfolio .case[data-slug="golden-burger"] .cs-stats b { color: #000; }
body.ls-portfolio .case[data-slug="golden-burger"] .cs-stats b::after { content: ""; display: block; width: 1.2em; height: .16em; margin-top: .1em; background: var(--gb-yellow); border-radius: 99px; }
body.ls-portfolio .case[data-slug="golden-burger"] .cs-strip img { border: 1px solid rgba(0,0,0,.1); border-radius: 16px; }
body.ls-portfolio .case[data-slug="golden-burger"] .cs-gallery img:not(.cs-builder img):not(.cs-gbbrand img) { border-radius: 20px; border: 1px solid rgba(0,0,0,.1); background: #fff; }

/* hero: yellow stage with floating ingredients */
body.ls-portfolio .cs-hero__media--burger { background: #FFDB40; }
body.ls-portfolio .cs-hero__media--burger::after { display: none; }
body.ls-portfolio .cs-gb { position: absolute; inset: 0; overflow: hidden; --mx: 0; --my: 0; }
body.ls-portfolio .cs-gb__flag { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; display: flex; flex-direction: column; }
body.ls-portfolio .cs-gb__flag i { flex: 1; } body.ls-portfolio .cs-gb__flag i:nth-child(1) { background: #000; } body.ls-portfolio .cs-gb__flag i:nth-child(2) { background: #DD0000; } body.ls-portfolio .cs-gb__flag i:nth-child(3) { background: #FFCE00; }
body.ls-portfolio .cs-gb__plate { position: absolute; width: min(60vh, 40vw); aspect-ratio: 1; right: 9vw; top: 46%; border-radius: 50%; background: #fff; overflow: hidden; box-shadow: 0 0 0 clamp(10px, 1.4vw, 22px) var(--gb-tan, #D6A673), 0 40px 80px -30px rgba(0,0,0,.45);
  transform: translate(calc(var(--mx) * -18px), calc(-50% + var(--my) * -18px)); transition: transform .5s var(--ease-out); animation: gbPlateIn 1s .15s var(--ease-out) both; }
body.ls-portfolio .cs-hero__media--burger .cs-gb__plate video { width: 100%; height: 100%; object-fit: contain; padding: 0; transform: scale(1.8); }
@keyframes gbPlateIn { from { scale: .4; opacity: 0; } to { scale: 1; opacity: 1; } }
body.ls-portfolio .cs-gb__item { position: absolute; left: var(--x); top: var(--y); width: var(--w); padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto;
  transform: translate(calc(var(--mx) * var(--d) * 1px), calc(var(--my) * var(--d) * 1px)) rotate(var(--r)); transition: transform .6s var(--ease-out); }
body.ls-portfolio .cs-gb__item img { width: 100%; height: auto; filter: drop-shadow(0 18px 18px rgba(120, 80, 0, .28)); animation: gbDrop .9s var(--delay) cubic-bezier(.3, 1.6, .5, 1) both, gbFloat var(--float) calc(var(--delay) + .9s) ease-in-out infinite alternate; }
body.ls-portfolio .cs-gb__item.is-pop img { animation: gbPop .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes gbDrop { from { transform: translateY(-90vh) rotate(-30deg); } to { transform: none; } }
@keyframes gbFloat { from { transform: translateY(0) rotate(0); } to { transform: translateY(-16px) rotate(4deg); } }
@keyframes gbPop { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-12deg); } 100% { transform: scale(1) rotate(0); } }
body.ls-portfolio .cs-gb__item.i0 { --x: 47%; --y: 7%;  --w: clamp(90px, 11vw, 190px); --r: -10deg; --d: 50; --delay: .3s;  --float: 3.2s; }
body.ls-portfolio .cs-gb__item.i1 { --x: 4%;  --y: 12%; --w: clamp(70px, 8vw, 140px);  --r: 8deg;   --d: 70; --delay: .45s; --float: 2.8s; }
body.ls-portfolio .cs-gb__item.i2 { --x: 28%; --y: 20%; --w: clamp(60px, 7vw, 120px);  --r: -18deg; --d: 35; --delay: .6s;  --float: 3.6s; }
body.ls-portfolio .cs-gb__item.i3 { --x: 90%; --y: 9%;  --w: clamp(40px, 4.5vw, 78px); --r: 14deg;  --d: 60; --delay: .7s;  --float: 2.6s; }
body.ls-portfolio .cs-gb__item.i4 { --x: 56%; --y: 62%; --w: clamp(42px, 5vw, 86px);   --r: 28deg;  --d: 80; --delay: .8s;  --float: 3s; }
body.ls-portfolio .cs-gb__item.i5 { --x: 17%; --y: 38%; --w: clamp(70px, 8vw, 140px);  --r: 6deg;   --d: 40; --delay: .9s;  --float: 3.4s; }
body.ls-portfolio .cs-gb__item.i6 { --x: 41%; --y: 36%; --w: clamp(44px, 5vw, 86px);   --r: -12deg; --d: 65; --delay: 1s;   --float: 2.9s; }
body.ls-portfolio .cs-gb__item.i7 { --x: 88%; --y: 72%; --w: clamp(70px, 8vw, 140px);  --r: -8deg;  --d: 45; --delay: 1.1s; --float: 3.8s; }
body.ls-portfolio .cs-gb__item.i8 { --x: 68%; --y: 4%;  --w: clamp(34px, 3.6vw, 62px); --r: -20deg; --d: 75; --delay: 1.2s; --float: 3.1s; }
@media (prefers-reduced-motion: reduce) { body.ls-portfolio .cs-gb__item img, body.ls-portfolio .cs-gb__plate { animation: none; } }
@media (max-width: 760px) {
  body.ls-portfolio .cs-gb__plate { width: 62vw; right: 19vw; top: 30%; }
  body.ls-portfolio .cs-gb__item.i0, body.ls-portfolio .cs-gb__item.i4, body.ls-portfolio .cs-gb__item.i6 { display: none; }
  body.ls-portfolio .cs-gb__item.i5 { --y: 52%; --x: 4%; }
  body.ls-portfolio .cs-gb__item.i7 { --y: 50%; }
}

/* shared app buttons (from the styleboard) */
body.ls-portfolio .gb-btn { font-family: "Montserrat", var(--f-body); font-weight: 700; font-size: 16px; padding: 14px 26px; border-radius: 999px; border: 0; color: #000; cursor: pointer; transition: transform .25s var(--ease-out), filter .2s; box-shadow: 0 4px 0 rgba(0,0,0,.18); }
body.ls-portfolio .gb-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
body.ls-portfolio .gb-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.18); }
body.ls-portfolio .gb-btn:disabled { opacity: .35; pointer-events: none; }
body.ls-portfolio .gb-btn--yellow { background: #FFDB40; } body.ls-portfolio .gb-btn--green { background: #7DBD5F; } body.ls-portfolio .gb-btn--blue { background: #58C3E8; }
body.ls-portfolio .gb-ico { width: 52px; height: 52px; border-radius: 14px; border: 0; font-size: 22px; font-weight: 700; color: #000; cursor: pointer; transition: transform .25s var(--ease-out); box-shadow: 0 4px 0 rgba(0,0,0,.18); }
body.ls-portfolio .gb-ico:hover { transform: translateY(-2px) rotate(-4deg); }
body.ls-portfolio .gb-ico--tan { background: #D6A673; } body.ls-portfolio .gb-ico--green { background: #7DBD5F; border-radius: 50%; }

/* burger builder */
body.ls-portfolio .cs-builder { grid-column: span 12; display: grid; grid-template-columns: 1fr 1.1fr; border-radius: 28px; overflow: hidden; background: #fff; border: 2px solid #000; margin: clamp(24px, 4vw, 64px) 0; }
body.ls-portfolio .cs-builder__ui { padding: clamp(24px, 4vw, 56px); display: flex; flex-direction: column; gap: 20px; font-family: "Montserrat", var(--f-body); }
body.ls-portfolio .cs-builder__ui h3 { font-family: "Koulen", var(--f-display); font-weight: 400; font-size: clamp(40px, 5vw, 84px); line-height: .9; }
body.ls-portfolio .cs-builder__dots { display: flex; gap: 8px; list-style: none; font-weight: 700; font-size: 13px; }
body.ls-portfolio .cs-builder__dots li { padding: 6px 14px; border-radius: 99px; background: #F2F2F2; color: rgba(0,0,0,.45); transition: background .3s, color .3s; }
body.ls-portfolio .cs-builder__dots li.is-on { background: #000; color: #FFDB40; }
body.ls-portfolio .cs-builder__pane { display: none; } body.ls-portfolio .cs-builder__pane.is-on { display: block; animation: gbPane .45s var(--ease-out); }
@keyframes gbPane { from { opacity: 0; transform: translateX(24px); } }
body.ls-portfolio .cs-builder__pane p { font-weight: 700; font-size: 18px; margin-bottom: 14px; }
body.ls-portfolio .cs-builder__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
body.ls-portfolio .cs-builder__opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px 14px; border-radius: 20px; border: 2px solid #E6E6E6; background: #fff; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14px; color: #000; transition: border-color .2s, transform .25s var(--ease-out), background .2s; }
body.ls-portfolio .cs-builder__opt:hover { transform: translateY(-3px); border-color: #D6A673; }
body.ls-portfolio .cs-builder__opt img { height: 64px; width: auto; max-width: 90%; object-fit: contain; }
body.ls-portfolio .cs-builder__opt i { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 14px; background: #7DBD5F; color: #000; transform: scale(0); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
body.ls-portfolio .cs-builder__opt[data-group="top"] i { transform: scale(1); background: #D6A673; }
body.ls-portfolio .cs-builder__opt.is-on { border-color: #000; background: #FFF8D6; }
body.ls-portfolio .cs-builder__opt.is-on i { transform: scale(1); background: #7DBD5F; }
body.ls-portfolio .cs-builder__nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; }
body.ls-portfolio .cs-builder__nav [hidden] { display: none; }
body.ls-portfolio .cs-builder__stage { position: relative; background: #58C3E8; min-height: clamp(380px, 40vw, 600px); display: grid; place-items: center; overflow: hidden; }
body.ls-portfolio .cs-builder__stage::before { content: ""; position: absolute; width: 74%; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 0 clamp(10px, 1.2vw, 18px) #D6A673; }
body.ls-portfolio .cs-builder__burger { position: relative; width: 52%; height: auto; filter: drop-shadow(0 24px 22px rgba(0,0,0,.22)); }
body.ls-portfolio .cs-builder__burger.is-bump { animation: gbPop .6s cubic-bezier(.3, 1.6, .5, 1); }
body.ls-portfolio .cs-builder__extra { position: absolute; height: auto; opacity: 0; transform: translateY(-60px) scale(.4) rotate(-30deg); transition: opacity .3s, transform .6s cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 12px 12px rgba(0,0,0,.2)); pointer-events: none; }
body.ls-portfolio .cs-builder__extra.is-on { opacity: 1; transform: none; }
body.ls-portfolio .cs-builder__extra.x-tomato { width: 15%; left: 10%; top: 14%; rotate: -12deg; }
body.ls-portfolio .cs-builder__extra.x-pickle { width: 9%; right: 13%; top: 10%; rotate: 22deg; }
body.ls-portfolio .cs-builder__extra.x-lettuce { width: 13%; left: 12%; bottom: 16%; rotate: 14deg; }
body.ls-portfolio .cs-builder__sauce { width: 10%; right: 11%; bottom: 14%; rotate: 8deg; }
body.ls-portfolio .cs-builder__order { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px; background: #000; color: #FFDB40; text-align: center; }
body.ls-portfolio .cs-builder__done { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #FFDB40; text-align: center; padding: 24px; clip-path: circle(0% at 50% 50%); transition: clip-path .8s var(--ease-out); }
body.ls-portfolio .cs-builder__done b { font-family: "Koulen", var(--f-display); font-weight: 400; font-size: clamp(52px, 7vw, 120px); line-height: .9; }
body.ls-portfolio .cs-builder__done span { font-family: "Montserrat", var(--f-body); font-weight: 700; font-size: 18px; margin-bottom: 12px; }
body.ls-portfolio .cs-builder.is-paid .cs-builder__done { clip-path: circle(150% at 50% 50%); }
@media (max-width: 860px) { body.ls-portfolio .cs-builder { grid-template-columns: 1fr; } body.ls-portfolio .cs-builder__stage { order: -1; min-height: 320px; } }

/* marquee in German flag colours */
body.ls-portfolio .case[data-slug="golden-burger"] .cs-marquee { background: #000; box-shadow: 0 -8px 0 #DD0000, 0 8px 0 #FFCE00; }
body.ls-portfolio .case[data-slug="golden-burger"] .cs-marquee span { color: #FFDB40; }
body.ls-portfolio .case[data-slug="golden-burger"] .cs-marquee i { color: #fff; }

/* motion duo */
body.ls-portfolio .cs-motion { grid-column: span 12; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
body.ls-portfolio .cs-motion figure { margin: 0; }
body.ls-portfolio .cs-motion__card { position: relative; border-radius: 28px; background: #fff; border: 2px solid #000; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 10px 10px 0 #FFDB40; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
body.ls-portfolio .cs-motion figure:nth-child(2) .cs-motion__card { box-shadow: 10px 10px 0 #58C3E8; }
body.ls-portfolio .cs-motion__card:hover { transform: translate(-4px, -4px); box-shadow: 14px 14px 0 #FFDB40; }
body.ls-portfolio .cs-motion figure:nth-child(2) .cs-motion__card:hover { box-shadow: 14px 14px 0 #58C3E8; }
body.ls-portfolio .case .cs-gallery .cs-motion__card video { width: 100%; height: 100%; object-fit: contain; border-radius: 0; background: #fff; transform: scale(1.35); }
body.ls-portfolio .cs-motion__card .mono { position: absolute; top: 16px; left: 16px; padding: 6px 12px; border-radius: 99px; background: #000; color: #FFDB40 !important; }
body.ls-portfolio .cs-motion figcaption { font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-size: 16px; opacity: .8; margin-top: 22px; max-width: 42ch; }
body.ls-portfolio .cs-motion figcaption b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 30px; letter-spacing: -.03em; line-height: 1; opacity: 1; margin-bottom: 6px; }
@media (max-width: 760px) { body.ls-portfolio .cs-motion { grid-template-columns: 1fr; gap: 48px; } }

/* brand block — the styleboard, live */
body.ls-portfolio .cs-gbbrand { grid-column: span 12; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(24px, 3vw, 56px); padding: clamp(28px, 4vw, 56px); border-radius: 28px; background: #FFF8D6; border: 2px solid #000; }
body.ls-portfolio .cs-gbbrand > div > .mono { display: block; margin-bottom: 18px; }
body.ls-portfolio .cs-gbbrand__colors > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
body.ls-portfolio .cs-gbbrand__colors > div > div { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; align-items: center; }
body.ls-portfolio .cs-gbbrand__colors i { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(0,0,0,.15); }
body.ls-portfolio .cs-gbbrand__colors b { font-size: 12px; }
body.ls-portfolio .cs-gbbrand__colors span { font-family: "Montserrat", var(--f-body); font-size: 13px; opacity: .7; }
body.ls-portfolio .gb-koulen { font-family: "Koulen", var(--f-display); font-size: clamp(44px, 4.6vw, 80px); line-height: .9; margin-bottom: 20px; }
body.ls-portfolio .gb-koulen span { color: #FFDB40; -webkit-text-stroke: 2px #000; }
body.ls-portfolio .cs-gbbrand__type > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(0,0,0,.15); }
body.ls-portfolio .cs-gbbrand__type b { font-size: 22px; font-weight: 700; } body.ls-portfolio .cs-gbbrand__type b[style*="Koulen"] { font-weight: 400; font-size: 26px; }
body.ls-portfolio .cs-gbbrand__icons, body.ls-portfolio .cs-gbbrand__btns { display: flex; flex-wrap: wrap; gap: 12px; }
body.ls-portfolio .cs-gbbrand__btns { margin-top: 18px; }
@media (max-width: 960px) { body.ls-portfolio .cs-gbbrand { grid-template-columns: 1fr; } }
/* gallery img defaults must not hit the builder art */
body.ls-portfolio .cs-gallery .cs-builder img { border-radius: 0; background: none; border: 0; }
body.ls-portfolio .cs-gallery .cs-builder__opt img { width: auto; height: 64px; }
body.ls-portfolio .cs-gallery .cs-builder__burger { width: 52%; }
body.ls-portfolio .cs-gallery .cs-builder__extra.x-tomato { width: 15%; } body.ls-portfolio .cs-gallery .cs-builder__extra.x-pickle { width: 9%; }
body.ls-portfolio .cs-gallery .cs-builder__extra.x-lettuce { width: 13%; } body.ls-portfolio .cs-gallery .cs-builder__sauce { width: 10%; }
body.ls-portfolio .cs-gallery .cs-motion figure { grid-column: auto; min-width: 0; }
body.ls-portfolio .case__scroll { overflow-x: hidden; }

/* =========================================================
   ONE WORLD — case page (kleuren uit het tijdschrift)
   ========================================================= */
/* hero: the human hand and the wire hand reach for each other */
body.ls-portfolio .cs-hero__media--hands { background: #233841; }
body.ls-portfolio .cs-hero__media--hands::after { background: linear-gradient(to top, #233841 8%, rgba(35,56,65,.55) 32%, transparent 55%); }
body.ls-portfolio .cs-hands { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: #233841; --p: 0; --hh: 100%; --meet: 0px; }
body.ls-portfolio .cs-hands img { position: absolute; height: var(--hh); width: auto; top: 50%; filter: invert(1); mix-blend-mode: screen; user-select: none;
  transition: transform 2.2s cubic-bezier(.22, 1, .36, 1); }
body.ls-portfolio .cs-hands__human { left: 0; transform: translate(calc((1 - var(--p)) * -55% + var(--p) * var(--meet)), -50%); }
body.ls-portfolio .cs-hands__wire { right: 0; transform: translate(calc((1 - var(--p)) * 55% - var(--p) * var(--meet)), -46%); }
body.ls-portfolio .cs-hands.no-anim img { transition: none; }
body.ls-portfolio .cs-hands__spark { position: absolute; left: 50%; top: 44%; width: clamp(60px, 7vw, 120px); height: clamp(60px, 7vw, 120px); transform: translate(-50%, -50%); pointer-events: none; }
body.ls-portfolio .cs-hands__spark svg { position: absolute; width: 40%; fill: #FCDA2E; opacity: 0; transform: scale(.2) rotate(var(--r)); transition: opacity .25s, transform .5s cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 0 12px rgba(252, 218, 46, .6)); }
body.ls-portfolio .cs-hands__spark svg:nth-child(1) { --r: -18deg; left: 0; top: 10%; }
body.ls-portfolio .cs-hands__spark svg:nth-child(2) { --r: 10deg; left: 32%; top: -18%; width: 48%; transition-delay: .08s; }
body.ls-portfolio .cs-hands__spark svg:nth-child(3) { --r: 28deg; left: 66%; top: 18%; transition-delay: .16s; }
body.ls-portfolio .cs-hands.is-touch .cs-hands__spark svg { opacity: 1; transform: scale(1) rotate(var(--r)); animation: owFlicker 2.4s 2.4s infinite; }
@keyframes owFlicker { 0%, 100% { opacity: 1; } 46% { opacity: 1; } 48% { opacity: .2; } 50% { opacity: 1; } 52% { opacity: .4; } 54% { opacity: 1; } }

/* magazine you can page through */
body.ls-portfolio .cs-mag { grid-column: span 12; padding: clamp(24px, 4vw, 56px) 0; }
body.ls-portfolio .cs-mag__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: clamp(24px, 3vw, 40px); }
body.ls-portfolio .cs-mag__head > .mono { color: var(--case-accent); }
body.ls-portfolio .cs-mag__nav { display: flex; align-items: center; gap: 12px; }
body.ls-portfolio .cs-mag__nav button { width: 48px; height: 48px; border-radius: 50%; color: var(--case-fg); font-size: 16px; }
body.ls-portfolio .cs-mag__nav button:disabled { opacity: .3; pointer-events: none; }
body.ls-portfolio .cs-mag__count { min-width: 92px; text-align: center; }
body.ls-portfolio .cs-mag__stage { perspective: 2600px; display: flex; justify-content: center; }
body.ls-portfolio .cs-mag__book { position: relative; width: min(100%, 1040px); aspect-ratio: var(--mag-ratio, 3 / 2); transform: translateX(-25%); transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
body.ls-portfolio .cs-mag.is-open .cs-mag__book { transform: none; }
body.ls-portfolio .cs-mag.is-end .cs-mag__book { transform: translateX(25%); }
body.ls-portfolio .cs-mag__sheet { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.65, 0, .35, 1); cursor: pointer; }
body.ls-portfolio .cs-mag__sheet.is-flipped { transform: rotateY(-180deg); }
body.ls-portfolio .cs-mag__front, body.ls-portfolio .cs-mag__back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
body.ls-portfolio .cs-mag__back { transform: rotateY(180deg); }
body.ls-portfolio .cs-mag__face { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: #fff; }
body.ls-portfolio .cs-mag__front { border-radius: 0 6px 6px 0; box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); }
body.ls-portfolio .cs-mag__back { border-radius: 6px 0 0 6px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); }
body.ls-portfolio .cs-mag__front::after, body.ls-portfolio .cs-mag__back::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
body.ls-portfolio .cs-mag__front::after { background: linear-gradient(to right, rgba(0,0,0,.22), transparent 7%); }
body.ls-portfolio .cs-mag__back::after { background: linear-gradient(to left, rgba(0,0,0,.22), transparent 7%); }
body.ls-portfolio .cs-mag__hint { text-align: center; opacity: .5; margin-top: 24px; }
@media (max-width: 760px) { body.ls-portfolio .cs-mag__head { flex-direction: column; align-items: flex-start; } }

/* grid reveal */
body.ls-portfolio .cs-gridx { grid-column: span 12; display: grid; gap: 24px; padding: clamp(24px, 4vw, 56px) 0; }
body.ls-portfolio .cs-gridx__text { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
body.ls-portfolio .cs-gridx__text > .mono { color: var(--case-accent); }
body.ls-portfolio .cs-gridx__text p { font-size: clamp(18px, 1.6vw, 24px); max-width: 38ch; opacity: .85; }
body.ls-portfolio .cs-gridx__frame { --x: 55%; position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 8px; background: #fff; cursor: ew-resize; touch-action: pan-y; user-select: none; }
body.ls-portfolio .cs-gallery .cs-gridx__frame img { position: absolute; border-radius: 0; background: none; }
body.ls-portfolio .cs-gallery .cs-gridx__frame > img { inset: 0; width: 100%; height: 100%; }
body.ls-portfolio .cs-gridx__over { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x)); background: #fff; }
body.ls-portfolio .cs-gallery .cs-gridx__over img { width: 101.35%; height: auto; left: -.675%; top: -1.02%; max-width: none; }
body.ls-portfolio .cs-gridx__handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #FCDA2E; pointer-events: none; }
body.ls-portfolio .cs-gridx__handle i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; background: #FCDA2E; color: #233841; display: grid; place-items: center; font-style: normal; font-size: 20px; font-weight: 700; box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); }
body.ls-portfolio .cs-gridx__l, body.ls-portfolio .cs-gridx__r { position: absolute; bottom: 14px; padding: 6px 12px; border-radius: 99px; background: rgba(35,56,65,.85); color: #F2EFE9; pointer-events: none; }
body.ls-portfolio .cs-gridx__l { left: 14px; } body.ls-portfolio .cs-gridx__r { right: 14px; }

/* palette that opens up on hover */
body.ls-portfolio .cs-palette { grid-column: span 12; padding: clamp(24px, 4vw, 56px) 0; }
body.ls-portfolio .cs-palette > .mono { display: block; color: var(--case-accent); margin-bottom: 20px; }
body.ls-portfolio .cs-palette__row { display: flex; height: clamp(260px, 30vw, 420px); border-radius: 12px; overflow: hidden; }
body.ls-portfolio .cs-palette__sw { flex: 1; background: var(--c); display: flex; align-items: flex-end; padding: 18px; transition: flex .6s cubic-bezier(.22, 1, .36, 1); outline: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
body.ls-portfolio .cs-palette__sw:hover, body.ls-portfolio .cs-palette__sw:focus-visible { flex: 2.6; }
body.ls-portfolio .cs-palette__sw div { opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s; white-space: nowrap; }
body.ls-portfolio .cs-palette__sw:hover div, body.ls-portfolio .cs-palette__sw:focus-visible div { opacity: 1; transform: none; }
body.ls-portfolio .cs-palette__sw b { display: block; font-family: var(--f-display); font-size: clamp(20px, 2vw, 30px); letter-spacing: -.03em; }
body.ls-portfolio .cs-palette__sw[style*="#FCDA2E"], body.ls-portfolio .cs-palette__sw[style*="#FFFFFF"] { color: #233841; }
@media (hover: none) { body.ls-portfolio .cs-palette__row { flex-direction: column; height: auto; } body.ls-portfolio .cs-palette__sw { min-height: 76px; } body.ls-portfolio .cs-palette__sw div { opacity: 1; transform: none; } }
body.ls-portfolio .cs-hands__human { -webkit-mask-image: linear-gradient(to right, transparent 4%, #000 34%); mask-image: linear-gradient(to right, transparent 4%, #000 34%); }
body.ls-portfolio .cs-hands__wire { -webkit-mask-image: linear-gradient(to left, transparent 4%, #000 40%); mask-image: linear-gradient(to left, transparent 4%, #000 40%); }

/* =========================================================
   100 DAGEN MA — case page (kleuren uit de poster)
   ========================================================= */
body.ls-portfolio .case[data-slug="schrofer"] .cs-hero { color: #fff; }
body.ls-portfolio .case[data-slug="schrofer"] .cs-hero__num { color: #69C3CC; }
body.ls-portfolio .case[data-slug="schrofer"] .cs-hero__title { color: #69C3CC; max-width: 55%; }
body.ls-portfolio .case[data-slug="schrofer"] .cs-meta { border-top-color: rgba(255,255,255,.3); }
body.ls-portfolio .cs-hero__media--blocks { background: #384B8C; }
body.ls-portfolio .cs-hero__media--blocks::after { display: none; }
body.ls-portfolio .cs-blocks { position: absolute; inset: 0; overflow: hidden; }
body.ls-portfolio .cs-blocks__b { position: absolute; display: block; }
body.ls-portfolio .cs-blocks__b.b1 { left: 6%; top: 14%; width: 14vw; height: 34vh; background: #69C3CC; }
body.ls-portfolio .cs-blocks__b.b2 { left: 26%; top: 8%; width: 22vw; height: 5vh; background: #D92E2F; }
body.ls-portfolio .cs-blocks__b.b3 { left: 30%; top: 28%; width: 8vw; height: 22vh; background: #FFFFFF; }
body.ls-portfolio .cs-blocks__b.b4 { left: 50%; top: 22%; width: 3vw; height: 14vh; background: #D92E2F; }
body.ls-portfolio .cs-blocks__b { animation: schIn .9s cubic-bezier(.22, 1, .36, 1) both; }
body.ls-portfolio .cs-blocks__b.b2 { animation-delay: .1s; } body.ls-portfolio .cs-blocks__b.b3 { animation-delay: .2s; } body.ls-portfolio .cs-blocks__b.b4 { animation-delay: .3s; }
@keyframes schIn { from { clip-path: inset(-100vh 100% -100vh -100vw); } to { clip-path: inset(-100vh -100vw -100vh -100vw); } }
body.ls-portfolio .cs-blocks__poster { position: absolute; right: 7vw; top: 50%; height: min(76vh, 980px); aspect-ratio: 1272 / 1800; transform: translateY(-50%); transition: transform .5s var(--ease-out); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); animation: schPoster 1.1s .2s cubic-bezier(.22, 1, .36, 1) both; }
body.ls-portfolio .cs-blocks__poster img { width: 100%; height: 100%; display: block; }
@keyframes schPoster { from { opacity: 0; translate: 0 60px; } }
@media (max-width: 760px) {
  body.ls-portfolio .case[data-slug="schrofer"] .cs-hero__title { max-width: none; }
  body.ls-portfolio .cs-blocks__poster { right: 50%; top: 27%; height: 38vh; translate: 50% 0; }
  body.ls-portfolio .cs-blocks__b.b1 { width: 22vw; height: 20vh; } body.ls-portfolio .cs-blocks__b.b3, body.ls-portfolio .cs-blocks__b.b4 { display: none; }
}

/* optical play canvas */
body.ls-portfolio .cs-opart { grid-column: span 12; display: grid; gap: 20px; padding: clamp(24px, 4vw, 56px) 0; }
body.ls-portfolio .cs-opart__text { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
body.ls-portfolio .cs-opart__text > .mono { color: var(--case-accent); }
body.ls-portfolio .cs-opart__text p { font-size: clamp(18px, 1.6vw, 24px); max-width: 40ch; opacity: .85; }
body.ls-portfolio .cs-opart canvas { width: 100%; height: clamp(320px, 42vw, 620px); display: block; border-radius: 8px; cursor: crosshair; touch-action: pan-y; }
body.ls-portfolio .cs-opart__note { opacity: .5; }
body.ls-portfolio .case[data-slug="schrofer"] .cs-stats b { color: #384B8C; }
body.ls-portfolio .case[data-slug="schrofer"] .cs-mag__nav button { color: #0F0E0C; background: #fff; border: 1.5px solid #0F0E0C; box-shadow: 3px -3px 0 #0F0E0C; }
body.ls-portfolio .cs-palette__row { box-shadow: 0 0 0 1px rgba(127,127,127,.25); }

/* tools: level instead of percentages */
body.ls-portfolio .tools i { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; height: 4px; background: none; overflow: visible; }
body.ls-portfolio .tools i::after { display: none; }
body.ls-portfolio .tools s { display: block; position: relative; overflow: hidden; border-radius: 99px; background: var(--hair); text-decoration: none; }
body.ls-portfolio .tools s::after { content: ""; position: absolute; inset: 0; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
body.ls-portfolio .tools s:nth-child(2)::after { transition-delay: .15s; } body.ls-portfolio .tools s:nth-child(3)::after { transition-delay: .3s; }
body.ls-portfolio .tools li.is-in s.on::after, .no-js body.ls-portfolio .tools s.on::after { transform: none; }
body.ls-portfolio .tools em { color: var(--fg); }
@media (prefers-reduced-motion: reduce) { body.ls-portfolio .tools s.on::after { transform: none; transition: none; } }

/* work cards: interactive label */
body.ls-portfolio .card__tag { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 7px 12px; border-radius: 99px; background: rgba(14,14,14,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #F2EFE9; font-size: 11px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: transform .5s var(--ease-out); }
body.ls-portfolio .card a:hover .card__tag { transform: translateY(-2px); }
body.ls-portfolio .card__swatch i { box-shadow: 0 0 0 1px rgba(127,127,127,.35); }

/* keyboard focus on the interactive case parts */
body.ls-portfolio .cs-gridx__frame:focus-visible, body.ls-portfolio .cs-mag:focus-visible, body.ls-portfolio .cs-palette__sw:focus-visible { outline: 2px solid var(--case-accent); outline-offset: 4px; }
body.ls-portfolio .cs-mag { outline: none; }

/* hero actions */
body.ls-portfolio .hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
@media (max-width: 760px) { body.ls-portfolio .hero__bottom { grid-template-columns: 1fr; } body.ls-portfolio .hero__ctas { justify-content: flex-start; } body.ls-portfolio .hero__ctas .btn { min-height: 50px; padding: 0 22px; } }
/* work: cards start right under the heading now the list is gone */
body.ls-portfolio .work .section-head + .work__grid { margin-top: clamp(24px, 4vw, 64px); }

/* =========================================================
   FOTOGRAFIE — case page: zoek het licht
   ========================================================= */
body.ls-portfolio .cs-hero__media--dark { background: #0B0B0A; }
body.ls-portfolio .cs-hero__media--dark::after { background: linear-gradient(to top, #0B0B0A 6%, rgba(11,11,10,.4) 34%, transparent 60%); pointer-events: none; }
body.ls-portfolio .cs-dark { position: absolute; inset: 0; --lx: 60%; --ly: 40%; --lr: clamp(180px, 22vw, 340px); }
body.ls-portfolio .cs-dark__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 6px; }
body.ls-portfolio .cs-dark__grid img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }
body.ls-portfolio .cs-dark__dim img { filter: brightness(.16) grayscale(.7); }
body.ls-portfolio .cs-dark__lit { -webkit-mask-image: radial-gradient(circle var(--lr) at var(--lx) var(--ly), #000 35%, rgba(0,0,0,.55) 62%, transparent 100%); mask-image: radial-gradient(circle var(--lr) at var(--lx) var(--ly), #000 35%, rgba(0,0,0,.55) 62%, transparent 100%); }
body.ls-portfolio .cs-dark__hint { position: absolute; left: var(--lx); top: var(--ly); transform: translate(-50%, calc(var(--lr) * -1 - 10px)); color: #E9B872; pointer-events: none; transition: opacity .6s; white-space: nowrap; }
body.ls-portfolio .cs-dark.is-moved .cs-dark__hint { opacity: 0; }
@media (max-width: 760px) { body.ls-portfolio .cs-dark__grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); } }

/* photo grid with filters */
body.ls-portfolio .cs-photos { grid-column: span 12; padding: clamp(24px, 4vw, 56px) 0; }
body.ls-portfolio .cs-photos__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
body.ls-portfolio .cs-photos__head > .mono { color: var(--case-accent); }
body.ls-portfolio .cs-photos__filter { display: flex; gap: 8px; flex-wrap: wrap; }
body.ls-portfolio .cs-photos__filter button { padding: 10px 16px; border-radius: 99px; border: 1px solid rgba(242,239,233,.25); color: inherit; background: none; cursor: pointer; transition: background .3s, color .3s, border-color .3s; }
body.ls-portfolio .cs-photos__filter button:hover { border-color: var(--case-accent); }
body.ls-portfolio .cs-photos__filter button.is-on { background: var(--case-accent); border-color: var(--case-accent); color: #0B0B0A; }
body.ls-portfolio .cs-photos__grid { columns: 3 260px; column-gap: 14px; }
body.ls-portfolio .cs-photos__item { position: relative; display: block; width: 100%; margin: 0 0 14px; padding: 0; border: 0; background: none; cursor: zoom-in; break-inside: avoid; overflow: hidden; border-radius: 6px; color: #F2EFE9; text-align: left; animation: fotoIn .6s var(--ease-out) both; }
body.ls-portfolio .cs-photos__item[hidden] { display: none; }
@keyframes fotoIn { from { opacity: 0; transform: translateY(16px); } }
body.ls-portfolio .cs-gallery .cs-photos__item img { display: block; width: 100%; height: auto; border-radius: 0; transition: transform .8s var(--ease-out), filter .5s; }
body.ls-portfolio .cs-photos__item:hover img { transform: scale(1.04); }
body.ls-portfolio .cs-photos__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 14px 12px; background: linear-gradient(to top, rgba(0,0,0,.75), transparent); display: flex; flex-direction: column; gap: 3px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s var(--ease-out); }
body.ls-portfolio .cs-photos__cap b { font-family: var(--f-display); font-size: 18px; letter-spacing: -.02em; }
body.ls-portfolio .cs-photos__cap .mono { font-size: 10px; opacity: .8; }
body.ls-portfolio .cs-photos__item:hover .cs-photos__cap, body.ls-portfolio .cs-photos__item:focus-visible .cs-photos__cap { opacity: 1; transform: none; }
body.ls-portfolio .cs-photos__item:focus-visible { outline: 2px solid var(--case-accent); outline-offset: 3px; }
@media (hover: none) { body.ls-portfolio .cs-photos__cap { opacity: 1; transform: none; } }

/* lightbox */
body.ls-portfolio .cs-lightbox { position: fixed; inset: 0; z-index: 20; background: rgba(6,6,5,.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 72px clamp(12px, 3vw, 40px) 32px; }
body.ls-portfolio .cs-lightbox[hidden] { display: none; }
body.ls-portfolio .cs-lightbox figure { margin: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-width: 0; }
body.ls-portfolio .cs-gallery .cs-lightbox img { max-width: 100%; max-height: calc(100svh - 190px); width: auto; height: auto; border-radius: 4px; background: none; }
body.ls-portfolio .cs-lightbox.is-in img { animation: lbIn .45s var(--ease-out); }
@keyframes lbIn { from { opacity: 0; transform: scale(.97); } }
body.ls-portfolio .cs-lightbox figcaption { text-align: center; opacity: 1; margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-size: 15px; }
body.ls-portfolio .cs-lightbox figcaption b { display: block; font-family: var(--f-display); font-size: 22px; letter-spacing: -.02em; margin-bottom: 6px; }
body.ls-portfolio .cs-lightbox figcaption .mono { color: #E9B872; font-size: 11px; letter-spacing: .1em; }
body.ls-portfolio .cs-lightbox__close { position: absolute; top: 20px; right: 20px; padding: 12px 18px; border-radius: 99px; color: #F2EFE9; }
body.ls-portfolio .cs-lightbox__nav { width: 52px; height: 52px; border-radius: 50%; color: #F2EFE9; font-size: 18px; }
@media (max-width: 760px) { body.ls-portfolio .cs-lightbox { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; } body.ls-portfolio .cs-lightbox figure { grid-column: 1 / -1; grid-row: 1; } body.ls-portfolio .cs-lightbox__nav { justify-self: center; } }

/* low viewpoint trio */
body.ls-portfolio .cs-trio { grid-column: span 12; display: grid; gap: 24px; padding: clamp(24px, 4vw, 56px) 0; }
body.ls-portfolio .cs-trio__text { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
body.ls-portfolio .cs-trio__text > .mono { color: var(--case-accent); }
body.ls-portfolio .cs-trio__text p { font-size: clamp(18px, 1.6vw, 24px); max-width: 40ch; opacity: .85; }
body.ls-portfolio .cs-trio__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
body.ls-portfolio .cs-gallery .cs-trio__row figure { grid-column: auto; margin: 0; }
body.ls-portfolio .cs-gallery .cs-trio__row img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 80%; border-radius: 6px; }
@media (max-width: 760px) { body.ls-portfolio .cs-trio__row { grid-template-columns: 1fr; } }
body.ls-portfolio .cs-gallery .cs-lightbox figure { grid-column: auto; grid-row: auto; }
@media (max-width: 760px) { body.ls-portfolio .cs-gallery .cs-lightbox figure { grid-column: 1 / -1; grid-row: 1; } }
body.ls-portfolio .case[data-slug="fotografie"] .cs-hero__title { font-size: clamp(28px, 8.4vw, 160px); }

/* =========================================================
   HOME — LS mark in the hero
   ========================================================= */
body.ls-portfolio .hero__mark { position: absolute; right: 6vw; top: 20vh; width: 22vw; aspect-ratio: 1; z-index: 2; pointer-events: none; }
body.ls-portfolio .lm { position: absolute; display: block; will-change: transform; }
body.ls-portfolio .lm i { display: block; width: 100%; height: 100%; will-change: transform; }
body.ls-portfolio .lm--stem { left: 20.7%; top: 22.1%; width: 14.3%; height: 55.7%; }
body.ls-portfolio .lm--foot { left: 20.7%; top: 63.6%; width: 31.4%; height: 14.3%; }
body.ls-portfolio .lm--stem i, body.ls-portfolio .lm--foot i { border-radius: 999px; --glass-bg: color-mix(in srgb, var(--fg) 72%, transparent); }
body.ls-portfolio .lm--s { inset: 0; color: var(--accent-text); }
body.ls-portfolio .lm--s svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 18px 30px rgba(30,63,174,.35)); }
@media (max-width: 760px) { body.ls-portfolio .hero__mark { width: 46vw; right: 5vw; top: 13vh; } }

/* =========================================================
   HOME — live work cards
   ========================================================= */
body.ls-portfolio .card__live { position: absolute; inset: 0; z-index: 1; background: var(--live-bg); opacity: 0; transition: opacity .5s var(--ease-out); overflow: hidden; isolation: isolate; --lx: 50%; --ly: 45%; }
body.ls-portfolio .card.is-live .card__live { opacity: 1; }
body.ls-portfolio .card__media { transition: transform .5s var(--ease-out); transform-style: preserve-3d; }
body.ls-portfolio .card__media .card__live video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; scale: 1; }
body.ls-portfolio .card__media .card__live--video video { object-fit: contain; }
/* slides: posters dealt one after the other */
body.ls-portfolio .card__media .card__live--slides img { position: absolute; inset: 9%; width: 82%; height: 82%; object-fit: contain; opacity: 0; scale: 1; filter: drop-shadow(0 24px 30px rgba(0,0,0,.45)); animation: cardSlides 3.6s calc(var(--i) * 1.2s) infinite both; animation-play-state: paused; }
body.ls-portfolio .card.is-live .card__live--slides img { animation-play-state: running; }
@keyframes cardSlides { 0% { opacity: 0; transform: translateY(18px) rotate(-3deg) scale(.96); } 6%, 33% { opacity: 1; transform: none; } 39%, 100% { opacity: 0; transform: translateY(-10px) rotate(2deg); } }
/* hands reach for each other */
body.ls-portfolio .card__media .card__live--hands img { position: absolute; top: 0; height: 100%; width: auto; inset: 0 auto; object-fit: contain; filter: invert(1); mix-blend-mode: screen; scale: 1; transition: transform 1.2s cubic-bezier(.22, 1, .36, 1); }
body.ls-portfolio .card__media .card__live--hands .lh { left: 0; right: auto; transform: translateX(-60%); }
body.ls-portfolio .card__media .card__live--hands .lw { right: 0; left: auto; transform: translateX(60%); }
body.ls-portfolio .card.is-live .card__live--hands .lh { transform: translateX(18%); }
body.ls-portfolio .card.is-live .card__live--hands .lw { transform: translateX(-22%); }
/* spotlight over the photo */
body.ls-portfolio .card__media .card__live--spot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; scale: 1; }
body.ls-portfolio .card__media .card__live--spot .ls-dim { filter: brightness(.15) grayscale(.6); }
body.ls-portfolio .card__media .card__live--spot .ls-lit { -webkit-mask-image: radial-gradient(circle 32% at var(--lx) var(--ly), #000 30%, transparent 100%); mask-image: radial-gradient(circle 32% at var(--lx) var(--ly), #000 30%, transparent 100%); }
@media (prefers-reduced-motion: reduce) { body.ls-portfolio .card__live--slides img { animation: none; } body.ls-portfolio .card__live--slides img:first-child { opacity: 1; } }

/* =========================================================
   HOME — photography teaser in the playground
   ========================================================= */
body.ls-portfolio .pg--link { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
body.ls-portfolio .pg__spot { position: relative; flex: 1; min-height: 0; display: block; border-radius: 4px; overflow: hidden; background: #0B0B0A; --lx: 50%; --ly: 40%; }
body.ls-portfolio .pg__spot img { height: 100%; width: auto; display: block; filter: brightness(.35); transition: filter .5s; }
body.ls-portfolio .pg__spot .pg__lit { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; -webkit-mask-image: radial-gradient(circle 38% at var(--lx) var(--ly), #000 30%, transparent 100%); mask-image: radial-gradient(circle 38% at var(--lx) var(--ly), #000 30%, transparent 100%); }
body.ls-portfolio .pg__badge { position: absolute; left: 12px; top: 12px; padding: 6px 12px; border-radius: 99px; background: #E9B872; color: #0B0B0A; font-size: 11px; }
body.ls-portfolio .pg__cap { margin-top: 10px; color: var(--fg); }
body.ls-portfolio .pg--link:hover .pg__cap { color: var(--accent-text); }
body.ls-portfolio .pg--link { width: calc(clamp(260px, 36vw, 480px) * .68); }
body.ls-portfolio .pg__spot img { width: 100%; height: 100%; object-fit: cover; }
/* LS mark sits in the free space right of "LI-SONG", never over the letters */
body.ls-portfolio .hero__name { position: relative; }
body.ls-portfolio .hero__mark { display: block; position: absolute; top: calc(12.4vw * .82 * .5); right: calc(var(--side) - 1.6vw); left: auto; width: 13vw; transform: translateY(-50%); }
body.ls-portfolio .lm--stem i, body.ls-portfolio .lm--foot i { --glass-bg: var(--fg); }
@media (max-width: 760px) { body.ls-portfolio .hero__mark { width: 13vw; top: calc(12.4vw * .82 * .5); right: calc(var(--side) - 1.6vw); } }
body.ls-portfolio .hero__line--1 { font-size: 12.4vw; }
body.ls-portfolio .hero__mark { width: 14vw; top: calc(11.2vw * .82 * .5); right: calc(var(--side) - 1.7vw); }
@media (max-width: 760px) { body.ls-portfolio .hero__mark { width: 14vw; top: calc(11.2vw * .82 * .5); right: calc(var(--side) - 1.7vw); } }
body.ls-portfolio .hero__mark { transform: none; margin-top: -7vw; }

/* =========================================================
   HOME — capabilities linked to the work that proves them
   ========================================================= */
body.ls-portfolio .caps li { position: relative; padding: 0; overflow: hidden; }
body.ls-portfolio .caps__link { display: flex; flex-direction: column; min-height: 200px; height: 100%; padding: 28px 24px 26px; color: inherit; text-decoration: none; position: relative; isolation: isolate; }
body.ls-portfolio .caps__link > :not(.caps__media) { position: relative; z-index: 1; transition: color .4s; }
body.ls-portfolio .caps__media { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .5s var(--ease-out); background: #0E0E0E; }
body.ls-portfolio .caps__media img, body.ls-portfolio .caps__media video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.12); transition: transform 1.2s var(--ease-out); }
body.ls-portfolio .caps__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,.94) 10%, rgba(10,10,10,.74) 55%, rgba(10,10,10,.5)); }
body.ls-portfolio .caps__proof { margin-top: auto; padding-top: 18px; color: var(--accent-text); letter-spacing: .08em; }
@media (hover: hover) {
  body.ls-portfolio .caps li:hover .caps__media, body.ls-portfolio .caps li:focus-within .caps__media { opacity: 1; }
  body.ls-portfolio .caps li:hover .caps__media img, body.ls-portfolio .caps li:hover .caps__media video, body.ls-portfolio .caps li:focus-within .caps__media img { transform: scale(1); }
  body.ls-portfolio .caps li:hover .caps__link > :not(.caps__media), body.ls-portfolio .caps li:focus-within .caps__link > :not(.caps__media) { color: #F2EFE9; }
  body.ls-portfolio .caps li:hover .caps__proof { color: #9DB1FF; }
}
body.ls-portfolio .caps__link:focus-visible { outline: 2px solid var(--accent-text); outline-offset: -4px; }
/* touch screens: the proof is always visible as a strip on top */
@media (hover: none) {
  body.ls-portfolio .caps__media { position: relative; inset: auto; opacity: 1; height: 150px; margin: -28px -24px 20px; }
  body.ls-portfolio .caps__media img, body.ls-portfolio .caps__media video { transform: none; }
  body.ls-portfolio .caps__media::after { background: linear-gradient(to top, rgba(10,10,10,.35), transparent 60%); }
  body.ls-portfolio .caps h3 { margin-top: 8px; }
}
/* motion tile: the animation lives on white, so the tile turns light */
body.ls-portfolio .caps__item--light .caps__media { background: #fff; }
body.ls-portfolio .caps__item--light .caps__media video { object-fit: contain; object-position: 50% 10%; transform: scale(1.25); }
body.ls-portfolio .caps__item--light .caps__media::after { background: linear-gradient(to top, rgba(255,255,255,.97) 18%, rgba(255,255,255,.7) 48%, transparent 75%); }
@media (hover: hover) {
  body.ls-portfolio .caps li.caps__item--light:hover .caps__link > :not(.caps__media), body.ls-portfolio .caps li.caps__item--light:focus-within .caps__link > :not(.caps__media) { color: #0E0E0E; }
  body.ls-portfolio .caps li.caps__item--light:hover .caps__proof { color: #1E3FAE; }
  body.ls-portfolio .caps li.caps__item--light:hover .caps__media video { transform: scale(1.15); }
}

/* =========================================================
   HOME — about: quick facts
   ========================================================= */
body.ls-portfolio .about__facts { margin-top: 48px; border-top: 1px solid var(--hair); }
body.ls-portfolio .about__facts > div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
body.ls-portfolio .about__facts dt { color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
body.ls-portfolio .about__facts dd { margin: 0; font-size: 17px; }
body.ls-portfolio .about__facts + .chips { margin-top: 24px; }
@media (max-width: 560px) { body.ls-portfolio .about__facts > div { grid-template-columns: 1fr; gap: 4px; } }

/* story: every card has an image now */
body.ls-portfolio .story__card--img img { transition: transform 1.2s var(--ease-out); }
body.ls-portfolio a.story__card--img:hover img { transform: scale(1.05); }
body.ls-portfolio .story__collage { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; background: #0E0E0E; }
body.ls-portfolio .story__card--img .story__collage img { position: static; width: 100%; height: 100%; object-fit: cover; }
body.ls-portfolio .story__collage img:nth-child(2) { object-position: 50% 35%; }
body.ls-portfolio .story__card--cta::after { background: linear-gradient(to top, rgba(30,63,174,.92), rgba(30,63,174,.25) 55%, transparent 75%); }
body.ls-portfolio .story__card--img .story__collage img { filter: brightness(.8); }
body.ls-portfolio .story__card:has(.story__collage)::after { background: linear-gradient(to top, rgba(0,0,0,.94) 28%, rgba(0,0,0,.35) 62%, rgba(0,0,0,.1)); }
body.ls-portfolio .story__collage { inset: 0 0 40% 0; border-radius: 0; }
body.ls-portfolio .story__card:has(.story__collage) { background: #0E0E0E; }
body.ls-portfolio .story__card:has(.story__collage)::after { background: linear-gradient(to top, #0E0E0E 40%, rgba(14,14,14,.6) 52%, transparent 70%); }
body.ls-portfolio .story__card--img .story__collage img { filter: none; }

/* =========================================================
   FLEXWORKZ — coming soon page (no designs shown)
   ========================================================= */
body.ls-portfolio .card.is-soon a { cursor: pointer; }
body.ls-portfolio .cs-hero__media--soon { background: #0E0E0E; }
body.ls-portfolio .cs-hero__media--soon::after { background: linear-gradient(to top, #0E0E0E 8%, transparent 55%); }
body.ls-portfolio .cs-soon { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 2vw; }
body.ls-portfolio .cs-soon__row { display: flex; width: max-content; white-space: nowrap; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: clamp(56px, 11vw, 200px); letter-spacing: -.05em; line-height: .9; animation: soonRow 38s linear infinite; }
body.ls-portfolio .cs-soon__row span { color: transparent; -webkit-text-stroke: 1.5px rgba(242,239,233,.35); padding: 0 .25em; }
body.ls-portfolio .cs-soon__row i { font-style: normal; color: #7D97FF; font-size: .4em; align-self: center; }
body.ls-portfolio .cs-soon__row--rev { animation-direction: reverse; animation-duration: 46s; }
body.ls-portfolio .cs-soon__row--rev span { -webkit-text-stroke-color: rgba(125,151,255,.45); }
@keyframes soonRow { to { transform: translateX(-50%); } }
body.ls-portfolio .cs-soon__lock { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); width: clamp(96px, 10vw, 150px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #F2EFE9; }
body.ls-portfolio .cs-soon__lock svg { width: 38%; height: 38%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { body.ls-portfolio .cs-soon__row { animation: none; } }
body.ls-portfolio .cs-soon-cta { padding: clamp(64px, 9vw, 140px) var(--side); text-align: center; border-bottom: 1px solid rgba(127,127,127,.2); }
body.ls-portfolio .cs-soon-cta .mono { color: var(--case-accent); margin-bottom: 18px; }
body.ls-portfolio .cs-soon-cta h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(26px, 3.4vw, 54px); line-height: 1.02; letter-spacing: -.04em; max-width: 22ch; margin: 0 auto 36px; }
body.ls-portfolio .cs-soon-cta__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
body.ls-portfolio .case[data-slug="flexworkz"] .btn--accent { background: #DBB654; color: #0A0A0A; }
body.ls-portfolio .case[data-slug="flexworkz"] .cs-soon__row i { color: #DBB654; }
body.ls-portfolio .case[data-slug="flexworkz"] .cs-soon__row--rev span { -webkit-text-stroke-color: rgba(219,182,84,.5); }

/* =========================================================
   FLEXWORKZ — their house style: black, gold #DBB654, Poppins
   ========================================================= */
body.ls-portfolio .case[data-slug="flexworkz"] { --fx-gold: #DBB654; --fx-cream: #FBF7EC; --fx-font: "Poppins", var(--f-display); }
body.ls-portfolio .case[data-slug="flexworkz"] .cs-hero__title { font-family: var(--fx-font); font-weight: 900; letter-spacing: -.02em; }
body.ls-portfolio .case[data-slug="flexworkz"] .cs-hero__title .w:first-child .c:nth-child(-n+4) { color: var(--fx-gold); }
body.ls-portfolio .case[data-slug="flexworkz"] .cs-soon__row { font-family: var(--fx-font); font-weight: 900; letter-spacing: -.01em; }
body.ls-portfolio .case[data-slug="flexworkz"] .cs-soon__row span { -webkit-text-stroke-color: rgba(242,239,233,.16); }
body.ls-portfolio .case[data-slug="flexworkz"] .cs-soon__row--rev span { -webkit-text-stroke-color: rgba(219,182,84,.28); }
body.ls-portfolio .cs-soon__logo { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: min(560px, 72vw); height: auto; z-index: 2; filter: drop-shadow(0 20px 50px rgba(0,0,0,.8)); }
body.ls-portfolio .case[data-slug="flexworkz"] .cs-soon__lock { top: 14%; width: 64px; }
body.ls-portfolio .cs-soon__stripes { position: absolute; right: -6vw; top: -10vh; width: 46vw; height: 70vh; background: repeating-linear-gradient(-35deg, rgba(219,182,84,.0) 0 22px, rgba(219,182,84,.22) 22px 30px); -webkit-mask-image: linear-gradient(225deg, #000 20%, transparent 70%); mask-image: linear-gradient(225deg, #000 20%, transparent 70%); }
body.ls-portfolio .case[data-slug="flexworkz"] .cs-block h2 { color: var(--fx-gold); }
body.ls-portfolio .case[data-slug="flexworkz"] .cs-soon-cta h2 { font-family: var(--fx-font); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; }
body.ls-portfolio .case[data-slug="flexworkz"] .btn--accent { background: var(--fx-gold); color: #0A0A0A; font-family: var(--fx-font); font-weight: 700; letter-spacing: .02em; box-shadow: 0 0 40px rgba(219,182,84,.45); }
body.ls-portfolio .case[data-slug="flexworkz"] .btn--accent:hover { background: var(--fx-cream); }
body.ls-portfolio .cs-fxsteps { grid-column: span 12; padding: clamp(24px, 4vw, 56px) 0; }
body.ls-portfolio .cs-fxsteps > .mono { display: block; color: #DBB654; margin-bottom: 28px; }
body.ls-portfolio .cs-fxsteps ol { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(219,182,84,.25); border: 1px solid rgba(219,182,84,.25); border-radius: 18px; overflow: hidden; }
body.ls-portfolio .cs-fxsteps li { background: #0A0A0A; padding: 28px 26px 32px; transition: background .4s; }
body.ls-portfolio .cs-fxsteps li:hover { background: #141109; }
body.ls-portfolio .cs-fxsteps b { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #DBB654; color: #0A0A0A; font-family: "Poppins", var(--f-display); font-weight: 900; font-size: 18px; box-shadow: 0 0 24px rgba(219,182,84,.4); }
body.ls-portfolio .cs-fxsteps h3 { font-family: "Poppins", var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(18px, 1.6vw, 24px); margin: 22px 0 8px; }
body.ls-portfolio .cs-fxsteps p { color: rgba(242,239,233,.7); font-size: 15px; }
@media (max-width: 860px) { body.ls-portfolio .cs-fxsteps ol { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { body.ls-portfolio .cs-fxsteps ol { grid-template-columns: 1fr; } }
body.ls-portfolio .cs-hero__media .cs-soon__logo { width: min(560px, 72vw); height: auto; object-fit: contain; }

/* =========================================================
   FLEXWORKZ — interaction
   ========================================================= */
body.ls-portfolio .cs-hero__media .cs-soon__logo { transition: transform .5s var(--ease-out); }
body.ls-portfolio .cs-soon__stripes { transition: transform .8s var(--ease-out); }
body.ls-portfolio .cs-soon__lock { cursor: pointer; border: 0; z-index: 3; transition: transform .3s var(--ease-out), box-shadow .3s; }
body.ls-portfolio .cs-soon__lock:hover { box-shadow: 0 0 30px rgba(219,182,84,.45); color: #DBB654; }
body.ls-portfolio .cs-soon__lock.is-shake { animation: fxShake .55s; }
@keyframes fxShake { 0%, 100% { transform: translate(-50%, -50%) rotate(0); } 20% { transform: translate(calc(-50% - 6px), -50%) rotate(-12deg); } 40% { transform: translate(calc(-50% + 6px), -50%) rotate(10deg); } 60% { transform: translate(calc(-50% - 4px), -50%) rotate(-6deg); } 80% { transform: translate(calc(-50% + 3px), -50%) rotate(4deg); } }

/* scroll-driven process */
body.ls-portfolio .cs-fxsteps { height: calc(var(--n) * 38vh + 100vh); padding: 0; position: relative; }
body.ls-portfolio .cs-fxsteps__sticky { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; }
body.ls-portfolio .cs-fxsteps__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
body.ls-portfolio .cs-fxsteps__head > .mono:first-child { color: #DBB654; margin: 0; }
body.ls-portfolio .cs-fxsteps > .mono { display: none; }
body.ls-portfolio .cs-fxsteps__hint { opacity: .5; }
body.ls-portfolio .cs-fxsteps__bar { height: 3px; background: rgba(219,182,84,.18); border-radius: 99px; margin-bottom: 22px; overflow: hidden; }
body.ls-portfolio .cs-fxsteps__bar i { display: block; height: 100%; background: #DBB654; transform-origin: left; transform: scaleX(0); transition: transform .5s var(--ease-out); box-shadow: 0 0 16px rgba(219,182,84,.7); }
body.ls-portfolio .cs-fxsteps li { cursor: pointer; opacity: .38; transition: opacity .4s, background .4s, transform .4s var(--ease-out); }
body.ls-portfolio .cs-fxsteps li.is-done { opacity: .6; }
body.ls-portfolio .cs-fxsteps li.is-on { opacity: 1; background: #15120A; }
body.ls-portfolio .cs-fxsteps li b { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), box-shadow .4s; box-shadow: none; }
body.ls-portfolio .cs-fxsteps li.is-on b { transform: scale(1.15); box-shadow: 0 0 34px rgba(219,182,84,.75); }
body.ls-portfolio .cs-fxsteps li.is-done b { background: transparent; color: #DBB654; box-shadow: inset 0 0 0 2px #DBB654; }
body.ls-portfolio .cs-fxsteps li.is-on h3 { color: #DBB654; }
@media (max-width: 520px) { body.ls-portfolio .cs-fxsteps ol { grid-template-columns: 1fr 1fr; } body.ls-portfolio .cs-fxsteps li { padding: 18px 16px 20px; } body.ls-portfolio .cs-fxsteps h3 { margin-top: 12px; } body.ls-portfolio .cs-fxsteps p { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { body.ls-portfolio .cs-fxsteps { height: auto; } body.ls-portfolio .cs-fxsteps__sticky { position: static; min-height: 0; } body.ls-portfolio .cs-fxsteps li { opacity: 1; } }
/* story: Flexworkz internship card in their house style */
body.ls-portfolio .story__card--fx { background: #0A0A0A; border-color: rgba(219,182,84,.4); color: #F2EFE9; }
body.ls-portfolio .story__card--fx img { position: absolute; left: 28px; right: 28px; top: 34%; width: calc(100% - 56px); height: auto; transform: translateY(-50%); transition: transform .8s var(--ease-out); }
body.ls-portfolio .story__card--fx:hover img { transform: translateY(-50%) scale(1.04); }
body.ls-portfolio .story__card--fx h3 { font-family: "Poppins", var(--f-display); font-weight: 900; color: #DBB654; }
body.ls-portfolio .story__card--fx p { color: rgba(242,239,233,.72); }
body.ls-portfolio .story__card--fx > span { color: rgba(219,182,84,.85); }


/* about portrait: pill shape filled by the photo, with a floating liquid-glass name tag */
body.ls-portfolio .about__portrait, body.ls-portfolio .about__portrait:hover { border-radius: 999px 999px 32px 32px; }
body.ls-portfolio .about__portrait .about__photo { transform: none; }


body.ls-portfolio .about__tag { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 26px 13px; border-radius: 999px; white-space: nowrap; color: #fff; text-align: center; --glass-bg: rgba(14,14,14,.32); transition: transform .6s var(--ease-out); }
body.ls-portfolio .about__tag b { font-family: var(--f-display); font-weight: 700; font-size: clamp(15px, 1.3vw, 20px); letter-spacing: -.02em; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
body.ls-portfolio .about__tag .mono { font-size: 10px; letter-spacing: .12em; opacity: .9; text-shadow: 0 1px 6px rgba(0,0,0,.3); }
body.ls-portfolio .about__portrait:hover .about__tag { transform: translateX(-50%) translateY(-6px); }
body.ls-portfolio .cs-lightbox__place { display: block; font-style: normal; font-size: 15px; opacity: .8; margin-bottom: 8px; }
body.ls-portfolio .cs-lightbox__place:empty { display: none; }

/* language switch (NL / EN) */
body.ls-portfolio .lang-toggle { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 11px; letter-spacing: .08em; color: inherit; cursor: pointer; }

/* =========================================================
   HOME — play: throwable logo, work filter
   ========================================================= */
body.ls-portfolio .lm--stem i, body.ls-portfolio .lm--foot i { pointer-events: auto; cursor: grab; touch-action: none; }
body.ls-portfolio .lm--s i { pointer-events: none; }
body.ls-portfolio .lm--s path { pointer-events: stroke; cursor: grab; }
body.ls-portfolio .lm i.is-grabbed, body.ls-portfolio .lm--s i.is-grabbed path { cursor: grabbing; }
body.ls-portfolio .lm--s i.is-grabbed, body.ls-portfolio .lm--s i:has(path:hover) { touch-action: none; }

body.ls-portfolio .work__filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(20px, 3vw, 36px); }
body.ls-portfolio .work__filter button { padding: 11px 18px; border-radius: 99px; border: 0; color: var(--fg); cursor: pointer; font: inherit; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; transition: background-color .3s, color .3s, transform .3s var(--ease-out); }
body.ls-portfolio .work__filter button:hover { transform: translateY(-2px); }
body.ls-portfolio .work__filter button.is-on { background: var(--accent); color: #fff; }
body.ls-portfolio .card[hidden] { display: none; }
body.ls-portfolio .js-work-grid, body.ls-portfolio .js-playground { will-change: transform; }

/* footer letters you can push away */
body.ls-portfolio .footer__logo { cursor: default; user-select: none; }
body.ls-portfolio .footer__logo .fl { display: inline-block; color: inherit; will-change: transform; }
body.ls-portfolio .footer__logo .fl--sp { width: .22em; }

/* header: the LS mark instead of the text logo */
body.ls-portfolio .header__logo--mark.glass { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border-radius: 50%; }
body.ls-portfolio .header__logo--mark svg { width: 30px; height: 30px; display: block; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
body.ls-portfolio .header__logo--mark:hover svg { transform: rotate(-8deg) scale(1.08); }

/* =========================================================
   HOME — numbers as a bento grid
   ========================================================= */
body.ls-portfolio .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(200px, 17vw, 260px); gap: 14px; padding: 0 var(--side); }
body.ls-portfolio .bt { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(18px, 1.8vw, 26px); border-radius: 26px; overflow: hidden; background: var(--surface); border: 1px solid var(--hair); color: var(--fg); text-decoration: none; isolation: isolate; transition: transform .5s var(--ease-out), border-color .4s; }
body.ls-portfolio .bt:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--fg) 30%, transparent); }
body.ls-portfolio .bt b { position: relative; z-index: 2; display: block; font-family: var(--f-display); font-weight: 800; font-size: clamp(52px, 5.6vw, 84px); line-height: 1; letter-spacing: -.05em; }
body.ls-portfolio .bt > span:last-child { position: relative; z-index: 2; margin-top: 10px; font-size: 16px; line-height: 1.3; max-width: 26ch; color: var(--muted); }
body.ls-portfolio .bt--big { grid-column: span 2; grid-row: span 2; }
body.ls-portfolio .bt--big b { font-size: clamp(90px, 11vw, 160px); }
body.ls-portfolio .bt--wide { grid-column: span 2; }
body.ls-portfolio .bt--shade, body.ls-portfolio .bt--shade > span:last-child, body.ls-portfolio .bt--blue, body.ls-portfolio .bt--gold { color: #F2EFE9; }
body.ls-portfolio .bt--shade > span:last-child, body.ls-portfolio .bt--blue > span:last-child, body.ls-portfolio .bt--gold > span:last-child { color: rgba(242,239,233,.85); }
body.ls-portfolio .bt--shade { background: #0E0E0E; }
body.ls-portfolio .bt--shade::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(14,14,14,.94) 14%, transparent 72%); }
body.ls-portfolio .bt__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; transition: transform 1.2s var(--ease-out), opacity .6s; }
body.ls-portfolio .bt__bg--bright { opacity: .6; }
body.ls-portfolio .bt:hover .bt__bg { transform: scale(1.06); opacity: .65; }
/* projects strip slides */
body.ls-portfolio .bt__strip { position: absolute; top: 22px; right: -24px; display: flex; gap: 10px; transform: rotate(-6deg); transition: transform .9s var(--ease-out); }
body.ls-portfolio .bt__strip img { width: clamp(70px, 6.4vw, 92px); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; box-shadow: 0 12px 24px rgba(0,0,0,.45); }
body.ls-portfolio .bt:hover .bt__strip { transform: rotate(-3deg) translateX(-60px); }
/* phones fan out */
body.ls-portfolio .bt__phones { position: absolute; right: 18px; top: 18px; width: 150px; height: 160px; }
body.ls-portfolio .bt__phones img { position: absolute; width: 62px; height: 128px; object-fit: cover; object-position: top; border-radius: 12px; border: 3px solid #000; box-shadow: 0 10px 20px rgba(0,0,0,.45); transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
body.ls-portfolio .bt__phones img:nth-child(1) { left: 0; top: 20px; transform: rotate(-12deg); }
body.ls-portfolio .bt__phones img:nth-child(2) { left: 44px; top: 0; z-index: 2; }
body.ls-portfolio .bt__phones img:nth-child(3) { left: 88px; top: 20px; transform: rotate(12deg); }
body.ls-portfolio .bt:hover .bt__phones img:nth-child(1) { transform: translateX(-22px) rotate(-22deg); }
body.ls-portfolio .bt:hover .bt__phones img:nth-child(2) { transform: translateY(-8px) scale(1.06); }
body.ls-portfolio .bt:hover .bt__phones img:nth-child(3) { transform: translateX(22px) rotate(22deg); }
/* Flexworkz gold */
body.ls-portfolio .bt--gold { background: #0A0A0A; border-color: rgba(219,182,84,.45); }
body.ls-portfolio .bt--gold b { color: #DBB654; }
body.ls-portfolio .bt__stripes { position: absolute; right: -30px; top: -30px; width: 240px; height: 240px; background: repeating-linear-gradient(-35deg, transparent 0 16px, rgba(219,182,84,.28) 16px 22px); -webkit-mask-image: linear-gradient(225deg, #000 25%, transparent 75%); mask-image: linear-gradient(225deg, #000 25%, transparent 75%); transition: transform 1s var(--ease-out); }
body.ls-portfolio .bt--gold:hover .bt__stripes { transform: translate(-24px, 24px); }
/* tools */
body.ls-portfolio .bt__chips { position: absolute; top: clamp(18px, 1.8vw, 26px); left: clamp(18px, 1.8vw, 26px); right: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
body.ls-portfolio .bt__chips i { font-style: normal; font-size: 11px; letter-spacing: .06em; padding: 6px 10px; border-radius: 99px; background: color-mix(in srgb, var(--fg) 6%, transparent); border: 1px solid var(--hair); transition: transform .4s var(--ease-out); }
body.ls-portfolio .bt__chips i.on { background: var(--accent); border-color: var(--accent); color: #fff; }
body.ls-portfolio .bt:hover .bt__chips i { transform: translateY(-3px); }
body.ls-portfolio .bt:hover .bt__chips i:nth-child(even) { transform: translateY(3px); }
/* exhibition */
body.ls-portfolio .bt--blue { background: #1E3FAE; border-color: #1E3FAE; }
body.ls-portfolio .bt__poster { position: absolute; right: 20px; top: 20px; width: clamp(70px, 6.6vw, 96px); transform: rotate(7deg); border-radius: 4px; box-shadow: 0 14px 28px rgba(0,0,0,.45); transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
body.ls-portfolio .bt:hover .bt__poster { transform: rotate(-4deg) scale(1.1); }
@media (max-width: 900px) {
  body.ls-portfolio .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 210px; gap: 10px; }
  body.ls-portfolio .bt--big { grid-row: span 1; }
  body.ls-portfolio .bt--big b { font-size: 84px; }
  body.ls-portfolio .bt b { font-size: 52px; }
  body.ls-portfolio .bt > span:last-child { font-size: 14px; }
  body.ls-portfolio .bt__phones { transform: scale(.75); transform-origin: top right; }
}
@media (prefers-reduced-motion: reduce) { body.ls-portfolio .bt, body.ls-portfolio .bt * { transition: none !important; } }
@media (max-width: 900px) {
  body.ls-portfolio .bt__phones { transform: scale(.6); right: 10px; top: 10px; }
  body.ls-portfolio .bt__strip { top: 14px; }
  body.ls-portfolio .bt__strip img { width: 60px; }
}
@media (max-width: 900px) {
  body.ls-portfolio .bt__chips { gap: 6px; }
  body.ls-portfolio .bt__chips i { font-size: 10px; padding: 5px 8px; }
  body.ls-portfolio .bt__chips i:nth-child(n+6) { display: none; }
  body.ls-portfolio .bt__poster { width: 58px; right: 14px; top: 14px; }
}

/* keyboard focus on the scrollable experiments row */
body.ls-portfolio .playground__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 12px; }

/* =========================================================
   CONTACT FORM PAGE (#bericht)
   ========================================================= */
body.ls-portfolio .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.ls-portfolio .contact__form-btn { background: var(--accent); color: var(--accent-ink); }
body.ls-portfolio .contact__form-btn b { font-weight: 400; transition: transform .4s var(--ease-out); }
body.ls-portfolio .contact__form-btn:hover b { transform: rotate(-20deg) translateX(3px); }

body.ls-portfolio .msg { --msg-c: var(--accent); position: fixed; inset: 0; z-index: 910; visibility: hidden; pointer-events: none; }
body.ls-portfolio .msg.is-open { visibility: visible; pointer-events: auto; }
body.ls-portfolio .msg__wipe { position: absolute; inset: 0; background: var(--msg-c); clip-path: inset(100% 0 0 0); transition: background-color .6s; }
body.ls-portfolio .msg__scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: var(--bg); color: var(--fg); clip-path: inset(100% 0 0 0); }
body.ls-portfolio .msg__close { position: fixed; top: 20px; right: var(--side); z-index: 5; padding: 12px 18px; border-radius: 999px; border: 0; color: var(--fg); cursor: pointer; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
body.ls-portfolio .msg__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 90px); align-items: center; min-height: 100%; padding: clamp(90px, 10vh, 130px) var(--side) 70px; }
body.ls-portfolio .msg__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(48px, 7vw, 112px); line-height: .9; letter-spacing: -.04em; margin-bottom: clamp(28px, 4vw, 52px); }
body.ls-portfolio .msg__title > span { display: inline-block; }
body.ls-portfolio .msg__title em { display: inline-block; font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--msg-c); transition: color .6s; }
:root[data-theme="light"] .msg__title em, body.ls-portfolio .msg__title em { filter: saturate(1.1); }

body.ls-portfolio .msg__lib { font-size: clamp(22px, 2.4vw, 36px); line-height: 1.5; letter-spacing: -.01em; }
body.ls-portfolio .fld { display: inline-block; position: relative; }
body.ls-portfolio .fld input { font: inherit; color: var(--fg); background: none; border: 0; padding: 0 .1em; min-width: 6ch; max-width: 100%; border-bottom: 2px dashed color-mix(in srgb, var(--fg) 35%, transparent); transition: border-color .3s, width .2s; outline: none; }
body.ls-portfolio .fld input::placeholder { color: color-mix(in srgb, var(--fg) 30%, transparent); font-style: italic; font-family: var(--f-serif); }
body.ls-portfolio .fld input:focus { border-bottom-style: solid; border-bottom-color: var(--msg-c); }
body.ls-portfolio .fld input:focus-visible { outline: 2px solid var(--msg-c); outline-offset: 4px; border-radius: 4px; }
body.ls-portfolio .fld.is-ok input { border-bottom: 2px solid var(--msg-c); }
body.ls-portfolio .fld::after { content: "✓"; position: absolute; right: -1.1em; top: 50%; translate: 0 -50%; font-size: .55em; color: var(--msg-c); opacity: 0; scale: .4; transition: opacity .3s, scale .4s cubic-bezier(.3, 1.6, .5, 1); }
body.ls-portfolio .fld.is-ok::after { opacity: 1; scale: 1; }

body.ls-portfolio .msg__topics { border: 0; padding: 0; margin: 14px 0 22px; display: flex; flex-wrap: wrap; gap: 10px; }
body.ls-portfolio .topic { position: relative; cursor: pointer; }
body.ls-portfolio .topic input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
body.ls-portfolio .topic span { display: inline-block; padding: 14px 22px; border-radius: 999px; border: 1px solid var(--hair); font-size: clamp(15px, 1.2vw, 18px); transition: background-color .35s, color .35s, border-color .35s, transform .45s var(--ease-out); }
body.ls-portfolio .topic:hover span { transform: translateY(-3px); border-color: color-mix(in srgb, var(--fg) 45%, transparent); }
body.ls-portfolio .topic input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: translateY(-3px) rotate(-2deg); }
body.ls-portfolio .topic input:focus-visible + span { outline: 2px solid var(--msg-c); outline-offset: 3px; }

body.ls-portfolio .msg__area { position: relative; display: block; margin-top: 30px; }
body.ls-portfolio .msg__area > .mono { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
body.ls-portfolio .msg__area textarea { width: 100%; resize: vertical; min-height: 150px; padding: 20px 22px 36px; border-radius: 22px; border: 1px solid var(--hair); background: var(--surface); color: var(--fg); font: inherit; font-size: 17px; line-height: 1.5; transition: border-color .3s; outline: none; }
body.ls-portfolio .msg__area textarea::placeholder { color: var(--muted); }
body.ls-portfolio .msg__area textarea:focus { border-color: var(--msg-c); }
body.ls-portfolio .msg__area textarea:focus-visible { outline: 2px solid var(--msg-c); outline-offset: 2px; }
body.ls-portfolio .msg__count { position: absolute; right: 18px; bottom: 14px; font-size: 11px; color: var(--muted); }
body.ls-portfolio .msg__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

body.ls-portfolio .msg__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 26px; }
body.ls-portfolio .msg__send { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 32px; border-radius: 999px; border: 1px solid var(--fg); background: transparent; color: var(--fg); font-family: var(--f-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: color .4s; }
body.ls-portfolio .msg__send-fill { position: absolute; inset: 0; z-index: -1; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); opacity: .14; }
body.ls-portfolio .msg.is-ready .msg__send { color: var(--bg); border-color: var(--fg); }
body.ls-portfolio .msg.is-ready .msg__send-fill { opacity: 1; }
body.ls-portfolio .msg__send b { font-weight: 400; transition: transform .5s var(--ease-out); }
body.ls-portfolio .msg.is-ready .msg__send:hover b { transform: translateX(6px) rotate(-30deg); }
body.ls-portfolio .msg.is-sending .msg__send { pointer-events: none; }
body.ls-portfolio .msg.is-sending .msg__send b { animation: msgFly .8s var(--ease-io) infinite; }
@keyframes msgFly { 50% { transform: translate(8px, -6px) rotate(-30deg); } }
body.ls-portfolio .msg__send:focus-visible { outline: 2px solid var(--msg-c); outline-offset: 4px; }
body.ls-portfolio .msg__left { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
body.ls-portfolio .msg__status { min-height: 1.5em; margin-top: 16px; font-size: 13px; color: var(--msg-c); filter: brightness(1.4); }

/* live postcard */
body.ls-portfolio .msg__stage { perspective: 1200px; display: grid; place-items: center; padding: 20px 0; }
body.ls-portfolio .msg__card { --c: var(--msg-c); position: relative; width: min(100%, 460px); aspect-ratio: 1.42; padding: clamp(18px, 2vw, 28px); border-radius: 18px; background: #F4F0E8; color: #141414; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6), 0 2px 0 rgba(0,0,0,.05); display: grid; grid-template-rows: auto 1fr auto; gap: 14px; transform-style: preserve-3d; rotate: 3deg; background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(20,20,20,.07) 31px 32px); background-position: 0 14px; }
body.ls-portfolio .msg__card::before { content: ""; position: absolute; inset: 10px; border-radius: 12px; border: 2px solid transparent; border-image: repeating-linear-gradient(45deg, var(--c) 0 12px, transparent 12px 18px, #E9644A 18px 30px, transparent 30px 36px) 6; opacity: .5; pointer-events: none; transition: opacity .6s; }
body.ls-portfolio .mc__top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; }
body.ls-portfolio .mc__mark { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #6B6860; }
body.ls-portfolio .mc__mark i { font-style: normal; }
body.ls-portfolio .mc__stamp { width: 68px; height: 80px; display: grid; place-items: center; align-content: center; gap: 2px; background: var(--c); color: #fff; border-radius: 4px; outline: 3px dotted #F4F0E8; outline-offset: -3px; transition: background-color .6s; box-shadow: 0 0 0 4px #F4F0E8; }
body.ls-portfolio .mc__stamp b { font-family: var(--f-display); font-size: 28px; line-height: 1; }
body.ls-portfolio .mc__stamp small { font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
body.ls-portfolio .mc__postmark { position: absolute; right: 44px; top: 44px; width: 96px; height: 96px; display: grid; place-items: center; text-align: center; border-radius: 50%; border: 2px solid #C0392B; color: #C0392B; font-size: 9px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; rotate: -12deg; opacity: 0; mix-blend-mode: multiply; pointer-events: none; }
body.ls-portfolio .mc__postmark::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 1px dashed currentColor; }
body.ls-portfolio .mc__text { font-family: var(--f-serif); font-style: italic; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; word-break: break-word; }
body.ls-portfolio .mc__body.is-empty { color: #A09C93; }
body.ls-portfolio .mc__caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.12em; background: var(--c); animation: mcBlink 1s steps(1) infinite; }
@keyframes mcBlink { 50% { opacity: 0; } }
body.ls-portfolio .mc__foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid rgba(20,20,20,.15); padding-top: 12px; }
body.ls-portfolio .mc__foot span { display: block; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #6B6860; margin-bottom: 3px; }
body.ls-portfolio .mc__foot b { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* sent */
body.ls-portfolio .msg__done { min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 120px var(--side) 80px; }
body.ls-portfolio .msg__done .msg__title { font-size: clamp(56px, 11vw, 190px); outline: none; }
body.ls-portfolio .msg__done-text { font-size: clamp(18px, 1.6vw, 24px); max-width: 32ch; color: var(--muted); }
body.ls-portfolio .msg__done-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
body.ls-portfolio .msg__again { background: var(--fg); color: var(--bg); border: 0; cursor: pointer; }
body.ls-portfolio .msg__back { border: 0; cursor: pointer; }

@media (max-width: 900px) {
  body.ls-portfolio .msg__inner { grid-template-columns: 1fr; align-items: start; padding-top: 84px; }
  body.ls-portfolio .msg__stage { order: -1; padding: 0; }
  body.ls-portfolio .msg__card { width: min(100%, 360px); }
  body.ls-portfolio .mc__postmark { width: 76px; height: 76px; right: 36px; top: 36px; font-size: 8px; }
  body.ls-portfolio .msg__lib { font-size: 22px; }
  body.ls-portfolio .topic span { padding: 12px 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { body.ls-portfolio .mc__caret, body.ls-portfolio .msg.is-sending .msg__send b { animation: none; } }
/* readable tint of the chosen colour for text and focus rings (lighter on dark, darker on light) */
body.ls-portfolio .msg { --msg-t: color-mix(in srgb, var(--msg-c) 55%, var(--fg)); }
body.ls-portfolio .msg__title em, body.ls-portfolio .fld::after, body.ls-portfolio .msg__status { color: var(--msg-t); filter: none; }
body.ls-portfolio .fld input:focus, body.ls-portfolio .fld.is-ok input { border-bottom-color: var(--msg-t); }
body.ls-portfolio .fld input:focus-visible, body.ls-portfolio .topic input:focus-visible + span, body.ls-portfolio .msg__area textarea:focus-visible, body.ls-portfolio .msg__send:focus-visible { outline-color: var(--msg-t); }
body.ls-portfolio .msg__area textarea:focus { border-color: var(--msg-t); }
body.ls-portfolio .msg__inner[hidden], body.ls-portfolio .msg__done[hidden] { display: none; }
body.ls-portfolio .mc__postmark { top: -8px; right: 62px; width: 84px; height: 84px; font-size: 8px; }
@media (max-width: 900px) { body.ls-portfolio .mc__postmark { top: -6px; right: 52px; width: 68px; height: 68px; font-size: 7px; } }
body.ls-portfolio .fld { margin-right: .7em; }


/* ---------- Elementor resets ---------- */
body.ls-portfolio .ls-section > .elementor-container { max-width: none; }
body.ls-portfolio .ls-section .elementor-widget-wrap { padding: 0 !important; }
body.ls-portfolio .ls-section .elementor-widget:not(:last-child) { margin: 0; }
body.ls-portfolio .ls-section .elementor-widget-html, body.ls-portfolio .ls-section .elementor-widget-shortcode { width: 100%; }
body.ls-portfolio .elementor { overflow-x: clip; }
body.ls-portfolio #wpadminbar { mix-blend-mode: normal; }