/* Final responsive and performance layer. Loaded last on PL/DE/CH pages. */
:root{--pw-page-gutter:clamp(1rem,4vw,2rem)}
html{overflow-x:hidden;overflow-x:clip}
body{min-width:0;overflow-x:hidden;overflow-x:clip}
img,video,svg{max-width:100%}
main#top>section{min-width:0}
/* Actual section heights keep anchor navigation stable as lazy media loads. */
main#top>section[id]{scroll-margin-top:calc(4.25rem + env(safe-area-inset-top) + 1rem)}
html{scrollbar-gutter:stable}

/* One visual system for project cards, independent of the video player ratio. */
#work .work-rail,#web-projects .pw-web-grid,#films .work-rail{
  gap:1rem;scroll-snap-type:x proximity;scroll-padding-inline:0;
  overscroll-behavior-x:contain;padding-bottom:.75rem;
  scrollbar-width:thin;scrollbar-color:#3a465a transparent;
}
#work .work-rail>button,#films .work-rail>article{width:min(76vw,18rem);scroll-snap-align:start;border-radius:1rem}
#work .work-rail>button>span>span:last-child{
  left:1rem;right:1rem;bottom:1rem;padding-top:2rem;
}
#work .work-rail>button>span>span:last-child>span.text-faint{color:#c4ccd8;font-size:.7rem;line-height:1.45}
#work .work-rail>button>span>span:last-child>span:last-child{font-size:1rem;line-height:1.3}
#work .work-rail>button>span>span.bg-linear-to-t{height:58%;background:linear-gradient(0deg,#06090ff5,transparent)}
#films .work-rail>article{display:flex;flex-direction:column;height:auto}
#films .work-rail>article>div:last-child{display:flex;flex-direction:column;flex:1;padding:1.1rem}
#films .work-rail h3{font-size:1rem;line-height:1.4;min-height:2.8em}
#films .work-rail p{margin-bottom:1.1rem;font-size:.82rem;line-height:1.6;min-height:3.9em}
#films .work-rail>article>div:last-child>button{width:100%;min-width:0;margin-top:auto}
#films .work-rail~button{display:none}
#services .grid h3{min-height:2.8em}
.pw-branding-card::before{content:'✦';display:grid;place-items:center;width:20px;height:20px;color:var(--color-accent);font-size:1.25rem}
.pw-rail-controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.4rem;color:var(--color-muted);font-size:.75rem}
.pw-rail-controls>div{display:flex;gap:.5rem}
.pw-rail-controls button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--color-line-strong);border-radius:50%;color:var(--color-fg);background:var(--color-card);font-size:1.2rem}
.pw-rail-controls button:disabled{opacity:.3;cursor:default}
.pw-rail-controls button:focus-visible,.pw-web-card:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}

/* Compact calculator; optional details stay available without a long default form. */
.pw-video-calc{overflow:hidden;border:1px solid var(--color-line);border-radius:1rem;background:var(--color-card);box-shadow:var(--shadow-card)}
.pw-package{grid-template-columns:minmax(0,1fr);align-content:start;gap:.4rem}
.pw-package b{grid-column:1;grid-row:auto;white-space:normal;font-size:.82rem}
.pw-package span{grid-column:1;line-height:1.5}
.pw-package:focus-visible,.pw-extra-panel summary:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.pw-durations{grid-template-columns:repeat(2,minmax(0,1fr));padding:0;gap:.6rem}
.pw-durations .pw-package{grid-template-columns:1fr auto;align-items:center;padding:.85rem}
.pw-durations .pw-package b{grid-column:2;grid-row:1;white-space:nowrap}
.pw-extra-panel{border-top:1px solid var(--color-line)}
.pw-extra-panel summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:60px;padding:1rem 1.35rem;cursor:pointer;list-style:none;font-size:.94rem;font-weight:600}
.pw-extra-panel summary::-webkit-details-marker{display:none}
.pw-extra-panel summary:after{content:'⌄';font-size:1.2rem;transition:transform .15s}
.pw-extra-panel[open] summary:after{transform:rotate(180deg)}
.pw-extra-panel summary>span{margin-left:auto;font-size:.8rem;color:var(--color-accent)}
.pw-extra-panel .pw-web-addons{padding-top:0}
.pw-stepper button{width:44px;height:44px}
.pw-package-scope{padding:1.1rem;border-top:1px solid var(--color-line)}
.pw-package-scope h3{margin:0 0 .75rem;font-size:1rem}
.pw-package-scope ul{display:grid;gap:.5rem;margin:0;padding-left:1.2rem;font-size:.9rem;line-height:1.6;list-style:disc}
.pw-package-scope p,.pw-package-note,.pw-addon-help{color:var(--color-muted);font-size:.875rem;line-height:1.6}
.pw-package-scope p{margin:.9rem 0 0}
.pw-package-note{padding:0 1.1rem 1.1rem;margin:0}
.pw-addon-help{padding:.5rem .85rem 0;margin:0}
.pw-web-calc .pw-package span{font-size:.875rem}
.pw-web-calc .pw-package b{font-size:1rem;margin-top:.2rem}
.pw-custom-project{padding:0 1.1rem 1.1rem}
.pw-custom-choice{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem 1rem;width:100%;min-height:44px;padding:.8rem 1rem;border:1px solid var(--color-line);border-radius:.65rem;background:transparent;color:var(--color-fg);text-align:left;font-size:.875rem}
.pw-custom-choice span{color:var(--color-muted);font-size:.875rem}
.pw-custom-choice.is-active{border-color:var(--color-accent);background:var(--color-accent-soft)}
.pw-custom-choice:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
@media(min-width:768px){.pw-custom-project{padding-inline:1.35rem}}
.pw-web-calc .pw-addon span{font-size:.875rem}
.pw-web-calc .pw-addon b{font-size:.875rem;white-space:nowrap}
.pw-web-calc .pw-stepper>span{min-width:0;font-size:.875rem}
.pw-web-calc .pw-stepper>div{flex-shrink:0;gap:.45rem}
.pw-web-calc .pw-stepper small{font-size:.875rem}
@media(min-width:768px){.pw-package-scope{padding:1.35rem 1.75rem}.pw-package-scope ul{grid-template-columns:1fr 1fr;column-gap:2rem}.pw-package-note{padding-inline:1.75rem}}

@media(min-width:768px){
  #services .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #work .work-rail,#web-projects .pw-web-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;overflow:visible}
  #work .work-rail>button{width:100%}
  #work .work-rail>button>span{aspect-ratio:4/5}
  #films .work-rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;overflow:visible}
  #films .work-rail>article{width:100%}
  .pw-rail-controls{display:none}
  .pw-extra-panel summary{padding-inline:1.75rem}
  .pw-durations{grid-template-columns:repeat(4,minmax(0,1fr));padding:0}
  .pw-durations .pw-package{grid-template-columns:1fr;text-align:center}
  .pw-durations .pw-package b{grid-column:1;grid-row:auto}
}
@media(min-width:1200px){#films .work-rail,#services .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:767px){
  #services .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  #services .grid>article{padding:1rem}
  #services .grid h3{font-size:.94rem;line-height:1.4}
  #services .grid p{font-size:.8rem;line-height:1.5}
  .pw-web-actions button{padding:.6rem;font-size:.8rem}
}
@media(max-width:359px){#services .grid{grid-template-columns:1fr}}

/* Keep the moving background cheap to composite on mobile and desktop. */
html body main#top>section:first-child .pw-hero-video{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  background:#05070b!important;
  filter:none!important;
  opacity:1!important;
  transform:translateZ(0);
  backface-visibility:hidden;
  contain:strict;
}
html body main#top>section:first-child::after{
  background:linear-gradient(180deg,rgba(3,5,9,.18) 0,rgba(3,5,9,.30) 48%,rgba(3,5,9,.72) 82%,#05070b 100%)!important;
}

/* Animate the hero copy once, then release compositor memory. */
main#top>section:first-child.pw-copy-sequence-done .pw-show-line,
main#top>section:first-child.pw-copy-sequence-done .pw-show-title,
main#top>section:first-child.pw-copy-sequence-done .pw-hero-signature,
main#top>section:first-child.pw-copy-sequence-done .rise-in>p,
main#top>section:first-child.pw-copy-sequence-done .rise-in>div,
.pw-trust-strip.pw-copy-sequence-done{
  animation:none!important;
  filter:none!important;
  will-change:auto!important;
}
main#top>section:first-child.pw-copy-sequence-done .rise-in>div button:first-child,
main#top>section:first-child.pw-copy-sequence-done .rise-in>div button:first-child::after{
  animation:none!important;
}
/* Phone layout: readable on 320px through large phones and safe-area aware. */
@media(max-width:767px){
  html body main#top>section:first-child{
    min-height:calc(100svh - 4rem)!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    padding:0 0 max(.75rem,env(safe-area-inset-bottom))!important;
  }
  html body main#top>section:first-child>.relative.z-10{
    width:100%!important;
    padding:clamp(1rem,3.5vh,2rem) var(--pw-page-gutter) 1rem!important;
  }
  html body main#top>section:first-child .rise-in{
    width:100%!important;
    max-width:34rem!important;
    margin:0 auto!important;
    text-align:left!important;
  }
  html body main#top>section:first-child .pw-show-title{
    width:100%!important;
    margin:0!important;
    padding:0!important;
    justify-items:start!important;
    text-align:left!important;
    font-size:clamp(2.05rem,10.2vw,3.6rem)!important;
    line-height:.94!important;
    letter-spacing:-.05em!important;
  }
  html body main#top>section:first-child .pw-show-line{
    width:auto!important;
    max-width:100%!important;
    white-space:nowrap!important;
  }
  html body main#top>section:first-child .pw-hero-signature{
    margin:.72rem 0 0!important;
    padding:0!important;
    max-width:28rem!important;
    text-align:left!important;
    font-size:.62rem!important;
    line-height:1.45!important;
    letter-spacing:.085em!important;
  }
  html body main#top>section:first-child .rise-in>p{
    margin:.8rem 0 0!important;
    padding:0!important;
    max-width:31rem!important;
    font-size:clamp(.9rem,3.8vw,1rem)!important;
    line-height:1.48!important;
  }
  html body main#top>section:first-child .rise-in>div{
    margin-top:.9rem!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:.6rem!important;
  }
  html body main#top>section:first-child .rise-in>div button{
    width:100%!important;
    min-width:0!important;
    min-height:46px!important;
    padding:.7rem .65rem!important;
    font-size:.78rem!important;
  }
  html body .pw-trust-strip{
    position:relative!important;
    z-index:12!important;
    width:calc(100% - (2 * var(--pw-page-gutter)))!important;
    margin:.2rem auto 0!important;
    padding:.55rem!important;
    gap:.35rem!important;
    border-radius:14px!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:rgba(7,12,21,.90)!important;
  }
  html body .pw-trust-strip span{
    min-height:26px!important;
    padding:.32rem .46rem!important;
    font-size:.52rem!important;
    letter-spacing:.07em!important;
  }
  html body .pw-scroll-cue{display:none!important}
  html body header a[href*="#top"]>p:first-child,
  html body header a[href*="#top"]>p:first-child::before,
  html body header a[href*="#top"]>p:first-child::after{animation:none!important}
}

@media(max-width:359px){
  html body main#top>section:first-child .pw-show-title{font-size:1.92rem!important}
  html body main#top>section:first-child .rise-in>div{grid-template-columns:1fr!important}
  html body .pw-trust-strip span{font-size:.49rem!important;padding:.3rem .4rem!important}
}

/* Tablets keep a centered composition and use the mobile-safe video path below 768px. */
@media(min-width:768px) and (max-width:1023px){
  html body main#top>section:first-child{min-height:clamp(620px,82svh,780px)!important}
  html body main#top>section:first-child>.relative.z-10{padding:4rem var(--pw-page-gutter) 7rem!important}
  html body main#top>section:first-child .rise-in{width:min(100%,48rem)!important;margin:auto!important;text-align:center!important}
  html body main#top>section:first-child .pw-show-title{font-size:clamp(3.4rem,8.3vw,5.4rem)!important}
  html body .pw-trust-strip{position:absolute!important;left:50%;bottom:1.25rem;transform:translateX(-50%);z-index:12}
}

/* Desktop: balanced left copy, clear CTA area, full video without oversized typography. */
@media(min-width:1024px){
  html body main#top>section:first-child{
    min-height:clamp(660px,78svh,860px)!important;
    display:grid!important;
    align-items:center!important;
  }
  html body main#top>section:first-child::after{
    background:linear-gradient(90deg,rgba(3,5,9,.88) 0,rgba(3,5,9,.72) 30%,rgba(3,5,9,.24) 60%,rgba(3,5,9,.14) 100%),linear-gradient(180deg,rgba(3,5,9,.08),rgba(3,5,9,.48) 82%,#05070b)!important;
  }
  html body main#top>section:first-child>.relative.z-10{
    width:min(100%,80rem)!important;
    margin:0 auto!important;
    padding:5.5rem var(--pw-page-gutter) 8rem!important;
  }
  html body main#top>section:first-child .rise-in{
    width:min(49%,39rem)!important;
    max-width:39rem!important;
    margin:0 auto 0 0!important;
    text-align:left!important;
  }
  html body main#top>section:first-child .pw-show-title{
    width:100%!important;
    max-width:39rem!important;
    margin:0!important;
    padding:0!important;
    justify-items:start!important;
    text-align:left!important;
    font-size:clamp(3.6rem,5.1vw,5.65rem)!important;
    line-height:.89!important;
  }
  html body main#top>section:first-child .pw-show-line{width:auto!important;text-align:left!important}
  html body main#top>section:first-child .pw-hero-signature,
  html body main#top>section:first-child .rise-in>p{margin-left:0!important;margin-right:0!important;text-align:left!important}
  html body main#top>section:first-child .rise-in>div{justify-content:flex-start!important}
  html body .pw-trust-strip{
    position:absolute!important;
    left:50%!important;
    bottom:1.5rem!important;
    transform:translateX(-50%)!important;
    z-index:12!important;
    width:min(calc(100% - 4rem),70rem)!important;
    margin:0!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:rgba(7,12,21,.86)!important;
  }
}

/* Short landscape phones and small tablets must scroll rather than crop content. */
@media(max-height:560px) and (orientation:landscape){
  html body main#top>section:first-child{min-height:620px!important}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{scroll-behavior:auto!important}
}

/* Neutral fallback keeps project titles and play controls usable offline. */
.pw-poster-fallback{background:radial-gradient(ellipse at 65% 25%,#1b3455,transparent 65%),linear-gradient(140deg,#151d2a,#070a10)!important}