/* 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:#FAFAF8; --wht:#181818; --ease:cubic-bezier(.22,.61,.36,1); }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#FAFAF8}
body{font-family:"Archivo",system-ui,sans-serif;background:#FAFAF8;color:#181818;-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:#181818;color:#FAFAF8;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:#181818;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:#181818;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:#181818;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(24,24,24,.34);border-radius:40px;
  background:rgba(250,250,248,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#181818;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:#181818;background:#FAFAF8}
.cbadge:hover .cbadge-a{transform:translateX(4px)}
.cbadge:focus-visible{outline:2px solid #181818;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:#181818}
.mobnav{position:fixed;inset:0;z-index:99;background:#FAFAF8;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:#181818}

/* hero (home) */
.hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:flex-end;overflow:hidden;background:#FAFAF8}
.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(250,250,248,.5),rgba(250,250,248,.2) 40%,rgba(250,250,248,.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:#181818}
.scrollcue i{display:block;width:1px;height:40px;background:#181818;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:#FAFAF8}
.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(24,24,24,.75)}

/* sections */
.sec{padding:16vh 0;position:relative}
.black{background:#FAFAF8;color:#181818}
.white{background:#181818;color:#FAFAF8}
.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 #181818;color:transparent}
.white .statement em{-webkit-text-stroke:1.4px #FAFAF8}
.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:#181818}
.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(24,24,24,.14);border:1px solid rgba(24,24,24,.14);margin:2vh 0 8vh}
.pillar{background:#FAFAF8;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(24,24,24,.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(24,24,24,.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(250,250,248,.16)}
.sblock:first-child{border-top:0;padding-top:1vh}
.sblock:last-child{border-bottom:1px solid rgba(250,250,248,.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(250,250,248,.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(250,250,248,.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(250,250,248,.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:#181818;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(250,250,248,.16);transition:padding .35s var(--ease)}
.svc > a:last-child,.svc > .row:last-child{border-bottom:1px solid rgba(250,250,248,.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(24,24,24,.14);border-bottom:1px solid rgba(24,24,24,.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(24,24,24,.14);border:1px solid rgba(24,24,24,.14);margin-top:9vh}
.kit .cell{background:#FAFAF8;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(24,24,24,.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 #FAFAF8;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:#FAFAF8;color:#181818;padding:9vh 0 4vh;border-top:1px solid rgba(24,24,24,.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 #181818;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(24,24,24,.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(24,24,24,.28);color:#181818;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:#181818}
.nwform textarea{resize:vertical;min-height:90px}
.nwform button{justify-self:start;margin-top:12px;background:#181818;color:#FAFAF8;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(24,24,24,.28);background:transparent;color:#181818;cursor:pointer;border-radius:40px;transition:all .2s var(--ease)}
.fbtn:hover{border-color:#181818}
.fbtn.on{background:#181818;color:#FAFAF8;border-color:#181818}
.fbtn .fn{opacity:.45;font-size:.85em}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.gtile{display:block;width:100%;color:#181818;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 #181818;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:#e9e9e6}
.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:#181818;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(250,250,248,.5);color:#181818;border:1px solid rgba(24,24,24,.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(250,250,248,.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:#f3f3f0;border:1px solid rgba(24,24,24,.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:#FAFAF8;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:#FAFAF8;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(24,24,24,.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(24,24,24,.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 #181818;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(250,250,248,.55);border:1px solid rgba(24,24,24,.3);color:#181818;cursor:pointer;transition:background .25s var(--ease),transform .35s var(--ease)}
.pv-x:hover{background:#181818;color:#FAFAF8;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(24,24,24,.06);border:1px solid rgba(24,24,24,.3);color:#181818;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:#181818;color:#FAFAF8}
.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:#181818;color:#FAFAF8}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(250,250,248,.55)}.pv-nav.prev{left:8px}.pv-nav.next{right:8px}.pv-x{background:rgba(250,250,248,.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(#181818 var(--ringA),transparent var(--ringA));-webkit-mask:linear-gradient(#FAFAF8 0 0) content-box,linear-gradient(#FAFAF8 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#FAFAF8 0 0) content-box,linear-gradient(#FAFAF8 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(24,24,24,.28)}
.pv-nav:hover{background:rgba(24,24,24,.08);color:#181818}
.pv-x:hover{background:rgba(250,250,248,.55);color:#181818;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:#FAFAF8;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:#FAFAF8;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:#FAFAF8;overflow:hidden}
.proj-video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#FAFAF8}
.proj-film.stills-led img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#FAFAF8}
.proj-embed{margin-bottom:0;background:#FAFAF8;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(24,24,24,.28);background:transparent;color:#181818;cursor:pointer;border-radius:40px;transition:all .2s var(--ease)}
.ftab:hover{border-color:#181818}
.ftab.on{background:#181818;color:#FAFAF8;border-color:#181818}
@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(24,24,24,.72);max-width:52ch}
.proj-facts{display:flex;flex-direction:column;border-top:1px solid rgba(24,24,24,.16)}
.pf{display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid rgba(24,24,24,.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:#181818}
.jcard .jimg{display:block;overflow:hidden;aspect-ratio:16/10;background:#e9e9e6}
.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(24,24,24,.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(24,24,24,.85)}
.art-body p{margin-bottom:1.5em}
.art-body a{border-bottom:1px solid rgba(24,24,24,.4);transition:border-color .25s var(--ease)}
.art-body a:hover{border-color:#181818}
/* 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:#181818;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:#181818;font-weight:700}
.art-foot{margin-top:7vh;border-top:1px solid rgba(24,24,24,.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(24,24,24,.55);background:rgba(250,250,248,.3);color:#181818;cursor:pointer;border-radius:60px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .3s var(--ease)}
.reel-btn:hover{background:rgba(250,250,248,.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(250,250,248,.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:#FAFAF8}
.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(250,250,248,.55);border:1px solid rgba(24,24,24,.3);color:#181818;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:#181818;color:#FAFAF8;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(24,24,24,.16)}
.faqi:last-of-type{border-bottom:1px solid rgba(24,24,24,.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 #181818;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(24,24,24,.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:#181818;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(24,24,24,.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:#181818;font:inherit;cursor:pointer}
.rtile:focus-visible{outline:2px solid #181818;outline-offset:4px}
.rimg{display:block;position:relative;overflow:hidden;aspect-ratio:16/9;background:#e9e9e6;border:1px solid rgba(24,24,24,.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(24,24,24,.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(24,24,24,.12)}
.sd-faq details:last-child{border-bottom:1px solid rgba(24,24,24,.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:#181818;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 #181818;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(24,24,24,.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(24,24,24,.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:#181818}
.rrow-link:hover span{transform:translateX(5px)}
.rrow-media{display:block;width:100%;background:none;border:0;padding:0;cursor:pointer;color:#181818}
.rrow-media:focus-visible{outline:2px solid #181818;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:#e9e9e6;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 #181818;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(250,250,248,.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:#FAFAF8}
.lb-fig figcaption{font-size:12px;letter-spacing:.14em;color:rgba(24,24,24,.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(250,250,248,.55);border:1px solid rgba(24,24,24,.3);color:#181818;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(24,24,24,.06);border:1px solid rgba(24,24,24,.3);color:#181818;cursor:pointer}
.lb-nav:hover{background:#181818;color:#FAFAF8}
.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(250,250,248,.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:#181818;margin:-4px 0 0 -4px}
.cur-ring{width:36px;height:36px;border:1.5px solid #181818;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, #FAFAF8 26%, rgba(250,250,248,0) 100%);
  mask:radial-gradient(ellipse closest-side at center, #FAFAF8 26%, rgba(250,250,248,0) 100%)}
.glowzone:hover::before{opacity:.13}
@media (prefers-reduced-motion: reduce){.glowzone::before{display:none}}
@media (hover:none){.glowzone::before{display:none}}


/* ---- text wordmark (placeholder identity, no logo asset yet) -------------------
   .logo was built around an <img>; these rules make it work with live text so the
   brand name can be changed in one constant in the generator. Replace with an <img>
   once a real wordmark exists. */
.logo.wordmark{line-height:1;perspective:none;font-weight:900;font-size:clamp(18px,2vw,24px);
  letter-spacing:-.02em;text-transform:uppercase;text-decoration:none;color:inherit;white-space:nowrap}
.logo.wordmark:hover,.logo.wordmark:focus-visible{opacity:.72}
.foot .brand-logo.wordmark-lg{line-height:1;font-weight:900;text-transform:uppercase;
  font-size:clamp(34px,7vw,96px);letter-spacing:-.03em}
#intro .wordmark-lg{font-weight:900;text-transform:uppercase;font-size:clamp(28px,5vw,64px);
  letter-spacing:-.03em;color:#181818}
.hero-sub{max-width:52ch;margin-top:2.2vh;font-size:clamp(14px,1.15vw,17px);line-height:1.55;opacity:.82}

/* Hero headline: the brand line runs to a 15-character word ("cinematographer"),
   which clipped the right edge at the inherited clamp max of 168px. Capped so the
   longest word fits inside the wrap at 1440 and above. */
.hero h1{font-size:clamp(40px,7.2vw,104px)}
/* Placeholder wordmark: the two words read as one at the display tracking. */
.logo.wordmark{letter-spacing:.01em}
.foot .brand-logo.wordmark-lg{letter-spacing:-.015em}


/* =====================================================================================
   LIGHT THEME (3 Sep 2026). The stylesheet above is the Northworks dark theme with every
   colour token inverted: #000 -> #FAFAF8 off-white, #fff -> #181818 graphite, and the two
   rgba families swapped to match. Everything below re-pins the surfaces that should stay
   dark regardless (the photo hero, the footer, the film viewers and their controls) and
   applies the single accent, #C44C2F, to CTAs and link hover only, per Identity Notes.md.
   ===================================================================================== */
:root{--blk:#FAFAF8;--wht:#181818;--acc:#C44C2F;--acc-d:#a63f26}

/* header text must stay white: it sits in mix-blend-mode:difference, so white reads as
   graphite over the light page and as white over the dark hero. Same for the cursor. */
header{color:#fff} nav a::after{background:#fff} .corner{color:#fff} .burger span{background:#fff}
.scrollcue{color:#fff} .scrollcue i{background:#fff}
.cur-dot{background:#fff} .cur-ring{border-color:#fff}

/* home hero: dark photo, white type */
.hero{background:#181818;color:#fff}
.hero::after{background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.2) 40%,rgba(0,0,0,.85))}

/* .white bands were inverted to dark by the swap; keep them pure white on the off-white page */
.white{background:#fff;color:#181818}
.white .statement em{-webkit-text-stroke:1.4px #181818}
.sblock{border-top-color:rgba(24,24,24,.16)} .sblock:last-child{border-bottom-color:rgba(24,24,24,.16)}
.sb-deliv li{border-color:rgba(24,24,24,.22)} .sb-link{border-bottom-color:rgba(24,24,24,.3)} .sb-reel{border-color:rgba(24,24,24,.22)}
.svc > a,.svc > .row{border-top-color:rgba(24,24,24,.16)}
.svc > a:last-child,.svc > .row:last-child{border-bottom-color:rgba(24,24,24,.16)}

/* footer stays dark */
footer{background:#181818;color:#FAFAF8;border-top-color:rgba(255,255,255,.12)}

/* film containers, the pop-out, the lightbox and the reel overlay stay dark */
.proj-film,.proj-video,.proj-film.stills-led img,.proj-embed,.reel-frame video,.lb-fig img,.pv-media,.pv-media video,.pv-media iframe{background:#000}
.pv-bd{background:rgba(0,0,0,.86)} .pv-card{background:#0a0a0a;border-color:rgba(255,255,255,.14);color:#fff}
.pv-brief{color:rgba(255,255,255,.82)} .pv-deliv span{border-color:rgba(255,255,255,.24)} .pv-cta{border-bottom-color:#fff;color:#fff}
.pv-x,.pv-nav,.lb-x,.lb-nav,.reel-x{background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.3);color:#fff}
.pv-x:hover,.pv-nav:hover,.lb-nav:hover{background:rgba(255,255,255,.08);color:#fff}
.pv-x::after,.pv-nav::after,.lb-x::after,.lb-nav::after,.reel-x::after{background:conic-gradient(#fff var(--ringA),transparent var(--ringA))}
.lb-bd{background:rgba(0,0,0,.94)} .lb-fig figcaption{color:rgba(255,255,255,.65)}
.reel-bd{background:rgba(0,0,0,.93)} .reel-btn{border-color:rgba(255,255,255,.55);background:rgba(0,0,0,.3);color:#fff}
.gtile .gplay,.project .gplay,.rtile .gplay{background:rgba(0,0,0,.5);color:#fff;border-color:rgba(255,255,255,.6)}

/* the one accent: CTA buttons and link hover */
.cbadge{background:var(--acc);border-color:var(--acc);color:#fff}
.cbadge:hover{background:var(--acc-d);border-color:var(--acc-d)}
.nwform button{background:var(--acc);color:#fff}
.cta-line span{color:var(--acc)}
.cta-line:hover,.rrow-link:hover,.sb-link:hover,.art-body a:hover,.foot nav.fnav a:hover,.cinfo .mail-lg:hover{color:var(--acc)}
.nwform input:focus,.nwform textarea:focus{border-color:var(--acc)}

/* 7 Oct 2026: the contact address got longer with the rename (alex@yorkshiredrones.com).
   Scale it with the viewport on phones, and let it break anywhere as a last resort,
   so it can never push the page wider than the screen. */
.cinfo .mail-lg{overflow-wrap:anywhere}
@media (max-width:600px){.cinfo .mail-lg{font-size:4.8vw}}

/* 7 Oct 2026: company disclosure under the footer (trading name, company no., registered
   office, VAT). Deliberately very small, but kept above 4.5:1 contrast on the dark footer.
   Extra bottom room so the floating quote badge never sits on top of it. */
footer .legal-note{margin-top:5vh;padding-bottom:76px;font-size:10.5px;line-height:1.6;letter-spacing:.02em;opacity:.55}
footer .legal-note p{margin:0;max-width:880px}
/* services: starting price under each service, so the page carries the figure it promises (7 Oct) */
.sb-from{margin:0 0 18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
/* Long single words in display headings (7 Oct). The generator puts class fitw and --lw (the
   longest word in em) on headings that could overflow; each shrinks only as far as that word
   needs to fit the column, and min() leaves it at its normal size wherever it already fits.
   Column = wrap width less gutters (40px, 22px at 820 and below), with room for a scrollbar. */
.phero h1.fitw{font-size:min(clamp(56px,12vw,220px),calc((min(100vw,1580px) - 100px) / var(--lw)))}
.phero.proj h1.fitw{font-size:min(clamp(44px,9vw,150px),calc((min(100vw,1580px) - 100px) / var(--lw)))}
.nextproj .np-t.fitw{font-size:min(clamp(40px,8vw,140px),calc((min(100vw,1580px) - 100px) / var(--lw)))}
@media(max-width:820px){
 .phero h1.fitw{font-size:min(clamp(56px,12vw,220px),calc((100vw - 48px) / var(--lw)))}
 .phero.proj h1.fitw{font-size:min(clamp(44px,9vw,150px),calc((100vw - 48px) / var(--lw)))}
 .nextproj .np-t.fitw{font-size:min(clamp(40px,8vw,140px),calc((100vw - 48px) / var(--lw)))}
}
@media(max-width:620px){
 .phero h1.fitw{font-size:min(clamp(40px,13vw,56px),calc((100vw - 48px) / var(--lw)))}
}
.hero h1.fitw{font-size:min(clamp(40px,7.2vw,104px),calc((min(100vw,1580px) - 100px) / var(--lw)))}
@media(max-width:820px){.hero h1.fitw{font-size:min(clamp(40px,7.2vw,104px),calc((100vw - 48px) / var(--lw)))}}
@media(max-width:900px){.rrow-txt h2.fitw{font-size:min(clamp(34px,4.1vw,54px),calc((100vw - 48px) / var(--lw)))}}
/* stills-led heroes: the img height attribute (1200) beat aspect-ratio, so the hero rendered 1200px
   tall at every width and cropped to a sliver on phones. height:auto lets the 16:9 ratio apply (7 Oct). */
.proj-film.stills-led img{height:auto}
/* four pillars since Content joined (7 Oct): two by two on desktop, stacked on phones */
.pillars.four{grid-template-columns:repeat(2,1fr)}
@media(max-width:820px){.pillars.four{grid-template-columns:1fr}}