:root{
  --black:#000;
  --ice:#E7EEF1;
  --steel:#8E9AA1;
  --line:#262B2F;
  --panel:#0E1113;
  --gutter:clamp(16px,4vw,56px);
  --max:1440px;
  --text:68ch;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--black);color:var(--ice);-webkit-text-size-adjust:100%}
body{background:var(--black);font-family:"Archivo",system-ui,sans-serif;font-size:17px;line-height:1.6;font-variation-settings:"wdth" 100}
img,video{display:block;width:100%;height:auto;background:var(--panel)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--ice);outline-offset:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* header */
.top{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:20px var(--gutter);font-size:15px}
.top a{text-decoration:none}
.top nav{display:flex;gap:clamp(14px,3vw,32px)}
.top nav a{color:var(--ice);opacity:.8}
.top nav a:hover{opacity:1}
.mark{font-weight:700;font-variation-settings:"wdth" 125}

/* display type */
.display{font-weight:900;font-variation-settings:"wdth" 125;letter-spacing:-.02em;line-height:.92}

/* home hero */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden}
.hero video{position:absolute;inset:0;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0) 55%)}
.hero-copy{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 var(--gutter) clamp(28px,6vh,64px)}
.hero h1{font-size:clamp(3.2rem,12.5vw,11.5rem)}
.hero p{max-width:46ch;margin-top:20px;font-size:clamp(1rem,1.6vw,1.25rem);color:var(--ice)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;border:1px solid var(--ice);background:var(--ice);color:var(--black);font:600 15px "Archivo",sans-serif;text-decoration:none;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ice)}
.btn svg{width:12px;height:12px}

/* work list */
.section{padding:clamp(72px,12vw,160px) 0 0}
.section h2{font-size:clamp(2rem,5vw,3.6rem);margin-bottom:clamp(28px,4vw,48px)}
.work-grid{display:grid;grid-template-columns:1fr;gap:44px 20px}
@media(min-width:700px){.work-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.work-grid{grid-template-columns:repeat(3,1fr)}}
.project{display:flex;flex-direction:column;gap:14px;text-decoration:none}
.project .media{overflow:hidden;border-radius:6px}
.project .media video{aspect-ratio:16/9;object-fit:cover;transition:transform .6s ease}
.project:hover .media video{transform:scale(1.03)}
.project h3{font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:800;font-variation-settings:"wdth" 118;line-height:1.1}
.project p{color:var(--steel);font-size:15px;line-height:1.5;margin-top:6px}
.project:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

/* hero credit */
.hero-credit{display:inline-block;margin-top:22px;font-size:13px;color:var(--ice);opacity:.7;text-decoration:none}
.hero-credit:hover{opacity:1;text-decoration:underline}

/* about */
.about-grid{display:grid;gap:40px}
.about-grid .lead{font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.4;max-width:34ch}
.about-grid p+p{margin-top:16px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:32px;margin-top:8px}
.cols h4{font-size:15px;font-weight:600;color:var(--steel);margin-bottom:10px}
.cols ul{list-style:none}
.cols li{padding:6px 0;border-top:1px solid var(--line)}
@media(min-width:900px){.about-grid{grid-template-columns:1fr 1fr;gap:64px}}

/* contact */
.contact{padding:clamp(96px,14vw,200px) 0 40px}
.contact p{color:var(--steel);margin-bottom:12px}
.contact .mail{font-size:clamp(1.7rem,6.4vw,6rem);text-decoration:none;display:inline-block;overflow-wrap:anywhere}
.contact .mail:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:clamp(56px,8vw,96px);padding-top:20px;border-top:1px solid var(--line);font-size:14px;color:var(--steel)}
.foot nav{display:flex;gap:20px}

/* case study */
.case-hero{position:relative;height:88svh;min-height:480px;overflow:hidden}
.case-hero video{position:absolute;inset:0;height:100%;object-fit:cover}
.case-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,0) 50%)}
.case-hero h1{position:absolute;z-index:2;left:var(--gutter);right:var(--gutter);bottom:clamp(24px,5vh,56px);font-size:clamp(2.6rem,8.5vw,8rem)}
.intro{display:grid;gap:40px;padding:clamp(48px,7vw,96px) 0}
.intro .lead{font-size:clamp(1.2rem,2.1vw,1.6rem);line-height:1.45;max-width:40ch}
.facts{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;font-size:15px;align-content:start}
.facts dt{color:var(--steel)}
@media(min-width:900px){.intro{grid-template-columns:1.6fr 1fr;gap:80px}}
.chapter{padding:clamp(40px,6vw,80px) 0}
.chapter-text{max-width:var(--text);margin-bottom:clamp(24px,3vw,40px)}
.chapter h2{font-size:clamp(1.5rem,3vw,2.3rem);font-weight:800;font-variation-settings:"wdth" 118;line-height:1.1;margin-bottom:16px}
.chapter-text p+p{margin-top:14px}
.grid{display:grid;gap:12px}
.grid figure,.single figure{border-radius:6px;overflow:hidden}
.grid-2{grid-template-columns:1fr}
.grid-3v{grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.grid-2{grid-template-columns:1fr 1fr}.grid-3v{grid-template-columns:repeat(3,1fr)}}
.grid-3v video,.grid-3v img{aspect-ratio:9/16;object-fit:cover}
.grid-2 video,.grid-2 img{aspect-ratio:16/9;object-fit:cover}
.portrait img{aspect-ratio:4/5;object-fit:cover}
figcaption{font-size:14px;color:var(--steel);padding:10px 2px 0}
.film video{border-radius:6px}
.film-v{max-width:420px}
.next{display:block;text-decoration:none;padding:clamp(56px,8vw,120px) 0;border-top:1px solid var(--line);margin-top:clamp(40px,6vw,80px)}
.next span{display:block;color:var(--steel);font-size:15px;margin-bottom:8px}
.next strong{font-size:clamp(2rem,6vw,5rem)}
.next:hover strong{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:10px}

/* final vs making of */
.label{font-size:14px;color:var(--steel);margin-bottom:8px}
.pair{display:grid;gap:20px 12px;grid-template-columns:1fr}
.pair figure{border-radius:6px;overflow:hidden}
.pair .v916 video{aspect-ratio:9/16;object-fit:cover}
.pair .v169 video{aspect-ratio:16/9;object-fit:cover}
@media(min-width:700px){.pair{grid-template-columns:3.16fr 1fr}}
.pair-3{display:grid;gap:20px 12px;grid-template-columns:1fr}
@media(min-width:700px){.pair-3{grid-template-columns:1fr 2fr}}
.pair-3 .posts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair-3 video{aspect-ratio:9/16;object-fit:cover;border-radius:6px}
.pair-3 img{aspect-ratio:4/5;object-fit:cover;border-radius:6px}

/* sketch to final */
.compare{display:grid;grid-template-columns:1fr;gap:14px;align-items:center;max-width:1100px}
.compare img{border-radius:6px}
.compare .sketch img{aspect-ratio:3/4;object-fit:cover}
.compare .arrow{justify-self:center;width:40px;height:40px;color:var(--steel);transform:rotate(90deg)}
@media(min-width:700px){.compare{grid-template-columns:1fr 56px 2.4fr}.compare .arrow{transform:none}}
.natural img{aspect-ratio:auto !important}

.sketch-final{max-width:1100px}
.sketch-final img{background:none;border-radius:6px}
.grid-3v.photos img{aspect-ratio:3/4}

/* reel modal */
.reel{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:var(--gutter)}
.reel.open{display:flex}
.reel .frame{width:min(100%,calc((100svh - 120px)*16/9));aspect-ratio:16/9}
.reel iframe{width:100%;height:100%;border:0}
.reel .close{position:absolute;top:16px;right:var(--gutter);background:none;border:0;color:var(--ice);font:600 15px "Archivo",sans-serif;cursor:pointer;padding:10px}

@media (prefers-reduced-motion:reduce){
  .project .media video{transition:none}
  .project:hover .media video{transform:none}
}