/* Premiere layout: the moving image owns the opening. */
.hero{
  min-height:calc(100svh - 88px);
  grid-template-columns:42% 58%;
  grid-template-rows:auto 1fr auto;
  padding:0;
  isolation:isolate;
}
.hero:after{display:none}
.hero-grid{z-index:1}
.hero-topline{
  grid-column:1/-1;
  grid-row:1;
  z-index:4;
  padding:25px clamp(24px,5vw,86px) 0;
}
.hero-copy{
  grid-column:1;
  grid-row:2;
  z-index:4;
  align-self:center;
  max-width:none;
  padding:50px 2vw 34px clamp(24px,5vw,86px);
}
.hero h1>span{font-size:clamp(66px,6.5vw,110px)}
.hero h1 strong{font-size:clamp(125px,12vw,194px)}
.hero-statement{font-size:clamp(30px,3vw,47px);margin-top:30px}
.hero-stage{
  grid-column:2;
  grid-row:1/4;
  position:relative;
  z-index:2;
  width:100%;
  height:calc(100svh - 88px);
  min-height:630px;
  margin:0;
  align-self:stretch;
  justify-self:stretch;
  overflow:hidden;
  background:#080b13;
}
.cinema-poster{
  position:absolute;
  inset:0;
  background:#181b22 url('../assets/films/approved/echt-peugeot-poster.jpg') center/cover no-repeat;
  filter:blur(12px);
  transform:scale(1.04);
}
.cinema-film{position:absolute;inset:0;overflow:hidden}
.cinema-film video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:center;
}
.cinema-shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,#10162bb8,transparent 24%),linear-gradient(180deg,#080b135e,transparent 33%,transparent 54%,#080b13ed 100%);
}
.cinema-top{
  position:absolute;
  z-index:2;
  top:72px;
  left:35px;
  right:35px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:white;
  font:10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;
}
.cinema-top span:first-child{display:flex;align-items:center;gap:9px}
.cinema-top .signal-dot{flex:none}
.cinema-bottom{
  position:absolute;
  z-index:2;
  left:35px;
  right:35px;
  bottom:30px;
  color:white;
  text-shadow:0 2px 15px #0009;
}
.cinema-kicker{
  display:block;
  margin-bottom:11px;
  color:#fff;
  font:10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.15em;
}
.cinema-film-title{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:23px}
.cinema-film-title strong{
  display:block;
  max-width:75%;
  font-size:clamp(44px,4.7vw,76px);
  line-height:.88;
  letter-spacing:-.075em;
  font-weight:600;
  text-wrap:balance;
}
.cinema-film-title span{font:10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;text-align:right}
.cinema-controls{
  display:flex;
  align-items:center;
  gap:13px;
  border-top:1px solid #ffffff9e;
  padding-top:14px;
  text-shadow:none;
}
.cinema-controls .hero-progress{width:clamp(120px,12vw,200px);flex:none;gap:5px}
.cinema-controls .hero-progress button{height:4px;background:#ffffff80}
.cinema-controls button:not(.hero-progress button){
  position:static;
  margin:0;
  top:auto;
  right:auto;
  flex:none;
  border:0;
  background:transparent;
  color:white;
  padding:8px 3px;
  white-space:nowrap;
  font:10px/1.1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.09em;
}
.cinema-controls button:hover{color:var(--red)}
.cinema-controls button span{color:var(--red);margin-left:3px}
.cinema-controls #hero-full-film{margin-left:auto}
.hero-bottomline{
  grid-column:1;
  grid-row:3;
  z-index:4;
  margin:0 2vw 0 clamp(24px,5vw,86px);
  min-height:58px;
}
.hero-bottomline .scroll-cue{display:none}

/* A compact, continuous client reel with full-size, recognizable marks. */
.proof-band{
  display:block;
  min-height:0;
  padding:38px 0 42px;
  background:#fff;
}
.proof-intro{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  height:auto;
  margin:0 clamp(24px,5vw,86px) 20px;
  padding:0 0 14px;
  border:0;
  border-bottom:1px solid #10162b3b;
}
.proof-intro .eyebrow{order:2;font-size:10px}
.proof-intro h2{
  order:1;
  margin:0;
  font:400 clamp(38px,3.7vw,56px)/.95 Georgia,'Times New Roman',serif;
  letter-spacing:-.065em;
}
.proof-intro h2 span{color:var(--red)}
.logo-window{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.logo-track{display:flex;align-items:center;width:max-content;overflow:visible;gap:0;background:transparent;border:0}
.logo-track.is-ready{animation:client-belt 92s linear infinite}
.logo-window:hover .logo-track,.logo-window:focus-within .logo-track{animation-play-state:paused}
.logo-sequence{display:flex;align-items:center;gap:clamp(34px,3.5vw,56px);width:max-content;padding-right:clamp(34px,3.5vw,56px)}
@keyframes client-belt{to{transform:translateX(-50%)}}
.logo-card,.logo-card.logo-portcity{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  height:112px;
  min-height:0;
  width:190px;
  padding:5px;
  background:transparent;
}
.logo-track .logo-card img{
  width:auto;
  max-width:100%;
  max-height:90px;
  object-fit:contain;
  filter:none;
  opacity:1;
}
.logo-card.logo-peugeot{width:150px}.logo-card.logo-peugeot img{width:120px;height:96px;max-height:96px;object-fit:cover}
.logo-card.logo-shangrila{width:220px}.logo-card.logo-shangrila img{width:205px;max-height:102px}
.logo-card.logo-portcity{width:225px}.logo-card.logo-portcity img{width:205px;max-height:83px}
.logo-card.logo-allianz{width:220px}.logo-card.logo-allianz img{width:205px;max-height:74px}
.logo-card.logo-aitken{width:220px}.logo-card.logo-aitken img{width:210px;max-height:78px}
.logo-card.logo-jkl{width:160px}.logo-card.logo-jkl img{max-height:96px}
.logo-card.logo-suren{width:230px}.logo-card.logo-suren img{width:220px;height:98px;max-height:98px;object-fit:cover}
.logo-card.logo-colorup{width:220px}.logo-card.logo-colorup img{width:215px;max-height:94px}
.logo-card.logo-sapphire{width:230px}.logo-card.logo-sapphire img{width:220px;max-height:110px;filter:brightness(0)}
.logo-card.logo-browns{width:145px}.logo-card.logo-browns img{width:118px;max-height:118px;mix-blend-mode:multiply}
.logo-card.logo-desaram{width:265px}.logo-card.logo-desaram img{width:255px;max-height:95px;filter:brightness(.76) contrast(1.16)}
.logo-card.logo-leapmotor{width:230px}.logo-card.logo-leapmotor img{width:220px;max-height:60px;filter:brightness(0)}
.home-footer-links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px 30px;border-top:1px solid #ffffff3d;padding-top:22px}
.home-footer-links a{font-size:12px;color:#d8dbe5}
.home-footer-links a:hover{color:#ff8d84}
.logo-card.logo-angelbeach{width:170px}.logo-card.logo-angelbeach img{width:145px;max-height:102px}

@media(max-width:1050px) and (min-width:761px){
  .hero{grid-template-columns:43% 57%}
  .hero h1>span{font-size:clamp(60px,7vw,86px)}
  .hero h1 strong{font-size:clamp(105px,11.5vw,150px)}
  .hero-statement{font-size:clamp(27px,3vw,39px)}
  .cinema-bottom{left:24px;right:24px}
  .cinema-controls{gap:7px}
  .cinema-controls .hero-progress{width:85px}
  .cinema-controls button:not(.hero-progress button){font-size:8px}
}

@media(max-width:760px){
  .hero{display:flex;flex-direction:column;min-height:0;padding:0 20px}
  .hero-topline{order:0;padding:20px 0 0}
  .hero-copy{display:contents}
  .hero-chapter{order:1;margin:39px 0 22px}
  .hero h1{order:2}
  .hero h1>span{font-size:clamp(58px,14vw,87px)}
  .hero h1 strong{font-size:clamp(110px,29vw,180px)}
  .hero-stage{
    order:3;
    width:calc(100% + 40px);
    height:min(148vw,660px);
    min-height:0;
    margin:24px -20px 28px;
    align-self:stretch;
  }
  .cinema-film video{object-position:center}
  .cinema-shade{background:linear-gradient(180deg,#080b135e,transparent 26%,transparent 55%,#080b13f2 100%)}
  .cinema-top{top:20px;left:20px;right:20px;font-size:9px}
  .cinema-bottom{left:20px;right:20px;bottom:16px}
  .cinema-film-title{display:block;margin-bottom:12px}
  .cinema-film-title strong{font-size:clamp(47px,11vw,66px);max-width:100%}
  .cinema-film-title span{display:block;text-align:left;margin-top:9px}
  .cinema-kicker{font-size:8px}
  .cinema-controls{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px 12px;padding-top:10px}
  .cinema-controls .hero-progress{grid-column:1/-1;width:100%}
  .cinema-controls #hero-full-film{margin-left:0}
  .cinema-controls button:not(.hero-progress button){font-size:9px}
  .hero-statement{order:4;margin:0 0 13px;font-size:clamp(34px,8vw,48px)}
  .hero-description{order:5}
  .hero-actions{order:6}
  .hero-bottomline{order:7;margin:35px 0 0;min-height:50px}
  .proof-band{display:block;padding:32px 0 36px;min-height:0}
  .proof-intro{display:flex;align-items:baseline;gap:10px;margin:0 20px 13px;padding-bottom:13px;border-bottom:1px solid #10162b3b}
  .proof-intro h2{font-size:40px}
  .proof-intro .eyebrow{font-size:8px;text-align:right}
  .logo-sequence{gap:24px;padding-right:24px}
  .logo-card,.logo-card.logo-portcity{height:96px;transform:scale(.85);margin:0 -12px}
}
@media(prefers-reduced-motion:reduce){
  .logo-window{overflow-x:auto;mask-image:none}
  .logo-track.is-ready{animation:none}
  .logo-sequence[aria-hidden="true"]{display:none}
}

@media(max-width:380px){
  .cinema-controls{gap:5px 8px}
  .cinema-controls button:not(.hero-progress button){font-size:8px}
}