/* self-hosted fonts (latin subsets, woff2) */
@font-face{font-family:"Archivo";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/archivo-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/archivo-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/archivo-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo";font-style:normal;font-weight:900;font-display:swap;src:url("fonts/archivo-latin-900-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}

:root{ --blk:#000; --wht:#fff; --ease:cubic-bezier(.22,.61,.36,1); }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#000}
body{font-family:"Archivo",system-ui,sans-serif;background:#000;color:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1560px;margin:0 auto;padding:0 40px}
.skip{position:fixed;left:12px;top:-60px;z-index:700;background:#fff;color:#000;font-weight:700;text-transform:uppercase;font-size:13px;padding:10px 18px;border-radius:40px;transition:top .2s}
.skip:focus{top:12px}
.jgrid.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:620px){.jgrid.two{grid-template-columns:1fr}}
.mono{font-family:"IBM Plex Mono",monospace;letter-spacing:.02em}
.disp{font-weight:900;text-transform:uppercase;line-height:.92;letter-spacing:-.02em}

/* header (mix-blend inverts against content behind) */
header{position:fixed;top:0;left:0;right:0;z-index:100;mix-blend-mode:difference;color:#fff;transition:transform .4s var(--ease)}
header.hide{transform:translateY(-100%)}
header .bar{display:flex;align-items:center;justify-content:space-between;padding:26px 40px}
.logo{font-weight:900;font-size:22px;letter-spacing:-.02em;text-transform:uppercase}
nav{display:flex;gap:34px}
nav a{font-weight:700;font-size:14px;letter-spacing:.02em;text-transform:uppercase;position:relative}
nav a::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:0;background:#fff;transition:width .3s var(--ease)}
nav a:hover::after,nav a.on::after{width:100%}
.corner{position:fixed;z-index:100;mix-blend-mode:difference;color:#fff;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em}
.corner.br{right:40px;bottom:26px}

/* persistent contact badge, centred at the bottom. Replaced the old (c)2026 corner mark.
   Centring means the entrance animation has to carry translateX(-50%) in both states.
   A pill rather than a circle because the logo is a 2.35:1 wordmark, not a mark.
   No mix-blend-mode here: this is a CTA and has to stay legible over any footage.
   Shown by app.js once past the hero, hidden near the footer CTA and behind modals. */
/* width:max-content is load-bearing. A fixed element with left:50% and no right gets an
   available width of only (viewport - 50%), so on a phone the content overflowed the pill
   and the arrow rendered outside the border. max-content sizes to the label instead. */
.cbadge{position:fixed;left:50%;bottom:26px;z-index:120;display:inline-flex;align-items:center;gap:14px;
  width:max-content;max-width:calc(100vw - 32px);
  padding:11px 18px 11px 14px;border:1px solid rgba(255,255,255,.34);border-radius:40px;
  background:rgba(0,0,0,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;text-decoration:none;opacity:0;visibility:hidden;transform:translate(-50%,14px);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s,border-color .3s var(--ease),background .3s var(--ease)}
.cbadge.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.cbadge img{height:21px;width:auto;display:block}
.cbadge-t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.cbadge-a{transition:transform .3s var(--ease)}
.cbadge:hover{border-color:#fff;background:#000}
.cbadge:hover .cbadge-a{transform:translateX(4px)}
.cbadge:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:640px){.cbadge{bottom:18px;padding:10px 15px 10px 12px;gap:11px}}
@media (prefers-reduced-motion: reduce){.cbadge{transition:opacity .2s}}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer}
.burger span{width:26px;height:2px;background:#fff}
.mobnav{position:fixed;inset:0;z-index:99;background:#000;display:none;flex-direction:column;align-items:center;justify-content:center;gap:24px}
.mobnav.open{display:flex}
.mobnav a{font-weight:900;font-size:36px;text-transform:uppercase;color:#fff}

/* hero (home) */
.hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:flex-end;overflow:hidden;background:#000}
.hero-img{position:absolute;inset:0;z-index:0}
.hero-img img,.hero-img video{width:100%;height:100%;object-fit:cover;opacity:.62;will-change:filter}
.hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 40%,rgba(0,0,0,.85))}
.hero-in{position:relative;z-index:2;width:100%;padding-bottom:9vh}
.hero .eyebrow{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.18em;text-transform:uppercase;opacity:.85;display:block;margin-bottom:22px}
.hero h1{font-size:clamp(46px,9vw,168px)}
.scrollcue{position:absolute;left:40px;bottom:26px;z-index:3;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.2em;display:flex;align-items:center;gap:12px;mix-blend-mode:difference;color:#fff}
.scrollcue i{display:block;width:1px;height:40px;background:#fff;animation:cue 1.8s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* page hero (inner pages) */
.phero{position:relative;padding:30vh 0 12vh;overflow:hidden;background:#000}
.phero .eyebrow{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;display:block;margin-bottom:20px}
.phero h1{font-size:clamp(56px,12vw,220px);line-height:.86}
.phero p{max-width:44ch;margin-top:26px;font-size:clamp(17px,1.7vw,22px);color:rgba(255,255,255,.75)}

/* sections */
.sec{padding:16vh 0;position:relative}
.black{background:#000;color:#fff}
.white{background:#fff;color:#000}
.tag{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:10px;opacity:.7;margin-bottom:8vh}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.statement{font-size:clamp(30px,4.6vw,78px);font-weight:800;line-height:1.02;letter-spacing:-.02em;max-width:22ch}
.statement em{font-style:normal;-webkit-text-stroke:1.4px #fff;color:transparent}
.white .statement em{-webkit-text-stroke:1.4px #000}
.cta-line{display:inline-flex;align-items:center;gap:16px;margin-top:7vh;font-weight:900;text-transform:uppercase;font-size:clamp(28px,4vw,64px);letter-spacing:-.02em}
.cta-line span{font-size:.5em}

/* work */
.work-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:9vh;flex-wrap:wrap;gap:20px}
.work-head h2{font-size:clamp(40px,8vw,150px)}
.project{margin-bottom:11vh}
.project .media{position:relative;overflow:hidden;aspect-ratio:16/9;background:#eee}
.project .media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);will-change:filter,transform}
.project:hover .media img{transform:scale(1.04)}
.project .no{position:absolute;top:18px;left:18px;z-index:2;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;mix-blend-mode:difference;color:#fff}
.project .meta{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-top:22px;min-width:0}
.project .meta .l h3{font-size:clamp(24px,3.2vw,50px);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1}
.project .meta .l .client{font-family:"IBM Plex Mono",monospace;font-size:14px;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin-top:12px}
/* NOT nowrap. A project with five disciplines has a min-content width wider than the
   card's 56vw flex-basis, and because flex items default to min-width:auto the whole card
   grew - which is why Checkout.com Padel rendered wider than every other card in the
   Selected Work track. Same root cause as the 55px mobile overflow fixed in round 14. */
.project .meta .r{font-family:"IBM Plex Mono",monospace;font-size:14px;letter-spacing:.06em;text-transform:uppercase;text-align:right;opacity:.85;min-width:0}
/* .alt used to switch the media to 21/9. It was normalised back to 16/9 inside the
   horizontal track but not in the stacked layout, so below the motion breakpoint every
   other card was a different height. Every Selected Work card is 16/9 now, everywhere. */

/* three pillars (home: Strategy / Creative / Production) */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);margin:2vh 0 8vh}
.pillar{background:#000;padding:44px 34px 40px;position:relative}
.pillar .pn{position:absolute;top:18px;right:20px;font-size:12px;letter-spacing:.1em;opacity:.4}
.pillar h2{font-size:clamp(30px,3.4vw,54px);line-height:.95;margin-bottom:18px}
.pillar p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.68);max-width:30ch}
@media(max-width:820px){.pillars{grid-template-columns:1fr}}

/* discipline tags (Firmative-style capability line) */
.gtile .gd{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.7;line-height:1.5;margin-top:2px}
.gd .dsep,.disc-line .dsep,.project .meta .r .dsep{opacity:.4;margin:0 2px}
.disc-line{margin-top:22px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.project .meta .r .dsep{opacity:.45}

/* services grouped under pillars - pillar is the dominant heading, services sit under it */
/* Services are now one explained block each, all weighted identically. The old
   Strategy / Creative / Production grouping was dropped here: two of the three pillars
   introduced a single service, so the page read as lopsided no matter what size the
   headings were. That frame still exists on the home page, where it is balanced. */
/* left track sized so the longest name, AERIAL · CAA LICENSED, stays on one line */
.sblock{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.15fr);gap:clamp(20px,3.5vw,56px);
  padding:clamp(30px,4.5vh,52px) 0;border-top:1px solid rgba(0,0,0,.16)}
.sblock:first-child{border-top:0;padding-top:1vh}
.sblock:last-child{border-bottom:1px solid rgba(0,0,0,.16)}
.sb-n{display:block;font-size:12px;letter-spacing:.16em;opacity:.42;margin-bottom:12px}
.sb-name{font-size:clamp(26px,3.15vw,46px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02;margin:0}
.sb-p{margin:0 0 22px;max-width:56ch;line-height:1.6}
.sb-deliv{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0}
.sb-deliv li{font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.72;border:1px solid rgba(0,0,0,.22);border-radius:40px;padding:6px 13px}
.sb-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.sb-link{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:5px;border-bottom:1px solid rgba(0,0,0,.3);transition:border-color .3s var(--ease)}
.sb-link span{transition:transform .3s var(--ease)}
.sb-link:hover{border-bottom-color:currentColor}
.sb-link:hover span{transform:translateX(5px)}
.sb-reel{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid rgba(0,0,0,.22);border-radius:40px;
  padding:7px 15px;font:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.sb-reel:hover{background:currentColor;border-color:currentColor}
.sb-reel:hover svg{color:#fff;mix-blend-mode:difference}
.sb-reel:focus-visible,.sb-link:focus-visible{outline:2px solid currentColor;outline-offset:4px}
@media(max-width:860px){
 .sblock{grid-template-columns:minmax(0,1fr);gap:16px;padding:clamp(28px,4vh,44px) 0}
 .sb-name{font-size:clamp(26px,7vw,40px)}
}

/* services list */
/* Direct-child selectors, not `.svc a`: the services page now nests its own links inside
   .sblock, and the loose selector was giving them this row treatment (full-width rules
   above and below every "See ..." link). Still used by the 404 page's compact list. */
.svc > a,.svc > .row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:34px 0;border-top:1px solid rgba(0,0,0,.16);transition:padding .35s var(--ease)}
.svc > a:last-child,.svc > .row:last-child{border-bottom:1px solid rgba(0,0,0,.16)}
.svc .name{font-size:clamp(24px,3.6vw,54px);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;transition:transform .35s var(--ease)}
.svc .desc{font-family:"IBM Plex Mono",monospace;font-size:13px;max-width:34ch;text-align:right;opacity:.55;line-height:1.5}
.svc > a:hover{padding-left:24px}
.svc > a:hover .name{transform:translateX(6px)}

/* clients marquee */
.marquee{overflow:hidden;white-space:nowrap;padding:7vh 0;border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.marquee .track{display:inline-flex;align-items:center;animation:scrollx 48s linear infinite}
.marquee img.cl{max-height:42px;max-width:150px;width:auto;margin:0 clamp(30px,4vw,68px);filter:brightness(0) invert(1);opacity:.72;transition:opacity .35s var(--ease)}
.marquee:hover img.cl{opacity:.95}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* about detail grid */
.kit{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);margin-top:9vh}
.kit .cell{background:#000;padding:40px 34px}
.kit .cell h2{font-size:22px;font-weight:800;text-transform:uppercase;margin-bottom:14px}
.kit .cell p{font-family:"IBM Plex Mono",monospace;font-size:13px;color:rgba(255,255,255,.6);line-height:1.7}

/* contact */
.contact h1{font-size:clamp(48px,11vw,200px)}
.contact a.mail{display:inline-block;margin-top:5vh;font-size:clamp(22px,3.5vw,54px);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;border-bottom:3px solid #000;transition:opacity .3s}
.contact a.mail:hover{opacity:.55}
.meta-row{display:flex;flex-wrap:wrap;gap:40px;margin-top:9vh;font-family:"IBM Plex Mono",monospace;font-size:14px;letter-spacing:.06em;text-transform:uppercase;opacity:.7}

/* footer */
footer{background:#000;color:#fff;padding:9vh 0 4vh;border-top:1px solid rgba(255,255,255,.12)}
.foot{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:30px}
.foot .big{font-size:clamp(40px,9vw,150px);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;line-height:.85}
.foot nav.fnav{display:flex;flex-direction:column;gap:8px}
.foot nav.fnav a{font-weight:700;text-transform:uppercase;font-size:15px}
.foot nav.fnav a:hover{opacity:.6}
.foot .mono{font-size:12px;letter-spacing:.08em;opacity:.6;line-height:1.9}

@media(max-width:820px){
  .wrap{padding:0 22px}
  header .bar{padding:20px 22px}
  nav{display:none}
  .burger{display:flex}
  .corner.br{right:22px}
  .scrollcue{left:22px}
  .hero-in{padding-bottom:15vh} /* keeps the headline clear of the scroll cue */
  .project .meta{flex-direction:column;gap:10px}
  /* nowrap + a long discipline list pushed the home page 55px wider than the viewport */
  .project .meta .r{text-align:left;white-space:normal}
  .svc .desc{display:none}
  .kit{grid-template-columns:1fr}
  .phero{padding-top:26vh}
}
@media(max-width:620px){
  .phero h1{font-size:clamp(40px,13vw,56px)} /* long single words (SOMETHING.) must fit 390px */
  .phero.proj h1{font-size:clamp(32px,11vw,44px)}
  .wgrid.rel{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none}
  .marquee .track{animation:none}
  .scrollcue i{animation:none}
  .hero-img img,.hero-img video,.project .media img{filter:none!important}
}

/* ---- contact form ---- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}
.cinfo .mail-lg{display:inline-block;font-size:clamp(22px,2.6vw,40px);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;border-bottom:3px solid #fff;padding-bottom:4px}
.cinfo .cmeta{font-family:"IBM Plex Mono",monospace;font-size:14px;line-height:2.1;opacity:.6;margin-top:6vh;text-transform:uppercase;letter-spacing:.06em}
.nwform[hidden],.nwform-fallback[hidden]{display:none}
.nwform-fallback p{font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:rgba(255,255,255,.78);max-width:40ch}
.nwform{display:grid;gap:28px}
.nwform .row2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.nwform label{display:block;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin-bottom:10px}
.nwform input,.nwform textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.28);color:#fff;font-family:inherit;font-size:20px;font-weight:600;padding:10px 0;transition:border-color .3s}
.nwform input:focus,.nwform textarea:focus{outline:none;border-color:#fff}
.nwform textarea{resize:vertical;min-height:90px}
.nwform button{justify-self:start;margin-top:12px;background:#fff;color:#000;border:0;font-family:inherit;font-weight:900;text-transform:uppercase;font-size:19px;letter-spacing:-.01em;padding:20px 42px;border-radius:60px;cursor:pointer;transition:transform .25s var(--ease),opacity .25s}
.nwform button:hover{transform:translateY(-2px)}
.nwform button:disabled{opacity:.5;cursor:default}
.form-note{font-family:"IBM Plex Mono",monospace;font-size:13px;margin-top:20px;min-height:1.2em;opacity:.85}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr;gap:44px}.nwform .row2{grid-template-columns:1fr}}

/* real Northworks logo */
.logo{display:inline-block;line-height:0;perspective:820px}
.logo img{height:52px;width:auto;display:block;transition:transform .4s var(--ease);will-change:transform;backface-visibility:visible}
.logo:hover img,.logo:focus-visible img{transform:rotateX(8deg) rotateY(-15deg) scale(1.035)}
.logo img.flip{animation:coinflip .72s var(--ease)}
@keyframes coinflip{from{transform:rotateY(0)}to{transform:rotateY(720deg)}}
@media (prefers-reduced-motion: reduce){.logo img{transition:none}.logo:hover img,.logo:focus-visible img{transform:none}.logo img.flip{animation:none}}
.foot .brand-logo{line-height:0}
.foot .brand-logo img{height:clamp(56px,9vw,132px);width:auto;display:block}
@media(max-width:820px){.logo img{height:40px}}

/* ---- work grid + filters ---- */
.filters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:8vh}
.fbtn{font-family:"IBM Plex Mono",monospace;font-size:13px;text-transform:uppercase;letter-spacing:.08em;padding:11px 22px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;cursor:pointer;border-radius:40px;transition:all .2s var(--ease)}
.fbtn:hover{border-color:#fff}
.fbtn.on{background:#fff;color:#000;border-color:#fff}
.fbtn .fn{opacity:.45;font-size:.85em}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gtile{display:block;width:100%;color:#fff;background:none;border:0;padding:0;margin:0;font:inherit;text-align:left;cursor:pointer;animation:gfade .55s var(--ease) both}
.gtile:focus-visible{outline:2px solid #fff;outline-offset:4px}
@keyframes gfade{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.gtile .gimg{display:block;position:relative;overflow:hidden;aspect-ratio:4/3;background:#111}
.gtile .gimg img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s var(--ease)}
/* hover = scale only. The invert(1) negative was dropped 16 Aug - it wrecked portraits
   and anything with skin tones. The scroll-driven negative on .inv images is a separate
   system in app.js and is untouched. */
.gtile:hover .gimg img{transform:scale(1.06)}
.gtile .cat{position:absolute;top:14px;left:14px;z-index:2;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#fff;mix-blend-mode:difference}
.gtile .ginfo{padding:16px 2px 0;display:flex;flex-direction:column;gap:6px}
.gtile .gt{font-weight:800;text-transform:uppercase;font-size:clamp(17px,1.5vw,22px);letter-spacing:-.01em;line-height:1.05}
.gtile .gc{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.55}
@media(max-width:980px){.wgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.wgrid{grid-template-columns:1fr}.filters{gap:8px}.fbtn{padding:9px 15px;font-size:12px}}

/* play hint on grid tiles */
.gtile .gplay,.project .gplay,.rtile .gplay{position:absolute;z-index:2;right:14px;bottom:14px;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);color:#fff;border:1px solid rgba(255,255,255,.6);opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease),transform .3s var(--ease);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.gtile:hover .gplay,.gtile:focus-visible .gplay,.project:hover .gplay,.project:focus-visible .gplay{opacity:1;transform:none}
.project .media{cursor:pointer}
a.project{display:block;color:inherit}
a.project:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* ---- project pop-out (case study) ---- */
.pv{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:4vh 4vw;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.pv.open{opacity:1;visibility:visible}
.pv-bd{position:absolute;inset:0;background:rgba(0,0,0,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pv-card{position:relative;z-index:1;width:min(1180px,100%);max-height:92vh;overflow:auto;background:#0a0a0a;border:1px solid rgba(255,255,255,.14);display:grid;grid-template-columns:1.55fr 1fr;transform:translateY(26px) scale(.985);opacity:0;transition:transform .45s var(--ease),opacity .45s var(--ease)}
.pv.open .pv-card{transform:none;opacity:1}
.pv-media{background:#000;display:flex;align-items:center;justify-content:center}
.pv-media{position:relative}
.pv-media video,.pv-media iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#000;border:0}
.pv-media video[hidden],.pv-media iframe[hidden]{display:none}
.pv-info{padding:46px 42px;display:flex;flex-direction:column}
.pv-cat{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.55;margin-bottom:18px}
.pv-title{font-size:clamp(30px,3.3vw,52px);line-height:.98;margin-bottom:14px}
.pv-sub{font-size:13px;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin-bottom:26px}
.pv-brief{font-size:16px;line-height:1.66;color:rgba(255,255,255,.82);margin-bottom:26px}
.pv-deliv{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.pv-deliv span{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:7px 13px;border:1px solid rgba(255,255,255,.24);border-radius:40px;opacity:.85}
.pv-credits{font-size:12px;letter-spacing:.05em;text-transform:uppercase;opacity:.5;line-height:1.85;margin-bottom:32px}
.pv-cta{margin-top:auto;display:inline-flex;align-items:center;gap:12px;font-weight:900;text-transform:uppercase;font-size:15px;letter-spacing:.02em;border-bottom:2px solid #fff;padding-bottom:6px;align-self:flex-start;transition:gap .25s var(--ease)}
.pv-cta span{font-size:1.1em}
.pv-cta:hover{gap:20px}
.pv-x{position:absolute;top:14px;right:14px;z-index:3;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;transition:background .25s var(--ease),transform .35s var(--ease)}
.pv-x:hover{background:#fff;color:#000;transform:rotate(90deg)}
.pv-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;opacity:0;transition:opacity .4s var(--ease),background .25s var(--ease),transform .25s var(--ease)}
.pv.open .pv-nav{opacity:1}
.pv-nav.prev{left:clamp(12px,2.2vw,44px)}
.pv-nav.next{right:clamp(12px,2.2vw,44px)}
.pv-nav:hover{background:#fff;color:#000}
.pv-nav.prev:hover{transform:translateY(-50%) translateX(-3px)}
.pv-nav.next:hover{transform:translateY(-50%) translateX(3px)}
.pv-nav.hit{animation:pvhit .4s var(--ease)}
@keyframes pvhit{0%{transform:translateY(-50%) scale(1)}38%{transform:translateY(-50%) scale(1.32);background:#fff;color:#000}100%{transform:translateY(-50%) scale(1)}}
body.pv-lock{overflow:hidden}
@media(max-width:860px){.pv{padding:0}.pv-card{grid-template-columns:1fr;width:100%;height:100%;max-height:100vh;border:0;border-radius:0}.pv-info{padding:30px 24px}.pv-nav{width:44px;height:44px;background:rgba(0,0,0,.55)}.pv-nav.prev{left:8px}.pv-nav.next{right:8px}.pv-x{background:rgba(0,0,0,.55)}}
@media (prefers-reduced-motion: reduce){.pv,.pv-card{transition:opacity .2s}.pv-card{transform:none}}

/* ---- interaction states ---- */
/* text buttons: animated underline, like the nav */
.cta-line,.pv-cta,.foot nav.fnav a,.cinfo .mail-lg{position:relative}
.cta-line::after,.pv-cta::after,.foot nav.fnav a::after,.cinfo .mail-lg::after{content:"";position:absolute;left:0;bottom:-6px;height:3px;width:0;background:currentColor;transition:width .38s var(--ease)}
.cta-line:hover::after,.pv-cta:hover::after,.foot nav.fnav a:hover::after,.cinfo .mail-lg:hover::after,.cta-line:focus-visible::after,.pv-cta:focus-visible::after,.cinfo .mail-lg:focus-visible::after{width:100%}
.foot nav.fnav a{padding-bottom:2px}
.foot nav.fnav a:hover{opacity:1}
.pv-cta{border-bottom:0;padding-bottom:6px}
.cinfo .mail-lg{border-bottom:0;padding-bottom:6px}

/* shape buttons: outline draws clockwise on hover */
@property --ringA{syntax:"<angle>";inherits:false;initial-value:0deg}
/* NOTE: .pv-nav, .pv-x and .reel-x are position:absolute overlays — do NOT force relative here
   (their absolute positioning already anchors the ::after ring; forcing relative breaks the pop-out grid) */
.fbtn,.nwform button,.reel-btn{position:relative}
.fbtn::after,.nwform button::after,.pv-nav::after,.pv-x::after,.reel-btn::after,.reel-x::after{content:"";position:absolute;inset:-3px;border-radius:inherit;padding:2px;background:conic-gradient(#fff var(--ringA),transparent var(--ringA));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none;transition:--ringA .55s var(--ease)}
.fbtn:hover::after,.nwform button:hover::after,.pv-nav:hover::after,.pv-x:hover::after,.fbtn:focus-visible::after,.nwform button:focus-visible::after,.pv-nav:focus-visible::after,.pv-x:focus-visible::after,.reel-btn:hover::after,.reel-btn:focus-visible::after,.reel-x:hover::after,.reel-x:focus-visible::after{--ringA:360deg}
/* let the ring be the hover cue (drop the instant fills / full borders) */
.fbtn:hover{border-color:rgba(255,255,255,.28)}
.pv-nav:hover{background:rgba(255,255,255,.08);color:#fff}
.pv-x:hover{background:rgba(0,0,0,.55);color:#fff;transform:rotate(90deg)}
@media (prefers-reduced-motion: reduce){
  .fbtn::after,.nwform button::after,.pv-nav::after,.pv-x::after,.cta-line::after,.pv-cta::after,.foot nav.fnav a::after,.cinfo .mail-lg::after{transition:none}
}

/* ---- page transitions + intro ---- */
#curtain{position:fixed;inset:0;background:#000;z-index:300;pointer-events:none;opacity:0;animation:curtainOut .5s var(--ease)}
@keyframes curtainOut{from{opacity:1}to{opacity:0}}
body.leaving #curtain{animation:none;opacity:1;transition:opacity .4s var(--ease);pointer-events:all}
#intro{position:fixed;inset:0;z-index:400;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity .6s var(--ease)}
#intro img{height:64px;width:auto;filter:brightness(0) invert(1);opacity:0;transform:translateY(6px);animation:introMark .7s var(--ease) forwards}
@keyframes introMark{to{opacity:.95;transform:none}}
#intro.gone{opacity:0;pointer-events:none}
html.intro-on,html.intro-on body{overflow:hidden}
@media (prefers-reduced-motion: reduce){#curtain{display:none}}

/* ---- project case-study page ---- */
.phero.proj h1{font-size:clamp(44px,9vw,150px)}
.proj-film{margin-bottom:6vh;background:#000;overflow:hidden}
.proj-video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.proj-film.stills-led img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.proj-embed{margin-bottom:0;background:#000;position:relative;aspect-ratio:16/9}
.proj-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* multi-film selector */
.filmtabs{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6vh}
.ftab{font-family:"IBM Plex Mono",monospace;font-size:12px;text-transform:uppercase;letter-spacing:.08em;padding:11px 20px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;cursor:pointer;border-radius:40px;transition:all .2s var(--ease)}
.ftab:hover{border-color:#fff}
.ftab.on{background:#fff;color:#000;border-color:#fff}
@media(max-width:620px){.ftab{padding:9px 14px;font-size:11px}}
.proj-grid{display:grid;grid-template-columns:1.35fr .95fr;gap:60px;align-items:start}
.proj-copy .statement{font-size:clamp(22px,3vw,42px);max-width:20ch}
.svc-p2{margin-top:26px;font-size:clamp(16px,1.5vw,19px);line-height:1.7;color:rgba(255,255,255,.72);max-width:52ch}
.proj-facts{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.16)}
.pf{display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.pf-k{opacity:.55;font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.pf-v{text-align:right;font-size:15px;max-width:62%;line-height:1.5}
.wgrid.rel{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.proj-grid{grid-template-columns:1fr;gap:30px}.pf-v{max-width:66%}}

/* ---- journal ---- */
.jgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.jcard{display:block;color:#fff}
.jcard .jimg{display:block;overflow:hidden;aspect-ratio:16/10;background:#111}
.jcard .jimg img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s var(--ease)}
.jcard:hover .jimg img{transform:scale(1.05)}
.jcard .jbody{display:block;padding:22px 2px 0}
.jcard .jtag{display:block;opacity:.55;margin-bottom:12px}
.jcard .jt{display:block;font-weight:800;text-transform:uppercase;font-size:clamp(20px,1.7vw,26px);line-height:1.06;letter-spacing:-.01em;margin-bottom:12px}
.jcard .jex{display:block;font-size:15px;line-height:1.6;color:rgba(255,255,255,.7);margin-bottom:16px}
.jcard .jmore{display:inline-block;opacity:.6;transition:opacity .25s var(--ease)}
.jcard:hover .jmore{opacity:1}
@media(max-width:980px){.jgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.jgrid{grid-template-columns:1fr}}

/* ---- article ---- */
.art-hero h1{font-size:clamp(34px,6vw,96px);max-width:18ch}
.art-wrap{max-width:820px;margin:0 auto}
.art-lead{margin-bottom:6vh;overflow:hidden}
.art-lead img{width:100%;height:auto;display:block;will-change:filter}
.art-body{font-size:clamp(17px,1.5vw,20px);line-height:1.75;color:rgba(255,255,255,.85)}
.art-body p{margin-bottom:1.5em}
.art-body a{border-bottom:1px solid rgba(255,255,255,.4);transition:border-color .25s var(--ease)}
.art-body a:hover{border-color:#fff}
/* the SEO posts (Sep 2026) use subheads and lists; the originals were plain paragraphs */
.art-body h2{font-size:clamp(22px,2.1vw,30px);font-weight:900;text-transform:uppercase;letter-spacing:-.015em;line-height:1.05;color:#fff;margin:2.2em 0 .7em}
.art-body h2:first-child{margin-top:0}
.art-body ul{margin:0 0 1.6em 0;padding:0;list-style:none}
.art-body li{position:relative;padding-left:26px;margin-bottom:.7em}
.art-body li::before{content:"---";position:absolute;left:0;top:0;font-family:"IBM Plex Mono",monospace;font-size:.8em;letter-spacing:-.05em;opacity:.55}
.art-body strong{color:#fff;font-weight:700}
.art-foot{margin-top:7vh;border-top:1px solid rgba(255,255,255,.14);padding-top:5vh}
.art-foot .cta-line{font-size:clamp(20px,2.4vw,34px)}

/* ---- pop-out links ---- */
.pv-links{margin-top:auto;display:flex;flex-wrap:wrap;gap:12px 30px;align-items:center}
.pv-links .pv-cta{margin-top:0}
.pv-cta.alt{opacity:.55;font-size:14px}
.pv-cta.alt:hover{opacity:1}

/* ---- showreel overlay + hero CTA ---- */
.reel-btn{display:inline-flex;align-items:center;gap:12px;margin-top:36px;font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:15px 30px;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.3);color:#fff;cursor:pointer;border-radius:60px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .3s var(--ease)}
.reel-btn:hover{background:rgba(0,0,0,.55)}
.reel{position:fixed;inset:0;z-index:250;display:flex;align-items:center;justify-content:center;padding:4vh 4vw;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.reel.open{opacity:1;visibility:visible}
.reel-bd{position:absolute;inset:0;background:rgba(0,0,0,.93)}
.reel-frame{position:relative;z-index:1;width:min(1280px,100%);transform:translateY(22px);opacity:0;transition:transform .45s var(--ease),opacity .45s var(--ease)}
.reel.open .reel-frame{transform:none;opacity:1}
.reel-frame video{display:block;width:100%;aspect-ratio:16/9;background:#000}
.reel-x{position:absolute;top:20px;right:20px;z-index:2;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;transition:transform .35s var(--ease)}
.reel-x:hover{transform:rotate(90deg)}
@media(max-width:860px){.reel{padding:0}.reel-frame{width:100%}}

/* ---- next project ribbon ---- */
.nextproj{display:block;background:#fff;color:#000;padding:11vh 0;overflow:hidden}
.nextproj .npin{display:flex;flex-direction:column;gap:14px;max-width:1560px;margin:0 auto;padding:0 40px}
.nextproj .np-k{font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.5}
.nextproj .np-t{font-size:clamp(40px,8vw,140px);transition:transform .5s var(--ease)}
.nextproj .np-c{font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.5}
.nextproj:hover .np-t{transform:translateX(20px)}
@media(max-width:820px){.nextproj .npin{padding:0 22px}}

/* ---- faq ---- */
.faq-wrap{max-width:980px}
.faqi{border-top:1px solid rgba(255,255,255,.16)}
.faqi:last-of-type{border-bottom:1px solid rgba(255,255,255,.16)}
.faqi summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:26px;padding:30px 0;cursor:pointer}
.faqi summary::-webkit-details-marker{display:none}
.faqi summary:focus-visible{outline:2px solid #fff;outline-offset:4px}
.faq-q{font-weight:800;text-transform:uppercase;font-size:clamp(18px,2.4vw,30px);letter-spacing:-.01em;line-height:1.12}
.faq-ic{position:relative;flex:0 0 34px;height:34px;border:1px solid rgba(255,255,255,.35);border-radius:50%;transition:transform .35s var(--ease)}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:#fff;transform:translate(-50%,-50%)}
.faq-ic::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s var(--ease)}
.faqi[open] .faq-ic::after{transform:translate(-50%,-50%) rotate(0deg)}
.faqa{padding:0 0 32px;max-width:70ch}
.faqa p{font-size:16px;line-height:1.72;color:rgba(255,255,255,.75)}

/* 3-up related grid on local pages */
.wgrid.rel.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.wgrid.rel.three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.wgrid.rel.three{grid-template-columns:1fr}}

@media (prefers-reduced-motion: reduce){
  .reel,.reel-frame{transition:opacity .2s}
  .reel-frame{transform:none}
  .nextproj .np-t{transition:none}
  .reel-btn::after,.reel-x::after,.faq-ic,.faq-ic::after{transition:none}
}

/* ---- showreels band (discipline reels, distinct from case studies) ---- */
.reelgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
/* align-self:start + flex-column is load-bearing. .rtile is a <button>, and buttons
   vertically centre their content whatever display you give them. As grid items they
   stretch to the tallest tile in the row, so a reel whose caption wraps to one line
   instead of two had its image pushed ~8px lower than its neighbours. Sizing each tile
   to its own content and flowing from the top keeps every poster on the same line. */
.rtile{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;align-self:start;
  width:100%;background:none;border:0;padding:0;text-align:left;color:#fff;font:inherit;cursor:pointer}
.rtile:focus-visible{outline:2px solid #fff;outline-offset:4px}
.rimg{display:block;position:relative;overflow:hidden;aspect-ratio:16/9;background:#111;border:1px solid rgba(255,255,255,.18)}
.rimg img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .45s var(--ease)}
.rtile:hover .rimg img{transform:scale(1.05)}
.rtile .gplay{opacity:.9;transform:none}
.rinfo{display:block;padding:12px 2px 0}
.rt{display:block;font-weight:900;text-transform:uppercase;font-size:clamp(15px,1.3vw,19px);letter-spacing:-.01em}
.rb{display:block;font-size:11px;letter-spacing:.04em;opacity:.5;margin-top:5px;line-height:1.5}
/* ---- service page depth: how it works / who it's for / questions ---- */
.sd-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,110px)}
.sd-steps{list-style:none;margin:0;padding:0}
.sd-steps li{padding:26px 0;border-top:1px solid rgba(255,255,255,.12)}
.sd-steps li:first-child{border-top:0;padding-top:0}
.sd-n{display:block;font-size:12px;letter-spacing:.16em;opacity:.42;margin-bottom:10px}
.sd-steps h2{font-size:clamp(22px,2vw,30px);font-weight:900;text-transform:uppercase;letter-spacing:-.015em;line-height:1.05;margin:0 0 10px}
.sd-steps p,.sd-who,.sd-faq p{line-height:1.6;opacity:.78;max-width:52ch}
.sd-who{font-size:clamp(17px,1.35vw,20px);opacity:.85}
.sd-faq details{border-top:1px solid rgba(255,255,255,.12)}
.sd-faq details:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.sd-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;cursor:pointer}
.sd-faq summary::-webkit-details-marker{display:none}
.sd-faq summary h2,.sd-faq summary h3{font-size:clamp(16px,1.25vw,19px);font-weight:700;margin:0;line-height:1.3}
.sd-x{position:relative;flex:0 0 18px;width:18px;height:18px}
.sd-x::before,.sd-x::after{content:"";position:absolute;left:0;top:8px;width:18px;height:1.5px;background:#fff;transition:transform .3s var(--ease)}
.sd-x::after{transform:rotate(90deg)}
details[open] .sd-x::after{transform:rotate(0)}
.sd-faq details p{padding:0 0 22px}
.sd-faq summary:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(max-width:900px){.sd-grid{grid-template-columns:minmax(0,1fr);gap:40px}}

/* ---- home page discipline reel rows (name / reel / link, alternating) ---- */
/* minmax(0,...) matters: without it a long word like CONSTRUCTION sets the text track's
   min-content width and steals the space the reel should have. The reel is the point of
   this section, so it gets the wider track and the heading scales to fit the narrower one. */
.rrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(36px,6vh,76px) 0;border-top:1px solid rgba(255,255,255,.12)}
.rrow:first-of-type{border-top:0;padding-top:0}
.rrow.alt{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.rrow.alt .rrow-txt{order:2}
.rrow-n{display:block;font-size:12px;letter-spacing:.16em;opacity:.4;margin-bottom:14px}
.rrow-txt h2{font-size:clamp(34px,4.1vw,54px);line-height:.94;letter-spacing:-.025em;margin:0 0 16px}
.rrow-txt p{max-width:34ch;opacity:.66;margin:0 0 26px}
.rrow-link{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.32);transition:border-color .35s var(--ease),gap .35s var(--ease)}
.rrow-link span{transition:transform .35s var(--ease)}
.rrow-link:hover{border-bottom-color:#fff}
.rrow-link:hover span{transform:translateX(5px)}
.rrow-media{display:block;width:100%;background:none;border:0;padding:0;cursor:pointer;color:#fff}
.rrow-media:focus-visible{outline:2px solid #fff;outline-offset:5px}
/* the lazily-injected Vimeo loop sits over the poster inside the same .rimg box */
.rimg iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .6s var(--ease);pointer-events:none}
.rimg iframe.on{opacity:1}
@media(max-width:900px){
 .rrow,.rrow.alt{grid-template-columns:minmax(0,1fr);gap:22px;padding:clamp(32px,5vh,54px) 0}
 .rrow.alt .rrow-txt{order:0}
}
.reel-cap{font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.5;margin:16px 0 0}
/* the reel band sits between the page hero and the filter row, so both of its own
   paddings are trimmed - .sec's 16vh twice over left a dead screen of black. */
.sec.reelsec{padding:2vh 0 0}
.sec.reelsec + .sec{padding-top:9vh}
@media(max-width:980px){.reelgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.reelgrid{grid-template-columns:1fr}}

/* ---- stills gallery + lightbox ---- */
.sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stile{display:block;padding:0;border:0;background:#111;cursor:zoom-in;overflow:hidden;aspect-ratio:4/3}
.stile img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .45s var(--ease)}
.stile:hover img,.stile:focus-visible img{transform:scale(1.05)}
.stile:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(max-width:980px){.sgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.sgrid{grid-template-columns:repeat(2,1fr);gap:8px}}
.lb{position:fixed;inset:0;z-index:260;display:flex;align-items:center;justify-content:center;padding:5vh 5vw;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
.lb.open{opacity:1;visibility:visible}
.lb-bd{position:absolute;inset:0;background:rgba(0,0,0,.94)}
.lb-fig{position:relative;z-index:1;margin:0;max-width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.lb-fig img{max-width:90vw;max-height:80vh;width:auto;height:auto;display:block;background:#000}
.lb-fig figcaption{font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.65)}
.lb-x{position:absolute;top:20px;right:20px;z-index:2;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;transition:transform .35s var(--ease)}
.lb-x:hover{transform:rotate(90deg)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer}
.lb-nav:hover{background:#fff;color:#000}
.lb-nav.prev{left:clamp(10px,2vw,40px)}
.lb-nav.next{right:clamp(10px,2vw,40px)}
@media(max-width:860px){.lb{padding:0}.lb-fig img{max-width:100vw;max-height:78vh}.lb-nav{width:44px;height:44px;background:rgba(0,0,0,.55)}.lb-nav.prev{left:8px}.lb-nav.next{right:8px}}
@media (prefers-reduced-motion: reduce){.lb{transition:opacity .2s}.stile img{transition:none}}

/* ---- motion layer (assets/motion.js; enhances only, site works without it) ---- */
.ln{display:block;overflow:hidden}
.lni{display:inline-block;will-change:transform}
/* horizontal pinned Selected Work: only when motion.js adds .motion-h on desktop */
.motion-h #homeWork{min-height:100vh;display:flex;align-items:center;overflow:hidden;padding:0}
.motion-h #homeWork>.wrap{max-width:none;padding:0 0 0 40px;width:100%}
.motion-h #homeWork .work-head{margin-bottom:5vh;padding-right:40px}
/* flex-start, not center: card heights vary because some projects list five disciplines
   and wrap to two lines under the image. Centred, that pushed their media out of line
   with their neighbours by up to 23px. Top-aligned, every poster sits on the same line. */
.motion-h #htrack{display:flex;align-items:flex-start;gap:4vw;will-change:transform;padding-right:8vw}
.motion-h #htrack .project{flex:0 0 56vw;min-width:0;margin-bottom:0}
.motion-h #htrack .cta-line{flex:0 0 auto;margin:0 6vw;white-space:nowrap}
/* custom cursor */
.cur-dot,.cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:600;mix-blend-mode:difference;border-radius:50%;will-change:transform}
.cur-dot{width:8px;height:8px;background:#fff;margin:-4px 0 0 -4px}
.cur-ring{width:36px;height:36px;border:1.5px solid #fff;margin:-18px 0 0 -18px;transition:width .25s,height .25s,margin .25s,opacity .25s}
.cur-ring.big{width:64px;height:64px;margin:-32px 0 0 -32px}
html.hascursor body,html.hascursor a,html.hascursor button{cursor:none}
html.hascursor input,html.hascursor textarea,html.hascursor select{cursor:auto}
@media (prefers-reduced-motion: reduce){.cur-dot,.cur-ring{display:none}}

/* ---- negative cursor cloud over big-text sections (inverts like the scroll effect) ---- */
.glowzone{position:relative;isolation:isolate;overflow:hidden}
.glowzone::before{content:"";position:absolute;left:0;top:0;width:540px;height:300px;z-index:5;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);mix-blend-mode:difference;
  transform:translate(calc(var(--gx,0px) - 270px), calc(var(--gy,0px) - 150px)) rotate(-20deg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:170px 170px;
  -webkit-mask:radial-gradient(ellipse closest-side at center, #000 26%, rgba(0,0,0,0) 100%);
  mask:radial-gradient(ellipse closest-side at center, #000 26%, rgba(0,0,0,0) 100%)}
.glowzone:hover::before{opacity:.13}
@media (prefers-reduced-motion: reduce){.glowzone::before{display:none}}
@media (hover:none){.glowzone::before{display:none}}