/* Crux: a moving typographic poster, with colour carrying the identity. */
:root { --ink:#241b18; --muted:#75645c; --wine:#bc3415; --lilac:#ffb49b; --mist:#f0e5d8; --white:#fff8ec; --signal:#ff512b; --poster:'Barlow Condensed','Arial Narrow',sans-serif; }
body { background:var(--white); }
.header { position:absolute; inset:0 0 auto; z-index:5; min-height:110px; }
.header .wordmark { font-size:58px; }
.header nav a:hover { color:var(--white); }
.header .contact-link { padding:12px 0; border-bottom:1px solid currentColor; }
.cinema { position:relative; overflow:hidden; background:var(--signal); min-height:880px; min-height:max(880px,100svh); padding-bottom:90px; }
.cinema-copy { padding-top:152px; }
.cinema .descriptor { margin-bottom:34px; font-size:14px; }
.cinema h1 { margin:0 0 52px; font:600 clamp(100px,21.4vw,340px)/.79 var(--poster); text-transform:uppercase; letter-spacing:-.028em; }
.title-line { display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.015em; }
.title-line > span { display:block; width:fit-content; animation:unfold 1.1s cubic-bezier(.16,1,.3,1) both; }
.title-line:last-child { color:var(--white); text-align:right; }
.title-line:last-child > span { margin-left:auto; animation-delay:.12s; }
.hero-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }
.cinema-deck { font-size:21px; line-height:1.4; margin:0; }
.hero-link { display:flex; align-items:center; justify-content:space-between; gap:60px; font:600 15px var(--display); padding-bottom:12px; border-bottom:1px solid currentColor; }
.hero-link span { font-size:42px; line-height:1; transition:transform .25s; }
.hero-link:hover span { transform:translate(4px,4px); }
.cinema-bottom { position:absolute; inset:auto 0 22px; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:12px; }
#motion-toggle { border:0; border-bottom:1px solid currentColor; background:none; color:inherit; font:inherit; padding:6px 0; cursor:pointer; }
#motion-toggle:focus-visible { outline:2px solid var(--ink); outline-offset:5px; }
@keyframes unfold { from { transform:translateY(115%) rotate(3deg); } to { transform:translateY(0) rotate(0); } }
.motion-paused .title-line > span { animation-play-state:paused; }
.work { padding-top:85px; }
.work-heading { display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding-bottom:25px; }
.work-heading h2 { font:600 17px var(--display); margin:0; }
.work-heading > span { font-size:14px; color:var(--muted); }
.project-visual { position:relative; padding:75px 9% 30px; background:#f1d2ba; overflow:hidden; perspective:1500px; }
.site-preview { transform:rotateY(-4deg) rotateX(4deg) rotateZ(-2deg); transition:transform .7s cubic-bezier(.2,.65,.2,1); box-shadow:25px 40px 60px -30px #47261770; }
.project:hover .site-preview { transform:rotateY(0) rotateX(0) rotateZ(0); }
.preview-content,.preview-content > img { min-height:370px; }
.preview-copy { top:65px; left:45px; }
.preview-copy h2 { font-size:clamp(38px,5vw,80px); }
.image-caption { margin-top:45px; color:var(--muted); }
.statement { padding-block:130px; }
.statement .descriptor { margin-bottom:45px; }
.statement h2 { font:500 clamp(36px,4.7vw,76px)/1.13 var(--display); letter-spacing:-.055em; margin-bottom:40px; }
.statement h2 span { color:var(--wine); }
.statement-copy { margin:0 0 0 auto; max-width:445px; font-size:22px; color:var(--muted); }
.services { padding-block:25px 130px; }
.service-list article { border-color:#ddcbbf; }
.experience { background:var(--ink); color:var(--white); }
.experience-inner { padding-block:110px; }
.experience .descriptor { color:#ff9b7d; }
.experience-copy p + p,.experience-copy small { color:#d4c3b9; }
.experience-names { font-size:29px; margin-block:45px 16px; }
.experience-names a:hover { color:#ff9b7d; }
.contact { padding-block:130px 110px; }
.contact h2 { color:var(--ink); font-size:clamp(60px,8.8vw,142px); }
.footer { display:block; overflow:hidden; padding-top:30px; padding-bottom:0; border-color:#ddcbbf; }
.footer-top { display:flex; justify-content:space-between; gap:20px; font-size:14px; }
.footer .wordmark { display:block; width:fit-content; margin:30px auto -2vw; font:800 clamp(120px,33vw,510px)/.94 var(--display); letter-spacing:-.09em; color:var(--signal); }
.motion-ready .reveal { opacity:0; transform:translateY(30px); transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1); }
.motion-ready .reveal.visible { opacity:1; transform:none; }
@media(min-width:1600px) { .cinema-copy { padding-top:170px; } }
@media(max-width:950px) {
  .cinema { min-height:max(740px,100svh); }
  .cinema-copy { padding-top:175px; }
  .cinema h1 { font-size:21.3vw; margin-bottom:65px; }
  .statement { padding-block:100px; }
  .services { padding-block:20px 100px; }
  .project-visual { padding:55px 7% 25px; }
  .preview-content,.preview-content > img { min-height:330px; }
}
@media(max-width:640px) {
  .header { min-height:88px; }
  .header .wordmark { font-size:46px; }
  .header nav { font-size:12px; }
  .cinema { min-height:690px; min-height:max(690px,85svh); }
  .cinema-copy { padding-top:150px; }
  .cinema .descriptor { font-size:12px; margin-bottom:38px; }
  .cinema h1 { font-size:22vw; margin-bottom:47px; }
  .hero-bottom { display:block; }
  .cinema-deck { font-size:18px; margin-bottom:30px; max-width:310px; }
  .cinema-deck br { display:none; }
  .hero-link { width:fit-content; gap:40px; font-size:13px; }
  .hero-link span { font-size:30px; }
  .cinema-bottom { font-size:10px; bottom:20px; }
  .cinema-bottom > span { max-width:215px; }
  .work { padding-top:50px; }
  .work-heading h2 { font-size:14px; }
  .work-heading > span { font-size:11px; }
  .project-visual { padding:35px 18px 20px; }
  .preview-content,.preview-content > img { min-height:260px; }
  .preview-copy { top:40px; left:16px; }
  .preview-copy h2 { font-size:35px; }
  .image-caption { font-size:9px; margin-top:24px; }
  .statement { padding-block:80px; }
  .statement .descriptor { margin-bottom:30px; }
  .statement h2 { font-size:35px; }
  .statement h2 br { display:none; }
  .statement-copy { font-size:19px; }
  .services { padding-block:0 80px; }
  .experience-inner { padding-block:80px; }
  .experience-names { font-size:23px; }
  .contact { padding-block:85px 65px; }
  .contact h2 { font-size:52px; }
  .footer-top { font-size:11px; }
  .footer .wordmark { font-size:34vw; }
}
@media(prefers-reduced-motion:reduce) {
  .title-line > span { animation:none; }
  .site-preview,.hero-link span { transition:none; }
  .motion-ready .reveal { opacity:1; transform:none; transition:none; }
}