:root{--cf-ink:#0b0b0a;--cf-paper:#f2f0e9;--cf-yellow:#ffcc00}

/* The navigation belongs to the film first, then becomes a calm utility bar. */
#nav{height:auto;background:linear-gradient(180deg,rgba(8,8,7,.58),rgba(8,8,7,0));border:0;backdrop-filter:none;transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease}
#nav .nav-inner{height:78px}
#nav .nav-logo img{height:70px;width:auto;mix-blend-mode:normal;filter:none;transition:filter .3s ease,opacity .3s ease}
#nav .nav-links a{color:rgba(255,255,255,.78);text-shadow:0 1px 14px rgba(0,0,0,.35)}
#nav .nav-links a:hover{color:#fff}
#nav .hamburger{color:#fff}
#nav.is-solid{background:rgba(243,243,240,.92);border-bottom:1px solid rgba(10,10,10,.09);backdrop-filter:blur(16px)}
#nav.is-solid .nav-logo img{filter:none;mix-blend-mode:multiply}
#nav.is-solid .nav-links a{color:#565650;text-shadow:none}
#nav.is-solid .nav-links a:hover{color:#0a0a0a}
#nav.is-solid .hamburger{color:#0a0a0a}

/* Give the pictures room; typography supports the film instead of covering it. */
.cf-beat{padding-left:clamp(1.5rem,5vw,5rem);padding-right:clamp(1.5rem,5vw,5rem);text-shadow:0 2px 28px rgba(0,0,0,.58)}
.cf-beat h1{font-size:clamp(3rem,6.2vw,6.5rem);max-width:8.9ch}
.cf-beat h2{font-size:clamp(2.7rem,5.9vw,6.2rem);max-width:10.5ch}
.cf-beat small{font-size:.66rem;color:rgba(255,255,255,.8)}
.cf-beat-plan h2{max-width:9ch}.cf-beat-scale h2{max-width:8ch}
.cf-chapter{bottom:1.7rem}.cf-cue{bottom:4.15rem}

/* Editorial bridge from the cinematic sequence into the original site. */
#about{position:relative;background:var(--cf-paper);padding:clamp(5.5rem,10vw,9.5rem) 0 clamp(5rem,9vw,8rem);overflow:hidden}
#about:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:rgba(10,10,10,.12)}
.about-kicker{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.25rem;margin-bottom:clamp(4rem,8vw,7rem);font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#696860}
.about-kicker i{height:1px;background:#c7c4ba}
.about-grid{grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:clamp(3rem,8vw,8rem);align-items:start}
.about-h{max-width:13ch;font-size:clamp(2.5rem,5.25vw,5.5rem);line-height:.94;letter-spacing:-.055em;margin-bottom:2rem}
.about-p{max-width:58ch;color:#5c5b55;line-height:1.75}
.about-lead{font-size:clamp(1.05rem,1.35vw,1.25rem);color:#272724}
.about-actions{display:flex;align-items:center;gap:1.5rem;margin-top:2.25rem;flex-wrap:wrap}
.about-text-link{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid #aaa79f;padding:.55rem 0;color:#111}
.about-text-link span{display:inline-block;margin-left:.3rem;transition:transform .2s}.about-text-link:hover span{transform:translateX(4px)}
#about .about-grid>div:last-child{position:sticky;top:7rem}
#about .about-grid>div:last-child>div{border-radius:2px!important;box-shadow:18px 18px 0 #e2dfd5}
#about .about-grid img{filter:saturate(.9) contrast(1.03)}
.about-process{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(4.5rem,8vw,7.5rem);border-top:1px solid #bdbab1;border-bottom:1px solid #bdbab1}
.about-process>div{padding:2rem clamp(1rem,2.5vw,2.4rem) 2.3rem 0;border-right:1px solid #bdbab1}
.about-process>div+div{padding-left:clamp(1rem,2.5vw,2.4rem)}.about-process>div:last-child{border-right:0}
.about-process span{display:block;color:#a29f96;font-size:.68rem;font-weight:700;letter-spacing:.12em;margin-bottom:1.4rem}
.about-process strong{display:block;font-family:var(--fh);font-size:clamp(1.15rem,1.7vw,1.55rem);letter-spacing:-.03em;color:#111;margin-bottom:.55rem}
.about-process p{font-size:.82rem;line-height:1.6;color:#696860;max-width:30ch}

@media(max-width:768px){
  #nav .nav-inner{height:68px}#nav .nav-logo img{height:56px}
  #nav .mob-menu{background:rgba(243,243,240,.97);border-bottom:1px solid rgba(0,0,0,.1)}
  #hero.cf-film{height:560vh}.cf-stage{height:100svh}
  .cf-beat{justify-content:flex-end;padding:0 1.25rem 8.5rem;align-items:flex-start;text-align:left}
  .cf-beat h1,.cf-beat h2{font-size:clamp(2.75rem,12.5vw,4.25rem);line-height:.88;max-width:9ch}
  .cf-beat-make,.cf-beat-scale{padding-bottom:8.5rem}
  .cf-shade{background:linear-gradient(180deg,rgba(0,0,0,.05) 35%,rgba(0,0,0,.72) 100%)}
  .cf-chapter{left:1.25rem;right:1.25rem;bottom:1.25rem;grid-template-columns:1.5rem auto 1fr 1.5rem}.cf-cue{right:1.25rem;bottom:3.35rem}
  #about{padding-top:4.5rem}.about-kicker{grid-template-columns:1fr;gap:.65rem;margin-bottom:3.25rem}.about-kicker i{display:none}.about-kicker span:last-child{color:#a09e96}
  .about-grid{grid-template-columns:1fr;gap:3.5rem}.about-h{font-size:clamp(2.65rem,11.5vw,4.1rem)}
  #about .about-grid>div:last-child{position:relative;top:auto}#about .about-grid>div:last-child>div{box-shadow:10px 10px 0 #e2dfd5}
  .about-process{grid-template-columns:1fr}.about-process>div,.about-process>div+div{padding:1.5rem 0;border-right:0;border-bottom:1px solid #bdbab1}.about-process>div:last-child{border-bottom:0}
}
@media(max-width:420px){.cf-cue{font-size:.5rem}.cf-beat small{font-size:.58rem}.about-actions{align-items:flex-start;flex-direction:column;gap:.7rem}}
@media(prefers-reduced-motion:reduce){#nav,.nav-logo img,.about-text-link span{transition:none!important}}