/* Christian Pohler — Redesign V1
   No external font/CDN dependency: GDPR-friendly foundation.
*/
:root{
  --bg:#080808;
  --bg-soft:#0d0d0d;
  --fg:#f1efe9;
  --muted:#9b9992;
  --line:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.055);
  --accent:#d8ffc8;
  --accent-rgb:216,255,200;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(20px,3.2vw,54px);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.45;overflow-x:hidden;
}
body.menu-open{overflow:hidden}
::selection{background:rgba(var(--accent-rgb),.9);color:#070707}
a{color:inherit;text-decoration:none}
button{font:inherit}
.skip-link{position:fixed;left:12px;top:-80px;z-index:1000;padding:12px 16px;background:#fff;color:#000}
.skip-link:focus{top:12px}
.grain{
  position:fixed;inset:0;z-index:98;pointer-events:none;opacity:.045;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")
}
.energy-field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.88}
main,.site-header,.mobile-menu{position:relative;z-index:2}

.preloader{
  position:fixed;inset:0;z-index:999;background:#050505;display:grid;place-items:center;
  transition:opacity .8s var(--ease),visibility .8s
}
.preloader.is-gone{opacity:0;visibility:hidden}
.preloader__mark{position:relative;width:92px;height:92px;display:grid;place-items:center;font-weight:700;letter-spacing:-.08em}
.preloader__mark span{position:relative;z-index:2}
.preloader__mark i{position:absolute;inset:0;border:1px solid rgba(255,255,255,.16);border-radius:50%}
.preloader__mark i:after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;border-top:1px solid var(--accent);
  animation:spin 1.5s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}

.site-header{
  position:fixed;top:0;left:0;right:0;height:86px;padding:0 var(--pad);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;z-index:100;
  border-bottom:1px solid transparent;transition:background .4s,border-color .4s,backdrop-filter .4s
}
.site-header.is-scrolled{background:rgba(8,8,8,.58);backdrop-filter:blur(20px) saturate(130%);border-color:var(--line)}
.brand{display:flex;align-items:center;gap:16px;width:max-content}
.brand__mark{
  width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;
  font-size:12px;font-weight:750;letter-spacing:-.08em;transition:background .3s,color .3s
}
.brand:hover .brand__mark{background:var(--fg);color:var(--bg)}
.brand__name{font-size:12px;text-transform:uppercase;letter-spacing:.13em}
.nav{display:flex;gap:clamp(20px,2.2vw,40px)}
.nav a,.sound-toggle{font-size:11px;text-transform:uppercase;letter-spacing:.13em;color:#d6d4ce}
.nav a{position:relative}
.nav a:after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav a:hover:after{transform:scaleX(1);transform-origin:left}
.sound-toggle{
  justify-self:end;background:var(--glass);border:1px solid var(--line);color:var(--fg);
  display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:100px;cursor:pointer
}
.sound-toggle__bars{display:flex;align-items:center;gap:2px;height:12px}
.sound-toggle__bars i{display:block;width:1px;height:4px;background:currentColor;transition:height .3s}
html[data-sound="on"] .sound-toggle__bars i:nth-child(1){animation:eq .8s ease-in-out infinite alternate}
html[data-sound="on"] .sound-toggle__bars i:nth-child(2){animation:eq .55s ease-in-out infinite alternate-reverse}
html[data-sound="on"] .sound-toggle__bars i:nth-child(3){animation:eq .7s ease-in-out infinite alternate}
html[data-sound="on"] .sound-toggle__bars i:nth-child(4){animation:eq .45s ease-in-out infinite alternate-reverse}
@keyframes eq{to{height:12px}}
.menu-toggle{display:none;background:none;border:0;color:#fff;width:44px;height:44px}
.menu-toggle span{display:block;width:22px;height:1px;background:currentColor;margin:6px auto;transition:.3s}
.mobile-menu{display:none}

.hero{
  min-height:100svh;padding:132px var(--pad) 50px;position:relative;display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden
}
.hero:before{
  content:"";position:absolute;width:56vw;height:56vw;right:-15vw;top:6vh;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.09),transparent 63%);filter:blur(8px);pointer-events:none
}
.hero__meta{display:grid;grid-template-columns:1fr 1fr 1fr;font-size:10px;text-transform:uppercase;letter-spacing:.17em;color:var(--muted);padding-right:42vw}
.hero__content{position:relative;z-index:3}
.eyebrow{margin:0 0 24px;font-size:11px;text-transform:uppercase;letter-spacing:.3em;color:var(--accent)}
.hero__title{font-size:clamp(66px,10.2vw,180px);line-height:.78;letter-spacing:-.075em;font-weight:560;margin:0;text-transform:uppercase}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line>span{display:block;transform:translateY(115%);animation:titleIn 1.25s var(--ease) forwards}
.hero__title .line:nth-child(2)>span{animation-delay:.1s}
.hero__title .line:nth-child(3)>span{animation-delay:.2s}
.line--offset{padding-left:8.5vw}
@keyframes titleIn{to{transform:translateY(0)}}
.hero__bottom{display:grid;grid-template-columns:minmax(280px,510px) auto;justify-content:space-between;align-items:end;margin-top:50px;padding-left:8.5vw}
.hero__bottom p{font-size:clamp(15px,1.35vw,21px);max-width:520px;color:#c2c0ba;margin:0}
.magnetic-link{
  display:inline-flex;align-items:center;justify-content:space-between;gap:38px;padding:16px 18px 16px 22px;border:1px solid var(--line);
  border-radius:999px;font-size:11px;text-transform:uppercase;letter-spacing:.13em;background:rgba(12,12,12,.34);backdrop-filter:blur(10px);
  transition:border-color .3s,background .3s
}
.magnetic-link:hover{border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.06)}
.magnetic-link span{font-size:17px;color:var(--accent)}
.hero__orb{position:absolute;right:8vw;top:22vh;width:27vw;aspect-ratio:1;border-radius:50%;opacity:.68;mix-blend-mode:screen}
.hero__orb-core{position:absolute;inset:34%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--accent) 12%,rgba(var(--accent-rgb),.1) 48%,transparent 70%);filter:blur(2px);animation:breathe 5.28s ease-in-out infinite}
.hero__orb-ring{position:absolute;border:1px solid rgba(var(--accent-rgb),.18);border-radius:50%;inset:14%;animation:orb 12s linear infinite}
.hero__orb-ring--2{inset:3%;border-color:rgba(255,255,255,.08);animation-duration:19s;animation-direction:reverse}
.hero__orb-ring:after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--accent);top:9%;left:21%;box-shadow:0 0 22px var(--accent)}
@keyframes breathe{50%{transform:scale(1.15);filter:blur(5px)}}
@keyframes orb{to{transform:rotate(360deg)}}
.scroll-cue{position:absolute;right:var(--pad);bottom:36px;display:flex;align-items:center;gap:12px;font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);transform:rotate(90deg);transform-origin:right center}
.scroll-cue i{display:block;width:52px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}

.section-index{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
.statement{min-height:86vh;padding:14vh var(--pad);display:grid;grid-template-columns:1fr 4fr;align-items:start;border-top:1px solid var(--line)}
.statement__lead{font-size:clamp(42px,6.4vw,108px);line-height:.97;letter-spacing:-.055em;margin:0;max-width:1300px;font-weight:450}
.statement__lead strong{font-weight:450;color:var(--accent)}
.statement__sub{grid-column:2;max-width:500px;margin:60px 0 0 auto;font-size:18px;color:var(--muted)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}
.reveal-text{opacity:.34;transition:opacity 1s}
.reveal-text.is-visible{opacity:1}

.work,.practice,.lab,.contact{padding:15vh var(--pad)}
.section-head{display:grid;grid-template-columns:1fr minmax(250px,420px);gap:50px;align-items:end;margin-bottom:10vh}
.section-title{font-size:clamp(54px,7.3vw,122px);line-height:.88;letter-spacing:-.065em;font-weight:500;margin:18px 0 0}
.section-title em,.about h2 em,.contact h2 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;text-transform:none}
.section-note{color:var(--muted);font-size:15px;margin:0 0 8px}

.project-list{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(34px,6vw,100px) clamp(22px,3vw,54px)}
.project--wide{grid-column:1/-1}
.project--portrait{margin-top:22vh}
.project a{display:block}
.project__visual{
  position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:#111;border:1px solid rgba(255,255,255,.08);
  transform:translateZ(0)
}
.project:not(.project--wide) .project__visual{aspect-ratio:4/5}
.project__visual:after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.58));
  transition:opacity .6s
}
.visual--volkshilfe{
  background:
    radial-gradient(circle at 68% 40%,rgba(255,90,65,.5),transparent 22%),
    linear-gradient(125deg,#351010 0%,#130b0b 48%,#191919 100%)
}
.visual--halle{
  background:
    radial-gradient(circle at 70% 26%,rgba(140,200,255,.18),transparent 24%),
    linear-gradient(155deg,#111922,#080a0d 62%)
}
.visual--commercial{
  background:
    radial-gradient(circle at 48% 50%,rgba(var(--accent-rgb),.14),transparent 24%),
    linear-gradient(145deg,#171715,#070707 70%)
}
.project__signal{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 7%,rgba(255,255,255,.02) 7.1% 7.2%);transform:skewX(-12deg)}
.project__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:54px 54px;transform:perspective(500px) rotateX(58deg) scale(1.8) translateY(18%)}
.project__number{position:absolute;z-index:2;left:20px;top:18px;font-size:10px;letter-spacing:.18em;color:#d7d6d0}
.project__view{position:absolute;z-index:3;right:20px;bottom:18px;font-size:10px;text-transform:uppercase;letter-spacing:.14em;transform:translateY(34px);transition:transform .5s var(--ease)}
.project__ghost{position:absolute;z-index:1;left:6%;bottom:-10%;font-size:clamp(110px,19vw,330px);line-height:.8;font-weight:700;letter-spacing:-.09em;color:rgba(255,255,255,.075);transition:transform 1.2s var(--ease)}
.project:hover .project__ghost{transform:scale(1.035) translateX(2%)}
.project:hover .project__view{transform:none}
.project__info{display:grid;grid-template-columns:1fr auto auto;gap:30px;border-top:1px solid var(--line);padding-top:16px;margin-top:14px}
.project__info h3{font-size:19px;font-weight:500;margin:0 0 3px}
.project__info p,.project__info>span{font-size:11px;color:var(--muted);margin:0}
.work__footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:14vh;padding-top:24px}
.work__footer p{color:var(--muted);margin:0}
.text-link{display:inline-flex;align-items:center;gap:20px;border-bottom:1px solid rgba(var(--accent-rgb),.55);padding-bottom:4px}
.text-link span{color:var(--accent)}

.practice{border-top:1px solid var(--line)}
.disciplines{border-top:1px solid var(--line)}
.discipline{
  display:grid;grid-template-columns:80px minmax(170px,.8fr) 1.2fr 120px;align-items:center;gap:30px;
  min-height:170px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;transition:padding .5s var(--ease)
}
.discipline:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--accent-rgb),.08),transparent 55%);transform:translateX(-110%);transition:transform .75s var(--ease)}
.discipline:hover:before{transform:none}
.discipline__no{font-size:10px;color:var(--muted);position:relative}
.discipline h3{font-size:clamp(36px,4vw,66px);font-weight:500;letter-spacing:-.045em;margin:0;position:relative}
.discipline p{color:var(--muted);max-width:560px;margin:0;position:relative}
.discipline__pulse{justify-self:end;width:52px;height:52px;border:1px solid var(--line);border-radius:50%;position:relative}
.discipline__pulse:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--accent);left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 20px rgba(var(--accent-rgb),.65)}
.discipline:hover .discipline__pulse:after{animation:pulse .9s var(--ease)}
@keyframes pulse{50%{box-shadow:0 0 0 18px rgba(var(--accent-rgb),.08),0 0 32px rgba(var(--accent-rgb),.7)}}

.about{min-height:100vh;padding:12vh var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,140px);align-items:center}
.about__portrait{height:min(74vh,850px);position:relative;overflow:hidden;background:linear-gradient(155deg,#121212,#080808);border:1px solid var(--line)}
.portrait__light{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;right:-10%;top:10%;background:radial-gradient(circle,rgba(var(--accent-rgb),.18),transparent 62%);filter:blur(8px)}
.portrait__monogram{position:absolute;left:5%;bottom:-8%;font-size:min(28vw,440px);font-weight:750;letter-spacing:-.12em;color:rgba(255,255,255,.05)}
.portrait__caption{position:absolute;left:18px;bottom:16px;font-size:9px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
.about h2{font-size:clamp(48px,6vw,96px);line-height:.9;letter-spacing:-.055em;font-weight:500;margin:22px 0 48px}
.about__lead{font-size:clamp(22px,2.1vw,34px);line-height:1.15;max-width:600px}
.about__copy>p:not(.about__lead){max-width:560px;color:var(--muted);font-size:17px;margin:0 0 46px}

.lab{min-height:110vh;border-top:1px solid var(--line);position:relative;overflow:hidden}
.lab:before{content:"";position:absolute;width:80vw;height:80vw;left:25%;top:10%;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.12);box-shadow:inset 0 0 180px rgba(var(--accent-rgb),.035);pointer-events:none}
.lab__top{display:flex;justify-content:space-between;align-items:center}
.lab__status{font-size:9px;text-transform:uppercase;letter-spacing:.17em;color:var(--muted);display:flex;align-items:center;gap:8px}
.lab__status i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px var(--accent);animation:status 2s ease-in-out infinite}
@keyframes status{50%{opacity:.25}}
.lab__title-wrap{display:grid;grid-template-columns:1fr minmax(260px,380px);gap:50px;align-items:end;margin-top:13vh}
.lab__title{font-size:clamp(68px,11.2vw,190px);line-height:.76;letter-spacing:-.08em;margin:0;font-weight:650}
.lab__title-wrap p{color:var(--muted);font-size:15px;max-width:330px;margin-bottom:8px}
.lab__experiments{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:13vh;background:var(--line);border:1px solid var(--line)}
.experiment{min-height:190px;background:rgba(8,8,8,.96);border:0;color:var(--fg);padding:20px;text-align:left;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;cursor:pointer;transition:background .5s}
.experiment:hover{background:rgba(var(--accent-rgb),.06)}
.experiment span,.experiment small{font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.experiment strong{align-self:end;font-size:22px;font-weight:500}
.experiment small{text-align:right;align-self:end}

.contact{min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;border-top:1px solid var(--line);padding-bottom:30px}
.contact__inner{padding-top:4vh}
.contact__kicker{margin:8vh 0 20px;color:var(--muted)}
.contact h2{font-size:clamp(72px,12.8vw,210px);line-height:.73;letter-spacing:-.085em;font-weight:650;margin:0 0 8vh}
.contact__mail{font-size:clamp(15px,1.4vw,21px)}
.contact__footer{display:grid;grid-template-columns:1fr auto 1fr;gap:30px;padding-top:30px;border-top:1px solid var(--line);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.contact__footer div{display:flex;gap:24px}
.contact__footer>span:last-child{text-align:right}

.cursor{position:fixed;left:0;top:0;width:34px;height:34px;border:1px solid rgba(255,255,255,.4);border-radius:50%;pointer-events:none;z-index:500;transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s,background .3s;mix-blend-mode:difference}
.cursor span{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}
.cursor.is-active{width:58px;height:58px;border-color:rgba(var(--accent-rgb),.75);background:rgba(255,255,255,.08)}

@media(max-width:900px){
  .site-header{grid-template-columns:1fr auto auto;gap:10px;height:76px}
  .brand__name,.nav{display:none}
  .sound-toggle{padding:9px 12px}
  .menu-toggle{display:block}
  .mobile-menu{
    display:flex;position:fixed;inset:0;z-index:90;background:rgba(6,6,6,.94);backdrop-filter:blur(28px);
    align-items:center;padding:100px var(--pad) 50px;opacity:0;visibility:hidden;transition:.5s var(--ease)
  }
  .mobile-menu.is-open{opacity:1;visibility:visible}
  .mobile-menu nav{width:100%}
  .mobile-menu a{display:flex;align-items:baseline;gap:20px;font-size:clamp(45px,12vw,88px);letter-spacing:-.06em;line-height:1.05;border-bottom:1px solid var(--line)}
  .mobile-menu a span{font-size:9px;letter-spacing:.15em;color:var(--muted)}
  .hero{padding-top:120px}
  .hero__meta{grid-template-columns:1fr auto;padding-right:0}.hero__meta span:nth-child(3){display:none}
  .hero__title{font-size:clamp(60px,15.4vw,120px);line-height:.82}
  .line--offset{padding-left:0}
  .hero__bottom{grid-template-columns:1fr;gap:34px;padding-left:0}
  .hero__bottom .magnetic-link{justify-self:start}
  .hero__orb{width:60vw;right:-13vw;top:20vh;opacity:.42}
  .statement{grid-template-columns:1fr;gap:44px;padding-top:10vh}.statement__sub{grid-column:1;margin:0 0 0 auto}
  .section-head{grid-template-columns:1fr}.section-note{max-width:480px}
  .project-list{grid-template-columns:1fr}.project--wide{grid-column:auto}.project--portrait{margin-top:0}
  .project:not(.project--wide) .project__visual{aspect-ratio:16/10}
  .discipline{grid-template-columns:45px 1fr 65px;gap:16px;padding:26px 0}.discipline p{grid-column:2/4}.discipline__pulse{grid-column:3;grid-row:1}
  .about{grid-template-columns:1fr}.about__portrait{height:65vh}.about__copy{padding:6vh 0}
  .lab__title-wrap{grid-template-columns:1fr}.lab__experiments{grid-template-columns:1fr}
  .contact__footer{grid-template-columns:1fr auto}.contact__footer div{grid-row:2}.contact__footer>span:last-child{grid-column:2;grid-row:2}
}
@media(max-width:560px){
  :root{--pad:18px}
  .sound-toggle [data-sound-label]{display:none}
  .hero{min-height:100svh;padding-bottom:30px}.hero__meta{font-size:8px}.hero__title{font-size:16.8vw}
  .hero__bottom p{font-size:15px;max-width:85%}
  .scroll-cue{display:none}
  .statement{min-height:auto;padding-top:13vh;padding-bottom:13vh}.statement__lead{font-size:12vw}.statement__sub{font-size:15px;max-width:82%}
  .work,.practice,.lab,.contact{padding-top:12vh;padding-bottom:12vh}
  .section-head{margin-bottom:7vh}.section-title{font-size:14.5vw}
  .project__info{grid-template-columns:1fr auto}.project__info>span:first-of-type{grid-column:1/-1;grid-row:2}
  .project__ghost{font-size:28vw}
  .discipline{grid-template-columns:34px 1fr 44px}.discipline h3{font-size:10vw}.discipline p{font-size:14px}
  .discipline__pulse{width:38px;height:38px}
  .about{padding-top:8vh}.about__portrait{height:58vh}.about h2{font-size:13vw}
  .lab{min-height:auto}.lab__title{font-size:17vw}.lab__experiments{margin-top:8vh}
  .contact h2{font-size:17vw;line-height:.78}
  .contact__footer{font-size:8px}
  .cursor{display:none}
}
@media (hover:none){.cursor{display:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .energy-field{display:none}
}


/* --- V1.1 / Arrival & Resonance layer --- */
.flow-rail{
  position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:96;width:24px;height:180px;
  pointer-events:none;display:flex;align-items:center;justify-content:center
}
.flow-rail:before{content:"";position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.10)}
.flow-rail i{position:absolute;top:0;width:1px;height:0;background:linear-gradient(180deg,var(--accent),rgba(var(--accent-rgb),.12));box-shadow:0 0 13px rgba(var(--accent-rgb),.28)}
.flow-rail span{position:absolute;right:11px;top:50%;white-space:nowrap;transform:translateY(-50%) rotate(-90deg);transform-origin:right center;font-size:8px;text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.38)}
.preloader p{position:absolute;bottom:7vh;font-size:9px;text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.35);margin:0}
.sound-invitation{
  position:fixed;z-index:140;left:var(--pad);bottom:var(--pad);width:min(560px,calc(100vw - var(--pad)*2));
  display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:14px;padding:13px 14px;
  background:linear-gradient(135deg,rgba(25,25,25,.72),rgba(8,8,8,.48));border:1px solid rgba(255,255,255,.13);
  border-radius:18px;backdrop-filter:blur(24px) saturate(135%);box-shadow:0 18px 70px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.07);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.985);transition:opacity .6s var(--ease),transform .6s var(--ease),visibility .6s
}
.sound-invitation.is-visible{opacity:1;visibility:visible;transform:none}
.sound-invitation__signal{width:38px;height:38px;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.25);display:flex;align-items:center;justify-content:center;gap:2px;box-shadow:inset 0 0 22px rgba(var(--accent-rgb),.035)}
.sound-invitation__signal i{display:block;width:1px;height:7px;background:var(--accent);opacity:.75;animation:inviteEq 1.2s ease-in-out infinite alternate}
.sound-invitation__signal i:nth-child(2){animation-delay:-.6s;height:13px}.sound-invitation__signal i:nth-child(3){animation-delay:-.25s;height:9px}
@keyframes inviteEq{to{transform:scaleY(.4);opacity:.35}}
.sound-invitation strong{display:block;font-size:12px;font-weight:560;letter-spacing:.01em}.sound-invitation span{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.sound-invitation__actions{display:flex;gap:7px}.sound-invitation__actions button{border:1px solid var(--line);background:rgba(255,255,255,.035);color:var(--fg);border-radius:999px;padding:9px 11px;font-size:9px;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;transition:.3s}
.sound-invitation__actions button:first-child{border-color:rgba(var(--accent-rgb),.34)}.sound-invitation__actions button:hover{background:rgba(var(--accent-rgb),.09);border-color:rgba(var(--accent-rgb),.48)}
.eyebrow{display:flex;align-items:center;gap:9px}.eyebrow>span{width:22px;height:1px;background:var(--accent);box-shadow:0 0 14px rgba(var(--accent-rgb),.45)}
.hero__actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.hero__whisper{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.36);padding-right:4px}
.hero__breath{position:absolute;inset:0;pointer-events:none;z-index:0;display:grid;place-items:center;opacity:.26}
.hero__breath span{width:min(62vw,930px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.055);box-shadow:0 0 0 9vw rgba(var(--accent-rgb),.012),0 0 0 18vw rgba(var(--accent-rgb),.007);animation:heroBreath 10.56s ease-in-out infinite}
@keyframes heroBreath{0%,100%{transform:scale(.96);opacity:.35}50%{transform:scale(1.025);opacity:.8}}
.hero__content,.hero__meta,.hero__orb,.scroll-cue{z-index:2}
@media(max-width:900px){.flow-rail{display:none}.sound-invitation{grid-template-columns:36px 1fr}.sound-invitation__actions{grid-column:2;margin-top:3px}.hero__actions{align-items:flex-start}.hero__whisper{padding-left:3px}}
@media(max-width:560px){.sound-invitation{left:12px;bottom:12px;width:calc(100vw - 24px);padding:12px}.sound-invitation__signal{width:34px;height:34px}.sound-invitation strong{font-size:11px}.sound-invitation span{font-size:9px}.sound-invitation__actions button{padding:8px 9px}.hero__whisper{display:none}}


/* ============================================================
   CHRISTIAN POHLER — V1.4 / MASTERBRAND VISUAL IDENTITY PASS
   ============================================================ */

:root{
  --hero-progress:0;
  --hero-x:.5;
  --hero-y:.5;
}

/* Header: slightly quieter, more editorial */
.site-header{
  mix-blend-mode:normal;
}
.site-header.is-scrolled .brand__name{
  opacity:.78;
}
.nav a{
  transition:color .35s var(--ease),opacity .35s var(--ease);
}
.nav a.is-active{
  color:var(--fg);
}
.nav a.is-active:after{
  transform:scaleX(1);
  transform-origin:left;
}
.nav:has(a.is-active) a:not(.is-active){
  opacity:.48;
}
.nav:has(a.is-active) a:not(.is-active):hover{
  opacity:1;
}

/* HERO — the person becomes the brand */
.hero{
  isolation:isolate;
  padding-top:112px;
}
.hero:before{
  width:72vw;
  height:72vw;
  right:-24vw;
  top:-5vh;
  opacity:.78;
  transform:translate3d(
    calc((var(--hero-x) - .5) * 1.5vw),
    calc((var(--hero-y) - .5) * 1.5vw),
    0
  );
  transition:background .8s var(--ease);
}
.hero__meta{
  position:relative;
  z-index:4;
  padding-right:0;
  grid-template-columns:1fr 1fr 1fr;
}
.hero__meta span:nth-child(2){text-align:center}
.hero__meta span:nth-child(3){text-align:right}

.hero__identity{
  position:absolute;
  left:var(--pad);
  right:var(--pad);
  top:50%;
  transform:translateY(-52%);
  z-index:3;
  pointer-events:none;
}
.hero__name-line{
  overflow:hidden;
  font-weight:620;
  font-size:clamp(78px,13.45vw,238px);
  line-height:.72;
  letter-spacing:-.088em;
  white-space:nowrap;
  text-transform:uppercase;
}
.hero__name-line>span{
  display:block;
  transform:translateY(112%);
  animation:cpNameIn 1.45s var(--ease) forwards;
  will-change:transform;
}
.hero__name-line--pohler{
  padding-left:16.5vw;
}
.hero__name-line--pohler>span{
  animation-delay:.12s;
}
@keyframes cpNameIn{
  to{transform:translateY(0)}
}

/* Variable optical movement creates life without wobbling the wordmark */
.hero__name-line--christian>span{
  transform-origin:left center;
}
.hero__name-line--pohler>span{
  transform-origin:right center;
}
body:not(.menu-open) .hero__name-line--christian>span{
  translate:
    calc((var(--hero-x) - .5) * -1.3vw)
    calc(var(--hero-progress) * -1.8vh);
}
body:not(.menu-open) .hero__name-line--pohler>span{
  translate:
    calc((var(--hero-x) - .5) * 1.7vw)
    calc(var(--hero-progress) * 2.2vh);
}

.hero__statement{
  position:absolute;
  z-index:5;
  left:calc(var(--pad) + 16.5vw);
  bottom:27vh;
  display:grid;
  grid-template-columns:auto minmax(220px,500px) minmax(50px,11vw);
  gap:15px;
  align-items:center;
}
.hero__statement-index{
  color:var(--accent);
  font-size:8px;
  letter-spacing:.18em;
}
.hero__statement p{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(17px,1.55vw,28px);
  font-style:italic;
  letter-spacing:-.018em;
  color:rgba(241,239,233,.88);
}
.hero__statement-line{
  height:1px;
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.65),transparent);
  transform-origin:left;
  transform:scaleX(calc(.25 + var(--hero-progress) * .75));
}

.hero__bottom{
  position:absolute;
  left:var(--pad);
  right:var(--pad);
  bottom:48px;
  z-index:5;
  display:grid;
  grid-template-columns:minmax(280px,500px) auto;
  padding-left:0;
  margin:0;
}
.hero__bottom p{
  padding-left:16.5vw;
  max-width:680px;
  font-size:clamp(13px,1.05vw,17px);
  line-height:1.55;
}
.hero__actions{
  justify-self:end;
}

.hero__resonance{
  position:absolute;
  z-index:1;
  right:6.5vw;
  top:15vh;
  width:min(34vw,590px);
  aspect-ratio:1;
  pointer-events:none;
  transform:
    translate3d(
      calc((var(--hero-x) - .5) * 2.1vw),
      calc((var(--hero-y) - .5) * 2.1vw),
      0
    )
    scale(calc(1 + var(--hero-progress) * .08));
  opacity:calc(.62 - var(--hero-progress) * .18);
  transition:opacity .25s linear;
}
.resonance__disc{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.13);
}
.resonance__disc--outer{
  inset:0;
  animation:resonanceRotate 32s linear infinite;
}
.resonance__disc--mid{
  inset:16%;
  border-color:rgba(255,255,255,.075);
  animation:resonanceRotate 21s linear infinite reverse;
}
.resonance__disc--inner{
  inset:34%;
  border-color:rgba(var(--accent-rgb),.17);
  animation:resonancePulse 8.52s ease-in-out infinite;
}
.resonance__disc--outer:before,
.resonance__disc--outer:after,
.resonance__disc--mid:before{
  content:"";
  position:absolute;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 24px rgba(var(--accent-rgb),.7);
}
.resonance__disc--outer:before{
  width:5px;height:5px;left:18%;top:11%;
}
.resonance__disc--outer:after{
  width:3px;height:3px;right:9%;bottom:28%;opacity:.5;
}
.resonance__disc--mid:before{
  width:4px;height:4px;right:21%;top:5%;opacity:.65;
}
.resonance__core{
  position:absolute;
  inset:42%;
  border-radius:50%;
  background:
    radial-gradient(circle at 40% 35%,
      rgba(255,255,255,.9) 0 2%,
      rgba(var(--accent-rgb),.76) 4%,
      rgba(var(--accent-rgb),.13) 35%,
      transparent 68%);
  filter:blur(.5px);
  box-shadow:
    0 0 60px rgba(var(--accent-rgb),.08),
    0 0 130px rgba(var(--accent-rgb),.05);
  animation:resonanceCore 5.28s ease-in-out infinite;
}
.resonance__marker{
  position:absolute;
  width:1px;
  height:19%;
  background:linear-gradient(180deg,transparent,var(--accent),transparent);
  opacity:.15;
  transform-origin:center bottom;
}
.resonance__marker--a{left:50%;top:4%;transform:rotate(31deg)}
.resonance__marker--b{right:17%;bottom:17%;transform:rotate(-52deg)}

@keyframes resonanceRotate{to{transform:rotate(360deg)}}
@keyframes resonancePulse{
  0%,100%{transform:scale(.94);opacity:.32}
  50%{transform:scale(1.08);opacity:.86}
}
@keyframes resonanceCore{
  0%,100%{transform:scale(.91);opacity:.62}
  50%{transform:scale(1.16);opacity:1}
}

.hero__coordinates{
  position:absolute;
  z-index:4;
  right:var(--pad);
  bottom:31vh;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  font-size:8px;
  line-height:1.7;
  letter-spacing:.2em;
  color:rgba(255,255,255,.27);
}
.hero__breath{
  opacity:calc(.14 + var(--hero-progress) * .13);
}
.hero__breath span{
  width:min(78vw,1180px);
  border-color:rgba(var(--accent-rgb),.04);
  box-shadow:
    0 0 0 11vw rgba(var(--accent-rgb),.009),
    0 0 0 22vw rgba(var(--accent-rgb),.004);
}

/* Hero fades upward rather than abruptly ending */
.hero:after{
  content:"";
  position:absolute;
  z-index:1;
  left:0;right:0;bottom:-1px;height:18vh;
  background:linear-gradient(180deg,transparent,var(--bg));
  pointer-events:none;
}

/* Position section — more breathing room after the dense identity hero */
.statement{
  min-height:94vh;
  padding-top:18vh;
  padding-bottom:18vh;
  position:relative;
}
.statement:before{
  content:"";
  position:absolute;
  left:calc(25% + var(--pad) * .25);
  top:14vh;
  width:1px;
  height:22vh;
  background:linear-gradient(180deg,var(--accent),transparent);
  opacity:.16;
}

/* Chapter transitions: visual pause between energetic states */
.chapter-transition{
  height:clamp(90px,12vh,160px);
  margin:0 var(--pad);
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:48px 1fr auto;
  align-items:start;
  padding-top:18px;
  position:relative;
  z-index:2;
  color:rgba(255,255,255,.34);
}
.chapter-transition span,
.chapter-transition b{
  font-size:8px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.19em;
}
.chapter-transition i{
  height:1px;
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.44),transparent 68%);
  margin:4px 20px 0 0;
  transform-origin:left;
  transition:transform 1.4s var(--ease);
}
.chapter-transition b{
  color:var(--accent);
  opacity:.62;
}
.chapter-transition--return i{
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.12),rgba(var(--accent-rgb),.55),transparent);
}

/* Slightly stronger visual hierarchy in selected work */
.project__visual{
  transition:transform .8s var(--ease),border-color .6s var(--ease);
}
.project:hover .project__visual{
  transform:scale(.994);
  border-color:rgba(var(--accent-rgb),.26);
}
.project__info{
  transition:border-color .5s var(--ease);
}
.project:hover .project__info{
  border-color:rgba(var(--accent-rgb),.34);
}

/* active chapter gently affects the fixed brand mark */
html[data-chapter="arrival"] .brand__mark{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}
html:not([data-chapter="arrival"]) .brand__mark{
  border-color:rgba(var(--accent-rgb),.22);
  box-shadow:0 0 24px rgba(var(--accent-rgb),.035);
}

/* Mobile adaptation */
@media(max-width:900px){
  .hero{
    padding-top:102px;
  }
  .hero__identity{
    top:43%;
  }
  .hero__name-line{
    font-size:clamp(62px,16.7vw,142px);
    line-height:.76;
  }
  .hero__name-line--pohler{
    padding-left:0;
  }
  .hero__statement{
    left:var(--pad);
    bottom:31vh;
    grid-template-columns:auto 1fr;
    max-width:82vw;
  }
  .hero__statement-line{display:none}
  .hero__bottom{
    grid-template-columns:1fr;
    gap:24px;
    bottom:30px;
  }
  .hero__bottom p{
    padding-left:0;
    max-width:78vw;
  }
  .hero__actions{
    justify-self:start;
  }
  .hero__resonance{
    width:68vw;
    right:-24vw;
    top:14vh;
    opacity:.36;
  }
  .hero__coordinates{
    display:none;
  }
  .chapter-transition{
    grid-template-columns:34px 1fr auto;
  }
}
@media(max-width:560px){
  .hero__identity{
    top:41%;
  }
  .hero__name-line{
    font-size:17.6vw;
    letter-spacing:-.075em;
  }
  .hero__statement{
    bottom:33vh;
    gap:10px;
  }
  .hero__statement p{
    font-size:15px;
  }
  .hero__bottom p{
    max-width:88%;
    font-size:13px;
  }
  .hero__resonance{
    width:82vw;
    right:-35vw;
    top:12vh;
  }
  .chapter-transition{
    height:86px;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero__name-line>span{
    animation:none!important;
    transform:none!important;
    translate:none!important;
  }
  .hero__resonance{
    transform:none!important;
  }
}


/* ============================================================
   V1.4.1 — HERO LAYOUT CORRECTION
   Fixes compressed intro copy / claim collision on wide screens.
   ============================================================ */

@media (min-width:901px){
  .hero__bottom{
    /* Offset the whole content block, not the paragraph itself. */
    padding-left:16.5vw;
    grid-template-columns:minmax(360px,520px) auto;
    column-gap:clamp(50px,8vw,150px);
    align-items:end;
  }

  .hero__bottom p{
    padding-left:0;
    width:100%;
    max-width:520px;
    min-width:0;
    font-size:clamp(14px,1.02vw,18px);
    line-height:1.58;
    text-wrap:pretty;
  }

  .hero__statement{
    left:calc(var(--pad) + 16.5vw);
    bottom:28.5vh;
    max-width:720px;
  }

  .hero__statement p{
    white-space:nowrap;
  }

  .hero__actions{
    min-width:max-content;
  }
}

/* Mid-size desktop/laptop safeguard */
@media (min-width:901px) and (max-height:820px){
  .hero__identity{
    top:47%;
  }

  .hero__statement{
    bottom:27vh;
  }

  .hero__bottom{
    bottom:30px;
  }

  .hero__bottom p{
    font-size:14px;
    line-height:1.5;
  }
}

@media (min-width:901px) and (max-width:1180px){
  .hero__bottom{
    padding-left:10vw;
    grid-template-columns:minmax(320px,470px) auto;
  }

  .hero__statement{
    left:calc(var(--pad) + 10vw);
  }
}


/* ============================================================
   V1.4.2 — WORDMARK GLYPH CLIPPING FIX
   The previous reveal container used a very tight line-height
   together with overflow:hidden, which cut into large glyphs.
   ============================================================ */

.hero__identity{
  /* Give oversized glyphs a little optical safety space. */
  left:calc(var(--pad) + 0.35vw);
  right:calc(var(--pad) + 0.35vw);
}

.hero__name-line{
  /* Keep the compact editorial look without clipping glyph bounds. */
  line-height:.82;
  overflow:hidden;

  /* Internal safety area for ascenders / overshoots / antialiasing. */
  padding-top:.085em;
  padding-bottom:.11em;

  /* Neutralize the added padding so spacing between both words stays tight. */
  margin-top:-.085em;
  margin-bottom:-.11em;
}

.hero__name-line>span{
  /* Slightly smaller reveal travel because the line-box is now taller. */
  transform:translateY(108%);
}

@keyframes cpNameIn{
  to{transform:translateY(0)}
}

/* Horizontal glyph safety for extremely wide desktop layouts. */
.hero__name-line--christian{
  padding-left:.025em;
  padding-right:.035em;
}
.hero__name-line--pohler{
  padding-right:.045em;
}

/* Preserve original stagger while compensating for the taller line box. */
.hero__name-line--pohler{
  margin-top:-.155em;
}

/* Mobile requires a little more vertical room due to font rasterization. */
@media(max-width:900px){
  .hero__name-line{
    line-height:.86;
    padding-top:.09em;
    padding-bottom:.13em;
    margin-top:-.09em;
    margin-bottom:-.13em;
  }
  .hero__name-line--pohler{
    margin-top:-.12em;
  }
}

@media(max-width:560px){
  .hero__name-line{
    line-height:.88;
  }
}


/* ============================================================
   V1.5 — POSITION 00 / EDITORIAL TYPOGRAPHY RESET
   A deliberate decompression after the masterbrand hero.
   ============================================================ */

.statement{
  min-height:100svh;
  padding:clamp(130px,18vh,210px) var(--pad) clamp(120px,17vh,190px);
  display:grid;
  grid-template-columns:minmax(120px,16vw) minmax(0,1fr);
  column-gap:clamp(40px,6vw,110px);
  align-items:start;
  border-top:1px solid var(--line);
}

.statement:before{
  left:calc(var(--pad) + min(16vw,260px));
  top:clamp(110px,15vh,170px);
  height:clamp(120px,18vh,210px);
}

.statement>.section-index{
  position:sticky;
  top:120px;
  padding-top:.6em;
  color:rgba(255,255,255,.42);
}

.statement__body{
  grid-column:2;
  width:100%;
  max-width:1480px;
}

.statement__lead{
  margin:0;
  max-width:none;
  font-size:clamp(34px,4.75vw,82px);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:430;
  text-wrap:balance;
}

.statement__line{
  display:block;
  color:rgba(241,239,233,.92);
}

.statement__lead strong{
  display:block;
  width:min(100%,1120px);
  margin-top:.28em;
  font-family:Georgia,"Times New Roman",serif;
  font-size:1.08em;
  line-height:.98;
  letter-spacing:-.05em;
  font-style:italic;
  font-weight:400;
  color:var(--accent);
}

.statement__aside{
  width:min(100%,520px);
  margin:clamp(62px,8vh,100px) 0 0 auto;
  padding-top:16px;
  border-top:1px solid rgba(var(--accent-rgb),.28);
  display:grid;
  grid-template-columns:150px 1fr;
  gap:clamp(18px,2vw,34px);
}

.statement__aside-label{
  font-size:8px;
  line-height:1.5;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
}

.statement__aside p{
  margin:0;
  max-width:330px;
  font-size:clamp(14px,1vw,17px);
  line-height:1.65;
  color:var(--muted);
}

/* Override the legacy statement subtitle rule; V1.5 uses statement__aside instead. */
.statement__sub{display:none}

@media(max-width:900px){
  .statement{
    min-height:auto;
    padding-top:clamp(110px,15vh,150px);
    padding-bottom:clamp(100px,14vh,150px);
    grid-template-columns:1fr;
    gap:44px;
  }
  .statement>.section-index{
    position:static;
    padding:0;
  }
  .statement__body{grid-column:1}
  .statement__lead{
    font-size:clamp(42px,8.8vw,72px);
    line-height:1.01;
  }
  .statement__lead strong{
    width:100%;
    margin-top:.38em;
  }
  .statement__aside{
    margin-top:60px;
    margin-left:0;
    width:min(100%,560px);
  }
  .statement:before{display:none}
}

@media(max-width:560px){
  .statement{
    padding-top:100px;
    padding-bottom:105px;
    gap:32px;
  }
  .statement__lead{
    font-size:clamp(38px,11.2vw,58px);
    letter-spacing:-.052em;
  }
  .statement__lead strong{
    font-size:1.02em;
    line-height:1.01;
  }
  .statement__aside{
    grid-template-columns:1fr;
    gap:14px;
    margin-top:48px;
  }
  .statement__aside p{max-width:88%}
}

/* ============================================================
   V1.6 — SELECTED WORK / CINEMATIC CASE REEL
   ============================================================ */
.work-experience{
  --case-rgb:200,231,255;
  position:relative;
  padding:16vh var(--pad) 0;
  overflow:clip;
  background:
    radial-gradient(75vw 70vw at 88% 20%,rgba(var(--case-rgb),.035),transparent 62%),
    var(--bg);
  transition:background 1.2s var(--ease);
}
.work-experience:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 0 24.95%,rgba(255,255,255,.035) 25%,transparent 25.05% 74.95%,rgba(255,255,255,.035) 75%,transparent 75.05%);
  opacity:.8;
}
.work-intro{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.55fr);gap:clamp(50px,9vw,170px);align-items:end;padding-bottom:14vh}
.work-intro__title{font-size:clamp(60px,8.1vw,142px);line-height:.84;letter-spacing:-.072em;font-weight:510;margin:22px 0 0}
.work-intro__title em{font-family:Georgia,"Times New Roman",serif;font-weight:400}
.work-intro__right{padding-bottom:1.1vw}
.work-intro__right>p{font-size:clamp(15px,1.25vw,20px);line-height:1.55;color:#aaa8a2;max-width:520px;margin:0 0 42px}
.work-intro__meta{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;font-size:8px;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,255,255,.38)}
.work-intro__meta i{height:1px;background:linear-gradient(90deg,rgba(var(--case-rgb),.55),rgba(255,255,255,.07));transition:background 1s}

.case-reel{position:relative;z-index:2}
.case-study{height:190vh;position:relative;border-top:1px solid var(--line)}
.case-study__sticky{position:sticky;top:86px;height:calc(100svh - 86px);display:grid;grid-template-columns:minmax(0,1.72fr) minmax(320px,.68fr);gap:clamp(28px,4vw,78px);align-items:center;padding:clamp(28px,4vh,50px) 0;overflow:hidden}
.case-study__media{position:relative;display:block;height:min(72vh,810px);overflow:hidden;border:1px solid rgba(255,255,255,.10);background:#0c0c0c;isolation:isolate;cursor:pointer}
.case-study__media:after{content:"";position:absolute;inset:0;z-index:5;border:1px solid rgba(var(--case-rgb),0);pointer-events:none;transition:border-color .7s var(--ease)}
.case-study__media:hover:after{border-color:rgba(var(--case-rgb),.33)}
.case-art{position:absolute;inset:-4%;overflow:hidden;transform:scale(1.035) translate3d(var(--media-x,0),var(--media-y,0),0);transition:transform .9s var(--ease);will-change:transform}
.case-study__media:hover .case-art{transform:scale(1.07) translate3d(var(--media-x,0),var(--media-y,0),0)}
.case-study__media-shade{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(0,0,0,.02) 30%,rgba(0,0,0,.64) 100%)}
.case-study__hud{position:absolute;z-index:6;left:20px;right:20px;bottom:18px;display:flex;align-items:center;justify-content:space-between;font-size:8px;text-transform:uppercase;letter-spacing:.17em;color:rgba(255,255,255,.68)}
.case-study__play{display:flex;align-items:center;gap:10px;color:var(--fg)}
.case-study__play i{width:7px;height:7px;border-radius:50%;background:rgb(var(--case-rgb));box-shadow:0 0 22px rgba(var(--case-rgb),.65)}

.case-art__word{position:absolute;z-index:2;left:4%;bottom:5%;font-size:8px;letter-spacing:.22em;color:rgba(255,255,255,.38)}
.case-art__type{position:absolute;z-index:2;font-weight:650;letter-spacing:-.075em;line-height:.78;color:rgba(255,255,255,.88);mix-blend-mode:screen}
.case-art--volkshilfe{background:radial-gradient(circle at 67% 38%,rgba(238,103,79,.46),transparent 20%),linear-gradient(125deg,#35120f 0%,#100909 52%,#0b0b0b 100%)}
.case-art--volkshilfe:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 8.2%,rgba(255,255,255,.018) 8.25% 8.32%);transform:skewX(-12deg)}
.case-art__scan{position:absolute;left:-20%;right:-20%;height:1px;top:54%;background:linear-gradient(90deg,transparent,rgba(255,171,145,.55),transparent);box-shadow:0 0 28px rgba(255,122,94,.2);animation:caseScan 8s ease-in-out infinite}
.case-art__halo{position:absolute;width:42%;aspect-ratio:1;right:10%;top:17%;border:1px solid rgba(255,255,255,.1);border-radius:50%;box-shadow:0 0 0 5vw rgba(255,255,255,.012),0 0 0 11vw rgba(255,255,255,.007)}
.case-art__type--75{left:5%;top:5%;font-size:clamp(170px,27vw,480px);color:rgba(255,255,255,.075)}

.case-art--halle{background:radial-gradient(circle at 74% 27%,rgba(132,190,224,.22),transparent 23%),linear-gradient(145deg,#101923,#07090c 65%)}
.case-art__techgrid{position:absolute;inset:-30%;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:60px 60px;transform:perspective(650px) rotateX(61deg) rotateZ(-8deg) scale(1.4);transform-origin:center bottom}
.case-art__beam{position:absolute;width:2px;height:130%;left:67%;top:-15%;background:linear-gradient(180deg,transparent,rgba(155,218,255,.8),transparent);filter:blur(.3px);transform:rotate(24deg);box-shadow:0 0 26px rgba(155,218,255,.25)}
.case-art__type--tech{left:7%;bottom:13%;font-size:clamp(80px,10vw,180px);color:rgba(255,255,255,.17)}

.case-art--stories{background:radial-gradient(circle at 48% 46%,rgba(226,211,177,.16),transparent 20%),linear-gradient(132deg,#1b1915,#090909 62%)}
.case-art__aperture{position:absolute;width:38%;aspect-ratio:1;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.12);border-radius:50%;box-shadow:0 0 0 6vw rgba(255,255,255,.008),0 0 0 13vw rgba(255,255,255,.005)}
.case-art__aperture:before,.case-art__aperture:after{content:"";position:absolute;left:50%;top:50%;width:135%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);transform:translate(-50%,-50%) rotate(27deg)}
.case-art__aperture:after{transform:translate(-50%,-50%) rotate(-27deg)}
.case-art__frame{position:absolute;inset:13% 11%;border:1px solid rgba(255,255,255,.06);transform:rotate(-2.5deg)}
.case-art__type--stories{left:6%;top:8%;font-size:clamp(72px,8.5vw,155px);color:rgba(255,255,255,.16)}
@keyframes caseScan{0%,100%{transform:translateY(-17vh);opacity:.15}50%{transform:translateY(17vh);opacity:.7}}

.case-study__copy{align-self:center;position:relative;z-index:4;padding-right:clamp(10px,2vw,34px)}
.case-study__index{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-bottom:clamp(36px,6vh,76px);font-size:8px;text-transform:uppercase;letter-spacing:.19em;color:rgba(255,255,255,.38)}
.case-study__index i{height:1px;background:linear-gradient(90deg,rgba(var(--case-rgb),.65),rgba(255,255,255,.05))}
.case-study__copy h3{font-size:clamp(44px,4.7vw,86px);line-height:.9;letter-spacing:-.06em;font-weight:520;margin:0 0 34px}
.case-study__copy h3 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:rgb(var(--case-rgb));font-size:.86em}
.case-study__copy>p{font-size:clamp(14px,1.15vw,19px);line-height:1.55;color:#aaa8a2;max-width:460px;margin:0 0 34px}
.case-study__tags{display:flex;flex-wrap:wrap;gap:7px}
.case-study__tags span{padding:7px 10px;border:1px solid rgba(255,255,255,.09);border-radius:999px;font-size:7px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.54);background:rgba(255,255,255,.018)}
.case-study__rail{position:absolute;right:0;top:6vh;bottom:6vh;width:1px;background:rgba(255,255,255,.08)}
.case-study__rail span{position:absolute;left:0;top:0;width:1px;height:calc(var(--case-progress,0)*100%);background:linear-gradient(180deg,rgb(var(--case-rgb)),rgba(var(--case-rgb),.18));box-shadow:0 0 12px rgba(var(--case-rgb),.25)}

.case-study:not(.is-active) .case-study__copy{opacity:.44;transform:translateY(18px)}
.case-study__copy{transition:opacity .7s var(--ease),transform .9s var(--ease)}
.case-study.is-active .case-study__copy{opacity:1;transform:none}

.work-outro{min-height:72vh;display:grid;grid-template-columns:1fr 1.3fr auto;gap:40px;align-items:center;border-top:1px solid var(--line);position:relative;z-index:2}
.work-outro>p{font-size:clamp(48px,6.4vw,112px);line-height:.86;letter-spacing:-.065em;margin:0;font-weight:500}
.work-outro>p em{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:rgb(var(--case-rgb))}
.work-outro .magnetic-link{justify-self:end}

@media(max-width:1100px){
 .case-study__sticky{grid-template-columns:minmax(0,1.45fr) minmax(300px,.72fr)}
 .case-study__copy h3{font-size:clamp(40px,5vw,70px)}
}
@media(max-width:900px){
 .work-experience{padding-top:12vh}
 .work-intro{grid-template-columns:1fr;gap:40px;padding-bottom:10vh}
 .work-intro__right{max-width:620px}
 .case-study{height:auto;min-height:0;padding:0 0 16vh;border-top:1px solid var(--line)}
 .case-study__sticky{position:relative;top:auto;height:auto;display:grid;grid-template-columns:1fr;padding:7vh 0 0;overflow:visible}
 .case-study__media{height:auto;aspect-ratio:16/10}
 .case-study__copy{padding:34px 4vw 0 0}
 .case-study__index{margin-bottom:26px}
 .case-study__rail{display:none}
 .case-study:not(.is-active) .case-study__copy{opacity:1;transform:none}
 .work-outro{min-height:60vh;grid-template-columns:1fr;align-content:center;gap:34px;padding:10vh 0}
 .work-outro .magnetic-link{justify-self:start}
}
@media(max-width:560px){
 .work-intro__title{font-size:14.5vw}
 .work-intro__right>p{font-size:14px}
 .work-intro__meta{grid-template-columns:auto 1fr}.work-intro__meta span:last-child{display:none}
 .case-study{padding-bottom:13vh}
 .case-study__sticky{padding-top:5vh}
 .case-study__media{aspect-ratio:4/5}
 .case-study__hud{left:12px;right:12px;bottom:12px}
 .case-study__copy{padding-right:0}
 .case-study__copy h3{font-size:12vw;margin-bottom:22px}
 .case-study__copy>p{font-size:14px}
 .case-art__type--75{font-size:55vw;top:15%}
 .case-art__type--tech,.case-art__type--stories{font-size:18vw}
 .work-outro>p{font-size:14vw}
}
@media(prefers-reduced-motion:reduce){.case-art__scan{animation:none}.case-art{transform:none!important}}


/* ============================================================
   V1.7 — FLOW RAIL FIX + PRACTICE EXPERIENCE
   ============================================================ */

/* Flow rail: line deliberately sits LEFT of the vertical chapter label.
   Text and progress never intersect. */
.flow-rail{
  width:34px;
  right:12px;
}
.flow-rail:before,
.flow-rail i{
  left:4px;
}
.flow-rail span{
  right:1px;
  color:rgba(255,255,255,.46);
  text-shadow:0 0 14px rgba(8,8,8,.9);
}

/* Practice is now a complete chapter instead of a service list. */
.practice{
  --discipline-rgb:238,219,255;
  position:relative;
  padding:14vh var(--pad) 12vh;
  border-top:0;
  overflow:hidden;
  isolation:isolate;
}
.practice:before{
  content:"";
  position:absolute;
  width:70vw;
  height:70vw;
  right:-25vw;
  top:8vh;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(var(--discipline-rgb),.075) 0,
    rgba(var(--discipline-rgb),.025) 34%,
    transparent 68%);
  filter:blur(10px);
  pointer-events:none;
  transition:background 1.1s var(--ease);
  z-index:-1;
}
.practice__intro{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(280px,.72fr);
  gap:clamp(50px,8vw,150px);
  align-items:end;
  margin-bottom:12vh;
}
.practice__title{
  font-size:clamp(60px,8.3vw,142px);
  line-height:.84;
  letter-spacing:-.067em;
  font-weight:500;
  margin:18px 0 0;
}
.practice__title em{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}
.practice__intro-copy{
  display:grid;
  grid-template-columns:65px 1fr;
  gap:20px;
  align-items:start;
  padding-bottom:8px;
}
.practice__intro-copy p{
  margin:0;
  color:var(--muted);
  font-size:clamp(14px,1.05vw,17px);
  line-height:1.62;
}
.practice__rule{
  display:block;
  margin-top:.7em;
  height:1px;
  background:linear-gradient(90deg,rgb(var(--discipline-rgb)),transparent);
  transition:background 1s var(--ease);
}

.practice__stage{
  position:relative;
  border-top:1px solid var(--line);
  min-height:72vh;
}
.practice__ghost{
  position:absolute;
  right:-.02em;
  top:-.09em;
  font-size:clamp(130px,20vw,350px);
  line-height:.8;
  letter-spacing:-.095em;
  font-weight:700;
  color:rgba(var(--discipline-rgb),.035);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  transition:
    color .75s var(--ease),
    opacity .55s var(--ease),
    transform .75s var(--ease);
  transform:translate3d(0,0,0);
}
.practice__ghost.is-changing{
  opacity:.12;
  transform:translate3d(1.5vw,0,0);
}

.practice__side-note{
  position:absolute;
  right:0;
  top:48%;
  width:145px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  transform:rotate(90deg) translateX(100%);
  transform-origin:right top;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:rgba(255,255,255,.28);
}
.practice__side-note i{
  display:block;
  height:1px;
  background:linear-gradient(90deg,rgb(var(--discipline-rgb)),transparent);
}

.practice__list{
  position:relative;
  z-index:2;
}
.practice .discipline{
  display:grid;
  grid-template-columns:70px minmax(220px,.78fr) minmax(300px,1fr) 68px;
  gap:clamp(20px,3vw,55px);
  align-items:center;
  min-height:clamp(175px,20vh,245px);
  padding:22px 0;
  border-bottom:1px solid var(--line);
  overflow:visible;
  cursor:default;
  transition:
    opacity .45s var(--ease),
    padding-left .55s var(--ease),
    border-color .55s var(--ease);
}
.practice .discipline:before{
  display:none;
}
.practice__list:has(.discipline:hover) .discipline:not(:hover){
  opacity:.34;
}
.practice .discipline.is-active{
  padding-left:clamp(8px,1.4vw,26px);
  border-color:rgba(var(--discipline-rgb),.28);
}
.practice .discipline__no{
  font-size:9px;
  letter-spacing:.2em;
  color:rgba(255,255,255,.38);
}
.discipline__name h3{
  margin:0;
  font-size:clamp(45px,5.3vw,90px);
  line-height:.9;
  letter-spacing:-.06em;
  font-weight:500;
  transition:color .45s var(--ease),transform .55s var(--ease);
}
.discipline__name small{
  display:block;
  margin-top:10px;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.19em;
  color:var(--muted);
}
.practice .discipline p{
  max-width:610px;
  font-size:clamp(14px,1vw,17px);
  line-height:1.62;
  color:var(--muted);
}
.practice .discipline.is-active .discipline__name h3{
  color:rgb(var(--discipline-rgb));
  transform:translateX(3px);
}
.discipline__mark{
  justify-self:end;
  width:50px;
  height:50px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.13);
  display:grid;
  place-items:center;
  transition:border-color .5s var(--ease),transform .6s var(--ease),background .5s;
}
.discipline__mark i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgb(var(--discipline-rgb));
  box-shadow:0 0 18px rgba(var(--discipline-rgb),.7);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.practice .discipline.is-active .discipline__mark{
  transform:scale(1.08);
  border-color:rgba(var(--discipline-rgb),.32);
  background:rgba(var(--discipline-rgb),.025);
}
.practice .discipline.is-active .discipline__mark i{
  transform:scale(1.35);
  box-shadow:
    0 0 20px rgba(var(--discipline-rgb),.75),
    0 0 0 10px rgba(var(--discipline-rgb),.035);
}

.practice__closing{
  margin-top:10vh;
  padding-top:22px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr minmax(300px,520px);
  gap:40px;
  align-items:start;
}
.practice__closing span{
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;
  font-size:clamp(24px,2.5vw,42px);
}
.practice__closing p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

/* Keep old pulse implementation inert in the redesigned Practice. */
.practice .discipline__pulse{display:none}

@media(max-width:1100px){
  .practice__intro{
    grid-template-columns:1fr;
    gap:45px;
  }
  .practice__intro-copy{
    max-width:580px;
    margin-left:auto;
  }
  .practice .discipline{
    grid-template-columns:50px minmax(180px,.72fr) 1fr 55px;
  }
  .practice__side-note{display:none}
}

@media(max-width:760px){
  .flow-rail{display:none}

  .practice{
    padding-top:12vh;
    padding-bottom:11vh;
  }
  .practice__intro{
    margin-bottom:8vh;
  }
  .practice__title{
    font-size:14.8vw;
    line-height:.9;
  }
  .practice__intro-copy{
    margin-left:0;
    grid-template-columns:42px 1fr;
  }
  .practice__ghost{
    display:none;
  }
  .practice .discipline{
    grid-template-columns:34px 1fr 42px;
    gap:14px;
    min-height:auto;
    padding:30px 0;
  }
  .discipline__name{
    grid-column:2;
  }
  .discipline__name h3{
    font-size:12vw;
  }
  .discipline__name small{
    line-height:1.45;
  }
  .practice .discipline p{
    grid-column:2 / 4;
    font-size:14px;
    margin-top:2px;
  }
  .discipline__mark{
    grid-column:3;
    grid-row:1;
    width:38px;
    height:38px;
  }
  .practice .discipline.is-active{
    padding-left:5px;
  }
  .practice__closing{
    grid-template-columns:1fr;
    gap:20px;
    margin-top:8vh;
  }
}

@media(prefers-reduced-motion:reduce){
  .practice__ghost,
  .practice .discipline,
  .discipline__name h3,
  .discipline__mark{
    transition:none!important;
  }
}


/* ============================================================
   V1.8 — PLACEHOLDER LINK FIX + ABOUT / PRESENCE EXPERIENCE
   ============================================================ */

/* Selected Work placeholders are visual previews, not fake links. */
.case-study__media.is-placeholder{
  cursor:default;
}
.case-study__media.is-placeholder .case-study__play{
  color:rgba(255,255,255,.64);
}
.case-study__media.is-placeholder .case-study__play i{
  width:5px;
  height:5px;
  opacity:.7;
}

/* About / Presence */
.about.about-experience{
  --presence-rgb:255,231,201;
  display:block;
  min-height:auto;
  padding:14vh var(--pad) 13vh;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.about.about-experience:before{
  content:"";
  position:absolute;
  width:74vw;
  height:74vw;
  left:-34vw;
  top:16vh;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(var(--presence-rgb),.07),
    rgba(var(--presence-rgb),.018) 38%,
    transparent 67%);
  filter:blur(10px);
  transition:background 1s var(--ease);
  pointer-events:none;
  z-index:-1;
}

.about__intro{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(280px,.72fr);
  gap:clamp(55px,8vw,155px);
  align-items:end;
  margin-bottom:13vh;
}
.about__title{
  font-size:clamp(58px,8vw,136px);
  line-height:.84;
  letter-spacing:-.068em;
  font-weight:500;
  margin:18px 0 0;
}
.about__title em{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}
.about__intro-note{
  padding-bottom:8px;
}
.about__intro-note>span{
  display:block;
  margin-bottom:18px;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:rgb(var(--presence-rgb));
  transition:color .8s var(--ease);
}
.about__intro-note p{
  margin:0;
  max-width:470px;
  color:var(--muted);
  font-size:clamp(14px,1.05vw,17px);
  line-height:1.62;
}

.about__journey{
  display:grid;
  grid-template-columns:minmax(360px,.9fr) minmax(430px,1.05fr);
  gap:clamp(55px,8vw,145px);
  align-items:start;
  position:relative;
}
.about__visual-column{
  min-height:165vh;
}
.about__visual{
  position:sticky;
  top:14vh;
  height:min(72vh,790px);
  border:1px solid rgba(255,255,255,.11);
  background:
    linear-gradient(145deg,rgba(255,255,255,.025),transparent 38%),
    #0a0a0a;
  overflow:hidden;
  isolation:isolate;
}
.presence__field{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 52% 44%,
      rgba(var(--presence-rgb),.15) 0,
      rgba(var(--presence-rgb),.045) 18%,
      transparent 47%);
  filter:blur(8px);
  transform:
    translate3d(
      calc(var(--presence-x,.5) * 12px - 6px),
      calc(var(--presence-y,.5) * 12px - 6px),
      0);
  transition:background .9s var(--ease);
}
.presence__rings{
  position:absolute;
  inset:9%;
  opacity:.58;
}
.presence__rings i{
  position:absolute;
  border:1px solid rgba(var(--presence-rgb),.12);
  border-radius:50%;
  transition:border-color .9s var(--ease);
}
.presence__rings i:nth-child(1){inset:0;animation:presenceOrbit 28s linear infinite}
.presence__rings i:nth-child(2){inset:19%;animation:presenceOrbit 20s linear infinite reverse}
.presence__rings i:nth-child(3){inset:38%;animation:presenceBreath 6.39s ease-in-out infinite}
.presence__rings i:nth-child(1):after{
  content:"";
  position:absolute;
  width:5px;height:5px;
  border-radius:50%;
  background:rgb(var(--presence-rgb));
  left:18%;top:8%;
  box-shadow:0 0 22px rgba(var(--presence-rgb),.75);
  transition:background .9s var(--ease);
}
@keyframes presenceOrbit{to{transform:rotate(360deg)}}
@keyframes presenceBreath{
  0%,100%{transform:scale(.94);opacity:.38}
  50%{transform:scale(1.07);opacity:1}
}

.presence__portrait{
  position:absolute;
  left:8%;
  right:8%;
  bottom:0;
  height:72%;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.06);
  background:
    linear-gradient(180deg,transparent 0 20%,rgba(0,0,0,.36) 100%);
}
.presence__monogram{
  font-size:clamp(150px,21vw,370px);
  line-height:.68;
  letter-spacing:-.12em;
  font-weight:720;
  color:rgba(255,255,255,.055);
  transform:translateX(-.04em);
}
.presence__portrait-label{
  position:absolute;
  left:16px;
  bottom:15px;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.19em;
  color:rgba(255,255,255,.34);
}
.presence__signal{
  position:absolute;
  left:18px;
  top:17px;
  display:flex;
  gap:8px;
  align-items:center;
  font-size:8px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.presence__signal span{color:rgba(255,255,255,.34)}
.presence__signal strong{
  font-weight:500;
  color:rgb(var(--presence-rgb));
  transition:color .7s var(--ease),opacity .25s,transform .35s var(--ease);
}
.presence__signal strong.is-changing{
  opacity:0;
  transform:translateY(7px);
}
.presence__coordinates{
  position:absolute;
  right:16px;
  bottom:16px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:rgba(255,255,255,.31);
}
.presence__coordinates i{
  width:42px;
  height:1px;
  background:linear-gradient(90deg,rgb(var(--presence-rgb)),transparent);
}

.about__chapters{
  padding-top:5vh;
}
.about-step{
  min-height:52vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-top:1px solid rgba(255,255,255,.1);
  opacity:.36;
  transition:opacity .55s var(--ease),transform .55s var(--ease),border-color .55s;
}
.about-step:last-child{
  border-bottom:1px solid rgba(255,255,255,.1);
}
.about-step.is-active{
  opacity:1;
  transform:translateX(10px);
  border-color:rgba(var(--presence-rgb),.28);
}
.about-step__meta{
  display:grid;
  grid-template-columns:auto 65px auto;
  gap:12px;
  align-items:center;
  width:max-content;
  margin-bottom:32px;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.19em;
  color:var(--muted);
}
.about-step__meta i{
  height:1px;
  background:linear-gradient(90deg,rgb(var(--presence-rgb)),transparent);
}
.about-step h3{
  max-width:720px;
  margin:0 0 28px;
  font-size:clamp(38px,4.4vw,76px);
  line-height:.96;
  letter-spacing:-.052em;
  font-weight:500;
}
.about-step p{
  max-width:600px;
  margin:0;
  color:var(--muted);
  font-size:clamp(15px,1.05vw,18px);
  line-height:1.72;
}

.about__closing{
  margin-top:12vh;
  padding-top:30px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:50px;
  align-items:end;
}
.about__closing blockquote{
  margin:0;
  max-width:940px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(27px,3.3vw,56px);
  line-height:1.08;
  letter-spacing:-.035em;
  font-style:italic;
  color:rgba(241,239,233,.92);
}

@media(max-width:1000px){
  .about__intro{
    grid-template-columns:1fr;
    gap:45px;
  }
  .about__intro-note{
    max-width:580px;
    margin-left:auto;
  }
  .about__journey{
    grid-template-columns:minmax(300px,.8fr) 1fr;
    gap:45px;
  }
}

@media(max-width:760px){
  .about.about-experience{
    padding-top:11vh;
    padding-bottom:11vh;
  }
  .about__intro{
    margin-bottom:8vh;
  }
  .about__title{
    font-size:14.6vw;
    line-height:.9;
  }
  .about__intro-note{
    margin-left:0;
  }
  .about__journey{
    display:block;
  }
  .about__visual-column{
    min-height:auto;
  }
  .about__visual{
    position:relative;
    top:auto;
    height:58vh;
    min-height:440px;
    margin-bottom:9vh;
  }
  .presence__monogram{
    font-size:48vw;
  }
  .about__chapters{
    padding-top:0;
  }
  .about-step{
    min-height:auto;
    padding:11vh 0;
    opacity:1;
    transform:none!important;
  }
  .about-step h3{
    font-size:10.8vw;
  }
  .about-step p{
    font-size:15px;
  }
  .about__closing{
    grid-template-columns:1fr;
    align-items:start;
  }
  .about__closing blockquote{
    font-size:8.5vw;
  }
}

@media(prefers-reduced-motion:reduce){
  .presence__rings i{
    animation:none!important;
  }
  .presence__field{
    transform:none!important;
  }
  .about-step{
    transition:none!important;
  }
}


/* ============================================================
   V1.9 — SMOOTH RESONANCE + REAL PORTFOLIO CONTENT
   ============================================================ */

/* 00 / Position: the intended green -> warm connection shift now glides. */
.statement__lead strong,
.statement__aside-label,
.statement__aside{
  transition:color 1.4s var(--ease),border-color 1.4s var(--ease);
}

/* Keep legacy large artwork safely inside its frame even when depth-hover is active. */
.case-art__type--stories{left:9.5%}
.case-study__media:hover .case-art--stories{
  transform:scale(1.045) translate3d(var(--media-x,0),var(--media-y,0),0);
}

/* Real project media */
.case-study__media--real{background:#070707}
.real-media{position:absolute;inset:0;margin:0;overflow:hidden;background:#0a0a0a}
.real-media__photo{
  width:100%;height:100%;display:block;object-fit:cover;
  transform:scale(1.015);filter:saturate(.82) contrast(1.04) brightness(.88);
  transition:transform 1.2s var(--ease),filter .8s var(--ease),opacity .5s;
}
.case-study__media--real:hover .real-media__photo{
  transform:scale(1.045);filter:saturate(.94) contrast(1.05) brightness(.96);
}
.real-media figcaption{
  position:absolute;z-index:4;left:18px;top:16px;margin:0;
  font-size:7px;line-height:1.35;text-transform:uppercase;letter-spacing:.15em;
  color:rgba(255,255,255,.48);background:rgba(0,0,0,.34);backdrop-filter:blur(7px);
  padding:6px 8px;border:1px solid rgba(255,255,255,.08)
}
.real-media--volkshilfe .real-media__photo{object-position:center 45%;filter:saturate(.66) contrast(1.07) brightness(.67)}
.real-media--volkshilfe:after{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(105,10,5,.72),rgba(45,4,4,.12) 55%,rgba(0,0,0,.12));
}
.real-media__logo{
  position:absolute;z-index:3;left:6%;top:10%;width:min(46%,470px);height:auto;
  filter:brightness(0) invert(1);opacity:.9;mix-blend-mode:screen
}
.real-media--arrowtag{background:linear-gradient(135deg,#17210c,#070907)}
.real-media--arrowtag .real-media__photo{position:relative;z-index:2;object-position:center;}
.real-media__fallback{
  position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:8%;
  font-weight:750;line-height:.75;letter-spacing:-.07em;color:rgba(218,242,152,.16)
}
.real-media__fallback span{font-size:clamp(80px,13vw,230px)}
.real-media__fallback strong{font-size:clamp(110px,17vw,300px);font-weight:750}
.real-media--rainbow{background:linear-gradient(135deg,#17101d,#060606)}
.real-media--rainbow .real-media__photo{object-position:center;filter:saturate(.78) contrast(1.08) brightness(.68)}
.rainbow-prism{
  position:absolute;inset:0;z-index:2;opacity:.26;mix-blend-mode:screen;
  background:linear-gradient(118deg,transparent 15%,#f35 31%,#fd8c35 39%,#f6e85f 47%,#53d883 55%,#55a9ff 63%,#b975ff 71%,transparent 86%);
  clip-path:polygon(0 70%,100% 10%,100% 34%,0 93%);
}
.real-media__play{
  position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.44);background:rgba(8,8,8,.34);backdrop-filter:blur(10px);
  transition:transform .5s var(--ease),background .5s,border-color .5s
}
.real-media__play span{font-size:18px;margin-left:4px}
.case-study__media--real:hover .real-media__play{transform:translate(-50%,-50%) scale(1.08);background:rgba(8,8,8,.52);border-color:rgb(var(--case-rgb))}

/* Actual portfolio archive */
.work-archive{position:relative;z-index:2;padding:14vh 0 16vh;border-top:1px solid var(--line)}
.work-archive__head{display:grid;grid-template-columns:minmax(120px,.45fr) 1fr minmax(260px,.55fr);gap:clamp(25px,5vw,80px);align-items:end;margin-bottom:8vh}
.work-archive__head h3{font-size:clamp(44px,5.8vw,98px);line-height:.9;letter-spacing:-.06em;font-weight:500;margin:0}
.work-archive__head p{margin:0;color:var(--muted);max-width:360px;line-height:1.6}
.work-archive__list{border-top:1px solid var(--line)}
.work-archive__list article{
  min-height:92px;display:grid;grid-template-columns:70px 1fr auto;gap:24px;align-items:center;
  border-bottom:1px solid var(--line);transition:padding-left .5s var(--ease),background .5s,border-color .5s
}
.work-archive__list article:hover{padding-left:12px;background:linear-gradient(90deg,rgba(var(--case-rgb),.045),transparent 68%);border-color:rgba(var(--case-rgb),.25)}
.work-archive__list span,.work-archive__list small{font-size:8px;text-transform:uppercase;letter-spacing:.17em;color:var(--muted)}
.work-archive__list strong{font-size:clamp(19px,2vw,32px);font-weight:500;letter-spacing:-.025em}
.work-archive__list small{text-align:right}

@media(max-width:900px){
  .work-archive__head{grid-template-columns:1fr;gap:24px}
  .work-archive__head p{max-width:520px}
  .real-media figcaption{left:12px;top:12px;font-size:6px}
}
@media(max-width:560px){
  .real-media__logo{width:65%;left:6%;top:9%}
  .real-media__play{width:58px;height:58px}
  .work-archive{padding:10vh 0 12vh}
  .work-archive__list article{grid-template-columns:32px 1fr;gap:12px;min-height:86px;padding:16px 0}
  .work-archive__list small{grid-column:2;text-align:left;margin-top:-8px}
  .work-archive__list strong{font-size:20px}
}


/* V1.9 final robustness pass */
.real-media__photo.is-missing{opacity:0!important}
@media(max-width:560px){
  .contact__mail{
    width:100%;max-width:100%;min-width:0;
    gap:12px;padding-left:14px;padding-right:14px;
    font-size:clamp(11px,3.45vw,14px);
    overflow:hidden;
  }
  .contact__mail span{flex:0 0 auto}
}


/* ============================================================
   V2.0 — EMBEDDED MEDIA + REAL WEB PROJECTS + LIVE LAB
   ============================================================ */

.case-study__play--static{pointer-events:none}
.case-study__media--video,
.case-study__media--website{background:#070707}
.case-study__hud--video,
.case-study__hud--website{pointer-events:none}

/* ---- custom embedded video player ---- */
.cp-video{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  background:#030303;
  overflow:hidden;
}
.cp-video__stage{
  position:relative;
  flex:1;
  min-height:0;
  overflow:hidden;
  background:#050505;
}
.cp-video__host,
.cp-video__host iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.cp-video__host iframe{
  pointer-events:none;
}
.cp-video__poster{
  position:absolute;
  inset:0;
  z-index:3;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:clamp(28px,4vw,66px);
  background:
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.82)),
    var(--video-poster) center/cover no-repeat,
    radial-gradient(circle at 72% 35%,rgba(174,219,226,.18),transparent 25%),
    #0a0f12;
  transition:opacity .6s var(--ease),visibility .6s;
}
.cp-video__poster:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(90deg,transparent 0 7%,rgba(255,255,255,.018) 7.1% 7.2%);
  pointer-events:none;
}
.cp-video__poster.is-hidden{
  opacity:0;
  visibility:hidden;
}
.cp-video__poster>span{
  position:relative;z-index:1;
  margin-bottom:12px;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:rgba(255,255,255,.55);
}
.cp-video__poster>strong{
  position:relative;z-index:1;
  font-size:clamp(52px,6.8vw,118px);
  line-height:.78;
  letter-spacing:-.065em;
  font-weight:600;
}
.cp-video__poster>small{
  position:relative;z-index:1;
  margin-top:22px;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:rgba(255,255,255,.54);
}
.cp-video__center{
  position:absolute;
  z-index:7;
  left:50%;top:50%;
  width:76px;height:76px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.32);
  backdrop-filter:blur(14px);
  color:#fff;
  cursor:pointer;
  transition:transform .35s var(--ease),background .35s,border-color .35s,opacity .35s;
}
.cp-video__center:hover{
  transform:translate(-50%,-50%) scale(1.08);
  border-color:rgba(216,255,200,.55);
  background:rgba(216,255,200,.08);
}
.cp-video.is-playing .cp-video__center{opacity:0}
.cp-video__stage:hover .cp-video__center{opacity:1}
.cp-video__controls{
  position:relative;
  z-index:8;
  min-height:58px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 18px;
  border-top:1px solid rgba(255,255,255,.1);
  background:rgba(7,7,7,.92);
}
.cp-video__controls button{
  border:0;
  background:none;
  color:rgba(255,255,255,.78);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.16em;
  cursor:pointer;
  padding:9px 0;
}
.cp-video__controls button:hover{color:#fff}
.cp-video__line{
  flex:1;
  height:1px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
}
.cp-video__line i{
  display:block;
  width:26%;
  height:100%;
  background:linear-gradient(90deg,rgb(var(--case-rgb)),transparent);
  animation:videoLine 5s ease-in-out infinite alternate;
}
@keyframes videoLine{to{width:74%}}
.cp-video.has-error .cp-video__poster small:after{
  content:" · Video derzeit nicht verfügbar";
  color:#ffb1a9;
}

/* ---- website live previews ---- */
.site-preview{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  padding:clamp(16px,2vw,30px);
  background:#080808;
}
.site-preview__browser{
  position:relative;
  flex:1;
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#0e0e0e;
  box-shadow:0 28px 80px rgba(0,0,0,.26);
}
.site-preview__bar{
  height:42px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:#111;
}
.site-preview__bar>span{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.2);
}
.site-preview__bar strong{
  margin-left:10px;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:rgba(255,255,255,.42);
  font-weight:500;
}
.site-preview__fallback{
  position:absolute;
  inset:42px 0 0;
  padding:clamp(28px,5vw,76px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  transition:opacity .45s var(--ease);
}
.site-preview__eyebrow{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:rgba(255,255,255,.5);
  margin-bottom:24px;
}
.site-preview__fallback h4{
  margin:0;
  font-size:clamp(48px,6.4vw,105px);
  line-height:.82;
  letter-spacing:-.065em;
  font-weight:560;
}
.site-preview__fallback p{
  max-width:520px;
  margin:26px 0 0;
  color:rgba(255,255,255,.58);
}
.site-preview--ergo .site-preview__fallback{
  background:
    radial-gradient(circle at 82% 28%,rgba(220,183,94,.14),transparent 28%),
    linear-gradient(145deg,#f2efe6 0 33%,#dfe9e6 33% 62%,#b8d0ca 62%);
  color:#203532;
}
.site-preview--ergo .site-preview__eyebrow,
.site-preview--ergo .site-preview__fallback p{color:rgba(32,53,50,.62)}
.site-preview__signal{
  position:absolute;
  right:7%;
  bottom:12%;
  display:flex;
  gap:8px;
  align-items:flex-end;
}
.site-preview__signal i{
  width:3px;
  height:48px;
  background:#203532;
  opacity:.24;
  animation:siteSignal 1.6s ease-in-out infinite alternate;
}
.site-preview__signal i:nth-child(2){height:76px;animation-delay:-.5s}
.site-preview__signal i:nth-child(3){height:32px;animation-delay:-1s}
@keyframes siteSignal{to{transform:scaleY(.45);opacity:.1}}

.site-preview--amigos .site-preview__fallback{
  background:
    radial-gradient(circle at 72% 35%,rgba(255,237,178,.2),transparent 26%),
    linear-gradient(135deg,#e06f57,#e89569 48%,#8ba68d 48% 100%);
  color:#241a17;
}
.site-preview--amigos .site-preview__eyebrow,
.site-preview--amigos .site-preview__fallback p{color:rgba(36,26,23,.66)}
.amigos-dots{
  position:absolute;
  right:6%;
  bottom:10%;
  display:grid;
  grid-template-columns:repeat(2,64px);
  gap:9px;
  transform:rotate(8deg);
}
.amigos-dots i{
  aspect-ratio:1;
  border-radius:50%;
  background:#f2d674;
  box-shadow:0 0 0 1px rgba(36,26,23,.15);
}
.amigos-dots i:nth-child(2){background:#94b69c}
.amigos-dots i:nth-child(3){background:#1f1d1a}
.amigos-dots i:nth-child(4){background:#f5e9db}

.site-preview__frame{
  position:absolute;
  inset:42px 0 0;
  z-index:4;
  opacity:0;
  pointer-events:none;
  transition:opacity .45s var(--ease);
  background:#fff;
}
.site-preview__frame iframe{
  width:100%;
  height:100%;
  border:0;
}
.site-preview.is-live .site-preview__frame{
  opacity:1;
}
.site-preview.is-live .site-preview__fallback{
  opacity:0;
}
.site-preview__actions{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-top:14px;
}
.site-preview__actions button,
.site-preview__actions a{
  border:0;
  background:none;
  color:rgba(255,255,255,.72);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.16em;
  cursor:pointer;
}
.site-preview__actions a:hover,
.site-preview__actions button:hover{color:#fff}

/* ---- LAB live demos ---- */
.lab.lab-experience{
  padding-bottom:13vh;
}
.lab__intro-copy{
  max-width:390px;
}
.lab__intro-copy p{
  color:var(--muted);
  line-height:1.65;
}
.lab__full-link{
  display:inline-flex;
  gap:20px;
  align-items:center;
  margin-top:28px;
  padding-bottom:4px;
  border-bottom:1px solid rgba(var(--accent-rgb),.42);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.15em;
}
.lab__full-link span{color:var(--accent)}

.lab-live{
  display:grid;
  grid-template-columns:1.35fr .85fr .85fr;
  gap:1px;
  margin-top:12vh;
  border:1px solid var(--line);
  background:var(--line);
}
.lab-card{
  min-height:560px;
  position:relative;
  overflow:hidden;
  padding:22px;
  background:rgba(8,8,8,.96);
  display:flex;
  flex-direction:column;
}
.lab-card header{
  position:relative;
  z-index:4;
}
.lab-card header>span{
  display:block;
  color:var(--muted);
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.18em;
  margin-bottom:12px;
}
.lab-card header>strong{
  font-size:clamp(24px,2vw,34px);
  font-weight:500;
}
.lab-card>p{
  position:relative;
  z-index:4;
  margin:auto 0 0;
  max-width:360px;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}
.lab-card>button{
  width:max-content;
  margin-top:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  color:var(--fg);
  border-radius:999px;
  padding:10px 14px;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.16em;
  cursor:pointer;
}
.lab-field-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.lab-card--field:after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(207,221,255,.08),transparent 46%);
  pointer-events:none;
}
.lab-type{
  margin:auto 0;
  font-size:clamp(52px,6vw,92px);
  line-height:.72;
  letter-spacing:-.08em;
  font-weight:650;
  cursor:crosshair;
}
.lab-type div{
  white-space:nowrap;
}
.lab-type span{
  display:inline-block;
  min-width:.42em;
  transform-origin:center;
  transition:transform .16s ease-out,color .25s;
}
.lab-type:hover span{color:rgba(216,255,200,.9)}

.lab-signal{
  margin:auto 0;
  height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  position:relative;
}
.lab-signal>span{
  display:block;
  width:4px;
  height:24%;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(207,221,255,.95),rgba(216,255,200,.2));
  transition:height .12s linear;
}
.lab-signal>i{
  position:absolute;
  width:150px;
  height:150px;
  border:1px solid rgba(216,255,200,.12);
  border-radius:50%;
  animation:presenceBreath 8.52s ease-in-out infinite;
}
.lab-signal__meta{
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-top:18px;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--muted);
}
.lab-portal{
  margin-top:12vh;
  padding-top:28px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1.15fr .75fr auto;
  gap:clamp(30px,6vw,90px);
  align-items:end;
}
.lab-portal>div>span{
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--accent);
}
.lab-portal h3{
  margin:15px 0 0;
  font-size:clamp(46px,5.4vw,90px);
  line-height:.85;
  letter-spacing:-.055em;
  font-weight:500;
}
.lab-portal h3 em{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}
.lab-portal>p{
  color:var(--muted);
  line-height:1.65;
  margin:0;
}

/* Avoid hover depth on active embedded interfaces. */
.case-study__media--video,
.case-study__media--website{
  transform:none!important;
}

@media(max-width:1050px){
  .lab-live{grid-template-columns:1fr 1fr}
  .lab-card--field{grid-column:1/-1}
  .lab-portal{grid-template-columns:1fr 1fr}
  .lab-portal>a{grid-column:2}
}
@media(max-width:760px){
  .cp-video__poster>strong{font-size:14vw}
  .cp-video__controls{gap:13px;padding:0 12px}
  .cp-video__controls button{font-size:7px}
  .site-preview{padding:10px}
  .site-preview__fallback{padding:24px}
  .site-preview__fallback h4{font-size:12vw}
  .site-preview__actions{min-height:48px}
  .lab-live{grid-template-columns:1fr}
  .lab-card--field{grid-column:auto}
  .lab-card{min-height:460px}
  .lab-portal{grid-template-columns:1fr}
  .lab-portal>a{grid-column:auto}
  .lab-portal h3{font-size:12vw}
}
@media(prefers-reduced-motion:reduce){
  .lab-field-canvas{display:none}
  .lab-signal>i{animation:none!important}
  .cp-video__line i{animation:none!important}
}


/* ============================================================
   V2.1 — REAL VIDEO CASES / MIXED ARCHIVE / LAB FUNCTION PASS
   ============================================================ */
.cp-video__progress{position:relative;flex:1;height:16px!important;padding:7px 0!important;cursor:pointer!important}
.cp-video__progress:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.16)}
.cp-video__progress i{position:absolute;left:0;top:50%;height:1px;width:0;background:linear-gradient(90deg,rgb(var(--case-rgb)),rgba(255,255,255,.82));box-shadow:0 0 12px rgba(var(--case-rgb),.28)}
.cp-video__time{min-width:74px;font-size:8px;letter-spacing:.07em;color:rgba(255,255,255,.46);font-variant-numeric:tabular-nums}
.cp-video__controls .cp-video__line{display:none}
.cp-video--pending .cp-video__poster--generated{background:radial-gradient(circle at 65% 38%,rgba(244,210,180,.18),transparent 24%),linear-gradient(135deg,#18120f,#070707 68%)}
.cp-video__pending-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:6px}
.cp-video__pending-mark i{width:7px;height:7px;border-radius:50%;background:rgba(244,210,180,.55);animation:pendingPulse 1.4s ease-in-out infinite alternate}
.cp-video__pending-mark i:nth-child(2){animation-delay:-.45s}.cp-video__pending-mark i:nth-child(3){animation-delay:-.9s}
@keyframes pendingPulse{to{transform:translateY(-8px);opacity:.2}}
.cp-video__controls--pending{justify-content:center;color:rgba(255,255,255,.42);font-size:8px;text-transform:uppercase;letter-spacing:.16em}

.work-archive--media{margin-top:12vh}
.archive-media-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;margin-top:7vh}
.archive-video-card,.archive-text-card,.archive-web-card{border:1px solid var(--line);background:rgba(255,255,255,.018);min-height:360px;overflow:hidden;position:relative}
.archive-video-card{grid-column:span 4;display:flex;flex-direction:column}
.archive-video-card .cp-video{position:relative;inset:auto;min-height:270px;flex:none}
.archive-video-card .cp-video__poster{padding:24px}.archive-video-card .cp-video__poster>strong{font-size:clamp(30px,3vw,54px)}
.archive-video-card .cp-video__center{width:58px;height:58px}
.archive-video-card .cp-video__controls{min-height:48px;gap:10px;padding:0 11px}.archive-video-card .cp-video__controls button{font-size:7px}.archive-video-card .cp-video__time{display:none}
.archive-video-card__copy{padding:20px}.archive-video-card__copy span,.archive-text-card>span,.archive-web-card__visual>span{font-size:8px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.archive-video-card__copy h4,.archive-text-card h4,.archive-web-card__copy h4{font-size:26px;font-weight:500;margin:9px 0 7px;letter-spacing:-.03em}.archive-video-card__copy p,.archive-text-card p,.archive-web-card__copy p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.archive-text-card{grid-column:span 4;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;min-height:360px}
.archive-text-card h4{font-size:clamp(34px,3.4vw,58px)}.archive-text-card small{margin-top:24px;color:rgba(255,255,255,.34);font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.archive-text-card--trauer:before,.archive-text-card--caa:before,.archive-text-card--sumatra:before{content:"";position:absolute;width:260px;height:260px;border:1px solid rgba(255,255,255,.07);border-radius:50%;right:-70px;top:-70px;box-shadow:0 0 80px rgba(255,255,255,.02)}
.archive-text-card--trauer{background:radial-gradient(circle at 75% 20%,rgba(216,255,200,.055),transparent 32%),#090909}.archive-text-card--caa{background:radial-gradient(circle at 75% 20%,rgba(244,210,180,.08),transparent 32%),#090909}.archive-text-card--sumatra{background:radial-gradient(circle at 75% 20%,rgba(200,231,255,.07),transparent 32%),#090909}
.archive-web-card{grid-column:span 4;display:grid;grid-template-rows:1.1fr auto}.archive-web-card__visual{padding:28px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(145deg,#f2efe6 0 34%,#dfe9e6 34% 62%,#b8d0ca 62%);color:#203532}.archive-web-card__visual>span{color:rgba(32,53,50,.55)}.archive-web-card__visual strong{font-size:clamp(52px,5vw,80px);line-height:.74;letter-spacing:-.07em}.archive-web-card__visual small{margin-top:18px;color:rgba(32,53,50,.64)}.archive-web-card__copy{padding:20px}.archive-web-card__copy a{display:inline-block;margin-top:18px;font-size:9px;text-transform:uppercase;letter-spacing:.14em;border-bottom:1px solid rgba(216,255,200,.4)}

.lab-field-status{position:absolute;right:20px;top:22px;z-index:5;text-align:right}.lab-field-status span{display:block;font-size:7px;letter-spacing:.18em;color:var(--muted)}.lab-field-status strong{display:block;font-size:18px;font-weight:500;margin-top:4px;color:#cfe0ff}
.lab-card--field[data-field-mode="vortex"] .lab-field-status strong{color:#d8ffc8}.lab-card--field[data-field-mode="wave"] .lab-field-status strong{color:#eedbff}
.lab-card--type>button{align-self:flex-start}
.lab-type div{perspective:500px;overflow:visible}.lab-type span{will-change:transform;transition:none}
.lab-card--type:before{content:"";position:absolute;inset:14% 8%;border:1px solid rgba(238,219,255,.055);transform:skewY(-4deg);pointer-events:none}
.lab-card--signal{background:radial-gradient(circle at 50% 48%,rgba(216,255,200,.045),transparent 33%),#080808}.lab-signal>i{transition:transform .08s linear,opacity .08s linear}.lab-signal>b{position:absolute;left:50%;top:50%;width:15px;height:15px;border-radius:50%;background:radial-gradient(circle,#fff 0 8%,#d8ffc8 28%,rgba(216,255,200,.1) 72%);box-shadow:0 0 42px rgba(216,255,200,.42);transform:translate(-50%,-50%);transition:transform .06s linear,opacity .06s linear}.lab-signal__meta span:last-child{color:var(--accent)}

@media(max-width:1050px){.archive-video-card,.archive-text-card,.archive-web-card{grid-column:span 6}}
@media(max-width:700px){.archive-media-grid{grid-template-columns:1fr}.archive-video-card,.archive-text-card,.archive-web-card{grid-column:auto}.archive-video-card .cp-video{min-height:250px}.archive-text-card,.archive-web-card{min-height:330px}.cp-video__time{display:none}.cp-video__progress{min-width:55px}.cp-video__controls{gap:9px}.cp-video__controls button{font-size:7px}}
@media(prefers-reduced-motion:reduce){.cp-video__pending-mark i{animation:none!important}.lab-type span{transform:none!important}}


/* ============================================================
   V2.2 — PLAYER, LAB, ACCESSIBILITY, LEGAL/SEO FOUNDATION
   ============================================================ */

.sr-only{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
:focus-visible{
  outline:2px solid rgba(var(--accent-rgb),.95);
  outline-offset:4px;
}
a,button,input{ -webkit-tap-highlight-color:transparent; }

/* Video player: volume + privacy-safe local/generative posters */
.cp-video__volume{
  display:flex;
  align-items:center;
  width:clamp(72px,8vw,126px);
  min-width:72px;
}
.cp-video__volume input{
  width:100%;
  accent-color:rgb(var(--case-rgb,216,255,200));
  cursor:pointer;
}
.cp-video__poster{
  --video-overlay:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.84));
  background:
    var(--video-overlay),
    var(--video-poster,linear-gradient(135deg,#101010,#050505)) center/cover no-repeat;
}
.cp-video__poster--volkshilfe{
  background-position:center 38%;
}
.cp-video__poster--tech{
  --video-poster:
    radial-gradient(circle at 75% 28%,rgba(174,219,226,.23),transparent 22%),
    linear-gradient(115deg,#071017 0 38%,#14191d 38% 55%,#060707 55% 100%);
}
.cp-video__poster--caa,
.cp-video__poster--caa2{
  --video-poster:
    radial-gradient(circle at 72% 30%,rgba(244,210,180,.26),transparent 24%),
    linear-gradient(135deg,#261715 0 42%,#8a3428 42% 43%,#120c0b 43%);
}
.cp-video__poster--trauer{
  --video-poster:
    radial-gradient(circle at 50% 38%,rgba(230,240,225,.12),transparent 22%),
    linear-gradient(150deg,#121413,#050605);
}
.cp-video__poster--arrow{
  --video-poster:
    linear-gradient(112deg,transparent 0 45%,rgba(200,231,255,.18) 45% 46%,transparent 46%),
    radial-gradient(circle at 74% 45%,rgba(200,231,255,.18),transparent 24%),
    #070a0d;
}
.cp-video__poster--rainbow{
  --video-poster:
    linear-gradient(130deg,rgba(255,93,126,.24),transparent 30%),
    linear-gradient(40deg,rgba(80,200,255,.20),transparent 36%),
    radial-gradient(circle at 72% 30%,rgba(255,221,85,.18),transparent 20%),
    #09070d;
}
.cp-video__poster--sumatra{
  --video-poster:
    radial-gradient(circle at 72% 38%,rgba(107,170,116,.20),transparent 28%),
    linear-gradient(145deg,#0b1710,#050706 70%);
}
.cp-video__poster--topmodel{
  --video-poster:
    linear-gradient(120deg,rgba(232,211,255,.15),transparent 26%),
    radial-gradient(circle at 72% 26%,rgba(255,255,255,.09),transparent 20%),
    #0a090d;
}
.cp-video__poster--badehaus{
  --video-poster:
    radial-gradient(circle at 70% 35%,rgba(143,206,215,.18),transparent 28%),
    linear-gradient(135deg,#071214,#071010 48%,#15110c);
}
.cp-video.is-ended .cp-video__poster{
  opacity:1;
  visibility:visible;
}
.cp-video.is-ended .cp-video__poster small::after{
  content:" · Für erneutes Abspielen Play drücken.";
}
.cp-video__controls{
  flex-wrap:nowrap;
}
.archive-video-card .cp-video__volume{
  width:72px;
  min-width:58px;
}
.archive-video-card .cp-video__poster>small{
  max-width:260px;
}
@media(max-width:720px){
  .cp-video__volume{width:66px;min-width:56px}
  .cp-video__controls{gap:8px}
  .cp-video__controls button{letter-spacing:.11em}
  .archive-video-card .cp-video__volume{width:58px}
}

/* LAB 01: make mutate control actually clickable + obvious */
.lab-card>button{
  position:relative;
  z-index:6;
}
.lab-field-canvas{
  z-index:1;
}
.lab-card--field header,
.lab-card--field>p,
.lab-field-status{
  position:relative;
  z-index:4;
}
.lab-card--field::before{
  content:attr(data-field-mode);
  position:absolute;
  right:-.04em;
  top:18%;
  z-index:2;
  font-size:clamp(72px,10vw,170px);
  line-height:.72;
  font-weight:700;
  letter-spacing:-.09em;
  text-transform:uppercase;
  color:rgba(255,255,255,.035);
  pointer-events:none;
  transition:color .45s,transform .55s var(--ease),opacity .45s;
}
.lab-card--field[data-field-mode="flow"]{
  background:radial-gradient(circle at 20% 25%,rgba(190,225,255,.07),transparent 32%),#08090a;
}
.lab-card--field[data-field-mode="vortex"]{
  background:radial-gradient(circle at 70% 45%,rgba(205,255,185,.09),transparent 34%),#070907;
}
.lab-card--field[data-field-mode="wave"]{
  background:radial-gradient(circle at 48% 70%,rgba(238,205,255,.09),transparent 38%),#090709;
}
.lab-card--field.is-mutating::after{
  content:"";
  position:absolute;
  inset:-30%;
  z-index:3;
  pointer-events:none;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  animation:fieldMutationFlash .62s ease-out both;
}
@keyframes fieldMutationFlash{
  0%{transform:scale(.08);opacity:.9}
  100%{transform:scale(1.1);opacity:0}
}

/* LAB 02: stronger material/color interaction */
.lab-card--type{
  background:
    radial-gradient(circle at var(--type-x,50%) var(--type-y,50%),rgba(238,219,255,.08),transparent 30%),
    #080808;
  transition:background .16s linear;
}
.lab-type{
  perspective:700px;
}
.lab-type span{
  will-change:transform,color,text-shadow;
  transition:color .08s linear;
}
.lab-card--type>button{
  position:relative;
  z-index:6;
}

/* LAB 03: pointer influences the entire signal in 2D */
.lab-signal{
  --signal-x:50%;
  --signal-y:50%;
  background:
    radial-gradient(circle at var(--signal-x) var(--signal-y),rgba(216,255,200,.10),transparent 28%);
  transition:background .08s linear;
}
.lab-signal>span{
  transform-origin:center;
  transition:height .07s linear,opacity .07s linear,transform .07s linear;
}
.lab-signal>i,
.lab-signal>b{
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  transform-origin:center;
}
.lab-signal>i{
  border-style:dashed;
}

/* Footer legal links */
.contact__footer>div{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.contact__footer a{
  text-underline-offset:4px;
}

/* Legal pages */
.legal-page{
  min-height:100vh;
  background:#080808;
  color:var(--fg);
}
.legal-page .grain{position:fixed}
.legal-header{
  min-height:72px;
  padding:0 var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(8,8,8,.88);
  backdrop-filter:blur(18px);
}
.legal-header a{font-size:11px;text-transform:uppercase;letter-spacing:.14em}
.legal-header__brand{display:flex;align-items:center;gap:12px}
.legal-header__mark{
  width:34px;height:34px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;font-size:9px;
}
.legal-main{
  width:min(980px,calc(100% - 2*var(--pad)));
  margin:0 auto;
  padding:12vh 0 14vh;
}
.legal-kicker{
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:var(--accent);
}
.legal-main h1{
  font-size:clamp(56px,9vw,140px);
  line-height:.84;
  letter-spacing:-.07em;
  font-weight:520;
  margin:20px 0 10vh;
}
.legal-main h1 em{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}
.legal-section{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:clamp(35px,7vw,100px);
  padding:42px 0;
  border-top:1px solid var(--line);
}
.legal-section:last-of-type{border-bottom:1px solid var(--line)}
.legal-section h2{
  font-size:18px;
  font-weight:500;
  margin:0;
}
.legal-section__body{
  color:rgba(241,239,233,.72);
  line-height:1.72;
}
.legal-section__body p:first-child{margin-top:0}
.legal-section__body a{
  color:var(--fg);
  text-decoration:underline;
  text-underline-offset:4px;
}
.legal-section__body ul{padding-left:1.2em}
.legal-note{
  padding:22px;
  border:1px solid rgba(var(--accent-rgb),.18);
  background:rgba(var(--accent-rgb),.025);
}
.legal-footer{
  width:min(980px,calc(100% - 2*var(--pad)));
  margin:0 auto;
  padding:28px 0 60px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:10px;
}
.legal-footer nav{display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:720px){
  .legal-main{padding-top:9vh}
  .legal-main h1{font-size:16vw;margin-bottom:8vh}
  .legal-section{grid-template-columns:1fr;gap:18px;padding:32px 0}
}

/* SEO/accessibility: the visible masterbrand is the document H1. */
h1.hero__identity{
  margin:0;
  font:inherit;
}


/* ============================================================
   V2.3 — DIRECT EMBEDS, LIGHTBOX PLAYER, KINETIC LAB TITLE, MEMORY SURFACE
   ============================================================ */

.cp-video__poster-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  filter:saturate(.82) contrast(1.04) brightness(.72);
}
.cp-video__poster--volkshilfe{
  background:#170a08;
}
.cp-video__poster--volkshilfe::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.84));
  pointer-events:none;
}
.cp-video__poster--volkshilfe>span,
.cp-video__poster--volkshilfe>strong,
.cp-video__poster--volkshilfe>small{
  z-index:2;
}

.video-lightbox[hidden]{display:none!important}
.video-lightbox{
  position:fixed;
  inset:0;
  z-index:500;
  display:grid;
  place-items:center;
  opacity:0;
  transition:opacity .38s ease;
}
.video-lightbox.is-visible{opacity:1}
.video-lightbox__backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,3,4,.88);
  backdrop-filter:blur(18px);
}
.video-lightbox__stage{
  position:relative;
  z-index:2;
  width:min(var(--video-modal-width,80vw),86vw);
  min-width:min(680px,86vw);
  aspect-ratio:16/9;
  display:grid;
  place-items:stretch;
  transform:scale(.95);
  opacity:.3;
  transition:transform .42s var(--ease),opacity .42s ease;
}
.video-lightbox.is-visible .video-lightbox__stage{
  transform:scale(1);
  opacity:1;
}
.video-lightbox__slot,
.video-lightbox__slot>.cp-video{
  width:100%;
  height:100%;
}
.video-lightbox__slot>.cp-video{
  position:relative!important;
  inset:auto!important;
  box-shadow:0 32px 120px rgba(0,0,0,.6);
}
.video-lightbox__close{
  position:fixed;
  top:22px;
  right:26px;
  z-index:4;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(12,12,12,.64);
  backdrop-filter:blur(12px);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  transition:transform .25s ease,border-color .25s,background .25s;
}
.video-lightbox__close:hover{
  transform:rotate(8deg) scale(1.06);
  border-color:rgba(216,255,200,.55);
  background:rgba(216,255,200,.06);
}
body.video-modal-open{
  overflow:hidden;
}
.cp-video.is-modal .cp-video__center{
  width:84px;height:84px;
}
.cp-video.is-modal-closing{
  opacity:.1;
  transition:opacity .3s ease;
}
@media(max-width:800px){
  .video-lightbox__stage{
    width:92vw;
    min-width:0;
  }
  .video-lightbox__close{
    top:14px;right:14px;
  }
}

/* Exact editorial line breaks requested */
.work-outro p{
  line-height:.92;
}
.work-outro p em{
  display:inline-block;
}
.about-quote{
  display:flex;
  flex-direction:column;
}
.about-quote>span{
  display:block;
}

/* Kinetic main LAB heading replaces the old LAB 02 type demo. */
.lab__title--kinetic{
  cursor:crosshair;
  user-select:none;
}
.lab__title--kinetic>span{
  display:block;
  white-space:nowrap;
}
.lab__title--kinetic>span>span{
  display:inline-block;
  min-width:.18em;
  transform-origin:center;
  will-change:transform,color,text-shadow;
  transition:color .48s ease,text-shadow .48s ease;
}

/* LAB 02: temporal memory surface */
.lab-card--memory{
  background:
    radial-gradient(circle at 68% 34%,rgba(180,200,255,.07),transparent 34%),
    #070708;
}
.lab-memory{
  position:relative;
  flex:1;
  min-height:310px;
  margin:20px -22px 0;
  overflow:hidden;
  cursor:crosshair;
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.lab-memory__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.lab-memory__label{
  position:absolute;
  left:22px;
  bottom:18px;
  z-index:2;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  gap:4px;
  text-transform:uppercase;
  letter-spacing:.17em;
}
.lab-memory__label span{
  font-size:7px;
  color:rgba(255,255,255,.35);
}
.lab-memory__label strong{
  font-size:9px;
  font-weight:500;
  color:rgba(255,255,255,.65);
}
.lab-memory.is-clearing::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.14);
  animation:memoryClear .45s ease-out both;
  pointer-events:none;
}
@keyframes memoryClear{
  0%{opacity:.8}
  100%{opacity:0}
}
.lab-card--memory>button{
  position:relative;
  z-index:6;
}

/* Make LAB 01 clickability unambiguous. */
.lab-card--field>button{
  pointer-events:auto!important;
  isolation:isolate;
}
.lab-card--field .lab-field-canvas{
  pointer-events:auto;
}

/* Stronger pointer influence in Sound Visible. */
.lab-signal{
  overflow:visible;
}
.lab-signal>span{
  will-change:transform,height;
}

@media(prefers-reduced-motion:reduce){
  .lab__title--kinetic>span>span{
    transform:none!important;
    text-shadow:none!important;
  }
  .video-lightbox__stage{
    transition:none;
  }
}


/* ============================================================
   V2.4 — PLAYER CONTINUITY + GENERATED POSTERS + LAB REFINEMENT
   ============================================================ */

/* All portfolio previews are now designed in-system: no photographic thumbnails. */
.cp-video__poster-image{display:none!important}

.cp-video__poster{
  overflow:hidden;
  isolation:isolate;
  background:#080808!important;
}
.cp-video__poster>span,
.cp-video__poster>strong,
.cp-video__poster>small{
  position:relative;
  z-index:4;
}
.cp-video__poster-gadget{
  position:absolute;
  z-index:1;
  pointer-events:none;
  display:block;
}

/* 01 — Volkshilfe: social orbit / history rings */
.cp-video__poster--volkshilfe{
  background:
    radial-gradient(circle at 72% 42%,rgba(218,84,65,.12),transparent 24%),
    linear-gradient(135deg,#100908,#070707 64%)!important;
}
.cp-video__poster--volkshilfe .cp-video__poster-gadget{
  width:min(42vw,380px);
  aspect-ratio:1;
  right:7%;
  top:12%;
  border:1px solid rgba(218,84,65,.23);
  border-radius:50%;
  box-shadow:
    0 0 0 28px rgba(218,84,65,.035),
    0 0 0 62px rgba(218,84,65,.022),
    inset 0 0 50px rgba(218,84,65,.045);
  animation:posterOrbit 8.4s linear infinite;
}
.cp-video__poster--volkshilfe .cp-video__poster-gadget:before,
.cp-video__poster--volkshilfe .cp-video__poster-gadget:after{
  content:"";
  position:absolute;
  border-radius:50%;
}
.cp-video__poster--volkshilfe .cp-video__poster-gadget:before{
  width:8px;height:8px;top:10%;left:24%;
  background:#da5441;
  box-shadow:0 0 24px rgba(218,84,65,.8);
}
.cp-video__poster--volkshilfe .cp-video__poster-gadget:after{
  inset:26%;
  border:1px solid rgba(255,255,255,.11);
}

/* 02 — Technik: scanning architecture */
.cp-video__poster--tech{
  background:
    linear-gradient(90deg,rgba(174,219,226,.035) 1px,transparent 1px),
    linear-gradient(rgba(174,219,226,.035) 1px,transparent 1px),
    radial-gradient(circle at 74% 38%,rgba(174,219,226,.12),transparent 25%),
    #070a0c!important;
  background-size:52px 52px,52px 52px,auto,auto!important;
}
.cp-video__poster--tech .cp-video__poster-gadget{
  left:0;right:0;top:28%;
  height:2px;
  background:linear-gradient(90deg,transparent,#aedef0,transparent);
  box-shadow:0 0 22px rgba(174,219,226,.35);
  animation:posterScan 3.8s ease-in-out infinite alternate;
}

/* 03 — CAA Schlitten: directional streak */
.cp-video__poster--caa{
  background:
    radial-gradient(circle at 78% 24%,rgba(244,210,180,.12),transparent 21%),
    linear-gradient(145deg,#170e0c,#090706 68%)!important;
}
.cp-video__poster--caa .cp-video__poster-gadget{
  width:54%;
  height:1px;
  right:4%;
  top:42%;
  background:linear-gradient(90deg,transparent,#f4d2b4);
  box-shadow:
    0 18px 0 rgba(244,210,180,.11),
    0 36px 0 rgba(244,210,180,.06);
  transform:rotate(-13deg);
  animation:posterSled 3.2s ease-in-out infinite alternate;
}

/* 04 — Trauerfilm: breathing halo */
.cp-video__poster--trauer{
  background:radial-gradient(circle at 71% 48%,rgba(220,232,220,.08),transparent 24%),#070807!important;
}
.cp-video__poster--trauer .cp-video__poster-gadget{
  width:180px;height:180px;
  right:15%;top:22%;
  border:1px solid rgba(230,240,225,.15);
  border-radius:50%;
  box-shadow:0 0 70px rgba(230,240,225,.035);
  animation:posterBreath 6.4s ease-in-out infinite;
}

/* 05 — CAA Christmas: quiet falling particles */
.cp-video__poster--caa2{
  background:linear-gradient(145deg,#160b0b,#080707 62%)!important;
}
.cp-video__poster--caa2 .cp-video__poster-gadget{
  inset:0;
  background-image:
    radial-gradient(circle,rgba(255,235,220,.55) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(255,235,220,.25) 0 1px,transparent 1.5px);
  background-size:52px 52px,77px 77px;
  background-position:0 0,22px 33px;
  opacity:.4;
  animation:posterSnow 10s linear infinite;
}

/* 06 — ArrowTag: target */
.cp-video__poster--arrow{
  background:radial-gradient(circle at 74% 48%,rgba(200,231,255,.10),transparent 26%),#06090b!important;
}
.cp-video__poster--arrow .cp-video__poster-gadget{
  width:190px;height:190px;
  right:12%;top:19%;
  border:1px solid rgba(200,231,255,.18);
  border-radius:50%;
  box-shadow:
    0 0 0 30px rgba(200,231,255,.035),
    0 0 0 60px rgba(200,231,255,.02);
  animation:posterTarget 5.5s ease-in-out infinite;
}
.cp-video__poster--arrow .cp-video__poster-gadget:after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:7px;height:7px;
  border-radius:50%;
  background:#c8e7ff;
  transform:translate(-50%,-50%);
  box-shadow:0 0 22px rgba(200,231,255,.75);
}

/* 07 — Rainbow: spectral arcs */
.cp-video__poster--rainbow{
  background:radial-gradient(circle at 73% 46%,rgba(255,255,255,.045),transparent 28%),#08070a!important;
}
.cp-video__poster--rainbow .cp-video__poster-gadget{
  width:230px;height:230px;
  right:8%;top:15%;
  border-radius:50%;
  border:4px solid transparent;
  border-top-color:#ff7188;
  border-right-color:#74d7ff;
  border-bottom-color:#ffd567;
  border-left-color:#9de3a8;
  opacity:.55;
  animation:posterRainbow 9s linear infinite;
}
.cp-video__poster--rainbow .cp-video__poster-gadget:after{
  content:"";
  position:absolute;
  inset:24%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.13);
}

/* 08 — Sumatra: organic orbit */
.cp-video__poster--sumatra{
  background:radial-gradient(circle at 72% 43%,rgba(117,181,124,.10),transparent 28%),#071008!important;
}
.cp-video__poster--sumatra .cp-video__poster-gadget{
  width:210px;height:150px;
  right:9%;top:25%;
  border:1px solid rgba(130,200,135,.18);
  border-radius:54% 46% 62% 38% / 42% 58% 42% 58%;
  animation:posterOrganic 6.8s ease-in-out infinite alternate;
}

/* 09 — Topmodel: runway */
.cp-video__poster--topmodel{
  background:
    linear-gradient(90deg,transparent 49.8%,rgba(232,211,255,.13) 50%,transparent 50.2%),
    radial-gradient(circle at 70% 30%,rgba(232,211,255,.08),transparent 22%),
    #08070a!important;
}
.cp-video__poster--topmodel .cp-video__poster-gadget{
  width:160px;height:210px;
  right:13%;top:12%;
  border-left:1px solid rgba(232,211,255,.18);
  border-right:1px solid rgba(232,211,255,.18);
  transform:perspective(220px) rotateX(62deg);
  box-shadow:
    inset 36px 0 0 rgba(232,211,255,.018),
    inset -36px 0 0 rgba(232,211,255,.018);
  animation:posterRunway 4.2s ease-in-out infinite alternate;
}

/* 10 — Badehaus: water rings */
.cp-video__poster--badehaus{
  background:radial-gradient(circle at 72% 45%,rgba(143,206,215,.10),transparent 28%),#061011!important;
}
.cp-video__poster--badehaus .cp-video__poster-gadget{
  width:160px;height:70px;
  right:12%;top:43%;
  border:1px solid rgba(143,206,215,.22);
  border-radius:50%;
  box-shadow:
    0 0 0 26px rgba(143,206,215,.035),
    0 0 0 54px rgba(143,206,215,.018);
  animation:posterWater 4.8s ease-in-out infinite;
}

@keyframes posterOrbit{to{transform:rotate(360deg)}}
@keyframes posterScan{from{transform:translateY(-70px);opacity:.2}to{transform:translateY(120px);opacity:.8}}
@keyframes posterSled{to{transform:rotate(-13deg) translateX(-46px)}}
@keyframes posterBreath{50%{transform:scale(1.18);opacity:.35}}
@keyframes posterSnow{to{background-position:30px 110px,-20px 140px}}
@keyframes posterTarget{50%{transform:scale(.86) rotate(7deg);opacity:.42}}
@keyframes posterRainbow{to{transform:rotate(360deg)}}
@keyframes posterOrganic{to{transform:rotate(9deg) scale(1.12);border-radius:40% 60% 38% 62% / 62% 38% 62% 38%}}
@keyframes posterRunway{to{transform:perspective(220px) rotateX(55deg) translateY(22px)}}
@keyframes posterWater{50%{transform:scale(1.18,.82);opacity:.32}}

/* Hide YouTube's own inactive/pre-play surface entirely.
   Only our poster is visible while idle/paused/ended. */
.cp-video[data-video-state="idle"] .cp-video__host,
.cp-video[data-video-state="paused"] .cp-video__host,
.cp-video[data-video-state="ended"] .cp-video__host{
  opacity:0;
}
.cp-video[data-video-state="playing"] .cp-video__host{
  opacity:1;
}
.cp-video__host{
  transition:opacity .12s linear;
  overflow:hidden;
}

/* Native YT overlay protection during playback:
   iframe can't receive pointer hover and gets a subtle edge crop/vignette. */
.cp-video__host iframe{
  pointer-events:none!important;
  width:108%!important;
  height:108%!important;
  left:-4%!important;
  top:-4%!important;
  max-width:none!important;
}
.cp-video__host::before,
.cp-video__host::after{
  content:"";
  position:absolute;
  left:0;right:0;
  z-index:3;
  pointer-events:none;
}
.cp-video__host::before{
  top:0;height:44px;
  background:linear-gradient(180deg,rgba(3,3,3,.82),rgba(3,3,3,0));
}
.cp-video__host::after{
  bottom:0;height:46px;
  background:linear-gradient(0deg,rgba(3,3,3,.82),rgba(3,3,3,0));
}

/* Enlargement without reparenting the YouTube iframe.
   This preserves playback state and custom controls. */
.video-lightbox[hidden]{display:none!important}
.video-lightbox{
  position:fixed;
  inset:0;
  z-index:490;
  opacity:0;
  pointer-events:none;
  transition:opacity .32s ease;
}
.video-lightbox.is-visible{
  opacity:1;
  pointer-events:auto;
}
.video-lightbox__backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,3,4,.90);
  backdrop-filter:blur(18px);
}
.video-lightbox__close{
  position:fixed;
  top:22px;
  right:26px;
  z-index:560;
  width:50px;height:50px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(12,12,12,.72);
  color:#fff;
  font-size:30px;
  cursor:pointer;
}
.video-lightbox__close:hover{
  border-color:rgba(216,255,200,.65);
  transform:rotate(8deg) scale(1.06);
}
.cp-video.is-enlarged{
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:var(--video-enlarged-width)!important;
  height:var(--video-enlarged-height)!important;
  min-height:0!important;
  transform:translate(-50%,-50%)!important;
  z-index:550!important;
  box-shadow:0 35px 120px rgba(0,0,0,.72);
}
.video-layer-open{
  overflow:visible!important;
  transform:none!important;
  filter:none!important;
  clip-path:none!important;
}
body.video-modal-open{
  overflow:hidden;
}
.cp-video.is-enlarged [data-video-enlarge]{
  color:rgb(var(--case-rgb,216,255,200));
}

/* Exact 4-line quote, including requested first line. */
.about-quote{
  display:flex;
  flex-direction:column;
  gap:.04em;
}
.about-quote>span{
  display:block;
  white-space:nowrap;
}
@media(max-width:760px){
  .about-quote{
    font-size:clamp(20px,5.7vw,26px)!important;
  }
}

/* LAB title: WHITE at rest; strong color/motion only on touch/hover. */
.lab__title--kinetic>span>span{
  color:#f1efe9;
  transition:
    color .38s ease,
    text-shadow .38s ease;
}
.lab__title--kinetic{
  overflow:visible;
}
.lab__title--kinetic>span{
  overflow:visible;
}

/* LAB Memory clear flash fully returns to initial surface. */
.lab-memory.is-clearing{
  background:#070708!important;
}
.lab-memory.is-clearing::after{
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.07),transparent 42%);
}

/* Vortex stays centered; state can transform but won't chase cursor offscreen. */
.lab-card--field[data-field-mode="vortex"] .lab-field-status strong{
  color:#c4ffac;
}
.lab-card--field[data-field-mode="vortex"]::before{
  transform:translateX(0)!important;
}

/* Ensure buttons are never underneath interactive canvases. */
.lab-card>button,
.lab-field-status{
  z-index:8!important;
}

/* No native-browser fullscreen affordance remains. */
iframe[allowfullscreen]{ }

/* Reduced motion preserves design without motion-heavy gadgets. */
@media(prefers-reduced-motion:reduce){
  .cp-video__poster-gadget{
    animation:none!important;
  }
  .lab__title--kinetic>span>span{
    transform:none!important;
  }
}

/* Final overlay stacking safeguard:
   enlarged player must escape all local clipping/stacking contexts
   without moving the iframe in the DOM. */
.video-layer-open{
  isolation:auto!important;
  z-index:520!important;
}


/* V2.4 corrected — modal stacking-context escape.
   Every DOM ancestor of the enlarged player gets this class.
   z-index:auto is essential: a high z-index here would create another
   stacking context and could put the whole player below the body overlay. */
.video-layer-open{
  overflow:visible!important;
  overflow-x:visible!important;
  overflow-y:visible!important;
  transform:none!important;
  translate:none!important;
  scale:none!important;
  rotate:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  perspective:none!important;
  clip-path:none!important;
  contain:none!important;
  isolation:auto!important;
  z-index:auto!important;
}

/* The player itself is the only lifted visual layer. */
.cp-video.is-enlarged{
  z-index:10020!important;
}
.video-lightbox{
  z-index:10000!important;
}
.video-lightbox__backdrop{
  z-index:0!important;
}
.video-lightbox__close{
  z-index:10030!important;
}


/* ============================================================
   FINAL V2.4 VIDEO MODAL STACKING FIX
   Sticky/fixed/positioned ancestors can create stacking contexts even
   with z-index:auto. While a video is enlarged we temporarily make the
   whole ancestor chain non-positioned/non-stacking.
   ============================================================ */

html.video-modal-open-root .video-layer-open{
  position:static!important;
  z-index:auto!important;
  isolation:auto!important;
  opacity:1!important;

  transform:none!important;
  translate:none!important;
  rotate:none!important;
  scale:none!important;
  perspective:none!important;

  filter:none!important;
  backdrop-filter:none!important;
  mix-blend-mode:normal!important;

  contain:none!important;
  clip-path:none!important;
  mask:none!important;
  will-change:auto!important;

  overflow:visible!important;
  overflow-x:visible!important;
  overflow-y:visible!important;
}

/* The player is now in the document's root stacking context. */
html.video-modal-open-root .cp-video.is-enlarged{
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;

  width:var(--video-enlarged-width)!important;
  height:var(--video-enlarged-height)!important;

  transform:translate(-50%,-50%)!important;
  z-index:2147483646!important;

  opacity:1!important;
  isolation:isolate!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

/* Dark page layer stays below the player. */
html.video-modal-open-root .video-lightbox{
  z-index:2147483000!important;
}
html.video-modal-open-root .video-lightbox__backdrop{
  z-index:0!important;
}
html.video-modal-open-root .video-lightbox__close{
  z-index:2147483647!important;
}

/* Prevent any legacy pseudo layer from sitting above the enlarged video. */
html.video-modal-open-root .case-study__media:after,
html.video-modal-open-root .work-experience:before{
  pointer-events:none!important;
}

/* During modal state the video's local controls always remain above iframe. */
html.video-modal-open-root .cp-video.is-enlarged .cp-video__stage{
  z-index:1!important;
}
html.video-modal-open-root .cp-video.is-enlarged .cp-video__controls{
  position:relative!important;
  z-index:20!important;
}


/* ============================================================
   V2.5 — PERSONAL PHOTO STRIP + 10-FRAME OVERLAY GALLERY
   ============================================================ */

.photo-essay{
  margin-top:13vh;
  padding-top:30px;
  border-top:1px solid var(--line);
}
.photo-essay__head{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.62fr);
  gap:clamp(45px,8vw,130px);
  align-items:end;
  margin-bottom:5vh;
}
.photo-essay__head h3{
  margin:16px 0 0;
  font-size:clamp(46px,5.6vw,92px);
  line-height:.86;
  letter-spacing:-.06em;
  font-weight:500;
}
.photo-essay__head h3 em{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}
.photo-essay__head p{
  margin:0;
  max-width:470px;
  color:var(--muted);
  line-height:1.65;
}
.photo-strip{
  display:grid;
  grid-template-columns:1.2fr .82fr 1fr minmax(145px,.36fr);
  gap:8px;
  height:clamp(230px,28vw,430px);
}
.photo-strip__item,
.photo-strip__open{
  border:0;
  padding:0;
  background:#090909;
  color:var(--fg);
  position:relative;
  overflow:hidden;
  cursor:pointer;
  text-align:left;
}
.photo-strip__item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s var(--ease),filter .8s var(--ease),opacity .8s var(--ease);
}
.photo-strip__item:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.45));
  pointer-events:none;
}
.photo-strip__item>span{
  position:absolute;
  z-index:2;
  left:15px;
  bottom:13px;
  font-size:8px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.6);
}
.photo-strip__item:hover img{
  transform:scale(1.035);
  filter:brightness(1.08);
}
.photo-strip__item:focus-visible,
.photo-strip__open:focus-visible{
  outline-offset:-3px;
}
.photo-strip__open{
  padding:18px 15px;
  border:1px solid rgba(255,255,255,.1);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:7px;
  background:
    radial-gradient(circle at 65% 25%,rgba(216,255,200,.08),transparent 33%),
    #090a09;
}
.photo-strip__open span{
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--muted);
}
.photo-strip__open strong{
  font-size:16px;
  font-weight:500;
}
.photo-strip__open i{
  position:absolute;
  right:14px;
  top:14px;
  color:var(--accent);
  font-style:normal;
  transition:transform .45s var(--ease);
}
.photo-strip__open:hover i{
  transform:translate(3px,-3px);
}
.photo-essay__hint{
  margin:14px 0 0;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.17em;
  color:rgba(255,255,255,.28);
}

/* Overlay */
.photo-gallery-overlay[hidden]{display:none!important}
.photo-gallery-overlay{
  position:fixed;
  inset:0;
  z-index:2147483500;
  opacity:0;
  pointer-events:none;
  transition:opacity .32s ease;
}
.photo-gallery-overlay.is-visible{
  opacity:1;
  pointer-events:auto;
}
.photo-gallery-overlay__backdrop{
  position:absolute;
  inset:0;
  background:rgba(3,3,4,.94);
  backdrop-filter:blur(18px);
}
.photo-gallery-overlay__panel{
  position:absolute;
  left:50%;
  top:50%;
  width:min(92vw,1680px);
  height:min(86vh,920px);
  transform:translate(-50%,-50%) scale(.985);
  display:flex;
  flex-direction:column;
  gap:18px;
  transition:transform .36s var(--ease);
}
.photo-gallery-overlay.is-visible .photo-gallery-overlay__panel{
  transform:translate(-50%,-50%) scale(1);
}
.photo-gallery-overlay__head{
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#fff;
}
.photo-gallery-overlay__head>div{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.photo-gallery-overlay__head span{
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.19em;
  color:rgba(255,255,255,.42);
}
.photo-gallery-overlay__head strong{
  font-size:18px;
  font-weight:500;
}
.photo-gallery-overlay__close{
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(15,15,15,.68);
  color:#fff;
  font-size:29px;
  cursor:pointer;
}
.photo-gallery-overlay__close:hover{
  border-color:rgba(216,255,200,.62);
  transform:rotate(8deg);
}
.photo-gallery-grid{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:7px;
}
.photo-gallery-grid figure{
  margin:0;
  min-width:0;
  min-height:0;
  position:relative;
  overflow:hidden;
  background:#090909;
  border:1px solid rgba(255,255,255,.07);
}
.photo-gallery-grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:filter .5s,transform .7s var(--ease);
}
.photo-gallery-grid figure:hover img{
  filter:brightness(1.08);
  transform:scale(1.018);
}
.photo-gallery-grid figcaption{
  position:absolute;
  left:10px;
  bottom:9px;
  font-size:7px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.55);
}
body.photo-gallery-open{
  overflow:hidden;
}

/* Mobile: all ten pictures simply stack vertically. */
@media(max-width:760px){
  .photo-essay{
    margin-top:10vh;
  }
  .photo-essay__head{
    grid-template-columns:1fr;
    gap:26px;
  }
  .photo-strip{
    grid-template-columns:1.15fr .85fr;
    grid-template-rows:1fr .78fr;
    height:520px;
  }
  .photo-strip__item--01{
    grid-row:1/3;
  }
  .photo-strip__item--02{
    grid-column:2;
    grid-row:1;
  }
  .photo-strip__item--03{
    grid-column:2;
    grid-row:2;
  }
  .photo-strip__open{
    grid-column:1/3;
    min-height:68px;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:15px;
  }
  .photo-strip__open i{
    position:static;
  }

  .photo-gallery-overlay{
    overflow:auto;
  }
  .photo-gallery-overlay__panel{
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    height:auto;
    min-height:100%;
    transform:none!important;
    padding:18px 14px 32px;
  }
  .photo-gallery-overlay__head{
    position:sticky;
    top:0;
    z-index:3;
    padding:4px 0 12px;
    background:linear-gradient(180deg,rgba(3,3,4,.98),rgba(3,3,4,.84),transparent);
  }
  .photo-gallery-grid{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .photo-gallery-grid figure{
    flex:none;
    width:100%;
    aspect-ratio:4/5;
  }
}

/* Placeholder-only note: replace cp-01.svg ... cp-10.svg with real photo
   files while keeping the same HTML structure. */


/* ============================================================
   V2.6 — REAL PHOTOGRAPHY / NO VISIBLE CAPTIONS
   ============================================================ */

.photo-strip__item>span,
.photo-gallery-grid figcaption{
  display:none!important;
}

.photo-strip__item:after{
  background:
    linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.20));
}

.photo-strip__item img{
  object-position:center;
}

/* Each visible strip image keeps its own character instead of forcing
   identical crops. */
.photo-strip__item--01 img{object-position:center 53%}
.photo-strip__item--02 img{object-position:center}
.photo-strip__item--03 img{object-position:center 48%}

/* Mixed photographic formats are displayed as editorial crops on desktop. */
.photo-gallery-grid figure{
  background:#050505;
}
.photo-gallery-grid img{
  object-fit:cover;
  object-position:center;
}

/* Landscape-heavy frames get calmer crops. */
.photo-gallery-grid figure:nth-child(1) img{object-position:center 48%}
.photo-gallery-grid figure:nth-child(3) img{object-position:center 50%}
.photo-gallery-grid figure:nth-child(4) img{object-position:center 48%}
.photo-gallery-grid figure:nth-child(5) img{object-position:center 48%}
.photo-gallery-grid figure:nth-child(8) img{object-position:center 45%}

.photo-gallery-overlay__head strong{
  display:none!important;
}

@media(max-width:760px){
  /* On mobile do not crop the images into artificial portrait cards.
     The gallery becomes a natural vertical photographic sequence. */
  .photo-gallery-grid figure{
    aspect-ratio:auto;
    min-height:0;
    background:#050505;
  }
  .photo-gallery-grid img{
    width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
  }
}


/* ============================================================
   V3.0 — ADAPTIVE PERFORMANCE + PRIVACY/LEGAL COMPLETION
   ============================================================ */
.contact__note{max-width:540px;margin:8px 0 24px;color:var(--muted);line-height:1.55;font-size:clamp(13px,1vw,16px)}
.footer-privacy-button{border:0;background:none;color:inherit;font:inherit;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.footer-privacy-button:hover{color:var(--fg)}

/* Adaptive quality tiers: core design stays intact; expensive decoration scales down. */
html[data-perf="balanced"] .grain{opacity:.48}
html[data-perf="balanced"] .site-header.is-scrolled{backdrop-filter:blur(12px) saturate(115%)}
html[data-perf="balanced"] .cp-video__poster-gadget{animation-duration:10s!important}
html[data-perf="low"] .grain{display:none}
html[data-perf="low"] .cursor{display:none!important}
html[data-perf="low"] .site-header.is-scrolled,
html[data-perf="low"] .sound-invitation,
html[data-perf="low"] .mobile-menu,
html[data-perf="low"] .cp-video__center,
html[data-perf="low"] .video-lightbox__backdrop,
html[data-perf="low"] .photo-gallery-overlay__backdrop,
html[data-perf="low"] .privacy-modal__backdrop,
html[data-perf="low"] .privacy-settings__backdrop{backdrop-filter:none!important}
html[data-perf="low"] .hero__orb-ring,
html[data-perf="low"] .hero__orb-core,
html[data-perf="low"] .hero__breath span,
html[data-perf="low"] .presence__rings i,
html[data-perf="low"] .cp-video__poster-gadget,
html[data-perf="low"] .sound-toggle__bars i{animation:none!important}
html[data-perf="low"] .practice:before,
html[data-perf="low"] .about.about-experience:before{filter:none!important;opacity:.55}
html[data-reduced-motion="true"] *,
html[data-reduced-motion="true"] *::before,
html[data-reduced-motion="true"] *::after{scroll-behavior:auto!important}

/* Privacy consent / settings */
.privacy-modal[hidden],.privacy-settings[hidden]{display:none!important}
.privacy-modal,.privacy-settings{position:fixed;inset:0;z-index:2147483600;opacity:0;pointer-events:none;transition:opacity .22s ease}
.privacy-modal.is-visible,.privacy-settings.is-visible{opacity:1;pointer-events:auto}
.privacy-modal__backdrop,.privacy-settings__backdrop{position:absolute;inset:0;background:rgba(3,3,4,.90);backdrop-filter:blur(18px)}
.privacy-modal__panel,.privacy-settings__panel{position:absolute;left:50%;top:50%;width:min(92vw,650px);transform:translate(-50%,-48%);background:#0b0b0c;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 110px rgba(0,0,0,.62);padding:clamp(24px,4vw,42px);transition:transform .28s var(--ease)}
.privacy-modal.is-visible .privacy-modal__panel,.privacy-settings.is-visible .privacy-settings__panel{transform:translate(-50%,-50%)}
.privacy-modal__kicker,.privacy-settings__panel header span{font-size:8px;text-transform:uppercase;letter-spacing:.2em;color:var(--accent)}
.privacy-modal h2,.privacy-settings h2{margin:10px 0 18px;font-size:clamp(32px,4vw,52px);line-height:.95;letter-spacing:-.045em;font-weight:500}
.privacy-modal p,.privacy-settings p{color:var(--muted);line-height:1.62}
.privacy-modal__actions,.privacy-settings__actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.privacy-modal__actions button,.privacy-settings__actions button,.legal-action{border:1px solid rgba(255,255,255,.16);background:rgba(var(--accent-rgb),.055);color:var(--fg);padding:12px 16px;border-radius:999px;cursor:pointer;font-size:10px;letter-spacing:.08em}
.privacy-modal__actions button:hover,.privacy-settings__actions button:hover,.legal-action:hover{border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.10)}
.privacy-modal__actions .privacy-modal__secondary{background:transparent;color:var(--muted)}
.privacy-modal__fine{font-size:11px;margin:18px 0 0}.privacy-modal__fine a{text-decoration:underline;text-underline-offset:3px}
.privacy-settings__panel header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-bottom:1px solid var(--line);padding-bottom:16px}
.privacy-settings__panel header button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--fg);font-size:26px;cursor:pointer}
.privacy-setting{display:grid;grid-template-columns:1fr auto;gap:25px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.privacy-setting strong{font-size:14px}.privacy-setting p{margin:6px 0 0;font-size:12px}.privacy-setting>span{font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}
.privacy-setting input{width:42px;height:22px;accent-color:var(--accent)}
.privacy-settings__note{padding:18px 0}.privacy-settings__note strong{font-size:12px}.privacy-settings__note p{font-size:12px;margin:6px 0}
.privacy-settings__actions{align-items:center;justify-content:space-between}.privacy-settings__actions a{text-decoration:underline;text-underline-offset:4px;font-size:11px}
body.privacy-dialog-open{overflow:hidden}
@media(max-width:620px){.privacy-modal__actions,.privacy-settings__actions{flex-direction:column;align-items:stretch}.privacy-modal__actions button,.privacy-settings__actions button{text-align:center}.privacy-setting{grid-template-columns:1fr auto}.privacy-modal__panel,.privacy-settings__panel{max-height:88vh;overflow:auto}}

/* Legal pages */
.legal-table-wrap{overflow-x:auto;border:1px solid var(--line)}
.legal-table{width:100%;border-collapse:collapse;min-width:650px;font-size:12px}
.legal-table th,.legal-table td{padding:14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.legal-table th{color:var(--fg);font-weight:500}.legal-table td{color:var(--muted)}
.legal-footer nav{align-items:center}.legal-footer button{font-size:inherit}

/* Performance-friendly rendering hints for isolated media blocks. */
.archive-video-card,.photo-essay,.lab-card{contain:layout paint style}
.cp-video__poster-gadget,.presence__rings,.hero__resonance{will-change:transform}
@media(prefers-reduced-motion:reduce){.cp-video__poster-gadget,.presence__rings i,.hero__orb-core,.hero__orb-ring,.hero__breath span{animation:none!important}.lab-card{scroll-behavior:auto}}

/* V3 accessibility legibility pass for essential microcopy. */
.hero__meta,.section-index,.work-intro__meta,.case-study__index,.case-study__tags,.discipline__no,.discipline__name small,.about-step__meta,.lab__status,.lab-card header>span,.lab-signal__meta,.contact__footer,.photo-essay__hint{color:#aaa8a1!important}
.contact__footer a,.contact__footer button{color:#c5c2bb!important}


/* ============================================================
   V3.1 — LINK CONSISTENCY / CLICKABLE AMIGO'S PREVIEW
   ============================================================ */
.site-preview__fallback--link{
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
.site-preview__fallback--link::after{
  content:"↗";
  position:absolute;
  right:20px;
  top:20px;
  z-index:2;
  font-size:15px;
  color:rgba(36,26,23,.55);
  transform:translate3d(0,0,0);
  transition:transform .42s var(--ease),color .42s;
}
.site-preview__fallback--link:hover::after,
.site-preview__fallback--link:focus-visible::after{
  transform:translate3d(4px,-4px,0);
  color:rgba(36,26,23,.88);
}
.site-preview__fallback--link:focus-visible{
  outline:2px solid rgba(36,26,23,.65);
  outline-offset:-5px;
}


/* ============================================================
   V4.0 — MOBILE HERO / CURATED WORK / PERFORMANCE MANAGER 2.0
   ============================================================ */

/* Hero metadata: desktop keeps place left / discipline center / role right,
   while DOM order is mobile-first: discipline, place, role. */
.hero__meta-discipline{grid-column:2;text-align:center}
.hero__meta-place{grid-column:1;grid-row:1;text-align:left}
.hero__meta-independent{grid-column:3;grid-row:1;text-align:right}

/* Curated work hierarchy */
.work-intro--curated{margin-bottom:10vh}
.signature-work,.film-selection{position:relative;margin-top:8vh}
.signature-work__head,.film-selection__head{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.25fr);gap:clamp(35px,7vw,120px);align-items:end;margin-bottom:5vh
}
.signature-work__head h3,.film-selection__head h3{
  margin:12px 0 0;font-size:clamp(48px,6.6vw,112px);line-height:.84;letter-spacing:-.065em;font-weight:500
}
.signature-work__head h3 em,.film-selection__head h3 em{font-family:Georgia,"Times New Roman",serif;font-weight:400}
.film-selection__head>div>p{max-width:570px;margin:22px 0 0;color:var(--muted);line-height:1.65}

.signature-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px}
.signature-card{
  position:relative;display:flex;flex-direction:column;min-height:610px;padding:18px;border:1px solid rgba(255,255,255,.10);background:#090909;color:var(--fg);text-decoration:none;overflow:hidden;isolation:isolate;
  transform:translate3d(var(--work-x,0),var(--work-y,0),0);transition:transform .65s var(--ease),border-color .5s,background .5s
}
.signature-card:hover,.signature-card.is-active{border-color:rgba(var(--case-rgb),.34)}
.signature-card--heartvibe{grid-column:span 7}
.signature-card--loving{grid-column:span 5}
.signature-card--amigos{grid-column:span 8;min-height:490px}
.signature-card--ergo{grid-column:span 4;min-height:490px}
.signature-card__visual{position:relative;flex:1;min-height:320px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08);margin:-18px -18px 18px;padding:clamp(24px,4vw,64px)}
.signature-card__visual strong{position:relative;z-index:3;display:flex;flex-direction:column;font-size:clamp(52px,7vw,120px);line-height:.72;letter-spacing:-.075em;font-weight:640}
.signature-card__visual b{position:absolute;right:20px;bottom:14px;font-size:clamp(60px,10vw,170px);line-height:.7;letter-spacing:-.08em;color:rgba(255,255,255,.045)}
.signature-card__meta{display:flex;justify-content:space-between;gap:20px;font-size:8px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}
.signature-card__meta i{font-style:normal;color:var(--accent);font-size:16px;transition:transform .4s var(--ease)}
.signature-card:hover .signature-card__meta i{transform:translate(4px,-4px)}
.signature-card h4{margin:20px 0 13px;font-size:clamp(30px,3vw,48px);font-weight:500;letter-spacing:-.045em}
.signature-card p{max-width:680px;margin:0;color:var(--muted);line-height:1.65}
.signature-card__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.signature-card__tags span{border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:6px 9px;font-size:7px;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.52)}

.signature-card--heartvibe .signature-card__visual{background:radial-gradient(circle at 76% 35%,rgba(229,85,255,.18),transparent 28%),linear-gradient(135deg,#120819,#07070a 68%)}
.signature-card--heartvibe .signature-card__visual strong span:nth-child(2){padding-left:10%}.signature-card--heartvibe .signature-card__visual strong span:nth-child(3){padding-left:23%;color:#e8a8ff}
.hvc-signal{position:absolute;right:7%;top:11%;width:38%;aspect-ratio:1;border:1px solid rgba(232,129,255,.16);border-radius:50%;animation:hvcOrbit 14s linear infinite}
.hvc-signal i{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.08)}.hvc-signal i:nth-child(1){inset:18%}.hvc-signal i:nth-child(2){inset:36%}.hvc-signal i:nth-child(3){width:7px;height:7px;right:12%;top:22%;background:#e881ff;box-shadow:0 0 28px rgba(232,129,255,.8)}
@keyframes hvcOrbit{to{transform:rotate(360deg)}}

.signature-card--loving{color:#27231b}.signature-card--loving .signature-card__visual{background:radial-gradient(circle at 73% 34%,rgba(255,255,255,.7),transparent 24%),linear-gradient(145deg,#efe8d7,#bbc2a4 68%)}
.signature-card--loving .signature-card__visual strong{color:#2e3427;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;line-height:.80}.signature-card--loving .signature-card__visual strong span:nth-child(2){padding-left:12%}.signature-card--loving .signature-card__visual strong span:nth-child(3){padding-left:27%}.signature-card--loving .signature-card__meta,.signature-card--loving p{color:rgba(241,239,233,.58)}
.loving-orbit{position:absolute;right:8%;top:16%;width:210px;height:210px;border:1px solid rgba(55,65,47,.16);border-radius:50%;animation:lovingBreath 7s ease-in-out infinite}.loving-orbit i{position:absolute;border-radius:50%;border:1px solid rgba(55,65,47,.12)}.loving-orbit i:first-child{inset:22%}.loving-orbit i:last-child{inset:43%;background:rgba(55,65,47,.08)}
@keyframes lovingBreath{50%{transform:scale(1.08);opacity:.65}}

.signature-card--amigos .signature-card__visual{background:linear-gradient(135deg,#db705b 0 46%,#8ea88f 46% 100%)}
.signature-card--amigos .signature-card__visual strong{color:#241b18}.signature-card--amigos .signature-card__visual strong span:nth-child(2){padding-left:9%}.signature-card--amigos .signature-card__visual strong span:nth-child(3){padding-left:18%}
.amigos-motion{position:absolute;right:8%;top:20%;display:grid;grid-template-columns:repeat(2,76px);gap:10px;transform:rotate(8deg)}.amigos-motion i{aspect-ratio:1;border-radius:50%;background:#f2d674;animation:amigoFloat 5.2s ease-in-out infinite}.amigos-motion i:nth-child(2){background:#1e1d1a;animation-delay:-1.1s}.amigos-motion i:nth-child(3){background:#f4e8db;animation-delay:-2.2s}.amigos-motion i:nth-child(4){background:#97b79c;animation-delay:-3.3s}
@keyframes amigoFloat{50%{transform:translateY(-13px) scale(1.06)}}

.signature-card--ergo .signature-card__visual{background:linear-gradient(145deg,#ece9df 0 42%,#cbdad5 42% 70%,#9fbeb5 70%);color:#233a35}.signature-card--ergo .signature-card__visual strong{color:#233a35;font-size:clamp(56px,6vw,104px)}.ergo-line{position:absolute;right:10%;bottom:12%;display:flex;gap:8px;align-items:flex-end}.ergo-line i{width:3px;height:45px;background:#233a35;opacity:.24;animation:ergoPulse 1.8s ease-in-out infinite alternate}.ergo-line i:nth-child(2){height:74px;animation-delay:-.6s}.ergo-line i:nth-child(3){height:30px;animation-delay:-1.2s}@keyframes ergoPulse{to{transform:scaleY(.45);opacity:.1}}

.film-selection{margin-top:15vh;padding-top:28px;border-top:1px solid var(--line)}
.film-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.film-feature{border:1px solid rgba(255,255,255,.1);background:#090909;padding:12px;transform:translate3d(var(--work-x,0),var(--work-y,0),0);transition:border-color .5s,transform .65s var(--ease)}
.film-feature.is-active{border-color:rgba(var(--case-rgb),.34)}
.film-feature__media{height:clamp(390px,42vw,620px);position:relative;overflow:hidden}
.film-feature__media>.cp-video{position:absolute;inset:0}
.film-feature__copy{padding:24px 8px 10px}.film-feature__copy>span{font-size:8px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted)}.film-feature__copy h4{margin:15px 0 18px;font-size:clamp(38px,4.3vw,72px);line-height:.88;letter-spacing:-.055em;font-weight:500}.film-feature__copy h4 em{font-family:Georgia,"Times New Roman",serif;font-weight:400}.film-feature__copy p{max-width:590px;margin:0;color:var(--muted);line-height:1.62}.film-feature__copy>div{display:flex;gap:7px;flex-wrap:wrap;margin-top:20px}.film-feature__copy>div span{font-size:7px;text-transform:uppercase;letter-spacing:.14em;border:1px solid var(--line);border-radius:999px;padding:6px 9px;color:rgba(255,255,255,.48)}

.film-archive-drawer{margin-top:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.film-archive-drawer summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto 34px;gap:20px;align-items:center;padding:24px 0}.film-archive-drawer summary::-webkit-details-marker{display:none}.film-archive-drawer summary span{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:clamp(24px,2.4vw,40px)}.film-archive-drawer summary strong{font-size:8px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-weight:500}.film-archive-drawer summary i{font-size:24px;font-style:normal;text-align:right;transition:transform .35s var(--ease)}.film-archive-drawer[open] summary i{transform:rotate(45deg)}
.film-archive-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 0 18px}
.film-archive-card{border:1px solid rgba(255,255,255,.08);background:#080808;overflow:hidden}.film-archive-card__media{height:360px;position:relative}.film-archive-card__media>.cp-video{position:absolute;inset:0}.film-archive-card__copy{padding:18px}.film-archive-card__copy>span{font-size:7px;text-transform:uppercase;letter-spacing:.17em;color:var(--muted)}.film-archive-card__copy h4{font-size:24px;margin:10px 0 9px;font-weight:500}.film-archive-card__copy p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}

/* Mobile hero metadata: exactly two clean lines. */
@media(max-width:900px){
  .hero__meta{display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;width:100%;padding:0!important;text-align:center!important}
  .hero__meta-discipline,.hero__meta-place{display:block!important;grid-column:auto!important;grid-row:auto!important;text-align:center!important;white-space:nowrap}
  .hero__meta-discipline{order:1;font-size:8px;letter-spacing:.14em}
  .hero__meta-place{order:2;font-size:8px;letter-spacing:.18em}
  .hero__meta-independent{display:none!important}
  .signature-work__head,.film-selection__head{grid-template-columns:1fr;gap:24px}
  .signature-grid{grid-template-columns:1fr 1fr}
  .signature-card--heartvibe,.signature-card--loving,.signature-card--amigos,.signature-card--ergo{grid-column:auto;min-height:520px}
  .signature-card--heartvibe,.signature-card--amigos{grid-column:1/-1}
  .film-feature-grid{grid-template-columns:1fr}
  .film-archive-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .hero__meta{top:auto}
  .hero__meta-discipline{font-size:7.5px;letter-spacing:.12em}
  .hero__meta-place{font-size:7.5px}
  .signature-grid{display:block}
  .signature-card{min-height:480px;margin-bottom:9px;padding:14px}
  .signature-card__visual{min-height:285px;margin:-14px -14px 16px;padding:24px}
  .signature-card--heartvibe .signature-card__visual strong,.signature-card--amigos .signature-card__visual strong{font-size:15vw}
  .signature-card--loving .signature-card__visual strong{font-size:14vw}
  .signature-card--ergo .signature-card__visual strong{font-size:15vw}
  .hvc-signal{width:55%;right:-5%}.loving-orbit{width:150px;height:150px;right:4%}.amigos-motion{grid-template-columns:repeat(2,55px);right:2%;top:16%}
  .film-feature__media{height:58vh;min-height:430px}
  .film-archive-card__media{height:52vh;min-height:390px}
  .film-archive-drawer summary{grid-template-columns:1fr auto;gap:12px}.film-archive-drawer summary strong{display:none}.film-archive-drawer summary i{grid-column:2;grid-row:1}
}

/* Performance Manager 2.0 — WebKit/mobile-friendly progressive reduction. */
html[data-device="mobile"][data-perf="balanced"] .grain{opacity:.28}
html[data-device="mobile"][data-perf="balanced"] .hero:before,
html[data-device="mobile"][data-perf="balanced"] .practice:before,
html[data-device="mobile"][data-perf="balanced"] .about.about-experience:before{filter:blur(2px)!important}
html[data-device="mobile"][data-perf="balanced"] .site-header.is-scrolled,
html[data-device="mobile"][data-perf="balanced"] .mobile-menu,
html[data-device="mobile"][data-perf="balanced"] .sound-invitation{backdrop-filter:blur(8px) saturate(108%)!important}
html[data-device="mobile"][data-perf="balanced"] .hero__breath span{box-shadow:0 0 0 10vw rgba(var(--accent-rgb),.006)!important}
html[data-device="mobile"][data-perf="balanced"] .signature-card__visual{contain:paint}
html[data-audio-mode="serial"] .sound-toggle__bars i{animation-duration:1.1s!important}
html[data-perf="low"] .signature-card__visual::before,
html[data-perf="low"] .hvc-signal,
html[data-perf="low"] .loving-orbit,
html[data-perf="low"] .amigos-motion i,
html[data-perf="low"] .ergo-line i{animation:none!important}
html[data-perf="low"] .signature-card{transform:none!important}

/* Touch devices should not hint at hover-only behavior. */
@media(hover:none){.signature-card{transform:none!important}.signature-card__meta i{transform:none!important}}


/* ============================================================
   V4.1 — CINEMATIC CHAPTER HOLDS + VIEWPORT-DOMINANT SOUND
   Desktop only. Mobile remains direct and scroll-efficient.
   ============================================================ */

@media(min-width:901px){
  html[data-chapter-hold="true"] .statement{
    min-height:158svh;
  }

  html[data-chapter-hold="true"] .statement__body{
    position:sticky;
    top:16vh;
    min-height:68vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  /* Selected Work intro lingers for a short editorial beat.
     Signature work then rises above it and takes over naturally. */
  html[data-chapter-hold="true"] .work-intro--curated{
    position:sticky;
    top:72px;
    min-height:calc(94svh - 72px);
    align-content:center;
    padding-top:8vh;
    padding-bottom:9vh;
    z-index:1;
    background:
      linear-gradient(180deg,var(--bg) 0 86%,rgba(8,8,8,.96) 92%,rgba(8,8,8,0));
  }

  html[data-chapter-hold="true"] .signature-work{
    z-index:3;
    padding-top:12vh;
    background:
      linear-gradient(180deg,var(--bg) 0 96%,rgba(8,8,8,.98));
  }

  /* Practice: hold the thesis, then let the disciplines move over it. */
  html[data-chapter-hold="true"] .practice__intro{
    position:sticky;
    top:72px;
    min-height:calc(90svh - 72px);
    margin-bottom:0;
    align-content:center;
    z-index:1;
    background:
      linear-gradient(180deg,var(--bg) 0 88%,rgba(8,8,8,0));
  }

  html[data-chapter-hold="true"] .practice__stage{
    position:relative;
    z-index:3;
    padding-top:9vh;
    background:var(--bg);
  }

  /* About already has its own sticky presence stage; no additional hold needed. */

  /* LAB: question stays with the visitor before experiments take over. */
  html[data-chapter-hold="true"] .lab__title-wrap{
    position:sticky;
    top:72px;
    min-height:calc(90svh - 72px);
    display:grid;
    align-content:center;
    z-index:1;
    background:
      linear-gradient(180deg,var(--bg) 0 88%,rgba(8,8,8,0));
  }

  html[data-chapter-hold="true"] .lab-live{
    position:relative;
    z-index:3;
    background:var(--bg);
  }
}

/* On low-power or reduced-motion profiles, never force visual holds. */
html[data-chapter-hold="false"] .statement__body,
html[data-chapter-hold="false"] .work-intro--curated,
html[data-chapter-hold="false"] .practice__intro,
html[data-chapter-hold="false"] .lab__title-wrap{
  position:relative;
  top:auto;
}

/* The music decision is exposed as a tiny diagnostic state for testing only. */
html{
  --chapter-coverage:1;
}


/* ============================================================
   V4.2 — REAL MOBILE SAFARI / WORK CHAPTER HARDENING
   ============================================================ */
@media(max-width:900px){
  .work-experience{
    overflow:visible!important;
    padding-top:11svh;
    background:
      radial-gradient(110vw 90vw at 90% 12%,rgba(var(--case-rgb),.025),transparent 64%),
      var(--bg);
  }

  .work-experience:before{opacity:.35}

  .work-intro--curated{
    position:relative!important;
    top:auto!important;
    min-height:0!important;
    margin-bottom:8svh;
    padding-top:0!important;
    padding-bottom:5svh!important;
    background:none!important;
    z-index:auto!important;
  }

  .work-intro{
    grid-template-columns:1fr!important;
    gap:34px;
  }

  .work-intro__title{
    font-size:clamp(52px,14.2vw,92px);
    line-height:.88;
  }

  .work-intro__right>p{
    margin-bottom:26px;
    font-size:15px;
  }

  .signature-work,
  .film-selection{
    position:relative!important;
    z-index:auto!important;
    margin-top:7svh;
  }

  .signature-work{
    padding-top:0!important;
    background:none!important;
  }

  .signature-work__head,
  .film-selection__head{
    margin-bottom:4svh;
  }

  .signature-work__head h3,
  .film-selection__head h3{
    font-size:clamp(42px,12.2vw,76px);
    line-height:.88;
  }

  .signature-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .signature-card,
  .signature-card--heartvibe,
  .signature-card--loving,
  .signature-card--amigos,
  .signature-card--ergo{
    grid-column:1!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    transform:none!important;
    contain:none!important;
  }

  .signature-card__visual{
    flex:none!important;
    min-height:250px!important;
    height:min(43svh,350px)!important;
    contain:none!important;
  }

  .signature-card h4{font-size:clamp(30px,9vw,42px)}
  .signature-card p{font-size:14px;line-height:1.58}

  .film-selection{margin-top:11svh}

  .film-feature-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px;
  }

  .film-feature{
    width:100%!important;
    min-width:0!important;
    transform:none!important;
    contain:none!important;
  }

  .film-feature__media{
    height:min(55svh,490px)!important;
    min-height:340px!important;
  }

  .film-feature__copy h4{
    font-size:clamp(38px,11vw,58px);
  }

  .film-archive-drawer{
    display:block!important;
    position:relative!important;
    z-index:auto!important;
    margin-top:24px;
  }

  .film-archive-drawer summary{
    min-height:88px;
    grid-template-columns:1fr 32px!important;
    grid-template-rows:auto auto!important;
    gap:8px 14px!important;
    align-content:center;
  }

  .film-archive-drawer summary span{
    grid-column:1!important;
    grid-row:1!important;
    font-size:clamp(24px,7vw,32px);
  }

  .film-archive-drawer summary strong{
    display:block!important;
    grid-column:1!important;
    grid-row:2!important;
    text-align:left!important;
    font-size:7px!important;
  }

  .film-archive-drawer summary i{
    grid-column:2!important;
    grid-row:1 / 3!important;
    align-self:center;
  }

  .film-archive-grid{
    grid-template-columns:1fr!important;
    gap:10px;
  }

  .film-archive-card{
    width:100%!important;
    min-width:0!important;
    contain:none!important;
  }

  .film-archive-card__media{
    height:min(49svh,430px)!important;
    min-height:310px!important;
  }
}

html[data-ios="true"] .work-experience,
html[data-ios="true"] .signature-work,
html[data-ios="true"] .film-selection,
html[data-ios="true"] .signature-card,
html[data-ios="true"] .signature-card__visual,
html[data-ios="true"] .film-feature,
html[data-ios="true"] .film-archive-card{
  contain:none!important;
  isolation:auto!important;
  will-change:auto!important;
}

html[data-ios="true"] .signature-card,
html[data-ios="true"] .film-feature{
  -webkit-transform:none!important;
  transform:none!important;
}

@media(max-width:560px){
  .cp-video__controls{
    min-height:54px!important;
    padding:0 10px!important;
    gap:7px!important;
  }

  .cp-video__controls button{
    min-height:38px;
    padding:7px 2px;
  }

  .cp-video__volume{
    width:62px!important;
    min-width:52px!important;
  }

  .film-feature__media{
    height:min(51svh,445px)!important;
    min-height:330px!important;
  }

  .film-archive-card__media{
    height:min(45svh,385px)!important;
    min-height:300px!important;
  }
}

/* Large displays remain curated instead of simply stretching everything. */
html[data-viewport="large"] .signature-card__visual{
  max-height:760px;
}

html[data-ultrawide="true"] .work-intro,
html[data-ultrawide="true"] .signature-work,
html[data-ultrawide="true"] .film-selection{
  max-width:2400px;
  margin-left:auto;
  margin-right:auto;
}


/* ============================================================
   V4.3 — LAYERED CHAPTER REVEAL (LCR) USAGE CORRECTION
   LCR is intentionally NOT used inside dense Selected Work content.
   ============================================================ */

@media(min-width:901px){
  html[data-chapter-hold="true"] .work-intro--curated{
    position:relative!important;
    top:auto!important;
    min-height:0!important;
    align-content:initial!important;
    margin-bottom:7vh!important;
    padding-top:0!important;
    padding-bottom:4vh!important;
    z-index:auto!important;
    background:none!important;
  }

  html[data-chapter-hold="true"] .signature-work{
    position:relative!important;
    z-index:auto!important;
    padding-top:0!important;
    background:none!important;
  }

  /* The photo essay / work outro must never visually pass underneath
     the Selected Work introduction. */
  .work-archive,
  .photo-essay,
  .work-outro{
    position:relative;
    z-index:2;
    background:var(--bg);
  }
}

/* Named-effect diagnostic hooks. These do not add visuals by themselves;
   they let us address effects consistently in future project work. */
[data-effect="layered-chapter-reveal"]{
  --cp-effect-name:"Layered Chapter Reveal";
}
[data-effect="editorial-normal-flow"]{
  --cp-effect-name:"Editorial Normal Flow";
}


/* V4.4.1 — Legal pages remain inside the homepage experience. */
.legal-overlay[hidden]{display:none!important}
.legal-overlay{
  position:fixed;inset:0;z-index:2147483400;
  opacity:0;pointer-events:none;transition:opacity .28s ease;
}
.legal-overlay.is-visible{opacity:1;pointer-events:auto}
.legal-overlay__backdrop{
  position:absolute;inset:0;
  background:rgba(3,3,4,.90);
  backdrop-filter:blur(18px);
}
.legal-overlay__panel{
  position:absolute;left:50%;top:50%;
  width:min(1180px,90vw);height:min(88vh,940px);
  transform:translate(-50%,-50%) scale(.985);
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#080808;box-shadow:0 38px 140px rgba(0,0,0,.72);
  transition:transform .32s var(--ease);
}
.legal-overlay.is-visible .legal-overlay__panel{
  transform:translate(-50%,-50%) scale(1);
}
.legal-overlay__bar{
  flex:0 0 auto;min-height:68px;padding:12px 16px 12px 22px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(8,8,8,.97);
}
.legal-overlay__bar>div{display:flex;flex-direction:column;gap:4px}
.legal-overlay__bar span{font-size:7px;letter-spacing:.20em;color:rgba(255,255,255,.38)}
.legal-overlay__bar strong{font-size:15px;font-weight:500;color:#f1efe9}
.legal-overlay__close{
  width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:rgba(15,15,15,.72);color:#fff;font-size:27px;cursor:pointer;
}
.legal-overlay__close:hover,
.legal-overlay__close:focus-visible{
  border-color:rgba(216,255,200,.65);transform:rotate(8deg);
}
.legal-overlay__frame-wrap{flex:1;min-height:0;background:#080808}
.legal-overlay__frame{width:100%;height:100%;display:block;border:0;background:#080808}
body.legal-overlay-open{overflow:hidden}

@media(max-width:760px){
  .legal-overlay__backdrop{background:#080808;backdrop-filter:none}
  .legal-overlay__panel{
    left:0;top:0;width:100%;height:100dvh;
    transform:none!important;border:0;box-shadow:none;
  }
  .legal-overlay__bar{
    min-height:64px;
    padding:max(10px,env(safe-area-inset-top)) 14px 10px;
  }
}
@media(prefers-reduced-motion:reduce){
  .legal-overlay,.legal-overlay__panel{transition:none!important}
}