@font-face{font-family:"Geist";src:url(/assets/fonts/Geist-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(/assets/fonts/BarlowCondensed-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* Fantasy work system. Suisse Intl is proprietary; Geist 500 is the open stand-in.
   Sizes follow fantasy.co: 1 unit = clamp(1px,(100vw/size)*10,10px)
   with size 430 / 1194 / 1728. */
.fx{--size:430;--u:clamp(1px,calc((100vw / var(--size)) * 10),10px);--ease:cubic-bezier(.19,1,.22,1);--line:rgba(255,255,255,.15);background:#000;color:#fff;font-family:"Geist","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:500;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
@media (min-width:650px){.fx{--size:1194}}
@media (min-width:1440px){.fx{--size:1728}}
html[data-page="work"] body,html[data-page="case"] body{background:#000;color:#fff}
html[data-page="work"] .nav,html[data-page="case"] .nav{color:#fff}
.fx a{color:inherit}
.fx-h2,.fx-alt,.fx-h4,.fx-h3{font-weight:500;text-wrap:balance}
.fx-h2{margin:0 0 0 -.05em;font-size:calc(var(--u) * 8.5);letter-spacing:-.04em;line-height:.95}
.fx-alt{font-size:calc(var(--u) * 6);letter-spacing:-.03em;line-height:1}
.fx-h4{font-size:calc(var(--u) * 3.3);letter-spacing:-.02em;line-height:1.1}
.fx-h3{font-size:calc(var(--u) * 2.6);letter-spacing:-.03em;line-height:1.05}
.fx-body{font-size:calc(var(--u) * 2);letter-spacing:-.01em;line-height:1.4}
.fx-eye{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:700;font-size:calc(var(--u) * 1.8);letter-spacing:.01em;line-height:1;text-transform:uppercase}
@media (min-width:650px){
  .fx-h2{font-size:calc(var(--u) * 14.5)}
  .fx-alt{font-size:calc(var(--u) * 9)}
  .fx-h4{font-size:calc(var(--u) * 4)}
  .fx-h3{font-size:calc(var(--u) * 3.4)}
  .fx-body{font-size:clamp(15px,calc(var(--u) * 1.8),24px)}
}
@media (min-width:1440px){
  .fx-h2{font-size:calc(var(--u) * 20)}
  .fx-alt{font-size:calc(var(--u) * 14)}
  .fx-h4{font-size:calc(var(--u) * 5)}
  .fx-h3{font-size:calc(var(--u) * 4.2)}
  .fx-body{font-size:clamp(15px,calc(var(--u) * 2),24px)}
}
.fx-max{width:100%;max-width:calc(var(--u) * 172.8);margin-inline:auto;padding-inline:calc(var(--u) * 1.6)}
@media (min-width:650px){.fx-max{padding-inline:calc(var(--u) * 3.2)}}
@media (min-width:1440px){.fx-max{padding-inline:calc(var(--u) * 6)}}
.fx-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:calc(var(--u) * 1.6)}
@media (min-width:650px){.fx-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:calc(var(--u) * 1.4)}}
@media (min-width:1440px){.fx-grid{column-gap:calc(var(--u) * 2)}}
.fx-gap{height:calc(var(--u) * 10)}
@media (min-width:650px){.fx-gap{height:calc(var(--u) * 18)}}

.fx-hero{position:relative;height:100svh;min-height:560px;background:#000;color:#fff;overflow:hidden}
.fx-hero__media{position:absolute;inset:0}
.fx-hero__media picture{width:100%;height:100%}
.fx-hero__media img{width:100%;height:100%;object-fit:cover}
.fx-hero__media::before{content:"";position:absolute;inset:0 0 auto 0;height:32%;background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent);z-index:1}
.fx-hero__media::after{content:"";position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(to bottom,transparent,#000);z-index:1}
html.anim .fx-hero__media img{transform:scale(1.08)}
html.ready .fx-hero__media img{transform:scale(1);transition:transform 1.25s var(--ease)}
.fx-crumb{position:absolute;z-index:2;top:max(84px,calc(var(--u) * 10));left:calc(var(--u) * 1.6);margin:0;font-size:clamp(13px,calc(var(--u) * 1.8),18px);letter-spacing:-.01em;opacity:.85}
@media (min-width:650px){.fx-crumb{left:calc(var(--u) * 3.2)}}
@media (min-width:1440px){.fx-crumb{left:calc(var(--u) * 6)}}
.fx-crumb a{text-decoration:none}
.fx-crumb a:hover{opacity:.6}
.fx-hero__foot{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:calc(var(--u) * 3);padding:0 calc(var(--u) * 1.6) calc(var(--u) * 4)}
@media (min-width:650px){.fx-hero__foot{padding-inline:calc(var(--u) * 3.2)}}
@media (min-width:1440px){.fx-hero__foot{padding-inline:calc(var(--u) * 6)}}

.fx-cases{position:relative;background:#000;color:#fff}
.fx-sticky{position:absolute;inset:0;pointer-events:none}
.fx-stage{position:sticky;top:0;height:100svh;overflow:hidden;background:#000}
.fx-bg{position:absolute;inset:0;opacity:0;transition:opacity .65s linear;pointer-events:none}
.fx-bg.is-on{opacity:1;z-index:1;pointer-events:auto}
.fx-bg picture,.fx-bg img{width:100%;height:100%;object-fit:cover;display:block}
.fx-bg img{transform:scale(1.1);transition:transform 1.25s var(--ease)}
.fx-bg.is-on img{transform:scale(1)}
.fx-bg picture{position:absolute;inset:0}
.fx-bg::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.15);z-index:1}
.fx-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--u) * 40);background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.95));z-index:1}
@media (min-width:650px){.fx-bg::after{height:calc(var(--u) * 35);background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.85))}}
.fx-bg.is-on:hover img{transform:scale(1.04)}
.fx-bg__hit{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;color:#fff;text-decoration:none;pointer-events:none}
.fx-bg.is-on .fx-bg__hit{pointer-events:auto}
.fx-bg__copy{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u) * 3.2);width:100%;padding:0 calc(var(--u) * 1.6) calc(var(--u) * 8);opacity:0;transition:opacity .6s linear}
.fx-bg.is-on.is-live .fx-bg__copy{opacity:1}
@media (min-width:650px){.fx-bg__copy{padding-inline:calc(var(--u) * 3.2)}}
@media (min-width:1440px){.fx-bg__copy{padding-inline:calc(var(--u) * 6)}}
.fx-bg__name{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fx-line{margin:0;opacity:.6;max-width:calc(var(--u) * 33.5);font-size:calc(var(--u) * 2);line-height:1.4;letter-spacing:-.01em}
@media (min-width:650px){.fx-line{max-width:calc(var(--u) * 40);font-size:clamp(15px,calc(var(--u) * 1.8),24px)}}
@media (min-width:1440px){.fx-line{font-size:clamp(15px,calc(var(--u) * 2),24px)}}
.fx-names{position:relative;z-index:2;display:flex;flex-direction:column;gap:100svh;padding:100svh 0;pointer-events:none}
.fx-name__box{height:calc(var(--u) * 18);overflow:hidden;display:flex;align-items:flex-end}
.fx-name .fx-max{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u) * 1.2)}
.fx-idx{margin:0;opacity:.6;font-size:calc(var(--u) * 2);letter-spacing:-.01em;line-height:1.4}
.fx-name .fx-alt{margin:0}
@media (min-width:650px){.fx-idx{font-size:clamp(15px,calc(var(--u) * 1.8),24px)}}
@media (min-width:1440px){.fx-idx{font-size:clamp(15px,calc(var(--u) * 2),24px)}}
.fx-view{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;flex:none;height:calc(var(--u) * 5);padding:0 calc(var(--u) * 3.2);border-radius:calc(var(--u) * 1);border:0;font-size:calc(var(--u) * 1.8);font-weight:500;line-height:1;letter-spacing:-.01em;color:#fff;overflow:hidden;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.fx-view span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:calc(var(--u) * .6)}
.fx-view svg{height:calc(var(--u) * 1.6);width:auto;display:block;fill:currentColor}
.fx-view::before{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(255,255,255,.25);z-index:0}
.fx-view::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;transform:scaleX(0);transform-origin:right center;transition:transform .5s var(--ease);z-index:1}
.fx-bg__hit:hover .fx-view,.fx-card:hover .fx-view{color:#000}
.fx-bg__hit:hover .fx-view::after,.fx-card:hover .fx-view::after{transform:scaleX(1);transform-origin:left center}
.fx-bg__hit:focus-visible{outline:2px solid #fff;outline-offset:-6px}

.fx-intro{padding-bottom:calc(var(--u) * 2)}
.fx-intro .fx-h4{grid-column:1 / -1;margin:0}
@media (min-width:650px){.fx-intro .fx-h4{grid-column:1 / span 9}}
@media (min-width:1440px){.fx-intro .fx-h4{grid-column:1 / span 8}}
.fx-block{padding:calc(var(--u) * 2) 0}
.fx-block .fx-eye{grid-column:1 / -1;margin:0 0 calc(var(--u) * 3)}
.fx-copy{grid-column:1 / -1}
.fx-copy p{margin:0 0 calc(var(--u) * 1.8);max-width:42em;color:rgba(255,255,255,.78);font-size:clamp(15px,calc(var(--u) * 1.8),20px);line-height:1.45;text-wrap:pretty}
@media (min-width:650px){
  .fx-block .fx-eye{grid-column:1 / span 5;margin:0}
  .fx-copy{grid-column:7 / span 6}
}
.fx-meta{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 2.6) calc(var(--u) * 3);margin:calc(var(--u) * 4) 0 0;padding-top:calc(var(--u) * 2.4);border-top:1px solid var(--line)}
.fx-meta div{min-width:0}
.fx-meta dt{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:700;font-size:calc(var(--u) * 1.6);letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.55);line-height:1}
.fx-meta dd{margin:.35em 0 0;font-size:clamp(15px,calc(var(--u) * 1.8),20px);letter-spacing:-.01em}
.fx-rows{list-style:none;margin:calc(var(--u) * 4) 0 0;padding:0}
.fx-row{display:grid;grid-template-columns:calc(var(--u) * 7) 1fr;gap:calc(var(--u) * 2);padding:calc(var(--u) * 3) 0;border-top:1px solid var(--line)}
.fx-row:last-child{border-bottom:1px solid var(--line)}
.fx-num{font-size:clamp(15px,calc(var(--u) * 1.8),20px);opacity:.6;padding-top:.35em}
.fx-row h3{margin:0 0 .35em;font-size:clamp(20px,calc(var(--u) * 2.8),36px);font-weight:500;letter-spacing:-.03em;line-height:1.15}
.fx-row p{margin:0;max-width:48em;color:rgba(255,255,255,.72);font-size:clamp(15px,calc(var(--u) * 1.8),20px);line-height:1.45}
@media (min-width:650px){
  .fx-row{grid-template-columns:calc(var(--u) * 14) minmax(0,1fr);padding:calc(var(--u) * 4) 0}
}
.fx-frame{border-radius:calc(var(--u) * 1);overflow:hidden;background:#111;margin:0}
.fx-frame picture,.fx-frame img{width:100%;height:100%;object-fit:cover;display:block}
.fx-frame--land{aspect-ratio:16/9}
.fx-frame--port{aspect-ratio:3/4}
.fx-pair{display:grid;gap:calc(var(--u) * 1.6)}
@media (min-width:650px){.fx-pair{grid-template-columns:1fr 1fr;gap:calc(var(--u) * 2)}}
html.anim .fx-frame img{transform:scale(1.06)}
.fx-frame.is-in img{transform:scale(1);transition:transform 1.25s var(--ease)}
.fx-quote{padding:calc(var(--u) * 4) 0}
.fx-quote p{margin:0;max-width:18em;font-size:calc(var(--u) * 3.3);letter-spacing:-.02em;line-height:1.12;font-weight:500}
@media (min-width:650px){.fx-quote p{font-size:calc(var(--u) * 4)}}
@media (min-width:1440px){.fx-quote p{font-size:calc(var(--u) * 5)}}
.fx-quote figcaption{margin-top:calc(var(--u) * 2.4);color:rgba(255,255,255,.6);font-size:clamp(14px,calc(var(--u) * 1.8),18px)}
.fx-up{padding:calc(var(--u) * 4) 0 calc(var(--u) * 8)}
.fx-up .fx-eye,.fx-studies .fx-eye{display:block;margin:0 0 calc(var(--u) * 4)}
.fx-cards{display:grid;gap:calc(var(--u) * 4) calc(var(--u) * 2)}
@media (min-width:650px){.fx-cards{grid-template-columns:repeat(3,1fr)}}
.fx-card{display:block;color:#fff;text-decoration:none}
.fx-card figure{aspect-ratio:1;border-radius:calc(var(--u) * 1);overflow:hidden;background:#141414;margin:0 0 calc(var(--u) * 2.4)}
.fx-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.25s var(--ease)}
.fx-card:hover img{transform:scale(1.06)}
.fx-card h3{margin:0;font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:700;font-size:calc(var(--u) * 2.4);letter-spacing:.01em;line-height:1;text-transform:uppercase}
.fx-card p{margin:.55em 0 0;color:rgba(255,255,255,.68);font-size:clamp(14px,calc(var(--u) * 1.7),18px);line-height:1.4;max-width:28em}
.fx-card .fx-view{margin-top:calc(var(--u) * 1.8)}
.fx-studies{padding:calc(var(--u) * 6) 0 calc(var(--u) * 8);background:#000;color:#fff}
.fx-stat{display:grid;gap:.4em;padding:calc(var(--u) * 3) 0;border-top:1px solid var(--line)}
.fx-stat:last-child{border-bottom:1px solid var(--line)}
.fx-stat b{font-size:calc(var(--u) * 5);font-weight:500;letter-spacing:-.03em;line-height:.95}
@media (min-width:650px){.fx-stat b{font-size:calc(var(--u) * 7)}}
@media (min-width:1440px){.fx-stat b{font-size:calc(var(--u) * 9)}}
.fx-stat span{color:rgba(255,255,255,.68);font-size:clamp(15px,calc(var(--u) * 1.8),20px)}
.fx-stats{list-style:none;margin:calc(var(--u) * 4) 0 0;padding:0}

@media (prefers-reduced-motion:reduce){
  .fx-sticky{position:relative;inset:auto}
  .fx-stage{position:relative;height:auto;overflow:visible}
  .fx-bg{position:relative;height:100svh;opacity:1;pointer-events:auto}
  .fx-bg__copy{opacity:1}
  .fx-bg__name{position:static;width:auto;height:auto;margin:0 0 calc(var(--u) * 1.2);overflow:visible;clip:auto;white-space:normal}
  .fx-names{display:none}
  .fx-bg img,.fx-hero__media img,.fx-frame img,.fx-card img,.fx-view,.fx-view::after{transition:none!important;transform:none!important}
}