:root{
  --bg:#0b0b0b;
  --fg:#f5f5f1;
  --muted:#9a9a96;
  --line:rgba(255,255,255,.15);
  --pad:clamp(20px,4vw,64px);
  --max:1800px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Arial,Helvetica,sans-serif;font-synthesis:none}
body.is-menu-open,body.lightbox-open{overflow:hidden}
a{color:inherit}
img{max-width:100%;display:block}
button{font:inherit}
.skip{position:fixed;left:12px;top:-80px;z-index:1000;background:#fff;color:#000;padding:10px 14px}
.skip:focus{top:12px}
.site-header{
  position:fixed;inset:0 0 auto;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  min-height:92px;padding:18px var(--pad);
  background:linear-gradient(to bottom,rgba(0,0,0,.62),rgba(0,0,0,0));
  transition:background .25s ease,backdrop-filter .25s ease,border-color .25s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{background:rgba(9,9,9,.84);backdrop-filter:blur(16px);border-color:var(--line)}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;letter-spacing:.22em;font-size:10px}
.brand img{width:112px;height:auto}
.main-nav{display:flex;gap:28px;align-items:center}
.main-nav a{text-decoration:none;text-transform:uppercase;letter-spacing:.16em;font-size:11px;position:relative}
.main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:currentColor;transition:right .25s ease}
.main-nav a:hover::after,.main-nav a:focus-visible::after{right:0}
.menu-toggle{display:none;background:none;border:0;color:#fff;width:46px;height:46px;position:relative}
.menu-toggle span{position:absolute;width:22px;height:1px;background:#fff;left:12px;transition:transform .2s ease,top .2s ease}
.menu-toggle span:first-child{top:18px}.menu-toggle span:last-child{top:27px}
.hero{height:100svh;min-height:680px;position:relative;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity 1.1s ease,transform 7s ease}
.hero__image.is-active{opacity:1;transform:scale(1.07)}
.hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.76) 0%,rgba(0,0,0,.24) 58%,rgba(0,0,0,.36) 100%),linear-gradient(0deg,rgba(0,0,0,.5) 0%,transparent 35%)}
.hero__content{position:absolute;left:var(--pad);bottom:clamp(80px,10vh,120px);z-index:2;max-width:980px}
.eyebrow{margin:0 0 24px;letter-spacing:.23em;text-transform:uppercase;font-size:11px;color:#d4d4ce}
.hero h1{font-weight:500;letter-spacing:-.055em;line-height:.84;font-size:clamp(64px,10vw,162px);margin:0 0 44px;text-transform:uppercase}
.hero__link{text-decoration:none;text-transform:uppercase;letter-spacing:.13em;font-size:11px;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:8px}
.hero__link span{display:inline-block;margin-left:10px}
.hero__counter{position:absolute;right:var(--pad);bottom:clamp(80px,10vh,120px);z-index:2;letter-spacing:.18em;font-size:10px}
.intro{max-width:var(--max);margin:auto;padding:clamp(100px,13vw,220px) var(--pad) clamp(70px,9vw,150px);display:grid;grid-template-columns:1.25fr .75fr;gap:8vw;align-items:end}
.intro h2{font-weight:500;letter-spacing:-.045em;line-height:.98;font-size:clamp(44px,6vw,96px);max-width:950px;margin:0;text-transform:uppercase}
.intro>p{color:#b9b9b4;font-size:clamp(16px,1.4vw,21px);line-height:1.55;margin:0 0 8px;max-width:620px}
.portfolio{max-width:var(--max);margin:0 auto;padding:0 var(--pad) clamp(100px,12vw,180px);columns:3;column-gap:14px}
.work{margin:0 0 14px;break-inside:avoid;position:relative;overflow:hidden;background:#151515}
.work__button{border:0;background:none;color:#fff;padding:0;width:100%;cursor:zoom-in;text-align:left;display:block;position:relative}
.work img{width:100%;height:auto;transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s ease}
.work__overlay{position:absolute;inset:auto 0 0;display:flex;align-items:center;justify-content:space-between;padding:22px;background:linear-gradient(transparent,rgba(0,0,0,.72));opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;font-size:11px;letter-spacing:.15em;text-transform:uppercase}
.work__button:hover img,.work__button:focus-visible img{transform:scale(1.025);filter:brightness(.8)}
.work__button:hover .work__overlay,.work__button:focus-visible .work__overlay{opacity:1;transform:translateY(0)}
.contact{min-height:72vh;position:relative;display:grid;place-items:center;overflow:hidden}
.contact__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.contact__shade{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.contact__content{position:relative;z-index:2;text-align:center;padding:100px var(--pad);max-width:1100px}
.contact h2{font-size:clamp(58px,9vw,140px);font-weight:500;letter-spacing:-.055em;line-height:.9;text-transform:uppercase;margin:0 0 28px}
.contact__content>p:not(.eyebrow){font-size:18px;color:#c6c6c1}
.contact__links{margin-top:42px;display:flex;gap:16px 28px;justify-content:center;flex-wrap:wrap}
.contact__links a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:7px;font-size:clamp(16px,1.5vw,21px)}
.site-footer{min-height:220px;padding:54px var(--pad);display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:end;border-top:1px solid var(--line);max-width:var(--max);margin:auto}
.site-footer p{font-size:11px;color:#8c8c88;letter-spacing:.1em;text-align:center;margin:0}
.site-footer nav{display:flex;justify-content:flex-end;gap:22px}
.site-footer nav a{font-size:10px;text-transform:uppercase;letter-spacing:.13em;text-decoration:none;color:#bcbcb7}
.brand--footer img{width:88px}.brand--footer span{font-size:8px;color:#999}
.lightbox{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(5,5,5,.97);color:white}
.lightbox::backdrop{background:#050505}
.lightbox[open]{display:grid;grid-template-columns:80px 1fr 80px;align-items:center}
.lightbox figure{margin:0;height:100%;display:flex;align-items:center;justify-content:center;position:relative;padding:46px 24px}
.lightbox figure img{max-width:min(88vw,1700px);max-height:86dvh;object-fit:contain}
.lightbox figcaption{position:absolute;bottom:18px;left:24px;right:24px;text-align:center;text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:#aaa}
.lightbox button{background:none;border:0;color:#fff;cursor:pointer}
.lightbox__close{position:absolute;right:24px;top:14px;font-size:40px;font-weight:200;z-index:3;width:54px;height:54px}
.lightbox__prev,.lightbox__next{font-size:31px;height:100%;opacity:.72}
.lightbox__prev:hover,.lightbox__next:hover,.lightbox__close:hover{opacity:1}
.legal-page{background:#f4f3ef;color:#111}
.legal-page .site-header{position:sticky;background:#0b0b0b}
.legal-main{max-width:940px;margin:auto;padding:clamp(80px,10vw,150px) var(--pad)}
.legal-main .eyebrow{color:#666}
.legal-main h1{font-weight:500;font-size:clamp(54px,8vw,104px);letter-spacing:-.05em;line-height:.9;margin:0 0 70px;text-transform:uppercase}
.legal-main h2{margin:52px 0 12px;font-size:20px;text-transform:uppercase;letter-spacing:.04em}
.legal-main p,.legal-main li{font-size:16px;line-height:1.7;color:#333}
.legal-main a{color:#111;text-decoration-thickness:1px;text-underline-offset:3px}
.legal-page .site-footer{color:#111;border-color:#ccc}
.legal-page .site-footer nav a,.legal-page .site-footer p{color:#555}
.legal-page .brand--footer img{filter:invert(1)}
@media(max-width:980px){
  .portfolio{columns:2}
  .intro{grid-template-columns:1fr;gap:36px}
  .site-footer{grid-template-columns:1fr;align-items:start}
  .site-footer p{text-align:left}
  .site-footer nav{justify-content:flex-start}
}
@media(max-width:720px){
  .site-header{min-height:76px}
  .brand img{width:100px}
  .brand span{display:none}
  .menu-toggle{display:block;z-index:102}
  .main-nav{position:fixed;inset:0;background:#0a0a0a;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:100px var(--pad) 70px;gap:22px;transform:translateY(-100%);transition:transform .35s cubic-bezier(.77,0,.18,1);z-index:101}
  .main-nav a{font-size:clamp(34px,11vw,64px);letter-spacing:-.035em;text-transform:uppercase}
  body.is-menu-open .main-nav{transform:none}
  body.is-menu-open .menu-toggle span:first-child{top:23px;transform:rotate(45deg)}
  body.is-menu-open .menu-toggle span:last-child{top:23px;transform:rotate(-45deg)}
  .hero{min-height:620px}
  .hero h1{font-size:clamp(54px,17vw,96px)}
  .hero__counter{display:none}
  .intro{padding-top:100px}
  .portfolio{columns:1;padding-left:0;padding-right:0;column-gap:0}
  .work{margin-bottom:4px}
  .work__overlay{opacity:1;transform:none;padding:18px}
  .contact{min-height:66vh}
  .contact__links{flex-direction:column;align-items:center}
  .lightbox[open]{grid-template-columns:50px 1fr 50px}
  .lightbox figure{padding:50px 0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Protected e-mail reveal */
.email-reveal{appearance:none;background:transparent;color:inherit;border:0;border-bottom:1px solid rgba(255,255,255,.45);padding:0 0 7px;cursor:pointer;font:inherit;font-size:clamp(16px,1.5vw,21px)}
.email-reveal:hover,.email-reveal:focus-visible{border-bottom-color:currentColor}
.email-reveal--legal{color:#111;border-bottom-color:#888;font-size:inherit;padding-bottom:2px;text-decoration:none}
.contact--fullscreen{min-height:100svh}