/* Nico Hua: native chapter transitions, Web composition and restrained signatures. */
.score-shell[data-page="webdesign"] .signature-web {
  --web-gap:clamp(24px,4vw,88px);
  min-height:0; height:auto; display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:auto auto auto auto; align-items:start;
  gap:clamp(24px,3.6vw,72px) var(--web-gap);
  padding:clamp(76px,10svh,160px) clamp(22px,5vw,180px) clamp(84px,11svh,180px);
  isolation:isolate; background:#0b0d0c;
}
.score-shell[data-page="webdesign"] .signature-web::before {opacity:.42;background-size:8.33% 96px}
.score-shell[data-page="webdesign"] .signature-web .signature-word {display:none}
.score-shell[data-page="webdesign"] .signature-web .signature-copy {display:contents}
.score-shell[data-page="webdesign"] .signature-web .signature-copy>span {
  grid-column:1/-1; grid-row:1; margin:0; font-size:10px; line-height:1.5; letter-spacing:.19em;
}
.score-shell[data-page="webdesign"] .signature-web .signature-copy h2 {
  grid-column:1/-1; grid-row:2; width:100%; max-width:22ch; margin:0;
  font-size:clamp(58px,8.3vw,190px)!important; line-height:.98!important; letter-spacing:-.045em!important; text-wrap:balance;
}
.score-shell[data-page="webdesign"] .signature-web .signature-copy h2 em {white-space:nowrap}
.score-shell[data-page="webdesign"] .signature-web .signature-copy p {
  grid-column:1/5; grid-row:3; margin:clamp(4px,1vw,24px) 0 0; max-width:36ch;
  font-size:clamp(15px,1.15vw,22px); line-height:1.75; text-wrap:pretty;
}
.score-shell[data-page="webdesign"] .signature-web>figure {
  position:relative; inset:auto; grid-column:6/-1; grid-row:3/5; width:100%; height:auto;
  aspect-ratio:1.15; margin:0; overflow:hidden; border:0;
  transform:none!important; background:#090c0d;
}
.score-shell[data-page="webdesign"] .signature-web>figure img {
  width:100%;height:100%;object-fit:cover;object-position:50% 48%;
  filter:saturate(.74) contrast(1.04); transform:scale(1.025);
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.score-shell[data-page="webdesign"] .signature-web .signature-points {
  grid-column:1/5;grid-row:4;display:grid;grid-template-columns:1fr;align-self:end;
  width:100%;gap:0;border:0;
}
.score-shell[data-page="webdesign"] .signature-web .signature-points b {
  display:flex;align-items:center;min-height:60px;padding:18px 0;
  border:0;border-top:1px solid #dedbd22b;font-size:10px;letter-spacing:.16em;
}
.score-shell[data-page="webdesign"] .signature-web .signature-points b:last-child {border-bottom:1px solid #dedbd22b}
.nh-web-trace {position:absolute;inset:7%;width:86%;height:86%;pointer-events:none;opacity:.4;fill:none;stroke:#bedbd6;stroke-width:.6}
.nh-web-trace path {vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1)}
.signature-web.is-visible .nh-web-trace path {stroke-dashoffset:0}
@media(max-width:900px) {
  .score-shell[data-page="webdesign"] .signature-web {grid-template-columns:minmax(0,1fr);gap:30px;padding:74px 24px 84px}
  .score-shell[data-page="webdesign"] .signature-web .signature-copy>span {grid-column:1;grid-row:1;font-size:9px}
  .score-shell[data-page="webdesign"] .signature-web .signature-copy h2 {grid-column:1;grid-row:2;font-size:clamp(32px,10.1vw,84px)!important;line-height:1.06!important;max-width:100%;letter-spacing:-.045em!important}
  .score-shell[data-page="webdesign"] .signature-web>figure {grid-column:1;grid-row:3;aspect-ratio:1.04;max-height:72svh}
  .score-shell[data-page="webdesign"] .signature-web .signature-copy p {grid-column:1;grid-row:4;max-width:48ch;font-size:15px;margin:0;line-height:1.75}
  .score-shell[data-page="webdesign"] .signature-web .signature-points {grid-column:1;grid-row:5;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .score-shell[data-page="webdesign"] .signature-web .signature-points b {min-height:50px;padding:14px 0;font-size:clamp(7px,1.9vw,10px);letter-spacing:.09em;border-bottom:1px solid #dedbd22b}
}
@media(max-width:359px) {
  .score-shell[data-page="webdesign"] .signature-web {padding-inline:18px;gap:25px}
  .score-shell[data-page="webdesign"] .signature-web .signature-copy h2 {font-size:10.1vw!important}
}
/* Sticky scenes keep the browser's native vertical scroll and swipe behavior. */
@supports(position:sticky) {
  .score-shell[data-page="home"] .art-intro-suite.nh-chapters {position:relative;isolation:isolate;overflow:visible}
  .score-shell[data-page="home"] .nh-chapters>.intro-scene {
    position:sticky;top:0;height:100svh;min-height:0;margin-bottom:24svh;
    z-index:var(--nh-chapter-order);overflow:clip;
    --presence:1!important;--handoff:0!important;--arrival:0!important;
    --title-a1:1!important;--title-a2:1!important;--title-y1:0px!important;--title-y2:0px!important;
  }
  .score-shell[data-page="home"] .nh-chapters>.intro-scene:last-child {margin-bottom:0}
  .score-shell[data-page="home"] .nh-chapters .intro-stage {position:relative;top:auto;height:100%;min-height:0}
  .score-shell[data-page="home"] .nh-chapters .intro-scene[data-nh-covered="true"] .intro-stage {visibility:hidden}
  .score-shell[data-page="home"] .nh-chapters .intro-scene:not([data-nh-onstage]) canvas {display:none}
  .score-shell[data-page="home"] .nh-chapters .intro-scene:not([data-nh-onstage]) * {animation-play-state:paused!important}
  .score-shell[data-page="home"] .nh-chapters .intro-scene:not(.intro-nico) .intro-bg img {
    transform:translate3d(0,calc((1 - var(--nh-chapter-enter,1))*14px),0) scale(calc(1.035 - var(--nh-chapter-enter,1)*.035));
    transition:none!important;
  }
  .score-shell[data-page="home"] .nh-chapters .intro-scene:not(.intro-nico) .intro-copy {
    opacity:1;transform:translate3d(0,calc((1 - var(--nh-chapter-enter,1))*22px),0)!important;
    bottom:clamp(72px,10svh,160px);
  }
  .score-shell[data-page="home"] .nh-chapters .intro-handoff,
  .score-shell[data-page="home"] .nh-chapters .intro-arrival {display:none}
  .score-shell[data-page="home"] .nh-chapters .intro-web-weave {opacity:calc(.45 + var(--nh-chapter-enter,0)*.35)}
  .score-shell[data-page="home"] .nh-chapters .intro-web .web-weave-energy {opacity:.65}
  .score-shell[data-page="home"] .nh-chapters .intro-start .intro-portal-glow {opacity:calc(.15 + var(--nh-chapter-enter,0)*.35)}
}
.nh-chapter-rim {position:absolute;inset:0;z-index:1;pointer-events:none;opacity:calc(var(--nh-chapter-enter,0)*.28);background:linear-gradient(180deg,#e8ddc022,transparent 14%,transparent 90%,#03050455)}
.intro-web .nh-chapter-rim {background:radial-gradient(ellipse at 72% 35%,#d6d5bc32,transparent 46%)}
.intro-motion .nh-chapter-rim {background:linear-gradient(105deg,transparent 48%,#e5d9bf24 65%,transparent 82%)}
.intro-sound .nh-chapter-rim {background:radial-gradient(ellipse at 65% 60%,#b9d5ce2b,transparent 48%)}
.intro-start .nh-chapter-rim {background:radial-gradient(ellipse at 64% 52%,#e7bc702e,transparent 45%)}
.nh-cosmic-glow {position:absolute;z-index:-1;pointer-events:none;mix-blend-mode:screen;opacity:.24;contain:layout paint;animation:nh-mineral-light 12s ease-in-out infinite alternate}
.nh-cosmic-glow[hidden] {display:none}
@keyframes nh-mineral-light {from{opacity:.12}to{opacity:.31}}
@media(max-width:900px) {
  .score-shell[data-page="home"] .nh-chapters>.intro-scene {margin-bottom:20svh}
  .score-shell[data-page="home"] .nh-chapters .intro-scene:not(.intro-nico) .intro-copy {bottom:clamp(74px,12svh,116px)}
  .score-shell[data-page="home"] .nh-chapters .intro-scene:not(.intro-nico) .intro-statement {font-size:clamp(8px,2.1vw,10px);line-height:1.65;letter-spacing:.15em}
  .score-shell[data-page="home"] .nh-chapters .intro-start .intro-cta {bottom:max(24px,env(safe-area-inset-bottom));min-height:44px;font-size:9px}
  .nh-cosmic-glow {animation-duration:14s}
}
@media(max-height:550px) and (orientation:landscape) {
  .score-shell[data-page="home"] .nh-chapters .intro-scene:not(.intro-nico) .intro-copy {bottom:60px}
  .score-shell[data-page="home"] .nh-chapters .intro-scene:not(.intro-nico) .intro-title-vectors {max-width:48vw}
  .score-shell[data-page="home"] .nh-chapters .intro-scene:not(.intro-nico) .intro-title-vectors img {max-height:24svh;width:auto;max-width:100%;object-fit:contain;object-position:left}
  .score-shell[data-page="home"] .nh-chapters .intro-scene:not(.intro-nico) .intro-copy>i {margin-block:10px}
}
/* The Berlin film retains its engine, timing, controls and audio ownership. */
.score-shell[data-page="webdesign-berlin"] .nh-film-graffiti[data-nh-signature] {
  display:block;position:relative;float:none;inset:auto;width:clamp(240px,54vw,1040px);height:auto;max-width:100%;
  max-height:none;margin:0 0 clamp(36px,5vw,88px);object-fit:contain;object-position:left center;
  opacity:.92!important;transform:none!important;filter:none!important;clip-path:none!important;
}
.score-shell[data-page="webdesign-berlin"] .nh-film-intro {max-width:1600px;margin-inline:auto}
.score-shell[data-page="webdesign-berlin"] .nh-film-controls {gap:12px}
.score-shell[data-page="webdesign-berlin"] .nh-film-controls :is(a,button) {min-height:46px;display:inline-flex;align-items:center}
/* Small interactions follow the existing identity; home styling is excluded. */
.score-shell:not([data-page="home"]) main :is(a,button,summary):focus-visible {outline:2px solid currentColor;outline-offset:6px}
.score-shell:not([data-page="home"]) :is(.case-original-link b,.instrument>i,.price-line>i,.project-movement>b,.score-coda>a) {transition:transform 280ms cubic-bezier(.2,.75,.2,1),color 200ms ease}
.score-shell:not([data-page="home"]) main :is(h1,h2) {hyphens:none;overflow-wrap:normal}
.score-shell:not([data-page="home"]) main :is(.case-title,.premium-page-hero-copy,.berlin-hero-copy,.contact-transmission-copy) {min-width:0}
.score-shell:not([data-page="home"]) main :is(.case-title p,.premium-page-hero-copy p,.berlin-hero-copy p) {text-wrap:pretty}
.score-shell:not([data-page="home"]) main [data-nh-rest],
.score-shell:not([data-page="home"]) main [data-nh-rest] * {animation-play-state:paused!important}
@media(hover:hover) and (pointer:fine) {
  .score-shell[data-page="webdesign"] .signature-web>figure:hover img {transform:scale(1.045)}
  .score-shell:not([data-page="home"]) .case-original-link:hover b,
  .score-shell:not([data-page="home"]) .instrument:hover>i,
  .score-shell:not([data-page="home"]) .price-line:hover>i {transform:translate(3px,-3px)}
  .score-shell:not([data-page="home"]) .project-movement:hover>b {transform:translateX(3px)}
}
@media(prefers-reduced-motion:reduce) {
  .nh-cosmic-glow {animation:none;opacity:.2}
  .nh-web-trace path {stroke-dashoffset:0;transition:none}
  .nh-chapter-rim {display:none}
  .score-shell[data-page="webdesign"] .signature-web>figure img,
  .score-shell:not([data-page="home"]) :is(.case-original-link b,.instrument>i,.price-line>i,.project-movement>b,.score-coda>a) {transform:none!important;transition:none!important}
}

.score-shell[data-page="arbeiten"] .work-hero-cue {display:inline-flex;align-items:center;min-height:44px;min-width:44px;gap:20px}

.score-shell[data-page="the-tower"] .tower-hero-copy>a {min-width:44px;min-height:44px;align-items:center}

/* Large displays keep the architectural drawing without per-frame SVG path rasterization. */
@media(min-width:1800px) {
  .score-shell[data-page="home"] .nh-chapters .intro-web-weave {
    --weave-main:1!important;--weave-secondary:1!important;--weave-ghost:1!important;--weave-bloom:.45!important;
    transform:none!important;will-change:auto!important;opacity:.52!important;
  }
  .score-shell[data-page="home"] .nh-chapters .web-weave-energy {display:none}
  .score-shell[data-page="home"] .nh-chapters .web-weave-nodes circle {animation:none!important}
}
.score-shell[data-page="home"] .nh-chapters .intro-scene[data-nh-covered="true"] .intro-stage {content-visibility:hidden}
.nh-hero-concept-scene:not(.is-active) .nh-cosmic-glow {animation-play-state:paused}