
:root{--bg:#050505;--fg:#f4f1eb;--muted:#a8a39a;--subtle:#26231f;--line:rgba(244,241,235,.16);--soft:rgba(244,241,235,.08);--max:1480px;--pad:clamp(18px,3vw,48px);--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--sans:'Archivo',Inter,Helvetica,Arial,sans-serif;--display:'Pixelify Sans','IBM Plex Mono',monospace;--title:'Jersey 25','Pixelify Sans',monospace}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:450;letter-spacing:-.02em}a{color:inherit;text-decoration:none}img,video{max-width:100%;display:block}button,input{font:inherit}.site-header{position:fixed;top:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px var(--pad);color:var(--fg)}.brand{display:inline-flex;align-items:center;gap:10px;width:fit-content}.brand-mark{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 0 22px rgba(255,255,255,.14)) drop-shadow(0 0 6px rgba(255,255,255,.08));transition:opacity .35s}.brand-wordmark{font-family:var(--sans);font-weight:900;font-size:13px;line-height:.86;letter-spacing:-.06em}.nav{display:flex;gap:clamp(14px,2vw,30px);font-family:var(--mono);text-transform:uppercase;font-size:12px;letter-spacing:.06em}.nav,.header-cta{text-shadow:0 1px 3px rgba(0,0,0,.55)}.nav a,.header-cta{opacity:.84;transition:opacity .2s ease}.nav a:hover,.header-cta:hover{opacity:1}.header-cta{justify-self:end;font-family:var(--mono);text-transform:uppercase;font-size:12px;letter-spacing:.06em;border-bottom:1px solid currentColor}.hero{min-height:100svh;position:relative;display:grid;align-items:end;overflow:hidden}.hero-media,.hero-media video,.hero-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-fallback{background-size:cover;background-position:center;z-index:-2}.hero-media video{z-index:-1;filter:saturate(.95) contrast(1.02) brightness(.82)}.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.12) 40%,rgba(0,0,0,.78))}.hero-content{position:relative;z-index:1;padding:0 var(--pad) 90px;max-width:1160px}.eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--muted);margin:0 0 18px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(64px,13vw,214px);line-height:.78;letter-spacing:-.095em;font-weight:900;max-width:10ch;margin-bottom:28px}h2{font-size:clamp(34px,5.6vw,92px);line-height:.91;letter-spacing:-.075em;font-weight:850;margin-bottom:0}h3{font-size:clamp(20px,2vw,30px);line-height:1;letter-spacing:-.05em;margin-bottom:12px}p{font-size:clamp(16px,1.35vw,21px);line-height:1.35;color:rgba(244,241,235,.84)}.hero-copy{max-width:610px;color:rgba(244,241,235,.88)}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}.button{display:inline-flex;justify-content:center;align-items:center;min-height:48px;padding:0 22px;border:1px solid var(--line);border-radius:999px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:12px;transition:transform .2s ease,background .2s ease,color .2s ease}.button:hover{transform:translateY(-1px)}.button-primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}.button-ghost{background:rgba(0,0,0,.25)}.hero-index{position:absolute;bottom:22px;right:var(--pad);left:var(--pad);z-index:1;display:flex;justify-content:flex-end;gap:18px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:rgba(244,241,235,.66)}.section-pad{padding:clamp(74px,10vw,150px) var(--pad);max-width:var(--max);margin:0 auto}.intro-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr);gap:clamp(32px,8vw,120px);align-items:start}.intro-copy{border-left:1px solid var(--line);padding-left:clamp(22px,3vw,44px)}.marquee{overflow:hidden;border-block:1px solid var(--line)}.marquee-track{display:flex;width:max-content;gap:42px;padding:18px 0;animation:marquee 34s linear infinite;font-family:var(--mono);text-transform:uppercase;font-size:13px;letter-spacing:.08em;color:var(--muted)}@keyframes marquee{to{transform:translateX(-50%)}}.section-header{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:30px}.text-link{font-family:var(--mono);text-transform:uppercase;font-size:12px;letter-spacing:.06em;border-bottom:1px solid currentColor;color:var(--muted)}.project-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.project-grid.large{grid-template-columns:repeat(3,minmax(0,1fr))}.project-card{position:relative;min-height:460px;overflow:hidden;background:var(--subtle);border:1px solid var(--line);isolation:isolate}.project-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.04);transform:scale(1.01);transition:transform .6s ease,filter .4s ease}.project-card:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.78));z-index:1}.project-card:hover img{transform:scale(1.055);filter:saturate(1.06) contrast(1.05)}.project-card-body{position:absolute;z-index:2;inset:auto 0 0 0;padding:18px}.project-meta{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:11px;color:rgba(244,241,235,.68)}.project-card h3{max-width:9em}.project-card p{font-size:14px;line-height:1.3;color:rgba(244,241,235,.75);max-width:34em}.tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}.tag-row span{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.06em;padding:5px 7px;border:1px solid rgba(244,241,235,.22);border-radius:999px;color:rgba(244,241,235,.74)}.split-feature{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,90px);align-items:center}.stack-images{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stack-images img{height:clamp(320px,38vw,620px);object-fit:cover;border:1px solid var(--line)}.stack-images img:nth-child(2){transform:translateY(44px)}.service-list{list-style:none;padding:0;margin:38px 0 0;border-top:1px solid var(--line)}.service-list li{display:grid;grid-template-columns:54px 1fr;gap:12px;padding:18px 0;border-bottom:1px solid var(--line);font-size:clamp(21px,2.6vw,42px);line-height:.95;letter-spacing:-.055em}.service-list span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);padding-top:.4em}.stats-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;padding-top:0}.stat{background:var(--soft);border:1px solid var(--line);padding:22px;min-height:154px;display:flex;flex-direction:column;justify-content:space-between}.stat strong{font-size:clamp(38px,5vw,78px);line-height:.9;letter-spacing:-.08em}.stat span{font-family:var(--mono);color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}.contact-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}.contact-strip a{font-size:clamp(34px,7vw,122px);line-height:.9;letter-spacing:-.08em;font-weight:850;border-bottom:.06em solid currentColor}.footer{max-width:var(--max);margin:0 auto;padding:36px var(--pad);display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--line)}.footer p{font-size:14px;color:var(--muted);margin-bottom:0}.footer-links{display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.page-hero{min-height:70svh;padding:154px var(--pad) 80px;max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;justify-content:end}.page-hero.slim{min-height:58svh}.page-hero h1{max-width:12ch;font-size:clamp(54px,9vw,150px)}.page-hero p:not(.eyebrow){max-width:760px}.work-controls-wrap{padding-top:24px}.work-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}.filter-button{border:1px solid var(--line);color:var(--muted);background:transparent;border-radius:999px;padding:11px 14px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;cursor:pointer}.filter-button.active,.filter-button:hover{color:var(--bg);background:var(--fg);border-color:var(--fg)}.archive-section{padding-top:40px}.search-label{display:grid;gap:7px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.search-label input{width:min(360px,70vw);background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--fg);padding:13px 14px;border-radius:0;outline:none}.search-label input:focus{border-color:rgba(244,241,235,.6)}.archive-table{border-top:1px solid var(--line)}.archive-row{display:grid;grid-template-columns:72px 1.4fr 1fr .8fr 1fr;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline;font-size:14px}.archive-row.header{color:var(--muted);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;position:sticky;top:70px;background:var(--bg);z-index:3}.archive-row span{overflow-wrap:anywhere}.archive-row .muted{color:var(--muted)}.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:clamp(28px,7vw,100px)}.prose p{max-width:720px}.highlight-line{display:inline;padding:2px 5px;color:var(--fg);background:rgba(244,241,235,.12)}.image-triptych{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:8px;padding-top:0}.image-triptych img{height:clamp(360px,45vw,700px);width:100%;object-fit:cover;border:1px solid var(--line)}.services-panel{padding-top:20px}.services-matrix{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:32px}.services-matrix article{min-height:330px;background:var(--soft);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column}.services-matrix article span{font-family:var(--mono);color:var(--muted);font-size:11px;letter-spacing:.08em;margin-bottom:auto}.services-matrix p{font-size:15px;color:var(--muted)}.client-groups{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}.client-group h3{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}.client-group ul{list-style:none;padding:0;margin:0}.client-group li{font-size:18px;line-height:1.18;margin-bottom:7px;letter-spacing:-.03em}.contact-hero{min-height:100svh;display:grid;grid-template-columns:1.2fr .8fr}.contact-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.78)}.contact-panel{padding:140px var(--pad) 60px;display:flex;flex-direction:column;justify-content:end;border-left:1px solid var(--line)}.contact-panel h1{font-size:clamp(52px,8vw,118px);max-width:8ch}.contact-methods{display:flex;flex-direction:column;gap:12px;margin-top:34px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:13px}.contact-methods a{border-bottom:1px solid currentColor;width:fit-content}.enquiry-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,7vw,100px)}.brief-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.brief-list li{padding:17px 0;border-bottom:1px solid var(--line);font-size:clamp(18px,2vw,28px);letter-spacing:-.04em}.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}@media(max-width:1060px){.project-grid,.project-grid.large{grid-template-columns:repeat(2,minmax(0,1fr))}.intro-grid,.split-feature,.two-col,.contact-hero,.enquiry-grid{grid-template-columns:1fr}.contact-media{min-height:54svh}.services-matrix,.stats-band{grid-template-columns:repeat(2,1fr)}.client-groups{grid-template-columns:repeat(2,1fr)}.archive-row{grid-template-columns:62px 1.2fr 1fr}.archive-row span:nth-child(4),.archive-row span:nth-child(5){display:none}}@media(max-width:720px){.site-header{grid-template-columns:1fr auto;mix-blend-mode:normal;background:linear-gradient(180deg,rgba(5,5,5,.88),rgba(5,5,5,0))}.nav{justify-self:end;gap:13px}.header-cta{display:none}.brand-mark{width:48px;height:48px}.brand-wordmark{display:none}h1{font-size:clamp(58px,22vw,110px)}.hero-content{padding-bottom:74px}.hero-index{display:none}.section-header{align-items:start;flex-direction:column}.project-grid,.project-grid.large{grid-template-columns:1fr}.project-card{min-height:420px}.stats-band,.services-matrix,.client-groups{grid-template-columns:1fr}.image-triptych{grid-template-columns:1fr}.image-triptych img{height:54svh}.footer{flex-direction:column}.footer-links{align-items:flex-start}.contact-strip a{font-size:clamp(28px,11vw,52px)}.archive-row{grid-template-columns:54px 1fr;gap:12px}.archive-row span:nth-child(3){display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee-track{animation:none}.project-card img,.button,.reveal{transition:none}}
/* Story strip — ambient drone texture */
.story-strip{overflow:hidden;border-block:1px solid var(--line);height:clamp(120px,18vw,240px);position:relative}
.story-strip::before,.story-strip::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.story-strip::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.story-strip::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.story-strip-inner{display:flex;gap:4px;height:100%;animation:story-scroll 38s linear infinite}
.story-strip-inner img{height:100%;width:auto;object-fit:cover;filter:saturate(.6) brightness(.55) contrast(1.1);flex-shrink:0}
.story-strip-inner.is-live{animation:none;will-change:transform}
.story-strip-inner.is-live img{background:#111}
@keyframes story-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.section-pad.archive-section{padding-top:clamp(40px,6vw,80px)}
.archive-link{color:inherit;border-bottom:1px solid rgba(244,241,235,.25);transition:border-color .2s}.archive-link:hover{border-color:var(--fg)}
/* ── Silver theme (landing-page texture) ─────────────────────────── */
body.theme-silver{background:transparent;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
html:has(body.theme-silver){background:#171717}
.bg-silver{position:fixed;inset:0;z-index:-1;background:linear-gradient(rgba(0,0,0,.14),rgba(0,0,0,.14)),#1a1a1a url('../assets/images/bg-texture.jpg') center/cover no-repeat;pointer-events:none}
body.theme-dark .bg-silver{background:linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)),#0e0e0e url('../assets/images/bg-texture.jpg') center/cover no-repeat}
html:has(body.theme-dark){background:#0b0b0b}
body.theme-silver .eyebrow,body.theme-silver .footer p,body.theme-silver .footer-links{color:rgba(255,255,255,.72)}
body.theme-silver .footer{border-top-color:rgba(255,255,255,.28)}
body.theme-silver .client-group h3{color:rgba(255,255,255,.75);border-bottom-color:rgba(255,255,255,.3)}
body.theme-silver .client-group li{color:#fff}
/* ── About (simple) ──────────────────────────────────────────────── */
.about-simple{max-width:var(--max);margin:0 auto;padding:clamp(150px,24vh,240px) var(--pad) 0;text-align:center}
.about-simple h1{font-size:clamp(34px,5.2vw,68px);line-height:.98;letter-spacing:-.05em;max-width:16ch;margin:0 auto 34px}
.about-text{max-width:760px;margin:0 auto;font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:rgba(255,255,255,.92)}
.about-text p{margin:0 0 20px}
.about-clients{padding-top:clamp(70px,9vw,130px);text-align:left}
/* ── Fly zones ───────────────────────────────────────────────────── */
.flyzones{padding:clamp(120px,18vh,170px) var(--pad) 0;max-width:var(--max);margin:0 auto}
.flyzones h1{font-size:clamp(30px,4.2vw,56px);letter-spacing:-.05em;line-height:1;margin-bottom:12px}
.flyzones p{max-width:720px;color:rgba(255,255,255,.82);margin-bottom:22px}
.map-frame{position:relative;overflow:hidden;width:100%;height:min(78vh,900px);background:#111;box-shadow:0 30px 80px rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25)}
.map-frame iframe{position:absolute;left:0;right:0;top:-56px;width:100%;height:calc(100% + 56px);border:0}
/* ── Display font: match the front page (Pixelify Sans) for titles, nav & labels ── */
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
h1{font-size:clamp(40px,7vw,110px);line-height:.95;max-width:14ch}
.page-hero h1,.contact-panel h1{font-size:clamp(32px,5.2vw,80px);max-width:18ch;letter-spacing:.04em}
.about-simple h1{font-size:clamp(26px,4vw,54px);max-width:22ch;letter-spacing:.04em;line-height:1.05}
.flyzones h1{font-size:clamp(26px,3.6vw,48px);letter-spacing:.04em}
.enquiry h2{letter-spacing:.06em}
.nav,.header-cta,.eyebrow,.client-group h3,.footer-links,.filter-button{font-family:var(--display)}
.nav,.header-cta{font-size:11px;letter-spacing:.3em}
.eyebrow{font-size:10px;letter-spacing:.35em}
.client-group h3{font-size:11px;letter-spacing:.3em;font-weight:500}
/* ── Titles: Jersey 25 (pixel-style but readable at size); small labels stay Pixelify ── */
h1,h2{font-family:var(--title);font-weight:400;letter-spacing:.03em}
h1{font-size:clamp(48px,9vw,140px);line-height:.92}
.page-hero h1,.contact-panel h1{font-size:clamp(44px,7.5vw,112px);max-width:16ch;letter-spacing:.03em}
.about-simple h1{font-size:clamp(34px,5.4vw,72px);max-width:20ch;letter-spacing:.03em;line-height:1}
.flyzones h1{font-size:clamp(34px,4.8vw,64px);letter-spacing:.03em}
.enquiry h2{font-size:clamp(28px,3vw,40px);letter-spacing:.04em}
/* ── About collage: photos flanking the text, slightly overlapping ── */
.about-hero{position:relative;min-height:calc(3*var(--fh) + 2*var(--gap) + 40px)}
.about-hero>h1,.about-hero>.about-text{position:relative;z-index:1}
.about-collage{position:absolute;inset:0;z-index:0;pointer-events:none}
.about-fig{position:absolute;margin:0;padding:0;background:none;box-shadow:none;transform:none;pointer-events:auto;transition:transform .35s ease}
.about-fig:hover{transform:scale(1.03);z-index:3}
.about-fig img{display:block;width:100%;height:auto}
/* uniform 16:9 tiles, inner edges aligned 20px outside the text column, outer edges run to (or past) the viewport edge */
.about-hero{--inner:clamp(330px,27vw,400px);--fw:min(clamp(340px,28vw,520px),calc(50vw - var(--inner) - 20px));--fh:calc(var(--fw) * 9 / 16);--gap:14px}
.about-fig{width:var(--fw);height:var(--fh);overflow:hidden}
.about-fig img{width:100%;height:100%;object-fit:cover}
.about-fig.l{right:calc(50% + var(--inner))}
.about-fig.r{left:calc(50% + var(--inner))}
.about-simple{overflow-x:hidden;overflow-x:clip}
@media(max-width:1200px){
  .about-hero{min-height:0}
  .about-collage{position:static;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;margin:34px -4px 0;pointer-events:auto}
  .about-fig{position:static!important;width:46%!important;height:auto!important;aspect-ratio:16/9;margin:6px}
}
@media(max-width:520px){.about-fig{width:60%!important;margin:-10px 0}}
/* ── Work hero: one line, sits high so the strip + grid show on landing ── */
.page-hero.slim{min-height:0;padding:clamp(112px,15vh,150px) var(--pad) 26px;justify-content:start}
.page-hero.slim .eyebrow{margin-bottom:10px}
.page-hero.slim h1{white-space:nowrap;max-width:none;font-size:clamp(26px,4.6vw,76px);margin-bottom:0}
@media(max-width:520px){.page-hero.slim h1{white-space:normal;font-size:clamp(34px,10vw,48px)}}
/* About: compressed title, smaller quieter copy */
.about-simple h1{font-size:clamp(15px,1.5vw,22px);letter-spacing:.12em;line-height:1.3;max-width:620px;margin:0 auto 24px;font-weight:400;text-shadow:0 0 16px rgba(255,255,255,.16),0 0 1px rgba(255,255,255,.25)}
.about-text{text-shadow:0 0 14px rgba(255,255,255,.08)}
.about-hero{display:flex;flex-direction:column;justify-content:center;text-align:center}
.about-text{max-width:440px;font-size:clamp(10px,.7vw,12px);line-height:1.85;color:rgba(255,255,255,.8);text-shadow:none;letter-spacing:.01em}
.about-text p{margin:0 0 .9em}
.about-text p:last-child{margin-bottom:0}
.about-simple h1{margin-bottom:18px}
.about-text p{margin:0 0 16px}
/* silver theme on work: give controls a solid footing over the texture */
body.theme-silver .search-label input{background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.28)}
body.theme-silver .search-label input::placeholder{color:rgba(255,255,255,.55)}
body.theme-silver .search-label{color:rgba(255,255,255,.8)}
body.theme-silver .filter-button{background:rgba(0,0,0,.4);border-color:rgba(255,255,255,.28);color:rgba(255,255,255,.85)}
body.theme-silver .filter-button.active{background:#fff;color:#000}
