:root{
  --bg:#ffffff;
  --bg2:#f7f7f7;
  --ink:#111111;
  --muted:#606060;
  --line:rgba(0,0,0,.16);
  --accent:#222222;
  --accent2:#444444;
  --pad:clamp(20px,4vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg2)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%}
::selection{background:var(--accent);color:#fff}
.noise{position:fixed;inset:0;pointer-events:none;z-index:1000;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
.topbar{position:fixed;z-index:100;top:0;left:0;right:0;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);border-bottom:1px solid rgba(0,0,0,.12);transition:background .3s ease,backdrop-filter .3s ease}
.topbar.scrolled{background:rgba(255,255,255,.72);backdrop-filter:blur(14px)}
.brand{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.08em}
.brand-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px rgba(0,0,0,.65);display:inline-block}
.desktop-nav{display:flex;gap:28px;font-size:10px;text-transform:uppercase;letter-spacing:.14em}
.desktop-nav a{opacity:.74;transition:.2s}.desktop-nav a:hover{opacity:1;color:#111111}
.menu-toggle{display:none;background:none;border:0;width:42px;height:42px;padding:10px;cursor:pointer}
.menu-toggle span{display:block;height:1px;background:#111111;margin:7px 0;transition:.3s}
.mobile-nav{position:fixed;z-index:90;inset:0;background:rgba(255,255,255,.98);display:flex;flex-direction:column;justify-content:flex-start;padding:96px var(--pad) 32px;gap:20px;overflow-y:auto;overscroll-behavior:contain;visibility:hidden;transform:translateY(-105%);transition:.45s cubic-bezier(.2,.8,.2,1)}
.mobile-nav.open{transform:translateY(0);visibility:visible}
.mobile-nav>a,.mobile-nav summary{font-family:Oswald,sans-serif;font-size:clamp(34px,9vw,60px);font-weight:700;text-transform:uppercase}

.hero{position:relative;min-height:100svh;overflow:hidden;background:#ffffff}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.76) contrast(1.05) brightness(.72)}
.hero-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.65) 0%,rgba(255,255,255,.25) 38%,rgba(255,255,255,.05) 68%),linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.07) 55%,rgba(255,255,255,.78) 100%)}
.hero-gridline{position:absolute;top:76px;left:var(--pad);right:var(--pad);height:1px;background:linear-gradient(90deg,var(--accent) 0 28%,rgba(0,0,0,.18) 28% 100%)}
.hero-copy{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);max-width:730px}
.kicker,.eyebrow,.micro-label,.hero-text{font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:#444444}
.hero h1,.section-head h2,.feature h2,.about h2{font-family:Oswald,Impact,sans-serif;margin:.14em 0 0;font-weight:700;line-height:.84;letter-spacing:-.025em;text-transform:uppercase}
.hero h1{width:max-content;font-size:clamp(24px,9vw,132px);white-space:nowrap}
.hero h1 span{display:block;margin-top:.65em;font-size:clamp(14px,2.4vw,35px);text-align:right;line-height:1;letter-spacing:.18em;margin-right:-.18em;color:#191919}
.hero-text{max-width:450px;line-height:1.65;margin:26px 0 22px}
.text-link{display:inline-flex;align-items:center;gap:16px;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700;border-bottom:1px solid rgba(0,0,0,.35);padding-bottom:7px}.text-link span{color:var(--accent)}
.hero-bottom{position:absolute;left:var(--pad);right:var(--pad);bottom:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:42px;border-bottom:1px solid var(--line);padding-bottom:22px}
.hero-bottom p{max-width:300px;font-size:10px;line-height:1.5;color:#505050;margin:7px 0 0}

.work-section{padding:120px var(--pad) 140px;background:var(--bg)}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:64px}
.section-head h2{font-size:clamp(52px,7vw,94px)}
.section-intro{max-width:500px;margin:0 0 6px auto;color:var(--muted);font-size:14px;line-height:1.8}
.work-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.image-wrap{position:relative;display:block;overflow:hidden;background:#f5f5f5;aspect-ratio:.7}
.image-wrap img{height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .5s ease;filter:saturate(.82) contrast(1.02)}
.work-card:hover img{transform:scale(1.045);filter:saturate(1) contrast(1.04)}
.card-number{position:absolute;right:12px;top:12px;width:34px;height:34px;border:1px solid rgba(0,0,0,.48);border-radius:50%;display:grid;place-items:center;font-size:9px;backdrop-filter:blur(6px)}
.card-copy{padding-top:16px}.card-copy h3{font-family:Oswald,sans-serif;font-size:18px;letter-spacing:.03em;margin:0 0 8px}.card-copy p{color:var(--muted);font-size:11px;line-height:1.55;margin:0}

.feature{position:relative;min-height:94svh;display:flex;align-items:flex-end;overflow:hidden;background:#ffffff}
.feature-image{position:absolute;inset:-4%;background-image:url('assets/images/feature-horizontal.png');background-size:cover;background-position:center 42%;transform:scale(1.02);will-change:transform}
.feature-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.72),rgba(255,255,255,.12) 55%),linear-gradient(180deg,rgba(255,255,255,.08) 38%,rgba(255,255,255,.46) 72%,var(--bg2) 100%)}
.feature-content{position:relative;z-index:2;padding:0 var(--pad) 110px;max-width:820px}
.feature h2{font-size:clamp(62px,8vw,116px)}
.feature-content p:not(.eyebrow){max-width:470px;line-height:1.7;color:#444444;font-size:13px}
.circle-link{width:48px;height:48px;border:1px solid rgba(0,0,0,.55);border-radius:50%;display:grid;place-items:center;margin-top:24px;transition:.25s}.circle-link:hover{background:var(--accent);border-color:var(--accent);transform:translateX(4px)}
.feature-caption{position:absolute;z-index:3;right:var(--pad);bottom:34px;display:flex;gap:24px;font-size:9px;letter-spacing:.16em;color:#484848}

.about{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px;padding:150px var(--pad);background:var(--bg2);border-top:1px solid var(--line)}
.about-number{font-family:Oswald,sans-serif;font-size:clamp(80px,14vw,220px);line-height:.8;color:rgba(0,0,0,.07);white-space:nowrap}
.about-copy{max-width:760px}.about h2{font-size:clamp(52px,7vw,98px)}.about-copy>p:not(.eyebrow){max-width:580px;color:var(--muted);line-height:1.8;font-size:14px;margin:30px 0}

footer{background:#f7f7f7;padding:34px var(--pad);border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto auto;gap:36px;align-items:center;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#505050}.footer-left{display:flex;gap:12px;align-items:center}.footer-left strong{color:#111111}.footer-links{display:flex;gap:22px}.footer-links a:hover{color:#111111}.footer-copy{opacity:.7}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}.reveal.is-visible{opacity:1;transform:none}

@media(max-width:980px){
  .desktop-nav{display:none}.menu-toggle{display:block}
  .hero-bottom{grid-template-columns:1fr 1fr}.hero-bottom>div:nth-child(3){display:none}
  .work-grid{grid-template-columns:repeat(2,1fr);gap:34px 16px}
  .section-head{grid-template-columns:1fr;gap:30px}.section-intro{margin:0}
  .about{grid-template-columns:1fr}.about-number{font-size:100px}
  footer{grid-template-columns:1fr auto}.footer-copy{grid-column:1/-1}
}
@media(max-width:640px){
  :root{--pad:20px}
  .topbar{height:64px}.hero-gridline{top:64px}
  .hero{min-height:92svh}.hero-copy{top:44%}.hero h1{width:max-content;font-size:clamp(24px,9vw,132px)}.hero-text{max-width:86%}
  .hero-bottom{grid-template-columns:1fr;gap:10px;bottom:16px}.hero-bottom>div:nth-child(2){display:none}
  .work-section{padding:90px var(--pad)}.work-grid{grid-template-columns:1fr 1fr}.card-copy h3{font-size:15px}.card-copy p{font-size:10px}.image-wrap{aspect-ratio:.72}
  .feature{min-height:78svh}.feature-image{background-position:62% center}.feature-content{padding-bottom:84px}.feature h2{font-size:15vw}.feature-content p:not(.eyebrow){font-size:12px;max-width:84%}.feature-caption{display:none}
  .about{padding:100px var(--pad);gap:42px}.about-number{font-size:74px}.about h2{font-size:15vw}
  footer{grid-template-columns:1fr;gap:18px}.footer-left{flex-wrap:wrap}.footer-links{justify-content:flex-start}
}

/* Main navigation dropdowns and mobile submenus. */
.brand{flex-shrink:0}
.desktop-nav{gap:clamp(14px,1.8vw,28px)}
.nav-group{position:relative}
.nav-group summary{cursor:pointer;list-style:none;opacity:.74}
.nav-group summary::-webkit-details-marker{display:none}
.nav-group summary::after{content:"+";margin-left:7px}
.nav-group[open]>summary::after{content:"−"}
.nav-group summary:hover,.nav-group[open]>summary{opacity:1;color:#111111}
.desktop-nav .submenu{position:absolute;top:100%;right:0;min-width:240px;padding:20px;background:var(--bg2);border:1px solid var(--line);display:flex;flex-direction:column;gap:18px}
.desktop-nav .submenu a{line-height:1.5;white-space:nowrap}
.mobile-nav .submenu{display:flex;flex-direction:column;gap:16px;padding:20px 0 4px 16px;border-left:1px solid var(--line);margin-top:12px}
.mobile-nav .submenu a{font-family:Inter,Arial,sans-serif;font-size:15px;line-height:1.5;font-weight:400;text-transform:none}
body.menu-open{overflow:hidden}
@media(min-width:981px){.mobile-nav{display:none}}

/* Light monochrome theme: preserve photography and video colors. */
.topbar{background:rgba(255,255,255,.88)}
.card-number{background:rgba(255,255,255,.72)}
.circle-link:hover{color:#fff}
/* Allow the expanded navigation to switch before it crowds the brand. */
@media(min-width:981px) and (max-width:1200px){.desktop-nav{display:none}.menu-toggle{display:block}.mobile-nav{display:flex}}
body.lightbox-open{overflow:hidden}
.lightbox{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;padding:64px 76px;background:rgba(255,255,255,.97);color:#111}
.lightbox::backdrop{background:rgba(0,0,0,.45)}
.lightbox[open]{display:grid;place-items:center}
.lightbox figure{margin:0;max-width:100%;pointer-events:none;text-align:center}
.lightbox img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 160px);object-fit:contain;margin:auto;pointer-events:auto;touch-action:pan-y}
.lightbox figcaption{font:12px Inter,Arial,sans-serif;letter-spacing:.12em;margin-top:18px}
.lightbox button{position:absolute;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:0;background:transparent;color:rgba(80,80,80,.65);font:300 32px Arial,sans-serif;cursor:pointer;transition:color .15s ease}
.lightbox button:focus-visible{outline:2px solid #111;outline-offset:4px}
.lightbox button[hidden]{display:none}
.lightbox-close{top:16px;right:20px}.lightbox-prev{left:16px;top:calc(50% - 24px)}.lightbox-next{right:16px;top:calc(50% - 24px)}
@media(max-width:640px){.lightbox{padding:70px 16px 96px}.lightbox img{max-height:calc(100dvh - 210px)}.lightbox-prev,.lightbox-next{top:auto;bottom:20px}.lightbox-prev{left:calc(50% - 64px)}.lightbox-next{right:calc(50% - 64px)}}

.lightbox button:hover{color:#444}
.lightbox[open]{animation:lightbox-fade-in .18s ease-out}
@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.lightbox[open]{animation:none}}

.scroll-image{opacity:0;transition:opacity .65s ease var(--image-delay,0ms)}
.scroll-image.image-in-view{opacity:1}
@media(prefers-reduced-motion:reduce){.scroll-image{opacity:1;transition:none}}