/* Balanced liquid motion, adapted to the existing portfolio navigation.
   The shell and visible controls move together while layout stays fixed. */
body:is(.sober-home,.sober-case) .site-header{
  position:sticky;top:0;z-index:70;padding:9px 0;
  background:transparent!important;border:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;
}
body:is(.sober-home,.sober-case) .site-header .header-inner{
  position:relative;isolation:isolate;
  width:min(1240px,calc(100% - 36px));
  padding-inline:clamp(15px,2vw,25px);
  border-radius:22px;
}
body:is(.sober-home,.sober-case) .site-header .header-inner::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  border:1px solid rgba(255,255,255,.9);border-radius:inherit;
  background:
    linear-gradient(90deg,transparent,color-mix(in srgb,var(--header-accent,#3155ea) 24%,white),transparent) 22px 0 / calc(100% - 44px) 2px no-repeat,
    linear-gradient(118deg,rgba(255,255,255,.97),rgba(246,249,255,.9) 56%,rgba(255,255,255,.96));
  box-shadow:0 8px 27px rgba(19,35,65,.13),inset 0 1px 0 rgba(255,255,255,.98);
  backdrop-filter:blur(18px) saturate(125%);
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  transform:translate3d(0,var(--liquid-header-y,0px),0) scaleY(var(--liquid-header-stretch,1));
  transform-origin:50% 50%;
}
body:is(.sober-home,.sober-case) .site-header .header-inner > .brand,
body:is(.sober-home,.sober-case) .site-header .project-switcher > summary,
body:is(.sober-home,.sober-case) .site-header .desktop-nav > a,
body:is(.sober-home,.sober-case) .site-header .header-actions{
  transform:translate3d(0,var(--liquid-content-y,0px),0);
  will-change:transform;
}
body:is(.sober-home,.sober-case) .site-header .header-inner::after{
  display:none;
}
body.sober-case.v105-malakoff-humanis .site-header{--header-accent:#b94b28}
body.sober-case.v105-cetelem .site-header{--header-accent:#237b35}
body.sober-case.at97-detail .site-header{--header-accent:#003781}
body.sober-case.case-apphalt .site-header{--header-accent:#1757c5}
@supports (mask-image:url("/assets-v25/gn-monogram.png")){
  body.sober-case .site-header .brand{position:relative}
  body.sober-case .site-header .brand::before{
    content:"";position:absolute;left:0;top:50%;width:36px;height:31px;
    background:var(--header-accent,#3155ea);
    mask:url("/assets-v25/gn-monogram.png") center/contain no-repeat;
    -webkit-mask:url("/assets-v25/gn-monogram.png") center/contain no-repeat;
    transform:translateY(-50%);pointer-events:none;
  }
  body.sober-case .site-header .brand img{opacity:0}
}
body:is(.sober-home,.sober-case) .site-header :is(a,button,summary):focus-visible{
  outline:3px solid var(--header-accent,#3155ea);outline-offset:3px;
}
body.sober-home .site-header .project-switch-panel{z-index:3}

/* The header doubles as a persistent project identity and project switcher.
   The story markers remain unframed so the work keeps visual priority. */
body.sober-home .project-switcher summary{gap:7px;white-space:nowrap}
body.sober-home .project-switcher .project-switch-identity{display:none;align-items:center;gap:6px;min-width:0}
body.sober-home .project-switcher summary.has-project-identity .project-switch-default{display:none}
body.sober-home .project-switcher summary.has-project-identity .project-switch-identity{display:inline-flex}
body.sober-home .project-switcher .project-switch-identity img{display:block;width:auto;height:24px;max-width:104px;object-fit:contain}
body.sober-home .project-switcher .project-switch-identity span{font-size:12px;font-weight:700;letter-spacing:-.02em}
body.sober-home .site-header[data-project-theme="malakoff"] .project-switch-identity img{max-width:94px}
body.sober-home .site-header[data-project-theme="cetelem"] .project-switch-identity img{max-width:84px}
body.sober-home .site-header[data-project-theme="allianz"] .project-switch-identity img{max-width:90px}
body.sober-home .site-header[data-project-theme="apphalt"] .project-switch-identity img{width:24px;height:24px;border-radius:5px}
body.sober-home .project-switcher summary.has-project-identity svg{width:11px;height:11px;opacity:.7}
body.sober-home .story-navigation>.story-vertical-rail::before{display:none!important}

/* Allianz has the densest illustration. Keep its own buyer/merchant composition,
   but make the scene masthead a quiet label once the header carries the brand. */
body.sober-home #allianz-trade-pay[data-at124] .at124-head{justify-content:flex-start}
body.sober-home #allianz-trade-pay[data-at124] .at124-head img{display:none}
body.sober-home #allianz-trade-pay[data-at124] .at124-head span{letter-spacing:.12em}
body.sober-home #apphalt-produit .ah-stage-head img{display:none}

@media(max-width:800px){
  body:is(.sober-home,.sober-case) .site-header{padding:8px 0}
  body:is(.sober-home,.sober-case) .site-header .header-inner{
    width:calc(100% - 20px);height:60px;padding-inline:12px;border-radius:20px;
  }
  body.sober-case .site-header .brand::before{width:31px;height:28px}
  body.sober-home .site-header .project-switch-panel{
    top:calc(var(--gn-header-height,76px) + 4px);left:10px;right:10px;
  }
  body.sober-home .story-navigation>.story-vertical-rail{right:0;width:44px}
  body.sober-home .project-switcher .project-switch-identity img{height:21px;max-width:84px}
  body.sober-home .site-header[data-project-theme="malakoff"] .project-switch-identity img{max-width:84px}
  body.sober-home .site-header[data-project-theme="cetelem"] .project-switch-identity img{max-width:75px}
  body.sober-home .site-header[data-project-theme="allianz"] .project-switch-identity img{max-width:80px}
  body.sober-home .site-header[data-project-theme="apphalt"] .project-switch-identity img{width:21px;height:21px}
  body.sober-home .story-navigation .story-vertical-rail :is(.gn94-meter.gn102-meter,.c103-chapter-bars){width:44px}
  body.sober-home .story-navigation .story-vertical-rail :is(button.gn102-segment,button[data-workshop-jump]){
    width:44px;min-width:44px;height:44px;min-height:44px;
  }
  body.sober-home .story-navigation .story-vertical-rail :is(button.gn102-segment,button[data-workshop-jump])::before{left:20px}
}
@media(max-width:420px){
  body:is(.sober-home,.sober-case) .site-header .header-inner{padding-inline:9px}
  body.sober-home .project-switcher summary{padding-inline:2px;gap:5px}
  body.sober-home .site-header[data-project-theme="apphalt"] .project-switch-identity span{font-size:11px}
  body.sober-home .client-story-position .gn93-progress,
  body.sober-home .sober-scene-controls [data-workshop-step]{font-size:11px!important}
}
@media(max-width:480px){
  /* Reserve the same space in every story: the designer's name stays visible
     while only the project identity inside the selector changes. */
  body.sober-home .site-header .brand{gap:6px;flex:none}
  body.sober-home .site-header .brand > span{display:block;width:44px;max-width:none;font-size:11px;line-height:1.3;white-space:normal}
  body.sober-home .site-header .desktop-nav{flex:0 0 108px;min-width:0;justify-content:center}
  body.sober-home .site-header .project-switcher{width:100%}
  body.sober-home .site-header .project-switcher summary{width:100%;box-sizing:border-box;justify-content:center;padding-inline:4px;gap:5px}
  body.sober-home .site-header .project-switch-identity img{height:23px;max-width:80px}
  body.sober-home .site-header[data-project-theme="malakoff"] .project-switch-identity img{max-width:80px}
  body.sober-home .site-header[data-project-theme="cetelem"] .project-switch-identity img{max-width:75px}
  body.sober-home .site-header[data-project-theme="allianz"] .project-switch-identity img{max-width:78px}
  body.sober-home .site-header[data-project-theme="apphalt"] .project-switch-identity img{width:21px;height:21px}
  body.sober-home .site-header .header-actions{flex:none}
}
@media(max-width:360px){
  body.sober-home .site-header .header-inner{gap:6px}
  body.sober-home .site-header .desktop-nav{flex-basis:92px}
  body.sober-home .site-header .project-switcher summary{padding-inline:2px}
  body.sober-home .site-header .project-switch-identity img,
  body.sober-home .site-header[data-project-theme] .project-switch-identity img{max-width:72px}
}
@media(prefers-reduced-motion:reduce){
  body:is(.sober-home,.sober-case) .site-header .header-inner::before,
  body:is(.sober-home,.sober-case) .site-header .header-inner > .brand,
  body:is(.sober-home,.sober-case) .site-header .project-switcher > summary,
  body:is(.sober-home,.sober-case) .site-header .desktop-nav > a,
  body:is(.sober-home,.sober-case) .site-header .header-actions{transform:none!important;transition:none!important}
}
html:is(.motion-reduced,.gn93-reading) body:is(.sober-home,.sober-case) .site-header .header-inner::before,
html:is(.motion-reduced,.gn93-reading) body:is(.sober-home,.sober-case) .site-header .header-inner > .brand,
html:is(.motion-reduced,.gn93-reading) body:is(.sober-home,.sober-case) .site-header .project-switcher > summary,
html:is(.motion-reduced,.gn93-reading) body:is(.sober-home,.sober-case) .site-header .desktop-nav > a,
html:is(.motion-reduced,.gn93-reading) body:is(.sober-home,.sober-case) .site-header .header-actions{
  transform:none!important;transition:none!important;
}
@media(forced-colors:active){
  body:is(.sober-home,.sober-case) .site-header .header-inner::before,
  body:is(.sober-home,.sober-case) .site-header .header-inner::after{display:none}
  body:is(.sober-home,.sober-case) .site-header .header-inner{border:1px solid CanvasText;background:Canvas}
  body:is(.sober-home,.sober-case) .site-header .header-inner > .brand,
  body:is(.sober-home,.sober-case) .site-header .project-switcher > summary,
  body:is(.sober-home,.sober-case) .site-header .desktop-nav > a,
  body:is(.sober-home,.sober-case) .site-header .header-actions{transform:none!important}
  body.sober-case .site-header .brand::before{display:none}
  body.sober-case .site-header .brand img{opacity:1}
}
@media print{
  body:is(.sober-home,.sober-case) .site-header{padding:0}
  body:is(.sober-home,.sober-case) .site-header .header-inner::before,
  body:is(.sober-home,.sober-case) .site-header .header-inner::after{display:none}
  body:is(.sober-home,.sober-case) .site-header .header-inner > .brand,
  body:is(.sober-home,.sober-case) .site-header .project-switcher > summary,
  body:is(.sober-home,.sober-case) .site-header .desktop-nav > a,
  body:is(.sober-home,.sober-case) .site-header .header-actions{transform:none!important}
}