/* Reduce Motion is ignored by choice: every animation runs for everyone. The former
   reduced-motion rules are kept as `@media not all` blocks (never applied) — to restore
   them, change those back to `@media(prefers-reduced-motion:reduce)` and see the JS notes. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Montserrat+Alternates:wght@700&display=swap');
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px;overflow-anchor:none}
body{margin:0;background:#EBEBEB;color:#000;font-family:Montserrat,Arial,sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit}
a:focus-visible,button:focus-visible{outline:2px solid #555;outline-offset:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip{position:fixed;top:12px;left:12px;z-index:50;background:#000;color:#fff;padding:12px;transform:translateY(-200%)}
.skip:focus{transform:none}
video{width:100%;height:100%;display:block;object-fit:cover}
header{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:26px 3vw;background:#EBEBEB;opacity:0;visibility:hidden}
header img{display:block;width:126px;height:auto}
nav{display:flex;gap:32px;font-size:14px;font-weight:500}
nav a{padding:12px 0;position:relative}
nav a:after{content:'';position:absolute;left:0;right:0;bottom:5px;height:1px;background:#000;transform:scaleX(0);transform-origin:left;transition:transform .25s}
nav a:hover:after{transform:scaleX(1)}
footer{padding:80px 5vw 24px}
footer>p{max-width:820px;font-size:clamp(26px,3.3vw,56px);letter-spacing:-.035em;line-height:1.18}
.contact-row{display:flex;justify-content:space-between;align-items:start;gap:30px;margin:60px 0 100px}
.contact-row a{font-size:clamp(20px,2.4vw,40px);border-bottom:1px solid}
.contact-row address{font-style:normal;line-height:1.6}
footer>img{width:100%;height:auto;display:block}
.back{display:inline-flex;align-items:center;gap:8px;margin-top:40px;padding:12px 22px;border:1px solid currentColor;border-radius:14px;font-size:14px;line-height:1;text-decoration:none;transition:background-color .2s,color .2s}
.back:hover,.back:focus-visible{background:#000;color:#EBEBEB}
body.subpage header{opacity:1;visibility:visible}
.page-content{max-width:1200px;margin:auto;padding:150px 5vw 80px;min-height:60vh}
.page-content h1{font-size:clamp(36px,6vw,88px);line-height:1.05;letter-spacing:-.04em}
.page-content p{font-size:18px;line-height:1.6}
@media(max-width:650px){header{padding:20px}header img{width:88px}nav{gap:18px;font-size:14px}.contact-row{flex-direction:column;margin:40px 0 70px}footer{padding:40px 24px 24px}}
@media not all{html{scroll-behavior:auto}}

nav a[aria-current="page"]:after{transform:scaleX(1)}
.page-link{display:inline-block;border-bottom:1px solid;padding-bottom:4px}
.page-content address{font-style:normal;font-size:18px;line-height:1.6}

/* Footer logo video (media.js). Cropped so the video's wordmark fills the frame. */
.footer-logo{position:relative;overflow:hidden;aspect-ratio:1785/355}
.footer-logo>img{display:block;width:100%;height:100%;object-fit:contain}
.footer-logo>video{position:absolute;left:calc(-100% * 68 / 1785);top:calc(-100% * 365 / 355);width:calc(100% * 1920 / 1785);height:auto;max-width:none;object-fit:fill;opacity:0;transition:opacity .6s ease}
.footer-logo.is-playing>video{opacity:1}

/* Main navigation: a page's link shows only once it's switched live in the site editor (Site-wide → Navigation), which adds data-live. */
header nav>a:not([data-live]){display:none}
/* Social links (site editor → Site-wide → Navigation) at the end of the nav; open in a new tab. */
.nav-social{display:flex;gap:20px;align-items:center}
.nav-social a{display:flex;align-items:center;transition:opacity .2s}
.nav-social svg{display:block;width:18px;height:18px;fill:currentColor}
.nav-social a:has(svg):after{display:none}.nav-social a:has(svg):hover{opacity:.55}
.nav-social:not(:has(a:not([hidden]))){display:none}

/* Footer video blend: multiply, so its white background takes on the page colour.
   The frame is its own layer (it moves with parallax), so it carries the page
   colour itself for the video to multiply against, and the static logo underneath
   is hidden once the video plays so its black letters don't darken the video. */
.footer-logo{background:#EBEBEB}
.footer-logo>video{mix-blend-mode:multiply}
.footer-logo.is-playing>img{visibility:hidden}

/* Custom cursor (media.js): a constant circle that inverts whatever is under it.
   --cursor-arrow-angle is a compass bearing: 0deg = up, 90deg = right (the arrow
   artwork's natural direction), 180deg = down. */
.project-cursor{display:none}
@media(hover:hover) and (pointer:fine){
html.has-cursor,html.has-cursor *{cursor:none!important}
.project-cursor{--cursor-arrow-angle:315deg;position:fixed;z-index:10000;left:0;top:0;display:grid;width:60px;height:60px;place-items:center;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;opacity:0;transform:translate(-50%,-50%);transition:opacity 160ms ease;will-change:left,top}
.project-cursor.is-visible{opacity:1}
.project-cursor img{display:block;width:34px;height:auto;transform:rotate(calc(var(--cursor-arrow-angle) - 90deg));transition:opacity 160ms ease,transform 320ms cubic-bezier(.2,.8,.2,1)}
/* Over a project with a live page, the arrow turns to point right: 450deg = 90deg, written so it turns the short way (clockwise) from 315deg. */
.project-cursor.is-link{--cursor-arrow-angle:450deg}
.project-cursor{transition:opacity 160ms ease,width 260ms cubic-bezier(.2,.8,.2,1),height 260ms cubic-bezier(.2,.8,.2,1),border-radius 260ms cubic-bezier(.2,.8,.2,1)}
.cursor-label{transition:opacity 160ms ease}
/* The label sits over the centre without taking up space, so the arrow stays centred. */
.cursor-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;color:#000;font:500 15px/1 Montserrat,Arial,sans-serif;white-space:nowrap}
/* Over a project without a page: a rounded rectangle reading "Coming soon". */
.project-cursor.is-label{width:148px;height:48px;border-radius:14px}
.project-cursor.is-label img{opacity:0}.project-cursor.is-label .cursor-label{opacity:1}
/* Over a video with sound: a shorter rectangle reading PLAY. */
.project-cursor.is-play{width:104px}.project-cursor.is-play .cursor-label{text-transform:uppercase;letter-spacing:.08em}
}

/* Sliding project strip (strip.js): About page and project pages. */
/* Project strip: drag or swipe sideways, loops endlessly, drifts slowly (about.js).
   Each card shows a --w : 1 crop; hovering (or tapping) widens it to --open. */
.strip{--tile-h:27.5vw;margin:6vw 0 2vw;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.strip.is-dragging{cursor:grabbing}
.strip-track{display:flex;gap:.5vw;width:max-content;will-change:transform}
.tile{margin:0;flex:none;width:calc(var(--tile-h) * var(--w,1));transition:width .6s cubic-bezier(.22,1,.36,1)}
.tile-media{height:var(--tile-h);overflow:hidden;background:#d9d9d9}
.tile figcaption{margin:14px 0 0;font-size:clamp(13px,1.1vw,18px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.is-open{width:calc(var(--tile-h) * var(--open,1.6))}
.tile img,.tile video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.tile[data-link]{cursor:pointer}
@media(max-width:650px){.strip{--tile-h:60vw;margin-top:50px}.strip-track{gap:6px}}
@media not all{.tile{transition:none}}