/* Folio West home: Conviction, Evidence, Belief, Craft, Invitation */

/* Opening film */
:root{--ease-out:cubic-bezier(.23,1,.32,1)}
.hero{position:relative;min-height:clamp(560px,76svh,760px);display:flex;align-items:flex-end;color:var(--snow);background:#2c3a2a;isolation:isolate;overflow:clip}
.hero-poster,.hero-poster img,.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero-poster{z-index:-3}
.hero-film{z-index:-2;opacity:0;transition:opacity .6s var(--ease-out)}
.hero-film.on{opacity:1}
.hero::before{content:"";position:absolute;inset:0 0 auto 0;height:32%;z-index:-1;background:linear-gradient(180deg,rgba(14,20,16,.66) 0,rgba(14,20,16,.6) 120px,rgba(14,20,16,0) 100%)}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;z-index:-1;background:linear-gradient(0deg,rgba(14,20,16,.6),rgba(14,20,16,0))}
.hero-copy{width:100%;padding-bottom:clamp(48px,7vh,96px)}
.hero h1{font-size:clamp(54px,8.6vw,124px);line-height:.94;letter-spacing:-.02em;max-width:10.5ch;color:#f4f2ec;text-shadow:none}
.hero-dek{margin:24px 0 28px;max-width:580px;font-size:clamp(16px,.3vw + 14px,18px);line-height:1.45;color:#eef0ea}
.hero .more{border-color:var(--gold-hi)}
.hero .vctl{position:absolute;right:var(--gut);bottom:clamp(48px,7vh,96px);top:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero h1,.hero-dek,.hero .more{animation:rise .7s var(--ease-out) both}
.hero-dek{animation-delay:.08s}
.hero .more{animation-delay:.16s}
@media (prefers-reduced-motion:reduce){
  .hero h1,.hero-dek,.hero .more{animation:fade .4s ease both}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .hero-film{display:none}
}
@media (max-width:700px){
  .hero{min-height:clamp(460px,64svh,560px)}
  .hero-copy{padding-bottom:36px}
  .hero .vctl{bottom:36px!important}
  .opener{padding-top:24px}
  .hero-poster,.hero-poster img,.hero-film{object-position:50% 50%}
  .hero .vctl{top:auto;bottom:clamp(48px,7vh,96px);width:44px;padding:0;justify-content:center}
  .hero .vctl span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
}
.opener{padding-top:clamp(24px,3vw,48px)}
.lead-work{margin:0;padding-bottom:clamp(64px,8vw,110px)}
.lead-work img{width:100%;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.lead-work figcaption{margin-top:14px;font-size:13px;font-stretch:112%;letter-spacing:.08em;text-transform:uppercase;color:var(--sage)}
.vctl{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid rgba(238,240,234,.55);background:rgba(20,22,19,.3);color:var(--snow);font:500 13px var(--f);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:border-color .15s ease}
@media (hover:hover) and (pointer:fine){.vctl:hover{border-color:var(--rust-hi)}}
.vctl svg{width:11px;height:11px}
.vctl [hidden]{display:none}

/* Evidence */
.ev{padding:clamp(90px,11vw,160px) 0}
.ev h2{font-size:clamp(46px,6.2vw,100px);max-width:12ch}
.ev-lead{margin:28px 0 clamp(40px,5vw,72px);max-width:34em;font-size:clamp(17px,.4vw + 15px,20px);color:var(--stone)}
.scrolly{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(28px,5vw,80px)}
.beats{list-style:none;margin:0;padding:0}
.beat{min-height:52vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;opacity:.82;transition:opacity .6s var(--out)}
.beat.on,.no-scrolly .beat{opacity:1}
.beat:first-child{min-height:40vh;justify-content:flex-start;padding-top:6vh}
.beat h3{font-size:clamp(30px,1.8vw + 14px,44px);margin-bottom:14px;padding-top:16px;border-top:1px solid var(--rust);max-width:12em}
.beat p{color:var(--stone);font-size:17.5px;margin:0;max-width:30em}
.beat blockquote{margin:20px 0 0;padding:0;font-family:var(--serif);font-style:italic;font-size:clamp(24px,1.4vw + 12px,34px);line-height:1.2;color:var(--snow)}
.beat-link{margin-top:26px!important}
.beat .crop{display:none}
.stage{position:sticky;top:calc(50vh - min(24vw,290px));align-self:start}
.view{position:relative;overflow:hidden;aspect-ratio:1424/832;background:#0d0f0c}
.view img{position:absolute;inset:0;width:100%;height:100%;transform-origin:0 0;transition:transform 1.2s cubic-bezier(.65,0,.25,1)}
.view[data-z="3"] img{transform:translate(-76%,-32%) scale(1.8)}
.view[data-z="4"] img{transform:translate(-6.6%,-121%) scale(2.2)}
.stage-cap{color:#9aa39a;margin:14px 0 0}
@media (max-width:900px){
  .scrolly{grid-template-columns:1fr}
  .stage{display:none}
  .beat,.beat:first-child{min-height:0;opacity:1;padding:26px 0}
  .beat .crop{display:block;margin-top:20px}
  .beat .crop .view img{transition:none}
}

.ic{margin-top:clamp(100px,12vw,180px)}
.ic-head{max-width:40em}
.ic h3{font-family:var(--display);font-size:clamp(40px,4.6vw,72px);line-height:1;margin-bottom:22px}
.ic-head p{color:var(--stone);font-size:18px;margin:0}
.ic-steps{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;gap:clamp(40px,5vw,72px)}
.ic-steps li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:center}
.ic-steps img{width:100%;height:auto;justify-self:start}
.ic-steps li:nth-child(1) img{max-width:660px}
.ic-steps li:nth-child(2) img{max-width:540px}
.ic-steps li:nth-child(3) img{max-width:780px}
.ic-steps b{display:block;font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.2;padding-top:14px;border-top:1px solid var(--rust);margin-bottom:8px}
.ic-steps span{display:block;color:var(--stone);font-size:17px;line-height:1.55;max-width:26em}
@media (max-width:860px){.ic-steps li{grid-template-columns:1fr;gap:18px}}
.ic-more{margin:32px 0 0}
.bridge{margin:clamp(80px,9vw,130px) 0 0;max-width:30em;font-family:var(--serif);font-size:clamp(23px,1.2vw + 15px,31px);line-height:1.35;color:var(--snow)}

/* Belief */
.bl{padding:clamp(100px,12vw,180px) 0}
.bl-grid{display:flex;flex-wrap:wrap;gap:56px;align-items:flex-end}
.bl-grid>div{flex:999 1 620px;min-width:0}
.bl h2{font-size:clamp(46px,6.2vw,100px)}
.manifesto{margin-top:clamp(48px,6vw,84px);display:flex;flex-direction:column;gap:34px;max-width:30em}
.manifesto p{margin:0;font-family:var(--serif);font-size:clamp(23px,1.2vw + 15px,31px);line-height:1.35}
.bl-clip{flex:1 1 300px;min-width:0;max-width:440px;width:100%;height:clamp(440px,48vw,720px);object-fit:cover;background:#7d8f86}

.look{margin-top:clamp(56px,6vw,88px);max-width:34em}
.look h3{font-family:var(--serif);font-size:clamp(22px,1vw + 16px,28px);line-height:1.2;margin-bottom:18px}
.look ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-l)}
.look li{padding:14px 0 14px 26px;border-bottom:1px solid var(--rule-l);position:relative;font-size:17px;color:var(--night)}
.look li::before{content:"";position:absolute;left:0;top:23px;width:12px;height:1px;background:var(--rust-deep)}

/* Craft */
.cr{padding:clamp(100px,12vw,170px) 0}
.cr h2{font-size:clamp(42px,5.2vw,84px);max-width:12ch;margin-bottom:clamp(44px,5vw,72px)}
.cr figure{margin:0}
.cr img{width:100%;height:auto}
.cr-pair{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:end}
.cr-pair figure:first-child img{max-width:500px}
.cr figcaption,.cr-motion-h{margin-top:16px;padding-top:14px;border-top:1px solid var(--rule-d);color:var(--sage);max-width:30em}
.cr figcaption b,.cr-motion-h b{display:block;color:var(--snow);font-family:var(--serif);font-weight:400;font-size:24px;margin-bottom:6px}
.cr-motion{margin-top:clamp(64px,8vw,110px)}
.cr-motion-h{max-width:40em}
.cr-motion ol{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.cr-motion li span{display:block;margin-top:12px;font-size:13px;font-stretch:112%;letter-spacing:.08em;text-transform:uppercase;color:var(--snow)}
@media (max-width:860px){.cr-pair{grid-template-columns:1fr}.cr-motion ol{grid-template-columns:1fr}}

/* Invitation */
.iv{position:relative;isolation:isolate;overflow:clip;min-height:min(92vh,880px);display:flex;align-items:flex-end;padding:clamp(140px,16vw,240px) 0 clamp(56px,6vw,96px)}
.iv-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;background:#2a2116}
.iv::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,22,19,.2) 0,rgba(20,22,19,.5) 40%,rgba(20,22,19,.92) 100%),linear-gradient(90deg,rgba(20,22,19,0) 40%,rgba(20,22,19,.55) 100%)}
.iv-grid{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:40px}
.iv h2{font-size:clamp(54px,7.4vw,116px);line-height:.9;max-width:9ch}
.iv-grid>div{flex:0 1 460px}
.terms{margin:0 0 20px;border-top:1px solid rgba(238,240,234,.35)}
.terms div{display:grid;grid-template-columns:90px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid rgba(238,240,234,.35)}
.terms dt{font-size:13.5px;font-stretch:112%;letter-spacing:.08em;text-transform:uppercase;color:#d7dcd5;padding-top:3px}
.terms dd{margin:0;font-size:17px;line-height:1.45;color:var(--snow)}
.counsel{font-size:15px;line-height:1.55;color:#d7dcd5;margin:0 0 26px}

@media (prefers-reduced-motion:reduce){.view img{transition:none!important}}

/* Work: three firms, three worlds */
.wk{padding:clamp(100px,12vw,170px) 0}
.wk-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,72px);align-items:end;margin-bottom:clamp(44px,5vw,72px)}
.wk h2{font-size:clamp(46px,6.2vw,100px);max-width:10ch;margin:0}
.wk-head p{margin:0;max-width:30em;font-family:var(--serif);font-size:clamp(20px,.8vw + 15px,26px);line-height:1.35;color:var(--snow)}
.worlds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.worlds li{position:relative}
.worlds .clip{box-shadow:0 30px 60px -36px rgba(0,0,0,.7)}
.worlds .clip-ctl{z-index:2}
.worlds h3{font-family:var(--display);font-weight:400;font-size:clamp(28px,2.2vw + 4px,40px);line-height:1;margin:24px 0 10px}
.worlds h3 a{color:var(--snow);text-decoration:none}
.worlds h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.worlds h3 small{display:block;margin-top:10px;font-family:var(--f);font-size:12px;letter-spacing:.08em;font-stretch:112%;text-transform:uppercase;color:var(--rust-hi)}
.worlds p{margin:0;max-width:26em;color:var(--sage);font-size:17px}
.worlds li:focus-within h3 a{text-decoration:underline;text-underline-offset:6px}
@media (hover:hover) and (pointer:fine){
  .worlds li{transition:transform .3s cubic-bezier(.23,1,.32,1)}
  .worlds li:hover{transform:translateY(-3px)}
  .worlds li:hover h3 a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--rust-hi)}
}
.wk-all{margin:clamp(44px,5vw,72px) 0 0}
@media (max-width:900px){.worlds{grid-template-columns:1fr;gap:56px}.wk-head{grid-template-columns:1fr;gap:18px}}
@media (prefers-reduced-motion:reduce){.worlds li{transition:none}}
/* Invitation film pause control */
.iv-ctl{position:absolute;right:var(--gut);top:clamp(28px,4vw,56px);z-index:1}
@media (max-width:700px){.iv-ctl{width:44px;padding:0;justify-content:center}.iv-ctl span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}}