@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   Tokens
   ============================================================ */
:root{
  --black:#000000;
  --grey:#919191;
  --offwhite:#FAFAFA;
  --page:#FFFFFF;
  --rule:rgba(0,0,0,.12);
  --font:'Inter','Inter Placeholder',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --pad:64px;

  /* travel uses expo-out; opacity uses a more even curve, because
     expo reaches 90% almost immediately and reads as a pop */
  --ease:cubic-bezier(0.16,1,0.3,1);
  --ease-fade:cubic-bezier(0.37,0,0.24,1);

  /* sections, tiles, images */
  --appear-dur:1.9s;
  --appear-shift:14px;

  /* headline reveal, left to right */
  --word-dur:1.6s;
  --word-step:90ms;
  --letter-step:36ms;

  /* the quiet little section labels */
  --label-dur:2.0s;
  --label-delay:.6s;

  /* everything else waits for the headline to get moving */
  --after-headline:.65s;

  /* page transition — a plain fade through white */
  --fade-dur:.55s;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body{
  margin:0;background:var(--page);color:var(--black);
  font-family:var(--font);font-weight:500;overflow-x:hidden;
}
img,video{display:block;max-width:100%;}
/* <picture> is only a format switch — it must not become a layout box,
   or the img loses the height it inherits from its real parent. */
picture{display:contents;}
a{color:inherit;text-decoration:none;}

/* ============================================================
   Reveal — word / letter fade, left to right
   ============================================================ */
.reveal{display:block;}
.reveal .w,.reveal .l{
  display:inline-block;opacity:0;
  transition:opacity var(--word-dur) var(--ease-fade);
  transition-delay:calc(var(--i) * var(--word-step));
  will-change:opacity;
}
.reveal .l{
  transition-duration:calc(var(--word-dur) * .8);
  transition-delay:calc(var(--i) * var(--letter-step));
}
.reveal.is-in .w,.reveal.is-in .l{opacity:1;}
.reveal .sp{display:inline-block;white-space:pre;}

/* ============================================================
   Appear — sections, tiles, images
   ============================================================ */
.appear{
  opacity:0;transform:translateY(var(--appear-shift));
  transition:opacity var(--appear-dur) var(--ease-fade),
             transform var(--appear-dur) var(--ease);
  will-change:opacity,transform;
}
.appear.is-in{opacity:1;transform:none;}
.after-h{transition-delay:var(--after-headline);}

/* section labels — a slow pure fade, no travel */
.label-fade{
  opacity:0;transform:none;
  transition:opacity var(--label-dur) var(--ease-fade);
  transition-delay:var(--label-delay);
}
.label-fade.is-in{opacity:1;}

@media (prefers-reduced-motion:reduce){
  .appear,.reveal .w,.reveal .l,.label-fade,.drop{
    opacity:1 !important;transform:none !important;transition:none !important;}
  .wipe{display:none !important;}
}

/* ============================================================
   Page transition wipe
   ============================================================ */
.wipe{
  position:fixed;inset:0;z-index:99;background:var(--page);
  opacity:0;pointer-events:none;will-change:opacity;
}
/* arriving: the veil starts opaque and clears itself, so the nav and the
   headline fade up out of white instead of snapping in at full opacity the
   instant the new document paints. Done as a CSS animation rather than in
   JS deliberately — it runs at first paint, and a scripting failure can
   never strand anyone on a white page. Keyed off :not(.no-js) for the same
   reason: without scripting the veil is display:none anyway. */
@keyframes wipe-in{from{opacity:1;}to{opacity:0;}}
/* fill mode is deliberately left off. With 'both' the finished animation
   keeps holding opacity at 0, and removing it to fade out jumps straight
   to white with no transition. Unfilled, the base opacity:0 applies once
   the animation ends, so the exit has something to transition FROM. */
html:not(.no-js) .wipe{animation:wipe-in var(--fade-dur) ease-in-out;}
/* leaving: the page fades up to white. This is an animation and not a
   transition on purpose. Cancelling the arrival animation and starting an
   opacity transition in the same tick does not reliably produce one — the
   browser has no painted start value to move from, so it snaps. Naming a
   second animation replaces the first cleanly and always plays. */
@keyframes wipe-out{from{opacity:0;}to{opacity:1;}}
html:not(.no-js) .wipe.exit{animation:wipe-out var(--fade-dur) ease-in-out forwards;}
.wipe.exit{opacity:1;}
.no-js .wipe{display:none;}

/* ============================================================
   Nav
   ============================================================ */
.nav{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;justify-content:center;pointer-events:none;}
.nav__inner{
  width:100%;height:64px;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(3,minmax(1px,1fr));gap:32px;
  align-items:center;pointer-events:auto;
}
.nav__logo{grid-column:1;justify-self:start;display:flex;align-items:center;padding-top:5px;}
.nav__logo img{width:141px;height:26px;object-fit:cover;}
.nav__links{grid-column:3;justify-self:end;display:flex;align-items:center;gap:24px;height:100%;}
.nav__links a{font-size:16px;font-weight:600;line-height:1.2em;
  transition:color .55s var(--ease);white-space:pre;}
.nav__links a:hover{color:var(--grey);}
.nav__toggle{display:none;background:none;border:0;padding:0;font:inherit;
  font-size:16px;font-weight:600;color:var(--black);cursor:pointer;grid-column:3;justify-self:end;}

.menu{position:fixed;inset:0;z-index:30;background:var(--black);
  display:flex;flex-direction:column;justify-content:center;gap:8px;padding:0 24px;
  opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility .7s;}
.menu.is-open{opacity:1;visibility:visible;}
.menu a{font-size:48px;font-weight:600;line-height:1.2em;letter-spacing:-.01em;color:var(--offwhite);}
.menu__close{position:absolute;top:0;right:24px;height:64px;display:flex;align-items:center;
  background:none;border:0;font:inherit;font-size:16px;font-weight:600;color:var(--offwhite);cursor:pointer;}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  height:600px;padding:0 var(--pad) 72px;
  display:flex;align-items:flex-end;justify-content:center;gap:64px;position:relative;
}
.hero__grid{flex:1 0 0px;width:1px;
  display:grid;grid-template-columns:repeat(4,minmax(1px,1fr));gap:32px;grid-auto-rows:min-content;}
.hero__label{align-self:end;justify-self:start;}
.hero__label h5{margin:0;font-size:24px;font-weight:600;line-height:1.3em;}
.hero__title{grid-column:2 / span 3;justify-self:start;align-self:start;}
.hero__title h1{margin:0;font-size:64px;font-weight:600;line-height:1.2em;letter-spacing:-.03em;}

/* ============================================================
   Project grid
   ============================================================ */
.grid-section{display:flex;flex-direction:column;align-items:flex-end;
  gap:58px;padding:0 var(--pad) 35px;}
.grid{width:100%;display:grid;gap:8px;
  grid-template-columns:repeat(4,minmax(1px,1fr));grid-auto-rows:350px;}

.tile{position:relative;display:block;overflow:hidden;}
.tile__media{position:absolute;inset:0;z-index:0;}
.tile__media img,.tile__media video{width:100%;height:100%;object-fit:cover;object-position:50% 50%;}
.tile__scrim{position:absolute;inset:0;z-index:1;opacity:0;
  background:linear-gradient(rgba(255,255,255,0) 0%, rgba(0,0,0,.5) 100%);
  transition:opacity .8s var(--ease);}
.tile:hover .tile__scrim{opacity:1;}
.tile__cap{position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;}
.tile__cap-inner{width:100%;display:flex;flex-direction:column;gap:2px;padding:0 32px 24px;}
.tile__cap h4{margin:0;font-size:32px;font-weight:600;line-height:1.3em;letter-spacing:-.01em;
  color:var(--offwhite);word-break:break-word;}
.tile__cap h4.client{color:rgba(250,250,250,.65);}

.viewall{font-size:16px;font-weight:600;line-height:1.2em;
  transition:color .55s var(--ease);}
.viewall:hover{color:var(--grey);}
.s-c2{grid-column:span 2;}
.s-r2{grid-row:span 2;}

/* ============================================================
   Project detail — sticky left column, images right
   ============================================================ */
.proj-hero{height:424px;padding:0 var(--pad) 72px;display:flex;align-items:flex-end;}
.proj-hero__grid{width:100%;display:grid;grid-template-columns:repeat(4,minmax(1px,1fr));gap:32px;
  align-items:end;}
.proj-meta{display:flex;gap:12px;align-items:baseline;}
.proj-meta .client{font-size:20px;font-weight:600;line-height:1.3em;}
.proj-meta .year{font-size:20px;font-weight:600;line-height:1.3em;color:var(--grey);}
.proj-title{grid-column:span 3;margin:0;font-size:96px;font-weight:600;line-height:1;letter-spacing:-.03em;}

.proj-body{display:flex;flex-direction:column;gap:112px;padding:0 var(--pad);}
.proj-block{display:grid;grid-template-columns:repeat(4,minmax(1px,1fr));gap:32px;align-items:start;}
.proj-side{position:sticky;top:128px;display:flex;flex-direction:column;gap:32px;}
.proj-side--body{gap:16px;}
.proj-figs{grid-column:span 3;display:flex;flex-direction:column;gap:16px;}
.proj-figs figure{margin:0;aspect-ratio:16/9;overflow:hidden;}
.proj-figs img,.proj-figs video{width:100%;height:100%;object-fit:cover;}

.field{display:flex;flex-direction:column;gap:16px;}
.field--tight{gap:8px;}
.field-row{display:flex;gap:32px;}
.field-row .field{flex:1 1 0;}
.lbl{margin:0;font-size:16px;font-weight:600;line-height:1.2em;color:var(--black);}
.val{margin:0;font-size:16px;font-weight:500;line-height:1.5;color:var(--grey);}

/* prev / next */
.proj-nav{padding:112px var(--pad) 96px;display:grid;grid-template-columns:repeat(4,minmax(1px,1fr));gap:32px;}
.proj-nav__inner{grid-column:2 / span 3;display:flex;justify-content:space-between;align-items:flex-start;}
.proj-nav a{display:flex;flex-direction:column;gap:8px;}
.proj-nav .dir{margin:0;font-size:14px;font-weight:500;line-height:1.2em;letter-spacing:.01em;color:var(--grey);}
.proj-nav .name{margin:0;font-size:24px;font-weight:600;line-height:1.2em;letter-spacing:-.01em;
  transition:color .55s var(--ease);}
.proj-nav a:hover .name{color:var(--grey);}
.proj-nav .next{text-align:right;align-items:flex-end;}

/* ============================================================
   About
   ============================================================ */
.bio-section{padding:50px var(--pad) 130px;display:flex;justify-content:center;}
.bio-row{width:100%;max-width:1147px;display:flex;gap:37px;align-items:flex-start;}
.bio-main{flex:1 1 682px;display:flex;flex-direction:column;gap:54px;padding-top:45px;}
.bio-main h2{margin:0;font-size:48px;font-weight:600;line-height:1.2em;letter-spacing:-.02em;}
.bio-copy{display:flex;flex-direction:column;gap:24px;}
.bio-copy p{margin:0;font-size:16px;font-weight:500;line-height:1.5;color:var(--black);}
.bio-aside{flex:0 0 428px;display:flex;flex-direction:column;gap:16px;}
.bio-aside img{width:100%;height:auto;}
.bio-cap{display:flex;flex-direction:column;gap:4px;}
.bio-cap p{margin:0;font-size:16px;font-weight:500;line-height:1.2em;}
.bio-cap .role{color:var(--grey);}

.rule{height:1px;background:var(--rule);margin:0 var(--pad);}

.row-section{padding:96px var(--pad);display:grid;
  grid-template-columns:repeat(4,minmax(1px,1fr));gap:32px;align-items:start;}
.row-section h5{margin:0;font-size:20px;font-weight:600;line-height:1.3em;padding-top:16px;}
.row-list{grid-column:2 / span 3;display:flex;flex-direction:column;gap:10px;}
.row-list h2{margin:0;font-size:48px;font-weight:600;line-height:1.2em;letter-spacing:-.02em;}

/* expertise items drop in from above */
.drop{
  opacity:0;transform:translateY(10px);
  transition:opacity 1.5s var(--ease-fade),transform 1.5s var(--ease);
  transition-delay:calc(var(--i) * 150ms);
  will-change:opacity,transform;
}
.drop.is-in{opacity:1;transform:none;}

/* ============================================================
   Contact + footer
   ============================================================ */
.contact{padding:96px var(--pad);display:grid;
  grid-template-columns:repeat(4,minmax(1px,1fr));gap:32px;align-items:start;}
.contact h5{margin:0;font-size:20px;font-weight:600;line-height:1.3em;padding-top:16px;}
.contact__right{grid-column:2 / span 3;display:flex;flex-direction:column;gap:32px;align-items:flex-start;}
.contact h2{margin:0;font-size:48px;font-weight:600;line-height:1.2em;letter-spacing:-.02em;}
.contact__mail{font-size:16px;font-weight:600;line-height:1.2em;
  transition:color .55s var(--ease);}
.contact__mail:hover{color:var(--grey);}

.footer{padding:35px var(--pad) 48px;text-align:center;}
.footer p{margin:0;font-size:16px;font-weight:600;line-height:1.2em;color:var(--grey);}

/* ============================================================
   ≤1535 — desktop
   ============================================================ */
@media (max-width:1535px){
  .hero{height:548px;}
  .hero--tall{height:600px;}
  .hero__label h5{font-size:20px;}
  .hero__title h1{font-size:48px;letter-spacing:-.02em;}
  .grid{grid-auto-rows:300px;}
}

/* ============================================================
   810–1279 — tablet
   ============================================================ */
@media (max-width:1279px){
  :root{--pad:32px;}
  .hero{height:547px;padding:0 64px 72px;}
  .hero__grid{grid-template-columns:repeat(1,minmax(1px,1fr));}
  .hero__label h5{font-size:16px;}
  .hero__title{grid-column:1;}
  .grid{grid-auto-rows:225px;}
  .tile__cap h4{font-size:24px;}
  .tile__cap-inner{padding:0 24px 20px;}

  .proj-title{font-size:48px;}
  .proj-hero__grid{grid-template-columns:repeat(1,minmax(1px,1fr));gap:16px;}
  .proj-title{grid-column:span 1;}
  .proj-body{gap:96px;}
  .proj-block{grid-template-columns:repeat(1,minmax(1px,1fr));gap:24px;}
  .proj-side{position:static;}
  .proj-figs{grid-column:span 1;}
  .proj-nav{grid-template-columns:1fr;}
  .proj-nav__inner{grid-column:1;}

  .bio-row{flex-direction:column-reverse;gap:32px;}
  .bio-aside{flex:1 1 auto;max-width:428px;}
  .bio-main{padding-top:0;gap:32px;}
  .row-section,.contact{grid-template-columns:repeat(1,minmax(1px,1fr));gap:24px;}
  .row-list,.contact__right{grid-column:1;}
  .row-list h2,.contact h2{font-size:32px;letter-spacing:-.03em;}
  .bio-main h2{font-size:32px;}
}

/* ============================================================
   ≤809 — mobile
   ============================================================ */
@media (max-width:809px){
  :root{--pad:24px;}
  .hero{height:473px;gap:32px;padding:0 24px 72px;}
  .hero__title h1{font-size:32px;}
  .nav__inner{padding:0 24px;grid-template-columns:1fr auto;}
  .nav__links{display:none;}
  .nav__toggle{display:block;grid-column:2;}

  .grid{display:flex;flex-direction:column;gap:0;}
  .tile{width:100%;height:300px;}
  .s-c2,.s-r2{grid-column:auto;grid-row:auto;}
  .grid-section{padding:0 24px 24px;gap:32px;}
  .tile__cap h4{font-size:20px;}
  .tile__cap-inner{padding:0 20px 16px;}

  .proj-hero{height:auto;padding:128px 24px 40px;}
  .proj-title{font-size:32px;}
  .proj-nav .name{font-size:20px;}
  .field-row{flex-direction:column;gap:24px;}
  .row-list h2,.contact h2,.bio-main h2{font-size:24px;}
  .menu a{font-size:32px;}
}