:root{
  --onyx:#1C1C1B;
  --walnut:#6A5D52;
  --ash:#958E85;
  --greige:#B7AC9B;
  --stucco:#DEDFDB;
  --paper:#EEEDE9;
  --font:'Jost', system-ui, sans-serif;
  --r:6px;
  --max:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);font-weight:300;letter-spacing:.02em;line-height:1.7;
  color:var(--onyx);background:var(--paper);
  transition:background-color 1.1s ease,color 1.1s ease;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.bg-stucco{background:var(--stucco)}
body.bg-greige{background:var(--greige)}
body.bg-onyx{background:var(--onyx);color:var(--stucco)}
body.bg-walnut{background:var(--walnut);color:var(--stucco)}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.center{text-align:center}
.eyebrow{font-size:11px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;opacity:.75}
h1,h2,h3{font-weight:200;letter-spacing:.06em;line-height:1.15}
h2{font-size:clamp(34px,5vw,58px);margin:18px 0 22px}
h3{font-size:clamp(22px,2.4vw,28px);font-weight:300}
.lead{max-width:600px;margin:0 auto;font-size:17px;opacity:.82}
.muted{opacity:.7}
section{padding:140px 0;position:relative}

/* HEADER */
header{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .5s,color .5s,padding .5s;color:#fff;padding:26px 0}
header.solid{background:rgba(238,237,233,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--onyx);padding:16px 0}
header .wrap{max-width:1280px;display:flex;justify-content:space-between;align-items:center}
.logo{font-weight:300;font-size:16px;letter-spacing:.34em;text-transform:lowercase;white-space:nowrap}
nav ul{display:flex;gap:36px;list-style:none}
nav a{font-size:12px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;position:relative;padding-bottom:4px}
nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .4s}
nav a:hover::after,nav a.active::after{width:100%}
.burger{display:none;background:none;border:0;color:inherit;cursor:pointer;width:28px;height:18px;position:relative}
.burger span{position:absolute;left:0;width:100%;height:1px;background:currentColor;transition:.4s}
.burger span:nth-child(1){top:4px}.burger span:nth-child(2){bottom:4px}
.menu-open .burger span:nth-child(1){top:8px;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){bottom:9px;transform:rotate(-45deg)}

/* HERO */
.hero{height:100vh;min-height:640px;padding:0;color:#fff;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.hero .slides{position:absolute;inset:0}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity 2s ease}
.hero .slide.on{opacity:1}
.hero .slide img{transform:scale(1.08);transition:transform 9s linear}
.hero .slide.on img{transform:scale(1)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,28,27,.35),rgba(28,28,27,.15) 45%,rgba(28,28,27,.55))}
.hero .inner{position:relative;z-index:2;padding:0 24px}
.hero h1{font-size:clamp(42px,8vw,108px);letter-spacing:.16em;font-weight:200;margin:20px 0 22px}
.hero p{max-width:520px;margin:0 auto 38px;font-size:17px;opacity:.92}
.hero .scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.8}
.hero .scroll::after{content:"";display:block;width:1px;height:40px;background:#fff;margin:12px auto 0;animation:drop 2.2s ease-in-out infinite;transform-origin:top}
@keyframes drop{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
.page-hero{height:78vh;min-height:520px}

.btn{display:inline-block;padding:15px 32px;border:1px solid currentColor;border-radius:999px;font-size:12px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;transition:background .4s,color .4s,border-color .4s;cursor:pointer;background:none;font-family:inherit;color:inherit}
.btn:hover{background:var(--onyx);border-color:var(--onyx);color:var(--stucco)}
.btn.light:hover{background:#fff;border-color:#fff;color:var(--onyx)}
.btn.solid{background:var(--onyx);color:var(--stucco);border-color:var(--onyx)}
.btn.solid:hover{background:var(--walnut);border-color:var(--walnut)}
.btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* PERSPECTIVES */
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:70px}
.card{text-align:center}
.card .ph{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;margin-bottom:28px}
.card .ph img{transition:transform 1.4s ease}
.card:hover .ph img{transform:scale(1.04)}
.card .by{font-size:11px;letter-spacing:.28em;text-transform:uppercase;opacity:.6;margin-top:6px}
.card p{max-width:400px;margin:14px auto 0;opacity:.8}

/* OFFER LIST */
.offer{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px;border-top:1px solid rgba(128,120,110,.3)}
.offer div{padding:34px 22px 0;text-align:center}
.offer div + div{border-left:1px solid rgba(128,120,110,.3)}
.offer .n{font-size:12px;letter-spacing:.3em;opacity:.55}
.offer h3{font-size:20px;margin:14px 0 10px}
.offer p{font-size:14.5px;opacity:.75}

/* COLLABS */
.collab{margin-top:90px}
.collab:first-of-type{margin-top:70px}
.collab .head{text-align:center;margin-bottom:30px}
.collab .head .where{font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.65;margin-top:8px}
.gallery{display:grid;gap:12px}
.g3{grid-template-columns:1.25fr 1fr 1fr;height:520px}
.g2{grid-template-columns:1fr 1fr;height:440px}
.gallery figure{border-radius:var(--r);overflow:hidden;position:relative}
.gallery img{transition:transform 1.6s ease}
.gallery figure:hover img{transform:scale(1.05)}

/* MARQUEE */
.marquee{overflow:hidden;padding:10px 0}
.track{display:flex;gap:12px;width:max-content;animation:slide 60s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track figure{width:260px;height:340px;border-radius:var(--r);overflow:hidden;flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* MAP + PLACES */
.map{max-width:780px;margin:60px auto 0;fill:var(--greige);opacity:.9;border-radius:var(--r);overflow:hidden}
body.bg-greige .map{fill:var(--stucco)}
.map svg{display:block;width:100%;height:auto}
.places{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:70px}
.place{text-align:center}
.place .ph{aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;margin-bottom:18px}
.place .ph img{transition:transform 1.6s ease}
.place:hover .ph img{transform:scale(1.05)}
.place h3{font-size:20px;margin-bottom:8px}
.place .c{font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.55;margin-bottom:10px}
.place p{font-size:14px;opacity:.78}

/* WIDE IMAGE BAND */
.band{height:80vh;min-height:480px;border-radius:var(--r);overflow:hidden;position:relative;max-width:1280px;margin:0 auto}
.band img{position:absolute;left:0;top:-10%;width:100%;height:120%;will-change:transform}
.band .q{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;background:rgba(28,28,27,.25);padding:24px}
.band .q p{font-size:clamp(24px,3.4vw,42px);font-weight:200;letter-spacing:.05em;max-width:760px;line-height:1.35}

/* ABOUT */
.story{max-width:680px;margin:0 auto;text-align:center}
.story p{font-size:17px;margin-bottom:22px;opacity:.85}
.people{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:80px}
.person{text-align:center}
.person .ph{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;margin-bottom:26px;background:#8c8c8c}
.person .role{font-size:11px;letter-spacing:.26em;text-transform:uppercase;opacity:.6;margin:8px 0 14px}
.person p{max-width:420px;margin:0 auto 14px;opacity:.82}
.person .ig{font-size:13px;letter-spacing:.14em;border-bottom:1px solid currentColor;padding-bottom:2px}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:70px;text-align:center}
.values p{opacity:.8;font-size:15px;margin-top:10px}

/* CONTACT */
form{max-width:640px;margin:56px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
form .full{grid-column:1/-1}
input,textarea,select{
  width:100%;font-family:inherit;font-weight:300;font-size:15px;letter-spacing:.03em;color:inherit;
  background:transparent;border:0;border-bottom:1px solid currentColor;padding:14px 2px;outline:none;opacity:.9;border-radius:0
}
textarea{min-height:120px;resize:vertical}
input::placeholder,textarea::placeholder{color:inherit;opacity:.55}
select option{color:var(--onyx)}
form .send{grid-column:1/-1;text-align:center;margin-top:20px}
.note{grid-column:1/-1;text-align:center;font-size:13px;opacity:.7;min-height:20px}

/* FOOTER */
footer{background:var(--onyx);color:var(--stucco);padding:110px 0 36px;overflow:hidden}
footer .big{font-size:clamp(40px,9vw,128px);font-weight:200;letter-spacing:.14em;text-align:center;line-height:1;white-space:nowrap}
footer .cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:80px 0 70px;text-align:center}
footer h4{font-size:11px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;opacity:.55;margin-bottom:16px}
footer .cols a,footer .cols span{display:block;font-size:15px;margin-bottom:6px;opacity:.85}
footer .cols a:hover{opacity:1}
footer .base{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.08em;opacity:.5;border-top:1px solid rgba(222,223,219,.15);padding-top:26px}

/* REVEAL */
.r{opacity:0;transform:translateY(34px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.r.in{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}.d4{transition-delay:.48s}
@media (prefers-reduced-motion:reduce){
  .r{opacity:1;transform:none;transition:none}
  .track{animation:none}
  .hero .slide img{transition:none;transform:none}
  html{scroll-behavior:auto}
}

/* RESPONSIVE */
@media (max-width:900px){
  .places{grid-template-columns:repeat(2,1fr)}
  .place:last-child{grid-column:1/-1;max-width:50%;margin:0 auto}
  .offer{grid-template-columns:1fr 1fr}
  .offer div:nth-child(3){border-left:0}
  .offer div{padding-bottom:30px}
}
@media (max-width:720px){
  section{padding:96px 0}
  nav{position:fixed;inset:0;background:var(--onyx);color:var(--stucco);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s}
  nav ul{flex-direction:column;align-items:center;gap:30px}
  nav a{font-size:15px}
  .menu-open nav{opacity:1;pointer-events:auto}
  .burger{display:block;z-index:60}
  .menu-open header{color:var(--stucco)}
  .menu-open header.solid{background:transparent}
  .logo{position:relative;z-index:60}
  .two,.people{grid-template-columns:1fr;gap:56px}
  .offer{grid-template-columns:1fr}
  .offer div + div{border-left:0;border-top:1px solid rgba(128,120,110,.3)}
  .g3,.g2{grid-template-columns:1fr;height:auto}
  .gallery figure{aspect-ratio:4/3}
  .values{grid-template-columns:1fr}
  form{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
  footer .base{flex-direction:column;gap:8px;text-align:center}
  .track figure{width:200px;height:260px}
}