/* Mobile scenes use the stable visible viewport, with content fitted inside it. */
@media(max-width:760px){
  html{scroll-padding-top:0}#clients,#about-story,#how-we-work,#social,#contact-details{scroll-margin-top:76px}body{font-size:16px;overflow-x:clip}
  .site-header{height:76px;padding:10px 5%;gap:12px}
  .brand,.brand img{width:84px;height:50px}.header-contact{font-size:12px;min-height:42px;padding:8px 14px;gap:9px}
  .menu-toggle{width:42px;min-height:42px;padding:11px}.menu-toggle span{width:18px}
  .webgl-hero-ready .replay-intro{display:none}
  .main-nav{position:absolute;top:84px;inset-inline:5%;max-height:calc(100svh - 110px);overflow-y:auto;padding:12px;border-radius:22px}
  .main-nav a{font-size:17px;min-height:48px;padding:12px 18px}
  .webgl-hero-ready .replay-mobile{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:12px 18px;margin-top:6px;border:1px solid #eef4dc33;border-radius:16px;background:#ffffff09;color:inherit;text-align:right;font-size:16px}.replay-mobile svg{width:19px;height:19px;flex:none}
  .opening{height:175svh;min-height:1050px}.hero{position:sticky;top:0;height:100svh;min-height:600px;max-height:none}
  .hero-copy{top:104px;inset-inline:6%;width:88%;max-width:88%;text-align:right}
  .hero-copy .eyebrow{font-size:12px;line-height:1.7;margin-bottom:14px}
  .hero h1{font-size:clamp(36px,min(10.3vw,5.8svh),46px);line-height:1.3;text-align:right;max-width:100%}
  .hero h1 br:nth-child(2){display:block}.hero-enter{font-size:16px;line-height:1.7;margin-top:18px;gap:10px}
  .intro-skip{bottom:max(20px,env(safe-area-inset-bottom));left:20px;min-height:44px;padding:9px 18px;font-size:12px}
  .work-section{height:auto;min-height:100svh;scroll-margin-top:0}
  .work-room{display:grid;grid-template-rows:auto minmax(260px,1fr) auto auto;row-gap:14px;height:auto;min-height:100svh;padding:100px 0 22px}
  .work-top{position:relative;top:auto;inset-inline:auto;min-width:0;margin:0 6%;padding:0;min-height:0;text-align:right}
  .work-top h2{font-size:clamp(25px,7.4vw,32px);line-height:1.55;min-height:0;max-width:100%;margin:6px 0 4px;padding-block:4px;overflow-wrap:normal;word-break:normal;text-wrap:balance}
  .work-top .eyebrow{font-size:11px}.work-top #work-credit,.film-open{font-size:13px;line-height:1.8}.work-top .film-open{display:inline-table;margin:0 12px 0 0}
  .film-stage{position:relative;inset:auto;height:auto;min-height:260px;min-width:0}
  .film-controls{position:relative;inset:auto;margin:0 6%;justify-content:center;gap:18px;direction:rtl}
  .film-dots{display:none}.reel-counter{display:flex;align-items:center;justify-content:center;min-width:78px;min-height:40px;gap:7px;color:#ece6cf;font:400 14px/1.5 var(--sans);font-variant-numeric:tabular-nums}
  .film-hint{position:relative;inset:auto;transform:none;display:table;margin:0 auto;max-width:88%;font-size:13px;line-height:1.8;text-align:center;white-space:normal}
  .office-chapter{height:145svh;min-height:900px}.office-view{height:100svh;min-height:0}
  .office-title{top:110px}.office-title h2{font-size:clamp(53px,13vw,78px);line-height:1.5}
  .office-page-turn{display:none}
  .editorial-about{position:relative;z-index:2;margin-top:-22svh;border-radius:calc((1 - var(--paper-arrival,0))*24px) calc((1 - var(--paper-arrival,0))*24px) 0 0;background:#f2ecd9}
  .about-team{padding-top:0;aspect-ratio:2}.about-team>img:first-child{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center}
  .about-team .scene-signature{width:48px;right:3%;bottom:4%}
  .editorial-about .about-paper{padding:34px 7% 42px}.editorial-about h2{font-size:clamp(38px,10.2vw,49px);line-height:1.5;margin-bottom:30px}
  .editorial-columns{font-size:16px;line-height:1.95;gap:24px}.editorial-columns p+p{margin-top:18px}
  .clients-section{padding:42px 4% 46px;min-height:0}.clients-section h2{font-size:clamp(37px,9.8vw,48px);line-height:1.5;margin:0 auto 18px}
  .clients-intro{font-size:15px;line-height:1.9;margin:0 auto 30px;max-width:88%}
  .client-gallery{display:block;position:relative;width:100%}
  .client-logos{width:48%;max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 8px;align-items:center;justify-items:center}
  .client-logos img{width:100%;max-width:90px;height:34px;object-fit:contain}
  .client-presenters{height:auto;inset:0}
  .presenter{top:50%;transform:translateY(-50%);width:32%;max-width:none;height:auto;aspect-ratio:1006/1563;background-position:center;background-size:contain}
  .presenter-left{left:-4%}.presenter-right{right:-4%;transform:translateY(-50%) scaleX(-1)}
  .devices-scene img{aspect-ratio:1.65;object-fit:cover}.serious-content{padding:34px 7% 42px}.serious-content>h2{font-size:clamp(38px,10.2vw,49px);line-height:1.5;margin-bottom:26px}
  .serious-copy{font-size:16px;line-height:1.95}.serious-grid{gap:32px}.serious-copy .service-lines button{grid-template-columns:1fr;gap:5px;padding-block:18px}.serious-copy .service-lines button>span{font-size:25px;line-height:1.7}.serious-copy .service-lines button>small{grid-column:auto;grid-row:auto;font-size:13px;line-height:1.8}
  .consultation-cutout{padding:24px 21px}.consultation-cutout h3{font-size:29px;line-height:1.6}.consultation-cutout p{font-size:15px}
  .serious-section .numbers-section{padding:12px 0 30px}.numbers{gap:8px}.serious-section .numbers strong{font-size:33px;line-height:1.5}.numbers span{font-size:10px;line-height:1.8}
  .shred-chapter{height:180svh;min-height:0}.shred-view{height:100svh;min-height:0}
  .social-showcase{padding:40px 0 46px}.social-intro h2{font-size:clamp(36px,9.4vw,46px);line-height:1.5}.social-handle{margin-top:16px;min-height:40px}
  .social-reel-stage{height:440px;max-height:62svh}.social-current{padding-inline:6%}.social-current h3{font-size:23px;line-height:1.6;margin-bottom:10px}.social-stat b{font-size:19px}.social-stat small{font-size:12px}
  .social-controls{display:flex;align-items:center;justify-content:center;gap:18px;max-width:100%;margin:22px auto 20px;direction:rtl}.social-dots{display:none}.social-updated{font-size:10px;line-height:1.8}
  .contact-scene{height:150svh;min-height:0}.phones-sticky{height:100svh;min-height:0}.contact-hello{top:105px}.contact-hello h2{font-size:clamp(57px,14vw,80px);line-height:1.4}
  .contact-scene .phones-canvas{inset:190px 0 5%}.contact-goodbye{top:calc(100svh + 90px)}.contact-goodbye h2{font-size:clamp(53px,12vw,73px);line-height:1.5}
  .contact-reference{padding:18px 7% 44px}.contact-intro{font-size:21px;line-height:1.9;margin-bottom:32px}.contact-columns{gap:27px 16px}.contact-columns h3{font-size:23px;line-height:1.7}
  .contact-columns>div>.compact-mail{min-height:44px;font-size:16px}.contact-columns a,.contact-text-button{min-height:32px}.new-business-card{margin-top:32px;gap:13px}.new-business-card>img{width:82px;height:105px}.new-business-card h3{font-size:22px}.new-business-card p{font-size:14px;line-height:1.9}.new-business-card span{font-size:11px;line-height:1.8}
  footer.reference-footer{padding:36px 7%;gap:28px 15px}.footer-center img{width:130px}.footer-center p{font-size:18px}.footer-center small{font-size:11px}
  #brief-dialog{width:calc(100% - 28px);max-width:520px;max-height:calc(100svh - 28px);overflow:auto;padding:22px;border-radius:24px}#brief-title{font-size:38px;line-height:1.5}#brief-form{gap:16px}#brief-form input,#brief-form textarea,#brief-form select{font-size:16px;min-height:45px}
}
@media(max-width:760px) and (max-height:650px){.hero-copy{top:91px}.hero h1{font-size:clamp(32px,9vw,38px);line-height:1.24}.hero-copy .eyebrow{font-size:10px;margin-bottom:9px}.hero-enter{margin-top:10px;font-size:12px}.hero{min-height:560px}}
@media(max-width:760px) and (prefers-reduced-motion:reduce){.opening{height:auto;min-height:0}.hero{position:relative}.office-chapter{height:100svh;min-height:0}.editorial-about{margin-top:0;border-radius:0}.shred-chapter{height:100svh}}

@media (min-width:561px) and (max-width:760px){.editorial-columns,.serious-grid{grid-template-columns:1fr}.contact-columns{grid-template-columns:repeat(3,minmax(0,1fr))}.writer-cutout{width:38%}}