@import url('/fixed-contact.css');
/* Responsive pass for wide desktop, laptop, tablet and phone widths. */
.ref-section-head>*,.ref-transition-grid>*,.ref-final-inner>*,.subpage-hero>*,.studio-story>*,.about-story>*,.project-dossier>*,.contact-work>*,.about-values>*{min-width:0}
img{max-width:100%}

@media(min-width:1600px){
  :root{--max:1440px}
  .shell{padding-inline:44px}
  .ref-hero h1{font-size:clamp(72px,6.5vw,132px)}
  .ref-hero-copy{max-width:720px}
  .ref-section{padding-top:170px;padding-bottom:175px}
  .ref-feature-image{height:700px}
  .ref-project-card img{height:420px}
  .ref-process{padding-top:170px;padding-bottom:180px}
  .team-image{height:680px}
  .subpage-hero-visual{min-height:650px}
}

@media(min-width:801px) and (max-width:1200px){
  .shell{padding-inline:24px}
  .nav{gap:18px;font-size:12px}
  .ref-hero h1{font-size:clamp(58px,7.4vw,92px)}
  .ref-hero-copy{left:3vw;max-width:560px}
  .ref-section-head{gap:6vw}
  .ref-feature-grid{gap:5vw}
  .ref-feature-image{height:520px}
  .project-strip{gap:16px}
  .ref-project-card img{height:280px}
  .team-copy{padding:66px 5vw 34px}
  .subpage-hero h1{font-size:clamp(48px,6vw,78px)}
  .subpage-hero-visual{min-height:480px}
  .project-dossier figure,.about-story-image{height:480px}
}

@media(max-width:800px){
  .shell{padding-inline:18px}
  .utility-inner{padding-inline:18px}
  .topbar-inner{height:64px}
  .nav.open{top:63px;left:18px;right:18px;z-index:25}
  .ref-hero{min-height:calc(100svh - 92px)}
  .ref-hero-copy{left:18px;right:18px;bottom:72px;max-width:none}
  .ref-hero h1{font-size:clamp(54px,14.8vw,92px);line-height:.84}
  .ref-hero-copy p{max-width:310px}
  .ref-hero-caption{right:18px;bottom:18px;max-width:220px}
  .ref-scroll{left:18px;bottom:18px}
  .ref-transition-visual figcaption{left:18px;right:18px}
  .ref-transition-card{left:18px}
  .subpage-hero-copy{padding-inline:18px}
  .subpage-hero-visual{height:min(500px,62svh);min-height:360px}
  .subpage-hero-visual figcaption{max-width:270px}
  .project-dossier figure,.about-story-image{height:min(470px,86vw);min-height:350px}
  .project-dossier figcaption,.about-story-image figcaption{display:block;left:16px;right:16px}
  .project-dossier figcaption span,.about-story-image figcaption span{display:block;margin-top:4px}
}

@media(max-width:420px){
  .utility-strip{font-size:10px}
  .utility-right a{max-width:130px;text-align:right;line-height:1.15}
  .ref-hero h1{font-size:clamp(48px,14.5vw,62px);margin-bottom:22px}
  .ref-hero-copy p{font-size:15px;max-width:270px;margin-bottom:24px}
  .ref-actions{display:grid;grid-template-columns:1fr;justify-items:start;gap:14px}
  .ref-button{justify-content:space-between;gap:24px}
  .ref-hero-caption{font-size:11px;max-width:150px}
  .ref-scroll{gap:9px;font-size:11px}
  .ref-scroll span:first-child{width:34px;height:34px;font-size:16px}
  .ref-transition-visual{height:390px}
  .ref-transition-visual figcaption{font-size:11px;max-width:170px}
  .ref-transition-card{left:12px;bottom:20px;width:150px;padding:20px 16px}
  .ref-feature-image{height:360px}
  .ref-project-card img{height:300px}
  .team-image{height:350px}
  .subpage-hero-copy{padding-top:64px;padding-bottom:58px}
  .subpage-hero h1{font-size:clamp(48px,13.5vw,66px)}
  .subpage-hero-visual{height:390px;min-height:390px}
  .subpage-hero-visual figcaption{font-size:11px}
  .about-team-grid figure{height:330px}
}