@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Montserrat:wght@400;500;600;700&display=swap');

:root{
  --ink:#11110f;
  --paper:#f1eee6;
  --paper2:#e5e0d5;
  --red:#ef3b32;
  --red2:#ff5a4d;
  --olive:#9ca064;
  --mist:#c9c8bf;
  --white:#fffdf8;
  --line:rgba(17,17,15,.16);
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Montserrat", Arial, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;width:100%}
::selection{background:var(--red);color:white}
.noise{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:1000;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .17s steps(2) infinite}
@keyframes grain{50%{transform:translate(1%,-1%)}}
.wrap{width:min(1420px,calc(100% - 72px));margin:auto}
.mono{font-family:var(--sans);font-size:9px;letter-spacing:.15em;text-transform:uppercase}
.kicker{font:600 10px var(--sans);letter-spacing:.16em;text-transform:uppercase}
.red{color:var(--red)}
header{position:fixed;z-index:800;left:0;right:0;top:0;padding:22px 0;transition:.4s;color:white}
header.dark{color:var(--ink)}
header.scrolled{backdrop-filter:blur(14px);background:rgba(241,238,230,.82);color:var(--ink);border-bottom:1px solid var(--line)}
.nav{display:flex;justify-content:space-between;align-items:center}
.logo{font:700 14px var(--sans);letter-spacing:.18em;text-transform:uppercase}
.logo i{font-style:normal;color:var(--red)}
.navlinks{display:flex;gap:30px}
.navlinks a{font:500 9px var(--sans);letter-spacing:.14em;text-transform:uppercase}
.navlinks a:hover{color:var(--red)}
.nav-cta{font:600 9px var(--sans);letter-spacing:.13em;text-transform:uppercase;border:1px solid currentColor;padding:10px 13px}
.menu{display:none;border:0;background:none;font:600 9px var(--sans);letter-spacing:.14em}

.hero{min-height:100svh;background:#111;position:relative;overflow:hidden;color:#fff;display:flex;align-items:flex-end}
.hero video{position:absolute;inset:0;height:100%;object-fit:cover;opacity:.7;filter:saturate(.78) contrast(1.04)}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 40%,rgba(0,0,0,.72))}
.hero-content{position:relative;z-index:2;width:100%;padding:150px 0 55px}
.hero-top{display:flex;justify-content:space-between;align-items:start}
.hero-title{font:500 clamp(82px,15vw,210px)/.76 var(--serif);letter-spacing:-.055em;margin:28px 0 35px;max-width:1100px}
.hero-title em{color:var(--red);font-style:italic}
.hero-sub{max-width:540px;font-size:22px;line-height:1.15}
.hero-bottom{display:flex;justify-content:space-between;align-items:end;margin-top:80px}
.hero-note{font:500 9px/1.7 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#ddd}
.scroll{font:500 9px var(--sans);letter-spacing:.14em;text-transform:uppercase}
.scroll span{display:inline-block;width:60px;height:1px;background:#fff;margin-left:12px;vertical-align:middle}

.marquee{overflow:hidden;background:var(--red);color:#fff;border-top:1px solid var(--red);border-bottom:1px solid var(--red)}
.marquee-track{display:flex;width:max-content;animation:marquee 32s linear infinite}
.marquee span{font:500 38px/1 var(--serif);padding:17px 25px;white-space:nowrap}
.marquee b{font:600 9px var(--sans);letter-spacing:.15em;margin-left:20px;vertical-align:middle}
@keyframes marquee{to{transform:translateX(-50%)}}

.intro{padding:150px 0 170px;background:var(--paper)}
.intro-grid{display:grid;grid-template-columns:230px 1fr;gap:80px}
.intro h2{font:500 clamp(60px,8vw,120px)/.82 var(--serif);letter-spacing:-.04em;margin:0;max-width:1100px}
.intro h2 em{color:var(--red)}
.intro p{font-size:20px;line-height:1.15;max-width:560px;margin:50px 0 0;color:#55534c}

.chapter{padding:115px 0;border-top:1px solid var(--line)}
.chapter-head{display:grid;grid-template-columns:160px 1fr;gap:70px;margin-bottom:65px}
.chapter-title{font:500 clamp(58px,7vw,110px)/.8 var(--serif);letter-spacing:-.04em;margin:0}
.chapter-desc{font-size:20px;line-height:1.15;max-width:520px;color:#5d5b54}

.feature{position:relative;overflow:hidden;background:#222;height:min(78vw,780px)}
.feature video,.feature img{height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.feature:hover video,.feature:hover img{transform:scale(1.035)}
.feature-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 58%);display:flex;align-items:end;padding:35px;color:white}
.feature-info{display:flex;justify-content:space-between;align-items:end;width:100%}
.feature-title{font:500 clamp(50px,8vw,115px)/.78 var(--serif);letter-spacing:-.04em}
.feature-copy{max-width:340px;font-size:18px;line-height:1.05}
.play{border:1px solid rgba(255,255,255,.7);border-radius:100%;width:62px;height:62px;display:grid;place-items:center;font:10px var(--sans)}

.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.work{position:relative;overflow:hidden;height:620px;background:#ddd}
.work video,.work img{height:100%;object-fit:cover;transition:transform .9s ease}
.work:hover video,.work:hover img{transform:scale(1.045)}
.work:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.67),transparent 55%)}
.work-meta{position:absolute;z-index:2;bottom:25px;left:25px;right:25px;color:#fff;display:flex;justify-content:space-between;align-items:end}
.work-meta h3{font:500 48px/.8 var(--serif);margin:7px 0 0}
.work-meta small{font:600 8px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#ff9c96}
.work-meta .arrow{font-size:25px}

.journey{background:var(--ink);color:var(--paper);padding:140px 0}
.journey .chapter-title{color:var(--paper)}
.journey .chapter-desc{color:#aaa}
.timeline{position:relative;border-top:1px solid #3a3935;margin-top:70px}
.timeline:before{content:"";position:absolute;left:15%;top:0;bottom:0;width:1px;background:#3a3935}
.stop{display:grid;grid-template-columns:15% 35% 1fr;gap:30px;padding:38px 0;border-bottom:1px solid #292824;position:relative}
.stop-no{font:600 10px var(--sans);color:var(--red)}
.stop-place{font:500 48px/.82 var(--serif)}
.stop-copy{font-size:17px;line-height:1.15;color:#9f9c94;max-width:420px}
.stop-dot{position:absolute;left:calc(15% - 4px);top:44px;width:9px;height:9px;background:var(--red);border-radius:50%;box-shadow:0 0 0 5px var(--ink)}

.pillars{padding:140px 0}
.pillar-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pillar{padding:30px 22px 45px;border-right:1px solid var(--line);min-height:310px}
.pillar:last-child{border-right:0}
.pillar-no{font:600 9px var(--sans);color:var(--red);letter-spacing:.15em}
.pillar h3{font:500 43px/.83 var(--serif);margin:75px 0 20px}
.pillar p{font-size:16px;line-height:1.12;color:#68665f}

.dark-block{background:var(--ink);color:var(--paper)}
.dark-block .chapter-desc{color:#a4a198}
.dark-block .kicker{color:var(--red2)}

.statement{padding:150px 0}
.statement h2{font:500 clamp(68px,10vw,150px)/.77 var(--serif);letter-spacing:-.05em;margin:0}
.statement h2 em{color:var(--red)}
.statement-grid{display:grid;grid-template-columns:220px 1fr;gap:80px}

.about-image{height:680px;overflow:hidden}
.about-image video{height:100%;object-fit:cover;filter:saturate(.8)}

.contact{background:var(--red);color:#fff;padding:150px 0}
.contact h2{font:500 clamp(80px,13vw,185px)/.75 var(--serif);letter-spacing:-.055em;margin:20px 0 50px}
.contact h2 em{font-style:italic;color:#ffd2ce}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.contact p{font-size:20px;line-height:1.1;max-width:470px}
.contact a.big{font:500 34px var(--serif);text-decoration:underline;text-underline-offset:7px}

footer{background:var(--ink);color:#aaa;padding:35px 0}
.footer{display:flex;justify-content:space-between;gap:30px}
.footer small{font:500 8px var(--sans);letter-spacing:.12em;text-transform:uppercase}
.footer-links{display:flex;gap:25px}
.footer-links a{font:600 8px var(--sans);letter-spacing:.14em;text-transform:uppercase}

.page-hero{padding:180px 0 100px}
.page-hero h1{font:500 clamp(78px,13vw,185px)/.75 var(--serif);letter-spacing:-.055em;margin:25px 0 40px}
.page-hero h1 em{color:var(--red)}
.page-hero p{font-size:22px;line-height:1.1;max-width:600px;color:#626057}

.case-hero{min-height:88vh;position:relative;color:#fff;display:flex;align-items:flex-end;overflow:hidden}
.case-hero video{position:absolute;inset:0;height:100%;object-fit:cover;filter:brightness(.55)}
.case-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent 60%)}
.case-content{position:relative;z-index:2;padding:150px 0 55px;width:100%}
.case-content h1{font:500 clamp(80px,14vw,200px)/.72 var(--serif);margin:20px 0 35px;letter-spacing:-.055em}
.case-meta{display:flex;gap:50px;flex-wrap:wrap}
.case-meta span{font:500 9px var(--sans);letter-spacing:.13em;text-transform:uppercase;color:#ccc}
.case-meta b{display:block;color:var(--red2);margin-bottom:7px}
.case-body{padding:130px 0}
.case-intro{display:grid;grid-template-columns:1fr 1.2fr;gap:100px}
.case-intro h2{font:500 65px/.8 var(--serif);margin:0}
.case-intro p{font-size:21px;line-height:1.12;color:#5e5c55}
.gallery{margin-top:110px;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.gallery video{height:620px;object-fit:cover}
.gallery .wide{grid-column:1/-1;height:780px}
.cta{margin-top:120px;text-align:center}
.cta h2{font:500 clamp(65px,10vw,140px)/.78 var(--serif);margin:0}
.cta em{color:var(--red)}

@media(max-width:850px){
  .wrap{width:calc(100% - 40px)}
  .navlinks,.nav-cta{display:none}.menu{display:block;color:currentColor}
  .hero-content{padding-bottom:35px}.hero-title{font-size:clamp(76px,19vw,120px)}
  .hero-sub{font-size:19px}.hero-bottom{margin-top:50px}.scroll{display:none}
  .intro,.chapter,.journey,.pillars,.statement,.contact{padding:100px 0}
  .intro-grid,.statement-grid,.chapter-head,.case-intro,.contact-grid{grid-template-columns:1fr;gap:35px}
  .work-grid{grid-template-columns:1fr}.work{height:520px}
  .pillar-grid{grid-template-columns:1fr 1fr}.pillar:nth-child(2){border-right:0}.pillar:nth-child(3),.pillar:nth-child(4){border-top:1px solid var(--line)}
  .stop{grid-template-columns:55px 1fr;gap:15px}.stop-copy{grid-column:2}.timeline:before{left:27px}.stop-dot{left:23px}
  .feature{height:600px}.feature-info{display:block}.feature-copy{margin-top:20px}
  .gallery{grid-template-columns:1fr}.gallery .wide{grid-column:auto;height:500px}.gallery video{height:440px}
  .footer{display:block}.footer-links{margin-top:20px;flex-wrap:wrap}
}
@media(max-width:520px){.pillar-grid{grid-template-columns:1fr}.pillar{border-right:0!important}.pillar+.pillar{border-top:1px solid var(--line)}}