/* Homepage: cinematic opening, then editorial sections */

/* cinematic opening */
.film{position:relative;height:100vh;height:100svh;min-height:560px;background:#2b2a22 url(media/poster.jpg) center/cover no-repeat;color:#f3efe4;overflow:hidden}
.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.film::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,42,34,.35) 0%,rgba(43,42,34,.1) 35%,rgba(43,42,34,.7) 100%)}
.film-inner{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 clamp(40px,8vh,88px)}
.film-title{font-family:var(--serif);font-weight:400;font-size:clamp(36px,6vw,96px);line-height:.95;letter-spacing:-.01em;margin:0 0 28px;text-transform:uppercase}
.film-title .line{display:block;overflow:hidden;padding-bottom:.08em}
.film-title .line span{display:inline-block;transform:translateY(110%);animation:rise 1.3s cubic-bezier(.2,.7,.1,1) forwards}
.film-title .line:nth-child(2) span{animation-delay:.18s}
.film-title .line:nth-child(3) span{animation-delay:.36s}
.film-title em{font-style:italic;color:#e4dac4}
.film-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;border-top:1px solid rgba(243,239,228,.35);padding-top:20px;opacity:0;animation:fade 1.2s .9s ease forwards}
.film-foot p{margin:0;max-width:30em;font-size:clamp(15px,1.4vw,18px);line-height:1.5}
.film-foot .brandline{font-size:12px;letter-spacing:.24em;text-transform:uppercase}
.film .cta{display:inline-flex;gap:12px;align-items:center;background:#f3efe4;color:#2b2a22;padding:16px 24px;border-radius:999px;text-decoration:none;font-size:15px}
.film .cta:hover{background:#e4dac4}

@keyframes rise{to{transform:translateY(0)}}
@keyframes fade{to{opacity:1}}

/* header over the film: light text, blends on any frame */
.home header{position:fixed;top:0;left:0;right:0;z-index:5;background:linear-gradient(180deg,rgba(43,42,34,.45),rgba(43,42,34,0));border-bottom:none;padding:18px clamp(16px,3vw,32px);color:#f3efe4}
.home header nav a,.home header .brand span{color:#f3efe4}
.home header button.language,.home header button.motion{color:#f3efe4;border-color:#f3efe4}
.home header .brand img{filter:invert(1)}
.home .wrap.header-wrap{width:auto}

/* editorial sections */
.home .section{border-top:none;padding:clamp(80px,12vw,160px) 0}
.statement{font-family:var(--serif);font-size:clamp(28px,4.4vw,60px);line-height:1.15;max-width:22em}
.statement em{color:var(--clay)}
.kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--clay);margin:0 0 24px}

/* selected work: asymmetric editorial grid */
.work{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.5vw,32px);align-items:start}
.work figure{margin:0}
.work .ph{width:100%}
.work figcaption{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.work .w1{grid-column:1/span 7}
.work .w2{grid-column:9/span 4;margin-top:120px}
.work .w3{grid-column:2/span 5}
.work .w4{grid-column:8/span 5;margin-top:-40px}
.work .ph.photo{aspect-ratio:4/5}
.work .ph.land{aspect-ratio:3/2}
.work .ph.video{aspect-ratio:16/9}

/* services as editorial rows, not cards */
.services{border-top:1px solid var(--soil)}
.service-row{display:grid;grid-template-columns:80px 1fr 1.2fr 40px;gap:24px;align-items:baseline;padding:36px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.service-row .num{font-family:var(--serif);color:var(--clay);font-size:18px}
.service-row h3{font-size:clamp(34px,5vw,64px);margin:0}
.service-row p{margin:0;color:var(--muted);max-width:30em}
.service-row .arrow{font-size:24px;justify-self:end}
.service-row:hover h3{color:var(--clay)}

/* philosophy: split with a tall photo placeholder */
.philosophy{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,6vw,96px);align-items:center}
.philosophy .ph.photo{aspect-ratio:3/4}
.philosophy blockquote{margin:0;font-family:var(--serif);font-size:clamp(26px,3.4vw,44px);line-height:1.2}

/* collaborate */
.collaborate{background:var(--soil);color:var(--paper)}
.collaborate .kicker{color:var(--sand)}
.collaborate h2{font-size:clamp(44px,8vw,120px);line-height:.95;margin:0 0 32px}
.collaborate h2 em{color:var(--sand)}
.collaborate .cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.collaborate .cta{display:inline-flex;gap:12px;align-items:center;background:var(--paper);color:var(--soil);padding:16px 26px;border-radius:999px;text-decoration:none;font-size:15px}
.collaborate .link{color:var(--paper);font-size:15px}
.collaborate footer-note{display:block}

/* process as a horizontal rule */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--soil)}
.steps > div{padding:28px 28px 0 0}
.steps .step-num{margin-bottom:12px}

/* reduced data / motion */
@media (prefers-reduced-motion:reduce){
  .film-title .line span,.film-foot{animation:none;transform:none;opacity:1}
}
body.paused .film-title .line span,body.paused .film-foot{animation:none;transform:none;opacity:1}

/* mobile */
@media (max-width:820px){
  .film{min-height:620px}
  .film-title{font-size:clamp(38px,11vw,64px)}
  .film-foot{flex-direction:column;align-items:flex-start}
  .work{display:block}
  .work figure{margin-bottom:48px}
  .work .w2,.work .w4{margin-top:0}
  .service-row{grid-template-columns:44px 1fr;gap:12px}
  .service-row p,.service-row .arrow{grid-column:2}
  .philosophy{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}