:root{--paper:#faf9f5;--ink:#111;--muted:#66625c;--line:#ddd8d0;--hero:#e8dccf;--white:#fff;--ui-edge:72px;--ui-edge-mobile:22px}
*{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:"Clan Pro","ClanPro","Helvetica Neue",Arial,sans-serif} body{overflow:hidden}
a{color:inherit;text-decoration:none;cursor:pointer} button{font:inherit}
.app{height:100vh;width:100vw;overflow:hidden;position:relative}
.header{position:fixed;left:0;right:0;top:0;z-index:90;display:flex;justify-content:space-between;align-items:center;padding:32px 160px 0 110px;pointer-events:none;transition:color .7s ease}
.header .homebrand{pointer-events:auto;line-height:1;white-space:nowrap;transform-origin:left top;text-shadow:0 1px 2px rgba(0,0,0,.35),0 4px 18px rgba(0,0,0,.16);cursor:pointer}
.header.compact .homebrand{font-size:18px;transform:scaleX(1.075);text-shadow:none}
.burger{pointer-events:auto;width:42px;height:27px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer}
.burger i{display:block;height:2px;background:currentColor} .burger i:nth-child(2){width:74%;margin-left:auto}
.view{display:none;position:absolute;inset:0;overflow:hidden} .view.active{display:block}
/* landing */
#landing{background:#111}
.heroWrap{position:absolute;inset:0;overflow:hidden}
.heroSlide{position:absolute;inset:-2.8%;background-size:cover;background-position:center center;opacity:0;transform:scale(1);transition:opacity 1.2s ease,transform 5.6s cubic-bezier(.22,.61,.36,1);will-change:transform,opacity}
.heroSlide::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.14));}
.heroSlide.active{opacity:1;transform:scale(1.055)}
.heroHint{position:absolute;left:42px;bottom:36px;color:rgba(255,255,255,.68);z-index:3;font-size:10px;letter-spacing:.11em;text-transform:uppercase}
/* menu */
#menu{background:#101010;color:#fff}
.menuStack{position:absolute;inset:0 0 64px 0;display:flex;flex-direction:column;padding-top:94px}
.menuRow{position:relative;flex:1;cursor:pointer;overflow:hidden}
.menuRow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.62);transform:scale(1.015);transition:transform .7s ease, filter .4s ease}
.menuRow::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(0,0,0,.42), rgba(0,0,0,.10) 55%, rgba(0,0,0,.22));}
.menuRow:hover img{transform:scale(1.03);filter:brightness(.7)}
.menuLabel{position:absolute;z-index:3;left:110px;top:50%;transform:translateY(-50%)}
.menuLabel strong,.menuCount{font-size:clamp(30px,4.2vw,68px);font-weight:400;letter-spacing:-.045em;line-height:.95}
.menuLabel small{display:block;margin-top:8px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;opacity:.82}
.menuCount{position:absolute;z-index:3;right:160px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.03em;color:#fff;opacity:.88;text-shadow:0 2px 18px rgba(0,0,0,.22)}
.ododigit{width:.62em;height:.95em;overflow:hidden;display:inline-block} .odotrack{display:block;transform:translateY(0);will-change:transform} .odotrack span{height:.95em;display:flex;align-items:center;justify-content:center} .rolling .odotrack{transition:transform 1.2s cubic-bezier(.18,.78,.18,1)}
.menuFoot{position:absolute;left:0;right:0;bottom:0;height:64px;padding:0 30px;display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.65);background:#111}
/* overview pages */
.sectionScroll{height:100%;overflow:auto;-webkit-overflow-scrolling:touch;background:var(--paper)}
.sectionInner{padding:118px 110px 76px 110px}
.sectionIntro{display:grid;grid-template-columns:8fr 4fr;gap:6vw;align-items:end;margin-bottom:8vh}
.sectionIntro h1{font-size:clamp(74px,10vw,158px);font-weight:400;letter-spacing:-.062em;line-height:.82;margin:0}
.sectionIntro p{margin:0 0 8px;max-width:450px;font-size:14px;line-height:1.55;color:#555}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:292px;gap:26px}
.workitem{cursor:pointer;display:flex;flex-direction:column}
.workitem .thumb{height:100%;overflow:hidden;background:#ece8e1;box-shadow:0 13px 34px rgba(0,0,0,.08),0 2px 5px rgba(0,0,0,.05)}
.workitem .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .52s cubic-bezier(.22,.61,.36,1), filter .32s ease}
.workitem:hover .thumb img{transform:scale(1.038);filter:brightness(1.075)}
.workitem .meta{display:flex;justify-content:space-between;gap:18px;margin-top:11px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#555}
.workitem .meta strong{font-weight:400;color:#111}
.span-3{grid-column:span 3} .span-4{grid-column:span 4} .span-5{grid-column:span 5} .span-6{grid-column:span 6} .span-7{grid-column:span 7} .span-8{grid-column:span 8} .span-12{grid-column:span 12}
.workEnd{margin-top:12vh;padding-top:28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#777}
/* gallery */
.galleryWrap{height:100vh;position:relative;background:var(--paper)}
.galleryMeta{position:fixed;left:110px;top:98px;z-index:50;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:#474744}
.galleryCount{position:fixed;right:160px;top:98px;z-index:50;font-size:12px;letter-spacing:.11em;color:#111}
.galleryRail{height:100vh;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding-top:72px;cursor:none}
.galleryRail::-webkit-scrollbar{display:none}
.frame,.projectEnd{flex:0 0 100vw;height:calc(100vh - 72px);scroll-snap-align:start;display:flex;align-items:center;justify-content:center;padding:46px .45vw 60px;overflow:hidden}
.frame img.print{width:auto;height:auto;max-width:none;max-height:calc(100vh - 232px);max-height:calc(100dvh - 232px);object-fit:contain;box-shadow:0 17px 38px rgba(0,0,0,.12), 0 6px 14px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.08);background:#fff;display:block}
.frame img.print.landscape{width:min(99.1vw, calc((100vh - 232px) * var(--imgAspect, 1.5)));width:min(99.1vw, calc((100dvh - 232px) * var(--imgAspect, 1.5)))}
.frame img.print.portrait{max-width:min(72vw, calc((100vh - 232px) * var(--imgAspect, .75)));max-width:min(72vw, calc((100dvh - 232px) * var(--imgAspect, .75)))}
.projectEnd{align-items:flex-end;padding:10vh 9vw;background:var(--paper)}
.projectEnd h2{font-size:clamp(44px,6vw,92px);line-height:.92;letter-spacing:-.06em;margin:0 0 14px;font-weight:400}
.projectEnd p{max-width:640px;font-size:15px;line-height:1.6;color:#4d4b47;margin:0 0 24px}
.projectLinks{display:flex;gap:24px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#555}
.navBtn{position:fixed;top:50%;z-index:55;transform:translateY(-20%);border:0;background:transparent;color:#111;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.navBtn.next{right:48px} .navBtn.prev{left:36px}
.arr{width:34px;height:1px;background:#111;position:relative;animation:nudgeR 1.8s ease-in-out infinite} .arr::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:1px solid #111;border-right:1px solid #111;transform:rotate(45deg)} .arr.left{animation-name:nudgeL} .arr.left::after{right:auto;left:0;border-right:0;border-left:1px solid #111;transform:rotate(-45deg)} @keyframes nudgeR{0%,100%{transform:translateX(-2px)}50%{transform:translateX(4px)}} @keyframes nudgeL{0%,100%{transform:translateX(2px)}50%{transform:translateX(-4px)}}
.cursorHint{position:fixed;z-index:70;left:0;top:0;transform:translate(-50%,-50%);pointer-events:none;display:none;align-items:center;gap:10px;color:#111;font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.78} .cursorHint.visible{display:flex} .cursorHint .line{width:34px;height:1px;background:#111;position:relative} .cursorHint.next .line::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:1px solid #111;border-right:1px solid #111;transform:rotate(45deg)} .cursorHint.prev .line::after{content:"";position:absolute;left:0;top:-4px;width:8px;height:8px;border-top:1px solid #111;border-left:1px solid #111;transform:rotate(-45deg)}

/* photographic gallery overview */
.galleryOverviewBtn{
  position:fixed;
  right:231px;
  top:89px;
  z-index:86;
  width:28px;
  height:28px;
  padding:2px;
  border:0;
  background:transparent;
  color:#111;
  cursor:pointer;
  opacity:.68;
  transition:opacity .2s ease;
}
.galleryOverviewBtn:hover{opacity:1}
.overviewIcon{
  width:21px;
  height:21px;
  display:grid;
  grid-template-columns:repeat(3,4px);
  grid-template-rows:repeat(3,4px);
  gap:3px;
  align-content:center;
  justify-content:center;
  transition:opacity .15s ease;
}
.overviewIcon i{display:block;width:4px;height:4px;background:currentColor}
.galleryOverviewBtn::before,.galleryOverviewBtn::after{
  content:"";
  position:absolute;
  left:5px;
  top:13px;
  width:18px;
  height:1px;
  background:currentColor;
  opacity:0;
  transition:opacity .15s ease;
}
.galleryOverviewBtn.is-open .overviewIcon{opacity:0}
.galleryOverviewBtn.is-open::before{opacity:1;transform:rotate(45deg)}
.galleryOverviewBtn.is-open::after{opacity:1;transform:rotate(-45deg)}

.galleryOverview{
  position:fixed;
  inset:72px 0 0;
  z-index:80;
  background:var(--paper);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .24s ease, visibility 0s linear .24s;
}
.galleryOverview.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .24s ease;
}
.galleryOverviewHead{
  position:sticky;
  top:0;
  z-index:2;
  height:64px;
  padding:24px 120px 12px 30px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  background:linear-gradient(to bottom,var(--paper) 76%,rgba(250,249,245,0));
  font-size:10px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#5d5953;
}
.galleryOverviewGrid{
  height:calc(100vh - 136px);
  overflow-y:auto;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  grid-auto-rows:190px;
  gap:30px 24px;
  padding:14px 30px 60px;
  scrollbar-width:none;
}
.galleryOverviewGrid::-webkit-scrollbar{display:none}
.galleryOverviewItem{
  position:relative;
  border:0;
  padding:0 0 20px;
  margin:0;
  background:transparent;
  color:#111;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.galleryOverviewItem img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  box-shadow:0 8px 20px rgba(0,0,0,.09),0 2px 5px rgba(0,0,0,.05);
  transition:transform .22s ease, opacity .22s ease;
}
.galleryOverviewItem:hover img{transform:scale(1.018)}
.galleryOverviewItem span{
  position:absolute;
  left:0;
  bottom:0;
  font-size:9px;
  line-height:1;
  letter-spacing:.11em;
  color:#77716a;
}
.galleryOverviewItem.current span{color:#111}
.galleryOverviewItem.current::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:9px;
  height:1px;
  background:#d32027;
  opacity:1;
}
.galleryWrap.overview-open .navBtn{opacity:0;pointer-events:none}
.galleryWrap.overview-open .cursorHint{display:none!important}

@media (max-width:1100px){
  .galleryOverviewGrid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:170px}
}
@media (max-width:780px){.burger{width:31px;height:21px}.burger i{height:1.5px}
  .galleryOverviewBtn{right:68px;top:72px}
  .galleryOverview{inset:64px 0 0}
  .galleryOverviewHead{padding:20px 18px 10px;height:58px}
  .galleryOverviewGrid{
    height:calc(100vh - 122px);
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:150px;
    gap:24px 14px;
    padding:10px 18px 44px;
  }
}

/* film project */
.filmProject{height:100%;overflow:auto;background:var(--paper)}
.filmHero{padding:122px 30px 26px;display:flex;justify-content:center}
.filmPoster{width:min(74vw, 1180px);margin:0 auto;background:#ece8e1;box-shadow:0 14px 34px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.05);position:relative;overflow:hidden}
.filmPoster img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.filmPoster iframe{width:100%;aspect-ratio:16/9;display:block;border:0;background:#000}
.filmPoster.is-playing{background:#000}
.filmPoster.is-playing .playBadge,.filmPoster.is-playing>img{display:none}
.filmPoster[role="button"]{cursor:pointer}
.filmPoster:focus-visible{outline:1px solid #111;outline-offset:5px}
.playBadge{position:absolute;left:22px;bottom:22px;display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:999px;background:rgba(17,17,17,.56);color:#fff;font-size:10px;letter-spacing:.12em;text-transform:uppercase;backdrop-filter:blur(8px)}
.playBadge i{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid #fff}
.filmBody{display:grid;grid-template-columns:7fr 5fr;gap:4vw;padding:0 30px 42px}
.filmBody h2{font-size:clamp(46px,6vw,96px);line-height:.92;letter-spacing:-.06em;margin:0 0 16px;font-weight:400}
.filmBody p{font-size:15px;line-height:1.6;color:#4d4b47;max-width:650px}
.factCol{font-size:12px;line-height:1.65;color:#5b5751;padding-top:14px}
.factCol b{color:#111;font-weight:500}
.filmStrip{padding:0 30px 70px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.filmStrip.empty{display:none}
.filmStill{background:#ece8e1;box-shadow:0 11px 28px rgba(0,0,0,.07),0 2px 5px rgba(0,0,0,.04)}
.filmStill img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:16/10}
.filmStill-link{position:relative;padding:0;border:0;overflow:hidden;cursor:pointer;text-align:left;color:#fff}
.filmStill-link img{transition:transform .52s cubic-bezier(.22,.61,.36,1),filter .32s ease}
.filmStill-link::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.34),rgba(0,0,0,0) 48%);opacity:.7;transition:opacity .3s ease}
.filmStill-link span{position:absolute;left:16px;bottom:14px;z-index:2;font-size:9px;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.filmStill-link:hover img{transform:scale(1.035);filter:brightness(1.07)}
.filmStill-link:hover::after{opacity:.9}
.filmStill-link:focus-visible{outline:1px solid #111;outline-offset:4px}
/* about & contact */
.textPage{height:100%;overflow:auto;background:var(--paper)}
.aboutTop{padding:118px 110px 48px;display:grid;grid-template-columns:7fr 5fr;gap:5vw;align-items:start}
.aboutTop h1{font-size:clamp(56px,7vw,114px);font-weight:400;letter-spacing:-.06em;line-height:.9;margin:0}
.aboutTop h1 em{font-style:normal;color:#77736b}
.aboutTop p{font-size:17px;line-height:1.65;max-width:720px;color:#4b4944}
.aboutGrid{padding:0 110px 80px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.infoBlock{grid-column:span 4;padding-top:18px;border-top:1px solid var(--line)} .infoBlock h3{margin:0 0 12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500} .infoBlock p,.infoBlock li{font-size:14px;line-height:1.65;color:#534f49} .infoBlock ul{list-style:none;padding:0;margin:0}
.contactPage{height:100%;overflow:auto;background:var(--paper)}
.contactHero{padding:118px 110px 28px} .contactHero h1{margin:0;font-size:clamp(62px,8vw,132px);font-weight:400;letter-spacing:-.065em;line-height:.88} .contactHero h1 span{color:#7a756e}
.contactGrid{padding:0 110px 70px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .contactBox{padding-top:18px;border-top:1px solid var(--line)} .contactBox .label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#777;margin-bottom:14px} .contactBox p,.contactBox a{font-size:18px;line-height:1.7;color:#111}
.legal{padding:0 30px 38px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#777}
.devnav{position:fixed;left:16px;bottom:14px;z-index:100;background:rgba(30,30,30,.78);color:#fff;border-radius:999px;padding:6px 10px;font-size:10px;letter-spacing:.06em}
@media (max-width:980px){.grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:220px} .span-12,.span-8,.span-7,.span-6{grid-column:span 6} .span-5,.span-4,.span-3{grid-column:span 3} .aboutTop,.filmBody{grid-template-columns:1fr} .aboutGrid{grid-template-columns:repeat(6,minmax(0,1fr))} .infoBlock{grid-column:span 3} .contactGrid{grid-template-columns:1fr 1fr} .filmStrip{grid-template-columns:1fr 1fr}}
@media (max-width:780px){.header{padding:24px var(--ui-edge-mobile) 0 20px} .header .homebrand{max-width:82vw}
.header .homebrand-two .brand-name{font-size:34px}
.header .homebrand-two .brand-services{font-size:17px}
.header.compact .homebrand-two .brand-name{font-size:17px}
.header.compact .homebrand-two .brand-services{font-size:10px} .header.compact .homebrand{font-size:14px} .menuLabel{left:20px} .menuCount{right:var(--ui-edge-mobile);font-size:clamp(26px,10vw,52px)} .sectionInner{padding:105px 18px 60px} .sectionIntro{grid-template-columns:1fr;gap:35px;margin-bottom:55px} .grid{grid-template-columns:1fr;grid-auto-rows:auto;row-gap:44px} .span-12,.span-8,.span-7,.span-6,.span-5,.span-4,.span-3{grid-column:auto} .workitem .thumb{height:auto;aspect-ratio:4/3} .galleryMeta{left:18px;top:82px} .galleryCount{right:var(--ui-edge-mobile);top:82px} .navBtn.next{right:18px} .navBtn.prev{left:18px} .cursorHint{display:none!important} .frame,.projectEnd{padding:32px 6px 32px} .frame img.print{max-width:none;max-height:calc(100vh - 174px)} .frame img.print.landscape{width:min(99vw, calc((100vh - 174px) * var(--imgAspect, 1.5)))} .frame img.print.portrait{max-width:min(86vw, calc((100vh - 174px) * var(--imgAspect, .75)))} .filmHero{padding:105px 18px 22px} .filmPoster{width:min(100%, 860px)} .filmBody,.filmStrip,.aboutTop,.aboutGrid,.contactGrid{padding-left:18px;padding-right:18px} .aboutTop{padding-top:104px} .aboutGrid{grid-template-columns:1fr} .infoBlock{grid-column:auto} .contactGrid{grid-template-columns:1fr} .legal{padding:0 18px 28px} .filmStrip{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .heroSlide{transition:opacity .35s ease;transform:none!important}
}


/* --- two-line brand lockup: corrected desktop rules --- */
.header .homebrand.homebrand-two{
  pointer-events:auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:7px;
  line-height:1;
  white-space:nowrap;
  transform:none;
  transform-origin:left top;
  cursor:pointer;
}

.header .homebrand.homebrand-two .brand-name{
  display:block;
  font-size:52px;
  line-height:.86;
  font-weight:700;
  letter-spacing:-.025em;
  transform:scaleX(1.055);
  transform-origin:left top;
  text-shadow:0 1px 2px rgba(0,0,0,.35),0 4px 18px rgba(0,0,0,.16);
}

.header .homebrand.homebrand-two .brand-services{
  display:block;
  font-size:26px;
  line-height:1;
  font-weight:400;
  letter-spacing:-.006em;
  transform:scaleX(1.075);
  transform-origin:left top;
  text-shadow:0 1px 2px rgba(0,0,0,.35),0 4px 18px rgba(0,0,0,.16);
}

/* compact header on project/overview pages */
.header.compact .homebrand.homebrand-two{
  gap:3px;
}
.header.compact .homebrand.homebrand-two .brand-name{
  font-size:20px;
  line-height:.9;
  font-weight:700;
  transform:scaleX(1.060);
  text-shadow:none;
}
.header.compact .homebrand.homebrand-two .brand-services{
  font-size:12px;
  line-height:1;
  font-weight:400;
  transform:scaleX(1.035);
  text-shadow:none;
}

@media (max-width:780px){
  .header .homebrand.homebrand-two{
    gap:5px;
    max-width:82vw;
  }
  .header .homebrand.homebrand-two .brand-name{
    font-size:34px;
  }
  .header .homebrand.homebrand-two .brand-services{
    font-size:17px;
  }
  .header.compact .homebrand.homebrand-two .brand-name{
    font-size:17px;
  }
  .header.compact .homebrand.homebrand-two .brand-services{
    font-size:10px;
  }
}


/* --- two-line brand lockup: stretched-name / full-width services v9c --- */
.header .homebrand.homebrand-two{
  width:max-content;
}

.header .homebrand.homebrand-two .brand-name{
  font-size:52px;
  line-height:.86;
  font-weight:400;
  letter-spacing:.012em;
  transform:scaleX(1.135);
  transform-origin:left top;
}

.header .homebrand.homebrand-two .brand-services{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5em;
  font-size:23px;
  line-height:1;
  font-weight:400;
  letter-spacing:0;
  transform:scaleX(1.035);
  transform-origin:left top;
}

.header .homebrand.homebrand-two .brand-services .divider{
  opacity:.95;
  transform:translateY(-.02em);
}

.header.compact .homebrand.homebrand-two .brand-name{
  font-size:20px;
  font-weight:400;
  letter-spacing:.008em;
  transform:scaleX(1.055);
}
.header.compact .homebrand.homebrand-two .brand-services{
  width:calc(100% - 6px);
  font-size:11.5px;
  gap:.35em;
  transform:scaleX(1.04);
  transform-origin:left top;
}

@media (max-width:780px){
  .header .homebrand.homebrand-two .brand-name{
    font-size:34px;
    font-weight:400;
    letter-spacing:.008em;
    transform:scaleX(1.045);
  }
  .header .homebrand.homebrand-two .brand-services{
    width:calc(100% - 4px);
    font-size:15px;
    gap:.3em;
    transform:scaleX(1.03);
    transform-origin:left top;
  }
  .header.compact .homebrand.homebrand-two .brand-name{
    font-size:17px;
    transform:scaleX(1.025);
  }
  .header.compact .homebrand.homebrand-two .brand-services{
    width:calc(100% - 2px);
    font-size:9.5px;
    gap:.22em;
    transform:scaleX(1.012);
    transform-origin:left top;
  }
}

/* selected work / film: burger aligns with content right edge */
.header.overview-right-align{
  padding-right:110px;
}

/* about: footer follows the 110px content axis */
#about .legal{
  padding-left:110px;
  padding-right:110px;
}


/* insights */
.insightsInner{
  padding:118px 110px 76px;
}
.insightsIntro{
  display:grid;
  grid-template-columns:8fr 4fr;
  gap:6vw;
  align-items:end;
  margin-bottom:8vh;
}
.insightsIntro h1{
  margin:0;
  font-size:clamp(74px,10vw,158px);
  font-weight:400;
  letter-spacing:-.062em;
  line-height:.82;
}
.insightsIntro p{
  margin:0 0 8px;
  max-width:460px;
  font-size:14px;
  line-height:1.55;
  color:#555;
}
.insightsGrid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:64px 24px;
}
.insightCard{
  grid-column:span 4;
}
.insightCard.insight-wide{
  grid-column:span 8;
}
.insightImage{
  width:100%;
  overflow:hidden;
  background:#ece8e1;
  box-shadow:0 13px 34px rgba(0,0,0,.08),0 2px 5px rgba(0,0,0,.05);
}
.insightImage img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
  transition:transform .7s ease,filter .4s ease;
}
.insight-wide .insightImage img{
  aspect-ratio:16/9;
}
.insightCard:hover .insightImage img{
  transform:scale(1.012);
  filter:brightness(1.025);
}
.insightMeta{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:13px;
  font-size:10px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#77716a;
}
.insightCard h2{
  margin:16px 0 10px;
  max-width:820px;
  font-size:clamp(25px,2.2vw,40px);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:400;
}
.insightCard p{
  margin:0;
  max-width:680px;
  font-size:14px;
  line-height:1.6;
  color:#55514c;
}
.insightsEnd{
  margin-top:12vh;
  padding-top:28px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#777;
}

/* contact follows the common 110px desktop content axis */
#contact .legal{
  padding-left:110px;
  padding-right:110px;
}

@media (max-width:980px){
  .insightsGrid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .insightCard,.insightCard.insight-wide{grid-column:span 3}
}
@media (max-width:780px){
  .insightsInner{padding:105px 18px 60px}
  .insightsIntro{grid-template-columns:1fr;gap:35px;margin-bottom:55px}
  .insightsGrid{grid-template-columns:1fr;gap:44px}
  .insightCard,.insightCard.insight-wide{grid-column:auto}
  .insightCard h2{font-size:30px}
  .insightsEnd{flex-direction:column;gap:8px}
  #contact .legal{padding-left:18px;padding-right:18px}
}

/* immediate visual feedback while a project gallery is being prepared */
#workProject.active .galleryRail:empty::before{
  content:"loading";
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#777;
}


/* ================================================================
   v11u · immersive smartphone landscape
   Nur auf Touch-Geräten im Querformat und nur in Foto-/Filmprojekten.
   Die normale Hochformat-, Tablet- und Desktopdarstellung bleibt gleich.
   ================================================================ */

.immersiveBack{display:none}

/* Eigene Kopfzeile verbraucht im Querformat keine Bildhöhe mehr. */
body.immersive-landscape #header{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* Kleine, überlagerte Zurücknavigation. */
body.immersive-landscape .immersiveBack{
  display:flex;
  position:fixed;
  z-index:96;
  left:max(10px, env(safe-area-inset-left));
  top:max(8px, env(safe-area-inset-top));
  width:36px;
  height:36px;
  padding:0;
  border:0;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  background:rgba(17,17,17,.48);
  color:#fff;
  box-shadow:0 2px 12px rgba(0,0,0,.12);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  cursor:pointer;
  opacity:.82;
  transition:opacity .28s ease,transform .28s ease;
}
body.immersive-landscape .immersiveBack span{
  display:block;
  font-family:Arial,sans-serif;
  font-size:31px;
  font-weight:300;
  line-height:30px;
  transform:translate(-1px,-1px);
}

/* ---------------- Foto-Galerie ---------------- */

body.immersive-landscape #workProject .galleryWrap,
body.immersive-landscape #workProject .galleryRail{
  height:100vh;
  height:100dvh;
  min-height:100vh;
  min-height:100dvh;
}
body.immersive-landscape #workProject .galleryRail{
  padding-top:0;
  cursor:default;
}

body.immersive-landscape #workProject .frame,
body.immersive-landscape #workProject .projectEnd{
  height:100vh;
  height:100dvh;
  min-height:100vh;
  min-height:100dvh;
  padding:
    max(7px, env(safe-area-inset-top))
    max(9px, env(safe-area-inset-right))
    max(7px, env(safe-area-inset-bottom))
    max(9px, env(safe-area-inset-left));
}

body.immersive-landscape #workProject .frame img.print{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:calc(100vh - 14px);
  max-height:calc(100dvh - 14px);
  object-fit:contain;
}
body.immersive-landscape #workProject .frame img.print.landscape{
  width:min(100%, calc((100vh - 14px) * var(--imgAspect, 1.5)));
  width:min(100%, calc((100dvh - 14px) * var(--imgAspect, 1.5)));
  max-width:100%;
}
body.immersive-landscape #workProject .frame img.print.portrait{
  width:auto;
  max-width:min(88vw, calc((100vh - 14px) * var(--imgAspect, .75)));
  max-width:min(88vw, calc((100dvh - 14px) * var(--imgAspect, .75)));
}

/* Projekt-Meta verschwindet. Zähler und 3x3 schweben über dem Bild. */
body.immersive-landscape #workProject .galleryMeta{display:none}

body.immersive-landscape #workProject .galleryCount{
  top:max(13px, env(safe-area-inset-top));
  right:max(58px, calc(env(safe-area-inset-right) + 48px));
  padding:7px 9px;
  border-radius:999px;
  background:rgba(17,17,17,.42);
  color:#fff;
  font-size:9px;
  letter-spacing:.10em;
  line-height:1;
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
  opacity:.78;
  transition:opacity .28s ease,transform .28s ease;
}

body.immersive-landscape #workProject .galleryOverviewBtn{
  top:max(9px, env(safe-area-inset-top));
  right:max(10px, env(safe-area-inset-right));
  width:36px;
  height:36px;
  padding:10px;
  border-radius:999px;
  background:rgba(17,17,17,.48);
  color:#fff;
  opacity:.82;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  transition:opacity .28s ease,transform .28s ease;
}
body.immersive-landscape #workProject .galleryOverviewBtn::before,
body.immersive-landscape #workProject .galleryOverviewBtn::after{
  left:11px;
  top:17px;
}

/* Vor/Zurück im Querformat nur als kleine Pfeile. */
body.immersive-landscape #workProject .navBtn{
  top:50%;
  width:46px;
  height:74px;
  padding:0;
  transform:translateY(-50%);
  justify-content:center;
  transition:opacity .28s ease,transform .28s ease;
}
body.immersive-landscape #workProject .navBtn.prev{
  left:max(3px, env(safe-area-inset-left));
}
body.immersive-landscape #workProject .navBtn.next{
  right:max(3px, env(safe-area-inset-right));
}
body.immersive-landscape #workProject .navBtn span{display:none}
body.immersive-landscape #workProject .navBtn .arr{width:24px}

/* Nach 2,2 Sekunden verschwindet die Galerie-UI. Tap/Wischen holt sie zurück. */
body.immersive-landscape.immersive-ui-hidden #workProject .immersiveBack,
body.immersive-landscape.immersive-ui-hidden #workProject .galleryCount,
body.immersive-landscape.immersive-ui-hidden #workProject .galleryOverviewBtn,
body.immersive-landscape.immersive-ui-hidden #workProject .navBtn{
  opacity:0!important;
  pointer-events:none;
}
body.immersive-landscape.immersive-ui-hidden #workProject .immersiveBack{
  transform:translateY(-5px);
}
body.immersive-landscape.immersive-ui-hidden #workProject .galleryCount,
body.immersive-landscape.immersive-ui-hidden #workProject .galleryOverviewBtn{
  transform:translateY(-4px);
}

/* 3x3-Übersicht auf die kurze Querformat-Höhe optimiert. */
body.immersive-landscape #workProject .galleryOverview{
  inset:0;
  height:100vh;
  height:100dvh;
  padding-top:max(42px, calc(env(safe-area-inset-top) + 36px));
}
body.immersive-landscape #workProject .galleryOverviewHead{
  height:42px;
  padding:
    7px
    max(52px, calc(env(safe-area-inset-right) + 44px))
    6px
    max(52px, calc(env(safe-area-inset-left) + 44px));
  align-items:center;
  font-size:9px;
}
body.immersive-landscape #workProject .galleryOverviewGrid{
  height:calc(100vh - 84px);
  height:calc(100dvh - 84px);
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:110px;
  gap:16px 10px;
  padding:
    8px
    max(12px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}

/* Projektende für die kurze Höhe verdichten. */
body.immersive-landscape #workProject .projectEnd{
  align-items:flex-end;
  padding:
    max(46px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(22px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
}
body.immersive-landscape #workProject .projectEnd h2{
  font-size:clamp(34px,7vw,58px);
  margin-bottom:8px;
}
body.immersive-landscape #workProject .projectEnd p{display:none}

/* ---------------- Film-Projekt ---------------- */

body.immersive-landscape #filmProject .filmProject{
  height:100vh;
  height:100dvh;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:y proximity;
}

/* Der erste sichtbare Screen gehört vollständig dem 16:9-Film. */
body.immersive-landscape #filmProject .filmHero{
  width:100%;
  height:100vh;
  height:100dvh;
  min-height:100vh;
  min-height:100dvh;
  padding:
    max(7px, env(safe-area-inset-top))
    max(9px, env(safe-area-inset-right))
    max(7px, env(safe-area-inset-bottom))
    max(9px, env(safe-area-inset-left));
  display:flex;
  align-items:center;
  justify-content:center;
  scroll-snap-align:start;
}

body.immersive-landscape #filmProject .filmPoster{
  width:100%;
  max-width:calc((100vh - 14px) * 16 / 9);
  max-width:calc((100dvh - 14px) * 16 / 9);
  margin:0 auto;
}

body.immersive-landscape #filmProject .filmPoster img,
body.immersive-landscape #filmProject .filmPoster iframe{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:contain;
}

body.immersive-landscape #filmProject .playBadge{
  left:12px;
  bottom:12px;
  padding:7px 11px;
  font-size:9px;
}

/* Text und Facts beginnen erst unter dem Film-Screen. */
body.immersive-landscape #filmProject .filmBody{
  padding:
    34px
    max(18px, env(safe-area-inset-right))
    34px
    max(18px, env(safe-area-inset-left));
  grid-template-columns:1fr 1fr;
  gap:5vw;
}
body.immersive-landscape #filmProject .filmBody h2{
  font-size:clamp(38px,7vw,64px);
}
body.immersive-landscape #filmProject .filmStrip{
  padding-left:max(18px, env(safe-area-inset-left));
  padding-right:max(18px, env(safe-area-inset-right));
  grid-template-columns:repeat(3,1fr);
}
body.immersive-landscape #filmProject .legal{
  padding-left:max(18px, env(safe-area-inset-left));
  padding-right:max(18px, env(safe-area-inset-right));
}

/* Beim laufenden Vimeo-Film bleibt der kleine Zurück-Button erreichbar. */
body.immersive-landscape #filmProject .immersiveBack-film{opacity:.68}


/* ================================================================
   v11v · mobile overlay / preserved Safari state / portrait UI fade
   ================================================================ */

:root{
  --rr-visible-height:100dvh;
}

/* The media project lies above the still-active overview.
   The overview keeps its exact internal scroll position underneath. */
body.mobile-media-overlay #workProject.active,
body.mobile-media-overlay #filmProject.active{
  position:fixed;
  inset:0;
  z-index:70;
  display:block;
  background:var(--paper);
}

/* The underlying overview remains mounted, but cannot receive touches. */
body.mobile-media-overlay #workOverview.active,
body.mobile-media-overlay #filmOverview.active{
  pointer-events:none;
}

/* Soft fade for the global header on phones. It does not affect layout. */
body.mobile-media-view #header{
  transition:color .7s ease,opacity .32s ease,transform .32s ease;
}

/* Portrait: keep the familiar layout, but fade every gallery UI layer. */
body.mobile-media-view:not(.immersive-landscape) #workProject .galleryMeta,
body.mobile-media-view:not(.immersive-landscape) #workProject .galleryCount,
body.mobile-media-view:not(.immersive-landscape) #workProject .galleryOverviewBtn,
body.mobile-media-view:not(.immersive-landscape) #workProject .navBtn{
  transition:opacity .32s ease,transform .32s ease;
}

body.mobile-media-view:not(.immersive-landscape).immersive-ui-hidden #header,
body.mobile-media-view:not(.immersive-landscape).immersive-ui-hidden #workProject .galleryMeta,
body.mobile-media-view:not(.immersive-landscape).immersive-ui-hidden #workProject .galleryCount,
body.mobile-media-view:not(.immersive-landscape).immersive-ui-hidden #workProject .galleryOverviewBtn,
body.mobile-media-view:not(.immersive-landscape).immersive-ui-hidden #workProject .navBtn{
  opacity:0!important;
  pointer-events:none!important;
}

body.mobile-media-view:not(.immersive-landscape).immersive-ui-hidden #header{
  transform:translateY(-6px);
}
body.mobile-media-view:not(.immersive-landscape).immersive-ui-hidden #workProject .galleryMeta,
body.mobile-media-view:not(.immersive-landscape).immersive-ui-hidden #workProject .galleryCount,
body.mobile-media-view:not(.immersive-landscape).immersive-ui-hidden #workProject .galleryOverviewBtn{
  transform:translateY(-4px);
}

/* Film portrait: the site header also fades after the same delay.
   Play controls inside the film itself remain untouched. */
body.mobile-media-view:not(.immersive-landscape).immersive-ui-hidden #filmProject ~ #header{
  opacity:0;
}

/* In landscape use the exact VisualViewport height supplied by JS.
   This is deliberately stronger than the v11u dvh fallback. */
body.immersive-landscape #workProject .galleryWrap,
body.immersive-landscape #workProject .galleryRail,
body.immersive-landscape #workProject .frame,
body.immersive-landscape #workProject .projectEnd,
body.immersive-landscape #filmProject .filmProject,
body.immersive-landscape #filmProject .filmHero{
  height:var(--rr-visible-height,100dvh);
  min-height:var(--rr-visible-height,100dvh);
}

body.immersive-landscape #workProject .frame img.print{
  max-height:calc(var(--rr-visible-height,100dvh) - 14px);
}
body.immersive-landscape #workProject .frame img.print.landscape{
  width:min(100%,calc((var(--rr-visible-height,100dvh) - 14px) * var(--imgAspect,1.5)));
}
body.immersive-landscape #workProject .frame img.print.portrait{
  max-width:min(88vw,calc((var(--rr-visible-height,100dvh) - 14px) * var(--imgAspect,.75)));
}
body.immersive-landscape #filmProject .filmPoster{
  max-width:calc((var(--rr-visible-height,100dvh) - 14px) * 16 / 9);
}
body.immersive-landscape #workProject .galleryOverview{
  height:var(--rr-visible-height,100dvh);
}
body.immersive-landscape #workProject .galleryOverviewGrid{
  height:calc(var(--rr-visible-height,100dvh) - 84px);
}

/* Film landscape UI now fades as well. */
body.immersive-landscape.immersive-ui-hidden #filmProject .immersiveBack-film{
  opacity:0!important;
  pointer-events:none;
  transform:translateY(-5px);
}

/* If a film is playing, a tap anywhere in the film project restores
   the small site-level navigation without touching Vimeo controls. */
body.mobile-media-view #filmProject .immersiveBack-film{
  transition:opacity .32s ease,transform .32s ease;
}


/* ================================================================
   v11w · smartphone gallery navigation
   On phones there are no previous/next arrows at all.
   Horizontal swiping is the sole image navigation.
   ================================================================ */

body.mobile-media-view #workProject .navBtn{
  display:none!important;
}


/* ================================================================
   v11x · smartphone photo gallery
   Portrait: vertical image stream.
   Landscape: immersive horizontal swipe remains.
   No arrows in either smartphone orientation.
   ================================================================ */

/* Portrait phone: natural vertical gallery instead of one fixed-height
   horizontal page per photograph. */
body.mobile-media-view:not(.immersive-landscape) #workProject .galleryWrap{
  height:100%;
  overflow:hidden;
}

body.mobile-media-view:not(.immersive-landscape) #workProject .galleryRail{
  height:100%;
  display:block;
  overflow-x:hidden;
  overflow-y:auto;
  padding-top:0;
  cursor:default;
  scroll-snap-type:y proximity;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  scrollbar-width:none;
}
body.mobile-media-view:not(.immersive-landscape) #workProject .galleryRail::-webkit-scrollbar{
  display:none;
}

/* Before the next image is loaded, the frame reserves roughly the space
   of a normal landscape photograph. This keeps progressive loading stable. */
body.mobile-media-view:not(.immersive-landscape) #workProject .frame{
  width:100%;
  height:auto;
  min-height:66vw;
  padding:18px 6px;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
  scroll-snap-align:center;
  scroll-snap-stop:normal;
}

body.mobile-media-view:not(.immersive-landscape) #workProject .frame:first-child{
  padding-top:148px;
}

body.mobile-media-view:not(.immersive-landscape) #workProject .frame.image-ready{
  min-height:0;
}

/* Landscape photographs use almost the complete phone width.
   They are no longer reduced by a viewport-height calculation. */
body.mobile-media-view:not(.immersive-landscape) #workProject .frame img.print,
body.mobile-media-view:not(.immersive-landscape) #workProject .frame img.print.landscape{
  width:calc(100vw - 12px);
  height:auto;
  max-width:calc(100vw - 12px);
  max-height:none;
  object-fit:contain;
}

/* Portrait photographs may also be shown generously, but keep a small
   paper margin so they do not feel edge-to-edge. */
body.mobile-media-view:not(.immersive-landscape) #workProject .frame img.print.portrait{
  width:auto;
  max-width:90vw;
  max-height:none;
}

/* The end panel becomes part of the same vertical flow. */
body.mobile-media-view:not(.immersive-landscape) #workProject .projectEnd{
  width:100%;
  height:auto;
  min-height:72dvh;
  padding:90px 24px 64px;
  scroll-snap-align:start;
}

/* Smartphone navigation remains gesture-only. */
body.mobile-media-view #workProject .navBtn{
  display:none!important;
}


/* ================================================================
   v11y · desktop immersive gallery experiment
   Large images + quiet interface. Desktop/fine pointer only.
   ================================================================ */

@media (min-width:901px) and (pointer:fine){

  /* Visual equivalent of roughly a 10 mm paper edge on a typical
     desktop display. CSS physical mm are intentionally not used,
     because browsers do not reproduce real-world millimetres reliably. */
  body.desktop-gallery-mode{
    --desktop-gallery-edge:clamp(30px,2.05vw,38px);
    --desktop-gallery-top:68px;
  }

  body.desktop-gallery-mode #workProject .galleryWrap,
  body.desktop-gallery-mode #workProject .galleryRail{
    height:100vh;
    height:100dvh;
  }

  body.desktop-gallery-mode #workProject .galleryRail{
    padding-top:0;
  }

  body.desktop-gallery-mode #workProject .frame,
  body.desktop-gallery-mode #workProject .projectEnd{
    height:100vh;
    height:100dvh;
    padding:
      var(--desktop-gallery-top)
      var(--desktop-gallery-edge)
      var(--desktop-gallery-edge);
  }

  /* Images are now height-driven and significantly larger than in V11x,
     while a narrow off-white frame remains visible around them. */
  body.desktop-gallery-mode #workProject .frame img.print{
    width:auto;
    height:auto;
    max-width:calc(100vw - (2 * var(--desktop-gallery-edge)));
    max-height:calc(100vh - var(--desktop-gallery-top) - var(--desktop-gallery-edge));
    max-height:calc(100dvh - var(--desktop-gallery-top) - var(--desktop-gallery-edge));
    object-fit:contain;
  }

  body.desktop-gallery-mode #workProject .frame img.print.landscape{
    width:min(
      calc(100vw - (2 * var(--desktop-gallery-edge))),
      calc(
        (100vh - var(--desktop-gallery-top) - var(--desktop-gallery-edge))
        * var(--imgAspect,1.5)
      )
    );
    width:min(
      calc(100vw - (2 * var(--desktop-gallery-edge))),
      calc(
        (100dvh - var(--desktop-gallery-top) - var(--desktop-gallery-edge))
        * var(--imgAspect,1.5)
      )
    );
  }

  body.desktop-gallery-mode #workProject .frame img.print.portrait{
    max-width:min(
      76vw,
      calc(
        (100vh - var(--desktop-gallery-top) - var(--desktop-gallery-edge))
        * var(--imgAspect,.75)
      )
    );
    max-width:min(
      76vw,
      calc(
        (100dvh - var(--desktop-gallery-top) - var(--desktop-gallery-edge))
        * var(--imgAspect,.75)
      )
    );
  }

  /* Everything except the animated cursor and burger can disappear. */
  body.desktop-gallery-mode #header .homebrand,
  body.desktop-gallery-mode #workProject .galleryMeta,
  body.desktop-gallery-mode #workProject .galleryCount,
  body.desktop-gallery-mode #workProject .galleryOverviewBtn,
  body.desktop-gallery-mode #workProject .navBtn{
    transition:
      opacity .55s cubic-bezier(.22,.61,.36,1),
      transform .55s cubic-bezier(.22,.61,.36,1),
      visibility 0s linear 0s;
  }

  body.desktop-gallery-mode.desktop-gallery-ui-hidden #header .homebrand,
  body.desktop-gallery-mode.desktop-gallery-ui-hidden #workProject .galleryMeta,
  body.desktop-gallery-mode.desktop-gallery-ui-hidden #workProject .galleryCount,
  body.desktop-gallery-mode.desktop-gallery-ui-hidden #workProject .galleryOverviewBtn,
  body.desktop-gallery-mode.desktop-gallery-ui-hidden #workProject .navBtn{
    opacity:0!important;
    visibility:hidden;
    pointer-events:none!important;
  }

  body.desktop-gallery-mode.desktop-gallery-ui-hidden #header .homebrand,
  body.desktop-gallery-mode.desktop-gallery-ui-hidden #workProject .galleryMeta,
  body.desktop-gallery-mode.desktop-gallery-ui-hidden #workProject .galleryCount,
  body.desktop-gallery-mode.desktop-gallery-ui-hidden #workProject .galleryOverviewBtn{
    transform:translateY(-5px);
  }

  /* Burger deliberately stays present at all times. */
  body.desktop-gallery-mode #header .burger{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* The animated cursor remains the permanent next/back navigation. */
  body.desktop-gallery-mode #workProject .cursorHint{
    z-index:95;
  }

  /* When the 3x3 overview is open, the controls must stay visible. */
  body.desktop-gallery-mode.gallery-overview-visible #header .homebrand,
  body.desktop-gallery-mode.gallery-overview-visible #workProject .galleryMeta,
  body.desktop-gallery-mode.gallery-overview-visible #workProject .galleryCount,
  body.desktop-gallery-mode.gallery-overview-visible #workProject .galleryOverviewBtn{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:auto!important;
  }
}


/* ================================================================
   v11z · larger brand lockup on menu + all inner pages
   Landing page remains unchanged.
   ================================================================ */

/* Desktop / tablet inner pages: about 50% larger than before. */
.header.compact .homebrand.homebrand-two{
  gap:4px;
}

.header.compact .homebrand.homebrand-two .brand-name{
  font-size:30px;
  line-height:.90;
  font-weight:400;
  letter-spacing:.008em;
  transform:scaleX(1.055);
}

.header.compact .homebrand.homebrand-two .brand-services{
  width:calc(100% - 5px);
  font-size:17.25px;
  line-height:1;
  gap:.34em;
  transform:scaleX(1.04);
  transform-origin:left top;
}

/* The larger lockup needs a few more pixels above desktop gallery images
   while its UI is visible. The immersive image size changes only minimally. */
@media (min-width:901px) and (pointer:fine){
  body.desktop-gallery-mode{
    --desktop-gallery-top:84px;
  }
}

/* Smartphone inner pages: same roughly 50% increase.
   Landing remains governed by the existing non-compact rules. */
@media (max-width:780px){
  .header.compact .homebrand.homebrand-two{
    gap:4px;
  }

  .header.compact .homebrand.homebrand-two .brand-name{
    font-size:25.5px;
    line-height:.90;
    transform:scaleX(1.025);
  }

  .header.compact .homebrand.homebrand-two .brand-services{
    width:calc(100% - 3px);
    font-size:14.25px;
    line-height:1;
    gap:.22em;
    transform:scaleX(1.012);
    transform-origin:left top;
  }
}


/* ================================================================
   v12a · mobile portrait gallery spacing
   Only smartphone portrait gallery. Desktop/tablet/landscape unchanged.
   Previous vertical frame padding: 18 px
   New vertical frame padding: 25 px  (~+40%)
   ================================================================ */

body.mobile-media-view:not(.immersive-landscape) #workProject .frame{
  padding-top:25px;
  padding-bottom:25px;
}

/* Keep the established first-image top offset; only its bottom spacing
   follows the new 25 px rhythm. */
body.mobile-media-view:not(.immersive-landscape) #workProject .frame:first-child{
  padding-top:148px;
}


/* ================================================================
   v12b · mobile portrait gallery spacing
   Only smartphone portrait gallery.
   V12a: 25 px top / bottom
   V12b: 30 px top / bottom  (~+20%)
   ================================================================ */

body.mobile-media-view:not(.immersive-landscape) #workProject .frame{
  padding-top:30px;
  padding-bottom:30px;
}

body.mobile-media-view:not(.immersive-landscape) #workProject .frame:first-child{
  padding-top:148px;
}


/* ================================================================
   v12c · mobile portrait gallery spacing
   Only smartphone portrait gallery.
   V12b: 30 px top / bottom
   V12c: 45 px top / bottom  (~+50%)
   ================================================================ */

body.mobile-media-view:not(.immersive-landscape) #workProject .frame{
  padding-top:45px;
  padding-bottom:45px;
}

body.mobile-media-view:not(.immersive-landscape) #workProject .frame:first-child{
  padding-top:148px;
}


/* ================================================================
   v12d · smartphone portrait focus mode
   centered image bright, others dimmed, magnetic centering
   only for photo gallery in smartphone portrait orientation
   ================================================================ */

body.mobile-media-view:not(.immersive-landscape) #workProject .galleryRail{
  scroll-snap-type:y mandatory;
  scroll-padding-top:50dvh;
  scroll-padding-bottom:50dvh;
}

body.mobile-media-view:not(.immersive-landscape) #workProject .frame{
  scroll-snap-align:center;
  scroll-snap-stop:always;
}

body.mobile-media-view:not(.immersive-landscape) #workProject .frame img.print{
  transition:
    filter .38s cubic-bezier(.22,.61,.36,1),
    opacity .38s cubic-bezier(.22,.61,.36,1),
    transform .38s cubic-bezier(.22,.61,.36,1);
  will-change:filter, opacity, transform;
}

body.mobile-media-view:not(.immersive-landscape) #workProject .frame.is-focus-frame img.print,
body.mobile-media-view:not(.immersive-landscape) #workProject .frame img.print.is-focus-image{
  filter:brightness(1);
  opacity:1;
  transform:translateZ(0) scale(1);
}

body.mobile-media-view:not(.immersive-landscape) #workProject .frame.is-dim-frame img.print,
body.mobile-media-view:not(.immersive-landscape) #workProject .frame img.print.is-dim-image{
  filter:brightness(.25);
  opacity:.98;
  transform:translateZ(0) scale(.995);
}


/* ================================================================
   v12f · ralphrichter.art-inspired mobile Safari scroll architecture
   Phone overview pages scroll the actual document instead of a nested
   .sectionScroll. This gives Safari the best chance to collapse its own
   browser chrome before a project opens, while V11v/V12d keeps the
   project as a fixed overlay without resetting the underlying scroll.
   ================================================================ */

body.mobile-overview-native-scroll{
  overflow-x:hidden;
  overflow-y:auto;
  min-height:100%;
  -webkit-overflow-scrolling:touch;
}

body.mobile-overview-native-scroll .app{
  height:auto;
  min-height:100vh;
  min-height:100dvh;
  overflow:visible;
  position:relative;
}

body.mobile-overview-native-scroll #workOverview.active,
body.mobile-overview-native-scroll #filmOverview.active{
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  min-height:100vh;
  min-height:100dvh;
  overflow:visible;
}

body.mobile-overview-native-scroll #workOverview.active .sectionScroll,
body.mobile-overview-native-scroll #filmOverview.active .sectionScroll{
  height:auto;
  min-height:100vh;
  min-height:100dvh;
  overflow:visible;
  -webkit-overflow-scrolling:auto;
}

/* While the fixed media overlay is open, the long native-scrolling
   overview remains mounted underneath at exactly the same document position. */
body.mobile-overview-native-scroll.mobile-media-overlay{
  overflow-x:hidden;
  overflow-y:auto;
}

/* ================================================================
   v12f · mobile portrait end panel
   When the project text panel reaches the lower part of the viewport,
   magnetic image snapping is suspended so the end text can be reached
   and positioned naturally. Scrolling back into the pictures re-enables it.
   ================================================================ */

body.mobile-gallery-end-free.mobile-media-view:not(.immersive-landscape)
#workProject .galleryRail{
  scroll-snap-type:none!important;
}

body.mobile-gallery-end-free.mobile-media-view:not(.immersive-landscape)
#workProject .projectEnd{
  scroll-snap-align:none!important;
}


/* ================================================================
   v12g · final gallery refinement
   Remove only the fixed NEXT arrow/button.
   Animated desktop cursor + swipe navigation remain unchanged.
   ================================================================ */

#workProject .navBtn.next{
  display:none!important;
}


/* ================================================================
   v12h · informational project end texts
   Keep the existing restrained end-panel design; allow a slightly
   more comfortable measure for short factual project descriptions.
   ================================================================ */

.projectEnd p{
  max-width:720px;
}


/* ================================================================
   v12j · faster, softer desktop gallery UI fade
   - initial visibility: 2.8 s instead of 5.6 s
   - after leaving the top search zone: ~0.85 s
   - fade itself is slower and softer (~0.9 s)
   - visibility is delayed until the opacity fade has completed
   ================================================================ */

@media (min-width:901px) and (pointer:fine){

  body.desktop-gallery-mode #header .homebrand,
  body.desktop-gallery-mode #workProject .galleryMeta,
  body.desktop-gallery-mode #workProject .galleryCount,
  body.desktop-gallery-mode #workProject .galleryOverviewBtn,
  body.desktop-gallery-mode #workProject .navBtn{
    transition:
      opacity .90s cubic-bezier(.22,.61,.36,1),
      transform .90s cubic-bezier(.22,.61,.36,1),
      visibility 0s linear 0s;
  }

  body.desktop-gallery-mode.desktop-gallery-ui-hidden #header .homebrand,
  body.desktop-gallery-mode.desktop-gallery-ui-hidden #workProject .galleryMeta,
  body.desktop-gallery-mode.desktop-gallery-ui-hidden #workProject .galleryCount,
  body.desktop-gallery-mode.desktop-gallery-ui-hidden #workProject .galleryOverviewBtn,
  body.desktop-gallery-mode.desktop-gallery-ui-hidden #workProject .navBtn{
    transition:
      opacity .90s cubic-bezier(.22,.61,.36,1),
      transform .90s cubic-bezier(.22,.61,.36,1),
      visibility 0s linear .90s;
  }

  body.desktop-gallery-mode.desktop-gallery-ui-hidden #header .homebrand,
  body.desktop-gallery-mode.desktop-gallery-ui-hidden #workProject .galleryMeta,
  body.desktop-gallery-mode.desktop-gallery-ui-hidden #workProject .galleryCount,
  body.desktop-gallery-mode.desktop-gallery-ui-hidden #workProject .galleryOverviewBtn{
    transform:translateY(-3px);
  }
}


/* ================================================================
   v12k · legal / privacy / consent management
   ================================================================ */

.menuFoot a,
.legal a,
.legalPage a,
.consentBanner a{
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
.menuFoot a:hover,
.legal a:hover,
.legalPage a:hover,
.consentBanner a:hover{
  opacity:.58;
}

.legalPage{
  position:absolute;
  inset:0;
  overflow-y:auto;
  overflow-x:hidden;
  background:#f4f2ed;
  color:#111;
  -webkit-overflow-scrolling:touch;
}
.legalPageInner{
  width:min(900px,calc(100% - 64px));
  margin:0 auto;
  padding:150px 0 100px;
}
.legalEyebrow{
  margin-bottom:16px;
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#77736b;
}
.legalPage h1{
  margin:0 0 72px;
  font-size:clamp(48px,6.5vw,92px);
  line-height:.9;
  letter-spacing:-.055em;
  font-weight:400;
}
.legalPage h2{
  margin:46px 0 12px;
  font-size:12px;
  line-height:1.35;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600;
}
.legalPage p,
.legalPage li{
  max-width:780px;
  margin:0 0 16px;
  font-size:14px;
  line-height:1.68;
  color:#3f3d39;
}
.legalPage code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
  font-size:.9em;
}
.legalLead{
  margin-top:-50px!important;
  margin-bottom:48px!important;
  font-size:11px!important;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#77736b!important;
}
.legalPageActions{
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  margin-top:70px;
  padding-top:20px;
  border-top:1px solid rgba(17,17,17,.16);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.consentBanner{
  position:fixed;
  left:24px;
  right:24px;
  bottom:24px;
  z-index:500;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .38s cubic-bezier(.22,.61,.36,1),transform .38s cubic-bezier(.22,.61,.36,1),visibility 0s linear .38s;
}
.consentBanner.open{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
  transition:opacity .38s cubic-bezier(.22,.61,.36,1),transform .38s cubic-bezier(.22,.61,.36,1),visibility 0s;
}
.consentBannerInner{
  width:min(1120px,100%);
  margin:0 auto;
  padding:20px 22px 18px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:34px;
  align-items:end;
  background:rgba(247,245,240,.96);
  color:#111;
  border:1px solid rgba(17,17,17,.16);
  box-shadow:0 14px 44px rgba(0,0,0,.13);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.consentEyebrow{
  margin-bottom:7px;
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#77736b;
}
.consentCopy h2,
.privacySettingsPanel h2{
  margin:0 0 8px;
  font-size:20px;
  line-height:1.1;
  font-weight:400;
  letter-spacing:-.025em;
}
.consentCopy p,
.privacySettingsIntro{
  max-width:690px;
  margin:0;
  font-size:11.5px;
  line-height:1.55;
  color:#55514b;
}
.consentLinks{
  margin-top:8px!important;
  font-size:10px!important;
  letter-spacing:.03em;
}
.consentActions{
  display:flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
}
.consentBtn,
.consentTextBtn,
.vimeoAllowBtn,
.vimeoPrivacyBtn{
  appearance:none;
  border:1px solid rgba(17,17,17,.42);
  background:transparent;
  color:#111;
  min-height:38px;
  padding:0 15px;
  font:inherit;
  font-size:9.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease;
}
.consentBtn:hover,
.vimeoAllowBtn:hover{
  background:#111;
  color:#fff;
  border-color:#111;
}
.consentTextBtn{
  border-color:transparent;
  padding-left:8px;
  padding-right:8px;
}
.consentTextBtn:hover,
.vimeoPrivacyBtn:hover{opacity:.55}

.privacySettings{
  position:fixed;
  inset:0;
  z-index:540;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(16,16,16,.28);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .3s ease,visibility 0s linear .3s;
}
.privacySettings.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .3s ease,visibility 0s;
}
.privacySettingsPanel{
  position:relative;
  width:min(650px,100%);
  max-height:min(720px,calc(100dvh - 48px));
  overflow-y:auto;
  padding:30px;
  background:#f7f5f0;
  color:#111;
  box-shadow:0 18px 70px rgba(0,0,0,.18);
}
.privacySettingsClose{
  position:absolute;
  right:18px;
  top:14px;
  width:34px;
  height:34px;
  border:0;
  background:transparent;
  font-size:24px;
  font-weight:300;
  cursor:pointer;
}
.privacySettingsIntro{margin-bottom:25px}
.privacySettingRow{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  padding:19px 0;
  border-top:1px solid rgba(17,17,17,.14);
  cursor:pointer;
}
.privacySettingRow strong{
  display:block;
  margin-bottom:5px;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
}
.privacySettingRow div>span{
  display:block;
  max-width:470px;
  font-size:11px;
  line-height:1.5;
  color:#5b5751;
}
.privacyState{
  font-size:9px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:#77736b;
}
.switch{position:relative;width:46px;height:26px;display:block}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switchTrack{
  position:absolute;
  inset:0;
  border:1px solid rgba(17,17,17,.45);
  border-radius:20px;
  transition:background .2s ease,border-color .2s ease;
}
.switchTrack::after{
  content:"";
  position:absolute;
  width:18px;
  height:18px;
  left:3px;
  top:3px;
  border-radius:50%;
  background:#111;
  transition:transform .2s ease,background .2s ease;
}
.switch input:checked + .switchTrack{background:#111;border-color:#111}
.switch input:checked + .switchTrack::after{transform:translateX(20px);background:#f7f5f0}
.switch input:focus-visible + .switchTrack{outline:2px solid #111;outline-offset:3px}
.privacySettingsActions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid rgba(17,17,17,.14);
}
body.privacy-settings-open{overflow:hidden}

.vimeoConsentPrompt{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(15,15,15,.72);
  color:#fff;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.vimeoConsentInner{
  width:min(520px,100%);
  text-align:center;
}
.vimeoConsentInner strong{
  display:block;
  margin-bottom:10px;
  font-size:18px;
  font-weight:400;
}
.vimeoConsentInner p{
  margin:0 auto 20px;
  max-width:460px;
  font-size:11px;
  line-height:1.55;
  color:rgba(255,255,255,.82);
}
.vimeoConsentActions{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.vimeoAllowBtn,
.vimeoPrivacyBtn{color:#fff;border-color:rgba(255,255,255,.55)}
.vimeoAllowBtn:hover{background:#fff;color:#111;border-color:#fff}
.vimeoPrivacyBtn{border-color:transparent}

@media(max-width:780px){
  .legalPageInner{
    width:calc(100% - 36px);
    padding:118px 0 72px;
  }
  .legalPage h1{font-size:54px;margin-bottom:54px}
  .legalPage h2{margin-top:36px;font-size:10px}
  .legalPage p,.legalPage li{font-size:12.5px;line-height:1.62}
  .legalLead{margin-top:-36px!important;margin-bottom:36px!important}

  .consentBanner{left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom))}
  .consentBannerInner{
    display:block;
    padding:18px;
  }
  .consentActions{
    display:grid;
    grid-template-columns:1fr 1fr;
    margin-top:17px;
    white-space:normal;
  }
  .consentTextBtn{grid-column:1/-1;min-height:30px}
  .consentBtn{padding:0 9px;font-size:8.5px}
  .privacySettings{padding:10px}
  .privacySettingsPanel{padding:24px 18px;max-height:calc(100dvh - 20px)}
  .privacySettingRow{gap:12px}
  .privacySettingsActions{display:block}
  .privacySettingsActions .consentBtn{width:100%}
  .privacySettingsActions .consentTextBtn{width:100%;margin-top:5px}
  .menuLegalLinks{font-size:8px}
}


/* ================================================================
   v12l · accessibility clean-up
   ================================================================ */

/* Keyboard skip link: invisible until it receives keyboard focus. */
.skipLink{
  position:fixed;
  left:14px;
  top:14px;
  z-index:1000;
  transform:translateY(-160%);
  padding:10px 14px;
  background:#111;
  color:#fff;
  font-size:13px;
  line-height:1;
  text-decoration:none;
  transition:transform .16s ease;
}
.skipLink:focus{
  transform:translateY(0);
}

/* Burger is now a real button without changing its visual design. */
button.burger{
  appearance:none;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:inherit;
  font:inherit;
}

/* Complex project/menu tiles retain their exact layout but are now
   keyboard-focusable links for assistive technology. */
.menuRow[role="link"],
.workitem[role="link"]{
  cursor:pointer;
}

/* Visible keyboard focus; no permanent visual change for mouse/touch. */
.homebrand:focus-visible,
.burger:focus-visible,
.menuRow[role="link"]:focus-visible,
.workitem[role="link"]:focus-visible,
.galleryOverviewBtn:focus-visible,
.galleryOverviewItem:focus-visible,
.immersiveBack:focus-visible,
.filmPoster:focus-visible,
.filmStill-link:focus-visible,
.legal a:focus-visible,
.legalPage a:focus-visible,
.projectLinks a:focus-visible,
.consentBanner a:focus-visible,
.consentBtn:focus-visible,
.consentTextBtn:focus-visible,
.privacySettingsClose:focus-visible,
.vimeoAllowBtn:focus-visible,
.vimeoPrivacyBtn:focus-visible{
  outline:2px solid currentColor;
  outline-offset:4px;
}

/* Slight contrast correction for small secondary text. */
.legalEyebrow,
.legalLead,
.consentEyebrow,
.privacyState{
  color:#706c64!important;
}
.workEnd,
.contactBox .label,
.legal{
  color:#6f6f6f;
}

/* More comfortable legal text on phones. */
@media(max-width:780px){
  .legalEyebrow{
    font-size:12px;
  }
  .legalPage h2{
    font-size:14px;
    line-height:1.45;
    letter-spacing:.09em;
  }
  .legalPage p,
  .legalPage li{
    font-size:15px;
    line-height:1.72;
  }
  .legalLead{
    font-size:12.5px!important;
    line-height:1.5!important;
  }

  .consentCopy p,
  .privacySettingsIntro{
    font-size:14px;
    line-height:1.55;
  }
  .consentLinks{
    font-size:12px!important;
  }
  .consentBtn,
  .consentTextBtn,
  .vimeoAllowBtn,
  .vimeoPrivacyBtn{
    min-height:44px;
    font-size:11px;
  }
  .privacySettingRow strong{
    font-size:12px;
  }
  .privacySettingRow div>span{
    font-size:13px;
    line-height:1.55;
  }
  .privacyState{
    font-size:11px;
  }
  .menuLegalLinks{
    font-size:10px;
  }
}

/* Respect the user's OS-level motion preference across the interface.
   The JS also stops the automatic hero rotation entirely. */
@media (prefers-reduced-motion: reduce){
  html:focus-within{
    scroll-behavior:auto;
  }
  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .heroSlide{
    transform:none!important;
  }
}


/* ================================================================
   v12n · language selector (de/en) beside burger
   ================================================================ */

.headerTools{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:19px;
  flex:0 0 auto;
}

.langSwitch{
  display:flex;
  align-items:center;
  gap:3px;
  white-space:nowrap;
  font-size:11px;
  line-height:1;
  letter-spacing:.08em;
  text-transform:lowercase;
  transform:translateY(-1px);
}

.langBtn{
  appearance:none;
  border:0;
  margin:0;
  padding:5px 1px;
  background:transparent;
  color:currentColor;
  font:inherit;
  line-height:1;
  cursor:pointer;
  opacity:.48;
  transition:opacity .22s ease;
}

.langBtn:hover,
.langBtn:focus-visible{
  opacity:.82;
}

.langBtn.is-active{
  opacity:1;
}

.langBtn:focus-visible{
  outline:1px solid currentColor;
  outline-offset:3px;
}

.langSlash{
  opacity:.46;
  transform:translateY(-.03em);
}

/* Language selector belongs to the permanent navigation together with
   the burger and therefore stays visible in immersive desktop galleries. */
body.desktop-gallery-mode #header .headerTools,
body.desktop-gallery-mode #header .langSwitch{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

@media(max-width:780px){
  .headerTools{
    gap:13px;
  }
  .langSwitch{
    font-size:10px;
    gap:2px;
    letter-spacing:.06em;
  }
  .langBtn{
    padding:5px 0;
  }
}

/* German copy can be slightly longer. Keep paragraphs comfortable
   without changing the established overall grid. */
html[lang="de"] .sectionIntro p,
html[lang="de"] .aboutTop p,
html[lang="de"] .infoBlock p,
html[lang="de"] .insightsIntro p,
html[lang="de"] .insightCard p{
  hyphens:auto;
}


/* ================================================================
   v12o · editorial lowercase + larger de/en selector
   ================================================================ */

.langSwitch{
  font-size:13px;
  gap:4px;
  letter-spacing:.075em;
}

.langBtn{
  padding:6px 1px;
}

@media(max-width:780px){
  .langSwitch{
    font-size:12px;
    gap:3px;
  }
  .langBtn{
    padding:6px 0;
  }
}


/* ================================================================
   v12p · landing scroll / swipe navigation
   ================================================================ */

#landing{
  transition:opacity .32s cubic-bezier(.22,.61,.36,1);
}

#landing.landing-exit{
  opacity:0;
  pointer-events:none;
}

#landing .heroWrap,
#landing .heroHint{
  transition:
    opacity .32s cubic-bezier(.22,.61,.36,1),
    transform .32s cubic-bezier(.22,.61,.36,1);
}

#landing.landing-exit .heroWrap,
#landing.landing-exit .heroHint{
  opacity:0;
}

#landing.landing-exit .heroHint{
  transform:translateY(5px);
}

/* The desktop hint appears quietly after the hero has settled. */
#landing .heroHint{
  opacity:0;
  animation:landingHintIn .75s cubic-bezier(.22,.61,.36,1) 1.05s forwards;
}

@keyframes landingHintIn{
  from{
    opacity:0;
    transform:translateY(4px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* On touch/mobile devices the gesture is intentionally left unexplained. */
@media (pointer:coarse), (max-width:780px){
  #landing .heroHint{
    display:none!important;
    animation:none!important;
  }
}

@media (prefers-reduced-motion: reduce){
  #landing,
  #landing .heroWrap,
  #landing .heroHint{
    transition:none!important;
  }
  #landing .heroHint{
    animation:none!important;
    opacity:1;
    transform:none;
  }
}


/* ================================================================
   v12s · overview menu -> landing reverse gesture
   ================================================================ */

#menu{
  transition:opacity .30s cubic-bezier(.22,.61,.36,1);
}

#menu.menu-return-exit{
  opacity:0;
  pointer-events:none;
}

/* Mobile correction:
   .header.overview-right-align is a later desktop rule with 110px right
   padding. On phones it overrode the intended 22px mobile edge after
   swiping from landing to selected work, moving de/en + burger left.
   Keep the same right edge on landing and mobile overview pages. */
@media(max-width:780px){
  .header.overview-right-align{
    padding-right:var(--ui-edge-mobile);
  }
}

@media (prefers-reduced-motion: reduce){
  #menu{
    transition:none!important;
  }
}


/* ================================================================
   v12t · about / insights / contact -> overview menu
   ================================================================ */

#about,
#insights,
#contact{
  transition:opacity .30s cubic-bezier(.22,.61,.36,1);
}

#about.content-return-exit,
#insights.content-return-exit,
#contact.content-return-exit{
  opacity:0;
  pointer-events:none;
}

@media (prefers-reduced-motion: reduce){
  #about,
  #insights,
  #contact{
    transition:none!important;
  }
}


/* ================================================================
   v12v · contact headline exact three-line lockup
   ================================================================ */

#contact .contactHero h1{
  max-width:11.5ch;
}

/* The line breaks are authored in the copy itself and remain unchanged
   on mobile. Keep enough width so no fourth line is introduced. */
@media(max-width:780px){
  #contact .contactHero h1{
    max-width:none;
    font-size:clamp(52px,15.5vw,78px);
    line-height:.9;
  }
}


/* ================================================================
   v12w · mobile contact headline shifted left and fitted to viewport
   ================================================================ */

@media(max-width:780px){
  #contact .contactHero{
    padding-left:18px;
    padding-right:18px;
  }

  #contact .contactHero h1{
    width:100%;
    max-width:none;
    font-size:clamp(42px,11.6vw,52px);
    line-height:.9;
    letter-spacing:-.068em;
    margin-left:-0.035em;
    text-align:left;
    word-break:keep-all;
    overflow-wrap:normal;
  }
}


/* ================================================================
   v12x · expanded werknotizen
   ================================================================ */

#insights .insightCard.insight-featured{
  grid-column:1 / -1;
}

#insights .insightCard.insight-half{
  grid-column:span 6;
}

#insights .insight-featured .insightImage img{
  aspect-ratio:16/7;
}

#insights .insightText{
  max-width:860px;
}

#insights .insightText p{
  margin:0;
}

#insights .insightText p + p{
  margin-top:13px;
}

#insights .insightActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-top:22px;
}

#insights .insightAction{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  border-bottom:1px solid #8f8a82;
  font-size:10px;
  line-height:1.3;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:#3f3d39;
  transition:opacity .22s ease,border-color .22s ease;
}

#insights .insightAction::after{
  content:"→";
  margin-left:8px;
  transform:translateY(-.03em);
}

#insights .insightAction-external::after{
  content:"↗";
}

#insights .insightAction:hover{
  opacity:.62;
  border-color:#3f3d39;
}

#insights .insightAction:focus-visible{
  outline:2px solid currentColor;
  outline-offset:4px;
}

@media(max-width:980px){
  #insights .insightCard.insight-featured,
  #insights .insightCard.insight-half{
    grid-column:span 6;
  }

  #insights .insight-featured .insightImage img{
    aspect-ratio:16/9;
  }
}

@media(max-width:780px){
  #insights .insightCard.insight-featured,
  #insights .insightCard.insight-half{
    grid-column:auto;
  }

  #insights .insightText p{
    font-size:14px;
    line-height:1.66;
  }

  #insights .insightActions{
    margin-top:19px;
  }

  #insights .insightAction{
    font-size:10px;
    min-height:36px;
  }
}


/* ================================================================
   v12y · mobile film swipe return
   ================================================================ */

@media(max-width:780px) and (pointer:coarse){
  #filmProject{
    transition:opacity .28s cubic-bezier(.22,.61,.36,1);
  }

  #filmProject.film-return-exit{
    opacity:0;
    pointer-events:none;
  }
}

@media (prefers-reduced-motion: reduce){
  #filmProject{
    transition:none!important;
  }
}


/* ================================================================
   v12z · werknotizen: trivago / medienhafen + uefa container draw
   ================================================================ */

#insights .insight-final{
  margin-top:2vh;
}

#insights .insight-final .insightImage img{
  aspect-ratio:16/7;
}

#insights .insight-final .insightText{
  max-width:900px;
}

@media(max-width:780px){
  #insights .insight-final{
    margin-top:0;
  }

  #insights .insight-final .insightImage img{
    aspect-ratio:16/10;
  }
}


/* ================================================================
   v13c · Werknotizen cleanup / Neon frame / count
   ================================================================ */

/* Slightly taller Neon Grave image while retaining the wide editorial character. */
#insights .insight-featured:not(.insight-final) .insightImage img{
  aspect-ratio:2 / 1;
}

@media(max-width:780px){
  #insights .insight-featured:not(.insight-final) .insightImage img{
    aspect-ratio:16 / 9;
  }
}


/* ================================================================
   v13d · Werknotizen editorial typography + UEFA prominence
   ================================================================ */

#insights .insightText p{
  font-size:16px;
  line-height:1.62;
  hyphens:none;
  -webkit-hyphens:none;
  word-break:normal;
  overflow-wrap:normal;
}

#insights .insightCard h2,
#insights .insightMeta,
#insights .insightAction{
  hyphens:none;
  -webkit-hyphens:none;
  word-break:normal;
  overflow-wrap:normal;
}

#insights .insightText br{
  display:block;
  content:"";
}

#insights .insightText strong{
  font-weight:600;
  color:#24211d;
}

#insights .insight-final{
  grid-column:1 / -1;
  margin-top:2vh;
}

#insights .insight-final .insightImage img{
  aspect-ratio:16 / 7;
}

#insights .insight-final .insightText{
  max-width:920px;
}

@media(max-width:780px){
  #insights .insightText p{
    font-size:16px;
    line-height:1.64;
  }

  #insights .insight-final{
    grid-column:auto;
    margin-top:0;
  }

  #insights .insight-final .insightImage img{
    aspect-ratio:16 / 10;
  }
}


/* ================================================================
   v13j · mobile hierarchical Work/Film overview navigation
   ================================================================ */

@media(max-width:780px) and (pointer:coarse){
  #workOverview,
  #filmOverview{
    transition:opacity .28s cubic-bezier(.22,.61,.36,1);
  }

  #workOverview.hierarchy-overview-exit,
  #filmOverview.hierarchy-overview-exit{
    opacity:0;
    pointer-events:none;
  }
}

@media(prefers-reduced-motion:reduce){
  #workOverview,
  #filmOverview{
    transition:none!important;
  }
}


/* ================================================================
   v13o · prevent Safari pull-to-refresh during hierarchical back swipe
   ================================================================ */
@media(max-width:780px) and (pointer:coarse){
  body.mobile-overview-native-scroll{
    overscroll-behavior-y:none;
  }

  #menu.active{
    overscroll-behavior-y:none;
  }
}


/* ================================================================
   v13r · mobile touch-first navigation
   Burger is hidden on phones except inside a photographic Work gallery.
   Desktop remains unchanged.
   ================================================================ */
@media(max-width:780px) and (pointer:coarse){
  #header .burger{
    display:none;
  }

  #header.mobile-gallery-burger .burger{
    display:flex;
  }
}


/* ================================================================
   v13s · explicit gallery-end return link
   ================================================================ */

.projectLinks .projectBackLink{
  border-bottom:1px solid rgba(85,85,85,.34);
  padding-bottom:4px;
}

@media(max-width:780px){
  .projectEnd .projectLinks{
    margin-top:46px;
    gap:22px;
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .projectLinks .projectBackLink{
    display:inline-block;
  }
}


/* ================================================================
   v13t · final editorial cleanup
   ================================================================ */
.menuFoot{
  justify-content:flex-end;
}


/* ================================================================
   v13u · mobile privacy headline fit
   ================================================================ */
@media(max-width:780px){
  #privacy .legalPageInner{
    width:calc(100% - 36px);
  }

  #privacy .legalPage h1{
    max-width:100%;
    font-size:clamp(36px,10.2vw,48px);
    line-height:.92;
    letter-spacing:-.052em;
    overflow-wrap:anywhere;
    word-break:normal;
  }
}


/* ================================================================
   v13y · exact responsive two-line brand lockup
   "ralph richter" defines the width; the service line is fitted to it
   with real font-size, never horizontal distortion.
   ================================================================ */

.header .homebrand.homebrand-two{
  width:max-content;
}

.header .homebrand.homebrand-two .brand-name{
  display:block;
  width:max-content;
  transform:none!important;
}

.header .homebrand.homebrand-two .brand-services{
  display:inline-flex;
  width:max-content!important;
  align-items:center;
  justify-content:flex-start!important;
  gap:.42em;
  transform:none!important;
  white-space:nowrap;
}

/* The main name may scale continuously; the service line is fitted by JS. */
.header:not(.compact) .homebrand.homebrand-two .brand-name{
  font-size:clamp(34px,3.35vw,52px);
}

@media(max-width:780px){
  .header:not(.compact) .homebrand.homebrand-two .brand-name{
    font-size:clamp(30px,8.7vw,34px);
  }
  .header.compact .homebrand.homebrand-two .brand-name{
    font-size:17px;
  }
}

/* Pascal attribution */
.aboutQuoteAuthor{
  margin-top:20px;
  font-size:10px;
  line-height:1.3;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#77736b;
}

@media(max-width:780px){
  .aboutQuoteAuthor{
    margin-top:16px;
    font-size:9px;
  }
}


/* ================================================================
   v13z · UEFA Werknotiz: full-image impact frame
   ================================================================ */

#insights .insightCard.insight-final .insightImage{
  background:#ece8e1;
}

#insights .insightCard.insight-final .insightImage img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  display:block;
}

@media(max-width:780px){
  #insights .insightCard.insight-final .insightImage img{
    width:100%;
    height:auto;
    aspect-ratio:auto;
    object-fit:contain;
  }
}


/* ================================================================
   v14e · Über-mich-Fließtext größer + Name schwarz
   ================================================================ */

#about .aboutTop p{
  font-size:20px;
  line-height:1.62;
}

#about .aboutTop .aboutName{
  color:#111;
  font-weight:400;
}

@media(max-width:780px){
  #about .aboutTop p{
    font-size:18px;
    line-height:1.62;
  }
}


/* ================================================================
   v14f · desktop title/menu scale balance
   Name and menu labels now live on almost the same visual scale.
   ================================================================ */

@media(min-width:781px){
  .header:not(.compact) .homebrand.homebrand-two .brand-name{
    font-size:clamp(42px,3.9vw,60px);
  }

  .menuLabel strong,
  .menuCount{
    font-size:clamp(30px,3.85vw,60px);
  }

  /* a little more breathing room for the enlarged two-line title */
  .menuStack{
    padding-top:104px;
  }
}


/* ================================================================
   v14g · actual menu title scale correction
   The menu runs in compact-header mode, so it needs its own large lockup.
   ================================================================ */

@media(min-width:781px){
  .header.compact.menu-brand-large .homebrand.homebrand-two .brand-name{
    font-size:clamp(46px,3.65vw,56px);
    line-height:.86;
  }

  .header.compact.menu-brand-large .homebrand.homebrand-two{
    gap:7px;
  }

  /* service line is still fitted automatically to exactly the same width */
  .header.compact.menu-brand-large .homebrand.homebrand-two .brand-services{
    width:max-content!important;
  }

  #menu .menuLabel strong,
  #menu .menuCount{
    font-size:clamp(34px,3.65vw,56px);
  }

  /* Enough black header space for the now genuinely larger two-line title. */
  #menu .menuStack{
    padding-top:120px;
  }
}


/* ================================================================
   v14h · logo/menu visual balance
   midpoint between the previous too-small and too-large menu lockups
   ================================================================ */

@media(min-width:781px){
  .header.compact.menu-brand-large .homebrand.homebrand-two .brand-name{
    font-size:clamp(42px,3.15vw,48px);
  }

  #menu .menuLabel strong,
  #menu .menuCount{
    font-size:clamp(34px,3.45vw,54px);
  }

  #menu .menuStack{
    padding-top:110px;
  }
}


/* ================================================================
   v14i · logo smaller, header band calmer
   ================================================================ */

@media(min-width:781px){
  .header.compact.menu-brand-large .homebrand.homebrand-two .brand-name{
    font-size:clamp(39px,2.9vw,44px);
  }

  #menu .menuLabel strong,
  #menu .menuCount{
    font-size:clamp(34px,3.35vw,52px);
  }

  /* more black space below the two-line logo */
  #menu .menuStack{
    padding-top:118px;
  }
}


/* ================================================================
   v14j · logo vertically centered in black header band
   ================================================================ */

@media(min-width:781px){
  .header.compact.menu-brand-large{
    height:118px;
    padding:0 160px 0 110px;
    align-items:center;
  }

  .header.compact.menu-brand-large .homebrand.homebrand-two{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:118px;
  }
}


/* ================================================================
   v14k · desktop typography: never split words across lines
   Mobile remains unchanged.
   ================================================================ */

@media(min-width:781px){
  #about,
  #insights,
  #contact,
  #workOverview,
  #filmOverview,
  #filmProject,
  #workProject,
  #privacy,
  #imprint{
    hyphens:none;
    -webkit-hyphens:none;
    overflow-wrap:normal;
    word-break:normal;
  }

  #about p,
  #about li,
  #about h1,
  #about h2,
  #about h3,
  #insights p,
  #insights li,
  #insights h1,
  #insights h2,
  #insights h3,
  #contact p,
  #contact li,
  #contact h1,
  #contact h2,
  #contact h3,
  #workOverview p,
  #workOverview li,
  #workOverview h1,
  #workOverview h2,
  #workOverview h3,
  #filmOverview p,
  #filmOverview li,
  #filmOverview h1,
  #filmOverview h2,
  #filmOverview h3,
  #filmProject p,
  #filmProject li,
  #filmProject h1,
  #filmProject h2,
  #filmProject h3,
  #workProject p,
  #workProject li,
  #workProject h1,
  #workProject h2,
  #workProject h3{
    hyphens:none!important;
    -webkit-hyphens:none!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
}


/* ================================================================
   v14m · LinkedIn line aligned with "fotografie · film · regie"
   desktop only
   ================================================================ */

@media(min-width:781px){
  #contact .contactLinkedin{
    white-space:nowrap;
  }
}


/* v14n · LinkedIn optisch mit Studio-Subline ausgerichtet */
@media (min-width:781px){
  #contact .contactBox p{margin:0;}
  #contact .contactBox > a:first-of-type{display:inline-block;margin:0 0 29px 0;}
  #contact .contactLinkedin{display:inline-block;margin-top:0;white-space:nowrap;}
}

/* ================================================================
   v14o · mobile logo + count rebalance
   Mobile only: make the two-line title about 10% larger and
   the large section counts about 10% smaller.
   ================================================================ */

@media(max-width:780px){
  .header:not(.compact) .homebrand.homebrand-two .brand-name{
    font-size:clamp(33px,9.55vw,37px);
  }

  .header:not(.compact) .homebrand.homebrand-two .brand-services{
    font-size:18.5px;
  }

  .header.compact .homebrand.homebrand-two .brand-name{
    font-size:18.7px;
  }

  .header.compact .homebrand.homebrand-two .brand-services{
    font-size:11px;
  }

  #menu .menuCount{
    font-size:clamp(23px,9vw,47px);
  }
}

/* ================================================================
   v14p · mobile logo centered in the black band + another 10% scale
   The compact/mobile header on the menu view gets a defined band height,
   the logo sits vertically centered, and the section counts calm down.
   ================================================================ */

@media(max-width:780px){
  /* landing + inner mobile title a touch larger */
  .header:not(.compact) .homebrand.homebrand-two .brand-name{
    font-size:clamp(36px,10.4vw,40px);
  }

  .header:not(.compact) .homebrand.homebrand-two .brand-services{
    font-size:20px;
  }

  /* menu/mobile header band */
  .header.compact.menu-brand-large{
    height:124px;
    padding:0 var(--ui-edge-mobile) 0 20px;
    align-items:center;
  }

  .header.compact.menu-brand-large .homebrand.homebrand-two{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:124px;
  }

  .header.compact .homebrand.homebrand-two .brand-name{
    font-size:20.6px;
    line-height:.9;
  }

  .header.compact .homebrand.homebrand-two .brand-services{
    font-size:12px;
    line-height:1;
  }

  /* keep the black band visually balanced under the centered logo */
  #menu .menuStack{
    padding-top:124px;
  }

  /* section counts quieter */
  #menu .menuCount{
    font-size:clamp(21px,8.2vw,42px);
  }
}


/* ================================================================
   v14q · dedicated mobile hero image set
   Desktop hero images remain completely unchanged.
   Mobile uses eight portrait-specific hero images from:
   ../images/hero/images-hero-mobile/
   ================================================================ */

@media(max-width:780px){
  #landing .heroSlide:nth-child(1){
    background-image:url('../images/hero/images-hero-mobile/hero-mobile-001.jpg')!important;
  }
  #landing .heroSlide:nth-child(2){
    background-image:url('../images/hero/images-hero-mobile/hero-mobile-002.jpg')!important;
  }
  #landing .heroSlide:nth-child(3){
    background-image:url('../images/hero/images-hero-mobile/hero-mobile-003.jpg')!important;
  }
  #landing .heroSlide:nth-child(4){
    background-image:url('../images/hero/images-hero-mobile/hero-mobile-004.jpg')!important;
  }
  #landing .heroSlide:nth-child(5){
    background-image:url('../images/hero/images-hero-mobile/hero-mobile-005.jpg')!important;
  }
  #landing .heroSlide:nth-child(6){
    background-image:url('../images/hero/images-hero-mobile/hero-mobile-006.jpg')!important;
  }
  #landing .heroSlide:nth-child(7){
    background-image:url('../images/hero/images-hero-mobile/hero-mobile-007.jpg')!important;
  }
  #landing .heroSlide:nth-child(8){
    background-image:url('../images/hero/images-hero-mobile/hero-mobile-008.jpg')!important;
  }
  #landing .heroSlide:nth-child(9){
    background-image:url('../images/hero/images-hero-mobile/hero-mobile-009.jpg')!important;
  }
  #landing .heroSlide:nth-child(10){
    background-image:url('../images/hero/images-hero-mobile/hero-mobile-0010.jpg')!important;
  }
  #landing .heroSlide:nth-child(11){
    background-image:url('../images/hero/images-hero-mobile/hero-mobile-0011.jpg')!important;
  }
  #landing .heroSlide:nth-child(12){
    background-image:url('../images/hero/images-hero-mobile/hero-mobile-0012.jpg')!important;
  }
  #landing .heroSlide:nth-child(13){
    background-image:url('../images/hero/images-hero-mobile/hero-mobile-0013.jpg')!important;
  }
  #landing .heroSlide:nth-child(14){
    background-image:url('../images/hero/images-hero-mobile/hero-mobile-0014.jpg')!important;
  }
  #landing .heroSlide:nth-child(15){
    background-image:url('../images/hero/images-hero-mobile/hero-mobile-0015.jpg')!important;
  }
  #landing .heroSlide:nth-child(16){
    background-image:url('../images/hero/images-hero-mobile/hero-mobile-0016.jpg')!important;
  }
}


/* ================================================================
   v14u · mobile language switch larger + LinkedIn logo link
   ================================================================ */

@media(max-width:780px){
  .langSwitch{
    font-size:15px;
    gap:4px;
    letter-spacing:.05em;
    transform:translateY(-1px);
  }

  .langBtn{
    padding:5px 0;
  }
}

.contactLinkedin{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  line-height:1;
}

.contactLinkedin .linkedinLogo{
  width:30px;
  height:30px;
  display:block;
}

@media(min-width:781px){
  #contact .contactLinkedin{
    margin-top:2px;
  }

  #contact .contactLinkedin .linkedinLogo{
    width:31px;
    height:31px;
  }
}

@media(max-width:780px){
  #contact .contactLinkedin{
    margin-top:2px;
  }

  #contact .contactLinkedin .linkedinLogo{
    width:28px;
    height:28px;
  }
}


/* ================================================================
   v14x · mobile language selector more prominent
   ================================================================ */

@media(max-width:780px){
  .langSwitch{
    font-size:18px;
    gap:5px;
    letter-spacing:.055em;
    transform:translateY(0);
    padding:5px 10px 6px;
    border-radius:999px;
    background:rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:0 2px 12px rgba(0,0,0,.18);
  }

  .langBtn{
    padding:4px 1px;
    opacity:.72;
    font-weight:500;
    transition:opacity .22s ease, transform .22s ease;
  }

  .langBtn.is-active{
    opacity:1;
    font-weight:600;
    transform:translateY(0);
  }

  .langBtn:hover,
  .langBtn:focus-visible{
    opacity:1;
  }

  .langSlash{
    opacity:.7;
  }
}


/* ================================================================
   v14y · mobile language selector contextual treatment
   Capsule only on landing + main selection/menu view.
   Inner pages keep the clean de/en letters without the extra effect.
   ================================================================ */

@media(max-width:780px){
  /* default on inner pages: clean, readable letters only */
  .langSwitch{
    font-size:15px;
    gap:4px;
    letter-spacing:.05em;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .langBtn{
    opacity:.72;
    font-weight:500;
  }

  .langBtn.is-active{
    opacity:1;
    font-weight:600;
  }

  .langSlash{
    opacity:.68;
  }

  /* landing + main selection/menu: larger with a quieter translucent capsule */
  body.mobile-language-highlight .langSwitch{
    font-size:18px;
    gap:5px;
    letter-spacing:.055em;
    padding:5px 10px 6px;
    border-radius:999px;
    background:rgba(0,0,0,.16);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
    box-shadow:0 2px 10px rgba(0,0,0,.10);
  }

  body.mobile-language-highlight .langBtn{
    opacity:.76;
  }

  body.mobile-language-highlight .langBtn.is-active{
    opacity:1;
  }

  body.mobile-language-highlight .langSlash{
    opacity:.72;
  }
}


/* ================================================================
   v15b · desktop/mobile hero separation + ONE PLAZA desktop hero
   ================================================================ */
@media(min-width:781px){
  #landing .heroSlide.mobileOnlyHero{display:none;}
}
@media(max-width:780px){
  #landing .heroSlide.desktopOnlyHero{display:none;}
}


/* ================================================================
   v15e · Work preview project-size cue as centered odometer
   Reuses the same visual counting language as the main overview.
   ================================================================ */

#workOverview .workitem .thumb{
  position:relative;
  container-type:inline-size;
}

.workTileCount{
  position:absolute;
  left:50%;
  top:78%;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.35em;
  color:#fff;
  opacity:.98;
  transform:translate(-50%,-50%);
  pointer-events:none;
  text-shadow:0 2px 18px rgba(0,0,0,.24);
  font-family:"Clan Pro","ClanPro","Helvetica Neue",Arial,sans-serif;
  text-align:center;
}

.workTileCount .odometer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.03em;
  font-size:clamp(20px,9.8cqw,53px);
  font-weight:400;
  letter-spacing:-.045em;
  line-height:.95;
  color:#fff;
}

.workTileCount .ododigit{
  width:.62em;
  height:.95em;
  overflow:hidden;
  display:inline-block;
}

.workTileCount .odotrack{
  display:block;
  transform:translateY(0);
  will-change:transform;
}

.workTileCount .odotrack span{
  height:.95em;
  display:flex;
  align-items:center;
  justify-content:center;
}

.workTileCount.is-running .odotrack,
.workTileCount.is-done .odotrack{
  transition:transform 1.2s cubic-bezier(.18,.78,.18,1);
}

.workTileCount{
  opacity:.82;
  transition:opacity .28s ease;
}

.workTileCount.is-running{
  opacity:1;
}

.workTileCount.is-done{
  opacity:.82;
}

.workTileCountLabel{
  font-size:clamp(10px,3.2cqw,15px);
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  color:#fff;
  opacity:.96;
}

@media(max-width:780px){
  .workTileCount{
    top:79%;
  }

  .workTileCount .odometer{
    font-size:clamp(21px,11.9cqw,59px);
  }

  .workTileCountLabel{
    font-size:clamp(11px,4cqw,15px);
  }
}

@media(prefers-reduced-motion:reduce){
  .workTileCount .odotrack{
    transition:none!important;
  }
}

/* ================================================================
   v15j · mobile Work gallery burger
   Medium grey keeps the navigation available without competing
   with the centered gallery image.
   ================================================================ */
@media(max-width:780px) and (pointer:coarse){
  #header.mobile-gallery-burger .burger{
    color:#777;
  }
}




/* ================================================================
   v15q · Desktop logo +33% except general menu overview
   "Logo" = ralph richter + fotografie · film · regie.
   Section titles Photography / Film are restored to their original size.
   Mobile remains unchanged.
   ================================================================ */
@media(min-width:781px){
  /* Landing / non-compact logo */
  .header:not(.compact) .homebrand.homebrand-two .brand-name{
    font-size:clamp(56px,5.19vw,80px);
  }

  /* Inner pages, overviews and galleries */
  .header.compact:not(.menu-brand-large) .homebrand.homebrand-two .brand-name{
    font-size:40px;
  }

}


/* ================================================================
   v15v · Photography / Film overview header auto-hide · desktop + mobile
   Photography + Film overview only.
   Downward scroll hides logo/navigation; upward scroll reveals them after
   the existing movement threshold and short delay.
   Project galleries remain unchanged.
   ================================================================ */
#header{
  transition:
    color .7s ease,
    opacity .46s cubic-bezier(.22,.61,.36,1),
    transform .46s cubic-bezier(.22,.61,.36,1);
}

#header.desktop-overview-header-hidden{
  opacity:0;
  transform:translateY(-10px);
}

#header.desktop-overview-header-hidden .homebrand,
#header.desktop-overview-header-hidden .headerTools{
  pointer-events:none;
}

@media(max-width:780px){
  #header.desktop-overview-header-hidden{
    transform:translateY(-6px);
  }
}


/* ================================================================
   v15t · General desktop overview logo -10%
   Only the large menu overview is affected.
   Photography / Film overviews and mobile remain unchanged.
   ================================================================ */
@media(min-width:781px){
  .header.compact.menu-brand-large .homebrand.homebrand-two .brand-name{
    font-size:clamp(35px,2.61vw,40px);
  }
}


/* ================================================================
   v15u · Desktop overview intro text
   Photography + Film only:
   text width follows the first preview image exactly.
   Body copy +2px for readability.
   Mobile remains unchanged.
   ================================================================ */
@media(min-width:781px){
  #workOverview .sectionIntro p,
  #filmOverview .sectionIntro p{
    width:var(--overview-intro-width,450px);
    max-width:none;
    font-size:16px;
  }
}


/* ================================================================
   v15z · Mobile landing logo + language sharper shadow
   ONLY the mobile landing page is affected.
   The glass plates behind both the logo and de/en are removed completely.
   Logo and language selector use the same defined, tighter layered shadow so
   both remain legible over changing hero images without adding graphic boxes.
   ================================================================ */
@media(max-width:780px){
  body.mobile-landing-glass .header:not(.compact) .homebrand.homebrand-two{
    position:relative;
    padding:0;
    margin:0;
    border-radius:0;
    background:transparent;
    border:0;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:none;
  }

  body.mobile-landing-glass .header:not(.compact) .homebrand.homebrand-two .brand-name,
  body.mobile-landing-glass .header:not(.compact) .homebrand.homebrand-two .brand-services{
    text-shadow:
      0 1px 0 rgba(0,0,0,.55),
      0 2px 3px rgba(0,0,0,.35),
      0 4px 8px rgba(0,0,0,.16);
  }

  /* v15z · same defined shadow for de/en, without capsule/glass */
  body.mobile-landing-glass .langSwitch{
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:none;
  }

  body.mobile-landing-glass .langBtn,
  body.mobile-landing-glass .langSlash{
    text-shadow:
      0 1px 0 rgba(0,0,0,.55),
      0 2px 3px rgba(0,0,0,.35),
      0 4px 8px rgba(0,0,0,.16);
  }

  body.mobile-landing-glass .langBtn{
    opacity:.74;
  }

  body.mobile-landing-glass .langBtn.is-active{
    opacity:.96;
  }

  body.mobile-landing-glass .langSlash{
    opacity:.68;
  }
}


/* v16b · the cradle: missing 003 corrected in JS; layout unchanged. */


/* ================================================================
   v16d · Landing fine tuning update
   1) The Cradle desktop hero uses image 0033 and is anchored to the
      bottom edge of the frame, so the lower person is visible from the
      first moment.
   2) de/en selector remains +15% in size.
   3) Desktop landing hint remains aligned with the logo's left edge.
   ================================================================ */

@media(min-width:781px){
  #landing .heroSlide.cradleHero{
    background-position:center 100%;
  }

  #landing .heroHint{
    left:110px;
  }
}

.langSwitch{
  font-size:15px;
}

@media(max-width:780px){
  .langSwitch{
    font-size:14px;
  }
}


/* v16e · the cradle project text update only; layout unchanged. */

/* v16f · the cradle text update only; layout unchanged. */

/* v16g · hero shuffle is JavaScript-only; visual CSS unchanged. */


/* ================================================================
   v16h · desktop gallery: burger + de/en join immersive UI fade
   Desktop/fine-pointer only. Mobile behaviour remains unchanged.
   In the 3x3 gallery overview the complete header UI stays visible.
   ================================================================ */
@media (min-width:901px) and (pointer:fine){

  body.desktop-gallery-mode #header .headerTools,
  body.desktop-gallery-mode #header .burger,
  body.desktop-gallery-mode #header .langSwitch{
    transition:
      opacity .90s cubic-bezier(.22,.61,.36,1),
      transform .90s cubic-bezier(.22,.61,.36,1),
      visibility 0s linear 0s;
  }

  body.desktop-gallery-mode.desktop-gallery-ui-hidden #header .headerTools,
  body.desktop-gallery-mode.desktop-gallery-ui-hidden #header .burger,
  body.desktop-gallery-mode.desktop-gallery-ui-hidden #header .langSwitch{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  body.desktop-gallery-mode.desktop-gallery-ui-hidden #header .headerTools{
    transform:translateY(-3px);
  }

  body.desktop-gallery-mode.gallery-overview-visible #header .headerTools,
  body.desktop-gallery-mode.gallery-overview-visible #header .burger,
  body.desktop-gallery-mode.gallery-overview-visible #header .langSwitch{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:auto!important;
  }
}

/* v16i · active gallery thumbnail underline changed from subtle grey/black to clear red. */


/* ================================================================
   v16j · desktop trackpad hierarchy transition
   Desktop only; mobile gesture presentation remains unchanged.
   ================================================================ */
@media (min-width:901px) and (pointer:fine){
  #workProject,
  #filmProject,
  #workOverview,
  #filmOverview{
    transition:opacity .24s cubic-bezier(.22,.61,.36,1);
  }

  #workProject.desktop-hierarchy-exit,
  #filmProject.desktop-hierarchy-exit,
  #workOverview.desktop-hierarchy-exit,
  #filmOverview.desktop-hierarchy-exit{
    opacity:0;
    pointer-events:none;
  }
}

@media (prefers-reduced-motion:reduce){
  #workProject,
  #filmProject,
  #workOverview,
  #filmOverview{
    transition:none!important;
  }
}


/* v16k · mobile landing logo + de/en shadow intensity reduced by ~33%.
   Geometry/blur remains unchanged; only shadow opacity is reduced. */

/* v16l · desktop logo shadow opacity reduced by ~33%.
   Blur/radius/offset remain unchanged.
   Desktop de/en had no text-shadow and therefore remains unchanged. */


/* ================================================================
   v16o · photography overview intro follows the rightmost tile
   >780px only:
   - 2 or 3+ images in first row: paragraph matches only the rightmost
     image, flush with its left and right edges.
   - 1 image in first row: paragraph occupies only the right third
     of that image and remains flush with its right edge.
   Mobile/collapsed layout remains unchanged.
   ================================================================ */
@media(min-width:781px){
  #workOverview .sectionIntro p{
    grid-column:1 / -1;
    width:var(--work-intro-width,100%);
    max-width:none;
    margin-left:var(--work-intro-left,0px);
    justify-self:start;
  }
}

/* v16o · Work intro alignment refinement only; layout otherwise unchanged. */

/* v16p · source-backed photography project texts only; layout unchanged. */

/* v16q · project-copy/data update only; layout unchanged. */


/* ================================================================
   v16r · editorial project leaf over first gallery image
   Desktop/fine pointer only. The old end page remains fully intact
   for mobile and non-hover layouts.
   ================================================================ */

@media (min-width:901px) and (pointer:fine){
  body.desktop-gallery-mode #workProject .frame{
    position:relative;
    perspective:1400px;
  }

  /* On desktop the information has moved to the first photograph.
     Removing the old horizontal end page prevents duplicate content. */
  body.desktop-gallery-mode #workProject .projectEnd{
    display:none!important;
  }

  #workProject .projectLeaf{
    --leaf-opacity:1;
    --leaf-shift:0px;
    --leaf-z:0px;
    --leaf-rotate-y:0deg;
    --leaf-rotate-x:0deg;
    --leaf-rotate-z:0deg;
    --leaf-edge-opacity:.065;
    --leaf-shadow-opacity:.045;
    --leaf-curl-width:14px;
    --leaf-curl-rotate:0deg;
    --leaf-curl-z:0px;
    --leaf-curl-opacity:.10;
    --leaf-curl-shadow:.025;
    --leaf-curl-highlight:.05;
    --leaf-crease-inset:0px;
    --leaf-crease-opacity:.025;
    --leaf-base-mix:1;
    --leaf-flex-mix:0;

    position:absolute;
    z-index:24;
    box-sizing:border-box;
    overflow:visible;
    pointer-events:none;
    transform-origin:left center;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

    opacity:var(--leaf-opacity);
    transform:
      perspective(1400px)
      translate3d(var(--leaf-shift),0,var(--leaf-z))
      rotateY(var(--leaf-rotate-y))
      rotateX(var(--leaf-rotate-x))
      rotateZ(var(--leaf-rotate-z));

  }


  #workProject .projectLeafBase,
  #workProject .projectLeafFlex{
    position:absolute;
    inset:0;
  }

  #workProject .projectLeafBase{
    z-index:1;
    opacity:var(--leaf-base-mix);
  }

  #workProject .projectLeafPaper,
  #workProject .projectLeafSliceSurface{
    position:absolute;
    inset:0;
    box-sizing:border-box;
    overflow:hidden;
    background:
      linear-gradient(
        102deg,
        rgba(252,249,240,.91) 0%,
        rgba(248,243,231,.85) 66%,
        rgba(241,233,216,.75) 100%
      );
  }

  #workProject .projectLeafPaper{
    -webkit-backdrop-filter:blur(.7px) saturate(.88);
    backdrop-filter:blur(.7px) saturate(.88);
    box-shadow:
      5px 0 20px rgba(30,24,17,var(--leaf-shadow-opacity)),
      1px 0 2px rgba(30,24,17,.045),
      inset -1px 0 rgba(86,72,51,.08);
  }

  #workProject .projectLeafFlex{
    z-index:2;
    opacity:var(--leaf-flex-mix);
    perspective:1100px;
    transform-style:preserve-3d;
    pointer-events:none;
  }

  #workProject .projectLeafSlice{
    --slice-shade:0;
    --slice-highlight:.03;
    position:absolute;
    top:0;
    height:100%;
    overflow:hidden;
    transform-origin:left center;
    transform-style:preserve-3d;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    will-change:transform;
  }

  #workProject .projectLeafSliceSurface{
    top:0;
    bottom:auto;
    right:auto;
    transform:none;
  }

  /* Very soft alternating light and shade is what makes adjacent strips
     read as one gently bending sheet instead of rigid panels. */
  #workProject .projectLeafSlice::after{
    content:"";
    position:absolute;
    z-index:8;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(
        90deg,
        rgba(52,40,26,var(--slice-shade)) 0%,
        rgba(52,40,26,0) 38%,
        rgba(255,255,255,0) 63%,
        rgba(255,255,255,var(--slice-highlight)) 100%
      );
  }

  #workProject .projectLeafSlice .projectLeafInner{
    position:absolute;
    inset:0;
  }

  /* A widening curl zone at the free paper edge. It is deliberately
     low-contrast: the form should be felt before it is consciously seen. */
  #workProject .projectLeaf::before{
    content:"";
    position:absolute;
    z-index:6;
    top:0;
    right:-1px;
    width:var(--leaf-curl-width);
    height:100%;
    opacity:var(--leaf-curl-opacity);
    transform-origin:right center;
    transform:
      perspective(900px)
      translateZ(var(--leaf-curl-z))
      rotateY(var(--leaf-curl-rotate));
    background:
      linear-gradient(
        90deg,
        rgba(92,73,49,0) 0%,
        rgba(92,73,49,var(--leaf-curl-shadow)) 48%,
        rgba(255,255,255,var(--leaf-curl-highlight)) 76%,
        rgba(250,245,234,.18) 100%
      );
    box-shadow:
      -5px 0 12px rgba(44,34,23,calc(var(--leaf-curl-shadow) * .7));
    pointer-events:none;
  }

  /* The soft crease migrates inward as the page opens. */
  #workProject .projectLeaf::after{
    content:"";
    position:absolute;
    z-index:7;
    top:2%;
    right:var(--leaf-crease-inset);
    width:10px;
    height:96%;
    opacity:var(--leaf-crease-opacity);
    transform:translateX(50%);
    background:
      linear-gradient(
        90deg,
        rgba(74,58,39,0) 0%,
        rgba(74,58,39,.22) 44%,
        rgba(255,255,255,.28) 62%,
        rgba(255,255,255,0) 100%
      );
    filter:blur(1.1px);
    pointer-events:none;
  }

  #workProject .projectLeafInner{
    position:relative;
    z-index:4;
    box-sizing:border-box;
    width:100%;
    height:100%;
    padding:
      0
      clamp(20px,2vw,34px)
      clamp(24px,2.35vw,42px)
      clamp(22px,2.15vw,38px);
    display:grid;
    grid-template-rows:34% auto auto auto 1fr;
    align-items:start;
  }

  #workProject .projectLeafMeta{grid-row:2}
  #workProject .projectLeafTitle{grid-row:3}
  #workProject .projectLeafText{grid-row:4}

  #workProject .projectLeafMeta{
    width:100%;
    margin:0 0 clamp(12px,1.25vw,20px);
    padding-top:10px;
    border-top:1px solid rgba(48,43,35,.22);
    font-size:clamp(8px,.61vw,10px);
    line-height:1.35;
    letter-spacing:.105em;
    text-transform:uppercase;
    color:rgba(51,47,40,.68);
  }

  #workProject .projectLeafTitle{
    margin:0 0 clamp(14px,1.35vw,22px);
    max-width:96%;
    font-size:clamp(45px,4.31vw,77.5px);
    line-height:.90;
    letter-spacing:-.055em;
    font-weight:400;
    color:#25221d;
  }

  #workProject .projectLeafText{
    margin:0;
    max-width:96%;
    font-size:clamp(14.15px,.97vw,16.65px);
    line-height:1.46;
    letter-spacing:-.008em;
    color:rgba(47,43,36,.90);
    text-wrap:pretty;
  }
}

/* The leaf does not exist as a layout element on mobile/tablet.
   The established final project page is used there unchanged. */
@media (max-width:900px), (pointer:coarse){
  #workProject .projectLeaf{
    display:none!important;
  }
}

@media (prefers-reduced-motion:reduce){
  #workProject .projectLeaf{
    transform:none!important;
  }
  #workProject .projectLeafBase{
    opacity:1!important;
  }
  #workProject .projectLeafFlex{
    display:none!important;
  }
}

/* v16s · upper third kept empty; larger title; paper 7 percentage points lighter; progressive midpoint curl. */

/* v16t · 10-slice organic page bend; body type +~2pt; project title +25%. */


/* ================================================================
   v16u · continuous fold-out page
   Visual model: the left edge is a fixed hinge on the image edge.
   The sheet stays continuous; only its free right side develops a
   broad, soft curl. This replaces the segmented v16t deformation.
   ================================================================ */

@media (min-width:901px) and (pointer:fine){

  #workProject .projectLeaf{
    --paper-bend-y:0deg;
    --paper-skew-y:0deg;
    --paper-scale-x:1;
    --paper-scale-y:1;
    --paper-lift:0px;
    --paper-radius-top:3px;
    --paper-radius-bottom:3px;
    --hinge-shadow-opacity:.025;
    --leaf-curl-shift-x:0px;
    --leaf-curl-shift-y:0px;
    --leaf-curl-roll:0deg;
    --leaf-valley-width:22px;
    --leaf-valley-right:0px;
    --leaf-valley-opacity:.012;

    transform-origin:left center!important;
  }

  /* No segmented visual layer whatsoever. */
  #workProject .projectLeafFlex{
    display:none!important;
    opacity:0!important;
  }

  #workProject .projectLeafBase{
    opacity:1!important;
    transform-style:preserve-3d;
  }

  /* The paper itself is one continuous surface and bends slightly
     inside the larger hinge rotation. */
  #workProject .projectLeafPaper{
    overflow:visible;
    transform-origin:left center;
    transform:
      perspective(1150px)
      translateZ(var(--paper-lift))
      rotateY(var(--paper-bend-y))
      skewY(var(--paper-skew-y))
      scaleX(var(--paper-scale-x))
      scaleY(var(--paper-scale-y));

    border-top-right-radius:var(--paper-radius-top);
    border-bottom-right-radius:var(--paper-radius-bottom);

    box-shadow:
      inset 1px 0 rgba(78,62,42,var(--hinge-shadow-opacity)),
      7px 1px 24px rgba(30,24,17,var(--leaf-shadow-opacity)),
      1px 0 2px rgba(30,24,17,.04);

    will-change:transform,border-radius;
  }

  /* Remove the old outer curl/crease graphics from v16s/v16t. */
  #workProject .projectLeaf::before,
  #workProject .projectLeaf::after{
    display:none!important;
  }

  /* Broad flexible free edge. It is not a second rigid page: the
     low opacity lets the original printed surface remain visible
     through the bend, which creates one continuous sheet. */
  #workProject .projectLeafPaper::before{
    content:"";
    position:absolute;
    z-index:10;
    top:-1.2%;
    right:-2px;
    width:var(--leaf-curl-width);
    height:102.4%;
    pointer-events:none;
    opacity:var(--leaf-curl-opacity);
    transform-origin:left center;
    transform:
      perspective(880px)
      translate3d(
        var(--leaf-curl-shift-x),
        var(--leaf-curl-shift-y),
        var(--leaf-curl-z)
      )
      rotateY(var(--leaf-curl-rotate))
      rotateZ(var(--leaf-curl-roll));

    border-radius:
      58% 3px 4px 56%
      /
      13% 48% 52% 15%;

    background:
      radial-gradient(
        120% 84% at 92% 48%,
        rgba(255,255,255,var(--leaf-curl-highlight)) 0%,
        rgba(255,255,255,calc(var(--leaf-curl-highlight) * .58)) 22%,
        rgba(113,89,58,calc(var(--leaf-curl-shadow) * .78)) 47%,
        rgba(78,58,37,var(--leaf-curl-shadow)) 62%,
        rgba(248,243,231,.04) 82%,
        rgba(248,243,231,0) 100%
      );

    box-shadow:
      -8px 1px 18px rgba(42,32,20,calc(var(--leaf-curl-shadow) * .70)),
      inset 3px 0 8px rgba(255,255,255,calc(var(--leaf-curl-highlight) * .50));

    filter:blur(.15px);
    will-change:transform,width,opacity;
  }

  /* Instead of a narrow technical crease, use one broad shallow
     shadow valley that migrates inward as the sheet opens. */
  #workProject .projectLeafPaper::after{
    content:"";
    position:absolute;
    z-index:9;
    top:1.5%;
    bottom:1.5%;
    right:var(--leaf-valley-right);
    width:var(--leaf-valley-width);
    pointer-events:none;
    opacity:var(--leaf-valley-opacity);

    background:
      radial-gradient(
        ellipse at 54% 50%,
        rgba(60,45,29,.16) 0%,
        rgba(60,45,29,.075) 26%,
        rgba(255,255,255,.07) 52%,
        rgba(255,255,255,0) 76%
      );

    filter:blur(4px);
    transform:translateX(50%);
  }

  /* Never expose technical banding left over from earlier versions. */
  #workProject .projectLeafSlice,
  #workProject .projectLeafSliceSurface{
    display:none!important;
  }
}

@media (prefers-reduced-motion:reduce){
  #workProject .projectLeafPaper{
    transform:none!important;
  }
  #workProject .projectLeafPaper::before,
  #workProject .projectLeafPaper::after{
    display:none!important;
  }
}

/* v16u · fixed-left fold-out mechanism, broad continuous paper bow, no segmentation. */


/* ================================================================
   v16v · softer organic paper contour
   - leaf reaches full disappearance at 75% image width
   - bend zone is rounded and less rigid
   - still left-hinged, without any hand being shown
   ================================================================ */

@media (min-width:901px) and (pointer:fine){
  #workProject .projectLeaf{
    --paper-top-inset-a:4px;
    --paper-top-inset-b:8px;
    --paper-bottom-inset-a:4px;
    --paper-bottom-inset-b:8px;
    --paper-waist-inset:7px;
    --paper-edge-relax:2px;
    --leaf-valley-skew:0deg;
  }

  #workProject .projectLeafPaper{
    clip-path:polygon(
      0% 0%,
      calc(100% - var(--paper-top-inset-a)) 0%,
      calc(100% - var(--paper-top-inset-b)) 8%,
      100% 22%,
      calc(100% - var(--paper-edge-relax)) 38%,
      calc(100% - var(--paper-waist-inset)) 50%,
      calc(100% - var(--paper-edge-relax)) 62%,
      100% 78%,
      calc(100% - var(--paper-bottom-inset-b)) 92%,
      calc(100% - var(--paper-bottom-inset-a)) 100%,
      0% 100%
    );

    box-shadow:
      inset 1px 0 rgba(78,62,42,var(--hinge-shadow-opacity)),
      9px 2px 28px rgba(30,24,17,var(--leaf-shadow-opacity)),
      1px 0 2px rgba(30,24,17,.04);
  }

  /* broader, softer bend shadow so the page reads as flexible paper */
  #workProject .projectLeafPaper::after{
    width:var(--leaf-valley-width);
    right:var(--leaf-valley-right);
    opacity:var(--leaf-valley-opacity);
    background:
      radial-gradient(
        ellipse at 48% 50%,
        rgba(55,42,28,.18) 0%,
        rgba(55,42,28,.10) 20%,
        rgba(255,255,255,.07) 48%,
        rgba(255,255,255,0) 76%
      );
    filter:blur(5.5px);
    transform:translateX(50%) skewY(var(--leaf-valley-skew));
  }

  /* the free edge becomes rounder and softer as it opens */
  #workProject .projectLeafPaper::before{
    border-radius:
      62% 8px 10px 60%
      /
      18% 52% 56% 22%;
    box-shadow:
      -10px 2px 22px rgba(42,32,20,calc(var(--leaf-curl-shadow) * .72)),
      inset 4px 0 10px rgba(255,255,255,calc(var(--leaf-curl-highlight) * .52));
  }
}

/* v16v · soft rounded bend inspired by a real paper page held at one corner. */


/* ================================================================
   v16w · straight-edged page curl
   The sheet keeps a perfectly straight magazine-page outline.
   Curvature exists only inside the paper surface.
   ================================================================ */

@media (min-width:901px) and (pointer:fine){

  #workProject .projectLeaf{
    --leaf-edge-line-opacity:.05;
  }

  /* Explicitly undo the organic contour experiment from v16v. */
  #workProject .projectLeafPaper{
    clip-path:none!important;
    border-radius:0!important;
    border-top-right-radius:0!important;
    border-bottom-right-radius:0!important;
    overflow:visible;
  }

  /* Curl surface: a straight rectangular strip, hinged along its own
     left edge and rotating toward the viewer. No rounded outer contour. */
  #workProject .projectLeafPaper::before{
    display:block!important;
    content:"";
    position:absolute;
    z-index:10;
    top:0;
    right:0;
    width:var(--leaf-curl-width);
    height:100%;
    opacity:var(--leaf-curl-opacity);
    pointer-events:none;

    transform-origin:left center;
    transform:
      perspective(900px)
      translate3d(
        var(--leaf-curl-shift-x),
        var(--leaf-curl-shift-y),
        var(--leaf-curl-z)
      )
      rotateY(var(--leaf-curl-rotate))
      rotateZ(var(--leaf-curl-roll));

    border-radius:0!important;

    background:
      linear-gradient(
        90deg,
        rgba(54,42,29,0) 0%,
        rgba(54,42,29,calc(var(--leaf-curl-shadow) * .36)) 18%,
        rgba(54,42,29,var(--leaf-curl-shadow)) 37%,
        rgba(255,255,255,calc(var(--leaf-curl-highlight) * .42)) 54%,
        rgba(255,255,255,var(--leaf-curl-highlight)) 70%,
        rgba(245,239,226,.20) 86%,
        rgba(245,239,226,.05) 100%
      );

    box-shadow:
      -10px 0 20px rgba(42,32,20,calc(var(--leaf-curl-shadow) * .62)),
      inset 3px 0 7px rgba(255,255,255,calc(var(--leaf-curl-highlight) * .46));

    filter:none;
    will-change:transform,width,opacity;
  }

  /* Broad shadow trough under the fold. It gives the impression of a
     rounded bending radius without altering the rectangular page edge. */
  #workProject .projectLeafPaper::after{
    display:block!important;
    content:"";
    position:absolute;
    z-index:9;
    top:0;
    bottom:0;
    right:var(--leaf-valley-right);
    width:var(--leaf-valley-width);
    opacity:var(--leaf-valley-opacity);
    pointer-events:none;

    transform:translateX(50%) skewY(var(--leaf-valley-skew));

    background:
      linear-gradient(
        90deg,
        rgba(45,34,22,0) 0%,
        rgba(45,34,22,.07) 21%,
        rgba(45,34,22,.18) 43%,
        rgba(255,255,255,.10) 58%,
        rgba(255,255,255,.035) 74%,
        rgba(255,255,255,0) 100%
      );

    filter:blur(6px);
  }

  /* Straight free edge remains visible as a very fine paper line. */
  #workProject .projectLeafPaper{
    border-right:
      1px solid rgba(72,61,45,var(--leaf-edge-line-opacity));
  }
}

@media (prefers-reduced-motion:reduce){
  #workProject .projectLeafPaper::before,
  #workProject .projectLeafPaper::after{
    display:none!important;
  }
}

/* v16w · rectangular magazine-page edge + right-side page curl. */


/* ================================================================
   v16x · live-text page curl
   the outer page edge stays straight, but the upper-right paper zone
   bends increasingly and carries a deformed copy of the actual text.
   ================================================================ */

@media (min-width:901px) and (pointer:fine){
  #workProject .projectLeaf{
    --curl-band-width:18px;
    --curl-band-opacity:.08;
    --curl-band-z:0px;
    --curl-band-shift-x:0px;
    --curl-band-shift-y:0px;
    --curl-band-rotate-y:0deg;
    --curl-band-rotate-x:0deg;
    --curl-band-rotate-z:0deg;
    --curl-inner-skew-y:0deg;
    --curl-inner-scale-y:1;
    --curl-inner-scale-x:1;
    --curl-highlight:.03;
    --curl-shadow:.015;
  }

  /* hide the purely graphic curl of v16w; the curl now carries live content */
  #workProject .projectLeafPaper::before{
    display:none!important;
  }

  #workProject .projectLeafPaper::after{
    right:var(--leaf-valley-right);
    width:var(--leaf-valley-width);
    opacity:var(--leaf-valley-opacity);
    transform:translateX(50%) skewY(var(--leaf-valley-skew));
    background:
      linear-gradient(
        90deg,
        rgba(45,34,22,0) 0%,
        rgba(45,34,22,.055) 18%,
        rgba(45,34,22,.16) 42%,
        rgba(255,255,255,.11) 60%,
        rgba(255,255,255,.03) 76%,
        rgba(255,255,255,0) 100%
      );
    filter:blur(6px);
  }

  #workProject .projectLeafCurl{
    position:absolute;
    top:0;
    right:0;
    width:var(--curl-band-width);
    height:100%;
    z-index:14;
    overflow:hidden;
    pointer-events:none;
    opacity:var(--curl-band-opacity);
    transform-origin:left top;
    transform:
      perspective(950px)
      translate3d(
        var(--curl-band-shift-x),
        var(--curl-band-shift-y),
        var(--curl-band-z)
      )
      rotateY(var(--curl-band-rotate-y))
      rotateX(var(--curl-band-rotate-x))
      rotateZ(var(--curl-band-rotate-z));
    will-change:transform,width,opacity;
  }

  #workProject .projectLeafCurlPaper{
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
    background:
      linear-gradient(
        90deg,
        rgba(54,42,29,0) 0%,
        rgba(54,42,29,calc(var(--curl-shadow) * .25)) 16%,
        rgba(54,42,29,var(--curl-shadow)) 36%,
        rgba(255,255,255,calc(var(--curl-highlight) * .34)) 54%,
        rgba(255,255,255,var(--curl-highlight)) 72%,
        rgba(245,239,226,.18) 88%,
        rgba(245,239,226,.04) 100%
      );
    box-shadow:
      -10px 0 22px rgba(42,32,20,calc(var(--curl-shadow) * .58)),
      inset 3px 0 8px rgba(255,255,255,calc(var(--curl-highlight) * .44));
    border-left:1px solid rgba(72,61,45,.06);
  }

  #workProject .projectLeafCurlPaper::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,calc(var(--curl-highlight) * .20)) 0%,
        rgba(255,255,255,0) 24%,
        rgba(58,44,29,0) 72%,
        rgba(58,44,29,calc(var(--curl-shadow) * .22)) 100%
      );
    pointer-events:none;
  }

  #workProject .projectLeafCurlInner{
    position:absolute;
    top:0;
    right:0;
    width:var(--project-leaf-width, 100%);
    height:100%;
    transform-origin:right top;
    transform:
      translateX(calc(-1 * (var(--project-leaf-width, 100%) - var(--curl-band-width))))
      skewY(var(--curl-inner-skew-y))
      scaleY(var(--curl-inner-scale-y))
      scaleX(var(--curl-inner-scale-x));
  }

  #workProject .projectLeafCurlInner .projectLeafInner{
    position:absolute;
    inset:0;
  }

  #workProject .projectLeafCurlInner .projectLeafMeta,
  #workProject .projectLeafCurlInner .projectLeafTitle,
  #workProject .projectLeafCurlInner .projectLeafText{
    color:#25221d;
  }

  /* keep the straight magazine edge visible beneath the curl */
  #workProject .projectLeafPaper{
    border-right:1px solid rgba(72,61,45,var(--leaf-edge-line-opacity));
  }
}

@media (prefers-reduced-motion:reduce){
  #workProject .projectLeafCurl{
    display:none!important;
  }
}

/* v16x · live content curl band with stronger upper-right bend and text deformation. */


/* ================================================================
   v16y · WebGL deformable paper mesh
   The actual page content is rendered as one texture onto a dense mesh.
   No CSS strips are involved; typography follows the curved geometry.
   ================================================================ */

@media (min-width:901px) and (pointer:fine){
  #workProject .projectLeaf.projectLeafWebGLReady{
    opacity:1!important;
    transform:none!important;
    perspective:none!important;
    filter:none!important;
  }

  #workProject .projectLeaf.projectLeafWebGLReady > .projectLeafBase,
  #workProject .projectLeaf.projectLeafWebGLReady > .projectLeafCurl,
  #workProject .projectLeaf.projectLeafWebGLReady > .projectLeafFlex,
  #workProject .projectLeaf.projectLeafWebGLReady::before,
  #workProject .projectLeaf.projectLeafWebGLReady::after{
    opacity:0!important;
    visibility:hidden!important;
  }

  #workProject .projectLeafMesh{
    position:absolute;
    z-index:30;
    left:-18%;
    top:-8%;
    width:136%;
    height:116%;
    display:block;
    pointer-events:none;
    transform:none;
    transform-origin:left center;
    will-change:opacity,filter;
  }
}

@media (prefers-reduced-motion:reduce){
  #workProject .projectLeaf.projectLeafWebGLReady > .projectLeafBase{
    opacity:1!important;
    visibility:visible!important;
  }
  #workProject .projectLeafMesh{
    display:none!important;
  }
}

/* v16y · continuous GPU paper deformation, including live typography. */

/* v16z · forward-facing WebGL page curl with diagonal curl axis. */

/* v16ab · WebGL orientation/headline correction; visual layout otherwise unchanged. */



/* v16ad · no separate title overlay; headline lives only on the paper surface. */

/* v16ae · no visual CSS change; WebGL title rendering bug fixed in JS. */


/* ================================================================
   v16af · return-to-overview marker on final gallery photograph
   Fixed to the photograph itself, with a quiet editorial label.
   ================================================================ */

#workProject .galleryEndBack{
  position:absolute;
  z-index:52;
  margin:0;
  border:1px solid rgba(221,123,41,.22);
  border-radius:999px;
  padding:11px 16px 10px;
  background:rgba(255,249,244,.88);
  -webkit-backdrop-filter:blur(10px) saturate(1.08);
  backdrop-filter:blur(10px) saturate(1.08);
  box-shadow:
    0 10px 26px rgba(48,28,10,.12),
    0 2px 8px rgba(48,28,10,.07),
    inset 0 1px 0 rgba(255,255,255,.72);
  color:#d96b1d;
  font:inherit;
  font-size:13px;
  font-weight:500;
  line-height:1;
  letter-spacing:.02em;
  text-transform:lowercase;
  white-space:nowrap;
  cursor:pointer;
  opacity:.98;
  transition:
    opacity .18s ease,
    background-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}

#workProject .galleryEndBack:hover,
#workProject .galleryEndBack:focus-visible{
  opacity:1;
  background:rgba(255,252,248,.97);
  color:#c95d12;
  transform:translateY(-1px);
  box-shadow:
    0 14px 30px rgba(48,28,10,.14),
    0 3px 10px rgba(48,28,10,.08),
    inset 0 1px 0 rgba(255,255,255,.78);
  outline:none;
}

@media (max-width:900px){
  #workProject .galleryEndBack{
    padding:10px 14px 9px;
    font-size:12px;
  }
}

/* v16af · project content fit and final-image navigation. */


/* ================================================================
   v16ag · desktop magnetic Work-gallery input
   Temporarily disable native scroll snap while physical wheel/trackpad
   movement is being followed. JS then performs the magnetic settle.
   ================================================================ */

@media (min-width:901px) and (pointer:fine){
  #workRail.desktop-magnet-gesture,
  #workRail.desktop-magnet-settling{
    scroll-snap-type:none!important;
    scroll-behavior:auto!important;
  }

  #workRail .frame{
    scroll-snap-stop:always;
  }
}

/* v16ag · cursor/hover controls remain unchanged. */

/* v16ah · faster magnetic settle; cursor and existing gallery UI unchanged. */

/* v16ai · more prominent apple-like rounded return button in warm orange at the lower-right of the final image. */

/* v16aj · copy-only update; no visual changes. */

/* v16ak · text-only update; layout unchanged. */

/* v16al · text-only update. */

/* v16am · project leaf transparency reduced by 10 percentage points for a slightly denser paper surface. */

/* v16an · no CSS visual change; delayed fade handled in JS. */

/* v16ao · no CSS change; magnet threshold tuned in JS. */


/* ================================================================
   v16aq · one continuous gallery top scrim
   Replaces individual reading plates with a single, very soft tonal
   field. It supports the complete top UI without creating visible boxes.
   ================================================================ */

@media (min-width:901px) and (pointer:fine){
  body.desktop-gallery-mode #workProject::before,
  body.desktop-gallery-mode #filmProject::before{
    content:"";
    position:absolute;
    z-index:44;
    left:0;
    right:0;
    top:0;
    height:190px;
    pointer-events:none;
    background:
      linear-gradient(
        180deg,
        rgba(250,249,245,.43) 0%,
        rgba(250,249,245,.34) 34%,
        rgba(250,249,245,.17) 67%,
        rgba(250,249,245,0) 100%
      );
    -webkit-backdrop-filter:blur(3px) saturate(.97);
    backdrop-filter:blur(3px) saturate(.97);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 56%,rgba(0,0,0,.68) 74%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 56%,rgba(0,0,0,.68) 74%,transparent 100%);
    opacity:1;
    transition:
      opacity .55s cubic-bezier(.22,.61,.36,1),
      visibility 0s linear 0s;
  }

  /* Small optical support only: no additional boxes or pills. */
  body.desktop-gallery-mode #header .homebrand,
  body.desktop-gallery-mode #header .langSwitch,
  body.desktop-gallery-mode #workProject .galleryMeta,
  body.desktop-gallery-mode #workProject .galleryCount{
    text-shadow:
      0 1px 1px rgba(255,255,255,.32),
      0 0 7px rgba(250,249,245,.22);
  }

  body.desktop-gallery-mode.desktop-gallery-ui-hidden #workProject::before,
  body.desktop-gallery-mode.desktop-gallery-ui-hidden #filmProject::before{
    opacity:0;
    visibility:hidden;
    transition:
      opacity .55s cubic-bezier(.22,.61,.36,1),
      visibility 0s linear .55s;
  }

  body.desktop-gallery-mode.gallery-overview-visible #workProject::before{
    opacity:0;
    visibility:hidden;
  }
}

/* v16aq · single full-width top tonal field; no individual UI plates. */

/* v16ar · gallery 3x3 overview icon enlarged by roughly 30%, gallery counter enlarged by 2px and set to black. */


/* ================================================================
   v16as · gallery UI uses a softer 80%-black over images
   This keeps the interface readable on both bright and dark motifs
   without the severity of absolute black.
   ================================================================ */

@media (min-width:901px) and (pointer:fine){
  body.desktop-gallery-mode #header .homebrand,
  body.desktop-gallery-mode #header .langSwitch,
  body.desktop-gallery-mode #header .burger,
  body.desktop-gallery-mode #workProject .galleryMeta,
  body.desktop-gallery-mode #workProject .galleryCount,
  body.desktop-gallery-mode #workProject .galleryOverviewBtn,
  body.desktop-gallery-mode #workProject .navBtn,
  body.desktop-gallery-mode #workProject .cursorHint{
    color:rgba(17,17,17,.82);
  }

  body.desktop-gallery-mode #header .burger i,
  body.desktop-gallery-mode #workProject .arr,
  body.desktop-gallery-mode #workProject .cursorHint .line,
  body.desktop-gallery-mode #workProject .galleryOverviewBtn::before,
  body.desktop-gallery-mode #workProject .galleryOverviewBtn::after{
    background:rgba(17,17,17,.82);
  }

  body.desktop-gallery-mode #workProject .arr::after,
  body.desktop-gallery-mode #workProject .arr.left::after,
  body.desktop-gallery-mode #workProject .cursorHint.next .line::after,
  body.desktop-gallery-mode #workProject .cursorHint.prev .line::after{
    border-color:rgba(17,17,17,.82);
  }

  body.desktop-gallery-mode #workProject .galleryOverviewItem.current span{
    color:rgba(17,17,17,.82);
  }
}

/* v16as · softer than pure black for gallery UI on imagery. */

/* v16at · 9-dot overview icon shifted slightly right for cleaner alignment beneath “de”. */

/* v16ax · desktop film project shares the approved photography header fade and continuous top scrim; mobile unchanged. */

/* v16ay · film directional UI reuses the approved v16aq continuous translucent top scrim. */


/* ================================================================
   v16az · UEFA insight title: mobile-only break before 43
   ================================================================ */
.uefaMobileTitleBreak{
  display:none;
}

@media (max-width:780px){
  #insights .uefaMobileTitleBreak{
    display:block;
  }
}


/* ================================================================
   v16ba · desktop main menu: burger has no action here
   Keep its layout slot so the DE/EN switch does not jump horizontally.
   Mobile and every other view remain unchanged.
   ================================================================ */
@media(min-width:781px){
  #header.menu-brand-large .burger{
    display:none;
  }
}


/* ================================================================
   v16bc · desktop-only optical alignments
   - Insights intro copy right edge aligns with the full-width image below.
   - Main menu language switch shares the same right axis as the large counts.
   Mobile remains unchanged.
   ================================================================ */
@media(min-width:781px){
  #insights .insightsIntro p{
    justify-self:end;
    width:auto;
    max-width:none;
    text-align:right;
    font-size:16px;
  }

  #header.menu-brand-large .headerTools{
    margin-left:auto;
  }
}


/* v16bd · desktop-only Insights intro now visibly right-aligned to the image edge and enlarged from 14px to 16px. */


/* v16be · no visual CSS changes; project-leaf motion refinement is JS-only. */


/* ================================================================
   v16bf · mobile landing refinement only
   - de/en returns to a normal weight and is slightly quieter.
   - burger lines are visually lighter without changing its hit area.
   - The Cradle hero is allowed on mobile as an intentional exception.
   ================================================================ */
@media(max-width:780px){
  body.mobile-landing-glass .langSwitch{
    font-size:17px;
    letter-spacing:.045em;
  }

  body.mobile-landing-glass .langBtn,
  body.mobile-landing-glass .langBtn.is-active{
    font-weight:400;
  }

  body.mobile-landing-glass #header .burger{
    opacity:.78;
  }

  body.mobile-landing-glass #header .burger i{
    height:1px;
  }

  #landing .heroSlide.cradleHero{
    display:block;
    background-position:center center;
  }
}


/* ================================================================
   v16bg · mobile landing + main menu language control
   Same quiet translucent capsule and the lighter v16bf typography
   on both landing and the general menu overview. Desktop unchanged.
   ================================================================ */
@media(max-width:780px){
  body.mobile-language-highlight .langSwitch{
    font-size:17px;
    gap:5px;
    letter-spacing:.045em;
    transform:translateY(0);
    padding:5px 10px 6px;
    border-radius:999px;
    background:rgba(0,0,0,.16);
    border:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
    box-shadow:0 2px 10px rgba(0,0,0,.10);
  }

  body.mobile-language-highlight .langBtn,
  body.mobile-language-highlight .langBtn.is-active{
    font-weight:400;
  }

  body.mobile-language-highlight .langBtn{
    opacity:.76;
  }

  body.mobile-language-highlight .langBtn.is-active{
    opacity:1;
  }

  body.mobile-language-highlight .langSlash{
    opacity:.72;
  }
}


/* ================================================================
   v16bh · mobile-only Work refinements
   1) The Cradle 0033 hero crop is shifted toward the left side of the
      source image so the two people sit right of the visual centre.
   2) The desktop-style warm return pill is used on the mobile project
      end page instead of the floating last-image control.
   Desktop remains unchanged.
   ================================================================ */
@media(max-width:780px){
  #workProject .galleryEndBack{
    display:none!important;
  }

  #workProject .projectEnd .projectLinks .projectBackLink{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0;
    border:1px solid rgba(221,123,41,.22);
    border-radius:999px;
    padding:10px 14px 9px;
    background:rgba(255,249,244,.88);
    -webkit-backdrop-filter:blur(10px) saturate(1.08);
    backdrop-filter:blur(10px) saturate(1.08);
    box-shadow:
      0 10px 26px rgba(48,28,10,.12),
      0 2px 8px rgba(48,28,10,.07),
      inset 0 1px 0 rgba(255,255,255,.72);
    color:#d96b1d;
    font-size:12px;
    font-weight:500;
    line-height:1;
    letter-spacing:.02em;
    text-transform:lowercase;
    white-space:nowrap;
  }
}


/* ================================================================
   v16bi · mobile landscape return-control fix
   Phone landscape can exceed the portrait width breakpoint. Hide the
   floating last-image desktop control by mobile device mode instead of
   viewport width, so it never appears during the mobile image sequence.
   The project-end pill remains the only mobile return control.
   ================================================================ */
body.mobile-media-view #workProject .galleryEndBack{
  display:none!important;
}


/* v16bj · mobile The Cradle hero cropped another 50% further left (28% → 14%) so the two women sit more clearly right of centre. */

/* v16bk · mobile The Cradle hero pushed fully to the left edge (0%) so the small group of both women becomes visible. */


/* v16bl · mobile hero slot 17 now uses the dedicated hero-mobile-0017.jpg; desktop The Cradle hero remains unchanged. */


/* ================================================================
   v16bm · mobile landscape project-end parity
   The final project-information page in phone landscape now keeps the
   full copy visible and uses the same warm return pill as portrait.
   The old immersive back arrow is suppressed only while this end page
   is the active horizontal page. Desktop and portrait remain unchanged.
   ================================================================ */
body.mobile-media-view.immersive-landscape #workProject .projectEnd{
  align-items:flex-start;
  justify-content:center;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:
    max(24px, env(safe-area-inset-top))
    max(28px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(28px, env(safe-area-inset-left));
}
body.mobile-media-view.immersive-landscape #workProject .projectEnd > div{
  width:min(100%,920px);
  margin:auto 0;
}
body.mobile-media-view.immersive-landscape #workProject .projectEnd h2{
  font-size:clamp(30px,6.2vw,50px);
  line-height:.94;
  margin:0 0 10px;
}
body.mobile-media-view.immersive-landscape #workProject .projectEnd p{
  display:block!important;
  max-width:920px;
  margin:0 0 18px;
  font-size:clamp(11px,1.65vw,14px);
  line-height:1.45;
  color:#4d4b47;
}
body.mobile-media-view.immersive-landscape #workProject .projectEnd .projectLinks{
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:18px;
}
body.mobile-media-view.immersive-landscape #workProject .projectEnd .projectLinks .projectBackLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  border:1px solid rgba(221,123,41,.22);
  border-radius:999px;
  padding:10px 14px 9px;
  background:rgba(255,249,244,.88);
  -webkit-backdrop-filter:blur(10px) saturate(1.08);
  backdrop-filter:blur(10px) saturate(1.08);
  box-shadow:
    0 10px 26px rgba(48,28,10,.12),
    0 2px 8px rgba(48,28,10,.07),
    inset 0 1px 0 rgba(255,255,255,.72);
  color:#d96b1d;
  font-size:12px;
  font-weight:500;
  line-height:1;
  letter-spacing:.02em;
  text-transform:lowercase;
  white-space:nowrap;
  border-bottom-color:rgba(221,123,41,.22);
}
body.mobile-media-view.immersive-landscape.mobile-landscape-project-end #workProject .immersiveBack-work{
  display:none!important;
}


/* ================================================================
   v16bn · phone landscape photography/film overview correction
   A phone rotated to landscape can exceed the 780px width breakpoint.
   The phone-native overview class is therefore the authority here:
   - keep compact mobile header geometry
   - hide the overview burger as in mobile portrait
   - keep intro copy in a normal one-column mobile text measure
   Desktop and mobile portrait remain unchanged.
   ================================================================ */
@media (orientation:landscape){
  body.mobile-overview-native-scroll #header.overview-right-align{
    padding:24px var(--ui-edge-mobile) 0 20px;
  }

  body.mobile-overview-native-scroll #header.compact .homebrand.homebrand-two .brand-name{
    font-size:20.6px;
    line-height:.9;
  }

  body.mobile-overview-native-scroll #header.compact .homebrand.homebrand-two .brand-services{
    font-size:12px;
    line-height:1;
  }

  body.mobile-overview-native-scroll #header .headerTools{
    gap:13px;
  }

  body.mobile-overview-native-scroll #header .langSwitch{
    font-size:10px;
    gap:2px;
    letter-spacing:.06em;
  }

  body.mobile-overview-native-scroll #header .langBtn{
    padding:5px 0;
  }

  body.mobile-overview-native-scroll #header .burger{
    display:none!important;
  }

  body.mobile-overview-native-scroll #workOverview .sectionInner,
  body.mobile-overview-native-scroll #filmOverview .sectionInner{
    padding:105px 18px 60px;
  }

  body.mobile-overview-native-scroll #workOverview .sectionIntro,
  body.mobile-overview-native-scroll #filmOverview .sectionIntro{
    grid-template-columns:1fr;
    gap:35px;
    margin-bottom:55px;
  }

  body.mobile-overview-native-scroll #workOverview .sectionIntro p,
  body.mobile-overview-native-scroll #filmOverview .sectionIntro p{
    grid-column:auto;
    width:auto!important;
    max-width:min(560px,calc(100vw - 36px));
    margin:0 0 8px!important;
    justify-self:start;
    font-size:14px;
    line-height:1.55;
  }
}


/* ================================================================
   v16bo · iPad/tablet touch parity
   Keep the established iPad gallery geometry, but give it the same
   quiet touch UI behaviour as the phone: no floating final-image pill,
   header/gallery controls fade after interaction, and a dedicated
   landing swipe hint is visible. Phone + fine-pointer desktop unchanged.
   ================================================================ */
@media (any-pointer:coarse) and (min-width:781px){
  #landing .heroHint{
    display:block!important;
    animation:none!important;
    opacity:1!important;
    left:110px;
    bottom:66px;
    font-size:12.5px;
  }

  #landing.landing-exit .heroHint{
    opacity:0!important;
  }

  body.tablet-media-view #header,
  body.tablet-media-view #workProject .galleryMeta,
  body.tablet-media-view #workProject .galleryCount,
  body.tablet-media-view #workProject .galleryOverviewBtn{
    transition:opacity .32s ease,transform .32s ease;
  }

  body.tablet-media-view.immersive-ui-hidden #header,
  body.tablet-media-view.immersive-ui-hidden #workProject .galleryMeta,
  body.tablet-media-view.immersive-ui-hidden #workProject .galleryCount,
  body.tablet-media-view.immersive-ui-hidden #workProject .galleryOverviewBtn{
    opacity:0!important;
    pointer-events:none!important;
  }

  body.tablet-media-view.immersive-ui-hidden #header{
    transform:translateY(-8px);
  }

  body.tablet-media-view.immersive-ui-hidden #workProject .galleryMeta,
  body.tablet-media-view.immersive-ui-hidden #workProject .galleryCount,
  body.tablet-media-view.immersive-ui-hidden #workProject .galleryOverviewBtn{
    transform:translateY(-4px);
  }



  /* Tablet galleries are swipe-only: desktop arrow/cursor affordances never appear. */
  body.tablet-media-view #workProject .navBtn,
  body.tablet-media-view #workProject .cursorHint{
    display:none!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  body.tablet-media-view #workProject .galleryEndBack{
    display:none!important;
  }

  body.tablet-media-view #workProject .projectEnd .projectLinks .projectBackLink{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(221,123,41,.22);
    border-radius:999px;
    padding:10px 14px 9px;
    background:rgba(255,249,244,.88);
    -webkit-backdrop-filter:blur(10px) saturate(1.08);
    backdrop-filter:blur(10px) saturate(1.08);
    box-shadow:
      0 10px 26px rgba(48,28,10,.12),
      0 2px 8px rgba(48,28,10,.07),
      inset 0 1px 0 rgba(255,255,255,.72);
    color:#d96b1d;
    font-size:12px;
    font-weight:500;
    line-height:1;
    letter-spacing:.02em;
    text-transform:lowercase;
    white-space:nowrap;
    border-bottom-color:rgba(221,123,41,.22);
  }
}


/* v16bp · iPad refinement: persistent larger landing hint aligned to brand; Work gallery is swipe-only; UI returns after touch inactivity. */


/* ================================================================
   v16bq - iPad/tablet refinement
   - Photography overview intro returns to the same top-row structure
     used by Film on coarse-pointer tablets.
   - Gallery navigation remains swipe-only; JS adds immediate top-zone
     tap reveal while keeping the two-second idle reveal.
   ================================================================ */
@media (any-pointer:coarse) and (min-width:781px){
  #workOverview .sectionIntro p{
    grid-column:2!important;
    grid-row:1;
    width:100%!important;
    max-width:450px;
    margin-left:0!important;
    justify-self:stretch!important;
  }
}

/* v16br · local-asset/privacy cleanup only; layout unchanged from v16bq. */


/* ================================================================
   v16bs · final cosmetic pass
   - iPad/tablet landing hint is always available on every LP visit.
   - iPad/tablet Work gallery images use the full viewport more calmly:
     centered, height/width constrained by an approximately 1.5 cm
     visual paper edge. Existing touch navigation/fade logic unchanged.
   ================================================================ */

/* JS toggles this device class independently of the active view so the
   landing hint remains reliable after returning from deeper navigation. */
body.tablet-device #landing .heroHint{
  display:block!important;
  animation:none!important;
  opacity:1!important;
  transform:none!important;
  left:110px;
  bottom:66px;
  font-size:12.5px;
}

body.tablet-device #landing.landing-exit .heroHint{
  opacity:0!important;
  transform:translateY(5px)!important;
}

@media (any-pointer:coarse) and (min-width:781px){
  body.tablet-media-view #workProject{
    --tablet-gallery-edge:clamp(44px,4.2vw,58px);
  }

  body.tablet-media-view #workProject .galleryWrap,
  body.tablet-media-view #workProject .galleryRail{
    height:100vh;
    height:100dvh;
  }

  body.tablet-media-view #workProject .galleryRail{
    padding-top:0!important;
  }

  body.tablet-media-view #workProject .frame{
    height:100vh;
    height:100dvh;
    padding:var(--tablet-gallery-edge)!important;
    align-items:center;
    justify-content:center;
  }

  body.tablet-media-view #workProject .frame img.print{
    width:auto;
    height:auto;
    max-width:calc(100vw - (2 * var(--tablet-gallery-edge)))!important;
    max-height:calc(100vh - (2 * var(--tablet-gallery-edge)))!important;
    max-height:calc(100dvh - (2 * var(--tablet-gallery-edge)))!important;
    object-fit:contain;
  }

  body.tablet-media-view #workProject .frame img.print.landscape{
    width:min(
      calc(100vw - (2 * var(--tablet-gallery-edge))),
      calc((100vh - (2 * var(--tablet-gallery-edge))) * var(--imgAspect,1.5))
    )!important;
    width:min(
      calc(100vw - (2 * var(--tablet-gallery-edge))),
      calc((100dvh - (2 * var(--tablet-gallery-edge))) * var(--imgAspect,1.5))
    )!important;
  }

  body.tablet-media-view #workProject .frame img.print.portrait{
    max-width:min(
      calc(100vw - (2 * var(--tablet-gallery-edge))),
      calc((100vh - (2 * var(--tablet-gallery-edge))) * var(--imgAspect,.75))
    )!important;
    max-width:min(
      calc(100vw - (2 * var(--tablet-gallery-edge))),
      calc((100dvh - (2 * var(--tablet-gallery-edge))) * var(--imgAspect,.75))
    )!important;
  }
}

/* v16bt · general menu odometers: About and Contact reuse existing menuCount styling; no layout change. */


/* ================================================================
   v16bu · iPad/tablet correction after v16bs/v16bt
   - General menu gets a dedicated dark header band so brand and first
     menu row cannot overlap.
   - Work-gallery geometry uses the actual VisualViewport height supplied
     by JS, keeping photographs large, centered and surrounded by a clear
     white paper edge in Safari on iPad.
   - Existing phone and fine-pointer desktop layouts remain untouched.
   ================================================================ */
@media (any-pointer:coarse) and (min-width:781px){
  body.tablet-device #header.menu-brand-large{
    --tablet-menu-header:138px;
    height:var(--tablet-menu-header)!important;
    min-height:var(--tablet-menu-header)!important;
    padding:0 110px!important;
    align-items:center!important;
    background:#101010;
  }

  body.tablet-device #header.menu-brand-large .homebrand.homebrand-two{
    min-height:var(--tablet-menu-header)!important;
    justify-content:center!important;
  }

  body.tablet-device #menu .menuStack{
    padding-top:138px!important;
  }

  body.tablet-device #header.menu-brand-large .headerTools{
    align-self:center;
  }

  body.tablet-media-view #workProject{
    --tablet-gallery-edge:clamp(36px,3.8vw,52px);
  }

  body.tablet-media-view #workProject .galleryWrap,
  body.tablet-media-view #workProject .galleryRail,
  body.tablet-media-view #workProject .frame{
    height:var(--rr-visible-height,100dvh)!important;
    min-height:var(--rr-visible-height,100dvh)!important;
  }

  body.tablet-media-view #workProject .galleryRail{
    padding-top:0!important;
    align-items:stretch;
  }

  body.tablet-media-view #workProject .frame{
    flex:0 0 100vw;
    padding:var(--tablet-gallery-edge)!important;
    align-items:center!important;
    justify-content:center!important;
  }

  body.tablet-media-view #workProject .frame img.print{
    width:auto!important;
    height:auto!important;
    max-width:calc(100vw - (2 * var(--tablet-gallery-edge)))!important;
    max-height:calc(var(--rr-visible-height,100dvh) - (2 * var(--tablet-gallery-edge)))!important;
    object-fit:contain!important;
    margin:auto!important;
  }

  body.tablet-media-view #workProject .frame img.print.landscape{
    width:min(
      calc(100vw - (2 * var(--tablet-gallery-edge))),
      calc((var(--rr-visible-height,100dvh) - (2 * var(--tablet-gallery-edge))) * var(--imgAspect,1.5))
    )!important;
    max-width:calc(100vw - (2 * var(--tablet-gallery-edge)))!important;
  }

  body.tablet-media-view #workProject .frame img.print.portrait{
    width:auto!important;
    max-width:min(
      calc(100vw - (2 * var(--tablet-gallery-edge))),
      calc((var(--rr-visible-height,100dvh) - (2 * var(--tablet-gallery-edge))) * var(--imgAspect,.75))
    )!important;
  }
}

/* v16bv · SEO/indexing release only; visual styling unchanged. */


/* ================================================================
   v16bw · desktop photography intro + contact refinements
   - Desktop Work intro starts directly at the lower edge of the
     "fotografie" heading instead of inheriting the large grid row gap.
   - Contact social icons sit side by side at equal size.
   - Professional memberships sit quietly beneath the social links.
   Tablet/mobile overview geometry remains unchanged.
   ================================================================ */
@media (min-width:781px) and (any-pointer:fine){
  #workOverview .sectionIntro{
    row-gap:0;
  }
}

#contact .contactSocials{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
}

#contact .contactSocials .contactLinkedin,
#contact .contactSocials .contactInstagram{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:0;
  line-height:1;
  text-decoration:none;
}

#contact .contactInstagram .instagramLogo{
  width:30px;
  height:30px;
  display:block;
}

#contact .contactMemberships{
  margin-top:18px;
  max-width:430px;
  color:#555;
  font-size:15px;
  line-height:1.62;
}

@media(min-width:781px){
  #contact .contactInstagram .instagramLogo{
    width:31px;
    height:31px;
  }
}

@media(max-width:780px){
  #contact .contactSocials{
    gap:9px;
    margin-top:16px;
  }

  #contact .contactInstagram .instagramLogo{
    width:28px;
    height:28px;
  }

  #contact .contactMemberships{
    margin-top:16px;
    font-size:12px;
    line-height:1.6;
  }
}

/* v16bx · Contact professional-membership text enlarged on desktop/tablet from 13px to 15px; mobile unchanged. */